/* Measured component layer. Geometry comes from the reference; colors remain HERZ. */
:root {
  --hz-primary: var(--hz-blue);
  --hz-control-height: 50px;
  --hz-button-height: 48px;
  --hz-pill: 999px;
  --hz-vehicle-radius: 8px;
  --hz-vehicle-border: #e4e8ee;
}

/* NAL desktop: 50px contact bar, 72px navigation, 48px header CTA. */
.contact-strip { min-height:50px; display:flex; align-items:center; }
.nav-shell { height:72px; }
.site-header { box-shadow:none; }
.site-header .btn.small { min-height:48px; padding:12px 24px; border:2px solid var(--hz-navy); border-radius:var(--hz-pill); font-size:14px; font-weight:600; box-shadow:none; }
.desktop-nav { gap:4px; font-size:16px; }
.desktop-nav>a,.desktop-nav summary { padding:8px 12px; font-size:16px; font-weight:500; letter-spacing:-.01em; }
.brand-art { width:160px; height:54px; }
.brand-art img { width:298px; left:-16px; top:-29px; }

/* All primary actions share one measured 48px pill geometry. */
.btn,.btn-primary { min-height:var(--hz-button-height); padding:12px 24px; border:0; border-radius:var(--hz-pill); background:var(--hz-primary); color:#fff; box-shadow:none; font-size:14px; font-weight:600; line-height:20px; gap:8px; transition:background-color .3s,border-color .3s,color .3s; transform:none; }
.btn:hover,.btn-primary:hover { background:#066697; border-color:#066697; box-shadow:none; transform:none; }
.btn:focus-visible,.btn-primary:focus-visible { outline:2px solid var(--hz-navy); outline-offset:3px; }
.btn:disabled,.btn-primary:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.btn.outline { border:2px solid var(--hz-navy); color:var(--hz-navy); background:#fff; }
.btn.outline:hover { background:var(--hz-pale); border-color:var(--hz-navy); color:var(--hz-navy); }

/* Desktop search: 1312 x 138, 32px inset, five 236.8px tracks, 16px gaps. */
.home-hero-lead { max-width:none; }
@media(min-width:641px) { .home-hero-lead { display:none; } }
.home-hero>.hero-trust { width:min(calc(100% - 2 * var(--page-gutter)),var(--container-max)); margin-top:18px; }
.home-search-wrap { padding:24px 32px; border:0; border-radius:24px; box-shadow:0 8px 24.1px rgba(140,154,169,.2); }
@media(min-width:901px) { .home-search-wrap { margin-top:37px; } }
.home-search-heading { min-height:24px; margin-bottom:16px; align-items:center; }
.home-search-intro .eyebrow { display:none; }
.home-search-intro h2 { font-size:20px; line-height:24px; font-weight:600; letter-spacing:normal; }
.home-search-advanced { position:absolute; top:24px; right:32px; padding:0; font-size:16px; font-weight:500; text-decoration:underline; color:var(--hz-ink); }
.home-search-wrap .quick-fields { grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:16px; }
.home-search-wrap .quick-fields>label { position:relative; display:block; min-width:0; height:50px; margin:0; gap:0; }
.home-search-wrap .quick-fields>label>span { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.home-search-wrap .quick-fields select { width:100%; height:var(--hz-control-height); min-height:var(--hz-control-height); margin-top:0; padding:0 20px; border:1px solid var(--hz-soft); border-radius:var(--hz-pill); background:var(--hz-soft); color:var(--hz-ink); font-size:16px; font-weight:400; line-height:24px; }
.home-search-wrap .quick-fields select:focus-visible { outline:2px solid var(--hz-primary); outline-offset:2px; }
.home-search-wrap .quick-fields .btn { width:100%; min-width:0; min-height:var(--hz-button-height); height:var(--hz-button-height); padding:12px 12px 12px 24px; border-radius:var(--hz-pill); font-size:16px; line-height:16px; justify-content:space-between; }
.home-search-wrap .quick-fields .btn>span { display:grid; place-items:center; flex:none; width:25px; height:25px; border-radius:50%; background:#fff; color:var(--hz-primary); font-size:18px; }

/* Vehicle tiles are restrained and image-led, as measured on leasevoorraad. */
.car-card,.catalog-cards .car-card { border:1px solid var(--hz-vehicle-border); border-radius:var(--hz-vehicle-radius); box-shadow:none; transform:none; }
.car-card:hover,.catalog-cards .car-card:hover { border-color:var(--hz-vehicle-border); box-shadow:none; transform:none; }
.car-card:hover .car-image img { transform:none; }
.catalog-layout,.catalog-heading { width:calc(100% - 32px); max-width:1248px; }
.catalog-layout { grid-template-columns:296px minmax(0,1fr); gap:48px; }
.filter-panel { top:132px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.filter-title { margin-bottom:20px; padding-bottom:13px; }
.filter-field { margin-bottom:18px; padding-bottom:16px; }
.filter-field>label,.filter-field legend { font-size:14px; font-weight:600; }
.filter-field select,.filter-field input { min-height:50px; border:1px solid var(--hz-line); border-radius:8px; background:#fff; font-size:14px; }
.filter-actions-top { position:static; margin-bottom:18px; padding:0 0 16px; }
.catalog-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.catalog-cards .car-image { height:226px; aspect-ratio:auto; }
.catalog-cards .car-body { padding:16px; }
.catalog-cards .car-body h3 { font-size:16px; font-weight:600; line-height:20px; letter-spacing:normal; }
.catalog-cards .car-specs { font-size:12px; }
.catalog-cards .card-view { width:auto; min-height:20px; height:auto; padding:0; border:0; border-radius:0; color:var(--hz-primary); background:transparent; box-shadow:none; font-size:14px; font-weight:500; justify-content:flex-start; }
.catalog-cards .card-view:hover { color:var(--hz-navy); background:transparent; }
.catalog-cards .car-tag { border-radius:6px; }

/* Content types are visually distinct; remove repeated floating icon-card treatment. */
.category-card { border-radius:8px; box-shadow:none; transform:none; }
.category-card:hover { transform:none; box-shadow:none; }
@media(min-width:901px) {
  .category-section { padding-top:64px; }
  .category-grid { gap:24px; }
  .category-card { min-height:167px; }
}
.steps-three .step { border:0; border-top:2px solid var(--hz-blue); border-radius:0; background:transparent; box-shadow:none; }
.steps-three .step-number { border-radius:0; background:transparent; font-size:18px; }
.audience-card,.audience-page-card,.knowledge-card { border-radius:8px; box-shadow:none; }
.audience-card:hover,.audience-page-card:hover,.knowledge-card:hover { box-shadow:none; }
.audience-page-card,.calculator-guide { background:#fff; }
.faq-group details { border-radius:8px; }

/* WhatsApp is an icon-only, accessible contact action. */
.whatsapp-float { display:grid; place-items:center; width:48px; height:48px; min-width:48px; padding:0; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); border:1px solid var(--hz-primary); border-radius:50%; background:var(--hz-primary); color:#fff; box-shadow:0 4px 14px #09284624; }
.whatsapp-float svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.whatsapp-float:hover { box-shadow:0 4px 14px #09284624; transform:none; }
.whatsapp-float span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

@media(max-width:1350px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .nav-actions { margin-left:auto; }
}
@media(max-width:1200px) {
  .desktop-nav { gap:0; }
  .desktop-nav>a,.desktop-nav summary { padding:8px; font-size:14px; }
  .catalog-layout { grid-template-columns:260px minmax(0,1fr); gap:30px; }
}
@media(max-width:900px) {
  .home-search-wrap { width:calc(100% - 32px); }
  .home-search-wrap .quick-fields { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .home-search-wrap .quick-fields>label:nth-child(-n+3) { grid-column:span 2; }
  .home-search-wrap .quick-fields>label:nth-child(4),.home-search-wrap .quick-fields>.btn { grid-column:span 3; }
  .home-search-wrap .quick-fields .btn { grid-column:span 3; }
  .catalog-layout { display:block; }
  .filter-panel:not(.is-open) { display:none; }
  .catalog-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:641px) and (max-width:900px) {
  .home-hero { display:flex; flex-direction:column; padding:8px 0 28px; }
  .home-hero-grid { order:1; width:calc(100% - 32px); }
  .home-hero-copy .eyebrow { display:none; }
  .home-hero-copy h1 { margin:0; font-size:28px; line-height:1; text-align:center; }
  .home-search-wrap { order:2; margin-top:48px; }
  .home-search-heading { margin-bottom:32px; }
  .home-search-advanced { position:static; display:block; margin:18px auto 0; text-align:center; }
  .home-hero>.hero-trust { order:3; width:calc(100% - 32px); margin:22px auto 0; }
}
@media(max-width:640px) {
  .contact-strip { min-height:0; }
  .nav-shell { height:62px; }
  .brand-art { width:119px; height:41px; }
  .brand-art img { width:221px; left:-13px; top:-22px; }
  .home-hero { display:flex; flex-direction:column; padding:11px 0 28px; }
  .home-hero-grid { order:1; }
  .home-hero>.hero-trust { order:3; width:calc(100% - 32px); margin:32px auto 0; }
  .home-search-wrap { order:2; }
  .home-hero-copy h1 { font-size:28px; line-height:1; letter-spacing:-.02em; }
  .home-hero-lead { font-size:13px; line-height:1.5; }
  .hero-trust { margin-top:14px; }
  .home-search-wrap { padding:24px; border-radius:24px; }
  .home-search-heading { margin-bottom:32px; }
  .home-search-advanced { position:static; display:block; margin:20px auto 0; text-align:center; font-size:14px; }
  .home-search-wrap .quick-fields { grid-template-columns:1fr; gap:16px; }
  .home-search-wrap .quick-fields>label:nth-child(n),.home-search-wrap .quick-fields>.btn { grid-column:1; }
  .home-search-wrap .quick-fields>label { height:50px; gap:0; }
  .home-search-wrap .quick-fields select { min-height:50px; height:50px; padding:0 20px; font-size:16px; }
  .home-search-wrap .quick-fields .btn { min-height:48px; height:48px; font-size:16px; }
  .catalog-cards { grid-template-columns:1fr; }
  .catalog-cards .car-image { height:auto; aspect-ratio:1.6; }
  .whatsapp-float { display:grid; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); }
  body:has(.mobile-sticky-cta) .whatsapp-float { display:none; }
}

/* Keep the language control quiet and readable at every header breakpoint. */
.site-header .language-menu summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:68px;
  max-width:none;
  height:40px;
  min-height:40px;
  padding:0 11px;
  border:1px solid #d5e2ec;
  border-radius:999px;
  background:#fff;
  color:#123250;
  white-space:nowrap;
}
.site-header .language-menu summary:hover,
.site-header .language-menu[open] summary { background:#f2f7fb; border-color:#b8d1e2; }
.site-header .language-badge {
  display:inline;
  min-width:0;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#123250;
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
}
.site-header .language-full { display:none; }
.site-header .language-chevron { color:#56738b; font-size:14px; transform:none; }
.site-header .language-menu[open] .language-chevron { transform:rotate(180deg); }
.site-header .language-menu>div {
  top:calc(100% + 8px);
  right:0;
  width:160px;
  min-width:160px;
  max-width:calc(100vw - 24px);
  padding:6px;
  border-radius:12px;
  box-shadow:0 10px 25px #102d4e1a!important;
}
.site-header .language-menu a { padding:9px 10px; border-radius:7px; font-size:13px; line-height:1.4; }
.site-header .language-menu a[aria-current=true]:after { color:#0b77ac; }

/* Keep the full desktop navigation inside its allocated space. */
.desktop-nav { gap:2px; }
.desktop-nav>a,.desktop-nav .nav-dropdown>summary {
  gap:5px;
  padding:8px 6px;
  font-size:15px;
}
.site-header .language-menu { flex:none; }
.site-header .language-menu summary { flex:none; }
@media (min-width:1351px) and (max-width:1450px) {
  .nav-shell { gap:14px; }
  .desktop-nav { margin-left:0; }
  .nav-actions { gap:10px; }
}

/* A clear, compact three-step journey with enough visual weight to read as a section. */
.process-section {
  margin-top:46px;
  padding:48px 0 50px;
  background:#f4f8fc;
}
.process-section .section-head { margin-bottom:25px; }
.steps-three { gap:16px; }
.steps-three .step {
  min-height:150px;
  padding:23px 22px;
  border:1px solid #dceaf3;
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px #123e630a;
}
.steps-three .step-number {
  display:grid;
  place-items:center;
  flex:none;
  width:43px;
  height:43px;
  margin:0;
  border-radius:12px;
  background:#e6f3fb;
  color:#0879b5;
  font-size:16px;
  font-weight:800;
}
.steps-three .step h3 { margin:2px 24px 8px 0; }
.steps-three .step p { max-width:31ch; }
.steps-three .step-arrow {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  top:26px;
  right:19px;
  border-radius:50%;
  background:#f2f8fc;
  color:#0879b5;
  font-size:18px;
}
@media (max-width:900px) {
  .process-section { margin-top:36px; padding:42px 0 45px; }
  .steps-three { gap:12px; }
  .steps-three .step { padding:19px; }
}
@media (max-width:640px) {
  .process-section { margin-top:30px; padding:38px 0 40px; }
  .process-section .section-head { margin-bottom:20px; }
  .steps-three { grid-template-columns:1fr; }
  .steps-three .step { min-height:0; padding:19px; }
}