/*
 * HAB flagship consolidation layer
 * Shared geometry for every public route. Loaded after the legacy page CSS
 * while the old page-specific layers are progressively consolidated.
 */
:root {
  --site-container: 1180px;
  --hero-height-desktop: 790px;
  --hero-copy-width: 690px;
  --hero-eyebrow-top: 189px;
  --header-height-desktop: 74px;
  --button-height-primary: 54px;
  --header-cta-width: 232px;
  --mobile-page-gutter: 16px;
  --mobile-header-inset: 12px;
  --mobile-section-space: 72px;
  --mobile-section-space-compact: 56px;
  --mobile-card-gap: 16px;
  --mobile-control-height: 54px;
  --mobile-control-radius: 12px;
  --mobile-card-radius: 18px;
  --text-on-light: #071c37;
  --text-on-dark: #f7f9fc;
  --brand-yellow: #ffbd1a;
  --brand-blue: #135fd6;
  --hab-header-shadow: 0 12px 32px rgba(3, 17, 37, .085);
}

/* Final hero-overline contract: page categories align directly with the H1
   at every breakpoint. Section-local HAB line accents remain untouched. */
body .home-hero .eyebrow,
body .page-hero .eyebrow,
body .rvp-hero .eyebrow { gap: 0; }
body .home-hero .eyebrow::before,
body .page-hero .eyebrow::before,
body .rvp-hero .eyebrow::before { display: none !important; }

/* Global typography and shared controls */
body { color: var(--text-on-light); }
body > .skip-link {
  position: fixed !important;
  z-index: 10000 !important;
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  left: 12px !important;
  max-width: calc(100vw - 24px);
  margin: 0 !important;
  transform: translateY(calc(-100% - 24px)) !important;
  transition: transform 160ms ease !important;
}
body > .skip-link:focus,
body > .skip-link:focus-visible {
  transform: translateY(0) !important;
}
body .btn,
body .button {
  min-height: var(--button-height-primary);
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 750;
  line-height: 1.2;
}
body .btn-primary,
body .button-primary { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--text-on-light); }
/* Legacy page layers use a slightly different gold on a few CTA variants.
   Keep every primary action on the one shared CTA token. */
body .btn.btn-primary,
body .button.button-primary { background: var(--brand-yellow); border-color: var(--brand-yellow); }
body .btn-primary:hover,
body .button-primary:hover { background: #ffd05a; border-color: #ffd05a; }
body .btn-secondary,
body .button-secondary { min-height: var(--button-height-primary); }
body :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(19, 95, 214, .16); }
body .on-dark :focus-visible,
body .site-footer :focus-visible { outline-color: #a8caff; box-shadow: 0 0 0 5px rgba(168, 202, 255, .2); }
body .eyebrow { color: var(--brand-blue); }
body .on-dark .eyebrow,
body .section-navy .eyebrow,
body .home-hero .eyebrow,
body .rvp-hero .eyebrow,
body .page-hero .eyebrow { color: var(--brand-yellow); }

/* One floating header geometry across all public routes. */
body .site-header {
  position: fixed;
  z-index: 1000;
  top: 18px;
  left: 50%;
  width: min(var(--site-container), calc(100% - 48px));
  height: var(--header-height-desktop);
  margin: 0;
  border: 1px solid rgba(7, 28, 55, .06);
  border-radius: 18px;
  background: rgba(255,255,255,.975);
  box-shadow: var(--hab-header-shadow);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  transform: translateX(-50%);
}
body .site-header.is-sticky,
body .site-header.is-scrolled { top: 10px; height: 66px; border-radius: 14px; }
body:not(.nav-open):not(.menu-open) .site-header.is-scrolling-down,
body:not(.nav-open):not(.menu-open) .site-header.is-near-footer { transform: translate(-50%, calc(-100% - 28px)); }
body .site-header.is-scrolling-up,
body.nav-open .site-header,
body.menu-open .site-header { transform: translateX(-50%); }
body .header-inner,
body .nav-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 232px;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 13px 0 23px;
}
/* Home and Reclamevrij+ carry an extra legacy container class in the header.
   Neutralise that inner container so every route shares the same header edge. */
body .site-header > .container.header-inner,
body .site-header > .container.nav-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
body .brand-logo,
body .brand { display: inline-flex; align-items: center; width: 184px; min-width: 0; }
body .brand-logo img,
body .brand img,
body .site-header .brand-logo img { width: 184px; height: auto; }
body .site-nav,
body .desktop-nav {
  display: flex;
  grid-column: 2;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  margin: 0;
}
body .site-nav > a:not(.btn),
body .desktop-nav > a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  min-height: 44px;
  padding: 0 11px;
  border-radius: 9px;
  color: #31465f;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}
body .site-nav > a:not(.btn):hover,
body .site-nav > a[aria-current='page']:not(.btn),
body .desktop-nav > a:hover,
body .desktop-nav > a[aria-current='page'] { color: var(--brand-blue); background: rgba(19,95,214,.065); }
body .site-nav > a:not(.btn)::after { bottom: 5px; }
body .nav-cta {
  grid-column: 3;
  justify-self: end;
  width: var(--header-cta-width);
  min-width: var(--header-cta-width);
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 12px;
  white-space: nowrap;
}
body .site-header .nav-cta,
body .site-header .button.nav-cta,
body .site-header .btn.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-height: 46px;
  line-height: 1.2;
}
body .desktop-nav + .nav-cta {
  align-self: center;
  justify-content: center;
  display: inline-flex;
}
body .menu-toggle { grid-column: 3; justify-self: end; }
body .menu-toggle span { display: block; width: 18px; height: 2px; margin: 3px 0; border-radius: 2px; background: currentColor; }
body .menu-toggle span:only-child { width: 20px; height: 14px; margin: 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; background: linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat; }
body .mobile-menu { display: none; height: 0; margin: 0; padding: 0; overflow: hidden; }

/* Shared desktop hero component. Image placement is controlled per route through variables. */
body .home-hero,
body .page-hero,
body .rvp-hero {
  position: relative;
  display: flex;
  min-height: var(--hero-height-desktop);
  height: var(--hero-height-desktop);
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  color: var(--text-on-dark);
  background: #031125;
  isolation: isolate;
}
body .home-hero__media,
body .page-hero-media,
body .rvp-hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  transform: none;
}
body .home-hero__media picture,
body .page-hero-media picture,
body .rvp-hero-media picture { display: block; width: 100%; height: 100%; }
body .home-hero__media img,
body .page-hero-media img,
body .rvp-hero-media img {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--hero-media-width, 100%);
  height: var(--hero-media-height, 100%);
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-object-position, 50% 50%);
  transform: translate(calc(-50% + var(--hero-shift-x, 0px)), calc(-50% + var(--hero-shift-y, 0px)));
  filter: none;
}
body .home-hero::before,
body .page-hero::before,
body .rvp-hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,17,37,.62) 0%, rgba(3,17,37,.5) 34%, rgba(3,17,37,.24) 55%, rgba(3,17,37,.04) 77%, rgba(3,17,37,0) 100%);
  content: '';
}
body .home-hero::after,
body .page-hero::after,
body .rvp-hero::after { display: none; }
body .home-hero__inner,
body .page-hero-grid,
body .rvp-hero-grid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  width: min(var(--site-container), calc(100% - 48px));
  min-height: 0;
  height: 100%;
  margin: 0 auto;
  padding-top: var(--hero-eyebrow-top) !important;
  padding-bottom: 68px;
}
body .home-hero__copy,
body .page-hero-grid > :first-child,
body .rvp-hero-copy { width: min(var(--hero-copy-width), 100%); max-width: var(--hero-copy-width); margin: 0; }
body .home-hero h1,
body .page-hero h1,
body .rvp-hero h1 { max-width: var(--hero-copy-width); margin-top: 0; color: #fff; }
/* Keep the primary message fully present on cold load. Motion remains available
   below the fold, where it does not weaken the first impression. */
body .home-hero [data-reveal],
body .page-hero [data-reveal],
body .rvp-hero [data-reveal] { opacity: 1 !important; transform: none !important; }

/* The Home entry point uses the same canonical intake logic as /contract-bekijken/.
   These local rules retain the Home surface while matching the standalone flow's hierarchy. */
body.page-home .intake-card--canonical .intake-progress { margin-bottom: 32px; }
body.page-home .intake-card--canonical .intake-step h2 { margin: 0 0 10px; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.06; letter-spacing: -.035em; }
body.page-home .intake-card--canonical .intake-step > .lede { margin: 0 0 22px; color: var(--muted); font-size: .96rem; }
body.page-home .intake-card--canonical fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
body.page-home .intake-card--canonical fieldset legend { margin-bottom: 12px; font-size: .88rem; font-weight: 750; }
body.page-home .intake-card--canonical .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
body.page-home .intake-card--canonical .choice-radio { min-height: 82px; }
body.page-home .intake-card--canonical .form-consent { margin-bottom: 0; }

@media (max-width: 680px) {
  body.page-home .intake-card--canonical .choice-grid { grid-template-columns: 1fr; }
  body.page-home .intake-card--canonical .choice-radio { min-height: 58px; }
}
body .home-hero h1,
body .page-hero h1,
body .rvp-hero h1 { text-shadow: 0 2px 18px rgba(3,17,37,.22); }
body .home-hero .lead,
body .page-hero .lede,
body .rvp-hero .lead { max-width: 600px; color: rgba(247,249,252,.92); }
body .hero-actions,
body .page-hero .button-row,
body .rvp-hero .hero-actions { margin-top: 32px; }
body .hero-actions .btn,
body .page-hero .button-row .btn,
body .page-hero .button-row .button,
body .rvp-hero .hero-actions .btn { min-height: var(--button-height-primary); }
body .hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 18px 0 0;
  padding: 0;
  color: rgba(247,249,252,.76);
  font-size: .82rem;
  list-style: none;
}
body .hero-proof li { display: inline-flex; gap: 7px; align-items: center; }
body .hero-proof svg { width: 18px; height: 18px; fill: none; stroke: var(--brand-yellow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body .clarity-route__icon { display: none; }

@media (min-width: 769px) {
  body .hero-proof svg { display: none; }
  body .hero-proof li { gap: 0; }
  body .hero-proof li + li::before { margin-right: 12px; color: var(--brand-yellow); content: '·'; }
}

@media (min-width: 1121px) {
  body.page-home .home-hero__inner,
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body[data-page='contact'] .page-hero-grid,
  body.page-rvp .rvp-hero-grid { padding-top: 189px !important; margin: 0 auto !important; }
  body.page-home .home-hero__inner { align-items: flex-start !important; padding-top: 189px !important; padding-bottom: 68px !important; }
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body[data-page='contact'] .page-hero-grid,
  body.page-rvp .rvp-hero-grid { display: flex !important; align-items: flex-start !important; }
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body[data-page='contact'] .page-hero-grid,
  body.page-rvp .rvp-hero-grid { position: relative !important; top: auto !important; transform: none !important; }
  body.page-how .page-hero-grid > :first-child,
  body.page-about .page-hero-grid > :first-child,
  body[data-page='contact'] .page-hero-grid > :first-child,
  body.page-rvp .rvp-hero-grid > :first-child { position: relative !important; top: auto !important; transform: none !important; }
  body.page-how .page-hero,
  body.page-about .page-hero,
  body[data-page='contact'] .page-hero { align-items: flex-start !important; padding: 0 !important; }
  body.page-rvp .rvp-hero { align-items: flex-start !important; padding: 0 !important; }
  body.page-home .home-hero { top: 0 !important; }
  body.page-rvp .rvp-hero { margin-top: 0 !important; }
}

body.page-home { --hero-media-width: 100%; --hero-media-height: 100%; --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-object-position: 68% 50%; }
body.page-how { --hero-media-width: 100%; --hero-media-height: 100%; --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-object-position: 50% 50%; }
body.page-about { --hero-media-width: 100%; --hero-media-height: 100%; --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-object-position: 50% 50%; }
body.page-rvp { --hero-media-width: 100%; --hero-media-height: 100%; --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-object-position: 50% 50%; }
body[data-page='contact'] { --hero-media-width: 100%; --hero-media-height: 100%; --hero-shift-x: 0px; --hero-shift-y: 0px; --hero-object-position: 50% 50%; }

/* The legacy interior sheets use route-specific pseudo-element selectors.
   Match that specificity without relying on a desktop breakpoint: all routes
   therefore use the Contact navy even in browsers with scaled viewports. */
body.page-home .home-hero::before,
body[data-page='zo-werkt-het'] .page-hero::before,
body[data-page='over-hab'] .page-hero::before,
body[data-page='contact'] .page-hero::before,
body.page-rvp .rvp-hero::before {
  background:
    linear-gradient(90deg, #031125 0%, #031125 36%, rgba(3,17,37,.92) 44%, rgba(3,17,37,.58) 56%, rgba(3,17,37,.16) 72%, rgba(3,17,37,.03) 100%),
    linear-gradient(180deg, rgba(3,17,37,.05), rgba(3,17,37,.22));
}

/* Desktop colour lock: the photos used to tint the translucent navy per route.
   Fade the image itself in so every hero starts with the same Contact navy. */
@media (min-width: 769px) {
  body.page-home .home-hero,
  body[data-page='zo-werkt-het'] .page-hero,
  body[data-page='over-hab'] .page-hero,
  body[data-page='contact'] .page-hero,
  body.page-rvp .rvp-hero {
    background: #010b1f !important;
  }

  body.page-home .home-hero__media,
  body[data-page='zo-werkt-het'] .page-hero-media,
  body[data-page='over-hab'] .page-hero-media,
  body[data-page='contact'] .page-hero-media,
  body.page-rvp .rvp-hero-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.62) 44%, #000 61%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.62) 44%, #000 61%, #000 100%);
  }

  body.page-home .home-hero::before,
  body[data-page='zo-werkt-het'] .page-hero::before,
  body[data-page='over-hab'] .page-hero::before,
  body[data-page='contact'] .page-hero::before,
  body.page-rvp .rvp-hero::before {
    background: linear-gradient(90deg, #010b1f 0%, #010b1f 20%, rgba(1,11,31,.9) 31%, rgba(1,11,31,.58) 46%, rgba(1,11,31,.2) 64%, rgba(1,11,31,.03) 82%, rgba(1,11,31,0) 100%);
  }
}

/* Preserve the separately art-directed mobile presentation, including the
   768px source switch, while keeping every image edge flush with the hero. */
@media (max-width: 767.98px) {
  body.page-home .home-hero::before {
    background: linear-gradient(180deg, rgba(3,17,37,.05) 0%, rgba(3,17,37,.12) 40%, rgba(3,17,37,.78) 67%, rgba(3,17,37,.96) 100%);
  }
  body[data-page='zo-werkt-het'] .page-hero::before,
  body[data-page='over-hab'] .page-hero::before,
  body[data-page='contact'] .page-hero::before,
  body.page-rvp .rvp-hero::before {
    background: linear-gradient(180deg, rgba(2,19,40,.02) 0%, rgba(2,19,40,.05) 38%, rgba(2,19,40,.18) 62%, rgba(2,19,40,.34) 100%);
  }
  body .home-hero__media img,
  body .page-hero-media img,
  body .rvp-hero-media img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-position: var(--hero-mobile-object-position, 50% 0%);
  }
}

/* -------------------------------------------------------------------------- */
/* Hero completion authority — single portrait fade + route bridge family      */
/* -------------------------------------------------------------------------- */

body .hero-bridge,
body.page-how .how-route-bridge {
  position: relative;
  z-index: 6;
  width: min(var(--site-container), calc(100% - 48px));
  margin-top: -38px;
  border-radius: 18px;
  box-shadow: 0 24px 58px rgba(3,17,37,.16);
}

body .hero-bridge--brand {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(24px,4vw,64px);
  align-items: center;
  padding: clamp(24px,3vw,36px) clamp(24px,4vw,52px);
  color: #fff;
  border: 1px solid rgba(130,175,230,.24);
  background: #071c37;
}
body .hero-bridge--brand p { max-width: 780px; margin: 0; color: rgba(255,255,255,.9); font-family: var(--font-display,inherit); font-size: clamp(1.08rem,1.5vw,1.35rem); font-weight: 700; line-height: 1.45; }
body .hero-bridge--brand ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
body .hero-bridge--brand li { position: relative; padding-top: 24px; color: rgba(255,255,255,.82); font-size: .78rem; font-weight: 750; text-align: center; }
body .hero-bridge--brand li::before { position: absolute; top: 0; left: 50%; width: 10px; height: 10px; border: 2px solid #7db4f6; border-radius: 50%; background: #071c37; box-shadow: 0 0 0 5px rgba(65,139,235,.12); content: ''; transform: translateX(-50%); }

body .hero-bridge--paper {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: clamp(20px,4vw,56px);
  align-items: center;
  padding: 18px 22px;
  border: 1px solid rgba(7,28,55,.09);
  background: #fff;
}
body .contact-topic-bridge > span { color: var(--hab-navy-soft,#071c37); font-weight: 800; }
body .contact-topic-bridge > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
body .contact-topic-bridge button { min-height: 48px; padding: 8px 14px; color: #0b2e57; border: 1px solid #cad8e8; border-radius: 11px; background: #f5f8fc; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
body .contact-topic-bridge button:hover,
body .contact-topic-bridge button:focus-visible,
body .contact-topic-bridge button[aria-pressed='true'] { color: #031125; border-color: #ffbf1f; background: #fff6d8; outline: none; box-shadow: 0 0 0 3px rgba(255,191,31,.18); }
body.page-contact #contactformulier { scroll-margin-top: 96px; }

body.page-how .how-route-section { overflow: visible; padding-top: 0; }
body.page-how .how-route-bridge { margin-bottom: clamp(72px,8vw,112px); }
body.page-how .how-route-bridge .how-route-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: stretch; gap: 8px; padding: 12px; overflow: hidden; border: 1px solid rgba(130,175,230,.24); border-radius: 18px; box-shadow: 0 24px 54px rgba(2,13,30,.27); }
body.page-how .how-route-bridge .how-route-progress { display: none; }
body.page-how .how-route-bridge .how-route-tab { min-height: 68px; grid-template-columns: 2rem minmax(0,1fr); padding: 10px 14px; }
body.page-how .how-route-bridge .how-route-tab::before { display: none; }
body.page-how .how-route-bridge .how-route-tab[aria-selected='true'] { transform: none; box-shadow: inset 3px 0 0 var(--sig-gold,#ffbf1f); }
body.page-how .how-route { grid-template-columns: 1fr; }

@media (max-width: 1120px) {
  body .hero-bridge,
  body.page-how .how-route-bridge { width: min(calc(100% - clamp(64px,9vw,96px)),var(--site-container)); }
  body .hero-bridge--brand { grid-template-columns: 1fr; gap: 20px; }
  body.page-about .about-why-section,
  body.page-contact #contactformulier { padding-top: clamp(88px,11vw,132px); }
}

@media (max-width: 767.98px) {
  body .hero-bridge,
  body.page-how .how-route-bridge { width: calc(100% - 24px); margin-top: -34px; border-radius: 17px; }
  body.page-how .how-route-bridge { margin-bottom: 72px; }
  body.page-how .how-route-bridge .how-route-rail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; border-radius: 17px; }
  body.page-how .how-route-bridge .how-route-tab { min-height: 58px; grid-template-columns: 1.65rem minmax(0,1fr); padding: 7px 8px; }
  body.page-how .how-route-bridge .how-route-tab strong { font-size: .8rem; }

  body .hero-bridge--brand { gap: 18px; padding: 20px 18px; }
  body .hero-bridge--brand p { font-size: .95rem; }
  body .hero-bridge--brand ul { gap: 4px; }
  body .hero-bridge--brand li { padding-inline: 4px; font-size: .65rem; line-height: 1.3; }

  body .hero-bridge--paper { grid-template-columns: 1fr; gap: 12px; padding: 15px 12px; }
  body .contact-topic-bridge > span { padding-inline: 4px; font-size: .82rem; }
  body .contact-topic-bridge > div { gap: 6px; }
  body .contact-topic-bridge button { min-height: 50px; padding: 7px 5px; font-size: .7rem; }
  body.page-about .about-why-section,
  body.page-contact #contactformulier { padding-top: 86px; }

  body.page-rvp .rvp-signal { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 0; margin-top: -34px; padding: 9px 16px; }
  body.page-rvp .rvp-signal span { min-height: 46px; justify-content: flex-start; padding: 8px 4px; font-size: .69rem; text-align: left; }
  body.page-rvp .rvp-signal span:not(:first-child) { border-top: 1px solid rgba(7,28,55,.1); border-left: 0; }
  body.page-rvp .rvp-signal i { display: none; }
}

@media (max-width: 360px) {
  body .contact-topic-bridge > div { grid-template-columns: 1fr; }
  body .contact-topic-bridge button { min-height: 42px; }
}

/* Home content never waits on JavaScript to become visible. Motion in the
   flagship flow is reserved for state changes in the scan and forms. */
html.js body.page-home .scroll-reveal,
html.js body.page-home .scroll-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Full-bleed hero repair: the shared content container is deliberately not
   the positioning owner for the photographic layer. Earlier refinements made
   the container relative again, clipping every interior-page image to 1180px.
   The section owns media; the container owns copy only. */
@media (min-width: 769px) {
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body[data-page='contact'] .page-hero-grid,
  body.page-rvp .rvp-hero-grid {
    position: static !important;
  }
  body.page-how .page-hero-grid > :first-child,
  body.page-about .page-hero-grid > :first-child,
  body[data-page='contact'] .page-hero-grid > :first-child,
  body.page-rvp .rvp-hero-grid > :first-child {
    position: relative !important;
    z-index: 2;
  }
}

/* Process bars and footer family */
body .clarity-bar,
body .rvp-signal {
  border-radius: 18px;
  border: 1px solid rgba(7,28,55,.09);
  box-shadow: 0 22px 56px rgba(3,17,37,.12);
}
body .site-footer { color: var(--text-on-dark); background: #031125; }
body .site-footer .footer-brand p { color: rgba(247,249,252,.72); }

@media (min-width: 769px) and (max-width: 1120px) {
  body .site-header { width: min(var(--site-container), calc(100% - 32px)); }
  body .site-header .header-inner,
  body .site-header .nav-shell { display: grid !important; grid-template-columns: 1fr 40px !important; height: 100%; min-height: 0; padding: 0 12px; }
  body .site-header .site-nav,
  body .site-header .desktop-nav,
  body .site-header .nav-cta { display: none; }
  body .menu-toggle { display: inline-grid; grid-column: 2 !important; width: 44px; min-width: 44px; height: 44px; min-height: 44px; place-content: center; gap: 5px; justify-self: end; border-radius: 10px; }
  body .menu-toggle::before,
  body .menu-toggle::after { display: none; }
  body .menu-toggle span,
  body .menu-toggle span:only-child { display: block; width: 20px; height: 2px; margin: 0; border: 0; border-radius: 2px; background: currentColor; transition: opacity 180ms ease, transform 180ms ease; }
  body .menu-toggle[aria-expanded='true'] span:nth-child(1) { opacity: 1; transform: translateY(7px) rotate(45deg); }
  body .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  body .menu-toggle[aria-expanded='true'] span:nth-child(3) { opacity: 1; transform: translateY(-7px) rotate(-45deg); }
  body .mobile-menu {
    position: fixed;
    z-index: 1100;
    top: 75px;
    right: 12px;
    left: 12px;
    display: none;
    height: auto;
    width: auto;
    max-height: calc(100svh - 90px);
    padding: 10px;
    overflow: auto;
    border: 1px solid rgba(7,28,55,.09);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(3,17,37,.22);
  }
  body .mobile-menu.is-open { display: grid; }
  body .mobile-menu,
  body .mobile-menu.is-open {
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
  }
  html.nav-enhanced .site-header .site-nav {
    position: fixed;
    z-index: 1100;
    top: 75px;
    right: 12px;
    left: 12px;
    display: none;
    width: auto;
    max-height: calc(100svh - 90px);
    padding: 10px;
    overflow: auto;
    border: 1px solid rgba(7,28,55,.09);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(3,17,37,.22);
  }
  html.nav-enhanced .nav-open .site-header .site-nav { display: grid; }
  body .mobile-menu > a { min-height: 48px; height: 48px; padding: 0 12px; border-bottom: 1px solid rgba(7,28,55,.085); }
  body .mobile-menu .mobile-cta { display: inline-flex; width: 100%; min-width: 0; height: 54px; min-height: 54px; margin-top: 8px; border: 0; }
}

@media (min-width: 769px) and (max-width: 1120px) {
  body .site-header { top: 18px !important; left: 50% !important; height: 74px !important; min-height: 74px !important; transform: translateX(-50%) !important; }
  body .site-header .header-inner,
  body .site-header .nav-shell { min-height: 74px !important; height: 74px !important; }
}

@media (max-width: 767.98px) {
  body .container { width: min(calc(100% - 32px), var(--site-container)); }
  body.menu-open,
  body.nav-open { height: 100svh; overflow-y: hidden; }

  /* Canonical mobile header: full-width navy and one vertical hide/reveal axis. */
  body .site-header,
  html.has-motion body .site-header,
  html.motion-ready body .site-header,
  html.js body .site-header {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 66px;
    min-height: 66px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #031125;
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: none;
    transform: translateY(0);
    transition: transform 220ms cubic-bezier(.2,.72,.2,1), box-shadow 180ms ease;
  }
  body .site-header.is-sticky,
  body .site-header.is-scrolled { top: 0; height: 66px; border-radius: 0; box-shadow: 0 10px 28px rgba(3,17,37,.24); }
  body:not(.nav-open):not(.menu-open) .site-header.is-scrolling-down,
  body:not(.nav-open):not(.menu-open) .site-header.is-near-footer { transform: translateY(-100%); }
  body .site-header.is-scrolling-up,
  body.nav-open .site-header,
  body.menu-open .site-header { transform: translateY(0); }
  body .site-header .header-inner,
  body .site-header .nav-shell,
  html.js body.page-home .site-header .header-inner,
  html.js body.page-rvp .site-header .header-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 66px !important;
    min-height: 66px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body .site-header .desktop-nav,
  body .site-header .site-nav,
  body .site-header .nav-cta { display: none !important; }
  body .brand,
  body .brand-logo { width: 178px; margin: 0; }
  body .brand picture,
  body .brand-logo picture { display: block; width: 100%; line-height: 0; }
  body .brand img,
  body .brand-logo img,
  body .site-header .brand-logo img { display: block; width: 178px; height: auto; }
  body .menu-toggle {
    display: inline-grid !important;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    color: #fff;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
  }
  body .menu-toggle::before,
  body .menu-toggle::after { display: none; }
  body .menu-toggle:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.16); }
  body .menu-toggle span,
  body .menu-toggle span:only-child { display: block; width: 20px; height: 2px; margin: 0; border: 0; border-radius: 2px; background: #fff; transition: opacity 180ms ease, transform 180ms ease; }
  body .menu-toggle[aria-expanded='true'] span:nth-child(1) { opacity: 1; transform: translateY(7px) rotate(45deg); }
  body .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  body .menu-toggle[aria-expanded='true'] span:nth-child(3) { opacity: 1; transform: translateY(-7px) rotate(-45deg); }
  body .menu-overlay { z-index: 1050; top: 66px; background: rgba(1,11,31,.62); backdrop-filter: blur(4px); }
  body .mobile-menu,
  body .mobile-menu.is-open {
    position: fixed;
    z-index: 1100;
    top: 66px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100svh - 78px);
    padding: 12px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 0 0 16px 16px;
    background: #071c37;
    box-shadow: 0 24px 64px rgba(1,11,31,.38);
    opacity: 1;
    transform: none !important;
  }
  body .mobile-menu { display: none; height: auto; }
  body .mobile-menu.is-open { display: grid; }
  body .mobile-menu > a {
    display: flex;
    min-height: 48px;
    padding: 0 12px;
    align-items: center;
    color: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: transparent;
    font-weight: 700;
    text-decoration: none;
  }
  body .mobile-menu > a:hover,
  body .mobile-menu > a:focus-visible,
  body .mobile-menu > a[aria-current='page'] { color: #fff; background: rgba(255,255,255,.075); }
  body .mobile-menu > a:focus-visible { outline: 2px solid #77adf2; outline-offset: -2px; }
  body .mobile-menu .mobile-cta { min-height: 54px; justify-content: center; margin-top: 8px; color: #031125; border: 0; background: var(--brand-yellow); }

  /* One responsive photographic hero system. Copy length controls final height. */
  body .home-hero,
  body .page-hero,
  body .rvp-hero {
    display: block;
    height: auto !important;
    min-height: var(--hero-mobile-min-height, 740px) !important;
    padding: 0 !important;
    overflow: hidden;
    background: #031125;
  }
  body .home-hero__media,
  body .page-hero-media,
  body .rvp-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; }
  body .home-hero__media img,
  body .page-hero-media img,
  body .rvp-hero-media img { top: 0; left: 0; width: 100%; height: 100%; transform: none; object-position: var(--hero-mobile-object-position, 50% 0%); }
  body.page-about .page-hero-media img { height: 100%; transform: translateY(-8%); }

  /* Keep subpage copy clear of people, hands and devices. The portrait remains
     a generous opening image, then dissolves into a dedicated navy copy zone. */
  body.page-how,
  body.page-about,
  body.page-rvp,
  body.page-contact {
    --hero-mobile-photo-height: clamp(480px, 128vw, 550px);
    --hero-mobile-copy-overlap: 64px;
  }
  body.page-how .page-hero-media,
  body.page-about .page-hero-media,
  body.page-rvp .rvp-hero-media,
  body.page-contact .page-hero-media {
    bottom: auto;
    height: var(--hero-mobile-photo-height);
  }
  body.page-about .page-hero-media { top: 18px; }
  body.page-rvp .rvp-hero-media { top: 42px; }
  body.page-about .page-hero-media img { transform: none; }
  body.page-how .page-hero-media::after,
  body.page-about .page-hero-media::after,
  body.page-rvp .rvp-hero-media::after,
  body.page-contact .page-hero-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(3,17,37,0) 56%, rgba(3,17,37,.4) 72%, rgba(3,17,37,.9) 91%, #031125 100%);
    content: '';
    pointer-events: none;
  }
  body .home-hero::before,
  body .page-hero::before,
  body .rvp-hero::before {
    background: linear-gradient(180deg, rgba(3,17,37,.02) 0%, rgba(3,17,37,.08) 35%, rgba(3,17,37,.5) 57%, rgba(3,17,37,.92) 76%, #031125 100%);
  }
  body .home-hero__inner,
  body .page-hero-grid,
  body .rvp-hero-grid {
    display: flex;
    align-items: flex-end;
    width: min(calc(100% - 32px), var(--site-container));
    height: auto;
    min-height: var(--hero-mobile-min-height, 740px) !important;
    padding: clamp(330px, 48svh, 430px) 0 var(--hero-mobile-bottom-space, 58px) !important;
  }
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body.page-rvp .rvp-hero-grid,
  body.page-contact .page-hero-grid {
    align-items: flex-start;
    padding-top: calc(var(--hero-mobile-photo-height) - var(--hero-mobile-copy-overlap)) !important;
  }
  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy { width: 100%; max-width: none; }
  body .home-hero__copy { display: flex; flex-direction: column; }
  body .home-hero .eyebrow,
  body .page-hero .eyebrow,
  body .rvp-hero .eyebrow { display: flex; gap: 11px; align-items: center; margin-bottom: 18px; font-size: .72rem; line-height: 1.25; }
  body .home-hero .eyebrow::before,
  body .page-hero .eyebrow::before,
  body .rvp-hero .eyebrow::before { display: block; width: 28px; height: 2px; flex: 0 0 28px; background: var(--brand-yellow); content: ''; }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 { max-width: 100%; margin-bottom: 18px; font-size: clamp(2.4rem, 10.5vw, 3.05rem); line-height: .98; letter-spacing: -.047em; text-wrap: balance; }
  body.page-how .page-hero h1,
  body.page-rvp .rvp-hero h1,
  body.page-contact .page-hero h1 { font-size: clamp(2.28rem, 9.8vw, 2.88rem); }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead { max-width: 34rem; margin: 0; font-size: 1rem; line-height: 1.56; }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; margin-top: 24px; }
  body .hero-actions .btn:first-child,
  body .page-hero .button-row .btn:first-child,
  body .page-hero .button-row .button:first-child,
  body .rvp-hero .hero-actions .btn:first-child,
  body .page-hero-grid > :first-child > .btn-primary {
    width: 100%;
    min-height: 56px;
    padding-inline: 18px;
    font-size: .96rem;
  }
  body .hero-actions .btn:first-child::after,
  body .page-hero .button-row .btn:first-child::after,
  body .page-hero .button-row .button:first-child::after,
  body .rvp-hero .hero-actions .btn:first-child::after,
  body .page-hero-grid > :first-child > .btn-primary::after { margin-left: auto; font-size: 1.35rem; font-weight: 500; content: '→'; }
  body .hero-actions > :nth-child(2),
  body .page-hero .button-row > :nth-child(2),
  body .rvp-hero .hero-actions > :nth-child(2) { display: inline-flex !important; width: max-content; min-height: 44px; padding: 8px 0; justify-content: flex-start; color: rgba(255,255,255,.9); border: 0; background: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 5px; }
  body .home-hero .hero-proof { order: 1; }
  body .home-hero .hero-actions { order: 2; }
  body .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 18px; font-size: .75rem; }
  body .hero-proof li { min-width: 0; gap: 6px; white-space: nowrap; }
  body .hero-proof svg { width: 20px; height: 20px; flex: 0 0 20px; }
  body .rvp-hero-note { margin: 12px 0 0; color: rgba(255,255,255,.66); font-size: .78rem; }

  body.page-home { --hero-mobile-min-height: 770px; --hero-mobile-bottom-space: 82px; }
  body.page-how { --hero-mobile-min-height: 805px; }
  body.page-about { --hero-mobile-min-height: 790px; }
  body.page-rvp { --hero-mobile-min-height: 820px; }
  body.page-contact { --hero-mobile-min-height: 790px; }

  body.page-intake .intake-shell { min-height: 100svh; padding-top: 94px; }
  body.page-intake .intake-aside { position: static; }
  body.page-legal .legal-hero { padding: 94px 0 52px; }
  body.page-legal .legal-box { padding: 24px 20px 36px; border-radius: 14px; box-shadow: none; }

  body .section { padding: var(--mobile-section-space) 0; }
  body .section-compact { padding: var(--mobile-section-space-compact) 0; }
  body h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.04; letter-spacing: -.035em; }
  body .on-dark p,
  body .section-navy p,
  body .home-hero p,
  body .page-hero p,
  body .rvp-hero p,
  body .site-footer p { color: rgba(247,249,252,.82); }
}

/* The legacy home sheet ships an unusually specific responsive nav grid.
   Its new DOM uses the shared mobile header contract, so explicitly flatten it. */
@media (min-width: 769px) and (max-width: 1120px) {
  html.js body.page-home .site-header .header-inner,
  html.js body.page-rvp .site-header .header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    grid-template-rows: 1fr !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 12px !important;
  }
  html.js body.page-home .site-header .nav-cta,
  html.js body.page-rvp .site-header .nav-cta { display: none !important; }
  html.js body.page-home .site-header .menu-toggle,
  html.js body.page-rvp .site-header .menu-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
  }
}
@media (max-width: 767.98px) { /* Mobile header is defined once in the canonical layer above. */ }

@media (max-width: 1120px) {
  html.has-motion body .site-header .site-nav,
  html.motion-ready body .site-header .site-nav,
  html.js body .site-header .site-nav,
  html.has-motion body .site-header .desktop-nav,
  html.motion-ready body .site-header .desktop-nav,
  html.js body .site-header .desktop-nav,
  html.has-motion body .site-header .nav-cta,
  html.motion-ready body .site-header .nav-cta,
  html.js body .site-header .nav-cta { display: none !important; }
  html.has-motion body .site-header .menu-toggle,
  html.motion-ready body .site-header .menu-toggle,
  html.js body .site-header .menu-toggle { display: inline-grid !important; }
}

@media (max-width: 390px) {
  body .brand-logo,
  body .brand,
  body .brand-logo img,
  body .brand img,
  body .site-header .brand-logo img { width: 158px; }
}

@media (max-width: 360px) {
  body.page-about .page-hero-media img { transform: translateY(-15%); }
}

body.page-home { --hero-mobile-object-position: 50% 0%; }
body.page-how { --hero-mobile-object-position: 50% 0%; }
body.page-about { --hero-mobile-object-position: 52% 0%; }
body.page-rvp { --hero-mobile-object-position: 54% 0%; }
body.page-contact { --hero-mobile-object-position: 51% 0%; }

/* -------------------------------------------------------------------------
   HAB flagship system: local blue-gold advice line, signature scan and forms
   ------------------------------------------------------------------------- */
:root {
  --hab-navy: #031125;
  --hab-navy-soft: #071c37;
  --hab-blue: #135fd6;
  --hab-gold: #ffbd1a;
  --hab-warm-white: #f7f5f0;
  --hab-hairline: rgba(7, 28, 55, .13);
  --hab-line-width: 2px;
  --hab-radius-sm: 10px;
  --hab-radius-md: 16px;
  --hab-radius-lg: 22px;
  --hab-state-transition: 340ms cubic-bezier(.2, .72, .2, 1);
}

body.page-home #werkwijze,
body.page-home #adviesaanvraag { scroll-margin-top: 92px; }

/* Canonical process rail: one compact explanation directly below the hero. */
body.page-home .clarity-bar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 2.18fr);
  gap: 34px;
  margin-top: -54px;
  padding: 24px 30px;
  overflow: hidden;
  border-radius: var(--hab-radius-md);
  background: #fff;
  box-shadow: 0 20px 52px rgba(3, 17, 37, .13);
}
body.page-home .clarity-bar::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--hab-blue) 0 72%, var(--hab-gold) 72% 100%);
  content: '';
}
body.page-home .clarity-bar__intro { padding-right: 28px; border-right: 1px solid var(--hab-hairline); }
body.page-home .clarity-bar__intro strong { display: block; max-width: 210px; }
body.page-home .clarity-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; padding: 0; }
body.page-home .clarity-route::before {
  display: none;
}
body.page-home .clarity-route li { position: relative; display: block; min-width: 0; padding-top: 36px; }
body.page-home .clarity-route li::before { top: 20px; left: 0; width: 12px; height: 12px; border: 3px solid #fff; background: var(--hab-blue); box-shadow: 0 0 0 1px rgba(19,95,214,.35); }
body.page-home .clarity-route li:first-child::before { background: var(--hab-blue); box-shadow: 0 0 0 1px rgba(19,95,214,.35); }
body.page-home .clarity-route li:last-child::before { background: var(--hab-gold); box-shadow: 0 0 0 1px rgba(255,189,26,.45); }
body.page-home .clarity-route li:not(:last-child)::after {
  display: block;
  z-index: 0;
  top: 25px;
  left: 6px;
  width: calc(100% + 26px);
  height: var(--hab-line-width);
  background: var(--hab-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(.2, .72, .2, 1) 120ms;
}
body.page-home .clarity-route li:nth-child(2)::after {
  background: linear-gradient(90deg, var(--hab-blue) 0 82%, var(--hab-gold) 82% 100%);
  transition-delay: 280ms;
}
html:not(.js) body.page-home .clarity-route li:not(:last-child)::after,
html.reduced-motion body.page-home .clarity-route li:not(:last-child)::after,
body.page-home .clarity-bar.is-visible .clarity-route li:not(:last-child)::after { transform: scaleX(1); }
body.page-home .clarity-route li > span { position: absolute; z-index: 1; top: 0; left: 0; padding: 0; color: #5e7087; }
body.page-home .clarity-route li > div { min-width: 0; }
body.page-home .clarity-route strong { display: block; color: var(--hab-navy-soft); }
body.page-home .clarity-route small { display: block; margin-top: 4px; color: #607188; font-size: .79rem; line-height: 1.4; }

/* The Contractscan carries the strongest section hierarchy and visual depth. */
body.page-home .contract-scan-section { padding: clamp(92px, 9vw, 138px) 0; background: var(--hab-warm-white); }
body.page-home .contract-scan-section::before { opacity: .32; }
body.page-home .contract-scan-layout { align-items: center; gap: clamp(44px, 6vw, 86px); }
body.page-home .contract-scan-copy h2 { max-width: 540px; font-size: clamp(2.8rem, 4.5vw, 4.45rem); line-height: .96; letter-spacing: -.052em; }
body.page-home .contract-scan-copy .lead { max-width: 520px; font-size: 1.05rem; }
body.page-home .contract-scan-controls { gap: 0; margin-top: 34px; border-top: 1px solid var(--hab-hairline); }
body.page-home .contract-scan-trigger {
  position: relative;
  min-height: 78px;
  margin: 0;
  padding: 15px 88px 15px 8px;
  border: 0;
  border-bottom: 1px solid var(--hab-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: color var(--hab-state-transition), background-color var(--hab-state-transition), padding var(--hab-state-transition);
}
body.page-home .contract-scan-trigger::before { top: 0; bottom: 0; left: 0; width: 4px; height: auto; border-radius: 0; background: linear-gradient(180deg, var(--hab-blue) 0 72%, var(--hab-gold) 72% 100%); transform: scaleY(0); transform-origin: center top; transition: transform 400ms cubic-bezier(.2, .72, .2, 1); }
body.page-home .contract-scan-trigger:hover { padding-left: 14px; background: rgba(19,95,214,.035); }
body.page-home .contract-scan-trigger.is-active { padding-left: 18px; background: rgba(19,95,214,.065); }
body.page-home .contract-scan-trigger.is-active::before { transform: scaleY(1); }
body.page-home .contract-scan-trigger__index { color: #5b6b80; }
body.page-home .contract-scan-trigger__copy strong { color: var(--hab-navy-soft); font-size: 1rem; }
body.page-home .contract-scan-trigger__copy small { color: #56677d; }
body.page-home .contract-scan-trigger__selected {
  position: absolute;
  top: 50%;
  right: 30px;
  color: var(--hab-blue);
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-50%) translateX(5px);
  transition: opacity var(--hab-state-transition), transform var(--hab-state-transition);
}
body.page-home .contract-scan-trigger.is-active .contract-scan-trigger__selected { opacity: 1; transform: translateY(-50%) translateX(0); }
body.page-home .contract-scan-trigger__signal { display: none; }
body.page-home .contract-scan-console {
  min-height: 650px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--hab-radius-lg);
  background: var(--hab-navy);
  box-shadow: 0 34px 78px rgba(3,17,37,.25);
}
body.page-home .contract-scan-console::before,
body.page-home .contract-scan-console::after { display: none; }
body.page-home .contract-scan-console__topbar { min-height: 58px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
body.page-home .contract-scan-console__workspace { grid-template-columns: minmax(0, 1.38fr) minmax(220px, .82fr); gap: 0; padding: 0; }
body.page-home .contract-document {
  min-width: 0;
  margin: 22px 0 22px 22px;
  padding: 22px;
  border: 1px solid rgba(7,28,55,.12);
  border-radius: var(--hab-radius-md) 0 0 var(--hab-radius-md);
  background: #f8f8f5;
  box-shadow: none;
}
body.page-home .contract-document__header { padding-bottom: 18px; border-bottom: 1px solid var(--hab-hairline); }
body.page-home .contract-document__header em { border-color: rgba(19,95,214,.18); background: rgba(19,95,214,.07); color: var(--hab-blue); }
body.page-home .contract-document__fields { gap: 0; margin-top: 12px; }
body.page-home .contract-document__field { grid-template-columns: 30px minmax(0, 1fr) 10px; min-height: 90px; padding: 14px 10px; border: 0; border-bottom: 1px solid var(--hab-hairline); border-radius: 0; background: transparent; opacity: 1; transition: background-color var(--hab-state-transition), transform var(--hab-state-transition); }
body.page-home .contract-document__field > span { align-self: start; margin-top: 3px; color: #5b6b80; background: transparent; }
body.page-home .contract-document__field strong { display: block; margin-top: 3px; color: var(--hab-navy-soft); }
body.page-home .contract-document__field p { margin: 6px 0 0; color: #56677d; font-size: .74rem; line-height: 1.45; }
body.page-home .contract-document__field > i { width: 8px; height: 8px; border-radius: 50%; background: #a9b4c1; }
body.page-home .contract-document__field.is-active { z-index: 1; opacity: 1; background: linear-gradient(90deg, rgba(19,95,214,.09), rgba(255,255,255,0)); transform: translateX(4px); }
body.page-home .contract-document__field.is-active > span { color: var(--hab-blue); background: transparent; }
body.page-home .contract-document__field.is-active > i { background: var(--hab-gold); box-shadow: 0 0 0 4px rgba(255,189,26,.16); }
body.page-home .contract-document__caption { margin: 16px 0 0; color: #56677d; font-size: .72rem; line-height: 1.45; }
body.page-home .contract-advisor-panel { margin: 22px 22px 22px 0; padding: 26px 24px; border: 0; border-left: 1px solid rgba(255,255,255,.12); border-radius: 0 var(--hab-radius-md) var(--hab-radius-md) 0; background: #082044; }
body.page-home .contract-advisor-panel__number { color: rgba(255,255,255,.08); font-size: clamp(4.8rem, 7vw, 7rem); }
body.page-home .contract-advisor-panel h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
body.page-home .contract-advisor-panel > p { color: rgba(247,249,252,.76); font-size: .88rem; line-height: 1.65; }
body.page-home .contract-advisor-panel__conclusion { margin-top: auto; }
body.page-home .contract-advisor-panel__conclusion strong { font-size: .82rem; line-height: 1.5; }
body.page-home .contract-scan-console__footer { min-height: 62px; margin: 0; padding: 0 22px; border-top: 1px solid rgba(255,255,255,.12); }

/* Conversion climax: retain the existing two-panel composition and add one
   local advice-line accent, never a page-wide decoration. */
body.page-home .intake-section { position: relative; padding: clamp(92px, 10vw, 142px) 0; background: #eef2f7; }
body.page-home .intake-layout { position: relative; isolation: isolate; }
body.page-home .intake-layout::before {
  position: absolute;
  z-index: -1;
  top: -22px;
  right: 18px;
  left: 18px;
  height: var(--hab-line-width);
  background: linear-gradient(90deg, var(--hab-blue) 0 88%, var(--hab-gold) 88% 100%);
  content: '';
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 440ms cubic-bezier(.2, .72, .2, 1) 80ms;
}
body.page-home .intake-layout::after {
  position: absolute;
  z-index: -1;
  top: -22px;
  right: 18px;
  bottom: -22px;
  width: var(--hab-line-width);
  background: var(--hab-gold);
  content: '';
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 360ms cubic-bezier(.2, .72, .2, 1) 360ms;
}
html:not(.js) body.page-home .intake-layout::before,
html:not(.js) body.page-home .intake-layout::after,
html.reduced-motion body.page-home .intake-layout::before,
html.reduced-motion body.page-home .intake-layout::after,
body.page-home .intake-section.has-entered-scene .intake-layout::before,
body.page-home .intake-section.has-entered-scene .intake-layout::after { transform: none; }
body.page-home .intake-card--canonical { border: 1px solid rgba(7,28,55,.1); box-shadow: 0 28px 64px rgba(3,17,37,.13); }
body.page-home .intake-card--canonical .intake-progress button,
body[data-page='contract-bekijken'] .form-progress [data-progress-step] { position: relative; min-height: 44px; color: #718096; }
body.page-home .intake-card--canonical .intake-progress button.is-active,
body[data-page='contract-bekijken'] .form-progress [data-progress-step].is-active { color: var(--hab-blue); }
body.page-home .intake-card--canonical .intake-progress button.is-complete,
body[data-page='contract-bekijken'] .form-progress [data-progress-step].is-complete { color: var(--hab-navy-soft); }
body.page-home .intake-card--canonical .intake-progress button.is-future,
body[data-page='contract-bekijken'] .form-progress [data-progress-step].is-future { color: #8995a5; }
body.page-home .intake-card--canonical .intake-progress button.is-complete span,
body[data-page='contract-bekijken'] .form-progress [data-progress-step].is-complete span { background: var(--hab-blue); border-color: var(--hab-blue); color: #fff; }
body.page-home .intake-card--canonical .intake-progress button.is-active span,
body[data-page='contract-bekijken'] .form-progress [data-progress-step].is-active span { background: #fff; border-color: var(--hab-blue); color: var(--hab-blue); box-shadow: 0 0 0 4px rgba(19,95,214,.1); }
body.page-home .intake-card--canonical input,
body.page-home .intake-card--canonical select,
body.page-home .intake-card--canonical textarea,
body[data-page='contract-bekijken'] .form-card input,
body[data-page='contract-bekijken'] .form-card select,
body[data-page='contract-bekijken'] .form-card textarea { min-height: 48px; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
body.page-home .intake-card--canonical textarea,
body[data-page='contract-bekijken'] .form-card textarea { min-height: 112px; }
body.page-home .intake-card--canonical input:focus,
body.page-home .intake-card--canonical select:focus,
body.page-home .intake-card--canonical textarea:focus,
body[data-page='contract-bekijken'] .form-card input:focus,
body[data-page='contract-bekijken'] .form-card select:focus,
body[data-page='contract-bekijken'] .form-card textarea:focus { border-color: var(--hab-blue); box-shadow: 0 0 0 4px rgba(19,95,214,.11); }
body.page-home .intake-card--canonical [aria-invalid='true'],
body[data-page='contract-bekijken'] .form-card [aria-invalid='true'] { border-color: #b42318; background: #fff8f7; }
body.page-home .intake-card--canonical button:disabled,
body[data-page='contract-bekijken'] .form-card button:disabled { cursor: not-allowed; opacity: .52; }
body.page-home .intake-card--canonical button[type='submit'],
body[data-page='contract-bekijken'] .form-card button[type='submit'] { background: var(--hab-gold); border-color: var(--hab-gold); color: var(--hab-navy-soft); }
body[data-page='contract-bekijken'] .form-card fieldset { min-width: 0; border: 0; }

/* Hero overlines share the CTA yellow. Desktop stays flush; mobile restores
   the short brand line from the selected flagship direction. */
body .home-hero .eyebrow,
body .rvp-hero .eyebrow,
body .page-hero .eyebrow { color: var(--brand-yellow); }
body .intake-aside > .eyebrow { gap: 0; color: var(--brand-yellow); }
@media (min-width: 769px) {
  body .home-hero .eyebrow::before,
  body .rvp-hero .eyebrow::before,
  body .page-hero .eyebrow::before,
  body .intake-aside > .eyebrow::before { display: none; }
}

/* One footer language and scale across all page templates. */
body .site-footer {
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body .site-footer .container {
  width: min(var(--site-container), calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}
body .site-footer .footer-grid,
body .site-footer .footer-main {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(130px, .75fr));
  gap: 42px;
  align-items: start;
  padding: 64px 0 34px;
}
body .site-footer .footer-brand { max-width: none; }
body .site-footer .footer-logo-lockup {
  display: block;
  width: 208px;
  height: auto;
  margin: 0 0 18px;
  padding: 0;
  line-height: 0;
}
body .site-footer .footer-brand img { width: 208px; height: auto; margin: 0 0 18px; }
body .site-footer .footer-logo-lockup img { display: block; margin: 0; }
body .site-footer .footer-brand > p { max-width: 25rem; margin: 0 0 20px; font-family: inherit; font-size: .88rem; font-weight: 400; line-height: 1.58; }
body .site-footer .footer-heading,
body .site-footer .footer-col h2 { margin: 0 0 14px; color: var(--brand-yellow) !important; font-family: inherit; font-size: .7rem; font-weight: 800; line-height: 1.3; letter-spacing: .11em; text-transform: uppercase; }
body .site-footer .footer-links,
body .site-footer .footer-contact { gap: 8px; }
body .site-footer .footer-links a,
body .site-footer .footer-contact a,
body .site-footer .footer-col a { min-height: 28px; color: rgba(247,249,252,.72); font-family: inherit; font-size: .84rem; font-weight: 400; line-height: 1.45; }
body .site-footer .footer-col ul { margin: 0; padding: 0; list-style: none; }
body .site-footer .footer-col li { margin: 0 0 8px; }
body .site-footer .footer-bottom { margin-top: 0; padding: 18px 0 24px; font-family: inherit; font-size: .72rem; line-height: 1.45; }

@media (max-width: 900px) {
  body.page-home .clarity-bar { grid-template-columns: 1fr; gap: 20px; margin-top: -34px; }
  body.page-home .clarity-bar__intro { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--hab-hairline); }
  body.page-home .contract-scan-layout { grid-template-columns: 1fr; }
  body.page-home .contract-scan-copy h2 { max-width: 680px; }
  body.page-home .contract-scan-console { min-height: 0; }
}

@media (max-width: 767.98px) {
  body.page-home .clarity-bar {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: -34px;
    padding: 17px 10px 16px;
    border-color: rgba(130, 175, 230, .24);
    border-radius: 17px;
    background: #071c37;
    box-shadow: 0 20px 42px rgba(2, 13, 30, .28);
  }
  body.page-home .clarity-bar::before { display: none; }
  body.page-home .clarity-bar__intro { display: none; }
  body.page-home .clarity-route { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; }
  body.page-home .clarity-route::before {
    position: absolute;
    top: 16px;
    right: 17%;
    left: 17%;
    display: block;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--hab-gold), #2c7df2 52%, rgba(122, 167, 222, .55));
    content: '';
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 430ms cubic-bezier(.2, .72, .2, 1) 120ms;
  }
  html:not(.js) body.page-home .clarity-route::before,
  html.reduced-motion body.page-home .clarity-route::before,
  body.page-home .clarity-bar.is-visible .clarity-route::before { transform: scaleX(1); }
  body.page-home .clarity-route li {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 62px;
    padding: 0 4px;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  body.page-home .clarity-route li::before,
  body.page-home .clarity-route li:not(:last-child)::after,
  body.page-home .clarity-route li > span,
  body.page-home .clarity-route small { display: none; }
  body.page-home .clarity-route__icon {
    display: grid;
    width: 33px;
    height: 33px;
    place-items: center;
    margin: 0 auto 8px;
    border: 1px solid rgba(144, 183, 229, .42);
    border-radius: 50%;
    color: #9dc8ff;
    background: #071c37;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.page-home .clarity-route li:first-child .clarity-route__icon { border-color: rgba(255, 189, 26, .8); color: var(--hab-gold); }
  body.page-home .clarity-route li > div { width: 100%; }
  body.page-home .clarity-route strong { color: #fff; font-size: .76rem; line-height: 1.25; }

  body.page-home .contract-scan-section { padding: 82px 0 68px; }
  body.page-home .contract-scan-layout { gap: 26px; }
  body.page-home .contract-scan-copy h2 { max-width: 10ch; font-size: clamp(2.3rem, 11.2vw, 3rem); line-height: .98; }
  body.page-home .contract-scan-copy .lead { max-width: 34rem; font-size: .96rem; line-height: 1.58; }
  body.page-home .contract-scan-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid var(--hab-hairline);
    border-radius: 14px;
    background: var(--hab-hairline);
  }
  body.page-home .contract-scan-trigger,
  body.page-home .contract-scan-trigger:nth-child(-n + 2) {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    padding: 10px 11px;
    border: 0;
    background: var(--hab-warm-white);
    transform: none;
  }
  body.page-home .contract-scan-trigger:hover,
  body.page-home .contract-scan-trigger:focus-visible { padding-left: 11px; background: #f1f5f9; transform: none; }
  body.page-home .contract-scan-trigger.is-active { min-height: 62px; padding: 10px 11px 10px 14px; background: #e8f0fa; transform: none; }
  body.page-home .contract-scan-trigger::before { width: 3px; }
  body.page-home .contract-scan-trigger__index { font-size: .61rem; }
  body.page-home .contract-scan-trigger__copy strong { font-size: .79rem; line-height: 1.25; }
  body.page-home .contract-scan-trigger__copy small,
  body.page-home .contract-scan-trigger.is-active .contract-scan-trigger__copy small { display: none; }
  body.page-home .contract-scan-trigger__selected { top: 9px; right: 9px; width: 8px; height: 8px; overflow: hidden; color: transparent; border: 1px solid #fff; border-radius: 50%; background: var(--hab-gold); box-shadow: 0 0 0 1px rgba(255,189,26,.55); transform: none; }
  body.page-home .contract-scan-trigger.is-active .contract-scan-trigger__selected { transform: none; }
  body.page-home .contract-scan-trigger__signal { display: none; }
  body.page-home .contract-scan-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 14px; }
  body.page-home .contract-scan-console { min-height: 0; margin-top: 0; border-radius: 16px; box-shadow: 0 24px 54px rgba(3,17,37,.2); }
  body.page-home .contract-scan-console__topbar { display: grid; grid-template-columns: 1fr auto; min-height: 50px; padding: 0 14px; }
  body.page-home .contract-scan-console__status { display: none; }
  body.page-home .contract-scan-console__workspace { grid-template-columns: 1fr; }
  body.page-home .contract-document { margin: 12px 12px 0; padding: 14px; border-radius: 11px; }
  body.page-home .contract-document__header { grid-template-columns: 34px 1fr; padding-bottom: 12px; }
  body.page-home .contract-document__icon { width: 34px; height: 34px; }
  body.page-home .contract-document__header em { display: none; }
  body.page-home .contract-document__fields { margin-top: 8px; }
  body.page-home .contract-document__field { display: none; min-height: 0; padding: 12px 5px; }
  body.page-home .contract-document__field.is-active { display: grid; transform: none; }
  body.page-home .contract-document__field p { font-size: .79rem; }
  body.page-home .contract-document__caption { margin-top: 10px; font-size: .75rem; }
  body.page-home .contract-advisor-panel { min-height: 0; margin: 0 12px 12px; padding: 18px 16px; border: 0; border-radius: 0 0 11px 11px; }
  body.page-home .contract-advisor-panel__number { top: 10px; right: 14px; font-size: 3.35rem; }
  body.page-home .contract-advisor-panel h3 { margin-top: 12px; font-size: 1.25rem; }
  body.page-home .contract-advisor-panel > p { max-width: 30rem; font-size: .84rem; line-height: 1.58; }
  body.page-home .contract-advisor-panel__conclusion { margin-top: 16px; }
  body.page-home .contract-scan-console__footer { display: block; min-height: 0; padding: 13px 14px; }
  body.page-home .contract-scan-console__footer span { font-size: .76rem; }
  body.page-home .contract-scan-console__footer p { margin: 6px 0 0; font-size: .76rem; line-height: 1.45; }

  body.page-home .services-section { padding: 66px 0 62px; }
  body.page-home .services-section::before { background-size: 64px 64px; opacity: .14; }
  body.page-home .services-head { max-width: 20rem; margin-bottom: 24px; }
  body.page-home .services-head h2 { font-size: clamp(2rem, 9.8vw, 2.55rem); line-height: 1.02; }
  body.page-home .service-list { padding-bottom: 0; }
  body.page-home .service-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px 12px;
    min-height: 0;
    padding: 20px 0;
  }
  body.page-home .service-row h3 { margin-bottom: 5px; font-size: 1.12rem; line-height: 1.2; }
  body.page-home .service-row p { font-size: .86rem; line-height: 1.55; }
  body.page-home .service-link { grid-column: 2; min-height: 40px; margin-top: 0; font-size: .82rem; }
  body.page-home .service-row--accent,
  body.page-home .service-row--accent:hover {
    margin: 12px 0 0;
    padding: 18px 16px;
    border-radius: 14px;
  }
  body.page-home .service-row--accent .service-link { margin-top: 2px; }

  body.page-home .trust-section { padding: 70px 0 68px; }
  body.page-home .trust-layout { gap: 30px; }
  body.page-home .trust-media img { aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: 0 20px 46px rgba(7,28,55,.12); }
  body.page-home .trust-media::after { right: -7px; bottom: -7px; width: 58px; height: 58px; }
  body.page-home .trust-copy h2 { max-width: 11ch; font-size: clamp(2.15rem, 10vw, 2.75rem); line-height: 1; }
  body.page-home .trust-copy .lead { font-size: .96rem; line-height: 1.6; }
  body.page-home .trust-list { margin-top: 24px; }
  body.page-home .trust-list li { min-height: 50px; padding: 14px 0 14px 28px; font-size: .86rem; line-height: 1.45; }
  body.page-home .trust-list li::before { top: 19px; }

  body.page-home .transparency-strip { gap: 22px; margin-top: 44px; padding: 30px 0; }
  body.page-home .transparency-strip__heading h2 { max-width: 12ch; font-size: clamp(1.9rem, 8.8vw, 2.35rem); line-height: 1.02; }
  body.page-home .transparency-strip__items { border-top: 1px solid var(--hab-hairline); }
  body.page-home .transparency-strip__items article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
    padding: 16px 0;
  }
  body.page-home .transparency-strip__items article + article { border-top: 1px solid var(--hab-hairline); }
  body.page-home .transparency-strip__items span { grid-row: 1 / 3; margin: 2px 0 0; }
  body.page-home .transparency-strip__items strong { font-size: .91rem; }
  body.page-home .transparency-strip__items p { margin: 4px 0 0; font-size: .78rem; line-height: 1.5; }

  body.page-home .transparency-strip + .reviews-block { margin-top: 44px; }
  body.page-home .reviews-block { row-gap: 20px; padding-top: 0; }
  body.page-home .reviews-heading h2 { max-width: 11ch; font-size: clamp(2.1rem, 9.7vw, 2.6rem); line-height: 1; }
  body.page-home .reviews-heading__count { margin-top: 14px; }
  body.page-home .reviews-heading__count b { font-size: 1.45rem; }
  body.page-home .review-grid { gap: 12px; }
  body.page-home .review-card,
  body.page-home .review-card--featured { min-height: 260px; padding: 22px; border-radius: 16px; }
  body.page-home .review-card blockquote,
  body.page-home .review-card--featured blockquote { margin: auto 0 24px; font-size: 1.04rem; line-height: 1.48; }
  body.page-home .review-card__mark { top: 42px; left: 17px; font-size: 6rem; }
  body.page-home .review-note { font-size: .72rem; line-height: 1.45; }

  body.page-home .intake-section { padding: 70px 0; }
  body.page-home .intake-layout { gap: 16px; }
  body.page-home .intake-intro { min-height: 0; padding: 28px 22px; border-radius: 16px; }
  body.page-home .intake-intro h2 { max-width: 9ch; font-size: clamp(2.2rem, 10.5vw, 2.75rem); line-height: 1; }
  body.page-home .intake-intro > p:not(.eyebrow) { margin-top: 18px; font-size: .92rem; line-height: 1.58; }
  body.page-home .intake-intro ul { margin-top: 22px; }
  body.page-home .intake-intro li { padding: 12px 0 12px 26px; font-size: .84rem; }
  body.page-home .intake-intro li::before { top: 19px; }
  body.page-home .intake-card--canonical { padding: 22px 16px; border-radius: 16px; box-shadow: 0 20px 48px rgba(3,17,37,.1); }
  body.page-home .intake-layout::before { top: -14px; right: 7px; left: 7px; }
  body.page-home .intake-layout::after { top: -14px; right: 7px; bottom: -14px; }
  body.page-home .intake-card--canonical .intake-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 22px; overflow: visible; }
  body.page-home .intake-card--canonical .intake-progress button { min-width: 0; min-height: 48px; padding: 5px 1px; font-size: .62rem; }
  body.page-home .intake-card--canonical .intake-progress button span { margin: 0 auto 3px; }
  body.page-home .intake-card--canonical .intake-step h2 { font-size: clamp(1.72rem, 8vw, 2.1rem); }
  body.page-home .intake-card--canonical .intake-step > .lede { font-size: .9rem; }
  body.page-home .intake-card--canonical .choice-radio { min-height: 54px; padding: 12px 44px 12px 12px; font-size: .86rem; }
  body.page-home .intake-card--canonical .intake-actions { margin-top: 20px; }
  body.page-home .intake-card--canonical .intake-actions .btn { width: 100%; }
  body.page-home .intake-card--canonical .btn,
  body[data-page='contract-bekijken'] .form-card .button { min-height: 48px; }

}

@media (max-width: 360px) {
  body.page-home .contract-scan-console__brand { font-size: .58rem; letter-spacing: .055em; }
  body.page-home .contract-scan-console__count { font-size: .62rem; }
  body.page-home .intake-intro .eyebrow { gap: 8px; font-size: .61rem; letter-spacing: .075em; }
  body.page-home .intake-intro .eyebrow::before { width: 18px; flex-basis: 18px; }
  body.page-home .intake-card--canonical .intake-progress button { font-size: 0; }
  body.page-home .intake-card--canonical .intake-progress button span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    margin: 0 auto;
    border: 1px solid rgba(19,95,214,.18);
    border-radius: 7px;
    font-size: .61rem;
  }
  body.page-home .intake-card--canonical .choice-radio { padding: 12px 42px 12px 10px; }
}

/* Form choices use the full card as the control. The native radio remains in
   the accessibility tree while selection is communicated by the card itself. */
body.page-intake .radio-card label {
  position: relative;
  padding-right: 3.4rem;
}
body.page-intake .radio-card label::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  color: #fff;
  border-radius: .5rem;
  background: var(--brand-blue);
  content: "✓";
  font-size: .78rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(-50%) scale(.78);
  transition: opacity 160ms ease, transform 160ms ease;
}
body.page-intake .radio-card input:checked + label::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
body.page-intake .radio-card input:focus-visible + label {
  outline: 2px solid var(--brand-blue);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px var(--brand-blue);
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .clarity-route::before,
  body.page-home .clarity-route li:not(:last-child)::after,
  body.page-home .contract-scan-trigger,
  body.page-home .contract-scan-trigger::before,
  body.page-home .contract-scan-trigger__selected,
  body.page-home .contract-document__field,
  body.page-home .intake-layout::before,
  body.page-home .intake-layout::after { transition-duration: 0.01ms !important; }

  body.page-home .clarity-route::before,
  body.page-home .clarity-route li:not(:last-child)::after,
  body.page-home .intake-layout::before,
  body.page-home .intake-layout::after { transform: none !important; }
}

@media (min-width: 769px) and (max-width: 1120px) {
  body .site-header .header-inner,
  body .site-header .nav-shell,
  html.js body.page-home .site-header .header-inner,
  html.js body.page-rvp .site-header .header-inner { grid-template-columns: minmax(0, 1fr) 44px !important; }
  body .menu-toggle { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}

@media (max-width: 900px) {
  body .menu-toggle { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; }

  /* Compact footer: brand first, then two easy-to-scan link columns. */
  body .site-footer { padding: 32px 0 0; }
  body .site-footer .container { width: min(var(--site-container), calc(100% - 32px)); }
  body .site-footer .footer-grid,
  body .site-footer .footer-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding-top: 0;
    padding-bottom: 0;
  }
  body .site-footer .footer-brand { grid-column: 1 / -1; max-width: none; }
  body .site-footer .footer-logo-lockup { width: 172px; margin-bottom: 14px; }
  body .site-footer .footer-logo-lockup img,
  body .site-footer .footer-brand > img { width: 172px; margin-bottom: 14px; }
  body .site-footer .footer-logo-lockup img { margin-bottom: 0; }
  body .site-footer .footer-brand > p { max-width: 29rem; margin: 0 0 12px; font-size: .84rem; line-height: 1.5; }
  body .site-footer .footer-brand > .btn-footer { width: min(220px, 100%); min-height: 48px; margin: 0; }
  body .site-footer .footer-heading,
  body .site-footer .footer-col h2 { margin: 0 0 8px; font-size: .68rem; }
  body .site-footer .footer-links,
  body .site-footer .footer-contact { gap: 2px; }
  body .site-footer .footer-links a,
  body .site-footer .footer-contact a,
  body .site-footer .footer-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: .8rem; line-height: 1.3; }
  body .site-footer a[href^='mailto:'] { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  body .site-footer .footer-col ul { margin: 0; }
  body .site-footer .footer-col li { margin: 0; }
  body .site-footer .footer-bottom { margin-top: 22px; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); }
  body .site-footer .footer-bottom,
  body .site-footer .footer-bottom p { font-size: .71rem; line-height: 1.45; }
}

/* -------------------------------------------------------------------------- */
/* Mobile interior-page flagship pass                                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  body.page-how .section,
  body.page-about .section,
  body.page-rvp .section { padding-block: 64px; }

  body.page-how .signature-heading,
  body.page-about .signature-heading,
  body.page-rvp .section-head { max-width: 35rem; margin-bottom: 28px; }

  body.page-how .signature-heading h2,
  body.page-about .signature-heading h2,
  body.page-rvp .section-head h2 { font-size: clamp(2rem, 9.4vw, 2.55rem); line-height: 1.03; letter-spacing: -.035em; }

  body.page-how .signature-heading .lede,
  body.page-about .signature-heading .lede,
  body.page-rvp .section-head .lead { margin-top: 14px; font-size: .94rem; line-height: 1.58; }

  body.page-how .cta-panel,
  body.page-about .cta-panel {
    gap: 22px;
    padding: 28px 22px;
    border-radius: 16px;
    box-shadow: 0 22px 48px rgba(3, 17, 37, .14);
  }
  body.page-how .cta-panel h2,
  body.page-about .cta-panel h2 { font-size: clamp(2rem, 9.4vw, 2.55rem); line-height: 1.02; }
  body.page-how .cta-panel p,
  body.page-about .cta-panel p { font-size: .9rem; line-height: 1.55; }

  /* Zo werkt het: one compact route dossier instead of a tall stack of cards. */
  body.page-how .how-route { border-radius: 16px; box-shadow: 0 22px 52px rgba(3, 17, 37, .12); }
  body.page-how .how-route-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 8px; }
  body.page-how .how-route-tab {
    min-height: 62px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
  }
  body.page-how .how-route-tab span { font-size: .58rem; }
  body.page-how .how-route-tab strong { font-size: .82rem; line-height: 1.2; }
  body.page-how .how-route-tab[aria-selected='true'] { box-shadow: inset 3px 0 0 var(--sig-gold); }
  body.page-how .how-route-dossier__top {
    min-height: 50px;
    padding: 10px 14px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    font-size: .58rem;
  }
  body.page-how .how-route-dossier__top > span:last-child { text-align: right; }
  body.page-how .how-route-panel { padding: 16px 16px 18px; }
  body.page-how .how-route-panel__kicker { margin-bottom: 10px; font-size: .61rem; }
  body.page-how .how-route-field { min-height: 0; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  body.page-how .how-route-field > span { margin: 0; font-size: .58rem; }
  body.page-how .how-route-field h3 { margin-bottom: 3px; font-size: .97rem; line-height: 1.25; }
  body.page-how .how-route-field p { font-size: .8rem; line-height: 1.48; }
  body.page-how .how-expect-strip { margin-top: 14px; border-radius: 14px; box-shadow: none; }
  body.page-how .how-expect-strip article { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 14px 16px; }
  body.page-how .how-expect-strip span { margin: 2px 0 0; font-size: .59rem; }
  body.page-how .how-expect-strip p { font-size: .8rem; line-height: 1.46; }
  body.page-how .how-prepare { gap: 28px; }
  body.page-how .how-prepare h2 { font-size: clamp(2rem, 9.4vw, 2.55rem); line-height: 1.03; }
  body.page-how .how-prepare ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-how .how-prepare li {
    min-height: 82px;
    padding: 18px 10px 16px 30px;
    font-size: .84rem;
    line-height: 1.35;
  }
  body.page-how .how-prepare li:nth-child(odd) { border-right: 1px solid var(--sig-line); }
  body.page-how .how-prepare li::before { top: 22px; left: 4px; width: 8px; height: 8px; }

  /* Over HAB: retain every interactive module, but give it an editorial rhythm. */
  body.page-about .about-why { gap: 30px; }
  body.page-about .about-why-media img { aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: 0 20px 46px rgba(7, 28, 55, .12); }
  body.page-about .about-why-media::after { right: -6px; bottom: -6px; width: 26%; height: 32%; }
  body.page-about .about-why-media figcaption { right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 9px 12px; font-size: .76rem; }
  body.page-about .about-why h2 { margin-bottom: 16px; font-size: clamp(2.05rem, 9.6vw, 2.62rem); line-height: 1.02; }
  body.page-about .about-why p { font-size: .91rem; line-height: 1.6; }
  body.page-about .about-pull { margin-top: 20px; padding-top: 16px; font-size: 1rem; line-height: 1.48; }

  body.page-about .about-compass { gap: 16px; }
  body.page-about .about-compass-map {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 60px 8px 8px;
    border-radius: 16px;
  }
  body.page-about .about-compass-center { top: 8px; left: 8px; width: calc(100% - 16px); height: 44px; border-radius: 9px; }
  body.page-about .about-compass-center span { font-size: .5rem; }
  body.page-about .about-compass-center strong { font-size: .9rem; }
  body.page-about .about-compass-tab { min-height: 74px; grid-template-columns: 20px 1fr; gap: 2px 6px; padding: 9px; border-radius: 10px; }
  body.page-about .about-compass-tab span { font-size: .56rem; }
  body.page-about .about-compass-tab strong { font-size: .74rem; line-height: 1.2; }
  body.page-about .about-compass-tab small { display: none; }
  body.page-about .about-compass-detail { border-radius: 16px; box-shadow: 0 20px 50px rgba(3, 17, 37, .17); }
  body.page-about .about-compass-detail > header {
    min-height: 48px;
    padding: 10px 14px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    font-size: .56rem;
  }
  body.page-about .about-compass-detail > header span:last-child { text-align: right; }
  body.page-about .about-compass-panel { padding: 18px 16px; }
  body.page-about .about-compass-panel__title { margin-bottom: 14px; font-size: 1.1rem; }
  body.page-about .about-compass-panel dl div { padding: 13px 0; }
  body.page-about .about-compass-panel dt { margin-bottom: 3px; font-size: .58rem; }
  body.page-about .about-compass-panel dd { font-size: .82rem; line-height: 1.5; }

  body.page-about .about-standard-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  body.page-about .about-standard-track button {
    min-height: 76px;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 7px;
    padding: 9px;
    border-radius: 10px;
  }
  body.page-about .about-standard-track button span { width: 24px; height: 24px; border-width: 3px; font-size: .54rem; }
  body.page-about .about-standard-track button strong { font-size: .78rem; line-height: 1.25; }
  body.page-about .about-standard-workspace { border-radius: 16px; box-shadow: 0 22px 52px rgba(0, 0, 0, .18); }
  body.page-about .about-standard-panels .signature-panel { min-height: 0; padding: 22px 18px; }
  body.page-about .about-standard-index { margin-bottom: 14px; font-size: .6rem; }
  body.page-about .about-standard-panels h3 { margin-bottom: 9px; font-size: 1.58rem; line-height: 1.08; }
  body.page-about .about-standard-panels h3,
  body.page-about .about-standard-panels strong { color: var(--text-on-light); }
  body.page-about .about-standard-panels p { margin-bottom: 16px; color: #435a73; font-size: .88rem; line-height: 1.55; }
  body.page-about .about-standard-panels strong { padding-top: 14px; font-size: .82rem; line-height: 1.5; }
  body.page-about .about-standard-outcomes { padding: 18px; }
  body.page-about .about-standard-outcomes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  body.page-about .about-standard-outcomes li { min-height: 58px; padding: 12px 8px 12px 19px; font-size: .76rem; line-height: 1.35; }
  body.page-about .about-standard-outcomes li:nth-child(odd) { border-right: 1px solid var(--sig-line); }
  body.page-about .about-standard-outcomes li::before { left: 3px; width: 7px; height: 7px; }

  body.page-about .about-trust { gap: 22px; padding: 22px 18px; border-radius: 16px; box-shadow: none; }
  body.page-about .about-trust h2 { margin-bottom: 10px; font-size: 2rem; line-height: 1.03; }
  body.page-about .about-trust p { font-size: .88rem; line-height: 1.55; }
  body.page-about .about-trust dl div { grid-template-columns: 92px 1fr; gap: 10px; padding: 12px 0; }
  body.page-about .about-trust dt { font-size: .61rem; }
  body.page-about .about-trust dd { font-size: .82rem; line-height: 1.4; }
  body.page-about .about-trust nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-about .about-trust nav a { min-height: 46px; padding: 0 8px; font-size: .76rem; }

  /* Reclamevrij+: retain the interactive story, remove unnecessary mobile bulk. */
  body.page-rvp .rvp-signal { padding-block: 18px; }
  body.page-rvp .rvp-benefits-grid { gap: 26px; }
  body.page-rvp .rvp-benefit-list article { padding: 18px 0; }
  body.page-rvp .rvp-benefit-list article > span { font-size: .62rem; }
  body.page-rvp .rvp-benefit-list h3 { margin-bottom: 5px; font-size: 1.05rem; }
  body.page-rvp .rvp-benefit-list p { font-size: .84rem; line-height: 1.5; }
  body.page-rvp .rvp-compare-card { padding: 8px; border-radius: 16px; box-shadow: 0 20px 46px rgba(7, 28, 55, .12); }
  body.page-rvp .rvp-demo-toolbar { padding: 9px; gap: 8px; }
  body.page-rvp .rvp-demo-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-rvp .rvp-demo-modes button { min-width: 0; min-height: 44px; padding-inline: 6px; }
  body.page-rvp .rvp-demo-stage { height: 250px; }

  body.page-rvp .rvp-noise { border-radius: 16px; box-shadow: 0 24px 56px rgba(0,0,0,.18); }
  body.page-rvp .rvp-noise-devices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 6px; }
  body.page-rvp .rvp-noise-devices button { min-height: 52px; justify-content: center; gap: 4px; padding: 6px 3px; flex-direction: column; border: 0; border-radius: 8px; font-size: .7rem; }
  body.page-rvp .rvp-noise-devices button + button { border: 0; }
  body.page-rvp .rvp-noise-devices button span { font-size: .52rem; }
  body.page-rvp .rvp-noise-workspace { min-height: 0; }
  body.page-rvp .rvp-noise-visual { display: block; min-height: 0; padding: 58px 9px 9px; }
  body.page-rvp .rvp-noise-visual > header { top: 14px; right: 12px; left: 12px; font-size: .54rem; }
  body.page-rvp .rvp-device-outline,
  body.page-rvp .rvp-device-outline[data-device='laptop'],
  body.page-rvp .rvp-device-outline[data-device='tablet'] {
    width: 100%;
    height: auto;
    min-height: 282px;
    padding: 92px 8px 8px;
    border-radius: 18px;
  }
  body.page-rvp .rvp-device-screen,
  body.page-rvp .rvp-device-outline[data-device='laptop'] .rvp-device-screen,
  body.page-rvp .rvp-device-outline[data-device='tablet'] .rvp-device-screen { inset: 14px 9px auto; height: 64px; border-radius: 9px; }
  body.page-rvp .rvp-device-outline[data-device='laptop'] .rvp-device-speaker { top: 7px; bottom: auto; width: 44px; height: 3px; }
  body.page-rvp .rvp-noise-hotspots { display: grid; gap: 6px; }
  body.page-rvp .rvp-noise-hotspot { position: static; min-height: 52px; grid-template-columns: 26px 1fr; padding: 8px 10px; white-space: normal; }
  body.page-rvp .rvp-noise-hotspot span { width: 24px; height: 24px; }
  body.page-rvp .rvp-noise-hotspot strong { font-size: .66rem; }
  body.page-rvp .rvp-noise-detail > header { min-height: 48px; padding: 10px 14px; gap: 4px; font-size: .55rem; }
  body.page-rvp .rvp-noise-detail .signature-panel { padding: 18px 16px; }
  body.page-rvp .rvp-noise-panel-title { margin-bottom: 14px; font-size: 1.42rem; }
  body.page-rvp .rvp-noise-detail dl div { padding: 12px 0; }
  body.page-rvp .rvp-noise-detail dt { margin-bottom: 3px; font-size: .57rem; }
  body.page-rvp .rvp-noise-detail dd { font-size: .82rem; line-height: 1.48; }

  body.page-rvp .rvp-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 20px 0; }
  body.page-rvp .rvp-step-index { grid-row: 1 / 3; margin: 2px 0 0; }
  body.page-rvp .rvp-step h3 { margin-bottom: 5px; font-size: 1.05rem; }
  body.page-rvp .rvp-step p { font-size: .82rem; line-height: 1.5; }
  body.page-rvp .rvp-metric-shell { gap: 28px; }
  body.page-rvp .rvp-metric-panel { padding: 8px; border-radius: 16px; }
  body.page-rvp .rvp-metric-card { min-height: 116px; padding: 16px; }
  body.page-rvp .rvp-metric-card strong { font-size: 1.75rem; }
  body.page-rvp .rvp-metric-card span { font-size: .66rem; line-height: 1.4; }
  body.page-rvp .rvp-metrics .rvp-disclaimer { margin-top: 9px; font-size: .64rem; text-align: left; }
  body.page-rvp .rvp-faq-grid { gap: 7px; }
  body.page-rvp .rvp-faq-grid details { border-radius: 11px; }
  body.page-rvp .rvp-faq-grid summary { min-height: 60px; padding: 12px 14px; font-size: .86rem; }
  body.page-rvp .rvp-faq-grid .faq-answer { padding: 0 14px 14px; font-size: .82rem; line-height: 1.52; }

  body.page-rvp .rvp-rustline { border-radius: 16px; box-shadow: 0 22px 52px rgba(3,17,37,.12); }
  body.page-rvp .rvp-rustline-control { padding: 18px 14px; }
  body.page-rvp .rvp-rustline-control > p:first-child { margin-bottom: 10px; }
  body.page-rvp .rvp-rustline-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.page-rvp .rvp-rustline-options button { min-height: 64px; grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 7px 4px; text-align: center; }
  body.page-rvp .rvp-rustline-options button span { width: 24px; height: 24px; }
  body.page-rvp .rvp-rustline-options button strong { font-size: .68rem; line-height: 1.25; }
  body.page-rvp .rvp-rustline-note { margin: 12px 0 0; padding: 0; font-size: .76rem; line-height: 1.48; }
  body.page-rvp .rvp-rustline-console > header { padding: 11px 14px; font-size: .55rem; }
  body.page-rvp .rvp-rustline-routes { gap: 9px; padding: 12px; }
  body.page-rvp .rvp-rustline-route { padding: 12px; }
  body.page-rvp .rvp-rustline-route > div { gap: 3px; }
  body.page-rvp .rvp-rustline-route > div span { font-size: .88rem; }
  body.page-rvp .rvp-rustline-route ol,
  body.page-rvp .rvp-rustline-route--busy ol,
  body.page-rvp .rvp-rustline-route--calm ol { gap: 5px; padding-left: 26px; }
  body.page-rvp .rvp-rustline-route li { min-height: 44px; padding: 8px 10px; font-size: .72rem; }
  body.page-rvp .rvp-rustline-console > footer { padding: 11px 14px; gap: 7px; }
  body.page-rvp .rvp-rustline-console > footer p { font-size: .66rem; line-height: 1.45; }
  body.page-rvp .rvp-cta-box { padding: 28px 22px; border-radius: 16px; }
  body.page-rvp .rvp-cta-box h2 { font-size: clamp(2rem, 9.4vw, 2.55rem); line-height: 1.02; }
  body.page-rvp .rvp-cta-box .button { width: 100%; }
  body.page-rvp .rvp-energy-link-section { padding-block: 32px; }

  /* Contact and the direct intake route use one compact, calm form language. */
  body.page-contact #contactformulier { padding-block: 64px; }
  body.page-contact #contactformulier .intake-grid { gap: 28px; }
  body.page-contact #contactformulier .intake-grid > div:first-child h2 { font-size: clamp(2.1rem, 9.8vw, 2.7rem); line-height: 1.02; }
  body.page-contact #contactformulier .intake-grid > div:first-child .lede { margin: 12px 0 16px; font-size: .94rem; line-height: 1.58; }
  body.page-contact #contactformulier .intake-grid > div:first-child > p:last-child { font-size: .84rem; }
  body.page-contact #contactformulier .form-card,
  body.page-intake .form-card { padding: 22px 18px; border-radius: 16px; box-shadow: 0 20px 48px rgba(3, 17, 37, .1); }
  body.page-contact #contactformulier .field-grid,
  body.page-intake .field-grid { grid-template-columns: 1fr; gap: 0; }
  body.page-contact #contactformulier .field,
  body.page-intake .field { margin-bottom: 16px; }
  body.page-contact #contactformulier .field input,
  body.page-contact #contactformulier .field select,
  body.page-intake .field input,
  body.page-intake .field select { min-height: 52px; }
  body.page-contact #contactformulier .field textarea,
  body.page-intake .field textarea { min-height: 116px; }
  body.page-contact #contactformulier .checkbox-field,
  body.page-intake .checkbox-field { gap: 10px; font-size: .78rem; line-height: 1.5; }
  body.page-contact #contactformulier .checkbox-field input,
  body.page-intake .checkbox-field input { width: 20px; height: 20px; margin-top: 1px; }
  body.page-contact #contactformulier .form-actions { margin-top: 18px; padding-top: 18px; }
  body.page-contact #contactformulier .form-actions .button { width: 100%; }

  body.page-intake .intake-shell { padding: 94px 0 52px; background: linear-gradient(180deg, #f4f7fb 0, #fffaf1 52%, #f7f9fc 100%); }
  body.page-intake .intake-grid { gap: 24px; }
  body.page-intake .intake-aside .eyebrow { margin-bottom: 12px; }
  body.page-intake .intake-aside h1 { margin-bottom: 14px; font-size: clamp(2.5rem, 11vw, 3.05rem); line-height: .98; }
  body.page-intake .intake-aside .lede { font-size: .94rem; line-height: 1.58; }
  body.page-intake .intake-assurances { display: grid; grid-template-columns: 1fr; margin-top: 20px; }
  body.page-intake .intake-assurances li { min-height: 44px; padding: 10px 0; font-size: .82rem; }
  body.page-intake .form-progress { gap: 3px; margin-bottom: 22px; padding-bottom: 14px; }
  body.page-intake .form-progress li { min-width: 0; font-size: .59rem; text-align: center; }
  body.page-intake .form-progress li span { display: grid; width: 26px; height: 26px; place-items: center; margin: 0 auto 5px; border: 1px solid rgba(19,95,214,.16); border-radius: 7px; }
  body.page-intake .form-progress li[aria-current='step'] span { width: 26px; padding: 0; }
  body.page-intake .form-progress li b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.page-intake .form-step h2 { font-size: clamp(1.8rem, 8.6vw, 2.2rem); line-height: 1.04; }
  body.page-intake .form-step > .lede { margin-bottom: 20px; font-size: .86rem; line-height: 1.52; }
  body.page-intake .radio-cards { gap: 8px; }
  body.page-intake .radio-card label { min-height: 60px; padding: 11px 48px 11px 12px; font-size: .86rem; line-height: 1.35; }
  body.page-intake .form-actions { gap: 8px; margin-top: 18px; padding-top: 18px; }
  body.page-intake .form-actions .button { flex: 1 1 0; min-width: 0; padding-inline: 10px; }

  /* Legal pages: a document surface with strong reading rhythm, not a blank slab. */
  body.page-legal .legal-hero {
    padding: 94px 0 52px;
    background:
      linear-gradient(rgba(19,95,214,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(19,95,214,.025) 1px, transparent 1px),
      #f5f7fa;
    background-size: 48px 48px;
  }
  body.page-legal .legal-box { padding: 28px 20px 32px; border: 1px solid #dbe2ea; border-radius: 16px; box-shadow: 0 20px 50px rgba(3,17,37,.07); }
  body.page-legal .legal-box .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; }
  body.page-legal .legal-box .eyebrow::before { width: 22px; height: 2px; background: linear-gradient(90deg, var(--brand-blue) 0 58%, var(--brand-yellow) 58%); content: ''; }
  body.page-legal .legal-box h1 { margin-bottom: 10px; font-size: clamp(2.05rem, 9.7vw, 2.7rem); line-height: 1.02; }
  body.page-legal .legal-updated { margin-bottom: 18px; font-size: .74rem; }
  body.page-legal .legal-box h1 + p:not(.legal-updated),
  body.page-legal .legal-box .legal-updated + p { color: #243d5a; font-size: 1rem; line-height: 1.65; }
  body.page-legal .legal-box h2 { position: relative; margin: 34px 0 12px; padding-top: 22px; font-size: 1.46rem; line-height: 1.18; }
  body.page-legal .legal-box h2::before { position: absolute; top: -1px; left: 0; width: 62px; height: 2px; background: linear-gradient(90deg, var(--brand-blue) 0 70%, var(--brand-yellow) 70%); content: ''; }
  body.page-legal .legal-box p,
  body.page-legal .legal-box li { color: #3a5069; font-size: .91rem; line-height: 1.72; }
  body.page-legal .legal-box ul,
  body.page-legal .legal-box ol { padding-left: 20px; }
  body.page-legal .legal-box li + li { margin-top: 7px; }
  body.page-legal .legal-box a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  body.page-legal .page-actions { gap: 8px; margin-top: 32px; padding-top: 20px; }
  body.page-legal .page-actions .button,
  body.page-legal .page-actions .btn { width: 100%; }
}

@media (max-width: 340px) {
  body.page-how .how-prepare ul { grid-template-columns: 1fr; }
  body.page-how .how-prepare li:nth-child(odd) { border-right: 0; }
  body.page-about .about-standard-outcomes ul { grid-template-columns: 1fr; }
  body.page-about .about-standard-outcomes li:nth-child(odd) { border-right: 0; }
  body.page-intake .form-actions { flex-direction: column-reverse; }
  body.page-legal .legal-box { padding-inline: 17px; }
}

/* -------------------------------------------------------------------------- */
/* Canonical tablet layer: 768–1120px only                                   */
/* -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1120px) {
  body { --tablet-header-height: 74px; }
  body.menu-open,
  body.nav-open { height: 100svh; overflow-y: hidden; }

  /* A full-width dark tablet header, sharing only the vertical scroll axis. */
  body .site-header,
  html.has-motion body .site-header,
  html.motion-ready body .site-header,
  html.js body .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: var(--tablet-header-height) !important;
    min-height: var(--tablet-header-height) !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #031125;
    box-shadow: 0 1px 0 rgba(255,255,255,.09);
    backdrop-filter: none;
    transform: translateY(0) !important;
    transition: transform 220ms cubic-bezier(.2,.72,.2,1), box-shadow 180ms ease;
  }
  body .site-header.is-sticky,
  body .site-header.is-scrolled { top: 0 !important; height: var(--tablet-header-height) !important; border-radius: 0; box-shadow: 0 12px 32px rgba(3,17,37,.25); }
  body:not(.nav-open):not(.menu-open) .site-header.is-scrolling-down,
  body:not(.nav-open):not(.menu-open) .site-header.is-near-footer { transform: translateY(-100%) !important; }
  body .site-header.is-scrolling-up,
  body.nav-open .site-header,
  body.menu-open .site-header { transform: translateY(0) !important; }
  body .site-header .header-inner,
  body .site-header .nav-shell,
  html.js body.page-home .site-header .header-inner,
  html.js body.page-rvp .site-header .header-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--tablet-header-height) !important;
    min-height: var(--tablet-header-height) !important;
    padding: 0 clamp(24px, 3.4vw, 32px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body .site-header .desktop-nav,
  body .site-header .site-nav,
  body .site-header .nav-cta { display: none !important; }
  body .site-header .brand,
  body .site-header .brand-logo { width: clamp(190px, 21vw, 208px); margin: 0; }
  body .site-header .brand picture,
  body .site-header .brand-logo picture { display: block; width: 100%; line-height: 0; }
  body .site-header .brand img,
  body .site-header .brand-logo img { display: block; width: 100%; height: auto; }
  body .menu-toggle,
  html.js body.page-home .site-header .menu-toggle,
  html.js body.page-rvp .site-header .menu-toggle {
    display: inline-grid !important;
    flex: 0 0 48px;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    margin: 0 0 0 auto;
    padding: 0;
    color: #fff;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
  }
  body .menu-toggle span,
  body .menu-toggle span:only-child { width: 22px; height: 2px; margin: 0; border: 0; background: #fff; }
  body .menu-overlay { z-index: 1050; top: var(--tablet-header-height); background: rgba(1,11,31,.58); backdrop-filter: blur(4px); }
  body .mobile-menu,
  body .mobile-menu.is-open {
    position: fixed;
    z-index: 1100;
    top: calc(var(--tablet-header-height) + 12px);
    right: 24px;
    left: auto;
    width: min(440px, calc(100% - 48px));
    height: auto;
    max-height: calc(100svh - var(--tablet-header-height) - 28px);
    padding: 12px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: #071c37;
    box-shadow: 0 28px 72px rgba(1,11,31,.42);
    opacity: 1;
    transform: none !important;
  }
  body .mobile-menu { display: none; }
  body .mobile-menu.is-open { display: grid; }
  body .mobile-menu > a {
    display: flex;
    min-height: 48px;
    height: auto;
    padding: 0 14px;
    align-items: center;
    color: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    background: transparent;
    font-weight: 700;
    text-decoration: none;
  }
  body .mobile-menu > a:hover,
  body .mobile-menu > a:focus-visible,
  body .mobile-menu > a[aria-current='page'] { color: #fff; background: rgba(255,255,255,.08); }
  body .mobile-menu > a:focus-visible { outline: 2px solid #9bc5ff; outline-offset: -2px; }
  body .mobile-menu .mobile-cta { display: inline-flex; min-height: 56px; justify-content: center; margin-top: 8px; color: #031125; border: 0; background: var(--brand-yellow); }

  /* Shared tablet hero geometry. Portrait and landscape only choose layout. */
  body .home-hero,
  body .page-hero,
  body .rvp-hero {
    display: block;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden;
    background: #031125 !important;
  }
  body .home-hero__media,
  body .page-hero-media,
  body .rvp-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; }
  body .home-hero__media picture,
  body .page-hero-media picture,
  body .rvp-hero-media picture { display: block; width: 100%; height: 100%; }
  body .home-hero__media img,
  body .page-hero-media img,
  body .rvp-hero-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body .home-hero__inner,
  body .page-hero-grid,
  body .rvp-hero-grid {
    position: relative !important;
    z-index: 2;
    display: flex !important;
    top: auto !important;
    width: min(calc(100% - clamp(80px, 10vw, 112px)), var(--site-container));
    height: auto;
    margin: 0 auto !important;
    transform: none !important;
  }
  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy { position: relative !important; z-index: 2; top: auto !important; width: 100%; margin: 0; transform: none !important; }
  body .home-hero .eyebrow,
  body .page-hero .eyebrow,
  body .rvp-hero .eyebrow { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; color: var(--brand-yellow); font-size: .75rem; }
  body .home-hero .eyebrow::before,
  body .page-hero .eyebrow::before,
  body .rvp-hero .eyebrow::before { display: block; width: 30px; height: 2px; flex: 0 0 30px; background: var(--brand-yellow); content: ''; }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 { max-width: 100%; margin-bottom: 20px; font-size: clamp(3rem, 6.2vw, 4.35rem); line-height: .98; letter-spacing: -.048em; text-wrap: balance; }
  body.page-how .page-hero h1,
  body.page-rvp .rvp-hero h1,
  body.page-contact .page-hero h1 { font-size: clamp(2.9rem, 5.7vw, 3.8rem); }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead { max-width: 620px; margin: 0; font-size: 1.06rem; line-height: 1.58; }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; width: 100%; margin-top: 28px; }
  body .hero-actions .btn:first-child,
  body .page-hero .button-row .btn:first-child,
  body .page-hero .button-row .button:first-child,
  body .rvp-hero .hero-actions .btn:first-child,
  body .page-hero-grid > :first-child > .btn-primary { width: min(100%, 480px); min-height: 60px; padding-inline: 22px; }
  body .hero-actions > :nth-child(2),
  body .page-hero .button-row > :nth-child(2),
  body .rvp-hero .hero-actions > :nth-child(2) { min-height: 48px; padding: 10px 2px; color: rgba(255,255,255,.92); border: 0; background: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: rgba(255,255,255,.38); text-underline-offset: 5px; }
  body .hero-proof { display: grid; grid-template-columns: repeat(3, max-content); gap: clamp(18px, 4vw, 38px); margin-top: 22px; font-size: .86rem; }
  body .hero-proof li { gap: 8px; }
  body .hero-proof li + li::before { display: none; }
  body .hero-proof svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
  body .rvp-hero-note { margin-top: 13px; color: rgba(255,255,255,.68); font-size: .82rem; }

  /* The canonical home rail remains one compact dark three-step bridge. */
  body.page-home .clarity-bar {
    width: min(calc(100% - clamp(80px, 10vw, 112px)), var(--site-container));
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: -38px;
    padding: 22px 20px 20px;
    border: 1px solid rgba(130,175,230,.25);
    border-radius: 18px;
    background: #071c37;
    box-shadow: 0 24px 54px rgba(2,13,30,.27);
  }
  body.page-home .clarity-bar::before,
  body.page-home .clarity-bar__intro { display: none; }
  body.page-home .clarity-route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; padding: 0; }
  body.page-home .clarity-route::before { position: absolute; top: 20px; right: 16.5%; left: 16.5%; display: block; width: auto; height: 1px; background: linear-gradient(90deg,var(--hab-gold),#2c7df2 52%,rgba(122,167,222,.6)); content: ''; transform: none; }
  body.page-home .clarity-route li { position: relative; z-index: 1; display: flex; min-width: 0; min-height: 76px; padding: 0 10px; align-items: center; flex-direction: column; text-align: center; }
  body.page-home .clarity-route li::before,
  body.page-home .clarity-route li:not(:last-child)::after,
  body.page-home .clarity-route li > span,
  body.page-home .clarity-route small { display: none; }
  body.page-home .clarity-route__icon { display: grid; width: 41px; height: 41px; place-items: center; margin: 0 auto 10px; border: 1px solid rgba(144,183,229,.44); border-radius: 50%; color: #9dc8ff; background: #071c37; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body.page-home .clarity-route li:first-child .clarity-route__icon { border-color: rgba(255,189,26,.82); color: var(--hab-gold); }
  body.page-home .clarity-route strong { color: #fff; font-size: .88rem; line-height: 1.25; }
  body.page-home .contract-scan-section { padding-top: clamp(104px, 10vw, 126px); }

  /* The non-photographic routes only need the dark-header safe area. */
  body.page-intake .intake-shell { min-height: 100svh; padding-top: calc(var(--tablet-header-height) + 44px); }
  body.page-intake .intake-grid { gap: clamp(30px, 4vw, 48px); }
  body.page-legal .legal-hero { padding: calc(var(--tablet-header-height) + 42px) 0 72px; }
  body.page-legal .legal-box { padding: clamp(34px, 5vw, 52px); }
}

@media (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  body .home-hero,
  body .page-hero,
  body .rvp-hero { min-height: var(--hero-tablet-portrait-min-height, max(100svh, 1020px)) !important; }
  body .home-hero__media img,
  body .page-hero-media img,
  body .rvp-hero-media img { object-position: var(--hero-tablet-portrait-position, 50% 0%); }
  body .home-hero::before,
  body .page-hero::before,
  body .rvp-hero::before { background: linear-gradient(180deg,rgba(3,17,37,.02) 0%,rgba(3,17,37,.08) 38%,rgba(3,17,37,.46) 58%,rgba(3,17,37,.9) 76%,#031125 100%); }
  body .home-hero__inner,
  body .page-hero-grid,
  body .rvp-hero-grid {
    align-items: flex-end !important;
    min-height: var(--hero-tablet-portrait-min-height, max(100svh, 1020px)) !important;
    padding: clamp(570px, 56svh, 790px) 0 var(--hero-tablet-portrait-bottom-space, 82px) !important;
  }
  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy { max-width: 680px; }
  /* Keep the transition component inside the opening tablet composition.
     The former 1060–1120px route minimums pushed every bridge below the
     768x1024 and 820x1180 review frames, despite the component existing in
     normal flow. One shared height and overlap now govern the family. */
  body.page-home,
  body.page-how,
  body.page-about,
  body.page-rvp,
  body.page-contact {
    --hero-tablet-portrait-min-height: clamp(940px, 85svh, 1000px);
    --hero-tablet-portrait-position: 50% 0%;
    --hero-tablet-bridge-overlap: 80px;
  }
  body.page-home { --hero-tablet-portrait-bottom-space: 96px; }

  body.page-home .clarity-bar,
  body.page-how .how-route-bridge,
  body.page-about .about-brand-bridge,
  body.page-rvp .rvp-signal,
  body.page-contact .contact-topic-bridge {
    margin-top: calc(-1 * var(--hero-tablet-bridge-overlap));
  }
}

@media (min-width: 768px) and (max-width: 1120px) and (orientation: landscape) {
  body .home-hero,
  body .page-hero,
  body .rvp-hero { min-height: max(680px, 92svh) !important; }
  body .home-hero__media img,
  body .page-hero-media img,
  body .rvp-hero-media img { object-position: var(--hero-tablet-landscape-position, 50% 50%); }
  body .home-hero::before,
  body .page-hero::before,
  body .rvp-hero::before { background: linear-gradient(90deg,#031125 0%,#031125 18%,rgba(3,17,37,.88) 34%,rgba(3,17,37,.48) 51%,rgba(3,17,37,.1) 68%,rgba(3,17,37,0) 84%); }
  body .home-hero__inner,
  body .page-hero-grid,
  body .rvp-hero-grid {
    align-items: flex-start !important;
    min-height: max(680px, 92svh) !important;
    padding: clamp(126px, 16svh, 150px) 0 46px !important;
  }
  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy { width: min(51%, 540px); max-width: 540px; }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 { font-size: clamp(2.65rem, 4.8vw, 3.55rem); }
  body.page-how .page-hero h1,
  body.page-rvp .rvp-hero h1,
  body.page-contact .page-hero h1 { font-size: clamp(2.45rem, 4.35vw, 3.2rem); }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead { font-size: 1rem; line-height: 1.52; }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions { margin-top: 22px; }
  body .hero-actions .btn:first-child,
  body .page-hero .button-row .btn:first-child,
  body .page-hero .button-row .button:first-child,
  body .rvp-hero .hero-actions .btn:first-child,
  body .page-hero-grid > :first-child > .btn-primary { width: auto; max-width: 100%; min-height: 56px; }
  body .hero-proof { gap: 18px; margin-top: 16px; font-size: .78rem; }
  body .hero-proof svg { width: 19px; height: 19px; flex-basis: 19px; }
  body.page-home { --hero-tablet-landscape-position: 50% 50%; }
  body.page-how { --hero-tablet-landscape-position: 50% 50%; }
  body.page-about { --hero-tablet-landscape-position: 50% 50%; }
  body.page-rvp { --hero-tablet-landscape-position: 50% 50%; }
  body.page-contact { --hero-tablet-landscape-position: 50% 50%; }
  body.page-home .clarity-bar { margin-top: -34px; }
}

@media (min-width: 768px) and (max-width: 1120px) and (orientation: landscape) {
  body.page-rvp .rvp-hero-copy { width: min(51%, 540px); max-width: 540px; }
}

/* -------------------------------------------------------------------------- */
/* Canonical hero art direction: one system per viewport class                 */
/* -------------------------------------------------------------------------- */

/* Route variables only describe photographic focal points. Layout, copy and
   fade behaviour stay shared, so a desktop correction cannot leak into tablet
   or phone. Home and Zo werkt het are the desktop vertical reference. */
@media (min-width: 1121px) {
  body.page-home { --hero-desktop-image-y: 0px; }
  body.page-how { --hero-desktop-image-y: 0px; }
  body.page-about { --hero-desktop-image-y: 14px; }
  body.page-rvp { --hero-desktop-image-y: 72px; }
  body.page-contact { --hero-desktop-image-y: 14px; }

  body.page-home .home-hero__media img,
  body.page-how .page-hero-media img,
  body.page-about .page-hero-media img,
  body.page-rvp .rvp-hero-media img,
  body.page-contact .page-hero-media img {
    object-position: 50% 50%;
    transform: translate(-50%, calc(-50% + var(--hero-desktop-image-y)));
  }

  body.page-home .home-hero__inner,
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body.page-rvp .rvp-hero-grid,
  body.page-contact .page-hero-grid {
    align-items: flex-start !important;
    padding-top: 189px !important;
  }

  /* One desktop copy grid for all five routes. Two title lines and three
     intro lines are reserved even when a shorter page does not need them, so
     headings and primary actions share the same horizontal anchors. */
  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy {
    display: flex;
    width: min(690px, 100%) !important;
    max-width: 690px !important;
    flex-direction: column;
  }
  body .home-hero .eyebrow,
  body .page-hero .eyebrow,
  body .rvp-hero .eyebrow {
    min-height: 15px;
    margin: 0 0 19px;
  }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 {
    min-height: 180px;
    margin: 0 0 22px;
    font-size: clamp(4.5rem, 6vw, 5.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead {
    min-height: 103px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.62;
  }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions {
    margin-top: 32px;
  }

}

/* Ultrawide desktop art direction.
   The regular 1180px composition is deliberately untouched through 1680px.
   Beyond that point the content canvas grows modestly, while the photographic
   layer is capped and anchored to the right. This prevents full-width `cover`
   from enlarging and vertically cropping the people on 2K/4K displays. */
@media (min-width: 1681px) {
  :root {
    --site-container: clamp(1450px, 82vw, 2400px);
    --hero-height-desktop: clamp(790px, 34vw, 980px);
    --hero-copy-width: clamp(690px, 30vw, 840px);
    --hero-eyebrow-top: clamp(189px, 8vw, 230px);
    --header-height-desktop: clamp(74px, 3vw, 88px);
    --button-height-primary: clamp(54px, 2.2vw, 64px);
    --header-cta-width: clamp(232px, 10vw, 280px);
  }

  body .site-header .header-inner,
  body .site-header .nav-shell {
    grid-template-columns: clamp(240px, 8vw, 280px) minmax(0, 1fr) var(--header-cta-width);
    column-gap: 12px;
  }

  body.page-home .home-hero__media img,
  body.page-how .page-hero-media img,
  body.page-about .page-hero-media img,
  body.page-rvp .rvp-hero-media img,
  body.page-contact .page-hero-media img {
    right: 0;
    left: auto;
    width: min(100%, clamp(1780px, 88vw, 3040px));
    object-position: 50% 0%;
    transform: translateY(calc(-50% + var(--hero-desktop-image-y)));
  }

  body.page-home .home-hero__media img {
    object-position: 50% 4%;
  }

  body .brand-logo,
  body .brand,
  body .brand-logo img,
  body .brand img,
  body .site-header .brand-logo img {
    width: clamp(184px, 6.7vw, 230px);
  }

  body .site-nav > a:not(.btn),
  body .desktop-nav > a {
    height: clamp(44px, 1.6vw, 54px);
    min-height: clamp(44px, 1.6vw, 54px);
    font-size: clamp(.82rem, .45vw, 1rem);
  }

  body .site-header .nav-cta,
  body .site-header .button.nav-cta,
  body .site-header .btn.nav-cta,
  body .hero-actions .btn,
  body .page-hero .button-row .btn,
  body .page-hero .button-row .button,
  body .rvp-hero .hero-actions .btn {
    font-size: clamp(.92rem, .45vw, 1rem);
  }

  body.page-home .clarity-bar {
    width: min(var(--site-container), calc(100% - 48px));
    max-width: none;
    padding: clamp(24px, 1vw, 32px) clamp(30px, 1.3vw, 42px);
  }
}

/* Portrait tablets use Reclamevrij+ as the head-height reference. The final
   selector specificity deliberately beats the legacy desktop fade rules. */
@media (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  body.page-home { --hero-tablet-image-x: 50%; --hero-tablet-image-y: -24px; }
  body.page-how { --hero-tablet-image-x: 50%; --hero-tablet-image-y: -78px; }
  body.page-about { --hero-tablet-image-x: 52%; --hero-tablet-image-y: -32px; }
  body.page-rvp { --hero-tablet-image-x: 54%; --hero-tablet-image-y: 0px; }
  body.page-contact { --hero-tablet-image-x: 51%; --hero-tablet-image-y: -36px; }

  body.page-home .home-hero__media,
  body.page-how .page-hero-media,
  body.page-about .page-hero-media,
  body.page-rvp .rvp-hero-media,
  body.page-contact .page-hero-media {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: calc(50% - 50vw);
    width: 100vw;
    height: 100%;
    margin: 0;
    transform: none;
  }
  body.page-home .home-hero__media picture,
  body.page-how .page-hero-media picture,
  body.page-about .page-hero-media picture,
  body.page-rvp .rvp-hero-media picture,
  body.page-contact .page-hero-media picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  body.page-home .home-hero__media img,
  body.page-how .page-hero-media img,
  body.page-about .page-hero-media img,
  body.page-rvp .rvp-hero-media img,
  body.page-contact .page-hero-media img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: var(--hero-tablet-image-x) 0%;
    transform: translateY(var(--hero-tablet-image-y));
  }
  body.page-home .home-hero::before,
  body.page-how .page-hero::before,
  body.page-about .page-hero::before,
  body.page-rvp .rvp-hero::before,
  body.page-contact .page-hero::before {
    --hero-tablet-glow-start: clamp(500px, 52svh, 620px);
    background: linear-gradient(
      180deg,
      rgba(3,17,37,.02) 0 var(--hero-tablet-glow-start),
      rgba(3,17,37,.14) calc(var(--hero-tablet-glow-start) + 54px),
      rgba(3,17,37,.58) calc(var(--hero-tablet-glow-start) + 138px),
      rgba(3,17,37,.94) calc(var(--hero-tablet-glow-start) + 220px),
      #031125 calc(var(--hero-tablet-glow-start) + 260px),
      #031125 100%
    );
  }
  body .home-hero__inner,
  body .page-hero-grid,
  body .rvp-hero-grid {
    align-items: flex-start !important;
    padding: clamp(500px, 47svh, 560px) 0 72px !important;
  }
  body.page-home .home-hero__inner {
    padding-bottom: 35px !important;
  }
  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy {
    display: flex;
    flex-direction: column;
  }
  body .home-hero .eyebrow,
  body .page-hero .eyebrow,
  body .rvp-hero .eyebrow {
    min-height: 16px;
    margin: 0 0 20px;
    font-size: .75rem;
    line-height: 1.3;
  }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 {
    min-height: 104px;
    margin: 0 0 20px;
    font-size: clamp(2.9rem, 5.7vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -.04em;
  }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead {
    min-height: 54px;
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.58;
  }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions {
    margin-top: 28px;
  }

}

/* Landscape tablet gets its own offsets and therefore never inherits the
   desktop translations. The horizontal fade remains the intended layout here. */
@media (min-width: 768px) and (max-width: 1120px) and (orientation: landscape) {
  body.page-home { --hero-tablet-landscape-y: -10px; }
  body.page-how { --hero-tablet-landscape-y: -12px; }
  body.page-about { --hero-tablet-landscape-y: 4px; }
  body.page-rvp { --hero-tablet-landscape-y: 36px; }
  body.page-contact { --hero-tablet-landscape-y: 4px; }

  body.page-home .home-hero__media img,
  body.page-how .page-hero-media img,
  body.page-about .page-hero-media img,
  body.page-rvp .rvp-hero-media img,
  body.page-contact .page-hero-media img {
    object-position: 50% 50%;
    transform: translateY(var(--hero-tablet-landscape-y));
  }

  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy {
    display: flex;
    flex-direction: column;
  }
  body .home-hero .eyebrow,
  body .page-hero .eyebrow,
  body .rvp-hero .eyebrow {
    min-height: 14px;
    margin: 0 0 18px;
  }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 {
    min-height: 104px;
    margin: 0 0 18px;
    font-size: clamp(2.45rem, 4.35vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -.04em;
  }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead {
    min-height: 72px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
  }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions {
    margin-top: 22px;
  }

}

/* Phones share one photographic horizon and one fixed viewport-relative fade.
   Only x-position and the small subject-height correction remain route data. */
@media (max-width: 767.98px) {
  body.page-home,
  body.page-how,
  body.page-about,
  body.page-rvp,
  body.page-contact {
    --hero-mobile-photo-height: clamp(480px, 128vw, 550px);
    --hero-mobile-copy-overlap: 64px;
    --hero-mobile-glow-start: clamp(310px, 90vw, 390px);
    --hero-phone-copy-top: clamp(410px,121vw,500px);
  }
  body.page-home { --hero-phone-image-x: 50%; --hero-phone-media-y: 0px; }
  body.page-how { --hero-phone-image-x: 50%; --hero-phone-media-y: 0px; }
  body.page-about { --hero-phone-image-x: 52%; --hero-phone-media-y: 18px; }
  body.page-rvp { --hero-phone-image-x: 54%; --hero-phone-media-y: 42px; }
  body.page-contact { --hero-phone-image-x: 51%; --hero-phone-media-y: 14px; }

  body.page-home .home-hero__media,
  body.page-how .page-hero-media,
  body.page-about .page-hero-media,
  body.page-rvp .rvp-hero-media,
  body.page-contact .page-hero-media {
    top: var(--hero-phone-media-y);
  }
  body.page-home .home-hero__media img,
  body.page-how .page-hero-media img,
  body.page-about .page-hero-media img,
  body.page-rvp .rvp-hero-media img,
  body.page-contact .page-hero-media img {
    object-position: var(--hero-phone-image-x) 0%;
    transform: none;
  }
  body.page-home .home-hero::before,
  body.page-how .page-hero::before,
  body.page-about .page-hero::before,
  body.page-rvp .rvp-hero::before,
  body.page-contact .page-hero::before {
    background: linear-gradient(
      180deg,
      rgba(3,17,37,.01) 0 var(--hero-mobile-glow-start),
      rgba(3,17,37,.16) calc(var(--hero-mobile-glow-start) + 52px),
      rgba(3,17,37,.68) calc(var(--hero-mobile-glow-start) + 126px),
      rgba(3,17,37,.96) calc(var(--hero-mobile-glow-start) + 184px),
      #031125 calc(var(--hero-mobile-glow-start) + 216px),
      #031125 100%
    );
  }
  body.page-how .page-hero-media::after,
  body.page-about .page-hero-media::after,
  body.page-rvp .rvp-hero-media::after,
  body.page-contact .page-hero-media::after { display: none; }

  body.page-home .home-hero__inner {
    align-items: flex-start;
    padding-top: var(--hero-phone-copy-top) !important;
  }
}

/* Final cascade position for the completion authority. These selectors are
   intentionally last so no historical mobile crop/fade rule can re-enter. */
@media (max-width: 767.98px) {
  body.page-home,
  body.page-how,
  body.page-about,
  body.page-rvp,
  body.page-contact {
    --hero-phone-copy-top: clamp(410px,121vw,500px);
    --hero-phone-fade-soft: 68%;
    --hero-phone-fade-solid: 96%;
  }
  body.page-how .page-hero-media,
  body.page-about .page-hero-media,
  body.page-rvp .rvp-hero-media,
  body.page-contact .page-hero-media {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
  }
  body.page-how .page-hero-media picture,
  body.page-about .page-hero-media picture,
  body.page-rvp .rvp-hero-media picture,
  body.page-contact .page-hero-media picture { display: block; width: 100%; height: 100%; }
  body.page-how .page-hero-media img,
  body.page-about .page-hero-media img,
  body.page-rvp .rvp-hero-media img,
  body.page-contact .page-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: none; }
  body.page-how .page-hero::before,
  body.page-about .page-hero::before,
  body.page-rvp .rvp-hero::before,
  body.page-contact .page-hero::before {
    background: linear-gradient(180deg,rgba(3,17,37,0) 0 var(--hero-phone-fade-soft),rgba(3,17,37,.08) 75%,rgba(3,17,37,.42) 86%,rgba(3,17,37,.88) 93%,#031125 var(--hero-phone-fade-solid),#031125 100%);
  }
  body.page-home .home-hero__inner,
  body.page-how .page-hero-grid,
  body.page-about .page-hero-grid,
  body.page-rvp .rvp-hero-grid,
  body.page-contact .page-hero-grid { padding-top: var(--hero-phone-copy-top) !important; }

  body .home-hero__copy,
  body .page-hero-grid > :first-child,
  body .rvp-hero-copy {
    display: flex;
    flex-direction: column;
  }
  body .home-hero .eyebrow,
  body .page-hero .eyebrow,
  body .rvp-hero .eyebrow {
    min-height: 14px;
    margin: 0 0 18px;
  }
  body .home-hero h1,
  body .page-hero h1,
  body .rvp-hero h1 {
    min-height: 114px;
    margin: 0 0 18px;
    font-size: clamp(2.28rem, 9.8vw, 2.88rem);
    line-height: 1.02;
    letter-spacing: -.04em;
  }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead {
    min-height: 100px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.56;
  }
  body .hero-actions,
  body .page-hero .button-row,
  body .rvp-hero .hero-actions {
    margin-top: 24px;
  }
  body.page-home .home-hero .hero-actions { order: 1; }
  body.page-home .home-hero .hero-proof { order: 2; }
  body.page-rvp .rvp-hero .lead { margin-top: 0; }

  body.page-rvp .rvp-signal { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 0; margin-top: -34px; padding: 9px 16px; }
  body.page-rvp .rvp-signal span { min-height: 46px; justify-content: flex-start; padding: 8px 4px; font-size: .69rem; text-align: left; }
  body.page-rvp .rvp-signal span:not(:first-child) { border-top: 1px solid rgba(7,28,55,.1); border-left: 0; }
  body.page-rvp .rvp-signal i { display: none; }
}

@media (max-width: 360px) {
  body.page-home,
  body.page-how,
  body.page-about,
  body.page-rvp,
  body.page-contact { --hero-phone-copy-top: clamp(392px,124vw,438px); }
  body.page-home .home-hero h1,
  body.page-how .page-hero h1,
  body.page-about .page-hero h1,
  body.page-rvp .rvp-hero h1,
  body.page-contact .page-hero h1 { min-height: 114px; font-size: clamp(2.05rem,10vw,2.42rem); }
  body .home-hero .lead,
  body .page-hero .lede,
  body .rvp-hero .lead { min-height: 125px; }
  body.page-rvp .rvp-hero .hero-actions .btn:first-child { padding-inline: 14px; font-size: .79rem; }
  body.page-rvp .rvp-hero .hero-actions .btn:first-child::after { margin-left: 8px; }
}

/* -------------------------------------------------------------------------- */
/* Final hero transition consistency: navy bridges + Reclamevrij+ text haze   */
/* -------------------------------------------------------------------------- */

/* From tablet upward every route uses the same dark transition band between
   the photographic hero and the light content area. Component structure stays
   route-specific; only the visual surface is shared. */
@media (min-width: 768px) {
  body.page-home .clarity-bar,
  body.page-how .how-route-bridge .how-route-rail,
  body.page-about .about-brand-bridge,
  body.page-rvp .rvp-signal,
  body.page-contact .contact-topic-bridge {
    color: #fff;
    border-color: rgba(130,175,230,.25);
    background: #071c37;
    box-shadow: 0 24px 54px rgba(2,13,30,.27);
  }

  body.page-home .clarity-bar__intro {
    border-color: rgba(144,183,229,.22);
  }
  body.page-home .clarity-bar__intro strong,
  body.page-home .clarity-route strong,
  body.page-rvp .rvp-signal span,
  body.page-contact .contact-topic-bridge > span {
    color: #fff;
  }
  body.page-home .clarity-bar__intro .eyebrow,
  body.page-home .clarity-route li > span,
  body.page-home .clarity-route small,
  body.page-rvp .rvp-signal b {
    color: #9dc8ff;
  }
  body.page-home .clarity-route li::before {
    border-color: #071c37;
  }
  body.page-rvp .rvp-signal i {
    background: linear-gradient(90deg,rgba(255,189,26,.82),rgba(77,145,235,.58));
  }
  body.page-contact .contact-topic-bridge button {
    color: rgba(255,255,255,.9);
    border-color: rgba(144,183,229,.28);
    background: rgba(255,255,255,.055);
  }
  body.page-contact .contact-topic-bridge button:hover,
  body.page-contact .contact-topic-bridge button:focus-visible {
    color: #fff;
    border-color: rgba(155,197,255,.62);
    background: rgba(255,255,255,.1);
  }
  body.page-contact .contact-topic-bridge button[aria-pressed='true'] {
    color: #031125;
    border-color: #ffbf1f;
    background: #fff6d8;
  }
}

/* The yellow knit remains warm and natural; the navy atmosphere begins behind
   the copy instead of below it, matching the other portrait heroes. */
@media (max-width: 767.98px) {
  body.page-rvp .rvp-hero-media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    background: linear-gradient(
      180deg,
      rgba(3,29,63,0) 0 32%,
      rgba(3,29,63,.28) 38%,
      rgba(3,29,63,.68) 44%,
      rgba(3,29,63,.92) 50%,
      rgba(3,29,63,.98) 58%,
      #031125 68%,
      #031125 100%
    );
    content: '';
    pointer-events: none;
  }
  body.page-rvp .rvp-hero::before {
    background: none;
  }
}

@media (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  body.page-rvp .rvp-hero::before {
    background: linear-gradient(
      180deg,
      rgba(3,17,37,0) 0 calc(clamp(500px,47svh,560px) - 170px),
      rgba(3,17,37,.16) calc(clamp(500px,47svh,560px) - 100px),
      rgba(3,17,37,.55) calc(clamp(500px,47svh,560px) - 20px),
      rgba(3,17,37,.9) calc(clamp(500px,47svh,560px) + 82px),
      #031125 calc(clamp(500px,47svh,560px) + 184px),
      #031125 100%
    );
  }
}

@media (min-width: 768px) and (max-width: 1120px) and (orientation: landscape) {
  body.page-rvp .rvp-hero::before {
    background:
      linear-gradient(180deg,rgba(3,17,37,0) 56%,rgba(3,17,37,.2) 75%,rgba(3,17,37,.82) 100%),
      linear-gradient(90deg,#031125 0%,#031125 18%,rgba(3,17,37,.88) 34%,rgba(3,17,37,.48) 51%,rgba(3,17,37,.1) 68%,rgba(3,17,37,0) 84%);
  }
}