/* HAB / Hero system 2026-09-15
   AUTHORITATIVE: this component intentionally has NO legacy .home-hero,
   .page-hero or .rvp-hero classes. Never restore their transform/height patches.
   Optical eye-lines belong to [data-hab-hero]; layout belongs to this file.
   The natural document flow can grow at enlarged text sizes: no clipped CTAs.
*/
html:root {
  --hab-hero-navy: #061a35;
  --hab-hero-ink: #f7f9fc;
  --hab-hero-copy: #d2deec;
  --hab-hero-gold: #ffbd1a;
  --hab-hero-ease: cubic-bezier(.22, 1, .36, 1);
  --site-container: 1180px;
}

body #main-content > .hab-hero {
  --hab-title-size: clamp(3.35rem, 5.35vw, 5rem);
  --hab-eye-y: clamp(230px, 18vw, 320px);
  --hab-eye-offset: -30.1%;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  min-height: clamp(760px, 55vw, 900px);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--hab-hero-ink);
  background: var(--hab-hero-navy);
  border: 0;
  border-radius: 0;
  font-family: Inter, Arial, sans-serif;
  text-align: left;
}
body #main-content > .hab-hero[data-hab-hero='over-hab'] { --hab-eye-offset: -26.6%; }
body #main-content > .hab-hero[data-hab-hero='contact'] { --hab-eye-offset: -32.8%; }
body #main-content > .hab-hero[data-hab-hero='reclamevrij'] { --hab-eye-offset: -22.9%; }

/* Decorative photography cannot consume layout height or capture a click. */
body .hab-hero > .hab-hero__art {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
body .hab-hero__art > picture { display: contents; }
body .hab-hero__art img {
  position: absolute;
  top: var(--hab-eye-y);
  right: max(0px, calc((100vw - 2000px) / 2));
  left: auto;
  display: block;
  width: max(1260px, min(100vw, 2000px));
  max-width: none;
  height: auto;
  margin: 0;
  transform: translateY(var(--hab-eye-offset));
  object-fit: contain;
  /* Fade the actual image edges, not a viewport-dependent crop. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 78%, transparent);
}
/* Navy side haze and a quiet blue atmospheric lift, never a blur on faces. */
body .hab-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(90deg, #061a35 0%, rgba(6,26,53,.96) 15%, rgba(6,26,53,.88) 32%, rgba(6,26,53,.5) 44%, rgba(6,26,53,.12) 57%, transparent 68%),
    radial-gradient(ellipse at 8% 50%, rgba(19,95,214,.24), transparent 60%),
    linear-gradient(0deg, #061a35 0%, rgba(6,26,53,.42) 10%, transparent 30%);
}
body .hab-hero::after { content: none; }
body .hab-hero > .hab-hero__canvas {
  position: relative;
  width: min(var(--site-container), calc(100% - 48px));
  max-width: none;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(172px, 12.5vw, 220px) 0 116px;
}
body .hab-hero .hab-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(650px, 58%);
  max-width: 100%;
  margin: 0;
  padding: 0;
}
body .hab-hero .hab-hero__eyebrow {
  display: block;
  min-height: 1rem;
  margin: 0 0 20px;
  padding: 0;
  color: var(--hab-hero-gold);
  font: 700 .75rem/1.333 Inter, Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
body .hab-hero .hab-hero__title {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 2.08em;
  margin: 0 0 24px;
  padding: 0;
  color: var(--hab-hero-ink);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-size: var(--hab-title-size);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-align: left;
  text-wrap: initial;
  overflow-wrap: normal;
  hyphens: none;
}
body .hab-hero__line { display: block; }
body .hab-hero .hab-hero__intro {
  width: min(100%, 530px);
  max-width: none;
  min-height: 5.1em;
  margin: 0;
  padding: 0;
  color: var(--hab-hero-copy);
  font: 400 1.0625rem/1.7 Inter, Arial, sans-serif;
  letter-spacing: 0;
  text-wrap: pretty;
}
body .hab-hero .hab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  min-height: 56px;
  margin: 28px 0 0;
  padding: 0;
}
body .hab-hero .hab-hero__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  max-width: 100%;
  width: auto;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 700 .875rem/1.4 Inter, Arial, sans-serif;
  text-decoration: none;
  letter-spacing: 0;
  text-align: center;
  transition: background 180ms, border-color 180ms, transform 180ms;
}
body .hab-hero .hab-hero__action--primary { color: #071c37; background: var(--hab-hero-gold); border-color: var(--hab-hero-gold); }
body .hab-hero .hab-hero__action--secondary { color: #f7f9fc; border-color: rgba(191,211,239,.35); background: rgba(6,26,53,.32); }
body .hab-hero__action svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body .hab-hero__action::before, body .hab-hero__action::after { content: none; }
body .hab-hero .hab-hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px 18px;
  min-height: 24px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: #c3d3e7;
  font: 500 .75rem/1.6 Inter, Arial, sans-serif;
}
body .hab-hero__proof li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
body .hab-hero__proof li::before { content: ''; width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: var(--hab-hero-gold); }
body .hab-hero :focus-visible { outline: 3px solid #b9d7ff; outline-offset: 5px; box-shadow: none; }
@media (hover: hover) {
  body .hab-hero .hab-hero__action--primary:hover { color: #071c37; background: #ffd05a; border-color: #ffd05a; transform: translateY(-2px); }
  body .hab-hero .hab-hero__action--secondary:hover { color: #fff; background: rgba(35,87,153,.3); border-color: #9bbfea; transform: translateY(-2px); }
}

/* Wide screens: photography and copy stay together instead of drifting apart. */
@media (min-width: 1681px) { html:root { --site-container: min(82vw, 1520px); } }

/* Tablets in landscape use the horizontal photograph, not a stretched portrait. */
@media (min-width: 768px) and (max-width: 1120px) and (orientation: landscape) {
  body #main-content > .hab-hero { --hab-title-size: clamp(2.1rem, 4.9vw, 3.5rem); --hab-eye-y: 210px; min-height: 730px; }
  body .hab-hero > .hab-hero__canvas { padding-top: 148px; padding-bottom: 104px; }
  body .hab-hero .hab-hero__copy { width: 55%; }
  body .hab-hero__art img { width: 112vw; right: -4vw; }
  body .hab-hero .hab-hero__intro { min-height: 8.25em; font-size: 1rem; line-height: 1.65; }
  body .hab-hero .hab-hero__actions { flex-direction: column; align-items: flex-start; }
  body .hab-hero .hab-hero__action { min-width: min(100%, 288px); }
  body .hab-hero .hab-hero__proof { min-height: 40px; }
}

/* Phones AND portrait tablets: a dedicated photograph ABOVE the copy.
   Gradients end in the exact same navy as the content surface. */
@media (max-width: 767.98px), (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  body #main-content > .hab-hero {
    --hab-art-top: 64px;
    --hab-art-height: clamp(384px, 120vw, 516px);
    --hab-copy-top: calc(var(--hab-art-height) - 68px);
    --hab-title-size: clamp(2rem, 9.5vw, 2.55rem);
    min-height: 0;
  }
  body .hab-hero > .hab-hero__art {
    top: var(--hab-art-top);
    bottom: auto;
    width: 100%;
    height: var(--hab-art-height);
  }
  body .hab-hero__art img {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: 50% 30%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body .hab-hero__art::after {
    position: absolute;
    inset: -1px;
    content: '';
    background:
      linear-gradient(180deg, #061a35 0%, rgba(6,26,53,.14) 8%, transparent 20%, transparent 42%, rgba(6,26,53,.36) 58%, rgba(6,26,53,.82) 73%, #061a35 89%, #061a35 100%),
      linear-gradient(90deg, rgba(6,26,53,.17), transparent 26%, transparent 80%, rgba(6,26,53,.1));
  }
  body .hab-hero::before {
    top: calc(var(--hab-copy-top) - 100px);
    background: radial-gradient(ellipse at 15% 52%, rgba(19,95,214,.11), transparent 72%);
  }
  body .hab-hero > .hab-hero__canvas {
    width: calc(100% - 40px);
    padding: var(--hab-copy-top) 0 92px;
  }
  body .hab-hero .hab-hero__copy { width: 100%; }
  body .hab-hero .hab-hero__eyebrow { min-height: 14px; margin-bottom: 18px; font-size: .6875rem; line-height: 1.3; }
  body .hab-hero .hab-hero__title { margin-bottom: 18px; min-height: 2.08em; letter-spacing: -.038em; }
  body .hab-hero .hab-hero__intro { width: 100%; min-height: 6.5em; font-size: 1rem; line-height: 1.625; }
  body .hab-hero .hab-hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  body .hab-hero .hab-hero__action { width: 100%; min-height: 54px; padding: 14px 16px; font-size: .875rem; }
  body .hab-hero .hab-hero__proof { min-height: 42px; margin-top: 18px; gap: 6px 14px; font-size: .6875rem; }
}
@media (max-width: 359.98px) {
  body .hab-hero > .hab-hero__canvas { width: calc(100% - 32px); }
  body .hab-hero .hab-hero__intro { min-height: 8.125em; }
  body .hab-hero .hab-hero__action { padding-inline: 10px; font-size: .8125rem; }
}
@media (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  body #main-content > .hab-hero {
    --hab-art-top: 76px;
    --hab-art-height: clamp(480px, 62.5vw, 640px);
    --hab-copy-top: calc(var(--hab-art-height) - 8px);
    --hab-title-size: clamp(3.1rem, 6.6vw, 4.2rem);
  }
  body .hab-hero > .hab-hero__canvas { width: min(760px, calc(100% - 80px)); padding-bottom: 108px; }
  body .hab-hero .hab-hero__intro { max-width: 640px; min-height: 5.1em; font-size: 1.0625rem; line-height: 1.7; }
  body .hab-hero .hab-hero__eyebrow { margin-bottom: 20px; font-size: .75rem; }
  body .hab-hero .hab-hero__title { margin-bottom: 24px; }
  body .hab-hero .hab-hero__actions { display: flex; flex-direction: row; gap: 12px; margin-top: 28px; }
  body .hab-hero .hab-hero__action { width: auto; min-height: 56px; padding-inline: 22px; }
  body .hab-hero .hab-hero__proof { min-height: 24px; font-size: .75rem; }
}

/* The five proof bridges are the SAME component. Strip route-specific classes
   in HTML so an RVP span rule can never change the numbered markers again. */
body main#main-content > .hab-proof-bridge.hab-proof-bridge {
  width: min(var(--site-container), calc(100% - 48px));
  margin: -42px auto 0;
}
@media (max-width: 767.98px) {
  body main#main-content > .hab-proof-bridge.hab-proof-bridge { width: calc(100% - 32px); margin-top: -38px; padding: 8px 12px; }
  body main#main-content > .hab-proof-bridge .hab-proof-bridge__items { grid-template-columns: 1fr; }
  body main#main-content > .hab-proof-bridge .hab-proof-bridge__items li { min-height: 64px; padding: 12px 10px; }
  body main#main-content > .hab-proof-bridge .hab-proof-bridge__items li + li { border-left: 0; border-top: 1px solid rgba(144,183,229,.2); }
}

@media (prefers-reduced-motion: reduce) {
  body .hab-hero *, body .hab-hero *::before, body .hab-hero *::after { animation: none !important; transition: none !important; }
}