/* =========================================================================
   DIGITECHNIQUE 2026, DESIGN SYSTEM
   Editorial. Precise. Global.

   Same colours and logo as digitechnique.com. Type is one family, Hanken
   Grotesk, set the Apple way (owner request, 12 October 2026): bold,
   tightly tracked headlines and figures, regular body, and semibold
   sentence-case labels. No italics, no mono capitals. Hairlines instead of
   shadows. Pill buttons. One navy band per page, never a navy hero.

   MOBILE FIRST. Every rule outside a media query describes the phone
   layout. Larger screens are layered on with min-width queries only:

     sm   601px   phones in landscape, small tablets
     md   761px   tablets
     lg   901px   laptops: desktop navigation, side-by-side layouts
     xl  1041px   wide desktops
   ========================================================================= */

:root {
  /* Primary palette */
  --blue:        #0B2F7A;   /* Primary Blue: headlines, links, brand */
  --blue-lit:    #1146B8;   /* the headline accent, hover blue */
  --green:       #0AA860;   /* CTA Green: actions only. Nothing else is green */
  --green-dark:  #089253;   /* CTA hover */
  --white:       #FFFFFF;

  /* Ground and lines */
  --paper:       #F7F6F2;   /* the page itself */
  --ink:         #0F1B33;   /* body text */
  --slate:       #5A6B8C;   /* secondary text, captions, meta */
  --cloud:       #F4F7FC;   /* a cool tint for the odd inset */
  --line:        #E3E6EC;   /* card borders */
  --rule:        #D9DDE6;   /* hairline rows */
  --blue-tint:   #EAF0FB;   /* chips, tags */
  --green-tint:  #E6F7EF;   /* badges */
  --navy:        #071F52;   /* closing band, footer, strip */
  --star:        #F2A900;   /* review stars only, beside a rating the client gave */

  /* On-dark text ramp */
  --on-dark:     #C7D6F2;
  --on-dark-dim: #8FA5D6;
  --on-dark-acc: #8FB4F5;   /* headline accent on navy */
  --on-dark-grn: #7FD4AB;

  /* Type */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Labels share the one family now; the token stays so rules keep their meaning. */
  --font-mono:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 20px;
  /* Vertical rhythm: 100px between sections on desktop, one 10px step inside them. */
  --section-y: clamp(60px, 10vw, 100px);
  --band-y:    var(--section-y);
  --stack:     10px;
  --header-h: 72px;

  /* Radii: 20px cards, pills for buttons */
  --r-card: 20px;
  --r-btn: 999px;
  --r-pill: 999px;

  /* The one shadow we keep: under the green button and the hero frame */
  --shadow-cta: 0 12px 28px rgba(10,168,96,0.26);
  --shadow-cta-hover: 0 14px 32px rgba(10,168,96,0.34);
  --shadow-frame: 0 24px 60px rgba(11,47,122,0.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 601px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1041px) {
  :root { --gutter: 40px; }
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

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

a, button, summary, [role="button"] {
  -webkit-tap-highlight-color: rgba(11, 47, 122, 0.12);
  touch-action: manipulation;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* ---- Typography -------------------------------------------------------- */
/* Headings: Hanken Grotesk, bold and tightly tracked, the way Apple sets a
   headline. The accent phrase keeps the lighter blue, upright. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--blue);
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.04em; }
h2 { font-size: clamp(30px, 3.9vw, 54px); line-height: 1.06; letter-spacing: -0.035em; }
h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }

p { text-wrap: pretty; }
strong, b { font-weight: 600; }

.ac { font-family: var(--font-display); font-weight: inherit; letter-spacing: inherit; color: var(--blue-lit); }
.on-navy .ac { color: var(--on-dark-acc); }
/* Two-part names keep the accent colour on the second part, upright. */
.b { font-family: var(--font-display); font-weight: inherit; letter-spacing: inherit; color: var(--blue-lit); }
.on-navy .b { color: var(--on-dark-acc); }

.lede { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7; color: var(--slate); }
.on-navy .lede { color: var(--on-dark); }

/* Labels: semibold sentence case, one style everywhere. */
.eyebrow, .kick, .kicker,
.eyebrow-pill span:last-child {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate);
  line-height: 1.4;
}
.kick, .kicker { margin-bottom: var(--stack); }
.on-navy .eyebrow, .on-navy .kick, .on-navy .kicker { color: var(--on-dark-dim); }
@media (min-width: 601px) {
  .eyebrow, .kick, .kicker, .eyebrow-pill span:last-child { font-size: 14px; }
}

/* The hero eyebrow: the same mono label, inside a hairline capsule. */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin-bottom: 14px;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--white);
}
.eyebrow-pill span:last-child { color: var(--blue); }
.on-navy .eyebrow-pill { background: rgba(234,240,251,0.08); border-color: rgba(199,214,242,0.3); }
.on-navy .eyebrow-pill span:last-child { color: var(--on-dark); }
@media (min-width: 601px) {
  .eyebrow-pill { padding: 9px 18px; }
}

/* ---- Layout ------------------------------------------------------------ */
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 900px; }
.section { padding-block: var(--section-y); }
.section--cloud { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* The alternating band is now white on the paper ground. */
.band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band > .wrap { padding-block: var(--band-y); }

.faq-section { max-width: 880px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.faq-section--tight { padding-top: 0; }

.row-gap { margin-top: var(--stack); }
.link-gap { margin-top: 14px; }
.h2-gap { margin-bottom: var(--stack); }
.cofound-pill { margin-bottom: var(--stack); }
.btn-block { width: 100%; }

.section-head { max-width: 760px; margin-bottom: var(--stack); }
.section-head .eyebrow { margin-bottom: var(--stack); }
.section-head h2 { margin-bottom: 0; }
.section-head .lede { margin: var(--stack) 0 0; }

/* Section head: a small label, then the headline. */
.sec-head { margin-bottom: var(--stack); }
.sec-head h2 { margin: 0; color: var(--blue); }
.sec-head--center { text-align: center; }
.sec-head--measure { max-width: 780px; }
/* A short paragraph under a section heading. */
.sec-lede { font-size: 16px; line-height: 1.7; color: var(--slate); margin: var(--stack) 0 0; max-width: 720px; }
@media (min-width: 601px) { .sec-lede { font-size: 17px; } }

/* The service drawing on its tinted panel, beside the service page copy. */
.sf-media {
  display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(160deg, #EEF2FA, #E3EAF6);
}
.sf-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-media > svg { display: block; width: 100%; height: 100%; }

/* A quiet "see the service" line at the foot of a tile. */
.sec-head--split { display: flex; flex-direction: column; gap: var(--stack); }
@media (min-width: 761px) {
  .sec-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--stack); flex-wrap: wrap; }
}

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 601px) {
  .grid { gap: 20px; }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ---- Buttons: pills ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 52px;
  font-family: var(--font-ui); font-weight: 600; font-size: 16px;
  padding: 0 26px; border-radius: var(--r-btn);
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), box-shadow 180ms var(--ease),
              transform 180ms var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn-primary { background: var(--green); color: var(--white); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--green-dark); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); }
.btn-primary::after { content: "→"; font-weight: 500; }

.btn-secondary { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn-secondary:hover { background: var(--white); border-color: var(--blue-lit); color: var(--blue-lit); }

.on-navy .btn-secondary {
  background: rgba(255,255,255,0.06); color: var(--white);
  border: 1.5px solid rgba(199,214,242,0.5);
}
.on-navy .btn-secondary:hover { background: rgba(255,255,255,0.14); color: var(--white); }

.btn-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }

@media (min-width: 601px) {
  .btn { width: auto; }
  .btn-block { width: 100%; }
  .btn-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; }
}

/* The compact header button: the same face, size and weight as the menu
   items beside it. */
.btn.btn-sm { width: auto; height: 40px; font-size: 15px; font-weight: 500; padding: 0 20px; box-shadow: none; }
.btn.btn-sm::after { content: none; }
.btn.btn-sm.btn-primary:hover { box-shadow: none; transform: none; }

/* Tertiary text link: underlined, arrow on hover */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blue); font-weight: 600; font-size: 15px;
  border-bottom: 1.5px solid rgba(11,47,122,0.3); padding-bottom: 2px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.link::after { content: "→"; transition: transform 180ms var(--ease); }
.link:hover { color: var(--blue-lit); border-color: var(--blue-lit); }
.link:hover::after { transform: translateX(4px); }
.on-navy .link { color: var(--on-dark); border-color: rgba(199,214,242,0.4); }
.on-navy .link:hover { color: var(--white); border-color: var(--white); }

/* Same thing beside a section heading. */
.link-rule {
  display: inline-block;
  color: var(--blue); font-weight: 600; font-size: 15px;
  border-bottom: 1.5px solid rgba(11,47,122,0.3); padding-bottom: 2px;
  white-space: nowrap;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.link-rule:hover { color: var(--blue-lit); border-color: var(--blue-lit); }
.link-rule::after { content: " →"; }

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px;
  transition: border-color 180ms var(--ease);
}
a.card:hover, .card--link:hover { border-color: var(--blue-lit); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate); font-size: 15px; line-height: 1.65; }
.band .card, .section--cloud .card { background: var(--paper); }
@media (min-width: 601px) {
  .card { padding: 28px; }
}

/* Numbered list rows (services index pattern) */
.row {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 8px 16px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.row .num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); }
.row .ttl { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.02vw, 25px); line-height: 1.1; color: var(--blue); letter-spacing: -0.03em; }
.row:hover .ttl { color: var(--blue-lit); }
@media (min-width: 1041px) {
  .row { grid-template-columns: 64px 1fr 1.25fr auto; gap: 32px; padding: 28px 0; }
}

/* ---- Badges / tags ----------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue-tint); color: var(--blue);
  border-radius: var(--r-pill); padding: 7px 14px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
}

.checks { display: flex; flex-direction: column; gap: 13px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--slate); }
.checks li::before {
  content: "✓"; flex-shrink: 0; margin-top: 1px;
  width: 21px; height: 21px; border-radius: 999px;
  background: var(--green-tint); color: var(--green-dark);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.on-navy .checks li { color: var(--on-dark); }
.on-navy .checks li::before { background: rgba(127,212,171,0.18); color: var(--on-dark-grn); }

/* ---- FAQ (accordion, semantic details) --------------------------------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  transition: border-color 180ms var(--ease);
}
.faq details[open] { border-color: var(--blue); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 48px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: 0; color: var(--blue);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--blue);
  font-family: var(--font-ui); font-size: 19px; font-weight: 400; line-height: 28px; text-align: center;
  transition: transform 200ms var(--ease), background 200ms var(--ease);
}
.faq details[open] summary::after { background: var(--blue); border-color: var(--blue); color: var(--white); transform: rotate(45deg); }
.faq .answer { padding: 0 20px 20px; color: var(--slate); font-size: 15.5px; line-height: 1.7; }
.faq .answer p + p { margin-top: 12px; }
@media (min-width: 601px) {
  .faq summary { padding: 22px 26px; font-size: 17px; gap: 20px; }
  .faq .answer { padding: 0 26px 24px; }
}

/* ---- Tables ------------------------------------------------------------ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 560px; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--slate);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
tbody tr:hover { background: var(--paper); }

/* ---- Prose (legal + article bodies) ------------------------------------ */
.prose { max-width: 76ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 44px; }
.prose h3 { font-size: 22px; margin-top: 32px; color: var(--ink); }
.prose p, .prose li { color: var(--slate); font-size: 16.5px; line-height: 1.75; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 999px; background: var(--blue-lit); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 30px; counter-increment: n; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 600; color: var(--blue-lit); font-size: 14px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--blue-lit); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Forms ------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;
  color: var(--ink);
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; padding: 13px 16px; width: 100%;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,47,122,0.10);
}
.field .hint { font-size: 13px; color: var(--slate); }
.form-note { font-size: 13px; color: var(--slate); margin-top: 14px; }

/* =========================================================================
   ANNOUNCEMENT STRIP, HEADER AND NAVIGATION
   ========================================================================= */
.promo-strip {
  background: var(--navy); color: var(--on-dark);
  border-bottom: 1px solid rgba(199,214,242,0.14);
  font-size: 13px; line-height: 1.4;
}
.promo-strip .wrap {
  min-height: 40px; padding-block: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.promo-strip-link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--white); transition: color 160ms var(--ease); }
.promo-strip-link:hover { color: var(--on-dark-acc); }
.promo-strip .tag-mini {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--on-dark-acc);
}
.promo-strip .long, .promo-strip .short { display: none; white-space: nowrap; }
.promo-strip .ar { flex-shrink: 0; transition: transform 160ms var(--ease); }
.promo-strip-link:hover .ar { transform: translateX(3px); }
.promo-strip .signal { color: var(--on-dark-dim); }
/* "projects ·" only once the strip has room for it. */
.signal-ctx { display: none; }
@media (min-width: 601px) { .signal-ctx { display: inline; } }
@media (min-width: 601px) { .promo-strip .short { display: inline; } }
@media (min-width: 1101px) { .promo-strip .long { display: inline; } .promo-strip .short { display: none; } }

.signal {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--slate);
  flex-shrink: 0;
}
.signal .dot {
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(10, 168, 96, 0.45);
  animation: dtSignalPulse 2s var(--ease) infinite;
}
@keyframes dtSignalPulse {
  0%   { box-shadow: 0 0 0 0 rgba(10, 168, 96, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(10, 168, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 168, 96, 0); }
}

/* Glass over the paper ground. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11,47,122,0.10);
  transition: box-shadow 220ms var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: rgba(11,47,122,0.14); }
.site-header[data-menu="true"] {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--white);
}

.nav {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter); height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.brand img { height: 28px; width: auto; display: block; }
@media (min-width: 601px) { .brand img { height: 34px; } }

.nav-toggle { display: grid; width: 44px; height: 44px; place-items: center; flex-shrink: 0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 22px; height: 2px; background: var(--blue); border-radius: 2px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: relative; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 5px; }
.site-header[data-menu="true"] .nav-toggle span { background: transparent; }
.site-header[data-menu="true"] .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.site-header[data-menu="true"] .nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

.nav-cta { display: none; flex-shrink: 0; }

/* The sheet menu */
.nav > nav { display: contents; }
.nav-links {
  position: fixed;
  top: var(--sheet-top, var(--header-h));
  left: 0; right: 0; bottom: 0;
  z-index: 48;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: 0;
  padding: 10px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--white);
  border-bottom: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 240ms var(--ease), transform 300ms var(--ease), visibility 0s linear 300ms;
}
.site-header[data-menu="true"] .nav-links {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 200ms var(--ease), transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.nav-links li { position: relative; }
.nav-links > li > a, .nav-links > li > button {
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  width: 100%; min-height: 56px; padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 700; color: var(--blue); font-size: 26px; letter-spacing: -0.03em;
  transition: color 160ms var(--ease);
}
.nav-links > li > a:hover, .nav-links > li > button:hover,
.nav-links > li > a[aria-current="page"] { color: var(--blue-lit); }
/* The chevron: a small line icon that turns over when its panel is open. */
.nav-links .caret {
  display: inline-block; width: 18px; height: 18px; flex-shrink: 0;
  color: var(--slate); opacity: 0.8;
  transition: transform 220ms var(--ease), color 160ms var(--ease);
}
.nav-links li[data-open="true"] > a, .nav-links li[data-open="true"] > button { color: var(--blue-lit); }
.nav-links li[data-open="true"] .caret { transform: rotate(180deg); color: var(--blue-lit); opacity: 1; }

.site-header[data-menu="true"] .nav-links > li { animation: dtSheetRow 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.site-header[data-menu="true"] .nav-links > li:nth-child(1) { animation-delay: 30ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(2) { animation-delay: 60ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(3) { animation-delay: 90ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(4) { animation-delay: 120ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(5) { animation-delay: 150ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(6) { animation-delay: 180ms; }
@keyframes dtSheetRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.nav-links .mobile-cta { display: flex; flex-direction: column; align-items: flex-start; margin-top: 22px; }
.nav-links > li.mobile-cta > .btn {
  width: 100%; justify-content: center; text-align: center;
  height: 52px; padding: 0 24px; border-bottom: 0;
  font-family: var(--font-ui); font-size: 16px; color: var(--white);
}
/* The UK phone line under the sheet's Contact button. */
.nav-links > li.mobile-cta > .mobile-phone {
  justify-content: center; min-height: 48px; margin-top: 8px; padding: 10px 0;
  border-bottom: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 600;
  color: var(--blue);
}
/* The UK phone line in the bar, wide screens only. */
.nav-phone { display: none; }
@media (min-width: 1280px) {
  .nav-phone {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    font-family: var(--font-ui); font-size: 14.5px; font-weight: 600; white-space: nowrap;
    color: var(--blue); transition: color 160ms var(--ease);
  }
  .nav-phone:hover { color: var(--blue-lit); }
}

.sheet-scrim {
  position: fixed; inset: 0;
  background: rgba(7, 31, 82, 0.34);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
  z-index: 40;
}
.site-header[data-menu="true"] ~ .sheet-scrim { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease), visibility 0s; }
body.is-locked { position: fixed; inset: 0 0 auto 0; width: 100%; overflow: hidden; }

/* Mega panels: drill-down screens on a phone */
.mega { display: none; }
.site-header[data-menu="true"] .mega[data-open="true"] {
  display: block;
  position: fixed;
  top: var(--sheet-top, var(--header-h));
  left: 0; right: 0; bottom: 0;
  z-index: 49;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  animation: dtPanelIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dtPanelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.mega-inner { max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }

.mega-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--blue);
}
.mega-back:active { background: var(--blue-tint); }
.mega-back span { font-size: 16px; line-height: 1; font-family: var(--font-ui); }

/* The hub-page row at the foot of a drill-down panel, phones only. */
.mega-hub {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; margin-top: 12px; padding: 12px 4px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--blue);
}




/* Bottom tab bar */
.tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(247, 246, 242, 0.92);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(11,47,122,0.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 48px; padding: 9px 4px 8px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--slate); transition: color 160ms var(--ease);
}
.tabbar a svg { width: 22px; height: 22px; stroke-width: 1.6; }
.tabbar a[aria-current="page"] { color: var(--blue); }
.tabbar a[aria-current="page"] svg { stroke-width: 2; }
.tabbar a:active { color: var(--blue-lit); }
body.has-tabbar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
body.has-tabbar .nav-links { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
body.has-tabbar .site-header[data-menu="true"] .mega[data-open="true"] .mega-inner { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }


/* Desktop navigation */
@media (min-width: 901px) {
  .nav { gap: 24px; }
  .brand { margin-right: 0; }
  .nav-toggle { display: none; }
  .nav-cta { display: inline-flex; }
  .sheet-scrim { display: none; }
  .nav > nav { display: flex; flex: 1; justify-content: flex-end; min-width: 0; }
  .nav-links {
    position: static; inset: auto; z-index: auto;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 26px; flex-wrap: nowrap; white-space: nowrap;
    padding: 0; background: none; border: 0; box-shadow: none;
    overflow: visible; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .site-header[data-menu="true"] .nav-links > li { animation: none; }
  .nav-links > li > a, .nav-links > li > button {
    display: inline-flex; justify-content: flex-start;
    width: auto; min-height: 0; padding: 0; border: 0;
    font-family: var(--font-ui); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink);
  }
  .nav-links > li > a:hover, .nav-links > li > button:hover,
  .nav-links > li > a[aria-current="page"], .nav-links li[data-open="true"] > button { color: var(--blue); }
  .nav-links .caret { width: 14px; height: 14px; margin-left: -1px; }
  .nav-links > li > a:hover .caret { color: var(--blue); opacity: 1; }
  /* Pointing at one item quietly fades the others, so the hovered item
     and its panel read as the focus. */
  .nav-links > li > a, .nav-links > li > button { transition: color 160ms var(--ease), opacity 220ms var(--ease); }
  .nav-links:hover > li > a, .nav-links:hover > li > button { opacity: 0.42; }
  .nav-links:hover > li:hover > a, .nav-links:hover > li:hover > button,
  .nav-links:hover > li[data-open="true"] > a, .nav-links:hover > li[data-open="true"] > button { opacity: 1; }
  .nav-links .mobile-cta { display: none; }

  .mega, .site-header[data-menu="true"] .mega[data-open="true"] {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0; bottom: auto; z-index: auto;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 32px 64px rgba(11,47,122,0.12);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
    pointer-events: none;
    max-height: calc(100vh - 90px); overflow-y: auto;
    animation: none;
  }
  .mega[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .mega-inner { padding: 28px var(--gutter) 36px; }
  body.has-tabbar .site-header[data-menu="true"] .mega[data-open="true"] .mega-inner { padding-bottom: 36px; }
  .mega-back { display: none; }
  .mega-hub { display: none; }
  .tabbar { display: none; }
  body.has-tabbar { padding-bottom: 0; }
  body.has-tabbar .nav-links { padding-bottom: 0; }
}
@media (min-width: 1041px) {
  .nav { gap: 32px; }
  .nav-links { gap: 34px; }
}
/* Narrow desktops: six menu items, the logo and the button have to share
   the bar, so everything tightens a little until the bar has room. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav-links { gap: 18px; }
  .nav-links > li > a, .nav-links > li > button { font-size: 14px; }
  .brand img { height: 28px; }
}

/* =========================================================================
   HERO: type-led on the paper ground, on every page
   ========================================================================= */
.hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); }
.hero h1 { color: var(--blue); margin-bottom: var(--stack); }
.hero .lede { color: var(--slate); margin-bottom: var(--stack); max-width: 620px; }
.hero-inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(48px, 6vw, 72px);
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
}
.hero-copy { min-width: 0; }
.hero-side { min-width: 0; }
@media (min-width: 901px) {
  .hero-inner { flex-direction: row; flex-wrap: wrap; align-items: end; }
  .hero-copy { flex: 1 1 560px; }
  .hero-side { flex: 1 1 380px; max-width: 520px; }
}

/* Interior pages: the homepage hero, a size down. White, the small line in
   place of a capsule, a green pill with the phone number as a text link
   beside it, then three ticked promises. Centred when nothing sits beside
   the copy; copy on the left and the drawing or card on the right when
   something does. */
.hero--page { background: var(--white); border-bottom: 1px solid var(--line); }
.hero--page + .band { border-top: 0; }
.hero--page .hero-inner { padding-block: clamp(20px, 3.4vw, 48px) clamp(20px, 3.4vw, 48px); align-items: start; }
.hero--page h1 { font-size: clamp(36px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.045em; }
.hero--page .hero-copy { flex: 1 1 100%; max-width: 900px; }
.hero--page .lede { font-size: clamp(16px, 1.35vw, 19px); }
.hero--page .eyebrow-pill { padding: 0; margin: 0 0 12px; border: 0; background: none; }
.hero--page .eyebrow-pill span:last-child { font-family: var(--font-ui); font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--slate); }
.hero--page .btn-row { margin-top: 26px; gap: 12px 28px; }
.hero--page .btn-primary { height: 50px; padding: 0 26px; font-size: 16px; }
.hero--page .btn-primary::after { content: none; }
.hero--page .btn-secondary { width: auto; height: auto; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--blue-lit); font-size: 16px; font-weight: 500; }
.hero--page .btn-secondary::after { content: "\203A"; margin-left: 6px; font-size: 1.15em; line-height: 1; }
.hero--page .btn-secondary:hover { background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
/* The promises under the buttons, each with a green tick. */
.hero-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; }
.hero-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.hero-ticks svg { flex: none; color: var(--green); }
/* Centred: the column, the crumbs, the buttons and the ticks on one axis. */
.hero--center { text-align: center; }
.hero--center .hero-copy { margin-inline: auto; max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.hero--center h1 { max-width: 980px; }
.hero--center .lede { max-width: 720px; margin-inline: auto; }
.hero--center .hero-crumbs, .hero--center .hero-ticks { justify-content: center; }
.hero--center .btn-row { align-self: stretch; justify-content: center; }
@media (min-width: 601px) { .hero--center .btn-row { align-self: center; } }
/* The older variants all resolve to the same paper hero now. */


.hero-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; }
.hero-crumbs a { color: var(--slate); }
.hero-crumbs a:hover { color: var(--blue); }
.hero-crumbs .sep { color: var(--rule); }
.hero-crumbs .here { color: var(--blue-lit); font-weight: 600; }

/* Typed line above the homepage headline */
.typeline { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-weight: 700; color: var(--blue); margin: 0 0 18px; }
.typeline-lead { font-family: var(--font-ui); font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -0.01em; color: var(--slate); }
.typeline-word { display: none; white-space: nowrap; font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.04em; min-height: 1em; }
.typeline-list { font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.03em; color: var(--blue); }
.typeline.is-typing .typeline-word { display: block; }
.typeline.is-typing .typeline-list { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.typeline-caret { display: inline-block; width: 4px; height: 0.8em; margin-left: 8px; vertical-align: -0.04em; background: var(--green); animation: dtCaret 1s steps(1) infinite; }
.typeline.is-done .typeline-caret { display: none; }
@keyframes dtCaret { 50% { opacity: 0; } }
/* Plain grotesk: the typed word above is the display moment. */
.hero--typed h1 {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink); margin-bottom: 8px; max-width: 640px;
}
.hero--typed h1 .ac { font-family: var(--font-ui); font-style: normal; font-weight: 600; color: var(--blue-lit); }
@media (min-width: 601px) { .typeline { margin-bottom: 24px; } .hero--typed h1 { margin-bottom: 10px; } }

/* City page banner strip */
.country-strip { background: var(--navy); color: var(--on-dark); font-size: 13px; padding: 9px 0; border-bottom: 1px solid rgba(199,214,242,0.18); }
.country-strip .wrap { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.country-strip .mkt { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; color: var(--white); }
.country-strip .dot { color: #8FA5D6; }
.country-strip .trust { color: #C7D6F2; }

/* =========================================================================
   CLOSING BAND AND FOOTER
   ========================================================================= */
.cta-band {
  background: var(--navy);
  background-image: radial-gradient(rgba(143,165,214,0.16) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  color: var(--on-dark); position: relative; overflow: hidden;
}
.cta-band .wrap { position: relative; padding-block: var(--section-y); display: flex; flex-direction: column; gap: var(--stack); }
.cta-band h2 { color: var(--white); margin: 0; font-size: clamp(44px, 7vw, 108px); line-height: 0.94; letter-spacing: -0.03em; max-width: 900px; }
.cta-band .ac { color: var(--on-dark-acc); }
.cta-band .lede { color: var(--on-dark); margin: 0; max-width: 560px; }
.cta-band .btn-row { margin-top: 0; }

/* The footer (Option A on the design canvas, revised by the owner): light
   paper below the brand-blue closing band, the logo in its own colours,
   navy headings and slate links. On phones each group is a fold-away row. */
.site-footer { background: var(--paper); color: var(--slate); border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter) 28px; }
.footer-top { display: flex; flex-direction: column; gap: 36px; margin-bottom: 32px; }
.footer-logo { display: inline-block; }
.footer-logo img { display: block; width: 200px; height: auto; }
.footer-brand .strap { margin: 22px 0 0; max-width: 34ch; font-size: 15.5px; line-height: 1.55; color: #33425A; }
.footer-brand .strap-sub { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; color: var(--blue-lit); }
.footer-call {
  display: inline-flex; flex-direction: column; gap: 4px; margin-top: 24px;
  font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--blue);
  transition: color 160ms var(--ease);
}
.footer-call span { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--slate); }
.footer-call:hover { color: var(--blue-lit); }
.footer-brand .social { margin-top: 22px; }
.site-footer .social a { border-color: var(--rule); color: var(--blue); }
.site-footer .social a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.site-footer .social a:focus-visible { outline-color: var(--blue-lit); }
.footer-cols { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.footer-col { border-bottom: 1px solid var(--rule); }
.footer-col summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; cursor: pointer; list-style: none;
}
.footer-col summary::-webkit-details-marker { display: none; }
.footer-col summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease);
}
.footer-col[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.footer-col h2 { margin: 0; font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--blue); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; padding: 0 0 18px; }
.footer-col a { display: inline-block; min-height: 24px; font-size: 15px; line-height: 1.4; color: var(--slate); transition: color 160ms var(--ease); }
.footer-col a:hover { color: var(--blue-lit); }
.footer-base { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--rule); text-align: center; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.footer-legal a { font-size: 13px; color: var(--slate); transition: color 160ms var(--ease); }
.footer-legal a:hover { color: var(--blue-lit); }
.footer-bar { margin: 0; font-size: 13px; color: var(--slate); }
@media (min-width: 901px) {
  .footer-inner { padding: 80px var(--gutter) 26px; }
  .footer-top { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); margin-bottom: 26px; }
  .footer-logo img { width: 220px; }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; border-top: 0; }
  .footer-col { border-bottom: 0; }
  .footer-col summary { min-height: 0; margin-bottom: 14px; cursor: default; }
  .footer-col summary::after { content: none; }
  .footer-col ul { padding: 0; }
  .footer-base { gap: 12px; padding-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { .footer-col summary::after, .footer-call { transition: none; } }
/* ---- Services menu (Option B on the design canvas) --------------------- */
/* Phones: inside the drill-down screen every group is listed in turn, each
   service a row with its icon. Desktop: the groups become tabs down the left
   and only the chosen group's cards show, sliding in as the tab changes. */
.svc-tabs { display: none; }
.svc-pane + .svc-pane { margin-top: 22px; }
.svc-panes { margin-top: 10px; }
.svc-pane-h { margin: 0 0 10px; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--slate); }
.svc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.svc-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); color: inherit;
  transition: border-color 180ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.svc-card .ico {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-tint); color: var(--blue-lit); transition: background 180ms var(--ease), color 180ms var(--ease);
}
.svc-card .nm { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--blue); }
.svc-card .ds { font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.svc-card .go { display: none; }
.svc-card:hover, .svc-card:focus-visible { border-color: var(--blue-lit); }
.svc-card:hover .ico, .svc-card:focus-visible .ico { background: var(--blue); color: var(--white); }
.svc-card[aria-current="page"] { border-color: var(--blue); }
.svc-bar { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--slate); }
.svc-bar-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.svc-bar-phone { font-size: 16px; font-weight: 700; color: var(--blue); }
.svc-bar-phone:hover { color: var(--blue-lit); }
@media (min-width: 901px) {
  .mega--svc, .site-header[data-menu="true"] .mega--svc[data-open="true"] { background: var(--white); }
  .svc-menu { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
  .svc-menu--single { grid-template-columns: minmax(0, 1fr); }
  .svc-tabs { display: grid; gap: 4px; }
  .svc-tab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 14px 18px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left;
    font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--blue);
    transition: background 180ms var(--ease), color 180ms var(--ease);
  }
  .svc-tab span { font-size: 13px; font-weight: 600; color: var(--slate); transition: color 180ms var(--ease); }
  .svc-tab:hover { background: var(--blue-tint); }
  .svc-tab[aria-selected="true"] { background: var(--blue); color: var(--white); }
  .svc-tab[aria-selected="true"] span { color: var(--on-dark-acc); }
  .svc-tab:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }
  .svc-panes { overflow: hidden; transition: height 240ms var(--ease); }
  .svc-pane { display: none; }
  .svc-pane[data-on="true"] { display: block; }
  .svc-pane + .svc-pane { margin-top: 0; }
  .svc-panes { margin-top: 0; }
  .svc-pane-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .svc-cards { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
  .svc-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%;
    padding: 22px; border-radius: 18px; background: var(--paper);
  }
  .svc-card .ico { width: 44px; height: 44px; background: var(--white); box-shadow: 0 4px 12px rgba(11,47,122,0.06); }
  .svc-card .nm { font-size: 18px; letter-spacing: -0.015em; }
  .svc-card .ds { font-size: 14px; line-height: 1.5; }
  .svc-card .go { display: block; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 600; color: var(--blue-lit); }
  .svc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,47,122,0.08); }
  .svc-pane[data-on="true"] .svc-card { animation: svcCardIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--k, 0) * 35ms); }
  .svc-bar { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 16px; }
}
/* Work and About menus: the extra card kinds. */
.svc-card--case { grid-template-columns: 80px minmax(0, 1fr); }
.svc-card--case .thumb { grid-row: span 2; width: 80px; aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: var(--white); }
.svc-card--case .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.svc-card .svc-tag { font-size: 12.5px; font-weight: 600; color: var(--blue-lit); }
.svc-card--more { display: flex; flex-direction: column; gap: 10px; background: var(--blue-tint); border-color: transparent; }
.svc-card--more .nm { font-size: 15px; line-height: 1.35; }
.svc-card--more .go { display: block; font-size: 14px; font-weight: 600; color: var(--blue-lit); }
.svc-card--promo { display: flex; flex-direction: column; gap: 10px; background: var(--blue); border-color: var(--blue); color: var(--white); }
.svc-card--promo .svc-tag { color: var(--on-dark-acc); }
.svc-card--promo .nm { color: var(--white); font-size: 18px; line-height: 1.2; }
.svc-card--promo .stats { display: flex; gap: 22px; margin-top: auto; font-size: 12px; color: var(--on-dark); }
.svc-card--promo .stats b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--white); }
@media (min-width: 901px) {
  .svc-card--case { padding: 0; overflow: hidden; gap: 0; }
  .svc-card--case .thumb { width: 100%; height: auto; border-radius: 0; border-bottom: 1px solid var(--line); }
  .svc-card--case .svc-tag { padding: 14px 18px 0; }
  .svc-card--case .nm { padding: 4px 18px 18px; font-size: 16px; line-height: 1.3; }
  .svc-card--more, .svc-card--promo { justify-content: space-between; padding: 22px; }
  .svc-card--more .nm { font-size: 18px; line-height: 1.3; }
  .svc-card--promo:hover { transform: none; box-shadow: none; }
}
@keyframes svcCardIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card .ico, .svc-tab, .svc-panes { transition: none; }
  .svc-pane[data-on="true"] .svc-card { animation: none; }
  .svc-card:hover { transform: none; }
}

/* ---- Touch targets (mobile first) -------------------------------------- */
/* Small text links get a tap area of about 40px on phones. Where the link
   sits alone on its line, padding with a matching negative margin grows the
   tappable area without moving the text; in lists the rows simply get taller.
   Desktop, with a precise pointer, keeps the tighter spacing. */
.hero-crumbs a, .intake-link, .rule-src { display: inline-block; padding-block: 10px; margin-block: -10px; }
.promo-strip-link { padding-block: 10px; margin-block: -10px; }
.footer-legal { gap: 0 20px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 40px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-col ul { gap: 4px; }
.article-sources ol { gap: 2px; }
.article-sources li a, .sources a { display: inline-block; padding-block: 8px; }
.sitemap-list { display: flex; flex-direction: column; gap: 2px; }
.sitemap-list a { display: inline-flex; align-items: center; min-height: 40px; }
@media (min-width: 901px) {
  .footer-legal { gap: 8px 20px; }
  .footer-legal a { min-height: 0; }
  .footer-col a { min-height: 24px; }
  .footer-col ul { gap: 10px; }
  .article-sources ol { gap: 8px; }
  .article-sources li a, .sources a { padding-block: 0; }
  .sitemap-list { gap: 10px; }
  .sitemap-list a { min-height: 0; }
}

/* =========================================================================
   MOTION
   ========================================================================= */
@keyframes dtSpin { to { transform: rotate(360deg); } }
@keyframes dtFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dtFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .signal .dot { animation: none; }
  .nav-links, .site-header[data-menu="true"] .nav-links > li, .sheet-scrim { transition-duration: 1ms; animation: none; }
  .site-header[data-menu="true"] .mega[data-open="true"] { animation: none; }
  .mockcard:hover .stage { transform: none; }
}
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .tabbar, .sheet-scrim, .promo-strip { display: none; }
  body { color: #000; font-size: 12pt; background: #fff; }
}

/* =========================================================================
   HOMEPAGE
   ========================================================================= */

/* The city proof strip under the hero: four tiles, the years in brand blue,
   two by two on phones and four across from tablets up. */
.trust-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-block: clamp(24px, 3vw, 40px); }
.trust-card > div { display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; padding: clamp(18px, 2.2vw, 28px); border-radius: 24px; background: var(--white); border: 1px solid var(--line); text-align: left; }
.trust-card > div:first-child { background: var(--blue); border-color: var(--blue); }
.trust-card .n { font-weight: 800; font-size: clamp(44px, 4.6vw, 68px); line-height: 0.9; letter-spacing: -0.05em; color: var(--blue); }
.trust-card > div:first-child .n { color: var(--white); }
.trust-card .n--sm { font-weight: 700; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -0.025em; }
.trust-card .l { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--slate); margin-top: 10px; }
.trust-card > div:first-child .l { color: var(--on-dark-acc); }
@media (min-width: 761px) { .trust-card { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
/* Centred section head (kept for pages that still use it) */
.head-center { text-align: center; margin-bottom: var(--stack); }
.head-center .kicker { margin-bottom: var(--stack); }
.head-center h2 { margin: 0; }

/* Feature lists: icon cards in the homepage tile language. Each row is a
   card: an icon tile (or its number in the tile), the name with its accent
   and a line or two. Light blue on a white band, white on the paper ground.
   A linked card lifts and its arrow turns green. One column on phones, two
   on tablets, three on wide screens; the last row stretches to fill, and
   four cards sit two by two. */
.svc-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.svc-row {
  position: relative; flex: 1 1 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(22px, 2.4vw, 30px); border-radius: 24px;
  background: var(--white); border: 1px solid var(--line); color: inherit;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.band .svc-row, .section--cloud .svc-row { background: var(--blue-tint); border-color: transparent; }
.svc-row .num { position: absolute; top: clamp(22px, 2.4vw, 30px); right: clamp(22px, 2.4vw, 30px); font-size: 13px; font-weight: 600; line-height: 1; color: var(--slate); }
.svc-row .id { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.svc-row .ico, .svc-row--plain .num {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: var(--blue-tint); color: var(--blue-lit);
}
.band .svc-row .ico, .section--cloud .svc-row .ico,
.band .svc-row--plain .num, .section--cloud .svc-row--plain .num { background: var(--white); box-shadow: 0 6px 16px rgba(11,47,122,0.08); }
.svc-row .ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
/* A card without an icon shows its number in the tile. */
.svc-row--plain .num { position: static; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.svc-row .nm { font-weight: 700; font-size: clamp(20px, 1.7vw, 23px); line-height: 1.15; letter-spacing: -0.025em; color: var(--blue); }
.svc-row .nm .b { font-size: inherit; }
.svc-row .ds { flex: 1 1 auto; font-size: 15.5px; line-height: 1.6; color: #33425A; }
/* A linked card carries its arrow in the top corner, out of the copy's way. */
.svc-row .ar {
  position: absolute; top: clamp(18px, 2vw, 26px); right: clamp(18px, 2vw, 26px);
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--blue-lit); font-size: 17px; line-height: 1;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
a.svc-row:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11,47,122,0.3); }
a.svc-row:hover .nm { color: var(--blue-lit); }
a.svc-row:hover .ar, a.svc-row:focus-visible .ar { background: var(--green); border-color: var(--green); color: var(--white); }
@media (min-width: 601px) { .svc-row { flex-basis: calc(50% - 7px); } }
@media (min-width: 1041px) {
  .svc-list { gap: 18px; }
  .svc-row { flex-basis: calc(33.333% - 12px); }
  .svc-list:has(> .svc-row:nth-child(4):last-child) > .svc-row { flex-basis: calc(50% - 9px); }
}
@media (prefers-reduced-motion: reduce) { .svc-row, .svc-row .ar { transition: none; } a.svc-row:hover { transform: none; } }

/* Co-founder teaser band: the one navy band that stays navy */
.cofound { position: relative; overflow: hidden; background: var(--navy); color: var(--on-dark); }
.cofound::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(143,165,214,0.16) 1.2px, transparent 1.2px); background-size: 28px 28px; }
.cofound-inner { position: relative; max-width: var(--container); margin: 0 auto; padding: var(--section-y) var(--gutter); display: flex; flex-direction: column; gap: clamp(32px, 5vw, 72px); }
.cofound-copy { min-width: 0; }
.cofound .eyebrow-pill { margin-bottom: var(--stack); }
.cofound .eyebrow-pill span:last-child { color: var(--on-dark-acc); }
.cofound h2 { font-size: clamp(36px, 4.6vw, 64px); color: var(--white); margin: 0 0 var(--stack); }
.cofound h2 .ac { color: var(--on-dark-acc); }
.cofound p { font-size: 16px; line-height: 1.75; color: var(--on-dark); margin: 0 0 var(--stack); max-width: 560px; }
.cofound-stats { display: grid; grid-template-columns: 1fr; gap: 18px; }
.cofound-stats > div { padding: 16px 0 0; border-top: 1px solid rgba(143,165,214,0.35); }
.cofound-stats .k { font-family: var(--font-display); font-weight: 700; font-size: clamp(37px, 3.36vw, 54px); line-height: 0.95; color: var(--white); letter-spacing: -0.03em; }
.cofound-stats .k .u { color: var(--on-dark-acc); font-size: 0.7em; }
.cofound-stats .k .u.sm { font-size: 0.45em; font-family: var(--font-ui); font-weight: 500; }
.cofound-stats .v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--on-dark-dim); margin-top: 12px; line-height: 1.5; }
@media (min-width: 601px) {
  .cofound p { font-size: 17px; margin-bottom: 32px; }
  .cofound-stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cofound-stats > div { padding: 8px clamp(14px, 1.6vw, 24px); border-top: 0; border-left: 1px solid rgba(143,165,214,0.35); }
}
@media (min-width: 901px) {
  .cofound-inner { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cofound-copy { flex: 1 1 480px; }
  .cofound-stats { flex: 1 1 340px; min-width: 280px; }
}

/* Steps and reasons: cards that alternate light blue and brand blue, as the
   homepage "How a project runs" cards do. The number leads, the label sits
   in a pill beside it. Three or four to a row on wide screens; five or six
   sit three to a row. */
.why-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.why-col {
  flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 24px; background: var(--blue-tint);
}
.why-col .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.why-col .numeral { font-weight: 700; font-size: clamp(40px, 3.6vw, 52px); line-height: 0.9; letter-spacing: -0.03em; color: var(--blue); }
.why-col .reason {
  display: inline-flex; padding: 6px 12px; border-radius: var(--r-pill); background: var(--white);
  box-shadow: 0 0 0 1px rgba(11,47,122,0.08); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--blue-lit);
}
.why-col .ttl { font-weight: 700; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.12; letter-spacing: -0.03em; color: var(--blue); margin-bottom: 12px; }
.why-col .ttl .b { font-size: inherit; }
.why-col .body { font-size: 15.5px; line-height: 1.65; color: #33425A; flex: 1; }
/* Every other card is brand blue. */
.why-col:nth-child(even) { background: var(--blue); }
.why-col:nth-child(even) .numeral, .why-col:nth-child(even) .ttl, .why-col:nth-child(even) .receive span { color: var(--white); }
.why-col:nth-child(even) .b, .why-col:nth-child(even) .ac { color: var(--on-dark-acc); }
.why-col:nth-child(even) .body, .why-col:nth-child(even) .receive { color: var(--on-dark); }
.why-col:nth-child(even) .reason { background: rgba(255,255,255,0.1); box-shadow: none; color: var(--on-dark); }
.why-col:nth-child(even) a { color: var(--white); }
@media (min-width: 601px) { .why-col { flex-basis: calc(50% - 7px); } }
@media (min-width: 1041px) {
  .why-grid { gap: 18px; }
  .why-col { flex-basis: calc(33.333% - 12px); }
  .why-grid:has(> .why-col:nth-child(4):last-child) > .why-col { flex-basis: calc(25% - 14px); }
}


/* =========================================================================
   CO-FOUNDER PROGRAM PAGE
   ========================================================================= */
/* The short answer up top: one light-blue card, the question on the left
   with its label in a pill, the answer large on the right. */
.para-split {
  display: flex; flex-direction: column; gap: 18px 56px;
  padding: clamp(26px, 4vw, 56px); border-radius: 28px; background: var(--blue-tint);
}
.para-split > .l, .para-split > .r { min-width: 0; }
.para-split .kick {
  display: inline-flex; margin-bottom: 16px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--white);
  box-shadow: 0 0 0 1px rgba(11,47,122,0.08); font-size: 13px; color: var(--blue-lit);
}
.para-split .l h2 { font-size: clamp(28px, 3.3vw, 44px); margin: 0; }
.para-split .lead-quote { font-weight: 500; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; }
.para-split .lead-quote:last-child { margin-bottom: 0; }
.para-split .note { font-size: 15.5px; line-height: 1.7; color: #33425A; margin: 0; }
/* Homepage "Who we work with" (Option B on the design canvas): the heading
   and the promises on the left, four audience rows on the right, each row
   a link to the service that fits. */
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.who-intro h2 { margin: 0; }
.who-lead { margin: 28px 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.who-promises { display: flex; flex-direction: column; gap: 10px; }
.who-promises li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.who-promises svg { flex: none; margin-top: 3px; color: var(--green); }
.who-list { border-top: 1px solid var(--line); }
.who-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 16px 20px;
  padding: 22px 0; border-bottom: 1px solid var(--line); color: inherit;
}
.who-ico {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: #F5F5F7; color: var(--blue); transition: background 180ms var(--ease);
}
.who-t { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); transition: color 180ms var(--ease); }
.who-d { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--slate); }
.who-ar {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--rule);
  display: grid; place-items: center; font-size: 18px; color: var(--blue-lit);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.who-row:hover .who-ico, .who-row:focus-visible .who-ico { background: var(--blue-tint); }
.who-row:hover .who-t, .who-row:focus-visible .who-t { color: var(--blue-lit); }
.who-row:hover .who-ar, .who-row:focus-visible .who-ar { background: var(--green); border-color: var(--green); color: var(--white); }
@media (min-width: 901px) {
  .who-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 7vw, 96px); }
}
@media (prefers-reduced-motion: reduce) { .who-ico, .who-t, .who-ar { transition: none; } }
.para-split .note b { font-weight: 600; color: var(--ink); }
@media (min-width: 761px) {
  .para-split { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .para-split > .l { flex: 1 1 300px; min-width: 240px; }
  .para-split > .r { flex: 1.3 1 460px; min-width: 280px; }
}


.exchange { display: flex; flex-direction: column; gap: 16px; }
.xcard { min-width: 0; border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 40px); background: var(--paper); border: 1px solid var(--line); }
.xcard--dark { background: var(--navy); border-color: var(--navy); position: relative; overflow: hidden; }
.xcard--dark::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(143,165,214,0.14) 1px, transparent 1px); background-size: 24px 24px; }
.xcard > * { position: relative; }
.xcard .kick { color: var(--blue-lit); margin-bottom: 20px; }
.xcard--dark .kick { color: var(--on-dark-grn); }
.xrow { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.xcard--dark .xrow { border-top-color: rgba(143,165,214,0.28); }
.xrow .n { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--slate); flex: 0 0 30px; }
.xcard--dark .xrow .n { color: var(--on-dark-dim); }
.xrow .t { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.03em; color: var(--blue); margin-bottom: 6px; }
.xcard--dark .xrow .t { color: var(--white); }
.xrow .d { font-size: 14.5px; line-height: 1.65; color: var(--slate); }
.xcard--dark .xrow .d { color: var(--on-dark); }
@media (min-width: 761px) { .exchange { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 20px; } .xcard { flex: 1 1 420px; min-width: 300px; } }

.nots { position: relative; overflow: hidden; background: var(--navy); }
.nots::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(143,165,214,0.14) 1.2px, transparent 1.2px); background-size: 28px 28px; }
.nots-inner { position: relative; max-width: var(--container); margin: 0 auto; padding: var(--section-y) var(--gutter); display: flex; flex-direction: column; gap: var(--stack); }
.not-row { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(143,165,214,0.3); padding-top: clamp(20px, 3vw, 40px); }
.not-row .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5.38vw, 81px); line-height: 0.95; letter-spacing: -0.03em; color: var(--white); text-wrap: balance; }
.not-row .t .ac { color: var(--on-dark-acc); }
.not-row .d { max-width: 460px; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; color: var(--on-dark); }
@media (min-width: 761px) { .not-row { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); } .not-row .t { flex: 1 1 520px; } .not-row .d { flex: 1 1 320px; } }

.timeline { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 36px); }
.tstep { border-top: 1px solid var(--blue); padding-top: 20px; }
.tstep .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.tstep .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.36vw, 47px); line-height: 0.9; color: var(--blue); }
.tstep .when { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-lit); margin: 0; text-align: left; }
.tstep h3 { font-size: 24px; color: var(--blue); margin-bottom: 10px; }
.tstep h3 .b { font-size: inherit; }
.tstep p { font-size: 14.5px; line-height: 1.65; color: var(--slate); }
@media (min-width: 601px) { .timeline { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

.criteria { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.criterion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 20px 20px; border-bottom: 1px solid var(--rule); }
.criterion:last-child { border-bottom: 0; }
.criterion .n { flex: 0 0 40px; font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; color: var(--slate); }
.criterion .t { flex: 1 1 200px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--blue); letter-spacing: -0.03em; }
.criterion .t .b { font-size: inherit; }
.criterion .d { flex: 1 1 100%; font-size: 15px; line-height: 1.6; color: var(--slate); }
@media (min-width: 901px) { .criterion { gap: clamp(16px, 3vw, 40px); padding: 22px 28px; } .criterion .t { flex: 0 1 300px; } .criterion .d { flex: 1 1 320px; } }

.sec-note { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.85vw, 24px); line-height: 1.3; color: var(--ink); margin-top: clamp(24px, 3vw, 40px); }

.clauses { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: clamp(24px, 3vw, 44px); }
.clause { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); color: inherit; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.band .clause { background: var(--blue-tint); border-color: transparent; }
a.clause:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11,47,122,0.3); }
.clause .kick { align-self: flex-start; margin-bottom: 16px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--blue-tint); font-size: 13px; color: var(--blue-lit); }
.band .clause .kick { background: var(--white); box-shadow: 0 0 0 1px rgba(11,47,122,0.08); }
.clause .lead { font-weight: 700; font-size: clamp(28px, 2.5vw, 36px); line-height: 1; letter-spacing: -0.035em; color: var(--blue); margin-bottom: 12px; }
.clause .body { flex: 1; font-size: 15px; line-height: 1.6; color: #33425A; }
.clause .more { margin-top: 18px; color: var(--blue-lit); font-weight: 600; font-size: 14px; }
.clause .more::after { content: " \203A"; }
@media (min-width: 601px) { .clauses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1041px) { .clauses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .clauses:has(> .clause:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .clause { transition: none; } a.clause:hover { transform: none; } }

.doc { max-width: 880px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(64px, 10vw, 120px); }
.doc-preamble { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 2.6vw, 32px); margin-bottom: clamp(32px, 4vw, 52px); }
.doc-preamble .t { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue); margin-bottom: 10px; }
.doc-preamble p { font-size: 14.5px; line-height: 1.7; color: var(--slate); margin: 0; }
.doc-clause { border-top: 1px solid var(--rule); padding: clamp(22px, 3vw, 36px) 0; }
.doc-clause h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 16px; line-height: 1.15; }
.doc-clause .body { font-size: 15.5px; line-height: 1.8; color: var(--ink); }
.doc-clause .body p { margin: 0 0 14px; }
.doc-clause .body p:last-child { margin-bottom: 0; }
.doc-clause .body strong { font-weight: 600; }
.doc-note { border-top: 1px solid var(--rule); margin-top: clamp(24px, 3vw, 36px); padding-top: clamp(24px, 3vw, 36px); font-size: 14px; line-height: 1.7; color: var(--slate); }
.doc-note + .btn-row { margin-top: clamp(24px, 3vw, 36px); }

/* =========================================================================
   SERVICE PAGES
   ========================================================================= */
.deliverables { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dcard { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; }
.band .dcard { background: var(--blue-tint); border-color: transparent; }
a.dcard:hover { border-color: var(--blue-lit); }
.dcard .n, .scard .n { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: var(--blue-tint); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--blue-lit); }
.band .dcard .n { background: var(--white); box-shadow: 0 6px 16px rgba(11,47,122,0.08); }
.dcard .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.85vw, 24px); line-height: 1.1; letter-spacing: -0.03em; color: var(--blue); margin-bottom: 10px; }
.dcard .t .b { font-size: inherit; }
.dcard .d { font-size: 15.5px; line-height: 1.6; color: #33425A; flex: 1; }
.dcard .link { align-self: flex-start; }
@media (min-width: 601px) { .deliverables { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } }

/* A single point worth stopping for: a tile with an icon, as on the
   homepage "Why us" tiles. White on the paper ground, light blue on a band. */
.callout { background: var(--white); border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.band .callout { background: var(--blue-tint); border-color: transparent; }
.callout .ico {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px;
  background: var(--blue-tint); color: var(--blue-lit);
}
.band .callout .ico { background: var(--white); box-shadow: 0 6px 16px rgba(11,47,122,0.08); }
.callout .ico svg { stroke-width: 1.8; }
.callout .body { min-width: 0; }
.callout h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; color: var(--blue); margin-bottom: 10px; }
.callout p { font-size: 16px; line-height: 1.65; color: #33425A; max-width: 860px; }
@media (min-width: 761px) { .callout { flex-direction: row; align-items: flex-start; gap: clamp(24px, 3vw, 40px); } .callout .body { flex: 1 1 320px; min-width: 260px; } }

/* =========================================================================
   ABOUT, PROCESS, BOOKING, CONTACT, INSIGHTS, TECHNOLOGIES, FAQ
   ========================================================================= */
.story { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 80px); }
.story .year { min-width: 0; }
.story .year b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(67px, 7.56vw, 118px); line-height: 0.85; color: var(--blue); letter-spacing: -0.03em; }
.story .year span { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); margin-top: 16px; }
.story .body { min-width: 0; }
.story .body p { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.8; color: var(--ink); margin: 0 0 20px; }
.story .body p:last-child { margin-bottom: 0; }
.story-pull { text-align: center; padding-top: clamp(40px, 6vw, 72px); font-family: var(--font-display); font-weight: 700; font-size: clamp(25px, 3.36vw, 47px); letter-spacing: -0.03em; color: var(--blue); line-height: 1.05; text-wrap: balance; }
@media (min-width: 761px) { .story { flex-direction: row; flex-wrap: wrap; } .story .year { flex: 0 1 300px; min-width: 220px; } .story .body { flex: 1.4 1 460px; min-width: 280px; } .story .body p { margin-bottom: 24px; } }

.numbers { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.numbers > div { border-bottom: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 32px) 0; }
.numbers .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.36vw, 50px); line-height: 0.95; color: var(--blue); letter-spacing: -0.03em; }
.numbers .label { font-size: 14px; line-height: 1.6; color: var(--slate); margin-top: 12px; }
@media (min-width: 601px) { .numbers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 0; border-left: 1px solid var(--rule); } .numbers > div { border-bottom: 0; border-right: 1px solid var(--rule); padding: clamp(20px, 2.4vw, 32px); } }

.duo { display: grid; grid-template-columns: 1fr; gap: 16px; }
.duo .card { display: flex; flex-direction: column; padding: clamp(24px, 3.5vw, 40px); border-radius: 28px; }
.duo .card:nth-child(even) { background: var(--blue); border-color: var(--blue); }
.duo .card:nth-child(even) h3 { color: var(--white); }
.duo .card:nth-child(even) .ac, .duo .card:nth-child(even) .b, .duo .card:nth-child(even) .kick { color: var(--on-dark-acc); }
.duo .card:nth-child(even) p { color: var(--on-dark); }
.duo .card:nth-child(even) .link { color: var(--white); border-color: rgba(199,214,242,0.5); }
.duo .kick { color: var(--blue-lit); }
.duo h3 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 14px; }
.duo p { font-size: 15.5px; line-height: 1.75; color: var(--slate); margin-bottom: 26px; flex: 1; }
.duo .link { align-self: flex-start; }
@media (min-width: 761px) { .duo { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } }

.booking { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 56px); }
.scheduler { min-width: 0; min-height: 360px; border: 1px solid var(--line); border-radius: var(--r-card); background: repeating-linear-gradient(45deg, var(--white), var(--white) 14px, var(--paper) 14px, var(--paper) 28px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.scheduler .tag-mono, .formslot .tag-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 20px; }
.scheduler iframe { width: 100%; min-height: 420px; border: 0; border-radius: var(--r-card); }
.scheduler:has(iframe) { background: var(--white); padding: 0; }
.booking-notes { min-width: 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.booking-notes .card { padding: clamp(24px, 3.5vw, 36px); }
.booking-notes .kick, .side-card .kick, .enquiry-notes .kick { color: var(--blue-lit); margin-bottom: 12px; }
.booking-notes p { font-size: 15px; line-height: 1.75; color: var(--slate); margin: 0; }
@media (min-width: 901px) { .booking { flex-direction: row; flex-wrap: wrap; align-items: stretch; } .scheduler { flex: 1.4 1 480px; min-width: 300px; min-height: 420px; } .booking-notes { flex: 1 1 320px; min-width: 280px; } }

.contact-layout { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 56px); }
.contact-form { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 40px); }
.contact-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 901px) { .contact-layout { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .contact-form { flex: 1.3 1 460px; min-width: 300px; } .contact-side { flex: 1 1 320px; min-width: 280px; } }

.topics { display: flex; gap: 10px; flex-wrap: wrap; }
.topics a, .topics span { font-family: var(--font-ui); font-size: 14px; font-weight: 500; padding: 9px 18px; border-radius: var(--r-pill); background: var(--white); color: var(--blue); border: 1px solid var(--line); transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.topics a:hover, .topics .is-on { background: var(--blue); color: var(--white); border-color: var(--blue); }

.posts { display: grid; grid-template-columns: 1fr; gap: 16px; }
.post { display: flex; flex-direction: column; gap: 16px; background: var(--blue-tint); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); color: inherit; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
a.post:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11,47,122,0.3); }
a.post:hover .ar { background: var(--green); border-color: var(--green); color: var(--white); }
.post .top { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; }
.post .top .tag-line { margin-right: auto; }
.post .n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); }
.post .ar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--blue-lit); font-size: 17px; line-height: 1; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); }
.post .top { align-items: center; }
.post .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.03em; color: var(--blue); line-height: 1.15; flex: 1; }
@media (min-width: 601px) { .posts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; } }

table.compare { background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 640px; }
table.compare thead th { padding: 18px 20px; }
table.compare thead th.us { background: var(--blue); color: var(--white); }
table.compare td { padding: 16px 20px; font-size: 15px; color: var(--slate); }
table.compare td.lbl { font-weight: 600; color: var(--ink); }
table.compare td.us { background: var(--blue-tint); font-weight: 600; color: var(--blue); }
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody tr:hover td.us { background: var(--blue-tint); }

.voices { columns: 300px 3; column-gap: 16px; }
.voice { break-inside: avoid; position: relative; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 32px 24px 24px; }
.voice .mark { position: absolute; top: 10px; right: 22px; user-select: none; font-family: var(--font-display); font-weight: 700; font-size: 71px; line-height: 1; color: var(--blue-tint); }
.voice blockquote { position: relative; margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.3; letter-spacing: -0.03em; color: var(--ink); }
.voice figcaption { display: flex; align-items: center; gap: 12px; }
.voice .wh { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; color: var(--slate); line-height: 1.5; }
@media (min-width: 601px) { .voices { columns: 340px 3; column-gap: 20px; } .voice { margin-bottom: 20px; padding: 34px 28px 28px; } .voice blockquote { font-size: 22px; } }

.stack { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.scard { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 2.4vw, 30px); }
.scard .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.85vw, 24px); line-height: 1.1; letter-spacing: -0.03em; color: var(--blue); margin-bottom: 10px; }
.scard p { font-size: 15.5px; line-height: 1.6; color: #33425A; margin: 0; }
.legacy { background: var(--blue-tint); border: 0; border-radius: 28px; padding: clamp(24px, 3.5vw, 40px); }
.legacy .t { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.85vw, 25px); letter-spacing: -0.03em; color: var(--blue); margin-bottom: 12px; }
.legacy p { font-size: 15.5px; line-height: 1.75; color: var(--slate); margin: 0; }
.scard .t .b, .legacy .t .b { font-size: inherit; }
@media (min-width: 601px) { .stack { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .scard { padding: 30px 28px; } }

.faq-cat { margin-bottom: clamp(32px, 4vw, 52px); }
.faq-cat:last-child { margin-bottom: 0; }
.faq-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--stack); }
.faq-cat-head .bar { width: 28px; height: 1px; background: var(--blue); flex-shrink: 0; }
.faq-cat-head h2 { font-size: clamp(26px, 2.4vw, 32px); margin: 0; }

/* =========================================================================
   COUNTRY AND STATE PAGES
   ========================================================================= */
.market-intro { font-size: 16.5px; line-height: 1.75; color: var(--slate); margin: 0; }
.market-stats { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(32px, 4vw, 52px); }
.market-stats > div { border-top: 1px solid var(--blue); padding-top: 18px; }
.market-stats .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(37px, 3.7vw, 54px); line-height: 0.95; color: var(--blue); letter-spacing: -0.03em; }
.market-stats .label { font-size: 15px; line-height: 1.65; color: var(--slate); margin-top: 12px; }
@media (min-width: 601px) { .market-stats { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .market-stats > div { padding-top: 22px; } }

.translation { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 3vw, 36px); }
.translation .t { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.85vw, 24px); line-height: 1.3; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 14px; }
.translation .t:last-child { margin-bottom: 0; }
.translation p { font-size: 15.5px; line-height: 1.7; color: var(--slate); margin: 0; }

.promises { display: grid; grid-template-columns: 1fr; gap: 12px; }
.promise { background: rgba(234,240,251,0.06); border: 1px solid rgba(199,214,242,0.24); border-radius: 16px; padding: 20px; font-size: 15px; line-height: 1.6; color: #E9EFFB; }
.promise .tick { width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid rgba(199,214,242,0.3); display: grid; place-items: center; margin-bottom: 14px; }
@media (min-width: 601px) { .promises { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .promise { padding: 24px; } }

.enquiry-notes { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.enquiry-notes .card { background: var(--paper); border-radius: 24px; }
.enquiry-notes .card p { margin-bottom: 0; }
.enquiry-notes .card .link { margin-top: 14px; }
/* City pages: the three ways in, side by side. */
.enquiry-notes--row .card { display: flex; flex-direction: column; }
.enquiry-notes--row .card .link { margin-top: auto; padding-top: 14px; }
@media (min-width: 761px) { .enquiry-notes--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Industry pages: each rule links to its official source. */
.rule-src { display: inline-block; margin-left: 4px; font-size: 13px; font-weight: 600; color: var(--blue-lit); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.rule-src:hover { color: var(--blue); }
/* Insights articles */
.doc--article { padding-top: clamp(32px, 4vw, 56px); }
.doc--article .prose { max-width: none; }
.article-meta { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.article-note { background: var(--blue-tint); border-left: 3px solid var(--blue-lit); border-radius: 0 12px 12px 0; padding: 18px 22px; }
.article-note p { color: var(--ink) !important; margin: 0; }
.article-sources { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--rule); }
.article-sources h2 { font-size: 22px; margin: 0 0 16px; }
.article-sources ol { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: decimal; }
.article-sources li { font-size: 14px; line-height: 1.6; color: var(--slate); }
.article-sources a { color: var(--blue-lit); text-decoration: underline; text-underline-offset: 2px; }
.article-disclaimer { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--slate); }
a.post { color: inherit; }
.post .tag-line { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-lit); }
/* Where a page quotes figures, the sources sit right under them. */
.sources { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--slate); }
.sources span { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.sources a { color: var(--slate); text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: var(--blue); }

/* =========================================================================
   LEGAL DOCUMENTS
   ========================================================================= */
.doc-legal { max-width: 800px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(64px, 9vw, 110px); }
.doc-legal h1 { font-size: clamp(38px, 5vw, 64px); margin: 0 0 14px; line-height: 1.02; }
.doc-legal h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 40px 0 14px; line-height: 1.1; }
.doc-legal h3 { font-size: 22px; color: var(--ink); margin: 28px 0 10px; }
.doc-legal p, .doc-legal li { font-size: 16px; line-height: 1.8; color: var(--ink); }
.doc-legal p { margin: 0 0 16px; }
.doc-legal a { color: var(--blue); font-weight: 600; }
.doc-legal a:hover { text-decoration: underline; }
.doc-legal .eff p { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; color: var(--slate); margin: 0 0 8px; }
.doc-legal .eff strong { color: var(--ink); font-weight: 600; }
.doc-legal .lede-rule { border-bottom: 1px solid var(--rule); padding-bottom: 24px; margin-bottom: 8px; }
.doc-legal ul, .doc-legal ol { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.doc-legal ul li { position: relative; padding-left: 22px; }
.doc-legal ul li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--blue-lit); }
.doc-legal ol { counter-reset: n; }
.doc-legal ol li { position: relative; padding-left: 30px; counter-increment: n; }
.doc-legal ol li::before { content: counter(n) "."; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 600; color: var(--blue); font-size: 14px; }
.doc-legal table { margin: 8px 0 24px; }


/* =========================================================================
   WORK: framed screenshots, mockup grid, single case study
   ========================================================================= */
.shotframe, .workitem .shot { display: block; position: relative; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); overflow: hidden; box-shadow: var(--shadow-frame); }
.shotframe { margin: 0; }
.shotframe .chrome, .workitem .shot .chrome { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 34px; background: #FAFAF8; border-bottom: 1px solid var(--line); }
.shotframe .dots, .workitem .shot .dots { display: flex; gap: 6px; flex-shrink: 0; }
.shotframe .dots i, .workitem .shot .dots i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--rule); display: block; }
.shotframe .addr, .workitem .shot .addr { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shotframe img, .workitem .shot img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) { .shotframe .chrome, .workitem .shot .chrome { height: 38px; } .shotframe .addr, .workitem .shot .addr { font-size: 11.5px; padding: 4px 14px; } }

.casebody { max-width: 820px; }
.brieftext { font-size: 17px; line-height: 1.8; color: var(--ink); margin: 0 0 18px; }
.brieftext:last-child { margin-bottom: 0; }

.nextcase { display: grid; grid-template-columns: 1fr; align-items: center; gap: clamp(20px, 4vw, 56px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(20px, 3vw, 40px); transition: border-color 200ms var(--ease); }
.nextcase:hover { border-color: var(--blue-lit); }
.nextcase .thumb { order: -1; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.nextcase .thumb img { display: block; width: 100%; height: auto; }
.nextcase .t { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.18vw, 30px); line-height: 1.1; letter-spacing: -0.03em; color: var(--blue); margin-bottom: 10px; }
.nextcase .t .b { font-size: inherit; }
.nextcase .m { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; color: var(--slate); }
@media (min-width: 901px) { .nextcase { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } .nextcase .thumb { order: 0; } }

.mockgrid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.6vw, 32px); }
.mockcard { grid-column: 1 / -1; color: inherit; display: grid; }
.mockcard .stage { display: grid; place-items: end center; min-height: clamp(220px, 26vw, 420px); border-radius: var(--r-card); overflow: hidden; background: linear-gradient(160deg, #EEF2FA 0%, #E3EAF6 100%); border: 1px solid var(--line); transition: border-color 260ms var(--ease); }
.mockcard:hover .stage { border-color: var(--blue-lit); }
.mockcard .stage--app    { background: linear-gradient(160deg, var(--navy), var(--blue) 90%); }
.mockcard .stage--portal { background: linear-gradient(160deg, #E7EEFA, #CFDDF5); }
.mockcard .dev--web, .mockcard .dev--portal { width: min(88%, 900px); margin-top: clamp(24px, 4vw, 56px); border-radius: 12px 12px 0 0; overflow: hidden; background: var(--white); box-shadow: 0 24px 56px rgba(3, 12, 38, 0.22); }
.mockcard .dev .bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #FAFAF8; border-bottom: 1px solid var(--line); }
.mockcard .dev--portal .bar { background: #0F1B33; border-bottom-color: rgba(255,255,255,0.12); }
.mockcard .dev .dots { display: flex; gap: 5px; flex-shrink: 0; }
.mockcard .dev .dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--rule); }
.mockcard .dev--portal .dots i { background: rgba(255,255,255,0.28); }
.mockcard .dev .addr { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--slate); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mockcard .dev--app { width: min(66%, 260px); margin-top: clamp(24px, 4vw, 52px); position: relative; padding: 9px 9px 0; border-radius: 34px 34px 0 0; background: linear-gradient(160deg, #1B2740, #0B1222); box-shadow: 0 26px 60px rgba(3, 12, 38, 0.45), inset 0 0 0 1px rgba(255,255,255,0.10); }
.mockcard .dev--banner { width: 94%; margin-top: clamp(12px, 2.2vw, 28px); border-radius: 12px 12px 0 0; overflow: hidden; background: var(--white); box-shadow: 0 24px 56px rgba(3, 12, 38, 0.22); }
.mockcard .dev--app .notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 78px; height: 20px; border-radius: var(--r-pill); background: #0B1222; z-index: 2; }
.mockcard .dev--app .screen { border-radius: 26px 26px 0 0; }
.mockcard .screen { display: block; overflow: hidden; background: var(--white); }
.mockcard .screen img { display: block; width: 100%; height: auto; }
.mockcard .screen .ph { display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(11,47,122,0.045) 12px 24px), var(--paper); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); }
.mockcard .dev--app .screen .ph { aspect-ratio: 9 / 17; }
.mockcard.is-demo { cursor: default; }
.mockcard.is-demo:hover .stage { border-color: var(--line); }
@media (min-width: 761px) {
  .mockgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mockcard { grid-column: span 1; }
  .mockcard--full { grid-column: 1 / -1; }
  .mockcard .dev--app { width: min(52%, 300px); }
}

/* Service page hero: copy on the left, the service drawing on the right. */
.hero--service .hero-inner { gap: 28px; }
.sf-media--hero { pointer-events: none; }
.hero--split .hero-side { align-self: stretch; width: 100%; max-width: 560px; }
@media (min-width: 901px) { .hero--split .hero-side { align-self: auto; } }
@media (min-width: 901px) {
  .hero--service .hero-inner { align-items: center; column-gap: clamp(40px, 6vw, 96px); }
  .hero--service .hero-copy { flex: 1 1 520px; max-width: 680px; }
  .hero--service .hero-side { flex: 1 1 340px; max-width: 480px; }
}


/* Cookie tables inside the legal column. */
.doc-legal .table-scroll { margin: 8px 0 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.doc-legal .legal-table { margin: 0; min-width: 600px; }
.doc-legal .legal-table th { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #FAFAF8; }
.doc-legal .legal-table td { font-size: 14.5px; line-height: 1.6; color: var(--ink); padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-legal .legal-table td:first-child { font-family: var(--font-mono); font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--blue); }
.doc-legal .legal-table tbody tr:last-child td { border-bottom: 0; }

/* =========================================================================
   COOKIE CONSENT: bottom banner and preferences dialog
   Accept and Reject share one style on purpose, so neither is nudged.
   ========================================================================= */
/* A full-width bar flush with the bottom and both sides, as on the .com
   site, its content lined up with the page. On phones it sits over the tab
   bar until a choice is made. */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -12px 36px rgba(11, 47, 122, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.cc-banner[hidden] { display: none; }
.cc-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 18px var(--gutter); display: flex; flex-direction: column; gap: 14px;
}
.cc-title { font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: 0; color: var(--ink); margin: 0 0 6px; }
.cc-text p { font-size: 14px; line-height: 1.6; color: var(--slate); margin: 0; }
.cc-text a, .cc-foot a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cc-btn {
  flex: 1 1 0; min-width: 0; height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--blue); background: var(--white); color: var(--blue);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.cc-btn:hover { background: var(--blue); color: var(--white); }
.cc-btn:focus-visible, .cc-link:focus-visible, .cc-close:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }
.cc-link {
  flex: 1 1 100%; background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (min-width: 761px) {
  .cc-inner { flex-direction: row; align-items: center; gap: 28px; padding: 20px var(--gutter); }
  .cc-text { flex: 1 1 auto; }
  .cc-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  .cc-btn { flex: 0 0 auto; }
  .cc-link { flex: 0 0 auto; padding: 0 4px; }
}

.cc-dialog {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  border: 0; padding: 0; border-radius: var(--r-card); background: var(--white); color: var(--ink);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
  box-shadow: 0 24px 64px rgba(7, 31, 82, 0.28);
}
.cc-dialog::backdrop { background: rgba(7, 31, 82, 0.45); }
.cc-form { position: relative; padding: 24px 20px 20px; }
.cc-form h2 { font-size: clamp(26px, 3vw, 32px); color: var(--blue); margin: 0 40px 8px 0; }
.cc-intro { font-size: 14.5px; line-height: 1.6; color: var(--slate); margin: 0 0 8px; }
.cc-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.cc-cat { border-top: 1px solid var(--rule); padding: 16px 0; }
.cc-cat p { font-size: 14px; line-height: 1.6; color: var(--slate); margin: 6px 0 0; }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
label.cc-cat-head { cursor: pointer; }
.cc-cat-name { font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--ink); }
.cc-always { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); }
.cc-switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; margin: 0;
  width: 46px; height: 28px; border-radius: var(--r-pill); background: var(--rule); cursor: pointer;
  transition: background 160ms var(--ease);
}
.cc-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(15, 27, 51, 0.25); transition: transform 160ms var(--ease);
}
.cc-switch:checked { background: var(--blue); }
.cc-switch:checked::before { transform: translateX(18px); }
.cc-switch:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }
.cc-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.cc-gpc { color: var(--blue) !important; font-weight: 600; }
.cc-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--rule); padding-top: 16px; }
.cc-dialog-actions .cc-btn { flex: 1 1 140px; }
.cc-foot { font-size: 13px; color: var(--slate); margin: 14px 0 0; text-align: center; }
@media (min-width: 601px) { .cc-form { padding: 28px 28px 24px; } }
@media (prefers-reduced-motion: reduce) { .cc-btn, .cc-switch, .cc-switch::before { transition: none; } }
.form-privacy { margin-top: 6px; }
.form-privacy a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Contact: the form card's own heading, and the booking section anchor
   clearing the sticky header when reached from #book links. */
.contact-h { font-size: clamp(26px, 2.6vw, 32px); color: var(--blue); margin: 0 0 18px; }
#book { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Social icon links: round, hairline, filling on hover. Dark by default for
   the footer; light inside cards on paper or white. */
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-pill);
  border: 1px solid rgba(199, 214, 242, 0.28); color: var(--on-dark);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.social a:hover { background: var(--white); border-color: var(--white); color: var(--navy); transform: translateY(-2px); }
.social a:focus-visible { outline: 2px solid var(--on-dark-acc); outline-offset: 3px; }
.social svg { display: block; }
.card .social { margin-top: 14px; }
.card .social a { border-color: var(--rule); color: var(--blue); background: var(--white); }
.card .social a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.card .social a:focus-visible { outline-color: var(--blue-lit); }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } .social a:hover { transform: none; } }

/* =========================================================================
   CO-FOUNDER PROGRAM: live intake card, intake calendar, apply band
   ========================================================================= */
/* A hub hero that carries a side card: copy left, card right on desktop. */
@media (min-width: 901px) {
  .hero--hub .hero-inner:has(.hero-side) { align-items: center; column-gap: clamp(40px, 5vw, 80px); }
  .hero--hub .hero-inner:has(.hero-side) .hero-copy { flex: 1 1 520px; max-width: 640px; }
  .hero--hub .hero-side { flex: 0 1 420px; max-width: 440px; }
}

.intake-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-frame); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.intake-status, .icycle-status {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--green-dark); background: #E8F7EF; border-radius: var(--r-pill); padding: 6px 12px;
}
.intake-status i, .icycle-status i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
  box-shadow: 0 0 0 0 rgba(10, 168, 96, 0.5); animation: intake-pulse 2s infinite;
}
@keyframes intake-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(10, 168, 96, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(10, 168, 96, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 168, 96, 0); }
}
.intake-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(27px, 2.86vw, 35px); line-height: 1.05; letter-spacing: -0.03em; color: var(--blue); }
.intake-sub { font-size: 14.5px; line-height: 1.6; color: var(--slate); margin: 0; }
.intake-facts { margin: 4px 0 0; border-top: 1px solid var(--rule); }
.intake-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.intake-facts dt { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); padding-top: 3px; flex: 0 0 auto; }
.intake-facts dd { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ink); text-align: right; }
.intake-count { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-lit); text-align: center; padding-top: 4px; }
.intake-card .btn { margin-top: 2px; }
.intake-link { align-self: center; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 601px) { .intake-card { padding: 28px 28px 24px; } }

/* The next three cycles. The open one is lifted and outlined. */
.intake-cycles { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: var(--stack); }
.icycle { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.icycle .icycle-status { color: var(--slate); background: var(--paper); }
.icycle.is-open { border: 1.5px solid var(--blue); box-shadow: var(--shadow-frame); }
.icycle.is-open .icycle-status { color: var(--green-dark); background: #E8F7EF; }
.icycle-range { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.02vw, 27px); line-height: 1.1; letter-spacing: -0.03em; color: var(--blue); }
.icycle-note { font-size: 14.5px; line-height: 1.6; color: var(--slate); margin: 0; }
@media (min-width: 761px) { .intake-cycles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .icycle { padding: 24px; } }

/* Key dates for the open cycle. */
.intake-dates { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 20px; }
.intake-dates-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.intake-dates-head h3 { font-size: clamp(22px, 2.2vw, 28px); color: var(--blue); margin: 0; }
.intake-dates-head .btn { width: auto; height: 44px; font-size: 15px; padding: 0 22px; }
.intake-dates dl { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.intake-dates dl > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.intake-dates dt { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--slate); }
.intake-dates dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
@media (min-width: 761px) {
  .intake-dates { padding: 28px 32px; }
  .intake-dates dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .intake-dates dl > div { flex-direction: row; align-items: baseline; gap: 16px; }
  .intake-dates dt { flex: 0 0 120px; }
}

/* The mid-page apply band reuses the closing band's look. */
.cta-band--intake .kick { color: var(--on-dark-acc); margin: 0; }
.cta-band--intake .kick span { color: var(--white); }

@media (prefers-reduced-motion: reduce) { .intake-status i, .icycle-status i { animation: none; } }
/* Five build steps sit on one row on wide screens, never four plus one. */
@media (min-width: 1041px) { .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } }


/* =========================================================================
   2026 LAYOUT
   Same brand, same tokens: new structure. Proof goes where the decision is
   made, the services read as an index rather than a wall of tiles, and the
   page moves a little as it scrolls, never for anyone who has asked their
   device for less motion.
   ========================================================================= */

/* ---- Hero: a client review beside the buttons ---------------------------
   Open on the page, no card: the client's own stars, the quote, and the
   client with an initials avatar. */
.hero-review { margin: 28px 0 0; max-width: 640px; }
.review-stars { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; }
.review-stars svg { display: block; width: 18px; height: 18px; fill: var(--line); }
.review-stars svg.on { fill: var(--star); }
.hero-review blockquote {
  margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 20px); font-weight: 500;
  line-height: 1.45; letter-spacing: -0.01em; color: var(--ink);
}
.hero-review blockquote::before { content: "\201C"; }
.hero-review blockquote::after { content: "\201D"; }
.hero-review figcaption { display: flex; align-items: center; gap: 10px; }
.review-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center; background: var(--blue); color: var(--white);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.review-who { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; text-align: left; }
.review-who b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.review-who span { font-size: 13.5px; color: var(--slate); }
/* ---- Homepage hero, Apple style (Option 2 on the design canvas) --------
   Centred on white. The small line, then "We build and run" and the typed
   service as the one big headline, the promise and the lede beneath, a blue
   pill with a text link, the review, and the work on a laptop. The text and
   the typing are unchanged; only the composition is new. */
.hero--apple { background: var(--white); text-align: center; }
.hero--apple .hero-inner {
  flex-direction: column; flex-wrap: nowrap; align-items: center;
  /* The review, the laptop and its caption read as one block: tight gaps
     between them and a modest close before the next band. */
  gap: clamp(28px, 3vw, 40px);
  padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(28px, 4vw, 56px);
}
.hero--apple .hero-copy { flex: none; width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.hero--apple .hero-side { flex: none; width: 100%; max-width: 1040px; }

/* The small line above the headline, without its capsule. */
.hero--apple .eyebrow-pill { padding: 0; margin: 0 0 10px; border: 0; background: none; }
.hero--apple .eyebrow-pill span:last-child { font-family: var(--font-ui); font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--slate); }

/* "We build and run", then the typed service, very large and centred. */
/* One tight stack: the small line, the lead, the word, then the promise. */
.hero--apple .typeline { align-items: center; gap: 0; margin: 0 0 clamp(12px, 1.4vw, 20px); }
.hero--apple .typeline-lead { font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.hero--apple .typeline-word { font-size: clamp(40px, 8.6vw, 124px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; min-height: 1em; }
.hero--apple .typeline-list { text-align: center; }
.hero--apple .typeline-caret { width: 0.06em; margin-left: 0.06em; }

/* The promise reads as the subheadline. */
.hero--apple.hero--typed h1 {
  max-width: 780px; margin: 0 auto 12px;
  font-family: var(--font-ui); font-size: clamp(21px, 2.1vw, 28px); font-weight: 500; line-height: 1.32; letter-spacing: -0.015em; color: var(--ink);
}
.hero--apple.hero--typed h1 .ac { font-weight: 500; }
.hero--apple .lede { max-width: 700px; margin: 0 auto; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; }

/* A green pill and a plain text link, as on a product page. */
.hero--apple .btn-row { justify-content: center; align-items: center; margin-top: 28px; gap: 14px 28px; }
/* The brand green, as on every other primary button, at a compact size. */
.hero--apple .btn-primary { height: 46px; padding: 0 24px; font-size: 16px; font-weight: 600; background: var(--green); box-shadow: var(--shadow-cta); }
.hero--apple .btn-primary:hover { background: var(--green-dark); box-shadow: var(--shadow-cta-hover); transform: translateY(-1px); }
.hero--apple .btn-primary::after { content: none; }
.hero--apple .btn-secondary { width: auto; height: auto; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--blue-lit); font-size: 16px; font-weight: 500; }
.hero--apple .btn-secondary::after { content: "\203A"; margin-left: 6px; font-size: 1.15em; line-height: 1; }
.hero--apple .btn-secondary:hover { background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* The review, centred under the buttons. */
.hero--apple .hero-review { margin: 30px auto 0; text-align: center; }
.hero--apple .review-stars, .hero--apple .hero-review figcaption { justify-content: center; }

/* The laptop: a dark bezel round a real client screen, on a thin base. */
.laptop { margin: 0 auto; max-width: 980px; }
.laptop-screen {
  display: block; padding: clamp(7px, 1.1vw, 14px);
  border-radius: clamp(12px, 1.8vw, 22px) clamp(12px, 1.8vw, 22px) 6px 6px;
  background: #1D1D1F; box-shadow: 0 32px 80px -32px rgba(15,27,51,0.5);
}
/* The whole screenshot, uncropped: it is a composed case-study image. */
.laptop-screen img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--white); }
.laptop-base { position: relative; display: block; height: clamp(10px, 1.5vw, 18px); margin: 0 -6%; border-radius: 0 0 22px 22px; background: #D2D2D7; }
.laptop-base i { position: absolute; left: 50%; top: 0; width: 16%; height: 45%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: #BDBDC4; }
/* Under the laptop: a tag, a line about the project, and a link onwards. */
.laptop figcaption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--ink);
}
.laptop-tag {
  padding: 4px 11px; border-radius: 999px; background: var(--blue-tint); color: var(--blue);
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.005em;
}
.laptop-line { font-weight: 500; }
.laptop-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--blue-lit); }
.laptop-more span { font-size: 1.2em; line-height: 1; transition: transform 180ms var(--ease); }
.laptop-more:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.laptop-more:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .laptop-more span { transition: none; } }
/* ---- Moving rows: the build band under the homepage hero --------------- */
/* Each row is printed twice and slides by exactly one copy, so the loop
   never jumps. Hover or keyboard focus stops it. */
.marquee {
  --gap: clamp(28px, 4vw, 56px); --dur: 48s;
  display: flex; gap: var(--gap); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  flex: 0 0 auto; min-width: 100%; display: flex; align-items: center; justify-content: space-around; gap: var(--gap);
  animation: dtMarquee var(--dur) linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes dtMarquee { to { transform: translateX(calc(-100% - var(--gap))); } }

/* Under the hero: what we build in big type, and the stack beneath it. */
.build-band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(18px, 2vw, 26px) 0 clamp(18px, 2vw, 26px); }
.build-band-services { --gap: clamp(22px, 2.6vw, 38px); --dur: 64s; }
.build-band-services li { display: inline-flex; align-items: center; gap: var(--gap); }
.build-band-services li::after { content: "\2726"; font-size: clamp(14px, 1.4vw, 20px); line-height: 1; color: var(--blue-lit); }
.build-band-services a {
  font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; line-height: 1.12;
  letter-spacing: -0.045em; color: var(--blue); white-space: nowrap; transition: color 160ms var(--ease);
}
.build-band-services a:hover, .build-band-services a:focus-visible { color: var(--blue-lit); }
/* The stack: each technology as its logo plus its name, in one grey, so the
   row reads as a calm logo strip rather than a jumble of brand colours. */
.build-band-stack { --gap: clamp(20px, 2vw, 28px); --dur: 80s; margin-top: 12px; }
.build-band-stack .marquee-track { animation-direction: reverse; }
.build-band-stack li { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--slate); white-space: nowrap; transition: color 200ms var(--ease); }
.tech-logo { flex: none; display: block; width: 22px; height: 22px; fill: currentColor; transition: fill 200ms var(--ease); }
.tech-logo--wordmark { height: 18px; }
/* A small dot after each technology, centred in the gap before the next. */
.build-band-stack li::after { content: ""; flex: none; width: 4px; height: 4px; margin-left: calc(var(--gap) - 9px); border-radius: 999px; background: var(--rule); }
/* On hover the logo takes its brand's own colour and the name darkens to
   ink, so even a pale brand colour (React) never makes the name hard to read. */
.build-band-stack li:hover { color: var(--ink); }
.build-band-stack li:hover .tech-logo { fill: var(--brand, currentColor); }
@media (prefers-reduced-motion: reduce) { .build-band-stack li, .tech-logo { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; row-gap: 10px; justify-content: flex-start; }
  .marquee-track[aria-hidden="true"] { display: none; }
  .build-band .marquee { padding-inline: var(--gutter); max-width: var(--container); margin: 0 auto; }
  .build-band-services .marquee-track { column-gap: 22px; }
  .build-band-services a { font-size: clamp(26px, 6vw, 40px); }
}

/* ---- Services: every service, grouped, with a live preview ------------ */
/* Option B on the design canvas: four headed groups of numbered rows, the
   name over its one-liner, and beside the list the drawing of the row
   pointed at. Services without a drawing show their icon on a tile. */
.svc-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.svc-index-intro h2 { margin: 0; }
.svc-index-lede { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2, #33425A); }
.svc-hint { display: none; }
.svc-preview { display: none; }
.svc-group + .svc-group { margin-top: 40px; }
.svc-group-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0;
  padding-bottom: 12px; border-bottom: 1px solid var(--blue);
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--blue);
}
.svc-group-h span { font-size: 13px; font-weight: 600; color: var(--slate); }
/* Phones show no visible numbers (the list itself still numbers the rows),
   so the one-liners get the width; desktop adds the number column. */
.svc-index-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit;
}
.svc-index-row .num { display: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--slate); }
.svc-index-row .nm {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink);
  transition: transform 320ms var(--ease), color 200ms var(--ease);
}
.svc-index-row .ds { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
.svc-index-row .ar {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--rule);
  display: grid; place-items: center; color: var(--blue-lit); font-size: 17px; line-height: 1;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.svc-index-row:hover .nm, .svc-index-row:focus-visible .nm { color: var(--blue-lit); transform: translateX(4px); }
.svc-index-row:hover .ar, .svc-index-row:focus-visible .ar { background: var(--green); border-color: var(--green); color: var(--white); }
@media (min-width: 901px) {
  .svc-index { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .svc-index-intro { position: sticky; top: calc(var(--header-h) + 32px); }
  .svc-hint { display: inline; }
  .svc-preview {
    display: block; position: relative; aspect-ratio: 4 / 3; margin-top: 28px; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(160deg, #EEF2FA, #E3EAF6);
  }
  .svc-preview-art { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 360ms var(--ease), transform 520ms var(--ease); }
  .svc-preview-art[data-on="true"] { opacity: 1; transform: none; }
  .svc-preview-art svg { display: block; width: 100%; height: 100%; }
  .svc-preview-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
  .svc-preview-ph .ph-tile {
    width: 112px; height: 128px; border-radius: 24px; display: grid; place-items: center;
    background: var(--blue); color: var(--white); box-shadow: 0 12px 28px rgba(11, 47, 122, 0.12);
  }
  .svc-preview-ph .ph-tile svg { width: 44px; height: 44px; stroke-width: 1.6; }
  .svc-preview-ph .ph-name { font-size: 15px; font-weight: 600; color: var(--slate); }
  .svc-index-row { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 16px; padding: 16px 0; }
  .svc-index-row .num { display: block; }
}
@media (prefers-reduced-motion: reduce) { .svc-index-row .nm, .svc-index-row .ar { transition: none; } }

/* ---- How a project runs: stage cards that stack as the page scrolls ---- */
.process-band .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.stages { --peek: 14px; display: grid; gap: 18px; }
/* Sticky cards are pushed off the screen by the bottom of their list, and
   the lowest card goes first, so the pile used to fold into one card as it
   left. A bottom margin that shrinks card by card gives every card the same
   bottom edge, so all five leave together with their steps intact, and the
   matching negative top margin on the next card keeps the gaps even. The
   site script also gives every card the tallest card's height, so a longer
   card never shows beneath a shorter one, and sets --cover as the next card
   slides over, which sinks the covered card back a little. */
.stage-card {
  position: sticky; top: calc(var(--header-h) + 20px + var(--i, 0) * var(--peek));
  margin-bottom: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--peek));
  display: grid; gap: 16px; min-height: clamp(200px, 22vw, 260px);
  background: var(--blue-tint); border: 1px solid rgba(11,47,122,0.08); border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 -12px 32px rgba(11,47,122,0.06);
  transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * 0.04));
}
.stage-card + .stage-card { margin-top: calc((var(--i, 0) - var(--n, 1)) * var(--peek)); }
.stage-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: var(--navy); opacity: calc(var(--cover, 0) * 0.05);
}
@media (prefers-reduced-motion: reduce) {
  .stage-card { transform: none; }
  .stage-card::after { content: none; }
}
.stage-top { display: flex; align-items: center; gap: 14px; }
.stage-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(37px, 3.7vw, 54px); line-height: 0.9; color: var(--blue); }
.stage-when { margin-left: auto; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--blue-lit); }
.stage-ico {
  order: -1; flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--white); color: var(--blue-lit); box-shadow: 0 6px 16px rgba(11,47,122,0.08);
}
.stage-body h3 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.02; color: var(--blue); margin: 0 0 10px; }
.stage-body p { font-size: 16px; line-height: 1.7; color: var(--slate); max-width: 580px; margin: 0; }
/* What you receive at the stage: three ticked items under the summary. */
.stage-get { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(11,47,122,0.12); }
.stage-get .lbl { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--slate); }
.stage-get ul { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.stage-get li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.stage-get svg { flex: none; color: var(--green); }
/* Every other card is brand blue, so the pile alternates light and dark. */
.stage-card--dark { background: var(--blue); border-color: var(--blue); }
.stage-card--dark .stage-n, .stage-card--dark h3, .stage-card--dark .stage-get li { color: var(--white); }
.stage-card--dark .stage-when { color: var(--on-dark-acc); }
.stage-card--dark p { color: var(--on-dark); }
.stage-card--dark .stage-ico { background: rgba(255,255,255,0.1); color: var(--white); box-shadow: none; }
.stage-card--dark .stage-get { border-top-color: rgba(199,214,242,0.2); }
.stage-card--dark .stage-get .lbl { color: var(--on-dark-dim); }
.stage-card--dark .stage-get svg { color: var(--on-dark-grn); }
@media (min-width: 901px) {
  .stage-card { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 40px; align-items: stretch; }
  .stage-top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .stage-when { margin-left: 0; }
  .stage-ico { order: 0; margin-top: auto; width: 56px; height: 56px; border-radius: 16px; }
}

/* ---- Why us: four tiles of two widths (Option A on the design canvas) -- */
.why-lede { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.55; color: var(--slate); }
.why-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 3.5vw, 52px); }
.why-tile {
  display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.6vw, 36px);
  border-radius: 28px; background: var(--blue-tint);
}
.why-tile--paper { background: var(--paper); }
.why-tile--dark { background: var(--blue); }
.why-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.why-ico {
  flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--white); color: var(--blue-lit); box-shadow: 0 6px 16px rgba(11,47,122,0.08);
}
.why-ico svg { stroke-width: 1.8; }
.why-tag {
  display: inline-flex; padding: 6px 12px; border-radius: var(--r-pill); background: var(--white);
  box-shadow: 0 0 0 1px rgba(11,47,122,0.08); font-size: 13px; font-weight: 600; color: var(--blue-lit);
}
.why-tile h3 { margin: 0; font-size: clamp(26px, 2.3vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--blue); }
.why-tile p { margin: 0; font-size: 16px; line-height: 1.6; color: #33425A; }
.why-tile--dark .why-ico { background: rgba(255,255,255,0.1); color: var(--white); box-shadow: none; }
.why-tile--dark .why-tag { background: rgba(255,255,255,0.1); color: var(--on-dark); box-shadow: none; }
.why-tile--dark h3 { color: var(--white); }
.why-tile--dark p { color: var(--on-dark); }
.why-years { margin-top: auto; display: flex; align-items: flex-end; gap: 14px; }
.why-years b { font-size: clamp(88px, 8.4vw, 120px); font-weight: 800; line-height: 0.8; letter-spacing: -0.06em; color: var(--white); }
.why-years span { padding-bottom: 6px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--on-dark-acc); }
.why-chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.why-chips li, .why-chips a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink);
}
.why-chips li:has(> a) { padding: 0; }
.why-chips svg { flex: none; color: var(--green); }
.why-chips a:hover { color: var(--blue-lit); }
@media (min-width: 901px) {
  .why-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .why-tile--wide { grid-column: span 7; }
  .why-tile--narrow { grid-column: span 5; }
}

/* ---- FAQ: heading beside the questions on wide screens ----------------
   Only where a section holds a single list; the FAQ page groups several. */
.faq-call { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.faq-call a { color: var(--blue); font-weight: 600; white-space: nowrap; border-bottom: 1.5px solid rgba(11,47,122,0.3); }
.faq-call a:hover { color: var(--blue-lit); border-color: var(--blue-lit); }
@media (min-width: 901px) {
  .faq-section:has(> .faq) {
    max-width: var(--container); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px); align-items: start;
  }
  .faq-section:has(> .faq) > .sec-head, .faq-section:has(> .faq) > .head-center { text-align: left; position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
}

/* ---- Closing band: headline beside the action and the phone number ---- */
.cta-band .wrap.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cta-copy { display: flex; flex-direction: column; gap: var(--stack); }
.cta-phone {
  display: inline-flex; flex-direction: column; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(27px, 3.02vw, 40px); line-height: 1; letter-spacing: -0.03em; color: var(--white);
  transition: color 160ms var(--ease);
}
.cta-phone span { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--on-dark-dim); }
.cta-phone:hover { color: var(--on-dark-acc); }
@media (min-width: 901px) {
  .cta-band .wrap.cta-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; column-gap: clamp(40px, 6vw, 96px); }
}
/* The closing band on every page (Option B on the design canvas): brand blue
   rather than the footer's navy, the phone number under the headline and a
   white card with what happens next. */
.cta-band--next { background-color: var(--blue); }
.cta-band--next h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 0.98; letter-spacing: -0.04em; }
.cta-band--next .cta-copy { gap: 22px; }
.cta-band--next .cta-phone { margin-top: 12px; }
.cta-card {
  padding: clamp(24px, 2.6vw, 36px); border-radius: 28px; background: var(--white); color: var(--ink);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.cta-card-lbl { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--slate); }
.cta-steps { margin: 0 0 22px; padding: 0; list-style: none; }
.cta-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.cta-steps .n {
  width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--blue-tint); font-size: 15px; font-weight: 700; color: var(--blue);
}
.cta-steps b { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--blue); }
.cta-steps b + span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.cta-card .btn-row { margin: 0; }
.cta-card-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--slate); }
@media (min-width: 901px) {
  .cta-band--next .wrap.cta-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; column-gap: clamp(40px, 6vw, 80px); }
}

/* ---- Header: a slimmer bar once the page scrolls (desktop) ------------ */
@media (min-width: 901px) {
  .nav { transition: height 240ms var(--ease); }
  .site-header[data-scrolled="true"] .nav { height: 62px; }
}

/* ---- Page to page: a short cross-fade, the header held still ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---- Scroll-linked motion, where the browser supports it -------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The hero laptop grows to full size as the page scrolls towards it. */
    .laptop { animation: dtLaptop linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes dtLaptop { from { transform: scale(0.94); } to { transform: none; } }
  }
}
@media (min-width: 901px) { .faq-section > .faq-call { grid-column: 2; } }
/* The FAQ page runs several lists in a row: offer the phone line once, at the end. */
.faq-cat:not(:last-child) .faq-call { display: none; }

/* =========================================================================
   INNER PAGES: the homepage language, shared by every template
   ========================================================================= */
/* The enquiry strip partway down a page: a navy card on the paper ground,
   the free call as the green button and the phone number beside it. */
.lead-strip-sec { padding-block: var(--section-y);}
.section + .lead-strip-sec, .lead-strip-sec + .section, .lead-strip-sec + .section + .section, .lead-strip-sec + .faq-section { padding-top: 0; }
.lead-strip {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 26px;
  padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--navy); color: var(--on-dark);
}
.lead-strip::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(143,165,214,0.16) 1.2px, transparent 1.2px); background-size: 28px 28px; pointer-events: none; }
.lead-strip > * { position: relative; }
.lead-strip-copy { min-width: 0; }
.lead-strip-tag { display: inline-flex; margin-bottom: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,0.1); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--on-dark); }
.lead-strip h2 { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 44px); color: var(--white); }
.lead-strip p { margin: 0; max-width: 580px; font-size: 16px; line-height: 1.6; color: var(--on-dark); }
.lead-strip-act { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.lead-strip-call { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-size: 15.5px; color: var(--on-dark); }
.lead-strip-call b { font-weight: 700; color: var(--white); }
.lead-strip-call:hover b { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 761px) {
  .lead-strip { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .lead-strip-act { flex: none; align-items: center; }
}


/* Every service at a glance, under the four homepage headings. */
.svc-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 2.5vw, 32px); }
.svc-jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 16px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--blue);
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.svc-jump a span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--blue-tint); font-size: 13px; color: var(--blue-lit); }
.svc-jump a:hover { border-color: var(--blue-lit); color: var(--blue-lit); }
.svc-groups { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); margin-top: clamp(28px, 3.5vw, 52px); }
.svc-cardgroup { scroll-margin-top: calc(var(--header-h) + 20px); }
.svc-cardgroup-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--blue); }
.svc-cardgroup-h h2, .svc-cardgroup-h h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.03em; color: var(--blue); }
.svc-cardgroup-h span { flex: none; font-size: 14px; font-weight: 600; color: var(--slate); }
.svc-list--svc { margin-top: 18px; }
@media (min-width: 1181px) { .svc-list--svc:has(> .svc-row:nth-child(4):last-child) > .svc-row { flex-basis: calc(25% - 14px); } }
/* The small first step on a service card. */
.svc-row .first { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; border-radius: 12px; background: var(--white); font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.svc-row .first span { color: var(--slate); }
.section .svc-row .first { background: var(--blue-tint); }

/* Long stage cards stack only on wide screens, where their copy fits. */
.stages--long .stage-card { position: relative; top: auto; margin-bottom: 0; transform: none; }
.stages--long .stage-card + .stage-card { margin-top: 0; }
.stages--long .stage-card::after { content: none; }
@media (min-width: 901px) {
  .stages--long .stage-card {
    position: sticky; top: calc(var(--header-h) + 20px + var(--i, 0) * var(--peek));
    margin-bottom: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--peek));
    transform: scale(calc(1 - var(--cover, 0) * 0.04));
  }
  .stages--long .stage-card + .stage-card { margin-top: calc((var(--i, 0) - var(--n, 1)) * var(--peek)); }
  .stages--long .stage-card::after { content: ""; }
}
.sec-head:not(.sec-head--split) + .stages { margin-top: clamp(24px, 3vw, 44px); }

/* Figures as tiles: the first brand blue, the rest light blue. */
.market-stats { gap: 14px; }
.market-stats > div { border-top: 0; padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--blue-tint); }
.market-stats > div:first-child { background: var(--blue); }
.market-stats > div:first-child .big { color: var(--white); }
.market-stats > div:first-child .label { color: var(--on-dark); }
.market-stats .label { color: #33425A; }
.numbers { gap: 14px; border: 0; }
.numbers > div { border: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: var(--blue-tint); }
.numbers > div:first-child { background: var(--blue); }
.numbers > div:first-child .big { color: var(--white); }
.numbers > div:first-child .label { color: var(--on-dark); }
@media (min-width: 601px) { .numbers { border: 0; } .numbers > div { border: 0; } .market-stats { gap: 18px; } .numbers { gap: 18px; } }

/* ---- Co-Founder Programme: term sheet key points and the application ---- */
/* The commitments founders most often miss, before the full term sheet: a
   navy card, each point ticked, with a link to its section. */
.doc-keys { position: relative; overflow: hidden; margin-bottom: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--navy); color: var(--on-dark); }
.doc-keys .t { margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--on-dark-acc); }
.doc-keys ul { display: flex; flex-direction: column; gap: 14px; }
.doc-keys li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.6; }
.doc-keys li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 11px; height: 6px; border-left: 2.4px solid var(--on-dark-grn); border-bottom: 2.4px solid var(--on-dark-grn); transform: rotate(-45deg); }
.doc-keys b { font-weight: 600; color: var(--white); }
.doc-keys a { display: inline-block; margin-left: 4px; padding-block: 8px; margin-block: -8px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--on-dark-acc); text-decoration: underline; text-underline-offset: 3px; }
.doc-keys a:hover { color: var(--white); }
.doc-clause { scroll-margin-top: calc(var(--header-h) + 20px); }
.doc-clause:target h2 { color: var(--blue-lit); }

/* The application: short titled sections, then the confirmations. */
.apply-set { min-width: 0; margin: 0; padding: 22px 0 4px; border: 0; border-top: 1px solid var(--rule); }
.apply-set:first-of-type { padding-top: 4px; border-top: 0; }
.apply-set legend { float: left; width: 100%; margin-bottom: 16px; padding: 0; font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--blue); }
.apply-set legend + * { clear: both; }
.apply-confirm { padding-bottom: 20px; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink); cursor: pointer; }
.check:last-of-type { border-bottom: 0; }
.check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--blue); }
.check a { font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
/* The long form scrolls past its notes; on wide screens they stay in view. */
@media (min-width: 901px) { .apply-side { position: sticky; top: calc(var(--header-h) + 20px); } }

/* ---- Menus: the blue card that completes a short last row ---------------- */
/* Cards sit four to a row; a group that does not fill its last row ends on a
   blue card spanning the empty columns, with related information and, when
   it is a link, a way onwards. */
.svc-card--promo .go { display: block; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 600; color: var(--white); }
a.svc-card--promo:hover, a.svc-card--promo:focus-visible { background: var(--blue-lit); border-color: var(--blue-lit); }
@media (min-width: 901px) {
  .svc-card--promo { grid-column: span var(--span, 1); }
  .svc-card--wide .nm { max-width: 560px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
}