/*
 * b-core.css — Direction B shell (redesign-wave4, 2026-10-04; council verdict REFINE, decisions/log.md).
 *
 * Loaded LAST on every page (after the page stylesheet), so it re-skins the shared chrome without touching
 * the page files: floating pill nav + drawer card, pill buttons, dark footer card (the box's orange seam on
 * its top edge), floating consent card, B display type, and a dark header band on the internal pages
 * (service + legal; the error pages become a dark stage). Contact keeps paper: its form must not sit on dark.
 * Markup is the canonical chrome written by scripts/b-shell.py; JS hooks unchanged (nav.js data-nav-open,
 * motion.js data-hidden, i18n.js switchers, consent.js).
 */

:root {
  --paper:      #F6F4EE;
  --card:       #FFFFFF;
  --b-stage:    #0C0E11;   /* measured edge colour of the factory frames */
  --b-on-dark:  #FFFFFF;
  --b-on-dark-2:#ECEAE4;   /* text on dark: white, never grey (>= 92 % lightness) */
  --b-r:        18px;
  --b-gut:      max(16px, 4vw);
  --b-maxw:     1180px;
  --b-hair:     rgba(9,9,11,.08);
  --b-shadow-1: 0 1px 2px rgba(9,9,11,.06), 0 10px 28px rgba(9,9,11,.07);
  --b-shadow-2: 0 2px 6px rgba(9,9,11,.06), 0 28px 70px rgba(9,9,11,.13);
  --radius:     var(--b-r);
  /* one content width + gutter for nav, sections and footer (page CSS declares 6vw / 1280px before this file) */
  --gut:        var(--b-gut);
  --maxw:       calc(var(--b-maxw) + 2 * var(--b-gut));
}

html { background: var(--paper); scroll-padding-top: 96px; }
.bg-ambient { display: none !important; }  /* M4: the wave-3 blurred drifting blobs (contact/legal/error) — anti-pattern, retired */
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ====================================================================
 * Header — floating pill (markup: the canonical .site-header)
 * ================================================================== */
.site-header {
  inset: calc(env(safe-area-inset-top, 0px) + 12px) var(--b-gut) auto var(--b-gut);
  max-width: var(--b-maxw); margin-inline: auto; height: 60px;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--b-hair); border-radius: 999px; box-shadow: var(--b-shadow-1);
}
.site-header[data-hidden="true"] { transform: translateY(calc(-100% - 24px)); }
.site-header[data-nav-open="true"] { transform: none; }
.site-header__inner { padding: 0 8px 0 18px; gap: 16px; }
.site-header__mark { width: 32px; height: 32px; }
.site-header__wordmark { font-weight: 600; font-size: 1rem; letter-spacing: .06em; }
.site-header__nav { gap: 24px; }
.site-header__nav > a { font-family: var(--body); font-weight: 500; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); min-block-size: 44px; display: inline-flex; align-items: center; }
.site-header__nav > a:hover, .site-header__nav > a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ember); }
.site-header__right { gap: 14px; }
.site-header .lang-switcher { font-family: var(--body); font-size: .85rem; letter-spacing: .02em; gap: 0; }
.site-header .lang-switcher a { color: var(--ink-2); padding: 0 8px; min-block-size: 44px; display: inline-flex; align-items: center; }
.site-header .lang-switcher a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-header .lang-switcher__separator { color: var(--muted); }
.site-header .site-header__right .btn { min-block-size: 44px; padding: 0 18px; font-size: .95rem; letter-spacing: 0; }
.site-header .site-header__right .btn .arr { display: inline; }
.site-header__toggle { border: 0; border-radius: 999px; background: var(--ink); width: 44px; height: 44px; }
.site-header__toggle-bar { background: #FFFFFF; }
/* 1024–1279: the pill holds 4 links + switcher + CTA in FR/NL only without the wordmark text */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header__wordmark { display: none; }
  .site-header__nav { gap: 18px; }
  .site-header__nav > a { font-size: .9rem; }
}
/* Drawer (< 1024): a floating card under the pill instead of a full-screen panel */
@media (max-width: 1023px) {
  .site-header { height: 56px; }
  .site-header__inner { padding: 0 6px 0 14px; gap: 10px; }
  .site-header__right { display: flex; }
  .site-header .site-header__right .lang-switcher { display: none; }
  .site-header .site-header__right .btn { min-block-size: 44px; padding: 0 14px; font-size: .88rem; }
  .site-header .site-header__right .btn .arr { display: none; }
  .site-header__nav {  /* absolute under the fixed pill: the same box in every engine (no reliance on backdrop-filter containing fixed) */
    position: absolute; inset: calc(100% + 8px) 0 auto 0;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - 96px);
    border: 1px solid var(--b-hair); border-radius: var(--b-r); background: var(--card); box-shadow: var(--b-shadow-2);
    padding: 12px 22px 22px; transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .25s var(--ease-out), opacity .2s ease, visibility .25s;
  }
  .site-header[data-nav-open="true"] .site-header__nav { transform: none; opacity: 1; visibility: visible; }
  .site-header__nav > a { font-family: var(--disp); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .site-header__nav > a:hover, .site-header__nav > a[aria-current="page"] { color: var(--ink); box-shadow: inset 3px 0 0 var(--ember); padding-left: 12px; border-bottom-color: var(--line-soft); }
  .site-header__nav-footer { margin-top: 20px; }
  .site-header__nav-footer .btn { width: 100%; justify-content: center; margin-bottom: 14px; }
}
@media (max-width: 1023px) {
  .site-header__brand { margin-right: auto; }
  .site-header__right { order: 2; }
  .site-header__toggle { order: 3; }
  .site-header .site-header__right .btn { white-space: nowrap; line-height: 1; padding-block: 0; display: inline-flex; }
  body[data-nav-open="true"]::before { content: ""; position: fixed; inset: 0; z-index: 45; background: rgba(9,9,11,.4); }
}
@media (max-width: 520px) {
  .site-header__wordmark { display: none; }
  .site-header .site-header__right .btn { padding: 0 14px; font-size: .86rem; }
}

/* ====================================================================
 * Buttons — B pills (body face, sentence case; same colours as before)
 * ================================================================== */
.btn {
  font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: 0; text-transform: none;
  border-radius: 999px; padding: 0 22px; min-block-size: 48px; gap: 10px; justify-content: center;
}
.btn .arr { font-family: var(--body); }
.btn--ember { background: var(--ember); border-color: var(--ember); color: var(--ink); }
.btn--ghost-light { background: transparent; border-color: var(--b-on-dark); color: var(--b-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--b-shadow-1); }
  .btn--ghost-light:hover { background: transparent; border-color: var(--b-on-dark); color: var(--b-on-dark); }
}
.btn:active { transform: scale(.97); }
@media (max-width: 600px) { .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.2; padding-block: 10px; } }

/* ====================================================================
 * Footer — the live footer content as a dark floating card
 * ================================================================== */
.site-footer {
  position: relative; overflow: hidden; z-index: 1;
  width: min(var(--b-maxw), calc(100% - 2 * var(--b-gut)));
  margin: 8px auto calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--b-on-dark-2); border: 0; border-radius: var(--b-r); box-shadow: var(--b-shadow-2);
  padding: clamp(28px,4vw,44px) clamp(22px,3.5vw,44px) 14px; font-size: .8rem; letter-spacing: .03em;
}
.site-footer::before {  /* the box's orange seam, once, along the top edge */
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 30%, var(--ember) 70%, transparent);
  box-shadow: 0 0 18px 1px rgba(255,107,0,.5);
}
.site-footer__inner { max-inline-size: none; padding: 0; gap: 20px 40px; }
.site-footer__brand { gap: 12px; min-block-size: 44px; }
.site-footer__mark { width: 44px; height: 44px; color: var(--b-on-dark); }
.site-footer__wordmark { font-weight: 500; font-size: 1.05rem; letter-spacing: .12em; color: var(--b-on-dark); }
.site-footer__nav { gap: 0 24px; font-size: .9rem; letter-spacing: .02em; }
.site-footer__nav a, .site-footer__utility-links a { color: var(--b-on-dark); }
/* Legal row holds two links since the "Cookie preferences" reopen link (2026-10-04): a real gap, no break inside a link
   (on the light pages they were bare inline text and ran together as one phrase). */
.site-footer__utility-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.site-footer__utility-links a { white-space: nowrap; }
.site-footer__nav a[aria-current="page"] { background-size: 100% 2px; }
.site-footer__utility { max-inline-size: none; padding: 6px 0 0; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.14); color: var(--b-on-dark-2); }
.site-footer__utility > span { text-wrap: balance; }
@media (max-width: 600px) {
  .site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; width: 100%; font-family: var(--body); font-size: .95rem; letter-spacing: 0; align-items: start; }
  .site-footer__nav a { justify-self: start; line-height: 1.25; padding-block: 10px; }
}
@media (max-width: 440px) { .site-footer__nav { grid-template-columns: 1fr; } }

/* ====================================================================
 * Consent — floating card
 * ================================================================== */
.consent-banner {
  inset: auto var(--b-gut) calc(env(safe-area-inset-bottom, 0px) + 12px) var(--b-gut);
  max-width: var(--b-maxw); margin-inline: auto;
  background: var(--card); border: 1px solid var(--b-hair); border-radius: var(--b-r); box-shadow: var(--b-shadow-2);
}
.consent-banner__inner { padding: 12px clamp(16px,2.4vw,24px); gap: 12px 24px; }
.consent-banner__kicker { display: none; }  /* "Privacy · Consent" repeats the heading; home + service pages already hid it */
.consent-banner__heading { margin: 0 0 .2rem; font-size: .95rem; }
.consent-banner__body { font-size: .82rem; line-height: 1.42; max-width: 78ch; }
.consent-banner__toggles { margin-top: 6px; }
.consent-banner__actions { flex-wrap: wrap; }
/* Explanation + toggles fold under the heading (<details>, see consent.js): open on roomy screens, compact on phones. */
.consent-banner__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6em; min-block-size: 40px; margin-block: -6px; }  /* 40 px tap target, grown into the card padding */
.consent-banner__summary::-webkit-details-marker { display: none; }
.consent-banner__summary .consent-banner__heading { margin: 0; }
/* +/− drawn as two bars (a "−" glyph fell back to a thin hyphen) */
.consent-banner__summary::after { content: ""; flex: none; width: 12px; height: 12px; color: var(--ink-2);
  background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; }
.consent-banner__summary:hover::after { color: var(--ink); }
.consent-banner__details[open] > .consent-banner__summary::after { background-size: 12px 2px, 0 0; }
.consent-banner__details[open] > .consent-banner__summary { margin-bottom: 0; }
.consent-banner__details > .consent-banner__body { margin-top: .1rem; }
.consent-banner__purpose { margin-top: .25rem; }
.consent-banner__details:not([open]) ~ .consent-banner__toggles { display: none; }  /* toggles only with the full text; the purpose line is the first layer */
[data-consent-open][hidden] { display: none !important; }  /* page stylesheets set display on footer links, which would beat [hidden] */
.consent-banner :focus-visible { outline-color: var(--ink); }  /* the autofocused first action must not read as a second ember accent */
.consent-banner__btn { border-radius: 999px; font-family: var(--body); font-weight: 600; font-size: .9rem; letter-spacing: 0; text-transform: none; padding: 0 18px; min-block-size: 44px; }  /* before the phone rules — it sat after them and cancelled their 40 px / 14 px sizing, which wrapped the FR/NL actions to two rows */
@media (max-width: 720px), (max-height: 500px) {  /* phones, and phones in landscape */
  .consent-banner__toggles { display: none; }
  .consent-banner__inner { gap: 8px; padding: 10px 14px; }
  .consent-banner__heading { font-size: .9rem; margin: 0 0 .15rem; }
  .consent-banner__summary { min-block-size: 44px; margin-block: -10px -8px; }
  .consent-banner__body { font-size: .78rem; line-height: 1.38; max-width: none; }
  .consent-banner__btn { min-block-size: 40px; font-size: .86rem; padding: 0 14px; }
}
@media (max-width: 480px) { .consent-banner__actions { width: 100%; gap: 8px; } .consent-banner__btn { flex: 1 1 auto; padding: 0 12px; } }  /* FR/NL actions on one row down to 375 px */
@media (max-width: 400px) { .consent-banner__btn { font-size: .82rem; padding: 0 10px; } }  /* "Nécessaire uniquement" needed 310 of 313 px at 375 and still wrapped */

/* ====================================================================
 * B display type on the internal pages (uppercase, bold, tight)
 * ================================================================== */
.service-hero__title, .contact-page__title, .legal-page__title, .error-page__headline,
.service-practice__title, .service-protocol__title, .service-related__title, .service-cta__title {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: -.035em; text-wrap: balance;
}
.service-hero__title, .contact-page__title, .legal-page__title, .error-page__headline { line-height: .95; letter-spacing: -.04em; }
.service-hero__title { font-size: clamp(1.9rem,4.4vw,4.6rem); }
.contact-page__title, .legal-page__title { font-size: clamp(2.6rem,6vw,5rem); }
.service-practice__title, .service-related__title { font-size: clamp(1.9rem,3.6vw,3rem); line-height: 1; }
.service-protocol__title, .service-cta__title { font-size: clamp(2.1rem,4.8vw,4rem); line-height: 1; }
:lang(fr) .service-hero__title, :lang(nl) .service-hero__title { font-size: clamp(1.8rem,3.9vw,4rem); }
/* Long Dutch compounds ("WORKFLOWARCHITECTUUR", 21 letters): size the practice title from its own column */
.service-practice__grid > * { container-type: inline-size; min-width: 0; }
:lang(nl) .service-practice__title { font-size: min(clamp(1.9rem,3.6vw,3rem), 6.6cqi); }
/* Safety net: a word that still cannot fit breaks instead of widening the page */
.service-hero__title, .contact-page__title, .legal-page__title, .error-page__headline,
.service-practice__title, .service-protocol__title, .service-related__title, .service-cta__title { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  :lang(fr) .service-protocol__title, :lang(nl) .service-protocol__title,
  :lang(fr) .service-cta__title, :lang(nl) .service-cta__title,
  :lang(fr) .service-related__title, :lang(nl) .service-related__title { font-size: 6.6vw; }
}
@media (max-width: 600px) {
  .service-hero__title { font-size: 8.2vw; }
  :lang(fr) .service-hero__title, :lang(nl) .service-hero__title { font-size: 7.2vw; }
}

.feature__tag { border-radius: 999px; padding: 5px 11px; }
.feature p { font-size: 1.125rem; margin-bottom: 1.6rem; }
.card p { font-size: 1.02rem; }
/* Cards: one radius and one shadow family across the internal pages */
.service-practice__card, .protocol-step, .service-proof__grid, .related-card, .feature, .card,
.legal-identity--card, .diagnostic-card, .service-faq__list > * { border-radius: var(--b-r); }
.protocol-step, .related-card, .card { box-shadow: var(--b-shadow-1); border: 1px solid var(--b-hair); }
.service-practice__card, .service-proof__grid, .feature { box-shadow: var(--b-shadow-2); }

/* ====================================================================
 * Dark header band — service pages (15) + legal (3)
 * Full-bleed from the top (the pill floats over it); the closed factory box sits as a feathered accent on wide
 * screens; the orange seam closes the band. The H1 stays the LCP element (the accent is a CSS background, small).
 * ================================================================== */
.service-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--b-stage); color: var(--b-on-dark);
  padding-top: clamp(132px,19vh,200px); padding-bottom: clamp(64px,10vh,112px);
}
.service-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent 4%, var(--ember) 35%, var(--ember) 65%, transparent 96%);
  box-shadow: 0 0 22px 2px rgba(255,107,0,.45);
}
@media (min-width: 1024px) {
  .service-hero::before, .legal-page__header::before {
    content: ""; position: absolute; z-index: -1; top: 50%; right: max(0px, calc(50% - var(--b-maxw) / 2 - 40px));
    width: min(46vw, 640px); aspect-ratio: 1; transform: translateY(-46%);
    background: url("/assets/reveal/e6/d/001.webp") center / contain no-repeat;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
    opacity: .9; pointer-events: none;
  }
  .service-hero__frame { max-width: min(60ch, 62%); }
}
/* scoped to the band: lower sections (offer, bio) reuse .service-hero__sub on paper */
.service-hero .service-hero__eyebrow { color: var(--b-on-dark-2); }
.service-hero .service-hero__title { color: var(--b-on-dark); }
.service-hero .service-hero__sub { color: var(--b-on-dark-2); }
.service-hero .service-hero__sub strong { color: var(--b-on-dark); }
.service-hero .btn { background: var(--ember); border-color: var(--ember); color: var(--ink); }
.service-hero ::selection { background: var(--ember); color: var(--ink); }
.service-hero a:not(.btn) { color: var(--b-on-dark); }

/* FR/NL AI-implementation pages put the 30-minute offer INSIDE the dark CTA panel with paper-coloured classes:
   ink on ink, invisible in production before this wave (pre-existing; found by the 2026-10-04 contrast probe). */
.service-cta__grid .service-related__title, .service-cta__grid .service-hero__sub, .service-cta__grid .service-hero__sub strong { color: var(--b-on-dark); }
.service-cta__grid .service-hero__sub { color: var(--b-on-dark-2); }

/* Legal: the header becomes the band (full-bleed background from a contained block) */
.page-main:has(.legal-page) { padding-block-start: 0; }
.legal-page { padding-top: 0; }
.legal-page__header {  /* full-bleed: as wide as the viewport, content aligned with the legal column */
  position: relative; isolation: isolate; overflow: hidden; max-width: none; margin-bottom: clamp(40px,7vh,72px);
  margin-inline: calc(50% - 50vw); padding: clamp(132px,19vh,200px) calc(50vw - 50%) clamp(48px,8vh,88px);
  background: var(--b-stage); color: var(--b-on-dark);
}
.legal-page__header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent 4%, var(--ember) 35%, var(--ember) 65%, transparent 96%);
  box-shadow: 0 0 22px 2px rgba(255,107,0,.45);
}
.legal-page__header > * { max-width: 60ch; }
@media (min-width: 1024px) { .legal-page__header > * { max-width: min(60ch, 58%); } }

.legal-page__title, .legal-page__lede, .legal-page__meta, .legal-page__meta .mono-xs { color: var(--b-on-dark); }
.legal-page__lede { color: var(--b-on-dark-2); }
.legal-page__header ::selection { background: var(--ember); color: var(--ink); }
@media (max-width: 600px) {  /* after the band base rules, so it wins */
  .service-hero, .legal-page__header { padding-top: 112px; }
  .legal-page__toc-label { flex-basis: 100%; margin-bottom: .2rem; }
}

/* Error pages (7): the whole frame is the dark stage — lost inside the closed box */
.error-page { background: var(--b-stage); color: var(--b-on-dark); }
.error-page__glyph { color: var(--b-on-dark); }
.error-page__headline { color: var(--b-on-dark); }
.error-page__body { color: var(--b-on-dark-2); }
.error-page__code { color: var(--ember); }
.error-page .btn { background: var(--ember); border-color: var(--ember); color: var(--ink); }
.error-page .btn--ghost { background: transparent; border-color: var(--b-on-dark); color: var(--b-on-dark); }
.error-page ::selection { background: var(--ember); color: var(--ink); }
.error-page + .site-footer, .error-page ~ .site-footer { margin-top: 24px; }
@media (min-width: 1024px) {
  .error-page__glyph { max-width: 340px; margin-bottom: 20px; }
  .error-page__headline { font-size: clamp(2.2rem,4vw,3.6rem); }
}

/* Contact keeps paper (the form must not sit on dark) */
.page-main:has(.contact-page) { padding-block-start: 0; }
.contact-page { padding-top: clamp(124px,18vh,188px); }
.contact-page__eyebrow { color: var(--ink); }
/* M5: no micro type — labels people read to fill the form are at least .8rem */
.contact-page__meta dt, .diagnostic-card__eyebrow, .legal-page__toc-label, .legal-imprint-block__meta dt { font-size: .78rem; }
.contact-form__field label { font-size: .8rem; }
.contact-page__meta dt, .legal-imprint-block__meta dt { color: var(--ink-2); }

/* ====================================================================
 * Reduced motion + print
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__nav, .btn { transition: none !important; }
}
@media print {
  .site-header, .consent-banner { display: none !important; }
  .site-footer, .service-hero, .legal-page__header, .error-page { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .service-hero::before, .service-hero::after, .site-footer::before, .legal-page__header::after { display: none !important; }
  .service-hero *, .legal-page__header *, .error-page *, .site-footer * { color: #000 !important; }
}