/* v5 — the v3 journey with v4's copy, dressed as a consultancy.
   Loads after /v2/v2.css and /v4/v4.css and only changes the voice of the page:
   - headlines in a serif (Newsreader, chosen by Rogier 2026-09-28) instead of expanded Archivo;
   - labels in tracked Archivo small caps instead of Martian Mono;
   - a deeper, calmer accent blue;
   - the middle stage is light, so its module tags are light too. */

@font-face {
  font-family: "Newsreader";
  src: url("/v5/fonts/newsreader-normal-300-600.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/v5/fonts/newsreader-italic-300-600.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  /* Every label that used the monospace now uses the text face, tracked. */
  --f-mono: var(--f-text);
  --ultra: #2B3CC8;
  --ultra-lite: #8A96FF;
}

/* ---------- Labels ---------- */
.mono {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
}
.jtag b, .rail__bar span { letter-spacing: .1em; font-weight: 600; }

/* ---------- Headlines ---------- */
.display {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  line-height: 1.04;
}
.panel__h1 { font-size: clamp(44px, 5.6vw, 88px); line-height: 1.02; }
.panel__h1 em, .panel__h2 em { font-style: italic; font-weight: 400; color: var(--ultra); }
.panel__h2 { letter-spacing: -.01em; }
.h2 { letter-spacing: -.012em; }

/* Headings that used the expanded width without the .display class */
.menu__links a,
.svc__title,
.case__title,
.principles h3,
.step h3,
.recap__title,
.questions b,
.metrics b,
.services b {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -.008em;
}
.case__title { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; }
.questions b { font-size: 19px; }
.metrics b { font-size: 22px; }
.step h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.15; }
.principles h3 { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; }

/* The wordmark stays a sans, at normal width, closer to the logo. */
.brand__name { font-stretch: 100%; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.tblock__head dd { font-stretch: 100%; }

/* ---------- Middle stage: service modules on a light stage ---------- */
.jtag--mod { background: rgba(246, 248, 247, .94); border-color: var(--line); }
.jtag--mod b { color: var(--ink); }
.jtag--mod::before { background: var(--line-strong); }
.jtag--mod::after { background: var(--ultra); box-shadow: none; }

/* Rogier (2026-09-28): the middle stage keeps the same layout as the others, text left and the object
   right, so the object never jumps sides while scrolling. Overrides v4's right-hand judgement panel. */
html.js-journey .panel--judgement { padding-left: var(--pad-x, var(--gutter)); }

@media (max-width: 760px) {
  .panel__h1 { font-size: clamp(38px, 11vw, 50px); }
  .questions b { font-size: 16.5px; }
  .metrics b { font-size: 17px; }
}

/* ---------- Align the journey with the header container on wide screens ----------
   v3/v4 padded the panels from the viewport edge, so above 1440px the hero text sat far left of the logo. */
@media (min-width: 761px) {
  .journey { --pad-x: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
  html.js-journey .panel { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .exhibit--left { left: var(--pad-x); }
  .exhibit--right { right: var(--pad-x); }
}

/* ---------- Bedrock stage: the scan maps what the business already has ---------- */
.jscan { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; padding-bottom: 8px; }
.jscan b { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--ultra); color: #fff; border-radius: 2px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.jscan b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: jscan-blink 1.1s steps(2, start) infinite; }
@keyframes jscan-blink { to { visibility: hidden; } }
.jtag__ok { display: none; margin-left: 2px; padding: 2px 7px; border-radius: 999px; background: rgba(52, 69, 240, .1); color: var(--ultra); font-family: var(--f-mono); font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.jtag.is-mapped .jtag__ok { display: inline-block; }
.jtag.is-mapped { border-color: rgba(52, 69, 240, .45); }
.jtag.is-mapped::after { box-shadow: 0 0 0 4px rgba(52, 69, 240, .18); }

/* Every stage now shares the page background (Rogier, 2026-09-28). */
@media (max-width: 760px) {
  html.js-journey .panel--bedrock::before,
  html.js-journey .panel--leverage::before { background: linear-gradient(to bottom, rgba(246, 248, 247, 0), rgba(246, 248, 247, .97) 20%); }
}

/* Hero: primary button and "Talk to us" always on one line on desktop (Rogier, 2026-09-28). */
@media (min-width: 761px) {
  .panel--hero .hero__ctas { flex-wrap: nowrap; }
  .panel--hero .hero__ctas > * { flex: none; white-space: nowrap; }
}

/* Hero headline on two lines (Rogier, 2026-09-28): "We advise on AI, build it, / and make it work." */
@media (min-width: 761px) {
  .panel--hero .panel__h1 { font-size: clamp(46px, 4vw, 64px); line-height: 1.06; }
  .panel--hero > .panel__h1 { max-width: none; }
}

/* Scan states per layer: nothing → Analyzing → Mapped, bottom (People) to top (Systems). */
.jtag.is-analyzing .jtag__ok { display: inline-flex; align-items: center; gap: 6px; background: var(--ultra); color: #fff; }
.jtag.is-analyzing .jtag__ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: jscan-blink .8s steps(2, start) infinite; }
.jtag.is-analyzing { border-color: var(--ultra); box-shadow: 0 6px 18px -10px rgba(43, 60, 200, .55); }
.jtag.is-analyzing::after { box-shadow: 0 0 0 5px rgba(52, 69, 240, .22); }

/* Build stage: same heading and intro size as the other stages (Rogier, 2026-09-28). Overrides v4's smaller judgement type. */
.panel--judgement .panel__h2 { font-size: clamp(36px, 4.2vw, 64px); max-width: 15ch; }
.panel--judgement .lede { font-size: clamp(18px, 1.4vw, 21px); max-width: 42ch; margin-top: 24px; }
@media (max-width: 760px) {
  .panel--judgement .panel__h2 { font-size: clamp(30px, 8.6vw, 40px); }
}

/* Workshop alternative, moved from the build stage to the free-session section (Rogier, 2026-09-28). */
.session__alt { margin-top: 18px; color: var(--slate); font-size: 15px; }
.session__alt .link { color: var(--ink); }

/* ---------- Client stories: logos on the right, the active one opened; its details on the left (Rogier, 2026-09-28) ---------- */
.work__feature { grid-column: 1 / span 7; position: relative; }
.work__feature .feature { grid-column: auto; height: 100%; }
.work__feature .feature[hidden] { display: none; }
.feature__logo--light { filter: brightness(0) invert(1); }
.work__list { justify-content: flex-start; }
.work__list .case { flex: none; }
.case__head {
  appearance: none; width: 100%; margin: 0; padding: 24px 0; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr 18px; align-items: center; gap: 16px;
  color: inherit; font: inherit; text-align: left;
}
.case__head .case__logo { height: var(--h, 18px); width: auto; transition: opacity .3s var(--ease); }
.case[data-case="resleeve"] .case__logo { filter: brightness(0); }
.case:not(.is-open) .case__logo { opacity: .7; }
.case__head:hover .case__logo { opacity: 1; }
.case__head .case__sector { text-align: right; }
.case__chev { width: 9px; height: 9px; justify-self: end; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); opacity: .55; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.case.is-open .case__chev { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; }
.case__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.case.is-open .case__body { grid-template-rows: 1fr; }
.case__inner { min-height: 0; overflow: hidden; }
.case__inner > :first-child { margin-top: 0; }
.case.is-open .case__inner { padding-bottom: 28px; }
.case__body .case__title { margin-top: 8px; }
.case__more { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .case__body { transition: none; } }
@media (max-width: 1100px) {
  .work__feature { grid-column: 1 / -1; }
}

/* What we believe: before the client stories, on the team photo from the v1 homepage (Rogier, 2026-09-28).
   The photo sits right; a navy gradient keeps the manifesto readable on the left. */
.about--photo { position: relative; isolation: isolate; overflow: hidden; }
.about__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.about--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 30, 40, .96) 0%, rgba(11, 30, 40, .9) 38%, rgba(11, 30, 40, .55) 70%, rgba(11, 30, 40, .35) 100%),
    linear-gradient(0deg, rgba(11, 30, 40, .92) 0%, rgba(11, 30, 40, 0) 45%);
}
@media (max-width: 760px) {
  .about--photo::before { background: rgba(11, 30, 40, .86); }
}

/* Client card v2 (Rogier, 2026-09-28): the list shows only the question; the card holds the description,
   role, status and the link. No period and no timeline. */
.work__feature .feature__link { min-height: 460px; }
.feature__desc { margin-top: auto; padding-top: 48px; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; letter-spacing: -.012em; max-width: 22ch; text-wrap: pretty; }
.feature__facts { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.feature__facts div { display: flex; flex-direction: column; gap: 4px; }
.feature__facts dt { color: var(--on-dark-muted); }
.feature__facts dd { color: var(--on-dark); }
.case.is-open .case__inner { padding-bottom: 26px; }

/* Recap: outcome-led opportunities need a wider name column (Rogier, 2026-09-28). */
.recap__rank li { grid-template-columns: 18px minmax(0, 1fr) 26%; }
.recap__rank span { white-space: nowrap; }
@media (max-width: 760px) {
  .recap__rank li { grid-template-columns: 18px minmax(0, 1fr) 40px; }
  .recap__rank span { white-space: normal; }
}

/* FAQ: no full-width divider above the section (Rogier, 2026-09-28). */
.faq__grid { border-top: 0; }

/* Dutch hero: the first line is longer than in English, so the headline is a little smaller. */
@media (min-width: 761px) {
  html[lang="nl"] .panel--hero .panel__h1 { font-size: clamp(40px, 3.5vw, 52px); }
}

/* Brand name in the navbar: the footer wordmark's serif (Rogier, 2026-09-28). */
.brand__name { font-family: var(--f-display); font-weight: 500; font-size: 19px; letter-spacing: -.012em; }
/* Footer wordmark: centre the mark on the capital letters, not on the line box (which includes the descender of the g). */
.ftr__word svg { transform: translateY(-.15em); }

/* How we work: a photo per step (Rogier, 2026-09-28). */
.step__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 22px; border-radius: 4px; background: var(--core); }
.step h3 { margin-top: 22px; }

/* ---------- Mobile journey (Rogier, 2026-09-28) ----------
   The stage fills the large viewport (browser bars collapsed), so no page background shows below it.
   Content sits lower; the hero keeps room above Safari's bottom bar, which is visible at the top of the page. */
@media (max-width: 760px) {
  html.js-journey .journey__stage { height: 100vh; height: 100lvh; }
  .journey__canvas { background: #F7FAF9; }
  html.js-journey .panel { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  html.js-journey .panel--hero { padding-bottom: calc(100lvh - 100svh + 32px + env(safe-area-inset-bottom)); }
  /* Keep the longer service and performance copy above the floating contact button. */
  html.js-journey .has-contact-dock .panel--judgement,
  html.js-journey .has-contact-dock .panel--leverage { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .jscan b { font-size: 9.5px; padding: 5px 8px; }
}

/* Mobile client stories: each case opens with its own blue card under it (work.js moves the card). */
@media (max-width: 1100px) {
  .work__feature:not(:has(.feature)) { display: none; }
  .case__inner .feature { margin-top: 20px; }
  .case__inner .feature__link { min-height: 0; }
  .case__inner .feature__desc { padding-top: 32px; font-size: 24px; }
}
@media (max-width: 760px) {
  /* A shorter fade behind the text, so it no longer washes out the lower part of the object. */
  html.js-journey .panel::before { height: 50%; }
  html.js-journey .panel--bedrock::before,
  html.js-journey .panel--leverage::before,
  html.js-journey .panel--judgement::before,
  html.js-journey .panel--hero::before { background: linear-gradient(to bottom, rgba(247, 250, 249, 0), rgba(247, 250, 249, .96) 28%); }
}
@media (max-width: 1100px) { .case__inner .feature__top { display: none; } .case__inner .feature__desc { padding-top: 0; } }
/* Optional analytics consent: shared across the public EN/NL site. */
.consent[hidden]{display:none}
.consent{position:fixed;inset:auto 24px 24px;z-index:1100;width:max-content;max-width:calc(100vw - 48px);margin:auto;padding:16px;background:var(--chalk-hi);color:var(--ink);border:1px solid var(--line-strong);border-radius:4px;box-shadow:0 8px 36px #0b1e2826;font:15px/1.5 Archivo,sans-serif}
.consent p{margin:0;white-space:nowrap;color:var(--slate)}
.consent__actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.consent__actions button{background:var(--chalk);color:var(--ink);border:1px solid var(--line-strong);border-radius:3px;min-height:44px;padding:10px 16px;font:inherit;cursor:pointer}
.consent__actions button:hover{border-color:var(--ultra)}
.consent__actions [data-choice="accept"]{background:var(--ultra);border-color:var(--ultra);color:#fff}
.consent__actions [data-choice="accept"]:hover{background:#2534af;border-color:#2534af}
.consent__actions button:focus-visible,.consent-settings:focus-visible{outline:2px solid var(--ultra);outline-offset:3px}
.consent-settings{padding:0;background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:800px){.consent{inset:auto 12px 12px;width:calc(100% - 24px);max-width:none;padding:14px;max-height:85vh;overflow:auto}.consent p{white-space:normal}.consent__actions{gap:10px}.consent__actions button{min-width:0;padding:9px 11px;font-size:14px;line-height:1.25}}

/* Direct contact: the same blue, typography and quiet edges as the v5 site. */
.has-contact-dock .consent{max-height:calc(100dvh - 120px);overflow:auto}
.contact-dock{position:fixed;right:24px;bottom:calc(var(--contact-bottom,24px) + env(safe-area-inset-bottom,0px));z-index:100;font:15px/1.45 Archivo,sans-serif;color:var(--ink)}
.contact-dock svg{width:21px;height:21px;flex:none}
.contact-toggle{display:flex;align-items:center;gap:11px;min-height:54px;padding:13px 18px;border:1px solid var(--ultra);border-radius:4px;background:var(--ultra);color:#fff;font:600 14px/1.2 Archivo,sans-serif;box-shadow:0 8px 24px #0b1e2833;cursor:pointer;transition:background .15s}
.contact-toggle:hover{background:#2534af}
.contact-toggle svg:last-child{width:17px;height:17px;margin-left:5px;transition:transform .15s}
.contact-dock.is-open .contact-toggle svg:last-child{transform:rotate(180deg)}
.contact-panel[hidden]{display:none}
.contact-panel{position:absolute;z-index:1;right:0;bottom:calc(100% + 12px);width:min(324px,calc(100vw - 32px));max-height:min(440px,var(--contact-panel-room,440px));overflow:auto;padding:22px;background:var(--chalk-hi);border:1px solid var(--line-strong);border-radius:4px;box-shadow:0 14px 44px #0b1e282b;animation:contact-open .16s ease-out}
.contact-panel__header{display:flex;align-items:flex-start;gap:8px;margin-bottom:20px}
.contact-panel__header h2{flex:1;margin:0;font:400 25px/1.12 Newsreader,serif;letter-spacing:-.025em}
.contact-panel__close{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-9px -9px 0 0;background:none;border:0;border-radius:3px;color:var(--slate);cursor:pointer}
.contact-panel__close:hover{background:var(--chalk);color:var(--ink)}
.contact-panel__person{display:flex;align-items:center;gap:12px;padding-bottom:19px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.contact-panel__person img{width:44px;height:44px;object-fit:cover;border-radius:50%;background:var(--chalk)}
.contact-panel__person p{margin:0;display:grid;gap:2px}
.contact-panel__person strong{font-size:14px;font-weight:600}
.contact-panel__person span{font-size:12px;color:var(--slate)}
.contact-panel__choices{display:grid;gap:10px}
.contact-choice{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 13px;color:var(--ink);background:var(--chalk-hi);border:1px solid var(--line-strong);border-radius:3px;text-decoration:none;transition:border-color .15s,background .15s}
.contact-choice:hover{border-color:var(--ultra);background:#fff}
.contact-choice__icon{display:grid;place-items:center;color:var(--ultra)}
.contact-choice>span:nth-child(2){flex:1;display:grid;gap:3px}
.contact-choice strong{font-size:14px;font-weight:600}
.contact-choice small{font-size:12px;color:var(--slate)}
.contact-choice>svg{width:16px;height:16px;color:var(--slate)}
.contact-toggle:focus-visible,.contact-panel button:focus-visible,.contact-choice:focus-visible{outline:2px solid var(--ultra);outline-offset:4px}
.contact-toggle:focus-visible{outline-color:var(--ink)}
.contact-dock.is-open.contact-dock--compact{z-index:1200}
.contact-dock--compact .contact-panel{position:fixed;top:16px;right:16px;bottom:16px;max-height:none}
.contact-dock.is-open.contact-dock--compact .contact-toggle{visibility:hidden}
@keyframes contact-open{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:767px){
  .contact-dock{right:16px}
  .contact-panel{padding:20px}
  .contact-toggle{min-height:52px}
  .has-contact-dock .mcta{left:16px;right:146px;bottom:calc(var(--mobile-actions-bottom,16px) + env(safe-area-inset-bottom,0px));min-height:52px;padding:0 14px;gap:10px;font-size:14px;line-height:1.2;visibility:hidden;pointer-events:none}
  .has-contact-dock .mcta.is-on{visibility:visible;pointer-events:auto}
  .has-contact-dock .mcta>span{white-space:nowrap}
  .contact-dock--paired .contact-toggle{width:120px;justify-content:center;gap:8px;padding-inline:12px}
  .contact-dock--paired .contact-toggle svg:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.contact-panel{animation:none}.contact-toggle,.contact-toggle svg,.contact-choice{transition:none}}