/* Wayve Innovation — v1.1
   Structure: section > wrap > card.
   Horizontal whitespace = card/wrap padding. Vertical whitespace = section padding. */

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --white: #ffffff;
  --dark-grey: #222222;
  --dark-grey-medium: rgba(34, 34, 34, 0.48);
  --dark-grey-light: rgba(34, 34, 34, 0.16);
  --light-grey: #f2f2f7;
  --pink: #e70d79;
  --result-bg: #e9f7fe;
  --petrol: #006b95;
  --wayve-gradient: linear-gradient(-73.65deg, #fd0f8d 16.823%, #f78511 100.39%);
  --band-gradient: linear-gradient(
    155.7deg,
    #e70d79 0%,
    #ee286b 19.5%,
    #f65f58 48.36%,
    #fc8646 78%
  );
  /* Same band colours, horizontal — for buttons + short headings */
  --band-gradient-text: linear-gradient(
    90deg,
    #e70d79 0%,
    #ee286b 28%,
    #f65f58 58%,
    #fc8646 100%
  );

  /* Type */
  --font-headings: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;
  --fw-extra-light: 200;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extra-bold: 800;

  --fs-body-sm: 13px;
  --lh-body-sm: 20px;
  --fs-body-md: 16px;
  --lh-body-md: 24px;
  --fs-body-lg: 20px;
  --lh-body-lg: 28px;
  --fs-heading-xs: 16px;
  --lh-heading-xs: 20px;
  --fs-heading-sm: 24px;
  --lh-heading-sm: 32px;
  --fs-heading-md: 32px;
  --lh-heading-md: 40px;
  --fs-heading-lg: 40px;
  --lh-heading-lg: 44px;
  --fs-heading-2xl: 54px;
  --lh-heading-2xl: 58px;
  --fs-heading-4xl: 80px;
  --lh-heading-4xl: 76px;

  --ls-default: 0;
  --ls-loose: 0.2px;
  --ls-extra-loose: 0.4px;
  --ls-super-wide: 2px;

  /* Layout */
  --wrap: 1248px;
  --wrap-wide: 1560px;
  --wrap-narrow: 832px;
  --wrap-half: 624px;
  --wrap-col: 312px;
  --pad: 32px; /* wrap/section outer gutter (0 on mobile) */
  --card-pad: 32px; /* card inset — 24px on mobile */
  --header-h: 116px; /* pad + card-pad + button */
  --services-title-gradient: linear-gradient(
    90deg,
    #e81077 0%,
    #f24461 35.577%,
    #fea344 100%
  );

  --section-tight: 48px;
  --section-extra-loose: 96px;
  --section-wide: 192px;
  --section-gap: 64px;
  --content-gap: 48px;
  --card-gap: 16px;
  --card-gap-lg: 32px;
  --radius-card: 8px;
  --radius-button: 32px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;

  /* A glyph clip on the 134-wide dark wordmark */
  --mark-clip: inset(0 46.3% 0 28.8%);
  --dot-gradient: linear-gradient(
    92.47deg,
    #e81077 43.4%,
    #f24461 53.3%,
    #fea344 71.3%
  );

  --vvh: 100dvh; /* intro.js may overwrite */
}

main { flex: 1 0 auto; width: 100%; }

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* anchors use JS ease-out */
  scroll-padding-top: var(--header-h);
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--white);
  color: var(--dark-grey);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headings);
  font-weight: var(--fw-extra-bold);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-heading-2xl);
  line-height: var(--lh-heading-2xl);
}
h2 {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
}
h3 {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
}
h4 {
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

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

/* Animated underline links */
.link,
.site-nav a,
.mobile-menu-nav a,
.footer-link,
.case-back,
.legal-prose a,
.contact-consent a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition:
    background-size var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.link:hover,
.link:focus-visible,
.site-nav a:hover,
.site-nav a:focus-visible,
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible,
.footer-link:hover,
.footer-link:focus-visible,
.case-back:hover,
.case-back:focus-visible,
.legal-prose a:hover,
.contact-consent a:hover {
  background-size: 100% 1px;
}

.legal-prose a,
.contact-consent a {
  color: var(--pink);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--wide {
  max-width: calc(var(--wrap-wide) + var(--pad) * 2);
}
.wrap--narrow,
.wrap-narrow {
  max-width: calc(var(--wrap-narrow) + var(--pad) * 2);
}

.page-pad {
  padding-inline: var(--pad);
}

.section {
  padding-block: var(--section-extra-loose);
}
.section--tight {
  padding-block: var(--section-tight);
}
.section--wide {
  padding-block: var(--section-wide);
}

.header-spacer {
  display: none;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
  color: var(--dark-grey);
}

.section-heading {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: var(--fw-extra-bold);
}

.title-gradient {
  background: var(--wayve-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--dark-grey-medium);
}

.watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.06;
  z-index: 0;
}

/* ---------- Buttons: dissolve to gradient ---------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  padding: 16px 32px;
  border: 1px solid var(--dark-grey);
  border-radius: var(--radius-button);
  background: var(--dark-grey);
  color: var(--white);
  font-family: var(--font-headings);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 280ms ease,
    border-color 280ms ease,
    transform var(--dur) var(--ease);
}
.button > *:not(.button-fill) {
  position: relative;
  z-index: 1;
}
.button-fill {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--band-gradient-text);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.button:hover .button-fill,
.button:focus-visible .button-fill,
.button.is-pressed .button-fill {
  opacity: 1;
}
.button:hover,
.button:focus-visible,
.button.is-pressed {
  border-color: transparent;
  color: var(--white);
}
.button img,
.button svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition:
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}
.button:hover img,
.button:hover svg {
  transform: translateX(3px);
}
.button:active {
  transform: scale(0.98);
}

/* Header CTA: same dissolve as footer ghost, but gradient fill + gradient border */
.header-cta .button {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--dark-grey), var(--dark-grey)) padding-box,
    linear-gradient(var(--dark-grey), var(--dark-grey)) border-box;
  background-clip: padding-box, border-box;
}
.header-cta .button .button-fill {
  background: var(--band-gradient-text);
}
.header-cta .button:hover,
.header-cta .button:focus-visible,
.header-cta .button.is-pressed {
  color: var(--white);
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    var(--band-gradient-text) border-box;
  background-clip: padding-box, border-box;
}

.button--ghost {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.button--ghost .button-fill {
  background: var(--white);
}
.button--ghost:hover,
.button--ghost:focus-visible,
.button--ghost.is-pressed {
  border-color: transparent;
  color: var(--dark-grey);
}
.button--ghost:hover img,
.button--ghost:hover svg {
  filter: brightness(0);
}

/* ---------- Boot / loader ---------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  height: var(--vvh);
  min-height: 100dvh;
  background: var(--white);
  transition: opacity 0.35s var(--ease);
}
html.intro-seen .boot {
  display: none;
}
.boot.is-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
}

/* Splash choreography: wordmark → panel wipe → trapezoid wipe to A */
.boot-stage {
  /* End frame ≤240px; keep Figma 512 proportions (wordmark 400) */
  --boot-panel: min(240px, 72vw);
  --boot-wordmark: calc(var(--boot-panel) * 400 / 512);
  --boot-a-x: 41.35%;
  --boot-a-origin: var(--boot-a-x) 50%;
  /* Trapezoid wipe (A hull + pad) */
  --boot-a-clip-open: polygon(15% -90%, 75% -90%, 210% 170%, -110% 170%);
  --boot-a-clip: polygon(37.3% -8%, 45.5% -8%, 55.5% 106%, 27.3% 106%);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--boot-panel);
  height: var(--boot-panel);
  transform: scale(1.12);
  transition:
    transform 0.55s var(--ease),
    opacity 0.55s var(--ease),
    filter 0.55s var(--ease);
}
.boot.is-zoom .boot-stage {
  transform: scale(1);
}
.boot.is-out .boot-stage {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(-56px) scale(1);
}
.boot-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-card);
  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(255, 179, 68, 0.55) 0%,
      rgba(255, 163, 68, 0) 55%
    ),
    linear-gradient(
      135deg,
      #e70d79 0%,
      #ee286b 19.5%,
      #f65f58 48.36%,
      #fc8646 78%
    );
  clip-path: inset(50% round var(--radius-card));
  transition: clip-path 0.65s var(--ease);
}
.boot.is-panel .boot-panel {
  clip-path: inset(0 round var(--radius-card));
}
.boot-logo {
  position: relative;
  z-index: 1;
  width: 96px;
  height: auto;
  aspect-ratio: 400 / 96;
  transition: width 0.65s var(--ease);
}
.boot.is-panel .boot-logo,
.boot.is-mark .boot-logo {
  width: var(--boot-wordmark);
}
.boot-wordmark {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: var(--boot-a-clip-open);
  transform: translateX(0) scale(1);
  transform-origin: var(--boot-a-origin);
  /* Wipe must finish well ahead of the zoom or it reads as lagging */
  transition:
    opacity 0.45s var(--ease),
    clip-path 0.2s cubic-bezier(0.4, 0, 0.1, 1),
    transform 0.7s var(--ease);
}
.boot-wordmark--dark {
  opacity: 1;
}
.boot-wordmark--white {
  opacity: 0;
}
.boot.is-panel .boot-wordmark--dark {
  opacity: 0;
}
.boot.is-panel .boot-wordmark--white,
.boot.is-mark .boot-wordmark--white {
  opacity: 1;
}
.boot.is-mark .boot-wordmark {
  /* Trapezoid wipe → A (wipe faster than the zoom) */
  clip-path: var(--boot-a-clip);
  transform: translateX(calc(var(--boot-wordmark) * (0.5 - 0.4135)))
    scale(calc(300 / 96));
}

/* Legacy case-page splash (A + loader) */
.boot-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap-lg);
}
.boot-stack .boot-logo {
  position: static;
  z-index: auto;
  width: 96px;
  height: auto;
  aspect-ratio: auto;
  clip-path: none;
  transform: none;
}
.boot-stack .boot-logo img,
.boot-stack > .boot-logo {
  display: block;
  width: 96px;
  height: auto;
}
.loading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96px;
  height: 40px;
}
.obj {
  width: 3px;
  height: 0;
  border-radius: 10px;
  background: var(--wayve-gradient);
  background-attachment: fixed;
  animation: loading-bar 1.2s infinite var(--ease);
}
.obj:nth-child(2) { animation-delay: 0.15s; }
.obj:nth-child(3) { animation-delay: 0.3s; }
.obj:nth-child(4) { animation-delay: 0.45s; }
.obj:nth-child(5) { animation-delay: 0.6s; }
.obj:nth-child(6) { animation-delay: 0.75s; }
.obj:nth-child(7) { animation-delay: 0.9s; }
.obj:nth-child(8) { animation-delay: 1.05s; }

@keyframes loading-bar {
  0%,
  100% { height: 0; }
  50% { height: 100%; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: auto;
  padding-block: 32px;
  /* Clear at top so the big A shows through; blur ramps on scroll (intro.js) */
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0) saturate(1.2);
  backdrop-filter: blur(0) saturate(1.2);
}
.wrap.header-inner,
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 0;
  /* Match .section-head card inset; beats .wrap padding */
  padding-inline: calc(var(--pad) + var(--card-pad));
}

.logo {
  display: block;
  line-height: 0;
}
.logo-wordmark {
  display: block;
  width: auto;
  height: 32px;
  /* Header starts as A, expands to full Wayve */
  clip-path: var(--mark-clip);
  transition: clip-path 0.8s var(--ease);
}
.logo.is-expanded .logo-wordmark,
.site-header.is-ready .logo-wordmark {
  clip-path: inset(0);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 48px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
}

.header-cta {
  display: flex;
  align-items: center;
}

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--dark-grey);
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s var(--ease);
}
.menu-toggle-bar:nth-child(1) { top: 14px; }
.menu-toggle-bar:nth-child(2) { top: 21px; }
.menu-toggle-bar:nth-child(3) { top: 28px; }
.menu-toggle.is-open .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(56px);
  transition:
    opacity 0.55s var(--ease),
    filter 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.reveal.is-shown {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
/* Header nav: shorter fade-up travel */
.site-nav .reveal,
.header-cta.reveal,
.menu-toggle.reveal {
  filter: blur(8px);
  transform: translateY(12px);
  transition:
    opacity 0.4s var(--ease),
    filter 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.site-nav .reveal.is-shown,
.header-cta.reveal.is-shown,
.menu-toggle.reveal.is-shown {
  filter: blur(0);
  transform: none;
}
.logo.reveal {
  filter: blur(8px);
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease),
    filter 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.logo.reveal.is-shown {
  filter: blur(0);
  transform: none;
}

/* ---------- Fixed background A (parallax with hero) ---------- */
.page-bg-a {
  position: fixed;
  top: -560px;
  left: 50%;
  z-index: -1;
  width: min(1872px, 140vw);
  height: auto;
  /* Same rise as .reveal; -50% X centering. Y parallax is set in JS (no
     transform transition — that eases every scroll tick and jitters on iOS). */
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(-50%, 56px, 0);
  pointer-events: none;
  user-select: none;
  will-change: transform;
  transition:
    opacity 0.55s var(--ease),
    filter 0.55s var(--ease);
}
.page-bg-a.is-shown {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(-50%, 0, 0);
}

/* ---------- Home: hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-tight);
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: var(--section-wide);
  text-align: center;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding-inline: var(--card-pad);
  will-change: opacity, filter, transform;
}
.hero.is-fading .hero-content {
  pointer-events: none;
}
.hero-title {
  max-width: 852px;
  font-size: var(--fs-heading-4xl);
  line-height: var(--lh-heading-4xl);
  font-weight: var(--fw-extra-bold);
  color: var(--dark-grey);
}
.hero-lead {
  max-width: var(--wrap-narrow);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-extra-loose);
  color: var(--dark-grey-medium);
}

.client-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 0;
}
.client-logo {
  flex: 1 1 0;
  display: block;
  width: 0; /* equal columns with space-between/flex */
  min-width: 0;
  height: 64px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  pointer-events: none;
}
/* Logos already have alpha — no opacity/blur, just slide up */
.client-logos .reveal {
  opacity: 1;
  filter: none;
  transform: translateY(28px);
  visibility: hidden;
  transition:
    transform 0.4s var(--ease),
    visibility 0s linear 0.4s;
}
.client-logos .reveal.is-shown {
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
  transition:
    transform 0.4s var(--ease),
    visibility 0s;
}

/* ---------- Home: band (strategie / experience) ---------- */
.band {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: var(--section-wide) var(--card-pad);
  color: var(--white);
  text-align: center;
}
.band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-card);
  background: var(--band-gradient);
  pointer-events: none;
}
.band-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
}
.band .section-heading {
  max-width: 832px;
  padding-inline: var(--card-pad);
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: var(--fw-extra-bold);
  color: var(--white);
}
.band-split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}
.band-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  max-width: 336px;
  padding-inline: var(--card-pad);
  text-align: left;
  color: var(--white);
}
.band-card--end {
  text-align: right;
  align-items: flex-end;
}
.band-card h3 {
  width: 100%;
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: var(--fw-extra-light);
  text-transform: uppercase;
  color: var(--white);
}
.band-card p {
  width: 100%;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-extra-loose);
  color: var(--white);
}
.band-split .venn {
  flex: none;
  width: 288px;
  height: auto;
}

/* ---------- Home: principes ---------- */
.principes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--section-gap);
  align-items: start;
}
.principe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 312px;
  padding-inline: var(--card-pad);
}
p.principe-number,
.principe-number {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-family: var(--font-headings);
  /* Literal px — mobile remaps --fs-heading-4xl to 40px */
  font-size: 80px;
  line-height: 76px;
  font-weight: var(--fw-extra-bold);
  letter-spacing: var(--ls-default);
  color: var(--dark-grey);
  white-space: nowrap;
}
.principe-number .dot {
  background: var(--dot-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.principe h3 {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: var(--fw-extra-light);
  text-transform: uppercase;
  color: var(--dark-grey);
}
.principe > p:not(.principe-number) {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-loose);
  color: var(--dark-grey);
}

/* ---------- Home: services ---------- */
.services {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.services-group {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.services-group + .services-group {
  margin-top: 64px; /* extra space above Experience */
}
.services-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: var(--card-pad);
}
.services-head .section-heading {
  display: inline-block; /* gradient spans the word, not the full row */
  width: fit-content;
  max-width: 100%;
  background: var(--band-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Filter on ancestor kills background-clip text — opacity/transform only */
.services-head.reveal {
  filter: none;
  transform: translateY(28px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.services-head.reveal.is-shown {
  filter: none;
  transform: none;
}
.services-head .lead {
  max-width: none;
  color: var(--dark-grey);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 48px;
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: var(--card-pad);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.service-card:hover {
  transform: none;
}
.service-icon {
  width: 24px;
  height: 24px;
  /* Force dark #222 regardless of SVG fill */
  filter: brightness(0) saturate(100%) invert(13%);
}
.service-card h3 {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  font-weight: var(--fw-extra-bold);
  color: var(--dark-grey);
}
.service-card > p {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-loose);
  color: var(--dark-grey);
}
.service-tags {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-loose);
  color: var(--dark-grey-medium);
}
.service-tags li {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
}
.service-tags li:not(:last-child)::after {
  content: " · ";
}

/* ---------- Cases (home + case-more) ---------- */
.cases-grid,
.case-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0;
  row-gap: 48px;
  align-items: start;
  margin-top: var(--section-gap);
}
.cases-grid .case-card:nth-child(even),
.case-more-grid .case-card:nth-child(even) {
  margin-top: 48px;
}
.case-card {
  /* Single inset aligns with .section-head; image fills the card */
  box-sizing: border-box;
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  margin-inline: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--light-grey);
  color: var(--white);
  box-shadow: 0 0 24px var(--dark-grey-light);
}
.case-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
img.case-card-media,
.case-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.case-card:hover img.case-card-media,
.case-card:hover .case-card-media img {
  transform: scale(1.04);
}
.case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dark-grey);
  opacity: 0.16; /* --dark-grey-light */
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.case-card:hover::after {
  opacity: 0.08;
}
.case-card-body {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: var(--card-pad);
}
.case-card-client {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
  color: var(--white);
}
.case-card-title {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  font-weight: var(--fw-extra-bold);
  color: var(--white);
}
.case-card-arrow {
  display: block;
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1); /* white on photo overlay */
  transition: transform var(--dur) var(--ease);
}
.case-card:hover .case-card-arrow {
  transform: translateX(6px);
}

/* ---------- Scroll wordmark ---------- */
.wordmark-scroll {
  --wordmark-w: min(2603px, 220vw);
  --wordmark-h: calc(var(--wordmark-w) * 624 / 2603);
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  /* Clip the wide track — vertical overlap still works via negative margin */
  overflow: hidden;
  padding-block: 0;
  /* Cases / about each overlap half the wordmark */
  margin-block: calc(var(--wordmark-h) / -2);
  pointer-events: none;
  contain: paint;
}
.wordmark-scroll-track {
  display: block;
  width: 100%;
  height: var(--wordmark-h);
  will-change: transform;
}
.wordmark-scroll-track img {
  display: block;
  width: var(--wordmark-w);
  height: auto;
  max-width: none;
  /* Light-grey SVG tint; darker / more opaque */
  opacity: 0.48;
  filter: none;
}

/* Cases sit above the top half of the scrolling wordmark */
#cases {
  position: relative;
  z-index: 1;
}

/* ---------- Home: about ---------- */
.about {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.about .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
  max-width: calc(var(--wrap) + var(--pad) * 2);
}
.about-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--wrap);
  padding-inline: var(--card-pad);
  text-align: center;
}
.about h2 {
  max-width: none;
  font-size: var(--fs-heading-2xl);
  line-height: var(--lh-heading-2xl);
  font-weight: var(--fw-extra-bold);
  color: var(--dark-grey);
}
.about .lead {
  max-width: var(--wrap-narrow);
  color: var(--dark-grey-medium);
}
.about-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: var(--wrap);
  color: var(--dark-grey);
}
.about-body > * {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: var(--card-pad);
}
.about-body p {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-loose);
  color: var(--dark-grey);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-inline: 0;
}
.footer-dark {
  /* Same width as strategie / experience band */
  max-width: var(--wrap-wide);
  width: 100%;
  margin-inline: auto;
  background: var(--dark-grey);
  color: var(--white);
  padding-block: var(--section-extra-loose);
  border-radius: 0;
}
.footer-dark .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.footer-contact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.footer-contact .section-head {
  padding-inline: var(--card-pad);
}
.footer-contact h2 {
  max-width: none;
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: var(--fw-extra-bold);
  color: var(--white);
}
.footer-contact .button {
  flex: none;
  margin-inline: var(--card-pad);
}
.people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--card-gap-lg);
  width: 100%;
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-block: var(--section-tight);
}
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 33.333%;
  max-width: 33.333%;
  gap: var(--card-gap);
  padding: 0 var(--card-pad);
  text-align: center;
}
.person-photo-wrap {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.person-photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--dark-grey-medium);
}
.person-name {
  font-family: var(--font-headings);
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
  font-weight: var(--fw-extra-bold);
  color: var(--white);
}
.person-role {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.6);
}
.person-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}
.footer-logo {
  width: 134px;
  height: auto;
}
.footer-link {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-loose);
  text-transform: none;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Case page ---------- */
.case-hero {
  padding-top: var(--section-extra-loose);
  padding-bottom: var(--section-tight); /* tighter to main image */
}
.case-hero > .wrap + .wrap {
  margin-top: var(--content-gap);
}
.wrap.case-hero-head,
.case-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--card-gap);
  /* Same inset as header; beats .wrap padding */
  padding-inline: calc(var(--pad) + var(--card-pad));
}
.case-hero-head > .reveal:first-child {
  display: flex;
  flex-direction: column;
  gap: 32px; /* whitespace below CASE */
}
.case-client {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  font-weight: var(--fw-extra-bold);
  background: var(--band-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
  color: var(--dark-grey);
}
.case-title {
  max-width: var(--wrap-narrow);
  padding-inline: var(--card-pad);
  font-size: var(--fs-heading-2xl);
  line-height: var(--lh-heading-2xl);
  color: var(--dark-grey);
}
.case-intro {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
  align-items: start;
}
.case-lead {
  padding-inline: var(--card-pad);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-loose);
  color: var(--dark-grey);
}
.case-tags {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding-inline: var(--card-pad);
  font-weight: var(--fw-bold);
  color: var(--dark-grey);
}
.case-tags li {
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}
.case-tags img,
.case-tags svg,
.case-back img {
  flex: none;
  width: 24px;
  height: 24px;
  filter: brightness(0); /* #222 */
}

.case-media-hero,
img.case-media-hero {
  display: block;
  width: calc(100% - 2 * var(--card-pad));
  margin-inline: var(--card-pad);
  box-sizing: border-box;
  border-radius: var(--radius-card);
}

.case-section {
  padding-block: var(--section-extra-loose);
}
/* First content section: less top pad under hero → main image */
.case-section:has(.case-media-hero) {
  padding-top: var(--section-tight);
}
.case-section .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.case-approach .wrap {
  gap: 80px; /* more whitespace between aanpak blocks */
}
.case-heading {
  padding-inline: var(--card-pad);
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  color: var(--dark-grey);
}
.case-section p,
.case-copy p,
.case-copy li {
  color: var(--dark-grey);
}
.case-copy {
  display: flex;
  flex-direction: column;
  gap: 24px; /* paragraph spacing — no nbsp spacers */
  max-width: var(--wrap-narrow);
  padding-inline: var(--card-pad);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-loose);
}
.case-copy > p,
.case-copy > ul {
  margin: 0;
}

/* Achtergrond: two columns — body large */
.case-achtergrond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.case-achtergrond-grid .case-copy {
  max-width: none;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-extra-loose);
}
.case-aside {
  display: flex;
  justify-content: center;
  padding-inline: var(--card-pad);
}
.case-aside img {
  border-radius: var(--radius-card);
}

.case-result-band {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--section-extra-loose) var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--band-gradient);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
}
.case-result-band h2 {
  width: 100%;
  max-width: 832px; /* 2/3 of 1248 */
  padding-inline: 0; /* band already has card-pad */
  box-sizing: border-box;
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  color: var(--white);
}
.case-result-band .case-copy {
  width: 100%;
  max-width: 832px;
  margin-inline: auto;
  padding-inline: 0; /* band already has card-pad */
  color: var(--white);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.case-result-band p,
.case-result-band li {
  color: var(--white);
}

/* Gallery on light grey */
.case-gallery-section {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap); /* space between images and caption */
  background: var(--light-grey);
  padding-block: var(--section-extra-loose);
}
.case-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Same as .cases-grid: column gap = facing card-pads only */
  column-gap: 0;
  row-gap: var(--content-gap);
  align-items: start;
}
.case-gallery img {
  width: 100%;
  border-radius: var(--radius-card);
}
.case-gallery > :nth-child(even) {
  margin-top: var(--section-extra-loose);
}
.case-column {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  padding-inline: var(--card-pad);
}
.case-gallery--flat > :nth-child(even) {
  margin-top: 0;
}
p.case-caption,
.case-caption {
  margin: 0;
  padding-inline: var(--card-pad);
  font-family: var(--font-headings);
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
  color: var(--dark-grey-medium);
}
/* Parent already has card pad — don’t double-indent */
.case-gis .case-caption,
.case-column .case-caption {
  padding-inline: 0;
}

/* Het resultaat — Figma: light-blue panel, petrol type, 1560 max */
.case-result {
  padding-block: var(--section-extra-loose);
}
.case-result-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
  width: min(100% - 2 * var(--card-pad), var(--wrap-wide));
  margin-inline: auto;
  padding: var(--section-extra-loose) 0;
  border-radius: var(--radius-card);
  background: var(--result-bg);
  box-sizing: border-box;
}
.case-result-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Same as .cases-grid / .case-gallery: facing card-pads only */
  column-gap: 0;
  row-gap: 0;
  width: 100%;
  max-width: var(--wrap);
}
.case-result-media .case-column:last-child {
  padding-top: var(--section-extra-loose);
}
.case-result-media img {
  width: 100%;
  border-radius: var(--radius-card);
}
.case-result-body {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  width: 100%;
  max-width: var(--wrap);
  color: var(--petrol);
}
.case-result-body .case-heading {
  color: var(--petrol);
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
}
.case-result-row {
  display: grid;
  grid-template-columns: minmax(0, 832px) minmax(0, 416px);
  gap: 0;
  align-items: start;
}
.case-result-row > p {
  padding-inline: var(--card-pad);
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-extra-loose);
  color: var(--petrol);
}
.case-person {
  /* Desktop: [photo] | name above icons — meta centered to photo */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--card-gap-lg);
  padding-inline: var(--card-pad);
  text-align: left;
}
.case-person .person-photo {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}
.case-person-meta {
  display: flex;
  flex-direction: column; /* name on top, icons below */
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--card-gap); /* same as footer .person */
}
.case-person .person-name {
  display: block;
  margin: 0;
  color: var(--petrol);
}
.case-person .person-links {
  display: flex;
  flex-direction: row; /* icons side-by-side under the name */
  justify-content: flex-start;
}
.case-person .person-links img {
  filter: none;
  /* tint icons petrol via CSS if SVGs are dark */
  opacity: 1;
}
.case-result .person-links img {
  filter: invert(28%) sepia(98%) saturate(1200%) hue-rotate(166deg) brightness(0.85);
}

/* ---------- Contact ---------- */
.contact-page,
.legal-page {
  padding-block: var(--section-extra-loose);
}
.contact-form-wrap,
.legal-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  max-width: var(--wrap-half);
  margin-inline: auto;
  padding-inline: var(--card-pad);
}
.legal-wrap {
  max-width: var(--wrap-narrow);
}
.contact-head {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap-lg);
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-field label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-super-wide);
  text-transform: uppercase;
}
.contact-optional {
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-loose);
  text-transform: none;
  color: var(--dark-grey-medium);
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--dark-grey-light);
  border-radius: var(--radius-card);
  background: var(--white);
  font: inherit;
  color: var(--dark-grey);
  appearance: none;
  transition: border-color var(--dur) var(--ease);
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--pink);
}
.contact-field textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--pink);
}
.contact-form-error {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--pink);
}
.contact-submit {
  align-self: flex-start;
}
.contact-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.contact-confirm .button {
  align-self: flex-start;
}

/* Legal prose */
.legal-prose {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.legal-prose h2 {
  margin-top: var(--card-gap-lg);
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
}
.legal-prose p,
.legal-prose li {
  color: var(--dark-grey-medium);
}
.legal-prose ul {
  padding-left: 20px;
  list-style: disc;
}

/* ---------- Mobile ---------- */
@media (max-width: 1024px) {
  :root {
    --pad: 0; /* no section/wrap horizontal pad — cards only */
    --card-pad: 24px;
    /* 24 + logo 32 + 24 */
    --header-h: 80px;
    --fs-heading-4xl: 40px;
    --lh-heading-4xl: 44px;
    --fs-heading-2xl: 32px;
    --lh-heading-2xl: 40px;
    --fs-heading-lg: 32px;
    --lh-heading-lg: 40px;
    --fs-heading-md: 28px;
    --lh-heading-md: 36px;
    --section-extra-loose: 64px;
    --section-wide: 96px;
    --section-gap: 48px;
    --content-gap: 32px;
  }

  .site-nav,
  .header-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
  }

  .site-header {
    padding-block: 24px;
  }

  /* Header + case hero head keep card pad when wrap gutter is 0 */
  .site-header .wrap.header-inner,
  .wrap.case-hero-head {
    padding-inline: var(--card-pad);
  }

  /* Keep toggle in flex flow so it shares the same inset as .mobile-menu-close.
     Negative margin absorbs the taller hit area so header stays ~24px around the logo. */
  .menu-toggle {
    position: relative;
    flex: none;
    margin-block: -6px; /* (44px toggle - 32px logo) / 2 */
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 70; /* above sticky header so bar/close stay visible */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--content-gap);
    padding: 0 var(--card-pad) var(--card-pad);
    overflow-y: auto;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.5s var(--ease),
      visibility 0s linear 0.5s;
  }
  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s var(--ease);
  }
  .mobile-menu-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    align-self: stretch;
    width: 100%;
    /* Same height as .site-header so close lines up with the hamburger */
    height: var(--header-h);
    padding-block: 0;
    box-sizing: border-box;
  }
  .mobile-menu-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .mobile-menu-mark-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        circle at 100% 100%,
        rgba(255, 179, 68, 0.55) 0%,
        rgba(255, 163, 68, 0) 55%
      ),
      linear-gradient(
        135deg,
        #e70d79 0%,
        #ee286b 19.5%,
        #f65f58 48.36%,
        #fc8646 78%
      );
  }
  .mobile-menu-mark img {
    position: relative;
    z-index: 1;
    display: block;
    width: 22px;
    height: auto;
  }
  .mobile-menu-close {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .mobile-menu-close-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: var(--dark-grey);
  }
  .mobile-menu-close-bar:first-child {
    transform: rotate(45deg);
  }
  .mobile-menu-close-bar:last-child {
    transform: rotate(-45deg);
  }
  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-gap-lg);
    flex: 1 1 auto;
  }
  .mobile-menu-nav a {
    font-size: var(--fs-heading-md);
    line-height: var(--lh-heading-md);
    font-weight: var(--fw-extra-bold);
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s var(--ease),
      transform 0.6s var(--ease),
      background-size var(--dur) var(--ease);
  }
  .mobile-menu.is-open .mobile-menu-nav a {
    opacity: 1;
    transform: none;
  }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(2) { transition-delay: 0.05s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(3) { transition-delay: 0.1s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(4) { transition-delay: 0.15s; }
  .mobile-menu.is-open .mobile-menu-nav a:nth-child(5) { transition-delay: 0.2s; }
  .mobile-menu-extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-gap-lg);
  }

  .hero-lead,
  .lead,
  .case-lead {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
  }
  .client-logos {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 24px;
  }
  .client-logo {
    flex: 1 1 40%;
    max-width: 140px;
    height: 48px;
  }

  .band {
    padding-block: var(--section-wide);
    padding-inline: 0; /* keep inset on heading/cards only — avoid double pad */
  }
  .band .section-heading br {
    display: none;
  }
  .venn-label {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }

  .principes-grid,
  .services-grid,
  .cases-grid,
  .case-more-grid,
  .about-body,
  .case-intro,
  .case-gallery {
    grid-template-columns: 1fr;
  }
  .cases-grid,
  .case-more-grid {
    row-gap: 24px;
  }
  .cases-grid .case-card:nth-child(even),
  .case-more-grid .case-card:nth-child(even),
  .case-gallery > :nth-child(even) {
    margin-top: 0;
  }
  .about-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-dark {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
  }
  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px; /* Let's get in touch → button */
  }
  .people {
    flex-direction: column;
    align-items: center;
  }
  .person {
    flex: 1 1 auto;
    max-width: none;
  }
  .wordmark-scroll {
    --wordmark-w: 160vw;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  .page-bg-a,
  .page-bg-a.is-shown {
    opacity: 1;
    filter: none;
    transform: translate3d(-50%, 0, 0) !important;
  }
  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    visibility: visible;
  }
  .obj {
    height: 100%;
  }
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-inline: var(--card-pad);
}
.footer-dark .eyebrow {
  color: var(--white);
}
.footer-dark .person-links img {
  filter: brightness(0) invert(1);
}
@media (max-width: 1024px) {
  .band-split {
    flex-direction: column;
  }
  .band-card,
  .band-card--end {
    text-align: center;
    align-items: center;
    max-width: none;
  }
  .band-split .venn {
    width: min(288px, 70vw);
  }
  .principes-grid {
    gap: 48px;
  }
  .principe {
    max-width: none;
  }
  p.principe-number,
  .principe-number {
    font-size: 80px;
    line-height: 76px;
  }
  .page-bg-a {
    top: -20vw;
    width: 160vw;
  }
}

/* ---------- Case page additions ---------- */
.case-back img {
  transform: scaleX(-1);
  transition: transform var(--dur) var(--ease);
}
.case-back:hover img {
  transform: scaleX(-1) translateX(4px);
}
.case-copy ul {
  padding-left: 20px;
  list-style: disc;
}
.case-gis {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding-inline: var(--card-pad);
}
.case-gis img {
  max-width: 560px;
  width: 100%;
  border-radius: var(--radius-card);
}
@media (max-width: 1024px) {
  /*
   * Case page mobile rhythm (works across all section orders):
   * - 48px between sections (padding-top only; previous bottom = 0)
   * - Gallery keeps 48px bottom (below caption)
   * - Result band is flush (0 pad, square)
   * - 24px between stacked images / image→caption
   * - 48px for major internal stacks (intro/tags, text/image, text/profile)
   */
  .case-hero-head {
    flex-direction: column;
  }
  .case-intro {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .case-achtergrond-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .case-result-media,
  .case-result-row {
    grid-template-columns: 1fr;
  }
  .case-result-row {
    gap: 48px;
  }
  .case-person {
    flex-direction: column;
    text-align: center;
  }
  .case-person-meta {
    align-items: center;
  }
  .case-person .person-links {
    justify-content: center;
  }
  .case-result-media .case-column:last-child {
    padding-top: 0;
  }
  .case-result-band h2,
  .case-result-band .case-copy {
    max-width: none;
  }
  .case-gallery > :nth-child(even) {
    margin-top: 0;
  }

  /* --- Section rhythm --- */
  .case-hero.section {
    padding-top: var(--section-extra-loose);
    padding-bottom: 0;
  }
  .case-hero > .wrap + .wrap {
    margin-top: 48px;
  }

  /* Default case sections: 48px before content */
  main > .case-section.section,
  main > .section.case-result,
  main > .section:has(.case-more) {
    padding-top: 48px;
    padding-bottom: 0;
  }

  /* Override desktop case-section / :has(media-hero) pads */
  .case-section,
  .case-section:has(.case-media-hero) {
    padding-top: 48px;
    padding-bottom: 0;
  }

  /* 48px white space below De vraag — must beat main > .case-section.section */
  main > .case-section.section:has(+ .case-gallery-section),
  .case-section:has(+ .case-gallery-section) {
    padding-bottom: 48px;
  }

  /* 48px before flush result band (achtergrond / gallery → band) */
  main > .case-section.section:has(+ .section > .wrap > .case-result-band),
  .case-section:has(+ .section > .wrap > .case-result-band),
  .case-gallery-section:has(+ .section > .wrap > .case-result-band) {
    padding-bottom: 48px;
  }

  /* Gallery: 48px above images + 48px below caption (own rule, not pb:0 list) */
  main > .case-gallery-section,
  .case-gallery-section {
    padding-block: 48px;
    gap: 24px;
  }

  /* Zo haalden we samen resultaat — flush to neighbors, square */
  main > .section:has(> .wrap > .case-result-band) {
    padding-block: 0;
  }
  .case-result-band {
    border-radius: 0;
    padding-block: 48px;
  }

  /* Onze aanpak always keeps 48px above heading/text (slim, werkom, etc.) */
  main > .case-approach.section,
  .case-approach.section {
    padding-top: 48px;
  }

  /* Het resultaat + Meer cases: 48px between + bottom room */
  main > .section.case-result,
  .case-result {
    padding-top: 48px;
    padding-bottom: 0;
  }
  .case-result-panel {
    padding-block: 48px;
  }
  main > .section:has(.case-more) {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Internal stacks */
  .case-section .wrap,
  .case-approach .wrap {
    gap: 48px;
  }
  .case-gallery,
  .case-gallery .case-column,
  .case-result-media,
  .case-result-media .case-column {
    gap: 24px;
  }
}