/* Layout: three composition types. An expansive photographic opening; product compositions where the product takes two-thirds; institutional explanations as a connected diagram, a result or a few concrete facts. 12-column grid, 1,280 px content width. */
:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --page: #FAF8F4;
  --mist: #F2EFE8;
  --stone: #ACA592;
  --rule: #C5C5C5;
  --rule-soft: #E6E3DC;
  --ink: #211D14;
  --ink-2: #58564F;
  --lime: #CBFF81;
  --lime-hover: #B9F25F;
  --lime-line: #A6DE57;
  --on-dark: #FFFFFF;
  --on-dark-2: #C8C3B6;
  --dark-rule: #4A4537;
  --slot: #F0EEE9;
  --ground: #E9E6DB;
  --slot-line: #B4AE9F;
  --focus: #211D14;

  --font: "Söhne", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.6rem, 0.85rem + 5.6vw, 6rem);
  --fs-h1-inner: clamp(2.25rem, 1.35rem + 3.3vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.15vw, 3.375rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.625rem);
  --fs-intro: clamp(1.125rem, 1.06rem + 0.26vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.875rem;

  --gutter: clamp(20px, 5.2vw, 80px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --max: 1280px;
  --sp-chapter: clamp(72px, min(11vw, 17svh), 176px);
  --sp-head: clamp(32px, 3.6vw, 52px);
  --r-band: clamp(20px, 3.4vw, 48px);
  --r-media: 14px;
  --r-control: 10px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@font-face { font-family: "Söhne"; font-weight: 300; font-style: normal; font-display: swap; src: url(/assets/fonts/sohne-leicht.woff2) format("woff2"); }
@font-face { font-family: "Söhne"; font-weight: 400; font-style: normal; font-display: swap; src: url(/assets/fonts/sohne-buch.woff2) format("woff2"); }
@font-face { font-family: "Söhne"; font-weight: 500; font-style: normal; font-display: swap; src: url(/assets/fonts/sohne-kraeftig.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--page); color: var(--ink); padding: 12px 16px; border-radius: 8px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.grid > * { min-width: 0; }

/* ---------- Type ---------- */
.eyebrow { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.h1-inner { font-size: var(--fs-h1-inner); line-height: 1.04; letter-spacing: -0.026em; font-weight: 400; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; font-weight: 400; }
.h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.01em; }
.intro { font-size: var(--fs-intro); line-height: 1.5; max-width: 34em; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-2); }

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-control); border: 1px solid var(--ink);
  font-family: var(--font); font-size: 1rem; font-weight: 500; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn-primary { background: var(--lime); color: var(--ink); }
.btn-primary:hover { background: var(--lime-hover); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(33, 29, 20, 0.06); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--lime-line);
  transition: text-decoration-color 180ms var(--ease);
}
.link-arrow:hover { text-decoration-color: currentColor; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.text-link, .prose a, .form-legal a, .legal-body a:not(.link-arrow), .contact-line a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime-line);
}
.text-link:hover, .prose a:hover, .form-legal a:hover, .legal-body a:not(.link-arrow):hover { text-decoration-color: currentColor; }
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform 180ms var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow .ext { width: 13px; height: 13px; }
.link-arrow:hover .ext { transform: translate(2px, -2px); }

/* ---------- Header: quiet, white over the photograph, solid over light sections ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--page); color: var(--ink); border-bottom: 1px solid var(--rule-soft);
  transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}
.site-header .bar { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; margin-right: auto; padding-block: 8px; }
.brand svg { height: 26px; width: auto; display: block; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 16px;
  border: 1px solid currentColor; border-radius: var(--r-control); background: transparent; color: inherit;
  font-size: 0.9375rem; font-weight: 500; cursor: pointer;
}
.menu-btn .bars { width: 16px; height: 10px; position: relative; display: block; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 220ms var(--ease), top 220ms var(--ease); }
.menu-btn .bars::before { top: 1px; }
.menu-btn .bars::after { top: 7.5px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4.25px; transform: rotate(-45deg); }
.site-header.on-photo { background: transparent; color: var(--on-dark); border-bottom-color: transparent; --focus: #FFFFFF; }
.site-header.on-photo .btn-primary { border-color: var(--lime); }
.site-header.on-photo.is-scrolled { background: rgba(23, 20, 14, 0.86); border-bottom-color: rgba(255, 255, 255, 0.08); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.on-photo.is-scrolled { background: rgba(23, 20, 14, 0.58); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--page); color: var(--ink); border-bottom: 1px solid var(--rule-soft); box-shadow: 0 24px 48px -32px rgba(33, 29, 20, 0.28); --focus: var(--ink); }
.menu-panel:not([hidden]) { animation: menuIn 220ms var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-panel .wrap { padding-block: 28px 40px; }
.menu-groups { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.menu-groups .mg { grid-column: span 3; }
.menu-groups .mg-k { font-size: var(--fs-small); color: var(--ink-2); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--rule-soft); }
.menu-groups ul { list-style: none; margin: 0; padding: 0; }
.menu-panel .m-link { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.008em; color: var(--ink); text-decoration: none; }
.menu-panel .m-link:hover { color: var(--ink-2); }
.menu-panel .m-link[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--lime-hover); }
.menu-panel .m-link svg { width: 12px; height: 12px; color: var(--ink-2); }
.menu-cta { display: none; margin-top: 24px; }
@media (max-width: 960px) { .menu-groups .mg { grid-column: span 4; } }
@media (max-width: 640px) {
  .menu-groups { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .menu-groups .mg { grid-column: 1 / -1; }
  .menu-panel .m-link { font-size: 1.1875rem; min-height: 44px; }
  .menu-panel .m-link[aria-current="page"]::before { left: -12px; }
  .menu-panel { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow-y: auto; box-shadow: none; }
}
/* Small phones keep Talk to us in the header; the menu button becomes an icon with its name kept for screen readers */
@media (max-width: 420px) {
  .site-header .bar { gap: 8px; }
  .header-cta { padding: 0 14px; }
  .menu-btn { flex: none; width: 44px; padding: 0; justify-content: center; }
  .header-cta { flex: none; }
  .menu-btn .mb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 379px) { .brand svg { height: 22px; } }
@media (max-width: 349px) { .brand svg { height: 20px; } .header-cta { padding: 0 12px; } }
@media (max-width: 329px) { .brand svg { height: 18px; } .header-cta { padding: 0 10px; } }
.site-header[data-route="demo"] .header-cta { display: none; }

/* ---------- Pages and chapters ---------- */
.page[hidden] { display: none !important; }
.chapter { padding-block: var(--sp-chapter); }
.chapter.tight-top { padding-top: calc(var(--sp-chapter) * 0.45); }
.chapter.mist { background: var(--mist); }
.chapter.dark { background: var(--ink); color: var(--on-dark); --focus: var(--lime); }
.dark .muted, .dark .caption, .dark .eyebrow { color: var(--on-dark-2); }
.dark .btn-primary { border-color: var(--lime); }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.dark .link-arrow { text-decoration-color: var(--lime); }
.dark .link-arrow:hover { text-decoration-color: #FFFFFF; }
.ch-head { max-width: 46rem; margin-bottom: var(--sp-head); }
.proof { margin-top: clamp(56px, 7vw, 104px); padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px; }
.proof .pf-text { font-size: var(--fs-intro); line-height: 1.45; }
.ch-head .h2 + p { margin-top: 18px; }
.ch-head.wide { max-width: 60rem; }

/* ---------- Home: the opening ---------- */
.hero-photo {
  position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); --focus: #FFFFFF;
  margin-top: calc(-1 * var(--header-h) - 1px);
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 96px); padding-bottom: clamp(44px, 7.5vh, 88px);
  background: #6F7F86;
}
.hero-photo picture, .hero-photo .hp-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hero-photo .hp-img { object-fit: cover; object-position: 28% 52%; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 56% at 24% 74%, rgba(17, 15, 10, 0.4) 0%, rgba(17, 15, 10, 0.2) 55%, rgba(17, 15, 10, 0) 100%),
    linear-gradient(to top, rgba(17, 15, 10, 0.5) 0%, rgba(17, 15, 10, 0.3) 28%, rgba(17, 15, 10, 0.06) 52%, rgba(17, 15, 10, 0) 64%),
    linear-gradient(to bottom, rgba(17, 15, 10, 0.22) 0%, rgba(17, 15, 10, 0) 18%);
}
.hp-copy h1 { font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.032em; font-weight: 400; max-width: 11.5em; text-wrap: balance; }
.hp-copy p.lead { margin-top: 24px; font-size: clamp(1.125rem, 1.04rem + 0.38vw, 1.4375rem); line-height: 1.42; max-width: 31em; text-wrap: pretty; }
@media (max-width: 720px) {
  .hero-photo { padding-top: calc(var(--header-h) + 120px); padding-bottom: 40px; }
  .hero-photo .hp-img { object-position: 50% 50%; }
  .hero-photo::before { background: linear-gradient(to top, rgba(17, 15, 10, 0.62) 0%, rgba(17, 15, 10, 0.46) 40%, rgba(17, 15, 10, 0.18) 66%, rgba(17, 15, 10, 0.1) 86%, rgba(17, 15, 10, 0.2) 100%); }
}

/* ---------- Product media: asset records rendered as images or plain slots ---------- */
figure { margin: 0; }
.asset { position: relative; }
.asset img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--fit-h); border-radius: var(--r-media); box-shadow: 0 0 0 1px rgba(33, 29, 20, 0.08); background: var(--paper); }
.slot {
  position: relative; width: 100%; max-width: 100%;
  background: var(--slot); border: 1px dashed var(--slot-line); border-radius: var(--r-media);
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: clamp(18px, 3vw, 40px); text-align: center; color: var(--ink-2);
}
.slot .sl-id { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.slot .sl-intent { font-size: var(--fs-small); line-height: 1.5; max-width: 34em; }
.slot .sl-dim { font-size: 0.78125rem; font-variant-numeric: tabular-nums; margin-top: 6px; }
.slot.m { display: none; }
@media (max-width: 720px) {
  .asset.has-m .slot.d { display: none; }
  .asset.has-m .slot.m { display: grid; }
}
.asset figcaption { margin-top: 14px; }

/* ---------- Fit to the screen: a picture and the words that go with it are seen together ---------- */
.asset { --fit-h: max(240px, calc(100svh - var(--header-h) - 140px)); }
.asset picture { display: block; }
.asset .slot { width: min(100%, calc(var(--fit-h) * var(--ar, 1.6))); }
.slot { min-height: 0; overflow: hidden; container-type: inline-size; }
@container (max-width: 260px) { .slot .sl-intent { display: none; } }
@container (max-width: 150px) { .slot .sl-dim { display: none; } .slot .sl-id { font-size: 0.875rem; } }
.person .asset { --fit-h: max(200px, calc(100svh - var(--header-h) - 240px)); }
.page-media .asset { --fit-h: max(260px, calc(100svh - var(--header-h) - 96px)); }
.page-media .asset .slot, .page-media .asset img { margin-inline: auto; }
.moments .panel { container-type: inline-size; }
.moments .stage .asset { --fit-h: max(240px, calc(100svh - var(--header-h) - 300px)); }
.moments .stage-cap { margin-top: 18px; max-width: 42em; color: var(--ink-2); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); line-height: 1.5; }
.moments.is-tabs .stage .asset { --fit-h: max(260px, calc(100svh - var(--header-h) - 400px)); }
.moments.is-tabs .stage .slot.d, .moments.is-tabs .stage img { width: 100%; max-width: none; height: min(calc(100cqi / 2.4), var(--fit-h)); max-height: none; }
.moments.is-tabs .stage img { background: var(--ground); object-fit: cover; }
/* The panels now sit on photographs, so when the screen is short the picture narrows and centres instead of
   showing bands of plain ground at its sides */
.moments.is-tabs .stage img { width: auto; max-width: 100%; aspect-ratio: 2.4 / 1; margin-inline: auto; }
/* Product renders sit on their own sand ground, so they need no hairline frame */
.asset.render img { box-shadow: none; background: var(--ground); }

@media (min-width: 861px) and (max-height: 760px) {
  #explore { padding-top: 28px; }
  #explore .ch-head { margin-bottom: 18px; }
  #explore .ch-head .h2 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); }
  .moments .tablist { margin-bottom: 16px; }
  .moments .tab { padding: 8px 0 12px; }
  .moments .stage-cap { margin-top: 12px; }
  .moments.is-tabs .stage .asset { --fit-h: max(200px, calc(100svh - var(--header-h) - 300px)); }
}
@media (max-width: 860px) and (max-height: 620px) {
  .moments .stage .asset { --fit-h: max(170px, calc(100svh - var(--header-h) - 330px)); }
}
.compose.flip .asset .slot, .compose.flip .asset img { margin-left: auto; }
.handover .asset .slot, .handover .asset img { margin-inline: auto; }
@media (max-width: 860px) {
  .compose .asset { --fit-h: max(200px, calc(100svh - var(--header-h) - 240px)); }
  .compose.flip .asset .slot, .compose.flip .asset img { margin-left: 0; }
}
@media (max-width: 860px) and (max-height: 620px) { .compose .asset { --fit-h: max(180px, calc(100svh - var(--header-h) - 285px)); } }

/* ---------- Product composition: the product takes two-thirds ---------- */
.compose { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: center; }
.compose .c-media { grid-column: 1 / span 8; }
.compose .c-text { grid-column: 9 / span 4; }
.compose.flip .c-media { grid-column: 5 / span 8; grid-row: 1; }
.compose.flip .c-text { grid-column: 1 / span 4; grid-row: 1; }
.compose.top { align-items: start; }
.compose .c-text h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); line-height: 1.15; letter-spacing: -0.016em; }
.compose .c-text p { margin-top: 10px; color: var(--ink-2); max-width: 26em; }
.compose .c-text .q { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.3; letter-spacing: -0.012em; font-weight: 500; color: var(--ink); margin-top: 12px; }
.compose + .compose { margin-top: clamp(64px, 8vw, 120px); }
.compose .c-media.two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--col-gap); align-items: end; }
@media (max-width: 860px) {
  .compose .c-media, .compose .c-text, .compose.flip .c-media, .compose.flip .c-text { grid-column: 1 / -1; grid-row: auto; padding: 0; }
  .compose .c-text { order: -1; }
  .compose .c-media.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
}

/* ---------- Home: the relationship chapter (selectable moments) ---------- */
.moments .tablist { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--rule-soft); }
.moments .tab {
  position: relative; background: none; border: 0; padding: 12px 0 16px; cursor: pointer;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); font-weight: 500; color: var(--ink-2); letter-spacing: -0.01em;
  transition: color 200ms var(--ease);
}
.moments .tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--lime-hover); transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease); }
.moments .tab[aria-selected="true"] { color: var(--ink); }
.moments .tab[aria-selected="true"]::after { transform: scaleX(1); }
.moments .tab:hover { color: var(--ink); }
.moments .tab .n { font-variant-numeric: tabular-nums; color: var(--stone); margin-right: 10px; font-weight: 400; }
.moments .panels { display: grid; }
.moments .panel { grid-area: 1 / 1; }
.moments .panel .p-label { display: none; }
.moments.is-tabs .panel[data-active="false"] { visibility: hidden; opacity: 0; pointer-events: none; }
.moments.is-tabs .panel[data-active="true"] { animation: panelIn 300ms var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.moments:not(.is-tabs) .tablist { display: none; }
.moments:not(.is-tabs) .panels { display: block; }
.moments:not(.is-tabs) .panel + .panel { margin-top: 56px; }
.moments:not(.is-tabs) .panel .p-label { display: block; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); font-weight: 500; letter-spacing: -0.016em; line-height: 1.15; margin-bottom: 14px; }
.moments .more { margin-top: clamp(24px, 3vw, 40px); }

/* ---------- CRM composition ---------- */
.handover { display: grid; grid-template-columns: minmax(0, 0.85fr) 40px minmax(0, 0.8fr) 40px minmax(0, 1.35fr); align-items: center; }
.handover.two { grid-template-columns: minmax(0, 1.25fr) 52px minmax(0, 1fr); }
.handover .h-arrow { display: flex; justify-content: center; color: var(--ink); }
.handover .h-arrow svg { width: 26px; height: 14px; }
.handover .h-cap { margin-top: 12px; font-size: var(--fs-caption); color: var(--ink-2); max-width: 30em; }
.package { padding: 4px 0; }
.package .pk-k { font-size: var(--fs-small); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.package .pk-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime-hover); box-shadow: 0 0 0 3px rgba(185, 242, 95, 0.35); }
.package ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.package li { font-size: var(--fs-small); line-height: 1.45; padding-left: 16px; position: relative; color: var(--ink-2); }
.package li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1.5px; background: var(--ink); }
.crm { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r-media); box-shadow: 0 1px 2px rgba(33, 29, 20, 0.05), 0 22px 44px -28px rgba(33, 29, 20, 0.32); overflow: hidden; }
.crm .crm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); background: var(--mist); }
.crm .crm-top b { font-weight: 500; font-size: var(--fs-small); display: inline-flex; align-items: center; gap: 8px; }
.crm .crm-top b i { width: 18px; height: 18px; border-radius: 5px; background: var(--ink); display: inline-block; position: relative; }
.crm .crm-top b i::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--lime); border-radius: 2px; }
.crm .crm-top span { font-size: 0.75rem; color: var(--ink-2); }
.crm .crm-title { padding: 16px 18px 4px; font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; }
.crm .crm-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lime); font-size: 0.75rem; font-weight: 500; margin: 8px 18px 6px; }
.crm dl { padding: 6px 18px 16px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 0; font-size: var(--fs-small); line-height: 1.45; }
.crm dt { color: var(--ink-2); }
.crm dd { margin: 0; padding-left: 18px; }
.crm dt.na, .crm dd.na { font-weight: 500; color: var(--ink); padding-top: 12px; border-top: 1px solid var(--rule-soft); margin-top: 4px; }
.crm .crm-next { border-top: 1px solid var(--rule-soft); padding: 14px 18px; font-size: var(--fs-small); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.crm .crm-next b { font-weight: 500; }
@container (max-width: 340px) {
  .crm dl { grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 0.8125rem; line-height: 1.36; padding-bottom: 8px; }
  .crm dt { font-size: 0.75rem; }
  .crm dd { margin-bottom: 5px; padding-left: 0; }
  .crm dd.na { border-top: 0; padding-top: 0; margin-top: 0; }
  .crm .crm-title, .crm dl, .crm .crm-top { padding-inline: 14px; }
  .crm .crm-top { padding-block: 10px; }
  .crm .crm-title { padding-top: 12px; font-size: 1rem; }
  .crm .crm-status { margin: 4px 14px 2px; height: 22px; }
}
.crm-wrap { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-media); padding: clamp(10px, 2.6vw, 32px); }
@media (max-width: 400px) { .crm-wrap { padding: 8px; } }
/* On the smallest phones the record needs the full width to fit on one screen, so it goes without the photograph */
@media (max-width: 359px) { .crm-wrap { padding: 0; } .crm-wrap .crm-bg { display: none; } }
.crm-wrap .crm-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.crm-wrap .crm { box-shadow: 0 0 0 1px rgba(33, 29, 20, 0.06), 0 2px 6px rgba(33, 29, 20, 0.06), 0 30px 60px -24px rgba(33, 29, 20, 0.38); border-color: transparent; }
@media (max-width: 1199px) {
  .handover, .handover.two { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .handover .asset .slot, .handover .asset img { margin-inline: 0; }
  .handover .h-arrow { justify-content: flex-start; padding-left: 20px; }
  .handover .h-arrow { padding: 6px 0; }
  .handover .h-arrow svg { transform: rotate(90deg); }
}
.regulated { margin-top: 28px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.regulated::before { content: ""; width: 28px; height: 2px; background: var(--ink); }

/* ---------- Evidence ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); border-top: 1px solid var(--dark-rule); }
.stat { padding-top: 26px; padding-right: 12px; }
.stat .num { font-size: clamp(3.25rem, 2.2rem + 3.8vw, 6rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; color: var(--lime); font-variant-numeric: tabular-nums lining-nums; }
.stat .def { margin-top: 14px; font-size: 1.0625rem; line-height: 1.45; max-width: 18em; }
.stat .def small { display: block; color: var(--on-dark-2); font-size: var(--fs-small); margin-top: 6px; }
.evidence-more { margin-top: 36px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; }
.evidence-more .em-actions { grid-column: 1 / span 6; }
.evidence-more blockquote { grid-column: 8 / span 5; margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.3; letter-spacing: -0.012em; }
.evidence-more blockquote footer { margin-top: 10px; font-size: var(--fs-small); color: var(--on-dark-2); letter-spacing: 0; }
@media (max-width: 760px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { padding-block: 22px; border-bottom: 1px solid var(--dark-rule); }
  .evidence-more .em-actions, .evidence-more blockquote { grid-column: 1 / -1; }
}

/* ---------- Invitation ---------- */
.invite { position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding-block: clamp(104px, 15vw, 208px) calc(clamp(104px, 15vw, 208px) + 28px); }
.invite .inv-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.invite::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(17, 15, 10, 0.18) 0%, rgba(17, 15, 10, 0.4) 100%); }
.invite .wrap { display: flex; flex-direction: column; align-items: center; }
.invite .inv-icon { display: block; width: clamp(56px, 5vw, 68px); height: auto; margin-bottom: clamp(24px, 3vw, 36px); border-radius: 22%; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
.invite .h2 { max-width: 15em; font-size: clamp(2.125rem, 1.3rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.026em; }
.invite p { margin-top: 22px; max-width: 32em; font-size: var(--fs-intro); line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.invite .actions { margin-top: 34px; justify-content: center; }

/* ---------- Inner page opening ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 112px) clamp(32px, 3.6vw, 52px); }
.page-hero .ph-copy { max-width: 58rem; }
.page-hero .h1-inner { margin-top: 0; }
.page-hero .intro { margin-top: 24px; }
.page-hero .actions { margin-top: 30px; }
.page-media { padding-bottom: var(--sp-chapter); }
.page-media .asset { max-width: 1240px; }

/* ---------- Facts: compact, uncontained ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--col-gap); }
.facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.008em; }
.fact p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; max-width: 30em; }
.dark .fact p { color: var(--on-dark-2); }
@media (max-width: 960px) { .facts.four, .facts.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts, .facts.four, .facts.three { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: start; }
.split .s-a { grid-column: 1 / span 5; }
.split .s-b { grid-column: 7 / span 6; }
@media (max-width: 960px) { .split .s-a, .split .s-b { grid-column: 1 / -1; } }

/* Numbered sequence (a real order) */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; font-size: 2.25rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.1875rem; }
.steps p { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Provider groups (Digital finance) */
.groups { display: grid; gap: clamp(56px, 6vw, 96px); }
.group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 12px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: clamp(22px, 2.4vw, 32px); }
.group .g-head { display: contents; }
.group .g-name { grid-column: 1 / span 5; grid-row: 1; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.group .g-outcome { grid-column: 1 / span 5; grid-row: 2; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.12; letter-spacing: -0.022em; font-weight: 500; max-width: 15em; }
.journey { grid-column: 7 / span 6; grid-row: 2; list-style: none; margin: 0; padding: 0; }
.journey li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 14px 0 16px; border-bottom: 1px solid var(--rule-soft); }
.journey li:first-child { padding-top: 0; }
.journey b { font-weight: 500; font-size: var(--fs-small); }
.journey p { color: var(--ink-2); }
@media (max-width: 860px) { .group .g-name, .group .g-outcome, .journey { grid-column: 1 / -1; } .journey { grid-row: 3; margin-top: 16px; } }
@media (max-width: 480px) { .journey li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; } }

/* Values (Careers) */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--col-gap); }
.value h3 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); line-height: 1.04; letter-spacing: -0.028em; }
.value p { margin-top: 14px; font-size: var(--fs-intro); line-height: 1.5; color: var(--ink-2); max-width: 26em; }
@media (max-width: 760px) { .values { grid-template-columns: minmax(0, 1fr); } }
.practices { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px var(--col-gap); }
.practices li { font-size: 1.0625rem; line-height: 1.5; padding-left: 22px; position: relative; }
.practices li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 10px; height: 2px; background: var(--ink); }
@media (max-width: 760px) { .practices { grid-template-columns: minmax(0, 1fr); } }
.vacancy { font-size: var(--fs-intro); max-width: 34em; }

/* Milestones and people (Company) */
.milestones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.milestones li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 6px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.milestones .ms-year { grid-column: 1 / span 1; font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.milestones li b { grid-column: 2 / span 5; font-weight: 500; font-size: 1.125rem; line-height: 1.4; }
.milestones .ms-text { grid-column: 7 / span 6; color: var(--ink-2); }
@media (max-width: 860px) { .milestones .ms-year { grid-column: 1 / -1; } .milestones li b { grid-column: 1 / -1; } .milestones .ms-text { grid-column: 1 / -1; margin-top: 4px; } }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
.person .nm { margin-top: 16px; font-weight: 500; font-size: 1.1875rem; }
.person .rl { font-size: var(--fs-small); color: var(--ink-2); }
.person .cr { margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; }
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 420px) { .team { grid-template-columns: minmax(0, 1fr); } }

/* Programme credit */
.credits { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.dark .credit { border-top-color: var(--dark-rule); }
.dark .credit span { color: var(--on-dark-2); }
@media (max-width: 760px) { .credits { grid-template-columns: minmax(0, 1fr); } }
.credit { display: grid; gap: 6px; padding-top: 22px; border-top: 1px solid var(--rule-soft); max-width: 40rem; }
.credit b { font-weight: 500; }
.credit span { font-size: 0.8125rem; color: var(--ink-2); }

/* ---------- Demo form ---------- */
.hero-photo.demo-photo { align-items: center; padding-top: calc(var(--header-h) + clamp(40px, 7vh, 88px)); padding-bottom: clamp(40px, 7vh, 88px); }
.hero-photo.demo-photo::before {
  background:
    linear-gradient(to right, rgba(17, 15, 10, 0.66) 0%, rgba(17, 15, 10, 0.5) 36%, rgba(17, 15, 10, 0.24) 62%, rgba(17, 15, 10, 0.12) 100%),
    linear-gradient(to top, rgba(17, 15, 10, 0.3) 0%, rgba(17, 15, 10, 0) 50%);
}
.demo-hero { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; align-items: center; }
.dh-copy { grid-column: 1 / span 5; }
.dh-copy .h1-inner { margin-top: 0; }
.dh-copy .lead { margin-top: 22px; font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.3125rem); line-height: 1.45; max-width: 26em; }
.dh-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.dh-list li { display: flex; gap: 14px; align-items: baseline; }
.dh-list li::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--lime); transform: translateY(-5px); }
.dh-panel { grid-column: 7 / span 6; background: var(--paper); color: var(--ink); --focus: var(--ink); border-radius: var(--r-media); padding: clamp(24px, 3.2vw, 48px); box-shadow: 0 32px 64px -34px rgba(0, 0, 0, 0.55); }
.dh-title { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; margin-bottom: 24px; }
.dh-panel .contact-line { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }
@media (max-width: 960px) {
  .dh-copy, .dh-panel { grid-column: 1 / -1; }
  .hero-photo.demo-photo { align-items: flex-start; }
}
@media (max-width: 720px) {
  .hero-photo.demo-photo { padding-top: calc(var(--header-h) + 40px); padding-bottom: 24px; }
  .hero-photo.demo-photo::before { background: linear-gradient(to bottom, rgba(17, 15, 10, 0.62) 0%, rgba(17, 15, 10, 0.5) 40%, rgba(17, 15, 10, 0.3) 100%); }
  .dh-panel { padding: 22px 18px; }
}
.field { display: grid; gap: 8px; }
.field + .field { margin-top: 22px; }
.field label { font-weight: 500; font-size: 1rem; }
.field label .opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 1.0625rem/1.4 var(--font); color: var(--ink); background: var(--paper); border: 1px solid #8F8A7D; border-radius: var(--r-control); transition: border-color 140ms ease, box-shadow 140ms ease; }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lime); }
.field [aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 1px #B42318; }
.field .err { display: none; font-size: var(--fs-small); color: #B42318; font-weight: 500; }
.field.has-error .err { display: block; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: var(--fs-small); line-height: 1.5; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.form-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.form-actions .btn { min-width: 200px; }
.form-legal { margin-top: 18px; font-size: var(--fs-caption); color: var(--ink-2); }
.error-summary { border: 2px solid #B42318; border-radius: var(--r-control); padding: 16px 18px; margin-bottom: 24px; background: var(--paper); }
.error-summary h2 { font-size: 1rem; }
.error-summary ul { margin-top: 8px; padding-left: 18px; font-size: var(--fs-small); }
.error-summary a { color: #B42318; font-weight: 500; }
.form-status { border-radius: var(--r-control); padding: 18px; margin-top: 20px; font-size: var(--fs-small); }
.form-status.fail { background: #FDECEA; border: 1px solid #F2B8B5; color: #7A1A12; }
.form-success .mark { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; margin-bottom: 20px; }
.form-success .mark svg { width: 26px; height: 26px; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(33, 29, 20, 0.25); border-top-color: var(--ink); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.contact-line { margin-top: 28px; font-size: var(--fs-small); }
.contact-line .addr { font-weight: 500; user-select: all; }
.copy-btn { margin-left: 8px; background: none; border: 1px solid var(--ink); border-radius: 8px; min-height: 36px; padding: 0 12px; font-size: 0.875rem; cursor: pointer; }

/* ---------- Long reference pages: one continuous document with an "On this page" contents list ----------
   The same component serves Security and governance, Technical integration and the legal pages: a sticky
   list beside the text on wide screens, and a list that opens and closes above the text on narrow ones. */
.legal-meta { margin-top: 18px; font-size: var(--fs-small); color: var(--ink-2); }
.doc-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; align-items: start; }
.toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 28px); font-size: var(--fs-small); border-top: 1px solid var(--ink); padding-top: 16px; }
.toc-h { font-weight: 500; }
.toc-list { list-style: none; margin: 10px 0 0; padding: 0; }
.toc-list a { position: relative; display: flex; align-items: center; min-height: 36px; padding-block: 4px; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc-list a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime-line); }
.toc-list a[aria-current="true"] { color: var(--ink); font-weight: 500; }
.toc-list a[aria-current="true"]::before { content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--lime-hover); }
.toc-toggle { display: none; }
.doc-main { grid-column: 4 / -1; min-width: 0; }
.doc-main.legal-body { grid-column: 5 / span 7; max-width: 42rem; }
@media (max-width: 1023px) {
  .toc { grid-column: 1 / -1; position: static; }
  .toc-list { columns: 2; column-gap: var(--col-gap); }
  .toc-list li { break-inside: avoid; }
  .toc-list a[aria-current="true"]::before { display: none; }
  .doc-main, .doc-main.legal-body { grid-column: 1 / -1; }
  /* With JavaScript the list folds behind a button; without it the list simply shows */
  .toc.is-collapsible { padding-top: 0; border-bottom: 1px solid var(--rule-soft); }
  .toc.is-collapsible .toc-h { display: none; }
  .toc.is-collapsible .toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; font: 500 var(--fs-small)/1.2 var(--font); color: var(--ink); cursor: pointer; text-align: left; }
  .toc.is-collapsible .toc-list { margin: 0 0 14px; }
  .toc-toggle .fm-sign { position: relative; width: 14px; height: 14px; flex: none; }
  .toc-toggle .fm-sign::before, .toc-toggle .fm-sign::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform 240ms var(--ease); }
  .toc-toggle .fm-sign::after { transform: rotate(90deg); }
  .toc-toggle[aria-expanded="true"] .fm-sign::after { transform: rotate(0deg); }
}
@media (max-width: 520px) { .toc-list { columns: 1; } }

.doc-sec { scroll-margin-top: 28px; }
.doc-sec + .doc-sec { margin-top: clamp(48px, 5.5vw, 80px); padding-top: clamp(32px, 3.4vw, 44px); border-top: 1px solid var(--rule-soft); }
.doc-h { font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.375rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; }
.doc-lede { margin-top: 16px; font-size: var(--fs-intro); line-height: 1.5; max-width: 40em; }
.doc-sec .facts { margin-top: 32px; }
.doc-sec .doc-h + .facts { margin-top: 28px; }
.doc-note, .doc-related { margin-top: 28px; font-size: var(--fs-small); color: var(--ink-2); max-width: 46em; }
.doc-note a, .doc-related a, .fact p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--lime-line); }
.doc-note a:hover, .doc-related a:hover, .fact p a:hover { text-decoration-color: currentColor; }
.doc-links { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.doc-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--lime-line); }
.doc-links a:hover { text-decoration-color: currentColor; }
.doc-links a svg { width: 12px; height: 12px; }
.musts { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--ink); max-width: 46rem; }
.musts li { padding: 14px 0 15px 26px; border-bottom: 1px solid var(--rule-soft); position: relative; color: var(--ink-2); line-height: 1.5; }
.musts li::before { content: ""; position: absolute; left: 0; top: 23px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--lime); }
.musts b { color: var(--ink); font-weight: 500; }
.duty-table { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.duty-table th, .duty-table td { text-align: left; vertical-align: top; padding: 14px 16px 15px 0; border-bottom: 1px solid var(--rule-soft); }
.duty-table thead th { font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--ink); padding-block: 0 12px; }
.duty-table tbody th { font-weight: 500; width: 24%; }
.duty-table td { color: var(--ink-2); width: 38%; }
@media (max-width: 640px) {
  .duty-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .duty-table, .duty-table tbody, .duty-table tr, .duty-table th, .duty-table td { display: block; width: auto; }
  .duty-table tr { padding: 16px 0; border-bottom: 1px solid var(--rule-soft); }
  .duty-table tbody tr:first-child { border-top: 1px solid var(--ink); }
  .duty-table th, .duty-table td { padding: 0; border: 0; }
  .duty-table td { margin-top: 8px; }
  .duty-table td::before { display: block; font-weight: 500; color: var(--ink); }
  .duty-table td:nth-of-type(1)::before { content: "Your team"; }
  .duty-table td:nth-of-type(2)::before { content: "Narrative"; }
}
.certs { margin: 24px 0 0; border-top: 1px solid var(--ink); max-width: 46rem; }
.cert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--col-gap); row-gap: 6px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.cert dt { font-weight: 500; font-size: 1.125rem; }
.cert dd { margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.cert-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ink); color: var(--ink); font-size: var(--fs-caption); font-weight: 500; }
@media (max-width: 560px) { .cert { grid-template-columns: minmax(0, 1fr); } }
.sandbox { margin-top: 32px; max-width: 46rem; }
.sandbox h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.35; }
.sandbox p { margin-top: 6px; color: var(--ink-2); }
.doc-end { margin-top: clamp(48px, 5.5vw, 80px); padding-top: 22px; border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; }
.doc-end p { color: var(--ink-2); max-width: 36em; }

/* Legal text */
.legal-body .legal-lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; }
.legal-body > p + p { margin-top: 16px; }
.legal-body section { margin-top: clamp(40px, 4vw, 56px); scroll-margin-top: 28px; }
.legal-body h2 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.legal-body h2 span { color: var(--ink-2); font-variant-numeric: tabular-nums; margin-right: 6px; }
.legal-body section p, .legal-body section ul { margin-top: 14px; }
.legal-body ul { padding-left: 1.25em; }
.legal-body li + li { margin-top: 8px; }
.legal-body li b, .legal-body p b { font-weight: 500; }
.legal-address { line-height: 1.7; }
.legal-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }
.inline-btn { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--lime-line); }
.inline-btn:hover { text-decoration-color: currentColor; }

/* ---------- Insights ---------- */
.articles { list-style: none; border-top: 1px solid var(--ink); }
.articles li { border-bottom: 1px solid var(--rule-soft); }
.articles a { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; padding: 28px 0; text-decoration: none; align-items: baseline; }
.articles a:hover .at { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.articles .at { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.articles .am { color: var(--ink-2); font-size: var(--fs-small); text-align: right; }
@media (max-width: 640px) { .articles a { grid-template-columns: minmax(0, 1fr); } .articles .am { text-align: left; } }

/* ---------- Handover figure: caption sits under the picture it describes ---------- */
@media (min-width: 1200px) {
  .handover .h-fig { --fit-h: max(240px, calc(100svh - var(--header-h) - 160px)); width: min(100%, calc(var(--fit-h) * 1.0667)); margin-inline: auto; }
  .handover .h-fig .asset { --fit-h: inherit; }
  .handover .h-fig .asset .slot { width: 100%; }
}

/* ---------- Pilot result on the home page ---------- */
.result { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: start; border-top: 1px solid var(--ink); padding-top: clamp(28px, 3vw, 40px); }
.result .r-kicker { grid-column: 1 / span 4; font-size: var(--fs-small); font-weight: 500; line-height: 1.45; color: var(--ink-2); max-width: 20em; }
.result .r-body { grid-column: 6 / span 7; }
.result .r-lead { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; max-width: 18em; }
.result .r-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.result .r-list li { display: flex; gap: 14px; align-items: baseline; max-width: 34em; }
.result .r-list li::before { content: ""; flex: none; width: 16px; height: 2px; background: var(--ink); transform: translateY(-5px); }
.result .actions { margin-top: 24px; }
@media (max-width: 860px) { .result .r-kicker, .result .r-body { grid-column: 1 / -1; } }

/* ---------- Evidence figures ---------- */
.evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 36px; border-top: 1px solid var(--ink); }
.evidence .ev { padding-top: 24px; }
.evidence .ev-num { font-size: clamp(3rem, 2rem + 3.6vw, 5.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.evidence .ev-text { margin-top: 14px; font-size: 1.125rem; line-height: 1.45; max-width: 26em; }
.evidence .ev-src { margin-top: 10px; font-size: var(--fs-caption); color: var(--ink-2); max-width: 32em; }
.after-evidence { margin-top: clamp(32px, 4vw, 48px); font-size: var(--fs-intro); line-height: 1.5; max-width: 40em; }
@media (max-width: 760px) { .evidence { grid-template-columns: minmax(0, 1fr); } }
.evidence.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidence.three .ev-num { font-size: clamp(3rem, 1.6rem + 3vw, 4.75rem); }
.evidence.three .ev-text { font-size: 1.0625rem; }
@media (max-width: 959px) { .evidence.three { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .evidence.three .ev-text { max-width: 30em; } }

/* ---------- Two pains side by side ---------- */
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; border-top: 1px solid var(--ink); }
.pains > div { padding-top: 22px; }
.pains h3 { font-size: var(--fs-h3); line-height: 1.25; }
.pains p { margin-top: 10px; color: var(--ink-2); max-width: 30em; }
@media (max-width: 760px) { .pains { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Integration flow diagram ---------- */
.flow { display: grid; grid-template-columns: max-content minmax(64px, 1fr) minmax(280px, 520px) minmax(64px, 1fr) max-content; grid-template-rows: auto auto; column-gap: 0; align-items: center; }
.flow .fl-col { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; align-self: stretch; }
.flow .fl-in { grid-column: 1; }
.flow .fl-out { grid-column: 5; }
.flow .fl-link { grid-row: 2; grid-column: 2; }
.flow .fl-link + .fl-core + .fl-link { grid-column: 4; }
.flow .fl-core { grid-row: 2; grid-column: 3; }
.flow .fl-col h3 { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); margin-bottom: 18px; align-self: end; }
.flow .fl-col ul { list-style: none; margin: 0; padding: 0; display: grid; row-gap: clamp(14px, 1.6vw, 22px); align-self: center; }
.flow .fl-col li { min-height: 3.1rem; display: flex; flex-direction: column; justify-content: center; line-height: 1.35; }
.flow .fl-col li b { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.005em; }
.flow .fl-col li span { font-size: var(--fs-small); color: var(--ink-2); margin-top: 3px; }
.flow .fl-link { position: relative; height: 1px; margin-inline: clamp(10px, 1.8vw, 28px); }
.flow .fl-link::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left center; }
.flow .fl-link::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: translate(-1px, -50%) rotate(45deg); }
html.js .flow .fl-link.rv::before { transform: scaleX(0); transition: transform 700ms var(--ease) calc(var(--rv-d, 0ms) + 150ms); }
html.js .flow .fl-link.rv.in::before { transform: none; }
html.rv-off .flow .fl-link::before { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.js .flow .fl-link.rv::before { transform: none; transition: none; } }
.flow .fl-core { background: var(--ink); color: var(--on-dark); border-radius: var(--r-media); padding: clamp(24px, 2.8vw, 40px); }
.flow .fl-core b { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.flow .fl-core b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); flex: none; }
.flow .fl-core p { margin-top: 4px; color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.5; }
.flow .fl-core .fl-lead { margin-top: 18px; color: var(--on-dark); font-size: 1rem; font-weight: 500; }
.flow-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--rule); }
.flow-foot > p { color: var(--ink-2); max-width: 44em; }
.flow-more { margin-top: 14px; }
.flow-more summary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 500; cursor: pointer; list-style: none; border-radius: 4px; }
.flow-more summary::-webkit-details-marker { display: none; }
.flow-more .fm-sign { position: relative; width: 14px; height: 14px; flex: none; }
.flow-more .fm-sign::before, .flow-more .fm-sign::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform 240ms var(--ease); }
.flow-more .fm-sign::after { transform: rotate(90deg); }
.flow-more[open] .fm-sign::after { transform: rotate(0deg); }
.flow-more .fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); padding: 14px 0 6px; }
.flow-more dl { margin: 0; }
.flow-more dt { font-weight: 500; margin-top: 18px; }
.flow-more dl dt:first-child { margin-top: 0; }
.flow-more dd { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; max-width: 34em; }
@media (max-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .flow .fl-col, .flow .fl-core, .flow .fl-link, .flow .fl-link + .fl-core + .fl-link { grid-column: 1; grid-row: auto; display: block; }
  .flow .fl-col h3 { margin-bottom: 12px; }
  .flow .fl-col li { min-height: 0; justify-content: flex-start; }
  .flow .fl-link { width: 1px; height: 40px; margin: 18px 0 18px 26px; }
  .flow .fl-link::before { transform-origin: center top; }
  html.js .flow .fl-link.rv::before { transform: scaleY(0); }
  .flow .fl-link::after { right: auto; top: auto; bottom: 0; left: 0; transform: translate(-50%, -1px) rotate(135deg); }
  .flow-more .fm-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-more .fm-grid dl + dl { margin-top: 18px; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .flow .fl-col ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

/* ---------- Compact facts and documentation band ---------- */
.facts.compact .fact p { margin-top: 6px; }
.doc-band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 14px; align-items: baseline; padding-block: 28px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.doc-band h2 { grid-column: 1 / span 4; font-size: var(--fs-h3); font-weight: 500; }
.doc-band p { grid-column: 5 / span 5; color: var(--ink-2); }
.doc-band .actions { grid-column: 10 / span 3; justify-self: end; }
@media (max-width: 960px) { .doc-band h2, .doc-band p, .doc-band .actions { grid-column: 1 / -1; justify-self: start; } }

/* ---------- Values as numbered rows ---------- */
.values-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: v; }
.values-list li { counter-increment: v; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 6px; align-items: baseline; padding: 24px 0 26px; border-bottom: 1px solid var(--rule-soft); }
.values-list li::before { content: "0" counter(v); grid-column: 1 / span 1; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.values-list h3 { grid-column: 2 / span 4; font-size: var(--fs-h3); line-height: 1.25; }
.values-list p { grid-column: 7 / span 6; color: var(--ink-2); }
@media (max-width: 860px) { .values-list li::before, .values-list h3, .values-list p { grid-column: 1 / -1; } }

/* ---------- Insights: index ---------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 40px); }
.blog-filters button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 500 0.9375rem/1 var(--font); cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.blog-filters button:hover { border-color: var(--ink); }
.blog-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.cover { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--mist); outline: 1px solid rgba(33, 29, 20, 0.08); outline-offset: -1px; }
.cover svg { display: block; width: 100%; height: 100%; }
.cover.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--ink-2); }
.post-meta .cat { color: var(--ink); font-weight: 500; }
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 22px; align-items: center; text-decoration: none; color: inherit; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule-soft); }
.feature .cover { grid-column: 1 / span 7; }
.feature .f-body { grid-column: 9 / span 4; }
.feature h2 { margin-top: 14px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.022em; }
.feature p { margin-top: 14px; color: var(--ink-2); }
.feature .read { margin-top: 18px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(40px, 4.5vw, 56px); list-style: none; margin: 0; padding: 0; }
.card a { display: block; color: inherit; text-decoration: none; }
.card h3 { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em; }
.card p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.card .post-meta { margin-top: 16px; }
.card .cover, .feature .cover { transition: transform 400ms var(--ease); }
.card a:hover .cover, .feature:hover .cover { transform: translateY(-3px); }
.card a:hover h3, .feature:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--lime-line); }
.blog-empty { color: var(--ink-2); }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature .cover, .feature .f-body { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Insights: article ---------- */
.art-head { padding-block: clamp(36px, 5vw, 72px) clamp(24px, 3vw, 36px); }
.art-head .wrap > * { max-width: 46rem; }
.art-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: var(--fs-small); font-weight: 500; text-decoration: none; color: var(--ink-2); }
.art-back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.art-back:hover { color: var(--ink); }
.art-head .post-meta { margin-top: 18px; }
.art-head h1 { margin-top: 14px; font-size: clamp(2.125rem, 1.4rem + 2.7vw, 3.75rem); line-height: 1.05; letter-spacing: -0.028em; }
.art-head .lede { margin-top: 20px; font-size: var(--fs-intro); line-height: 1.5; color: var(--ink-2); }
.art-byline { margin-top: 22px; font-size: var(--fs-small); }
.art-byline b { font-weight: 500; }
.art-cover { margin-bottom: clamp(36px, 4vw, 56px); }
.art-cover .cover { aspect-ratio: 21 / 9; max-height: calc(100svh - var(--header-h) - 120px); }
.prose { max-width: 42rem; font-size: 1.125rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.2; letter-spacing: -0.014em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.45em; }
.prose .art-fig { margin: 0 0 1.8em; }
.prose .art-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-media); background: var(--ground); }
.prose .art-fig figcaption { margin-top: 10px; font-size: var(--fs-caption); color: var(--ink-2); }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--lime-line); font-size: 1.25rem; line-height: 1.45; }
.prose blockquote footer { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }
.prose .note { font-size: var(--fs-small); color: var(--ink-2); }
.art-sources { max-width: 42rem; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule-soft); font-size: var(--fs-small); }
.art-sources h2 { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.art-sources ol { margin-top: 10px; padding-left: 1.2em; }
.art-sources li + li { margin-top: 6px; }
.art-share { max-width: 42rem; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: var(--fs-small); color: var(--ink-2); }
.art-share button { min-height: 40px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 8px; background: transparent; font: 500 0.875rem/1 var(--font); cursor: pointer; }
.read-next h2 { margin-bottom: 28px; }
.read-next .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .read-next .cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact form: email hand-off ---------- */
.form-success .mail-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-success .mail-preview { margin: 20px 0 0; font-family: var(--font); line-height: 1.5; padding: 16px 18px; border-radius: var(--r-control); background: var(--mist); font-size: var(--fs-small); white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* ---------- Motion: quiet reveals as content comes into view ---------- */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); transition-delay: var(--rv-d, 0ms); }
html.js .rv.in { opacity: 1; transform: none; }
html.rv-off .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html.js .page.page-in { animation: pageIn 420ms var(--ease) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
html.js .hp-copy > * { animation: heroUp 900ms var(--ease) both; }
html.js .hp-copy > :nth-child(2) { animation-delay: 120ms; }
html.js .hp-copy > :nth-child(3) { animation-delay: 240ms; }
html.js .hero-photo .hp-img { animation: heroImg 2200ms var(--ease) both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroImg { from { transform: scale(1.045); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
  html.js .page.page-in, html.js .hp-copy > *, html.js .hero-photo .hp-img { animation: none; }
}

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: 1; margin-top: -28px; border-radius: 28px 28px 0 0; overflow: hidden; background: var(--stone); color: var(--ink); --focus: var(--ink); padding-top: clamp(56px, 7vw, 96px); font-size: var(--fs-small); }
.site-footer .pebbles { margin-top: clamp(28px, 4vw, 48px); color: var(--ink); opacity: 0.55; }
.site-footer .pebbles svg { display: block; width: 100%; height: clamp(110px, 16vw, 230px); overflow: visible; }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; }
.footer-brand { grid-column: 1 / span 4; }
.footer-brand svg { height: 24px; width: auto; display: block; }
.footer-brand p { margin-top: 18px; color: var(--ink); max-width: 22em; }
.footer-col { grid-column: span 2; }
.footer-col h2 { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.footer-col ul { list-style: none; margin-top: 12px; }
.footer-col li a { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; text-decoration: none; }
.footer-col li a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: currentColor; }
.footer-col li a svg { width: 11px; height: 11px; }
.footer-bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(33, 29, 20, 0.28); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; color: var(--ink); font-size: var(--fs-caption); }
@media (max-width: 960px) { .footer-brand { grid-column: 1 / -1; } .footer-col { grid-column: span 6; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- Paired product images: one combined picture on phones ---------- */
@media (max-width: 720px) {
  .compose .c-media.two { grid-template-columns: minmax(0, 1fr); }
  .compose .c-media.two .pair-2 { display: none; }
}

/* ---------- Moving between pages: a short cross-fade, with the header held in place ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease); }
}

/* ---------- Overview video: plays only when the visitor asks ---------- */
.film { width: min(100%, max(320px, calc((100svh - var(--header-h) - 200px) * 1.7778))); margin-inline: auto; }
.film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--r-media) + 6px); overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 48px 96px -48px rgba(0, 0, 0, 0.8); }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; border: 0; margin: 0; background: rgba(17, 15, 10, 0.06); color: #FFFFFF; font: inherit; cursor: pointer; transition: background-color 200ms var(--ease); }
.film-play:hover { background: rgba(17, 15, 10, 0.12); }
.film-play[hidden] { display: none; }
.film-play .fp-icon { width: clamp(64px, 7vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7); transition: transform 260ms var(--ease), background-color 160ms var(--ease); }
.film-play .fp-icon svg { width: 40%; height: 40%; margin-left: 7%; }
.film-play:hover .fp-icon { transform: scale(1.06); background: var(--lime-hover); }
.film-play .fp-time { position: absolute; right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px); padding: 5px 11px; border-radius: 999px; background: rgba(33, 29, 20, 0.84); color: #FFFFFF; font-size: var(--fs-caption); font-weight: 500; font-variant-numeric: tabular-nums; }
.film-play:focus-visible { outline: 3px solid var(--lime); outline-offset: -8px; border-radius: calc(var(--r-media) + 6px); }
.film-note { margin-top: 18px; max-width: 46em; }
.film-text { max-width: 46em; }
.film-text ol { margin: 6px 0 4px; padding-left: 1.3em; display: grid; gap: 10px; color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.55; }
.film-text ol b { color: var(--on-dark); font-weight: 500; }
@media (max-width: 560px) { .film-frame { border-radius: var(--r-media); } }

/* ---------- Pilot evidence: three examples, two measures and a method note ---------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; border-top: 1px solid var(--dark-rule); }
.case { padding-top: 24px; }
.case h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.01em; }
.case dl { margin: 16px 0 0; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 10px 14px; font-size: var(--fs-small); line-height: 1.5; }
.case dt { color: var(--lime); font-weight: 500; }
.case dd { margin: 0; color: var(--on-dark-2); }
.cases-more { margin-top: 28px; max-width: 46em; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.stats.two .def { max-width: 24em; }
.pilot-said { margin-top: 32px; font-size: var(--fs-intro); line-height: 1.5; max-width: 40em; }
.pilot-method { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--dark-rule); font-size: var(--fs-caption); line-height: 1.55; color: var(--on-dark-2); max-width: 60em; }
.dark .eyebrow + .h2 { margin-top: 12px; }
@media (max-width: 960px) { .cases { grid-template-columns: minmax(0, 1fr); } .case dl { max-width: 36em; } }
@media (max-width: 760px) { .stats.two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How Coach works: evaluation note ---------- */
.ch-head .eyebrow + .h2 { margin-top: 10px; }
.route { margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-media); background: var(--paper); border: 1px solid var(--rule-soft); max-width: 60rem; }
.route h3 { font-size: var(--fs-h3); line-height: 1.22; }
.route p { margin-top: 10px; color: var(--ink-2); max-width: 46em; }
.route .flow-more { margin-top: 10px; }
.route-list { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 10px; max-width: 46em; }
.route-list li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.route-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1.5px; background: var(--ink); }
.route .actions { margin-top: 14px; }

/* ---------- How Coach works: Coach inside the provider's app, with data in and products and people out ---------- */
.inapp { display: grid; grid-template-columns: minmax(0, 3fr) clamp(36px, 4vw, 64px) minmax(0, 6.4fr) clamp(36px, 4vw, 64px) minmax(0, 3fr); align-items: center; }
.ia-k { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.ia-col ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.ia-col li { display: grid; gap: 2px; padding: 12px 0 13px; border-bottom: 1px solid var(--rule-soft); line-height: 1.4; }
.ia-col li b { font-weight: 500; font-size: 1.0625rem; }
.ia-col li span { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.45; }
.ia-core { position: relative; }
.ia-frame { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ia-frame::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime-hover); box-shadow: 0 0 0 3px rgba(185, 242, 95, 0.35); flex: none; }
.ia-shot { position: relative; }
/* Outline the Coach panel inside the bank's app (positions match the desktop and phone renders) */
.ia-hl { position: absolute; left: 55.1%; top: 23.8%; width: 30.9%; height: 48.2%; border: 2px solid var(--lime-line); border-radius: 12px; box-shadow: 0 0 0 4px rgba(203, 255, 129, 0.35); pointer-events: none; }
.ia-hl span { position: absolute; left: -2px; top: calc(100% + 8px); display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
@media (max-width: 720px) { .ia-hl { left: 13.1%; top: 33.5%; width: 73.4%; height: 51.3%; } }
.ia-core .asset { --fit-h: none; }
.ia-core .asset img { width: 100%; max-height: none; }
.ia-link { position: relative; height: 1px; align-self: center; margin-inline: 8px; }
.ia-link::before { content: ""; position: absolute; inset: 0; background: var(--ink); }
.ia-link::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: translate(-1px, -50%) rotate(45deg); }
.ia-note { margin-top: 22px; max-width: 46em; }
@media (max-width: 1099px) {
  .inapp { grid-template-columns: minmax(0, 1fr); }
  .ia-link { width: 1px; height: 36px; margin: 16px 0 16px 24px; }
  .ia-link::after { right: auto; top: auto; bottom: 0; left: 0; transform: translate(-50%, -1px) rotate(135deg); }
  .ia-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (max-width: 560px) { .ia-col ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Talk to us: what the conversation covers ---------- */
.dh-k { margin-top: 28px; font-size: var(--fs-small); font-weight: 500; color: var(--on-dark-2); }
.dh-k + .dh-list { margin-top: 12px; }
.dh-list b { font-weight: 500; }

/* ---------- Working with and supported by: one quiet row of logos under the homepage hero ---------- */
.support { padding-block: clamp(36px, 4.4vw, 60px); border-bottom: 1px solid var(--rule-soft); }
.support-h { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.logos { list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 28px clamp(24px, 3vw, 48px); --ls: 1; }
.logos li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.logos img { display: block; width: calc(var(--lw) * var(--ls)); max-width: 100%; height: auto; }
/* Logos appear in their own colours, unaltered. Mastercard's brand rules do not allow its symbol in greyscale,
   and showing one logo in colour among grey ones would single it out, so the row stays in full colour. */
.logos .lg-slot { align-self: stretch; }
.logos .lg-slot span { display: grid; place-items: center; width: calc(120px * var(--ls)); max-width: 100%; min-height: 40px; padding: 4px 8px; border: 1px dashed var(--slot-line); border-radius: 8px; background: var(--slot); color: var(--ink-2); font-size: 0.8125rem; font-weight: 500; line-height: 1.15; text-align: center; }
@media (max-width: 1100px) { .logos { --ls: 0.86; gap: 24px 28px; } }
@media (max-width: 960px) {
  .logos { flex-wrap: wrap; justify-content: center; gap: 26px 0; --ls: 0.82; }
  .logos li { flex: 0 0 25%; padding-inline: clamp(6px, 1.6vw, 14px); }
}
@media (max-width: 560px) {
  .logos { --ls: 0.7; gap: 22px 0; }
  .logos li { flex-basis: 33.333%; }
  .logos .lg-slot span { width: 100%; min-height: 36px; font-size: 0.75rem; }
}
@media (max-width: 400px) { .logos { --ls: 0.64; } }
@media (max-width: 340px) { .logos { --ls: 0.58; } }

/* ---------- About: the introduction runs straight into the first section ---------- */
.split.ruled { position: relative; padding-top: clamp(24px, 3vw, 36px); }
.split.ruled::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--ink); }

/* ---------- For banks: a small label names what each figure shows ---------- */
.evidence .ev-label { font-size: var(--fs-caption); font-weight: 500; color: var(--ink-2); margin-bottom: 12px; }

/* ---------- Careers: an open role uses the Insights card, and its own article-style page ---------- */
.feature .f-title { margin-top: 14px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.022em; }
.feature:hover .f-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--lime-line); }
.role-card { margin-bottom: 0; }
.role-facts { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 28px; }
.role-facts dt { font-size: var(--fs-caption); color: var(--ink-2); }
.role-facts dd { margin: 2px 0 0; font-weight: 500; }
.role-cover .cover { aspect-ratio: 3 / 1; max-height: 340px; }
.page[data-page="founders-associate"] > .wrap { padding-bottom: var(--sp-chapter); }
#roleBody a[href^="mailto:"] { overflow-wrap: anywhere; }
.role-apply { max-width: 42rem; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* ---------- Log in and cookie settings: utility links, kept apart from Talk to us ---------- */
.m-util { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color 160ms var(--ease); }
.m-util:hover { border-color: var(--ink); }
.m-util svg, .f-util svg { width: 14px; height: 14px; flex: none; }
.f-util svg { transform: translateY(1px); }
.footer-col .f-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.footer-col .f-btn:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: currentColor; }

/* ---------- Analytics consent: equal choices, never in the way of the page ---------- */
.consent { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(384px, calc(100% - 32px)); }
.consent[hidden] { display: none; }
.consent-in { background: var(--paper); color: var(--ink); --focus: var(--ink); border: 1px solid var(--rule-soft); border-radius: var(--r-media); padding: 18px 20px 20px; box-shadow: 0 1px 2px rgba(33, 29, 20, 0.06), 0 28px 60px -28px rgba(33, 29, 20, 0.5); }
.consent-in { position: relative; }
.consent-h { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; padding-right: 36px; }
.consent-close { display: none; position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.consent-close:hover { background: var(--mist); }
.consent-close svg { width: 16px; height: 16px; }
.consent.is-settings .consent-close { display: grid; }
.consent-p { margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.consent-p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--lime-line); }
.consent-p a:hover { text-decoration-color: currentColor; }
.consent-now { margin-top: 8px; font-size: var(--fs-caption); line-height: 1.45; }
.consent-now { font-weight: 500; }
.consent-actions { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.consent-actions .btn { width: 100%; padding-inline: 10px; }
@media (max-width: 440px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .consent-in { padding: 16px 16px 18px; }
  .consent-actions { grid-template-columns: minmax(0, 1fr); }
}
@media print { .consent { display: none; } }
.prose b, .prose strong { font-weight: 500; }
.handover-note { margin-top: 18px; max-width: 46em; }
.consent-actions[hidden] { display: none; }

/* ---------- Header photographs on the main inner pages: a wide, rounded band after the title ---------- */
.page-band { padding-bottom: clamp(8px, 2vw, 24px); }
.band-img { display: block; width: 100%; height: auto; aspect-ratio: 2.6 / 1; max-height: calc(100svh - var(--header-h) - 120px); object-fit: cover; border-radius: var(--r-band); background: var(--mist); }
@media (max-width: 720px) { .band-img { aspect-ratio: 16 / 10; } }

/* ---------- Lighter display type, as in the agency's design ---------- */
.doc-h, .feature h2, .feature .f-title, .art-head h1, .result .r-lead, .group .g-outcome, .compose .c-text h3 { font-weight: 400; }
.footer-col .fc-next { margin-top: 28px; }

/* ---------- One opening for every main inner page: title and introduction, then one wide, rounded picture ---------- */
.page-media .asset img { border-radius: var(--r-band); }
.page-media { padding-bottom: clamp(8px, 2vw, 24px); }
.page-media + .chapter:not(.tight-top) { padding-top: calc(var(--sp-chapter) * 0.45); }