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

   Same colours as before, a calmer paper ground, and a voice in the type:
   Instrument Serif carries every headline and every big number, Schibsted
   Grotesk does body and interface, JetBrains Mono does labels, numbers and
   captions. 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 serif italic 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 */
  --amber:       #F5A623;   /* warnings only */
  --red:         #D64545;   /* form errors only */

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

  /* Type */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-ui:      'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    var(--font-ui);
  --font-serif:   var(--font-display);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* 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 -------------------------------------------------------- */
/* The serif carries every heading. Weight 400 only; it has no bold, and it
   does not need one. The accent phrase goes italic in the lighter blue. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.08;
  color: var(--blue);
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: 0.01em; }
h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: 0.01em; }
h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: 0.01em; }
h4 { font-size: 21px; line-height: 1.25; }

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

.ac { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: inherit; color: var(--blue-lit); }
.on-navy .ac { color: var(--on-dark-acc); }
/* The old "bold first word, italic tail" pattern now reads serif / serif italic. */
.b { font-family: var(--font-display); font-style: italic; font-weight: 400; 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: mono, small caps, tracked. One style everywhere. */
.eyebrow, .kick, .kicker,
.eyebrow-pill span:last-child {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; 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: 12px; }
}

/* 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 .dot { display: none; }
.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); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--navy h2, .section--navy h3 { color: var(--white); }

/* 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); }
.band--open-top { border-top: 0; }
.band--open-bottom { border-bottom: 0; }
.band--top { background: none; border: 0; padding-top: var(--section-y); }
.band--top > .wrap { padding-block: 0; }

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

.group-gap { padding-top: calc(var(--stack) * 2); }
.row-gap { margin-top: var(--stack); }
.link-gap { margin-top: 14px; }
.chips-gap { margin-top: 14px; }
.h2-gap { margin-bottom: var(--stack); }
.cofound-pill { margin-bottom: var(--stack); }
.btn-block { width: 100%; }
@media (min-width: 601px) {
}

.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: mono label, serif 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 head that sits close to the grid beneath it. */
.sec-head--tight { margin-bottom: var(--stack); }
/* 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; } }

/* Service features: copy beside an image, one block per service. */
.sf-list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); }
.sf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.sf-copy { min-width: 0; }
.sf-lead { font-family: var(--font-ui); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--slate); margin-bottom: var(--stack); }
.sf-copy h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: 0.01em; color: var(--blue); margin: 0 0 var(--stack); }
.sf-text { font-size: 16px; line-height: 1.7; color: var(--slate); margin: 0; max-width: 560px; }
.sf-stats {
  display: flex; flex-wrap: wrap; gap: 18px 36px; margin: var(--stack) 0; padding: 20px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.sf-stats > div { min-width: 0; }
.sf-stats dt { font-family: var(--font-ui); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--ink); }
.sf-stats dd { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin: 8px 0 0; line-height: 1.5; }
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn.sf-btn { width: auto; height: 44px; font-size: 15px; padding: 0 22px; }
.btn.sf-btn::after { content: "→"; font-weight: 500; }
.sf-first { font-size: 14px; font-weight: 600; color: var(--blue-lit); }
.sf-first .k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin-right: 6px; }
.sf-media {
  display: block; position: relative; order: -1; 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%; }
.sf-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue); }
.sf-ph svg { width: 72px; height: 72px; stroke: var(--blue); stroke-width: 1.4; opacity: 0.55; }
.band .sf-media { background: linear-gradient(160deg, #F3F6FC, #E6ECF7); }
@media (min-width: 601px) {
  .sf-stats { gap: 20px 44px; padding: 24px 0; }
}
@media (min-width: 901px) {
  .sf { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); }
  .sf-media { order: 0; }
  .sf--flip .sf-media { order: -1; }
}

/* A quiet "see the service" line at the foot of a tile. */
.tile-more { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--blue-lit); margin-top: 4px; }
.tile-more span { display: inline-block; transition: transform 180ms var(--ease); }
.tile:hover .tile-more span { transform: translateX(4px); }
.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-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 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. */
/* 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: 16px;
  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); line-height: 1.65; }
.band .card, .section--cloud .card { background: var(--paper); }
/* White panels sit on off-white inside a white band, and off-white panels
   turn white inside an off-white section, so a panel never melts into the
   ground it sits on. */
.band .clause, .band .callout, .band .smap-card, .band .trust-card, .band .doc-preamble, .band .shotframe .chrome, .band .scard, .band .criteria { background: var(--paper); }
.section .xcard:not(.xcard--dark), .section .voice, .section .contact-form { background: var(--white); }
/* A FAQ list wrapped in a white band keeps its own full padding. */
.band--faq > .faq-section { padding-top: var(--section-y); }
.band--strip > .wrap { padding-block: clamp(28px, 4vw, 48px); }
/* The facts strip sits straight on the white band: no outline or hairlines. */
.band.band--strip .trust-card { border: 0; }
.band--shot > .wrap { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 7vw, 88px); }
@media (min-width: 601px) {
  .card { padding: 28px; }
}

/* Icon chip: kept for the rare place an icon still earns its spot. */
.chip {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex-shrink: 0;
}
.chip svg { stroke: var(--blue); }

/* Numbered list rows (services index pattern) */
.row-list { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 44px 1fr;
  gap: 8px 16px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.row .dsc, .row .cta { grid-column: 2; }
.row .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--slate); }
.row .ttl { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; color: var(--blue); letter-spacing: 0.01em; }
.row .dsc { color: var(--slate); font-size: 15.5px; line-height: 1.6; }
.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; }
  .row .dsc, .row .cta { grid-column: auto; }
}

/* ---- Stats ------------------------------------------------------------- */
.stat .k {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 60px); line-height: 1;
  letter-spacing: 0.01em; color: var(--blue);
}
.stat .v { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-top: 10px; line-height: 1.5; }
.section--navy .stat .k, .on-navy .stat .k { color: var(--white); }
.section--navy .stat .v, .on-navy .stat .v { color: var(--on-dark-dim); }
.stat .k .accent { color: var(--green); }
.on-navy .stat .k .accent { color: var(--on-dark-grn); }

.trustbar { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; }
.trustbar span { font-size: 14.5px; color: var(--slate); display: inline-flex; align-items: center; gap: 10px; }
.trustbar span::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--green); }

/* ---- 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: 12px; font-weight: 600; letter-spacing: 0.06em;
}
.tag--green { background: var(--green-tint); color: var(--green-dark); }

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

/* ---- Testimonials ------------------------------------------------------ */
.quote {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px; position: relative;
}
.quote .mark { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--blue-tint); margin-bottom: 8px; }
.quote blockquote { font-family: var(--font-display); font-size: 21px; line-height: 1.35; color: var(--ink); margin-bottom: 20px; }
.quote .who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.quote .where { font-size: 13.5px; color: var(--slate); margin-top: 3px; }
@media (min-width: 601px) {
  .quote { padding: 28px; }
}

/* ---- 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: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; 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: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; 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); }
/* A short radio choice: who is writing to us */
.field--choice { border: 0; padding: 0; min-width: 0; gap: 10px; }
.field--choice legend { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); padding: 0; margin-bottom: 10px; }
.field--choice label { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.field--choice label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,47,122,0.10); }
.field--choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--blue); }
.form-note { font-size: 13px; color: var(--slate); margin-top: 14px; }
/* A link that closes a description sentence, and a small row of links */
.link-inline { display: inline; margin-left: 4px; white-space: nowrap; }
.link-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: var(--stack) 0 0; }
/* Co-Founder application: titled sections and required confirmations */
.apply-set { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 20px 0 4px; min-width: 0; }
.apply-set:first-of-type { border-top: 0; padding-top: 4px; }
.apply-set legend { float: left; width: 100%; padding: 0; margin-bottom: 16px; font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--blue); }
.apply-set legend + * { clear: both; }
.apply-confirm { padding-bottom: 20px; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink); cursor: pointer; }
.check:last-child { border-bottom: 0; }
.check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); }
.check a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   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: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; 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: 901px) { .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: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; 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 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms var(--ease), background-color 160ms 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;
  /* Closed: rolled up under the header. Closing is quicker than opening. */
  opacity: 0; visibility: hidden; transform: translateY(-8px); clip-path: inset(0 0 100% 0);
  transition: opacity 220ms ease-in, transform 260ms ease-in, clip-path 260ms ease-in, visibility 0s linear 260ms;
}
.site-header[data-menu="true"] .nav-links {
  /* Open: the sheet unrolls downward from the header on an ease-out curve. */
  opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0);
  transition: opacity 240ms var(--ease), transform 460ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 460ms 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: 50px; padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); color: var(--blue); font-size: 22px; letter-spacing: 0.01em;
  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: 16px; height: 16px; 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 440ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.site-header[data-menu="true"] .nav-links > li:nth-child(1) { animation-delay: 70ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(2) { animation-delay: 115ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(3) { animation-delay: 160ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(4) { animation-delay: 205ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(5) { animation-delay: 250ms; }
.site-header[data-menu="true"] .nav-links > li:nth-child(6) { animation-delay: 295ms; }
@keyframes dtSheetRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dtMegaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega[data-open="true"] { transform: none !important; }
  .mega[data-open="true"] .mega-head, .mega[data-open="true"] .mb-links, .mega[data-open="true"] .mb-tiles, .mega[data-open="true"] .mega-body { animation: none; }
}

.nav-links .mobile-cta { display: flex; flex-direction: column; align-items: flex-start; margin-top: 18px; }
.nav-links > li.mobile-cta > .btn {
  width: 100%; justify-content: center; text-align: center;
  height: 46px; padding: 0 24px; border-bottom: 0;
  font-family: var(--font-ui); font-size: 15px; color: var(--white);
}

.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 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dtPanelIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.site-header[data-menu="true"] .mega[data-open="true"] .mega-back,
.site-header[data-menu="true"] .mega[data-open="true"] .mb-links,
.site-header[data-menu="true"] .mega[data-open="true"] .mb-tiles,
.site-header[data-menu="true"] .mega[data-open="true"] .mega-hub { animation: dtSheetRow 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.site-header[data-menu="true"] .mega[data-open="true"] .mb-links { animation-delay: 60ms; }
.site-header[data-menu="true"] .mega[data-open="true"] .mb-tiles { animation-delay: 130ms; }
.site-header[data-menu="true"] .mega[data-open="true"] .mega-hub { animation-delay: 190ms; }
.mega-inner { max-width: var(--container); margin: 0 auto; padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
.mega-head { display: none; }

.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: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
}
.mega-back:active { background: var(--blue-tint); }
.mega-back span { font-size: 16px; line-height: 1; font-family: var(--font-ui); }

.mega-body { display: block; }
.mega-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
/* 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: 48px; margin-top: 10px; padding: 10px 4px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--blue);
}

.mega-card {
  display: block; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; color: inherit;
  transition: border-color 180ms var(--ease);
}
.mega-card:hover { border-color: var(--blue-lit); }
.mega-card[aria-current="page"] { border-color: var(--blue); background: var(--blue-tint); }
.mega-card .top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.mega-card .ico { display: none; }
.mega-card .n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--slate); }
.mega-card .nm { font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--blue); letter-spacing: 0; }
.mega-card .nm .b { font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: inherit; color: var(--blue); }
.mega-card .badge {
  display: none; margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
}
.mega-card .bottom { display: flex; align-items: baseline; gap: 12px; }
.mega-card .ds { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--slate); }
.mega-card .ar { color: var(--blue); font-size: 14px; }

.mega-promo {
  margin-top: 12px;
  background: var(--navy);
  border-radius: var(--r-card); padding: 28px 24px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.mega-promo::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(143,165,214,0.14) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mega-promo .inner { position: relative; }
.mega-promo .kick { color: var(--on-dark-acc); margin-bottom: 14px; }
.mega-promo .ttl { font-family: var(--font-display); font-size: 23px; line-height: 1.08; letter-spacing: 0.01em; color: var(--white); margin-bottom: 14px; }
.mega-promo .ttl .ac { color: var(--on-dark-acc); }
.mega-promo p { font-size: 12.5px; line-height: 1.55; color: var(--on-dark); margin: 0 0 16px; }
.mega-promo .btn { display: inline-flex; width: 100%; height: 44px; font-size: 14px; padding: 0 20px; margin-bottom: 24px; box-shadow: none; }
.mega-promo .btn:hover { transform: none; box-shadow: none; }
.mega-promo .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid rgba(143,165,214,0.3); padding-top: 20px; }
.mega-promo .stats b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--white); }
.mega-promo .stats span { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--on-dark-dim); text-transform: uppercase; margin-top: 6px; }

.mega-rail { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.mega-rail .rail-label { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.mega-rail .rail-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mega-rail .rail-chips a {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: var(--blue); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 6px 13px;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.mega-rail .rail-chips a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* Bento panel (About). Phones: the page list, then the tiles two across.
   901px up: list in two columns beside a tall story tile and two small ones. */
.mbento { display: flex; flex-direction: column; gap: 14px; }
.mb-links { display: grid; grid-template-columns: 1fr; gap: 2px; }
.mb-link { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 12px; color: inherit; transition: background 150ms var(--ease); }
.mb-link:hover, .mb-link[aria-current="page"] { background: var(--paper); }
.mb-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue); transition: background 150ms var(--ease), color 150ms var(--ease); }
.mb-link:hover .mb-ico, .mb-link[aria-current="page"] .mb-ico { background: var(--blue); color: var(--white); }
.mb-txt { min-width: 0; padding-top: 1px; }
.mb-ico svg { width: 16px; height: 16px; }
.mb-nm { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.mb-ds { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.4; color: var(--slate); }
.mb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-card); color: inherit; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 160ms var(--ease); }
a.mb-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 47, 122, 0.16); }
.mb-tile > * { position: relative; }
.mb-kick { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.mb-ttl { font-family: var(--font-display); font-size: 16px; line-height: 1.12; letter-spacing: 0.01em; color: var(--blue); }
.mb-ttl .ac { color: var(--blue-lit); }
.mb-lead { grid-column: 1 / -1; }
.mb-navy { background: var(--navy); }
.mb-navy::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(143,165,214,0.16) 1px, transparent 1px); background-size: 22px 22px; }
.mb-navy .mb-kick { color: var(--on-dark-acc); }
.mb-bigrow { display: flex; align-items: baseline; gap: 10px; }
.mb-big { font-family: var(--font-display); font-size: 44px; line-height: 0.9; color: var(--white); }
.mb-unit { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-dim); }
.mb-navy .mb-ttl { font-size: 17px; color: var(--white); }
.mb-navy .mb-ttl .ac { color: var(--on-dark-acc); }
.mb-more { margin-top: 2px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--blue); }
.mb-navy .mb-more { color: var(--white); }
.mb-points { display: none; }
.mb-pt { position: relative; display: block; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--on-dark); }
.mb-pt::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--on-dark-acc); border-bottom: 2px solid var(--on-dark-acc); transform: rotate(-45deg); }
.mb-meta { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.mb-more span, .mb-arrow { display: inline-block; transition: transform 200ms var(--ease); }
a.mb-tile:hover .mb-more span, a.mb-tile:hover .mb-arrow { transform: translateX(4px); }
.mb-paper { background: var(--paper); border: 1px solid var(--line); }
a.mb-paper:hover { border-color: var(--blue-lit); }
.mb-case { background: var(--paper); border: 1px solid var(--line); }
.mb-shot { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--white); margin-bottom: 4px; }
.mb-shot img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; transition: transform 300ms var(--ease); }
a.mb-case:hover .mb-shot img { transform: scale(1.03); }
.mb-green { background: var(--green); }
.mb-green:hover { background: var(--green-dark); }
.mb-green .mb-kick { color: rgba(255, 255, 255, 0.82); }
.mb-green .mb-ttl { font-family: var(--font-ui); font-weight: 600; font-size: 14px; line-height: 1.3; letter-spacing: 0; color: var(--white); }
.mb-link:focus-visible, .mb-tile:focus-visible { outline: 2px solid var(--blue-lit); outline-offset: 2px; }

/* 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: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--slate); transition: color 160ms var(--ease);
}
.tabbar a svg { width: 25px; height: 25px; stroke-width: 1.6; }
.tabbar a.tabbar-cta svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--blue); }
.tabbar a[aria-current="page"] svg { stroke-width: 2; }
.tabbar a:active { color: var(--blue-lit); }
/* Contact is the one action in the bar, so it is the one green thing in it */
.tabbar a.tabbar-cta { margin: 6px 8px; padding: 6px 4px 5px; min-height: 0; border-radius: 14px; background: var(--green); color: var(--white); box-shadow: 0 6px 16px rgba(10,168,96,0.28); transition: background 160ms var(--ease); }
.tabbar a.tabbar-cta svg { stroke-width: 2; }
.tabbar a.tabbar-cta:active, .tabbar a.tabbar-cta[aria-current="page"] { background: var(--green-dark); color: var(--white); }
.tabbar a.tabbar-cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
body.has-tabbar { padding-bottom: calc(72px + 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; clip-path: 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(-6px);
    /* Closing is quick, so a new panel never waits behind an old one. */
    transition: opacity 160ms ease-in, transform 160ms ease-in, visibility 0s linear 160ms;
    pointer-events: none;
    max-height: calc(100vh - 90px); overflow-y: auto;
    animation: none;
  }
  /* Opening is a slower ease-out fade, then the page list and the tiles
     rise into place one after the other. */
  .mega[data-open="true"] {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .mega[data-open="true"] .mega-head,
  .mega[data-open="true"] .mb-links,
  .mega[data-open="true"] .mb-tiles,
  .mega[data-open="true"] .mega-body { animation: dtMegaIn 440ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .mega[data-open="true"] .mb-links { animation-delay: 40ms; }
  .mega[data-open="true"] .mb-tiles { animation-delay: 100ms; }
  .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; }
  .mega-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
  .mega-head .eyebrow { color: var(--slate); }
  .mega-head .link { font-size: 14px; }
  .mega-body { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
  .mega-grid { flex: 1 1 620px; min-width: 300px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
  .mega-card .badge { display: inline-block; }
  .mega-card { padding: 18px 20px; }
  .mega-card .top { margin-bottom: 8px; }
  .mega-card .nm { font-size: 16px; }
  .mega-card .ds { font-size: 13.5px; line-height: 1.55; }
  .mega-promo .ttl { font-size: 28px; }
  .mega-promo p { font-size: 13.5px; line-height: 1.65; margin-bottom: 20px; }
  .mega-rail .rail-chips a { font-size: 13px; }
  .mega-promo { margin-top: 0; flex: 1 1 300px; min-width: 280px; max-width: 380px; padding: 30px 28px; }
  .mega-rail { margin-top: 22px; flex-direction: row; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .mega-rail .rail-chips { flex: 1 1 420px; }
  .mbento { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .mb-links { grid-template-columns: 1fr 1fr; gap: 4px 12px; align-content: start; }
  .mb-links--one { grid-template-columns: 1fr; }
  .mb-link { padding: 12px; gap: 12px; }
  .mb-ico { width: 34px; height: 34px; border-radius: 10px; }
  .mb-ico svg { width: 18px; height: 18px; }
  .mb-ds { margin-top: 2px; line-height: 1.45; }
  .mb-tile { gap: 8px; }
  .mb-kick, .mb-unit, .mb-meta { font-size: 10.5px; }
  .mb-ttl { font-size: 18px; }
  .mb-more { font-size: 13.5px; }
  .mb-nm { font-size: 15px; }
  .mb-ds { font-size: 13px; }
  .mb-tiles { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 12px; }
  .mb-lead { grid-column: 1; grid-row: 1 / span 2; padding: 26px; gap: 10px; }
  .mb-case.mb-lead { padding: 14px 14px 20px; }
  .mb-case.mb-lead .mb-kick, .mb-case.mb-lead .mb-ttl, .mb-case.mb-lead .mb-meta, .mb-case.mb-lead .mb-more { padding: 0 8px; }
  .mb-big { font-size: 84px; }
  .mb-navy .mb-ttl { font-size: 23px; }
  .mb-points { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(143,165,214,0.28); }
  .mb-case .mb-ttl { font-size: 22px; }
  .mb-more { margin-top: auto; }
  .mb-tiles > .mb-tile:not(.mb-lead) { padding: 20px; }
  .mb-paper .mb-ttl { font-size: 20px; }
  .mb-green .mb-ttl { font-size: 16px; margin-top: auto; }
  .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; }
}

/* =========================================================================
   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(28px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
}
.hero-copy { min-width: 0; }
.hero .orbit { display: none; }
.hero-side { min-width: 0; }
.hero-trust { margin-top: var(--stack); padding-top: 28px; border-top: 1px solid var(--rule); }
@media (min-width: 601px) {
}
@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: same ground, a shorter measure. */
.hero--page .hero-inner {align-items: start; }
.hero--page h1 { font-size: clamp(44px, 6vw, 80px); }
.hero--page .hero-copy { flex: 1 1 100%; max-width: 900px; }
/* The older variants all resolve to the same paper hero now. */
.hero--light, .hero--light.hero--page, .hero--cofound, .hero--doc { background: var(--paper); }
.hero--light::before, .hero--cofound::before, .hero--doc::before { content: none; }
.hero--light h1 { color: var(--blue); }
.hero--light .lede { color: var(--slate); }
.hero--light .hero-inner { padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(40px, 5vw, 64px); align-items: start; }

.hero-statement {
  font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 36px); line-height: 1.1; letter-spacing: 0.01em;
  color: var(--ink); margin: 0 0 32px;
}
@media (min-width: 601px) { .hero-statement { margin-bottom: 40px; } }

.hero-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.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); 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(44px, 6vw, 80px); line-height: 0.95; letter-spacing: 0.01em; min-height: 0.95em; }
.typeline-list { font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: 0.01em; 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; } }
/* With the typed word as the star, the H1 steps down to a serif supporting line. */
/* Plain grotesk, not the serif: 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; } }

/* Hero bento: the product frame, one number, one promise. */
.hero-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hb-shot { grid-column: span 2; }
.hb-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px; min-height: 120px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.hb-tile .kick { margin: 0; }
.hb-tile--navy { background: var(--blue); border-color: var(--blue); color: var(--white); }
.hb-tile--navy .kick { color: var(--on-dark-acc); }
.hb-num { font-family: var(--font-display); font-size: clamp(52px, 6vw, 72px); line-height: 0.9; letter-spacing: 0.01em; }
.hb-note { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: 0.01em; color: var(--blue); }
@media (min-width: 601px) {
  .hero-bento { gap: 16px; }
  .hb-tile { padding: 24px; min-height: 150px; }
}

/* The framed product shot */
.shot-float { animation: none; }
.shot-frame { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-frame); overflow: hidden; }
.shot-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #FAFAF8; border-bottom: 1px solid var(--line); }
.shot-bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--rule); flex: none; }
.shot-bar .url { flex: 1; height: 18px; margin-left: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; }
.shot-body { aspect-ratio: 2 / 1; height: auto; display: grid; place-items: center; background: linear-gradient(160deg, #EEF2FA, #E3EAF6); position: relative; }
.shot-body img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot-body > svg { display: block; width: 100%; height: 100%; background: #F4F6FB; }
.shot-body .ph { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); text-align: center; padding: 0 20px; }

/* Country page banner strip */

/* =========================================================================
   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(38px, 5.6vw, 80px); line-height: 0.98; letter-spacing: 0.01em; 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; }

.site-footer { background: var(--navy); color: var(--on-dark); border-top: 1px solid rgba(199,214,242,0.14); }
.site-footer::before { content: none; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 56px var(--gutter) 20px; }
.footer-top { display: flex; flex-direction: column; gap: 36px; align-items: stretch; margin-bottom: 8px; }
.footer-brand { max-width: none; }
.footer-brand .strap { font-size: 14.5px; line-height: 1.6; font-weight: 500; color: var(--white); margin: 0 0 6px; max-width: 32ch; }
.footer-brand .strap-sub { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--on-dark-acc); margin: 0 0 18px; }
/* Footer link groups. Phones: one column of accordions (site.js adds
   data-acc-ready; without it every list stays open). 601px up: columns. */
.footer-cols { display: flex; flex-direction: column; border-top: 1px solid rgba(199,214,242,0.16); }
.footer-col { border-bottom: 1px solid rgba(199,214,242,0.16); }
.footer-col h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark); margin: 0; line-height: 1.4; }
.footer-acc { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.footer-acc:focus-visible { outline: 2px solid var(--on-dark-acc); outline-offset: 2px; border-radius: 4px; }
.footer-acc-ic { display: none; flex: none; color: var(--on-dark-dim); transition: transform 200ms var(--ease); }
[data-acc-ready] .footer-acc-ic { display: block; }
.footer-col.is-open .footer-acc-ic { transform: rotate(180deg); }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; padding: 2px 0 20px; }
[data-acc-ready] .footer-col:not(.is-open) ul { display: none; }
.footer-legal { display: none; }
.footer-col a { display: inline-block; min-height: 24px; font-size: 14px; color: var(--on-dark); line-height: 1.4; transition: color 160ms var(--ease); }
.footer-col a:hover { color: var(--white); }
.footer-legal { justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 26px; }
.footer-legal a { font-size: 13px; color: var(--on-dark-dim); transition: color 160ms var(--ease); }
.footer-legal a:hover { color: var(--white); }
.footer-bar { padding-top: 22px; display: flex; justify-content: center; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--on-dark-dim); }
@media (min-width: 601px) {
  .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; border-top: 0; }
  .footer-col { border-bottom: 0; }
  .footer-col h2 { font-size: 10.5px; color: var(--on-dark-dim); margin-bottom: 16px; }
  .footer-acc { min-height: 0; padding: 0; cursor: default; pointer-events: none; }
  .footer-col ul { padding: 0; }
  .footer-col--legal { display: none; }
  .footer-legal { display: flex; }
  .footer-top { margin-bottom: 40px; }
  .footer-bar { border-top: 1px solid rgba(199,214,242,0.16); }
}
@media (min-width: 901px) {
  .footer-inner { padding: 80px var(--gutter) 24px; }
  .footer-top { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); margin-bottom: 56px; }
  .footer-brand { flex: 1 1 250px; min-width: 220px; max-width: 320px; }
  .footer-cols { flex: 1 1 640px; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
}

/* =========================================================================
   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; }
  .nav-links { clip-path: none !important; }
  .site-header[data-menu="true"] .mega[data-open="true"] :is(.mega-back, .mb-links, .mb-tiles, .mega-hub) { 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
   ========================================================================= */

/* Trust bar: a white card under the hero, numbers in serif */
.trust-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(24px, 3.5vw, 40px) clamp(20px, 3vw, 40px);
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin-top: 8px; position: relative; z-index: 2;
}
.trust-card > div { text-align: left; }
.trust-card > div + div { border-top: 1px solid var(--rule); padding-top: 20px; }
.trust-card .n { font-family: var(--font-display); font-size: clamp(44px, 4.4vw, 64px); line-height: 0.95; color: var(--blue); letter-spacing: 0.01em; }
.trust-card .n--sm { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; padding-top: clamp(6px, 1vw, 16px); }
.trust-card .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-top: 12px; line-height: 1.5; }
@media (min-width: 601px) {
  .trust-card { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .trust-card > div + div { border-top: 0; padding-top: 0; }
  .trust-card > div:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 24px; }
  .trust-card > div:nth-child(n + 3) { border-top: 1px solid var(--rule); padding-top: 24px; }
}
@media (min-width: 901px) {
  .trust-card, .band .trust-card { grid-template-columns: repeat(4, 1fr); gap: 0; padding-inline: 0; background: none; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; }
  .trust-card > div { padding: 28px 24px; }
  .trust-card > div:first-child { padding-left: 0; }
  .trust-card > div:last-child { padding-right: 0; }
  .trust-card > div:nth-child(n + 3) { border-top: 0; }
  .trust-card > div + div { border-left: 1px solid var(--rule); }
  /* Same top and bottom spacing for all four cells; the tablet rules above
     otherwise leave the second cell flush to the top. */
  .trust-card > div:nth-child(n) { padding-top: 28px; padding-bottom: 28px; }
  .trust-card .n--sm { box-sizing: border-box; min-height: calc(clamp(44px, 4.4vw, 64px) * 0.95); }
}

/* 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; }
.head-center .rule { display: none; }

/* Group pill */
.group-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: var(--stack); }
.group-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background: var(--blue); border-radius: var(--r-pill); padding: 8px 16px; }
.group-row p { font-size: 17px; color: var(--ink); margin: 0; }
@media (min-width: 761px) { .group-row { flex-direction: row; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: var(--stack); } }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  grid-column: span 2;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px; color: inherit;
  transition: border-color 180ms var(--ease);
}
.tile:hover { border-color: var(--blue-lit); }
.tile .kick { margin: 0; }
/* The service's own line icon, on a tint chip, in place of a text label. */
.tile-ico {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  background: var(--blue-tint); color: var(--blue);
  display: grid; place-items: center;
}
.tile-ico svg { stroke: var(--blue); }
.tile:hover .tile-ico { background: var(--blue); color: var(--white); }
.tile:hover .tile-ico svg { stroke: var(--white); }
.tile-body { display: flex; flex-direction: column; gap: 10px; }
.tile-title { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: 0.01em; color: var(--blue); }
.tile-text { font-size: 16px; line-height: 1.6; color: var(--slate); }
.tile-num { font-family: var(--font-display); font-size: clamp(36px, 3.6vw, 48px); line-height: 0.95; letter-spacing: 0.01em; color: var(--white); }
.tile--navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tile--navy .kick { color: var(--on-dark-acc); }
.tile--navy .tile-text { color: var(--on-dark); font-size: 13.5px; }
.tile--navy:hover { border-color: var(--blue-lit); }
@media (min-width: 761px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 28px; gap: 16px; }
  .tile--2 { grid-column: span 2; }
  .tile--3 { grid-column: span 3; }
  .tile--1 { grid-column: span 1; }
  .tile--1 .tile-num { font-size: clamp(30px, 3vw, 44px); }
}
@media (min-width: 601px) and (max-width: 760px) {
  .tile--1, .tile--2 { grid-column: span 1; }
}

/* Service rows: hairline rows, serif names, mono numbers, no icon chip */
.svc-list { border-top: 1px solid var(--rule); }
.svc-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 14px; padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
}
.svc-row .num { flex: 0 0 36px; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; color: var(--slate); }
.svc-row .id { flex: 1 1 200px; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.svc-row .ico { display: none; }
.svc-row .nm { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue); }
.svc-row .nm .b { font-size: inherit; }
.svc-row .ds { flex: 1 1 100%; font-size: 15px; line-height: 1.65; color: var(--slate); }
.svc-row .ar { display: none; flex: 0 0 auto; color: var(--blue); font-size: 18px; align-self: center; transition: transform 180ms var(--ease); }
a.svc-row:hover .nm { color: var(--blue-lit); }
a.svc-row:hover .ar { transform: translateX(4px); }
.svc-row--plain .nm { flex: 1 1 200px; min-width: 0; }
@media (min-width: 901px) {
  .svc-row { gap: clamp(16px, 2.5vw, 40px); padding: 28px 0; }
  .svc-row .id { flex: 0 1 320px; min-width: 240px; }
  .svc-row .ds { flex: 1 1 340px; font-size: 15.5px; }
  .svc-row .ar { display: block; }
  .svc-row--plain .nm { flex: 0 1 360px; min-width: 240px; }
}

/* 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 .orbit { display: none; }
.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: 14px; }
.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-size: clamp(32px, 3.4vw, 42px); line-height: 0.95; color: var(--white); letter-spacing: 0.01em; }
.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: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; 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; }
}

/* Why us: numeral columns */
.why-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 44px); }
.why-col { display: flex; flex-direction: column; }
.why-col .rule { height: 1px; background: var(--blue); margin-bottom: 22px; }
.why-col .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.why-col .numeral { font-family: var(--font-display); font-style: italic; font-size: clamp(56px, 5vw, 76px); line-height: 0.9; color: var(--blue); }
.why-col .reason { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); padding-top: 8px; }
.why-col .reason.is-stage { text-transform: uppercase; }
.why-col .ttl { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 28px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue); margin-bottom: 12px; }
.why-col .ttl .b { font-size: inherit; }
.why-col .body { font-size: 16px; line-height: 1.7; color: var(--slate); flex: 1; }
.why-col .foot { border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; }
.why-col .foot .tag { background: none; padding: 0; color: var(--slate); text-transform: uppercase; font-size: inherit; letter-spacing: inherit; }
.why-col .foot .idx { color: var(--blue); }
.why-col .receive { font-size: 13.5px; line-height: 1.6; color: var(--slate); margin-top: 12px; }
.why-col .receive span { font-weight: 600; color: var(--ink); }
@media (min-width: 601px) {
  .why-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .why-col .rule { margin-bottom: 26px; }
  .why-col .top { margin-bottom: 22px; }
}

/* Featured work label, used by the homepage outcomes rows. */
.work-eyebrow { margin-bottom: 14px; }

/* =========================================================================
   CO-FOUNDER PROGRAM PAGE
   ========================================================================= */
.para-split { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 72px); }
.para-split > .l, .para-split > .r { min-width: 0; }
.para-split .l h2 { font-size: clamp(30px, 3.6vw, 48px); margin: 0; }
.para-split .lead-quote {
      border-left: 1px solid var(--blue);
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--ink);
    margin: 0 0 18px;
}
.para-split .note { 
      border-left: 1px solid var(--blue);
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
    padding-left: 24px;
    margin: 0;
}
/* The homepage "who we work with" copy is two plain body paragraphs that
   share one left rule, so they line up as a single block. */
.who-band .para-split > .r { border-left: 1px solid var(--blue); padding-left: 20px; }
.who-band .para-split .lead-quote, .who-band .para-split .note {
  font-family: var(--font-ui); font-weight: 400;
  font-size: 16px; line-height: 1.7; letter-spacing: 0;
  color: var(--ink); border: 0; padding: 0 !important; margin: 0 0 18px;
}
.who-band .para-split .note { margin-bottom: 0; }
@media (min-width: 761px) {
  .who-band .para-split > .r { padding-left: 24px; }
}
.para-split .note b { font-weight: 600; color: var(--ink); }
@media (min-width: 761px) {
  .para-split { flex-direction: row; flex-wrap: wrap; }
  .para-split > .l { flex: 1 1 300px; min-width: 240px; }
  .para-split > .r { flex: 1.3 1 460px; min-width: 280px; }
  .para-split .lead-quote { padding-left: 24px; }
  .para-split .lead-quote + .link {
    margin-left: 24px;
}
}
@media(max-width:760px){
  .para-split .lead-quote {
    padding-left: 15px;
}
.para-split .lead-quote + .link {
    margin-left: 15px;
}
}

.cadence { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 64px); }
.cadence .big { flex: 0 0 auto; display: flex; align-items: baseline; gap: 16px; }
.cadence .big b { font-family: var(--font-display); font-weight: 400; font-size: clamp(96px, 12vw, 180px); line-height: 0.85; color: var(--blue); letter-spacing: 0.01em; }
.cadence .big span { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--slate); text-transform: uppercase; line-height: 1.7; }
.cadence .cols { min-width: 0; }
.cycles { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cycle { border-top: 1px solid var(--rule); padding-top: 14px; }
.cycle.is-now { border-top-color: var(--blue); }
.cycle .num { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 2.6vw, 40px); color: var(--blue); line-height: 1; }
.cycle .lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--slate); text-transform: uppercase; margin-top: 10px; }
.cycle.is-now .lbl { color: var(--blue-lit); }
.cycle .mo { font-size: 13px; color: var(--slate); margin-top: 4px; }
.cadence .foot { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.cadence .foot i { width: 34px; height: 1px; background: var(--blue); flex: none; }
.cadence .foot span { font-size: 14px; color: var(--slate); }
@media (min-width: 601px) { .cycles { grid-template-columns: repeat(3, 1fr); gap: 10px; } .cycle { padding-top: 16px; } }
@media (min-width: 901px) { .cadence { flex-direction: row; flex-wrap: wrap; align-items: center; } .cadence .cols { flex: 1 1 480px; min-width: 300px; } }

.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-style: italic; font-size: 28px; 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-size: 22px; line-height: 1.15; letter-spacing: 0.01em; color: var(--blue); margin-bottom: 6px; }
.xcard--dark .xrow .t { color: var(--white); }
.xrow .d { 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; } }
/* ---- Market landing pages (tpl-landing.php) ----------------------------- */
/* The two paths: a project for your business, a partner team for your agency */
.xcard { display: flex; flex-direction: column; }
.xcard-h { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: var(--blue); margin: 0 0 10px; }
.xcard--dark .xcard-h { color: var(--white); }
.xcard--dark .xcard-h .ac { color: var(--on-dark-acc); }
.xcard-p { font-size: 15.5px; line-height: 1.65; color: var(--slate); margin: 0 0 10px; }
.xcard--dark .xcard-p { color: var(--on-dark); }
.xcard-btn { margin-top: auto; align-self: flex-start; }
.xcard .xrow:last-of-type { margin-bottom: 24px; }
.ways-note { margin: var(--stack) 0 0; font-size: 15px; line-height: 1.65; color: var(--slate); max-width: 780px; }
.ways-note .link { margin-left: 4px; }
/* Four cards read as two pairs, never three and an orphan */
@media (min-width: 761px) { .grid--pairs { grid-template-columns: repeat(2, 1fr); } }
/* Why us, on navy */
.why-head { max-width: 780px; margin-bottom: var(--stack); }
.why-head .eyebrow { display: block; margin-bottom: var(--stack); }
.why-head h2 { margin: 0; }
.promise-t { font-family: var(--font-display); font-size: 22px; line-height: 1.15; letter-spacing: 0.01em; color: var(--white); margin-bottom: 8px; }
/* Process rows: the deliverable reads in ink */
.svc-row .ds strong.ink { color: var(--ink); font-weight: 600; }
/* Review captions: the client's town under their name */
.voice .wh-where { display: block; letter-spacing: 0.08em; opacity: 0.8; }

.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-size: clamp(40px, 6.4vw, 62px); line-height: 0.95; letter-spacing: 0.01em; 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-style: italic; font-size: clamp(40px, 4vw, 56px); line-height: 0.9; color: var(--blue); }
.tstep .when { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--blue-lit); text-transform: uppercase; margin: 0; text-align: left; }
.tstep h3 { font-size: 24px; color: var(--blue); margin-bottom: 10px; }
.tstep h3 .b { font-size: inherit; }
.tstep p { 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: 12px; letter-spacing: 0.12em; color: var(--slate); }
.criterion .t { flex: 1 1 200px; font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--blue); letter-spacing: 0.01em; }
.criterion .t .b { font-size: inherit; }
.criterion .d { flex: 1 1 100%; 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-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: var(--ink); margin-top: clamp(24px, 3vw, 40px); }

.clauses { display: grid; grid-template-columns: 1fr; gap: 16px; }
.clause { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; color: inherit; transition: border-color 200ms var(--ease); }
a.clause:hover { border-color: var(--blue-lit); }
.clause .kick { margin-bottom: 14px; }
.clause .lead { font-family: var(--font-display); font-size: clamp(34px, 3.2vw, 33px); line-height: 0.95; letter-spacing: 0.01em; color: var(--blue); margin-bottom: 12px; }
.clause .body {line-height: 1.65; color: var(--slate); }
.clause .more { margin-top: 16px; color: var(--blue); font-weight: 600; font-size: 14px; }
.clause .more::after { content: " →"; }
@media (min-width: 601px) { .clauses { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .clause { padding: 30px 28px; } }

.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: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.doc-preamble p { font-size: 14.5px; line-height: 1.7; color: var(--slate); margin: 0; }
/* Key points panel above the term sheet preamble */
.doc-keys { background: var(--navy); color: var(--on-dark); border-radius: var(--r-card); padding: clamp(20px, 2.6vw, 32px); margin-bottom: 16px; }
.doc-keys .t { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-acc); margin-bottom: 14px; }
.doc-keys ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.doc-keys li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.6; }
.doc-keys li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--on-dark-acc); border-bottom: 2px solid var(--on-dark-acc); transform: rotate(-45deg); }
.doc-keys b { color: var(--white); font-weight: 600; }
.doc-keys a { color: var(--on-dark-acc); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; margin-left: 4px; }
.doc-clause { scroll-margin-top: calc(var(--header-h) + 16px); }
.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: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 32px); padding-top: clamp(24px, 3vw, 36px); font-size: 14px; line-height: 1.7; color: var(--slate); }

/* =========================================================================
   SERVICE PAGES
   ========================================================================= */
.deliverables { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; transition: border-color 180ms var(--ease); display: flex; flex-direction: column; }
a.dcard:hover { border-color: var(--blue-lit); }
.dcard .chip { display: none; }
.dcard .n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--slate); margin-bottom: 14px; }
.dcard .t { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 28px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue); margin-bottom: 10px; }
.dcard .t .b { font-size: inherit; }
.dcard .d { font-size: 15px; line-height: 1.7; color: var(--slate); flex: 1; }
.dcard .link { align-self: flex-start; }
@media (min-width: 601px) { .deliverables { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .dcard { padding: 28px; } }

.callout { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.callout .ico { display: none; }
.callout .body { min-width: 0; }
.callout h3 { font-size: clamp(24px, 2.4vw, 30px); color: var(--blue); margin-bottom: 10px; }
.callout p { font-size: 15.5px; line-height: 1.7; color: var(--slate); }
@media (min-width: 761px) { .callout { flex-direction: row; flex-wrap: wrap; align-items: center; gap: clamp(24px, 3vw, 44px); } .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: 400; font-size: clamp(80px, 9vw, 140px); line-height: 0.85; color: var(--blue); letter-spacing: 0.01em; }
.story .year span { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--slate); text-transform: uppercase; 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-size: clamp(30px, 4vw, 56px); letter-spacing: 0.01em; 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-size: clamp(40px, 4vw, 60px); line-height: 0.95; color: var(--blue); letter-spacing: 0.01em; }
.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); }
.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: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; 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 { 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; }
.side-card .tel-big { display: inline-block; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); color: var(--blue); letter-spacing: 0.01em; }
.side-card .tel-big:hover { color: var(--blue-lit); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips a { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--blue); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.chips a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
@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(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 24px; color: inherit; transition: border-color 200ms var(--ease); }
a.post:hover { border-color: var(--blue-lit); }
.post .top { display: flex; justify-content: flex-end; align-items: baseline; }
.post .n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--slate); }
.post .ar { color: var(--blue); font-size: 18px; }
.post .t { font-family: var(--font-display); font-size: clamp(22px, 2vw, 26px); letter-spacing: 0.01em; color: var(--blue); line-height: 1.15; flex: 1; }
@media (min-width: 601px) { .posts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .post { padding: 30px 28px; } }

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: var(--r-card); padding: 32px 24px 24px; }
.voice .mark { position: absolute; top: 10px; right: 22px; user-select: none; font-family: var(--font-display); font-size: 84px; line-height: 1; color: var(--blue-tint); }
.voice blockquote { position: relative; margin: 0 0 18px; font-family: var(--font-display); font-size: 21px; line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); }
.voice figcaption { display: flex; align-items: center; gap: 12px; }
.voice .av { display: none; }
.voice .wh { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; 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: var(--r-card); padding: 26px 24px; }
.scard .n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--slate); margin-bottom: 12px; }
.scard .t { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 28px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue); margin-bottom: 10px; }
.scard p { font-size: 14.5px; line-height: 1.7; color: var(--slate); margin: 0; }
.legacy { background: var(--blue-tint); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 40px); }
.legacy .t { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); letter-spacing: 0.01em; 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-size: clamp(44px, 4.4vw, 64px); line-height: 0.95; color: var(--blue); letter-spacing: 0.01em; }
.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-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; letter-spacing: 0.01em; 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 { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 56px); }
.formslot { min-width: 0; min-height: 400px; 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; text-align: center; }
.formslot .tag-mono { background: var(--white); }
.formslot:has(form), .formslot:has(iframe) { background: var(--white); padding: clamp(20px, 3vw, 36px); display: block; text-align: left; }
.formslot iframe { width: 100%; border: 0; min-height: 520px; display: block; }
.enquiry-notes { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.enquiry-notes .card { background: var(--paper); }
.enquiry-notes .card p { margin-bottom: 0; }
.enquiry-notes .card .link { margin-top: 14px; }
@media (min-width: 761px) { .formslot { min-height: 520px; } }
@media (min-width: 901px) { .enquiry { flex-direction: row; flex-wrap: wrap; align-items: stretch; } .formslot { flex: 1.4 1 480px; min-width: 300px; } .enquiry-notes { flex: 1 1 300px; min-width: 280px; } }

/* =========================================================================
   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-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; 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; }

.pending { background: #FFF4E0; padding: 2px 8px; border-radius: 4px; color: #8A5A00; font-family: var(--font-ui); font-size: 0.9em; }

/* =========================================================================
   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: 10.5px; font-weight: 400; letter-spacing: 0.02em; color: #8E9AB2; 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-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue); margin-bottom: 10px; }
.nextcase .t .b { font-size: inherit; }
.nextcase .m { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.workitem { display: grid; grid-template-columns: 1fr; gap: 24px; }
@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: 0; 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    { min-height: clamp(220px, 26vw, 420px); 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: 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 .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-size: 10.5px; 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--portal .addr { color: #C7D6F2; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.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--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: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.mockcard .dev--app .screen .ph { aspect-ratio: 9 / 17; }
/* Banner tile: a finished project composite on the same grey stage as the
   other tiles, inset like a screen but with no device chrome */
.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.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); }
}

/* Hub hero: the same paper ground as every service page, title close to the header. */
.hero--hub .hero-inner { padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(28px, 4vw, 48px); }
/* The hub hero carries one quiet call to action, not a full-size hero button. */
.hero--hub .btn { width: auto; height: 44px; font-size: 15px; padding: 0 22px; }
.hero--hub .btn-row { align-items: flex-start; }

/* 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; }
@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; }
}
/* The hub header always closes on a hairline, whatever section follows it. */
.hero--hub { border-bottom: 1px solid var(--line); }
.hero--hub + .band { border-top: 0; }

/* 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: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; 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-size: 13px; 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. 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: 15px; line-height: 1.3; letter-spacing: 0; color: var(--ink); margin: 0 0 4px; }
.cc-text p { font-size: 13px; line-height: 1.55; 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: 38px; padding: 0 14px; 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: 14px; 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: 4px 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: 13.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-title { font-size: 16px; margin-bottom: 6px; }
  .cc-text p { font-size: 14px; line-height: 1.6; }
  .cc-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  .cc-btn { flex: 0 0 auto; height: 44px; padding: 0 20px; font-size: 15px; }
  .cc-link { flex: 0 0 auto; padding: 0 4px; font-size: 14.5px; }
}

.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: 18px 16px 14px; }
.cc-form h2 { font-size: 22px; color: var(--blue); margin: 0 40px 6px 0; }
.cc-intro { font-size: 13px; line-height: 1.5; color: var(--slate); margin: 0 0 6px; }
.cc-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; 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: 11px 0; }
.cc-cat p { font-size: 12.5px; line-height: 1.5; color: var(--slate); margin: 3px 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: 14.5px; color: var(--ink); }
.cc-always { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.cc-switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; margin: 0;
  width: 40px; height: 24px; 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: 18px; height: 18px; 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(16px); }
.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: 8px; border-top: 1px solid var(--rule); padding-top: 12px; }
.cc-dialog-actions .cc-btn { flex: 1 1 92px; padding: 0 6px; font-size: 13px; }
.cc-foot { font-size: 12px; color: var(--slate); margin: 10px 0 0; text-align: center; }
/* Phones get the compact dialog above; 601px up restores the roomy one. */
@media (min-width: 601px) {
  .cc-form { padding: 28px 28px 24px; }
  .cc-form h2 { font-size: clamp(26px, 3vw, 32px); margin-bottom: 8px; }
  .cc-intro { font-size: 14.5px; line-height: 1.6; margin-bottom: 8px; }
  .cc-close { top: 14px; right: 14px; width: 36px; height: 36px; }
  .cc-cat { padding: 16px 0; }
  .cc-cat p { font-size: 14px; line-height: 1.6; margin-top: 6px; }
  .cc-cat-name { font-size: 16px; }
  .cc-switch { width: 46px; height: 28px; }
  .cc-switch::before { width: 22px; height: 22px; }
  .cc-switch:checked::before { transform: translateX(18px); }
  .cc-dialog-actions { flex-wrap: wrap; gap: 10px; padding-top: 16px; }
  .cc-dialog-actions .cc-btn { flex: 1 1 140px; padding: 0 20px; font-size: 15px; height: 44px; }
  .cc-foot { font-size: 13px; margin-top: 14px; }
}
@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: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  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-size: clamp(32px, 3.4vw, 42px); line-height: 1.05; letter-spacing: 0.01em; color: var(--blue); }
.intake-sub {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: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; 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: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; 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-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: 0.01em; color: var(--blue); }
.icycle-note { 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: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; 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; } }

/* Homepage outcomes: three short tags name what we built. */
.work-built { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--stack) 0 0; padding: 0; list-style: none; }
.work-built li { font-size: 13px; font-weight: 600; color: var(--blue); background: var(--blue-tint); border-radius: var(--r-pill); padding: 6px 12px; line-height: 1.3; }

/* Homepage outcomes: one case per row. Screenshot and copy side by side on
   desktop, alternating sides row to row; stacked on phones. */
.outcomes { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.outcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.outcome-media {
  display: block; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-frame);
}
.outcome-media img { display: block; width: 100%; height: auto; transition: transform 500ms var(--ease); }
.outcome-media:hover img { transform: scale(1.02); }
.outcome-copy { min-width: 0; }
.outcome-copy h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; color: var(--blue); margin: 0 0 var(--stack); }
.outcome-copy h3 .b { font-size: inherit; }
.outcome-copy p { color: var(--slate); font-size: 16px; line-height: 1.7; margin: 0; max-width: 520px; }
@media (min-width: 901px) {
  .outcome { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); }
  .outcome--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .outcome--flip .outcome-media { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .outcome-media img { transition: none; } .outcome-media:hover img { transform: none; } }

/* =========================================================================
   HTML SITEMAP: the same look as the browser view of sitemap.xml. White
   cards, hairline rows, page name left and path right.
   ========================================================================= */
.smap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.smap-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.smap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }
.smap-head .kick { margin-bottom: 6px; }
.smap-head h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; color: var(--blue); margin: 0; }
.smap-count { flex: none; font-size: 12.5px; color: var(--slate); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px; }
.smap-list { list-style: none; margin: 0; padding: 0; }
.smap-list li + li .smap-row { border-top: 1px solid var(--line); }
/* Phones: the path sits under the name. Wider screens: side by side. */
.smap-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; color: inherit; transition: background 160ms var(--ease); }
.smap-row:hover { background: var(--paper); }
.smap-name { font-weight: 600; font-size: 15px; color: var(--blue); min-width: 0; }
.smap-row:hover .smap-name { color: var(--blue-lit); }
.smap-path { flex: none; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--slate); overflow-wrap: anywhere; }
@media (min-width: 601px) {
  .smap-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
  .smap-path { overflow-wrap: normal; }
}
.smap-list li.is-sub .smap-row { padding-left: 40px; }
.smap-list li.is-sub .smap-name { font-weight: 500; }
.smap-list li.is-sub .smap-name::before { content: "\2514\00a0"; color: var(--rule); font-weight: 400; }
.smap-what { display: block; font-weight: 400; font-size: 13.5px; color: var(--slate); margin-top: 2px; }
.smap-row--file .smap-name { font-family: var(--font-mono); font-size: 13.5px; }
.smap-row--file .smap-path { font-family: var(--font-ui); font-weight: 600; font-size: 13px; color: var(--blue-lit); }
@media (min-width: 761px) {
  .smap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .smap-card--wide { grid-column: 1 / -1; }
  /* The long country list runs in two columns inside its wide card. */
  .smap-card--wide .smap-list { columns: 2; column-gap: 0; }
  .smap-card--wide .smap-list li { break-inside: avoid; }
  .smap-card--wide .smap-list li + li .smap-row { border-top: 0; }
  .smap-card--wide .smap-row { border-bottom: 1px solid var(--line); }
  .smap-head { padding: 24px 24px 16px; }
  .smap-row { padding: 12px 24px; }
  .smap-list li.is-sub .smap-row { padding-left: 44px; }
}