:root {
  /* Brand — taken from the BizJump Start logo: navy #001E48 and orange #FC5A00,
     sampled directly from the logo artwork. Navy carries the type; orange is the accent.

     The orange is NOT usable for text on light grounds: #F4701A on white is
     2.93:1, which fails even the 3:1 large-text floor, and white ON orange is
     the same 2.93:1 — so orange buttons take NAVY labels, not white ones.
     Darkening it far enough for white text produces #C45309, a brown that is
     no longer the brand colour. Orange on navy is 4.92:1 and reads well, so
     the accent does its loudest work on the dark bands. */
  --ink:        #001e48;   /* brand navy — body text AND the dark bands       */
  --ink-2:      #0a2b57;   /* raised surface on navy                          */
  --ink-3:      #1b3f6f;   /* hairline on navy                                */
  --ink-soft:   #a9b6cb;   /* muted prose on navy (7.0:1)                     */
  --ink-faint:  #8a9ab4;   /* micro-labels on navy (5.1:1)                    */
  --ink-deep:   #001334;   /* deeper navy, for the one statement band         */

  --paper:      #f4f6f9;   /* the page — cool near-white, to suit navy        */
  --paper-2:    #e8ecf2;   /* alternating band                                */
  --paper-3:    #cfd7e2;   /* hairline on light (decorative, not text)        */
  --edge:       #76849c;   /* the BOUNDARY of a control the user operates --   
                              a field, a ghost button. WCAG 1.4.11 wants 3:1  
                              for those; --paper-3 is 1.45:1 on white, which   
                              is fine for a decorative rule and not for the    
                              edge of something you are meant to click into.   
                              This is 3.78:1 on white, 3.49:1 on --paper.   */
  --white:      #ffffff;   /* card fill, lifts off the paper                  */

  --slate:      #4a5568;   /* muted prose on light (7.0:1)                    */

  --orange:      #fc5a00;  /* the brand accent — fills, marks, accents on navy */
  --orange-deep: #d94d00;  /* pressed                                          */
  --orange-lift: #ff6a14;  /* hover. Deepening the orange dropped the navy      */
                           /* label to 3.92:1; lifting it keeps 5.72:1.         */
  --orange-text: #b84200;  /* orange as TEXT on light. The brand orange is only
                              2.5-2.9:1 there, so small orange type uses this:
                              4.8:1 against the DARKEST light ground (--paper-2),
                              which is the one that actually binds. Fills, marks
                              and text on the navy bands keep the brand orange. */
  --orange-pale: #ffd6c2;  /* prose tint on the deep-navy statement band       */

  /* Type */
  /* Fallbacks are metric-matched faces declared in fonts.css, so the swap
     from fallback to webfont does not move any text. */
  --display: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', 'Plex Mono Fallback', ui-monospace, Menlo, Consolas, monospace;

  /* Form */
  --radius:    6px;
  --radius-sm: 4px;
  --rule: 1px;
  --gut: 1.75rem;
  --max: 80rem;

  /* Depth — used as an accent on hover, never as a texture */
  --lift: 0 1px 2px rgba(22,41,77,.05), 0 8px 24px -8px rgba(22,41,77,.18);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .45s;
}

/* ------------------------------------------------------------- 2. Baseline */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 60rem) { body { font-size: 1.125rem; } }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Orange is only 2.93:1 on a light ground — too weak for a focus indicator,
   which needs 3:1. Navy on light, orange on the navy bands where it is 4.9:1. */
.band-ink :focus-visible, .band-statement :focus-visible,
.hero :focus-visible { outline-color: var(--orange); }

::selection { background: var(--orange); color: var(--paper); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .85rem 1.25rem; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .8rem;
}
.skip:focus { left: .75rem; top: .75rem; }

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

/* ----------------------------------------------------------- 3. Type scale */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 560;
  font-stretch: 116%;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

.d-xl {
  font-size: clamp(2.7rem, 1.05rem + 6.3vw, 6.25rem);
  font-weight: 470;
  font-stretch: 118%;
  line-height: .96;
  letter-spacing: -.028em;
}
.d-l {
  font-size: clamp(2.05rem, 1.1rem + 3.4vw, 3.5rem);
  font-weight: 500;
  font-stretch: 117%;
  line-height: 1;
  letter-spacing: -.026em;
}
.d-m {
  font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.6rem);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -.022em;
}
.d-s {
  font-size: clamp(1.18rem, 1rem + .78vw, 1.5rem);
  font-weight: 600;
  font-stretch: 110%;
  line-height: 1.18;
  letter-spacing: -.014em;
}

/* The one type risk: a serif italic clause inside a grotesque headline.
   Industrial execution + editorial judgement, stated in the type itself. */
.turn {
  font-family: var(--body);
  font-style: italic;
  font-weight: 380;
  font-stretch: normal;
  letter-spacing: -.012em;
  display: block;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* Below 22rem a long word at the display size -- "Commercialization" is
   255px -- can be wider than the column: the 280px cover screen of a folding
   phone is the real case. Only there, let headings hyphenate (html is
   lang="en") and break as a last resort, rather than scroll sideways. At
   320px and up nothing changes: every heading already fits. */
@media (max-width: 21.999rem) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* No colour of its own — it must inherit, or it renders ink-on-ink and
   disappears completely inside .band-ink. */
.lede {
  font-size: clamp(1.16rem, 1rem + .78vw, 1.42rem);
  line-height: 1.48;
}

.prose { max-width: 40rem; }
.prose-wide { max-width: 52rem; }
.muted { color: var(--slate); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: .75rem;
}
.eyebrow::before {
  content: ""; flex: none;
  width: 1.75rem; height: var(--rule);
  background: var(--orange);
}

.mono {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}

/* ------------------------------------------------------------- 4. Skeleton */

.wrap {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding-inline: 1.25rem;
}
@media (min-width: 48rem) { .wrap { padding-inline: 2.25rem; } }
@media (min-width: 75rem) { .wrap { padding-inline: 3rem; } }

.section { padding-block: clamp(3.75rem, 2rem + 6.5vw, 7.5rem); }
/* Space under a section header. Was an inline clamp, which CSS dropped:
   math functions require whitespace around + and -, so `1.2rem+2vw`
   invalidated the whole declaration and every header sat flush on the
   content below it. */
.section-head { margin-bottom: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
.section-tight { padding-block: clamp(2.75rem, 1.5rem + 4vw, 5rem); }

.band-2 { background: var(--paper-2); }

.band-ink { background: var(--ink); color: var(--paper); }
.band-ink .muted { color: var(--ink-soft); }
.band-ink .eyebrow { color: var(--ink-soft); }
.band-ink .eyebrow::before { background: var(--orange); }
.band-ink .mono { color: var(--ink-soft); }
.band-ink a { color: var(--paper); }

/* The one emphatic band, used once per page at most. Deep navy rather than a
   full-bleed orange: white on orange is 2.93:1, so an orange wall could carry
   no readable text, and at full width the accent stops being an accent. */
.band-statement { background: var(--ink-deep); color: var(--paper); }
.band-statement .muted, .band-statement p { color: var(--orange-pale); }
.band-statement h1, .band-statement h2, .band-statement h3 { color: var(--paper); }
.band-statement .eyebrow { color: var(--orange-pale); }
.band-statement .eyebrow::before { background: var(--orange); }

.rule { height: var(--rule); background: var(--paper-3); border: 0; margin: 0; }
.band-ink .rule { background: var(--ink-3); }

/* Editorial grid: 12 columns, used asymmetrically.
   Mobile-first — every child spans full width and stacks. The .c-* placements
   below only take effect once there is room for them. */
.grid {
  display: grid;
  /* One column below the breakpoint — NOT 12 with everything spanning full
     width. Twelve columns carry eleven 28px gaps, and gaps do not shrink even
     when minmax(0,1fr) columns collapse to zero: that is 308px of irreducible
     width, which overflows a 320px phone before any content exists. */
  grid-template-columns: 1fr;
  gap: var(--gut);
}
.grid > * { grid-column: 1 / -1; }
.c-full { grid-column: 1 / -1; }

@media (min-width: 62rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .c-1-5  { grid-column: 1 / 6; }
  .c-1-6  { grid-column: 1 / 7; }
  .c-1-7  { grid-column: 1 / 8; }
  .c-1-8  { grid-column: 1 / 9; }
  .c-2-8  { grid-column: 2 / 9; }
  .c-4-13 { grid-column: 4 / 13; }
  .c-6-13 { grid-column: 6 / 13; }
  .c-7-13 { grid-column: 7 / 13; }
  .c-8-13 { grid-column: 8 / 13; }
  .c-9-13 { grid-column: 9 / 13; }
}

/* ------------------------------------------------------------- 5. Controls */

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 1.6rem; min-height: 3rem;
  border: var(--rule) solid transparent;
  border-radius: var(--radius-sm);
  /* Navy label, not white: white on #f4701a is 2.93:1 and fails AA. Navy on
     the same orange is 4.92:1 and keeps the exact brand colour. */
  background: var(--orange); color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform .2s var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--orange-lift); transform: translateY(-1px); box-shadow: var(--lift); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .arw { transition: transform .28s var(--ease); }
.btn:hover .arw { transform: translateX(.3rem); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--edge); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.band-ink .btn-ghost { color: var(--paper); border-color: var(--ink-3); }
.band-ink .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btns { display: flex; flex-wrap: wrap; gap: .8rem; }

.tlink {
  font-family: var(--mono); font-size: .73rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem;
  padding-block: .4rem;
  border-bottom: var(--rule) solid var(--paper-3);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tlink:hover { border-color: var(--orange); color: var(--orange-text); }
.tlink .arw { transition: transform .28s var(--ease); }
.tlink:hover .arw { transform: translateX(.3rem); }
.band-ink .tlink { color: var(--paper); border-color: var(--ink-3); }
.band-ink .tlink:hover { color: var(--orange); border-color: var(--orange); }
.band-statement .tlink { color: var(--paper); border-color: rgba(255,255,255,.35); }
.band-statement .tlink:hover { color: var(--paper); border-color: var(--paper); }

/* ------------------------------------------------------------- 6. Masthead */

.mast {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--rule) solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mast[data-stuck="true"] {
  border-bottom-color: var(--paper-3);
  box-shadow: 0 1px 20px -8px rgba(22,41,77,.22);
}
.mast-in { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }

.brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--ink);
  margin-right: auto; flex: none;
}
/* The wordmark is an image, so it is sized by height and lets width follow.
   The intrinsic width/height attributes on the <img> reserve the box, so the
   masthead does not jump when it loads. */
.brand-logo {
  height: 3rem; width: auto; flex: none;
  display: block;
}
@media (max-width: 26rem) { .brand-logo { height: 2.5rem; } }

.nav { display: none; }
@media (min-width: 64rem) { .nav { display: flex; align-items: center; gap: .1rem; } }
/* Six items, the logo and the CTA only just fit at 1024px: "What we do" was
   being squeezed to 61px and wrapping onto three lines. Between the nav's
   breakpoint and 80rem the links take tighter padding, which leaves ~40px of
   room at 1024px rather than a 24px shortfall. nowrap makes any future
   overrun visible as overflow in the audit instead of a silent wrap. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
  .nav { --nav-x: .5rem; }
  .mast-in { gap: 1rem; }
}

.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .73rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
  padding: .65rem var(--nav-x, .8rem);
  white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover { color: var(--orange-text); background: var(--paper-2); }
.nav-item.is-here > .nav-link::after {
  content: ""; position: absolute; left: var(--nav-x, .8rem); right: var(--nav-x, .8rem); bottom: .28rem;
  height: 2px; background: var(--orange);
}
.nav-link .chev { transition: transform .22s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.menu {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 18rem;
  background: var(--white);
  border: var(--rule) solid var(--paper-3);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: .45rem;
  display: none;
}
.menu[data-open="true"] { display: block; }
.menu a {
  display: block; text-decoration: none;
  padding: .68rem .8rem; border-radius: var(--radius-sm);
  font-family: var(--body); font-size: .98rem; line-height: 1.3;
  transition: background var(--dur) var(--ease);
}
.menu a small {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
  margin-top: .2rem;
}
.menu a:hover { background: var(--paper-2); }

.mast-cta { display: none; }
@media (min-width: 64rem) { .mast-cta { display: inline-flex; flex: none; padding: .8rem 1.3rem; min-height: 2.75rem; } }

.burger {
  margin-left: auto;
  display: inline-flex; flex-direction: column; justify-content: center; gap: .34rem;
  width: 3rem; height: 3rem;
  background: none; border: var(--rule) solid var(--paper-3);
  border-radius: var(--radius-sm);
  cursor: pointer; padding: 0 .75rem;
}
@media (min-width: 64rem) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.42rem) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.42rem) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 4.75rem 0 0;
  background: var(--paper); z-index: 99;
  overflow-y: auto; padding: 1.5rem 1.25rem 4rem;
  display: none;
}
.drawer[data-open="true"] { display: block; }
@media (min-width: 64rem) { .drawer { display: none !important; } }
.drawer-group { border-top: var(--rule) solid var(--paper-3); }
.drawer-group:last-of-type { border-bottom: var(--rule) solid var(--paper-3); }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 1rem; padding: 1.1rem .25rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 560; font-stretch: 114%;
  font-size: 1.3rem; letter-spacing: -.022em; color: var(--ink);
  text-align: left; text-decoration: none;
}
.drawer-top .chev { transition: transform .22s var(--ease); flex: none; }
.drawer-top[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer-sub { display: none; padding: 0 .25rem 1rem; }
.drawer-sub[data-open="true"] { display: block; }
.drawer-sub a {
  display: block; text-decoration: none;
  padding: .5rem 0 .5rem 1rem;
  border-left: var(--rule) solid var(--paper-3); color: var(--slate);
}
.drawer-sub a:hover { color: var(--orange-text); border-left-color: var(--orange); }
.drawer .btn { width: 100%; justify-content: center; margin-top: 1.75rem; }

/* ---------------------------------------------------- 7. Hero (dark, home)
   A full ink band. Committing the whole first screen to one ground is what
   separates the reference sites from a page that merely starts with a
   headline. The faint graticule gives the ground drafting-paper texture —
   monochrome, ~3% contrast, never a colour wash. */

.hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem);
  background-image:
    repeating-linear-gradient(to right, rgba(244,246,249,.05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(244,246,249,.05) 0 1px, transparent 1px 88px);
  background-position: center top;
}
.hero .eyebrow { color: var(--ink-soft); }
.hero .eyebrow::before { background: var(--orange); }
.hero .muted { color: var(--ink-soft); }
.hero .btn-ghost { color: var(--paper); border-color: var(--ink-3); }
.hero .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero :focus-visible { outline-color: var(--paper); }

.hero-h {
  font-size: clamp(2.75rem, .95rem + 7.2vw, 6.4rem);
  font-weight: 460;
  font-stretch: 119%;
  line-height: .95;
  letter-spacing: -.03em;
}
.hero-h .turn { margin-top: .06em; color: var(--paper); }
.hero-aside { align-self: end; }

/* ------------------------------------------- 8. Journey diagram (the track)
   A real drawn sequence rather than four stacked text blocks: a hairline
   spine with a marker per stage, the last one filled to mark the outcome. */

.journey {
  list-style: none; margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0; padding: 0;
  display: grid; gap: 0;
}
@media (min-width: 46rem) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .journey { grid-template-columns: repeat(4, 1fr); } }

.journey-step { position: relative; padding: 2.4rem 1.75rem 1.75rem 0; }
/* the spine */
.journey-step::before {
  content: ""; position: absolute; left: 0; right: 0; top: .6rem;
  height: var(--rule); background: var(--paper-3);
}
.journey-step:last-child::before { right: 1.75rem; }
/* the marker — a square, echoing the two squares in the mark */
.journey-step::after {
  content: ""; position: absolute; left: 0; top: .6rem;
  width: .72rem; height: .72rem;
  transform: translateY(-50%);
  background: var(--paper); border: 2px solid var(--ink);
}
.journey-step:last-child::after { background: var(--orange); border-color: var(--orange); }

.band-ink .journey-step::before { background: var(--ink-3); }
.band-ink .journey-step::after { background: var(--ink); border-color: var(--paper); }
.band-ink .journey-step:last-child::after { background: var(--orange); border-color: var(--orange); }
/* :not(:last-child) matters — .band-2 .journey-step::after ties on specificity
   with .journey-step:last-child::after and would otherwise win on source
   order, hollowing out the filled end marker. */
.band-2 .journey-step:not(:last-child)::after { background: var(--paper-2); }

.journey-n {
  display: block; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--orange-text);
  margin-bottom: .8rem;
}
.band-ink .journey-n { color: var(--orange); }
.journey-step h3 { margin-bottom: .55rem; }
.journey-step p { font-size: .97rem; line-height: 1.56; color: var(--slate); margin: 0; }
.band-ink .journey-step p { color: var(--ink-soft); }

/* Compact version, used inside the hero: marks + labels only. */
.track {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 1.5rem;
  border-top: var(--rule) solid var(--ink-3);
}
.track li { list-style: none; position: relative; padding-left: 1.35rem; }
.track li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .6rem; height: .6rem;
  background: var(--ink); border: 2px solid var(--paper);
}
.track li:last-child::before { background: var(--orange); border-color: var(--orange); }
.track span {
  font-family: var(--mono); font-size: .71rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
}
.track ol { display: contents; }

/* --------------------------------------------------- 9. Cards (solutions) */

.routes { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .routes.routes-3 { grid-template-columns: repeat(3, 1fr); } }

.route {
  background: var(--white);
  border: var(--rule) solid var(--paper-3);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1rem + 1.7vw, 2.5rem);
  display: flex; flex-direction: column; gap: .9rem;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.route:hover { border-color: var(--slate); box-shadow: var(--lift); transform: translateY(-2px); }
.route:hover .route-go { color: var(--orange-text); }
.route:hover .route-go .arw { transform: translateX(.32rem); }

.route-k {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--slate);
}
.route h3 { font-size: clamp(1.28rem, 1.05rem + .9vw, 1.65rem); }
.route p { font-size: .97rem; line-height: 1.56; color: var(--slate); margin: 0; }
.route-go {
  margin-top: auto; padding-top: .7rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color var(--dur) var(--ease);
}
.route-go .arw { transition: transform .28s var(--ease); }

/* Descriptive cards — same shape, no navigation, so no hover affordance. */
.route-static { cursor: default; background: transparent; }
.route-static:hover { border-color: var(--paper-3); box-shadow: none; transform: none; }

.band-ink .route {
  background: var(--ink-2); border-color: var(--ink-3); color: var(--paper);
}
.band-ink .route p, .band-ink .route-k { color: var(--ink-soft); }
.band-ink .route-go { color: var(--paper); }
.band-ink .route:hover { border-color: var(--ink-soft); }
.band-ink .route:hover .route-go { color: var(--orange); }

/* ------------------------------------ 10. SIGNATURE — the corridor rail */

.corridors { display: grid; gap: var(--gut); }
@media (min-width: 64rem) { .corridors { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }

.rail-set { display: flex; flex-direction: column; }

.rail {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center; gap: 0 1rem;
  width: 100%; padding: 1.35rem .5rem 1.35rem 0;
  border: 0; border-top: var(--rule) solid var(--ink-3);
  background: none; color: inherit; text-align: left; cursor: pointer; font: inherit;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease);
}
.rail:hover { background: rgba(244,246,249,.04); }
.rail:last-child { border-bottom: var(--rule) solid var(--ink-3); }

.rail-code {
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
}
.rail[aria-selected="true"] .rail-code { color: var(--orange); }

.rail-body { min-width: 0; display: block; }
.rail-name {
  display: block;
  font-family: var(--display); font-weight: 560; font-stretch: 114%;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  letter-spacing: -.02em; line-height: 1.1;
  color: var(--paper); margin-bottom: .6rem;
}

/* The line itself. Width is proportional to real great-circle distance. */
.rail-line {
  display: block; position: relative; height: 2px;
  background: var(--ink-3);
  width: var(--len, 100%); max-width: 100%;
  transition: background var(--dur) var(--ease);
}
.rail-line::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 8px; height: 8px;
  border: 2px solid var(--ink-3); background: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail[aria-selected="true"] .rail-line { background: var(--orange); }
.rail[aria-selected="true"] .rail-line::after { border-color: var(--orange); background: var(--orange); }
.rail:hover .rail-line { background: var(--ink-soft); }
.rail:hover .rail-line::after { border-color: var(--ink-soft); }

/* Used on both grounds — the corridor sections on /international/ are light,
   the rail on the home page is dark. Light is the default. */
.rail-meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .65rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--slate);
}
.rail-meta b { font-weight: 500; color: var(--ink); }
.band-ink .rail-meta { color: var(--ink-faint); }
.band-ink .rail-meta b { color: var(--paper-3); }

.rail-panel {
  background: var(--ink-2);
  border: var(--rule) solid var(--ink-3);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
@media (min-width: 64rem) { .rail-panel { position: sticky; top: 6.5rem; } }
.rail-panel h3 { color: var(--paper); margin-bottom: .9rem; }
.rail-panel p { color: var(--ink-soft); font-size: 1rem; }
.rail-panel ul { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.rail-panel li {
  position: relative; padding: .55rem 0 .55rem 1.2rem;
  border-top: var(--rule) solid var(--ink-3);
  font-size: .96rem; color: var(--paper);
}
.rail-panel li::before {
  content: ""; position: absolute; left: 0; top: 1.08rem;
  width: .45rem; height: var(--rule); background: var(--orange);
}
.rail-panel[data-swap] { animation: swap .34s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }

.legend {
  font-family: var(--mono); font-size: .7rem; line-height: 1.75;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: var(--rule) solid var(--ink-3);
}

/* --------------------------------------------- 11. Contrast (the not-why) */

.contrast { display: grid; gap: 0; }
.contrast-row {
  display: grid; gap: .4rem 2.5rem;
  padding: 1.4rem 0;
  border-top: var(--rule) solid var(--paper-3);
}
@media (min-width: 56rem) {
  .contrast-row { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: baseline; }
}
.contrast-row:last-child { border-bottom: var(--rule) solid var(--paper-3); }
.contrast-a { color: var(--slate); }
.contrast-b {
  font-family: var(--display); font-weight: 540; font-stretch: 110%;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.32rem);
  letter-spacing: -.018em; line-height: 1.28;
  color: var(--ink);
}
.contrast-b::before {
  content: ""; display: inline-block;
  width: .5rem; height: .5rem; margin-right: .65rem;
  background: var(--orange); vertical-align: .08em;
}

/* On the oxblood band the same component inverts. Light is the default
   because /what-we-do/ uses .contrast on an ordinary paper section — styling
   it for the colour band first made that whole table paper-on-paper. */
.band-statement .contrast-row { border-top-color: rgba(255,255,255,.20); }
.band-statement .contrast-row:last-child { border-bottom-color: rgba(255,255,255,.20); }
.band-statement .contrast-a { color: var(--orange-pale); }
.band-statement .contrast-b { color: var(--paper); }
.band-statement .contrast-b::before { background: var(--paper); }

/* ----------------------------------------------------------- 12. Work list */

.works { border-top: 2px solid var(--ink); }
.work {
  display: grid; gap: .5rem 2.5rem;
  padding: 1.75rem 0;
  border-bottom: var(--rule) solid var(--paper-3);
}
@media (min-width: 58rem) {
  .work { grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.work-tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; padding-top: .4rem;
}
.work-tag[data-kind="active"]  { color: var(--orange-text); }
.work-tag[data-kind="project"] { color: var(--slate); }
.work-tag[data-kind="case"]    { color: var(--ink); }
.work h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); margin-bottom: .4rem; }
.work-where { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.work dl { margin: 0; display: grid; gap: .45rem; }
.work dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.work dd { margin: 0 0 .5rem; font-size: .97rem; line-height: 1.5; }
.work dd:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- 13. Lists */

.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.band-ink .steps { border-top-color: var(--paper); }
.steps li {
  counter-increment: s;
  display: grid; gap: .2rem 1.75rem;
  padding: 1.25rem 0;
  border-bottom: var(--rule) solid var(--paper-3);
}
.band-ink .steps li { border-bottom-color: var(--ink-3); }
@media (min-width: 46rem) { .steps li { grid-template-columns: 3.5rem minmax(0, 1fr); } }
/* Three children into two columns: without this the description auto-flows
   into the counter column and sets one word per line. */
.steps li > b, .steps li > span { grid-column: 2; }
@media (max-width: 45.999rem) { .steps li > b, .steps li > span { grid-column: 1; } }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--orange-text); padding-top: .3rem;
}
.band-ink .steps li::before { color: var(--orange); }
.steps b {
  display: block;
  font-family: var(--display); font-weight: 580; font-stretch: 110%;
  font-size: 1.13rem; letter-spacing: -.016em; margin-bottom: .22rem;
}
.steps span { color: var(--slate); font-size: .97rem; }
.band-ink .steps span { color: var(--ink-soft); }

.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative; padding: .68rem 0 .68rem 1.35rem;
  border-top: var(--rule) solid var(--paper-3); font-size: 1rem;
}
.ticks li:last-child { border-bottom: var(--rule) solid var(--paper-3); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem;
  width: .55rem; height: var(--rule); background: var(--orange);
}
.band-ink .ticks li { border-color: var(--ink-3); }
.band-ink .ticks li::before { background: var(--orange); }

/* -------------------------------------------------------------- 14. Notes */

.note {
  border-left: 2px solid var(--orange);
  padding: .35rem 0 .35rem 1.35rem;
  color: var(--slate); font-size: .97rem;
}
.band-ink .note { border-left-color: var(--orange); color: var(--ink-soft); }

/* A quote-scale statement. Serif, because it is a judgement, not a spec. */
.pull {
  font-family: var(--body); font-weight: 380; font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.22; letter-spacing: -.012em;
  margin: 0; text-wrap: balance;
}

/* ------------------------------------------------------------- 15. Figure
   A framed panel for a diagram, so drawn material sits on the page as a
   deliberate exhibit rather than floating loose. */

.figure {
  background: var(--white);
  border: var(--rule) solid var(--paper-3);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.band-ink .figure { background: var(--ink-2); border-color: var(--ink-3); }
.figure figcaption {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: var(--rule) solid var(--paper-3);
  font-family: var(--mono); font-size: .7rem; line-height: 1.75;
  letter-spacing: .09em; text-transform: uppercase; color: var(--slate);
}
.band-ink .figure figcaption { border-top-color: var(--ink-3); color: var(--ink-faint); }

/* ---------------------------------------------------------- 16. CTA band */

.cta { background: var(--ink); color: var(--paper); }
.cta h2 { color: var(--paper); }
.cta p { color: var(--ink-soft); }
.cta .btn-ghost { color: var(--paper); border-color: var(--ink-3); }
.cta .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta :focus-visible { outline-color: var(--paper); }

/* ------------------------------------------------------- 17. Breadcrumbs */

.crumbs {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
  padding-block: 1.15rem;
  border-bottom: var(--rule) solid var(--paper-3);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--orange-text); }
.crumbs li::after { content: "/"; margin-left: .45rem; color: var(--edge); }
.crumbs li:last-child { color: var(--ink); }
.crumbs li:last-child::after { content: ""; }

.phead { padding-block: clamp(2.75rem, 1.5rem + 4vw, 5.5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }

/* --------------------------------------------------------------- 18. Form */

.form { display: grid; gap: 1.4rem; }
@media (min-width: 46rem) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f-wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .5rem; }
.field label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
}
.field label .req { color: var(--orange-text); }
.band-ink .field label .req { color: var(--orange); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: var(--rule) solid var(--edge);
  border-radius: var(--radius-sm);
  padding: .85rem .9rem; min-height: 3rem; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--slate); }
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5568' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; padding-right: 2.5rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange); outline: 2px solid var(--ink); outline-offset: 1px;
}
.field .hint { font-size: .86rem; color: var(--slate); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--orange); border-width: 2px; }
.field .err {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange-text); display: block;
}

/* The institutional form sits on an ink band. Slate labels, slate hints and
   an oxblood error colour all fall under 3:1 there. */
.band-ink .field label { color: var(--paper-3); }
.band-ink .field .hint { color: var(--ink-soft); }
.band-ink .field .err { color: var(--orange); }
.band-ink .field[data-invalid="true"] input,
.band-ink .field[data-invalid="true"] select,
.band-ink .field[data-invalid="true"] textarea { border-color: var(--orange); }
.band-ink .field input:focus,
.band-ink .field select:focus,
.band-ink .field textarea:focus { outline-color: var(--orange); border-color: var(--orange); }

/* Consent has to read as a sentence, so it opts out of the mono uppercase
   treatment that .field label applies to every other control label. */
.consent { display: flex; gap: .8rem; align-items: flex-start; }
.consent input {
  width: 1.5rem; height: 1.5rem; min-height: 0; flex: none;
  margin-top: .2rem; accent-color: var(--orange);
}
.consent span {
  font-family: var(--body); font-size: .95rem; line-height: 1.55;
  letter-spacing: normal; text-transform: none; color: var(--slate);
}
.consent span a { color: var(--ink); text-underline-offset: .2em; }
.band-ink .consent span { color: var(--ink-soft); }
.band-ink .consent span a { color: var(--paper); }

/* Honeypot — off-screen, never display:none (bots skip hidden fields) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--paper-2); color: var(--ink);
  display: none;
}
.form-status[data-state="ok"] { display: block; border-left-color: var(--ink); }
.form-status[data-state="error"] { display: block; border-left-color: var(--orange); }
.form-status[data-state="sending"] { display: block; border-left-color: var(--slate); color: var(--slate); }

.form-status-undo {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: .2em;
  cursor: pointer;
}

.form-done { border-top: 2px solid var(--ink); padding-top: 1.75rem; outline: none; }
.band-ink .form-done { border-top-color: var(--paper); }

/* ------------------------------------------------------------- 19. Footer */

.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3.25rem, 2rem + 3vw, 5rem) 2rem; }
.foot a { color: var(--paper-3); text-decoration: none; transition: color var(--dur) var(--ease); }
.foot a:hover { color: var(--paper); }
.foot-grid { display: grid; gap: 2.25rem; }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--gut); } }
.foot h2 {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 1rem; font-stretch: normal;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot li { font-size: .95rem; }
.foot-addr { font-size: .95rem; line-height: 1.6; color: var(--ink-soft); font-style: normal; }
/* .mono defaults to slate, which only reaches 2.7:1 on the ink footer. */
.foot .mono { color: var(--ink-soft); }
.foot-brand { margin-bottom: 1.25rem; }
.foot-brand .brand-logo { height: 3.4rem; }
.foot-base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: var(--rule) solid var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-faint);
}
.foot-base ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }

/* ------------------------------------------------- 20. Touch tap targets
   Body-copy links sit on a 15px line box, far under the 44px touch minimum.
   Below the desktop breakpoint the footer, breadcrumb and list links get a
   real hit area. Desktop keeps the compact spacing. */

@media (max-width: 63.999rem) {
  /* Only the stacked spacing is redundant: the 44px link box replaces it.
     .foot-base ul is a horizontal row, and its column gap is the only
     thing separating "Privacy" from "Terms & disclaimer". */
  .foot ul { row-gap: 0; }
  .foot li a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { padding-block: .3rem; }
  .crumbs li { display: flex; align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .ticks li a, .rail-panel li a { display: inline-flex; align-items: center; min-height: 40px; }
  /* Text links ("See the portfolio", "How BizJump approaches this") are
     inline-flex already; on touch screens they get the full 44px. */
  .tlink { min-height: 44px; }
}

/* ---------------------------------------------------------- 21. Page load
   One orchestrated moment, on the hero only. Everything is gated behind the
   .js class (set by an inline script in <head>) so that with JavaScript off
   the page is simply visible rather than blank. */

.js [data-rise] { opacity: 0; transform: translateY(1.1rem); }
.js.is-ready [data-rise] {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.underline-draw {
  height: 2px; background: var(--orange);
  width: min(100%, 9rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.js .underline-draw { width: 0; }
.js.is-ready .underline-draw { width: min(100%, 9rem); transition: width .9s var(--ease) .45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-rise] { opacity: 1; transform: none; }
  .js .underline-draw { width: min(100%, 9rem); }
}

/* -------------------------------------------------------------- 22. Print */

@media print {
  .mast, .drawer, .cta, .foot { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: #fff; color: #000; background-image: none; }
}

/* ------------------------------------------------------------- 23. Flow
   A named sequence, drawn the way the journey and the hero track are: square
   markers joined by a hairline, the last one filled because it is where the
   sequence pays out. Used for the founder's commercial journey and for each
   engagement's stage. Wraps onto further lines on a phone; the <ol> carries
   the order for screen readers, so the connector is decoration only. */

.flow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; row-gap: .85rem;
}
.flow li {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.flow li::before {
  content: ""; flex: none; width: .62rem; height: .62rem;
  background: var(--paper); border: 2px solid var(--ink);
}
.flow li:not(:last-child)::after {
  content: ""; flex: none; width: 1.4rem; height: var(--rule);
  background: var(--slate); margin: 0 .75rem 0 .15rem;
}
.flow li:last-child::before { background: var(--orange); border-color: var(--orange); }
.band-2 .flow li:not(:last-child)::before { background: var(--paper-2); }
.band-ink .flow li, .band-statement .flow li { color: var(--paper); }
.band-ink .flow li:not(:last-child)::before { background: var(--ink); border-color: var(--paper); }
.band-ink .flow li:not(:last-child)::after { background: var(--ink-faint); }

/* ------------------------------------------------------------ 24. Founder */

.founder { display: grid; gap: 1.75rem var(--gut); }
@media (min-width: 62rem) {
  .founder {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head photo" "body photo";
    align-items: start;
  }
  .founder-head  { grid-area: head; }
  .founder-photo { grid-area: photo; }
  .founder-body  { grid-area: body; }
}
.founder-photo { margin: 0; max-width: 30rem; }
.founder-photo img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); background: var(--paper-2);
}
.founder-photo figcaption {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 2px solid var(--orange);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}
.founder-name { margin: 1.75rem 0 .6rem; }
.founder-roles { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.founder-roles li {
  font-family: var(--display); font-weight: 560; font-stretch: 110%;
  font-size: 1.02rem; letter-spacing: -.01em; line-height: 1.35;
}
.founder-roles li + li { color: var(--slate); font-weight: 500; }

/* The method in four sentences. Display type rather than italic: it is a
   sequence of actions, not an opinion. The last carries the orange marker. */
.credo {
  list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0;
  border-top: 2px solid var(--ink);
  display: grid; gap: .55rem;
}
.credo li {
  position: relative; padding-left: 1.35rem;
  font-family: var(--display); font-weight: 560; font-stretch: 112%;
  font-size: clamp(1.12rem, .98rem + .6vw, 1.42rem);
  letter-spacing: -.016em; line-height: 1.25;
}
.credo li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .55rem; height: .55rem; border: 2px solid var(--ink);
}
.credo li:last-child::before { background: var(--orange); border-color: var(--orange); }

/* One venture per row: the sector on the left, the account on the right. */
.ventures { border-top: 2px solid var(--ink); margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.venture {
  display: grid; gap: .75rem 2.5rem;
  padding: 1.75rem 0; border-bottom: var(--rule) solid var(--paper-3);
}
@media (min-width: 58rem) { .venture { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); } }
.venture h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }
.venture p { margin: 0 0 .9em; }
.venture p:last-child { margin-bottom: 0; }

/* Track record: six facts, each with what it is. Set as a ledger rather than
   a row of giant numbers -- three of the six are not numbers at all. */
.ledger {
  list-style: none; margin: 0; padding: 0;
  display: grid; border-top: 2px solid var(--ink);
}
@media (min-width: 46rem) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); } }
@media (min-width: 68rem) { .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ledger li { padding: 1.4rem 0 1.5rem; border-bottom: var(--rule) solid var(--paper-3); }
.ledger b {
  display: block; margin-bottom: .4rem;
  font-family: var(--display); font-weight: 580; font-stretch: 112%;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  letter-spacing: -.02em; line-height: 1.08;
}
.ledger span { color: var(--slate); font-size: .98rem; line-height: 1.5; }

.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote figcaption {
  margin-top: 1.5rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase;
}
.band-statement .quote figcaption { color: var(--orange-pale); }
.band-statement .quote figcaption b { font-weight: 500; color: var(--paper); }

/* ---------------------------------------------------------- 25. Portfolio
   Each engagement is a full section: its visual beside its account, the
   visual first on a phone. Frames are white because both supplied images are
   drawn on white -- the artwork meets the frame without a seam. */

.engagement { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); align-items: start; }
@media (min-width: 62rem) {
  .engagement { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
  .engagement-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .engagement-flip .engagement-visual { order: 2; }
  .engagement-visual { position: sticky; top: 6.5rem; }
}

.visual {
  margin: 0; background: var(--white);
  border: var(--rule) solid var(--paper-3); border-radius: var(--radius);
  aspect-ratio: 3 / 2; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.visual picture, .visual img { width: 100%; height: 100%; }
.visual img { object-fit: contain; }
.visual-cap {
  margin: .8rem 0 0; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
/* On a narrow phone a 3:2 frame is too short for the diagram's labels;
   let that one frame take the height its content needs. */
@media (max-width: 29.999rem) { .visual-diagram { aspect-ratio: auto; } }

.eng-n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .17em;
  color: var(--orange-text); margin: 0 0 .9rem;
}
.eng-title { margin: 0 0 .5rem; }
.eng-sub {
  font-family: var(--display); font-weight: 520; font-stretch: 108%;
  font-size: clamp(1.08rem, .98rem + .5vw, 1.3rem); letter-spacing: -.012em;
  color: var(--slate); margin: 0 0 1.4rem;
}

/* Metadata directly under the title, per the brief. */
.meta {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .45rem 1.25rem; margin: 0 0 1.75rem; padding: 1rem 0;
  border-top: 2px solid var(--ink); border-bottom: var(--rule) solid var(--paper-3);
}
.meta dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); padding-top: .2rem;
}
.meta dd { margin: 0; font-size: .98rem; }
.meta .status {
  color: var(--orange-text); font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; padding-top: .15rem;
}

.eng-h { font-size: 1.05rem; font-stretch: 110%; margin: 2rem 0 .8rem; }
.roles { list-style: none; margin: 0; padding: 0; }
.roles li {
  padding: .8rem 0; border-top: var(--rule) solid var(--paper-3);
  font-size: .99rem; line-height: 1.55;
}
.roles li:last-child { border-bottom: var(--rule) solid var(--paper-3); }
.roles b {
  display: block; margin-bottom: .15rem;
  font-family: var(--display); font-weight: 580; font-stretch: 110%;
  font-size: 1.02rem; letter-spacing: -.012em;
}
.thesis { margin: 2rem 0 0; padding: .35rem 0 .35rem 1.35rem; border-left: 2px solid var(--orange); }
.thesis .mono { margin: 0 0 .6rem; }
.thesis .pull { font-size: clamp(1.22rem, 1rem + 1vw, 1.7rem); }
.stage { margin-top: 2rem; }
.stage .mono { margin: 0 0 .85rem; }
.fine { font-size: .88rem; line-height: 1.55; color: var(--slate); font-style: italic; margin-top: 1.5rem; }

/* Finycs has no approved visual yet (the brief forbids approximating its
   logo), so its frame carries a drawn diagram of the commercial test the
   engagement is running: one customer requirement, a specialised solution,
   then the same solution across similar businesses. */
.diagram {
  width: 100%; height: 100%; padding: clamp(1.1rem, .7rem + 2vw, 2.5rem);
  display: grid; grid-template-rows: auto 1fr auto; gap: .8rem;
}
.diagram-k {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--slate); margin: 0;
}
.diagram-row {
  display: grid; align-items: center; gap: .4rem;
  grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr) 1.25rem minmax(0, 1.2fr);
}
.diagram-node { display: grid; justify-items: center; gap: .65rem; text-align: center; }
.diagram-node small {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); line-height: 1.45;
}
.diagram-sq { width: 1.5rem; height: 1.5rem; border: 2px solid var(--ink); }
.diagram-sq.is-on { background: var(--orange); border-color: var(--orange); }
.diagram-grid { display: grid; grid-template-columns: repeat(3, .8rem); gap: .3rem; }
.diagram-grid i { width: .8rem; height: .8rem; border: 2px solid var(--ink); }
.diagram-grid i:first-child { background: var(--ink); }
.diagram-to { height: var(--rule); background: var(--slate); }
.diagram-note {
  font-family: var(--display); font-weight: 540; font-stretch: 108%;
  font-size: clamp(.95rem, .88rem + .35vw, 1.15rem); letter-spacing: -.01em;
  line-height: 1.3; margin: 0;
}

/* Three sectors, one discipline: three columns on the dark band. */
.sectors { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 62rem) { .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sectors li {
  padding: 1.6rem 0 1.8rem; border-top: var(--rule) solid var(--ink-3);
  display: grid; gap: .8rem; align-content: start;
}
@media (min-width: 62rem) {
  .sectors li { padding: 0 1.75rem; border-top: 0; border-left: var(--rule) solid var(--ink-3); }
  .sectors li:first-child { padding-left: 0; border-left: 0; }
}
.sectors .mono { color: var(--ink-soft); margin: 0; }
.sectors h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); }
.sectors p { color: var(--ink-soft); margin: 0 0 .6rem; }
.sectors.on-light li { border-color: var(--paper-3); }
.sectors.on-light .mono, .sectors.on-light p { color: var(--slate); }

/* ------------------------------------------ 26. Commercialization Score */

.bjcs { position: relative; scroll-margin-top: 5.5rem; }
.bjcs [hidden] { display: none !important; }
.bjcs-start { margin-top: 2rem; }
.bjcs-privacy { margin-top: 1.5rem; }

/* Progress: the text comes first (it is what a screen reader gets), then a
   bar, then one tick per step so a phone user sees how much is left. */
.bjcs-progress { margin-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); }
.bjcs-count {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 .8rem;
}
.bjcs-count b { color: var(--ink); font-weight: 500; }
.bjcs-bar { height: 3px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.bjcs-bar span { display: block; height: 100%; background: var(--orange); transition: width .5s var(--ease); }
.bjcs-map { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; gap: .4rem; }
.bjcs-map li { width: .55rem; height: .55rem; border: 1.5px solid var(--paper-3); }
.bjcs-map li[data-state="done"] { background: var(--ink); border-color: var(--ink); }
.bjcs-map li[data-state="now"] { border: 2px solid var(--ink); }

.bjcs-step > h2 { margin-bottom: .7rem; outline: none; }
.bjcs-lead { max-width: 44rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.bjcs-sub { margin: .75rem 0 -.25rem; }

.bjcs-q { border: 0; margin: 0; padding: 1.6rem 0 1.75rem; border-top: var(--rule) solid var(--paper-3); min-width: 0; }
.bjcs-q legend {
  padding: 0; margin: 0 0 1rem; display: grid; gap: .45rem;
  font-family: var(--display); font-weight: 560; font-stretch: 110%;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); letter-spacing: -.014em; line-height: 1.3;
}
.bjcs-qn {
  font-family: var(--mono); font-weight: 500; font-size: .68rem; letter-spacing: .15em;
  color: var(--orange-text); font-stretch: normal;
}
.bjcs-opts { display: grid; gap: .55rem; max-width: 46rem; }

/* The whole row is the tap target -- 48px minimum -- and the native radio
   stays in the DOM, so arrow keys, focus and screen readers all still work. */
.bjcs-opt {
  display: flex; align-items: flex-start; gap: .85rem;
  min-height: 3rem; padding: .8rem 1rem;
  background: var(--white); border: var(--rule) solid var(--paper-3);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 1rem; line-height: 1.45;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bjcs-opt:hover { border-color: var(--slate); }
.bjcs-opt input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--ink); }
.bjcs-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--orange); }
.bjcs-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.bjcs-q[data-invalid="true"] .bjcs-opt { border-color: var(--orange-deep); }
.bjcs-err {
  margin: .7rem 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange-text);
}
.bjcs-err:empty { display: none; }

.bjcs-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bjcs-flabel {
  padding: 0; margin: 0 0 .6rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate);
}
.bjcs-inline { display: flex; flex-wrap: wrap; gap: .55rem; }
.bjcs-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3rem; padding: .6rem 1.1rem;
  background: var(--white); border: var(--rule) solid var(--paper-3);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem;
}
.bjcs-pill input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); }
.bjcs-pill:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--orange); }
.bjcs-pill:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.bjcs-other { margin-top: .5rem; }

.bjcs-nav {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  margin-top: 1.25rem; padding-top: 1.5rem; border-top: 2px solid var(--ink);
}
.bjcs-nav .btn:only-child { margin-left: auto; }
.bjcs-arw { display: inline-flex; }
.bjcs-step .form-status { margin-top: .5rem; }

/* ---- result ---- */

.bjcs-result { display: grid; gap: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }
.bjcs-hero { border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.bjcs-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; margin-bottom: 1.5rem; }
.bjcs-num { margin: 0; display: flex; align-items: baseline; gap: .5rem; outline: none; }
/* Hero figure: the site's sans, proportional figures, one per view. */
.bjcs-val {
  font-family: var(--display); font-weight: 600; font-stretch: 112%;
  font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: .9; letter-spacing: -.04em;
}
.bjcs-of { font-family: var(--mono); font-size: .85rem; letter-spacing: .1em; color: var(--slate); }
.bjcs-level {
  margin: 0; font-family: var(--display); font-weight: 560; font-stretch: 112%;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: .7rem;
}
.bjcs-level::before { content: ""; width: .8rem; height: .8rem; background: var(--orange); }
.bjcs-remark { max-width: 48rem; }

/* Meter: four band segments separated by 2px of surface, filled to the score
   in navy; the unfilled track is a light step of the same navy. */
.bjcs-meter { margin: 0 0 1.75rem; max-width: 52rem; }
.bjcs-track { display: flex; gap: 2px; height: .75rem; }
.bjcs-seg { flex-basis: 0; background: var(--paper-3); overflow: hidden; }
.bjcs-seg:first-child { border-radius: 3px 0 0 3px; }
.bjcs-seg:last-child { border-radius: 0 3px 3px 0; }
.bjcs-seg span { display: block; height: 100%; background: var(--ink); }
.bjcs-bands {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem;
}
@media (min-width: 40rem) { .bjcs-bands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bjcs-bands li { display: grid; gap: .1rem; color: var(--slate); }
.bjcs-bands b { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.bjcs-bands span { font-family: var(--mono); font-size: .7rem; font-variant-numeric: tabular-nums; }
.bjcs-bands li[data-on="true"] { color: var(--ink); }
.bjcs-bands li[data-on="true"] b::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem;
  background: var(--orange); vertical-align: .05em;
}

.bjcs-block > .eyebrow { margin-bottom: 1.1rem; }
.bjcs-interp { max-width: 50rem; }

/* Section scores: a real table -- the accessible twin IS the chart -- with a
   thin bar per row. One colour for context and the deeper orange for the
   three priority gaps: emphasis, not a colour per value. Values are text in
   ink, never in the bar colour. #6b7f9e is 4.1:1 on white, #d94d00 4.2:1. */
.bjcs-chart { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.bjcs-chart tr { border-bottom: var(--rule) solid var(--paper-3); }
.bjcs-chart th, .bjcs-chart td { padding: .85rem 0; text-align: left; vertical-align: middle; font-weight: 400; }
.bjcs-chart .bjcs-cname {
  font-family: var(--display); font-weight: 560; font-stretch: 108%;
  font-size: 1rem; letter-spacing: -.01em; padding-right: 1.25rem; width: 14rem;
}
.bjcs-cbar { display: flex; align-items: center; gap: .9rem; }
.bjcs-cscore {
  flex: none; width: 3.2rem; text-align: right;
  font-family: var(--mono); font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.bjcs-rail { flex: 1; height: 12px; background: var(--paper-2); border-radius: 0 3px 3px 0; }
.bjcs-rail span { display: block; height: 100%; background: #6b7f9e; border-radius: 0 4px 4px 0; }
.bjcs-chart tr[data-gap="true"] .bjcs-rail span { background: var(--orange-deep); }
.bjcs-chart .bjcs-clabel {
  width: 13rem; padding-left: 1.25rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate);
}
.bjcs-key { margin: .9rem 0 0; font-size: .9rem; color: var(--slate); display: flex; gap: .6rem; align-items: center; }
.bjcs-key i { width: 1.1rem; height: 8px; background: var(--orange-deep); border-radius: 0 3px 3px 0; flex: none; }
/* Below 48rem each row becomes name and rating, with the bar underneath. */
@media (max-width: 47.999rem) {
  .bjcs-chart tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: .85rem 0; }
  .bjcs-chart th, .bjcs-chart td { padding: 0; }
  .bjcs-chart .bjcs-cname { width: auto; padding-right: .75rem; }
  .bjcs-chart .bjcs-clabel { width: auto; padding-left: 0; text-align: right; }
  .bjcs-cbar { grid-column: 1 / -1; grid-row: 2; margin-top: .6rem; }
}

.bjcs-two { display: grid; gap: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }
@media (min-width: 62rem) { .bjcs-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--gut); } }
.bjcs-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.bjcs-list li { padding: 1rem 0; border-bottom: var(--rule) solid var(--paper-3); display: grid; gap: .3rem; }
.bjcs-list b {
  font-family: var(--display); font-weight: 580; font-stretch: 110%;
  font-size: 1.12rem; letter-spacing: -.014em;
}
.bjcs-why { color: var(--slate); font-size: .97rem; line-height: 1.55; }
.bjcs-two .note { margin-top: 1rem; }

.bjcs-path {
  background: var(--white); border: var(--rule) solid var(--paper-3);
  border-left: 3px solid var(--orange); border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); max-width: 52rem;
}
.bjcs-path h3 { margin-bottom: .6rem; }
.bjcs-basis { font-size: .95rem; }
.bjcs-pri { max-width: 52rem; }

.bjcs-cta { border-radius: var(--radius); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.bjcs-cta h2 { margin-bottom: .8rem; }
.bjcs-cta > p { color: var(--ink-soft); max-width: 40rem; margin-bottom: 1.5rem; }
.bjcs-lead-form { margin-top: 1.5rem; }

.bjcs-after { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
button.tlink {
  background: none; border: 0; border-bottom: var(--rule) solid var(--paper-3);
  cursor: pointer; padding-inline: 0; min-height: 44px;
}

@media print {
  .bjcs-cta, .bjcs-after, .crumbs, .phead, .skip, .wa-fab { display: none; }
  .bjcs-opt, .bjcs-path, .bjcs-block { break-inside: avoid; }
  .bjcs-rail span, .bjcs-seg span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------------------------------------------------------------------------
   WhatsApp chat button

   .foot-base reserves the button's own height plus its offset. The button is
   fixed to the bottom-right and the footer's legal links are the last content
   on the page, flush right -- so at the resting bottom-of-page scroll they
   occupied the same rectangle, and at 1024-1366px wide every click on "Terms
   & disclaimer" opened WhatsApp instead of the page. z-index cannot fix that:
   putting the link on top would just move the broken click to the button.
   The space has to be reserved.

   Fixed bottom-right on every page. WhatsApp green with a NAVY glyph and
   label: white on #25d366 is 1.9:1 and fails outright, while navy on it is
   8.3:1 — so the brand green stays and the ink changes, the same trade the
   orange buttons make. z-index 90 keeps it under the sticky header (100) and
   under the mobile drawer (99), so an open menu is never covered.

   A circle on small screens and a labelled pill from 600px: at 320px a pill
   would sit across a third of the line length.
--------------------------------------------------------------------------- */
.foot-base {
  padding-bottom: calc(56px + clamp(.75rem, .25rem + 2vw, 1.5rem) + 1rem);
}

.wa-fab {
  --wa: #25d366;
  position: fixed; right: clamp(.75rem, .25rem + 2vw, 1.5rem);
  bottom: clamp(.75rem, .25rem + 2vw, 1.5rem);
  z-index: 90;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--wa); color: var(--ink);
  border: 1px solid rgba(0, 30, 72, .22);
  box-shadow: 0 6px 18px rgba(0, 19, 52, .22), 0 1px 2px rgba(0, 19, 52, .18);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.wa-fab:hover { background: #1fbe5b; box-shadow: 0 10px 26px rgba(0, 19, 52, .28); }
.wa-fab:active { transform: translateY(1px); }
.wa-fab:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px;
}
.wa-fab-i { flex: 0 0 auto; display: block; }
.wa-fab-t {
  font: 600 .95rem/1 var(--display); letter-spacing: .01em; white-space: nowrap;
  /* Hidden visually, not from assistive tech, until there is room for it. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (min-width: 600px) {
  .wa-fab { width: auto; height: auto; padding: .85rem 1.25rem; }
  .wa-fab-t { position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:active { transform: none; }
}