:root {
  --blue: #1d63ad;
  --blue-dark: #0f3761;
  --gold: #c8a24a;
  --light: #f5f7fa;
  --text: #172033;
  --muted: #64748b;
  --white: #ffffff;
  --line: #dbe3ee;
  --shadow: 0 18px 45px rgba(8, 40, 70, 0.12);
  --radius: 8px;
  --blueprint-line: rgba(29, 99, 173, .14);
  --blueprint-strong: rgba(29, 99, 173, .24);
  --blueprint-growth: 0px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
main {
  position: relative;
  overflow: hidden;
}
main::before {
  content: "";
  position: absolute;
  top: 0;
  right: max(-220px, calc((100vw - 1120px) / 2 - 260px));
  width: min(620px, 52vw);
  height: var(--blueprint-growth);
  min-height: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .055;
  background:
    linear-gradient(90deg, transparent 0%, rgba(29, 99, 173, .35) 52%, transparent 100%) top right / 100% 1px repeat-y,
    url("assets/blueprint-detail.svg") top right / min(520px, 44vw) auto repeat-y;
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 360px), transparent 100%);
}
main::after {
  content: "";
  position: absolute;
  top: 0;
  left: max(12px, calc((100vw - 1120px) / 2 - 44px));
  width: 54px;
  height: var(--blueprint-growth);
  pointer-events: none;
  z-index: 2;
  opacity: .16;
  background:
    linear-gradient(var(--blueprint-strong), var(--blueprint-strong)) 26px 0 / 1px 100% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 76px, var(--blueprint-strong) 77px 78px, transparent 79px 152px);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 280px), transparent 100%);
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  background: var(--blue-dark);
  color: var(--white);
  padding: 10px 14px;
  z-index: 20;
}
.skip-link:focus { left: 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
  color: var(--blue-dark);
}
.brand img {
  width: clamp(170px, 24vw, 250px);
  height: 50px;
  object-fit: contain;
}
.brand span {
  display: none;
}
.brand small {
  display: block;
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--blue-dark);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  font-weight: 700;
}
.nav-links a {
  text-decoration: none;
  color: var(--text);
}
.nav-links a:hover { color: var(--blue); }
.nav-links .nav-configurator-link {
  padding: 8px 11px;
  border: 1px solid rgba(192, 145, 45, .42);
  border-radius: 999px;
  background: #fff8e7;
  color: var(--blue-dark);
  box-shadow: 0 5px 16px rgba(140, 99, 19, .10);
}
.nav-links .nav-configurator-link:hover {
  background: var(--gold);
  color: #fff;
}
.nav-links .btn-secondary {
  background: var(--blue-dark);
  color: var(--white);
  border-color: var(--blue-dark);
}
.nav-links .btn-secondary:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary { background: var(--blue-dark); color: var(--white); }
.btn-primary:hover { background: var(--blue); color: var(--white); }
.btn-secondary { background: var(--blue); color: var(--white); }
.btn-outline { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn-light { background: var(--white); color: var(--blue-dark); border-color: var(--line); }
.btn-small { min-height: 38px; padding: 9px 13px; font-size: 14px; }

/* Prominente ingang naar de aanbouw configurator */
.configurator-promo {
  padding: 58px 0;
  background: linear-gradient(135deg, #f5f8fb 0%, #fffaf0 100%);
  border-bottom: 1px solid var(--line);
}
.configurator-promo-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 54px;
  align-items: center;
}
.configurator-promo-copy h2 {
  max-width: 640px;
  margin: 5px 0 14px;
  color: var(--blue-dark);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
}
.configurator-promo-copy > p:not(.eyebrow) {
  max-width: 610px;
  color: var(--muted);
  font-size: 17px;
}
.configurator-promo-copy .check-list { margin: 22px 0 25px; }
.configurator-promo-visual {
  position: relative;
  display: block;
  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 17px;
  box-shadow: 0 24px 58px rgba(8, 40, 70, .18);
  color: var(--white);
}
.configurator-promo-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .35s ease;
}
.configurator-promo-visual:hover img { transform: scale(1.025); }
.configurator-promo-visual > span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(8, 40, 70, .92);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.configurator-promo-visual small { color: #d9e6f1; }

.hero {
  background:
    linear-gradient(90deg, rgba(8,40,70,.84) 0%, rgba(18,63,115,.58) 48%, rgba(18,63,115,.18) 100%),
    url("assets/project-aanbouw-lichtstraat-bussum.jpg") center/cover;
  color: var(--white);
  min-height: clamp(560px, 76vh, 760px);
  padding: 86px 0 64px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: max(24px, calc((100vw - 1120px) / 2));
  bottom: 34px;
  width: min(520px, 42vw);
  height: 300px;
  pointer-events: none;
  opacity: .34;
  background: url("assets/blueprint-detail.svg") center/contain no-repeat;
  filter: brightness(2.5) saturate(.65);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,.72) 52%, transparent 100%);
}
.hero > .container {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: 36px;
  align-items: end;
}
.hero-grid-simple {
  display: block;
}
.hero-copy {
  max-width: 680px;
}
.hero .eyebrow {
  color: var(--gold);
  font-size: 13px;
  max-width: none;
}
.eyebrow {
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 13px;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; color: var(--blue-dark); }
.hero h1 { color: var(--white); font-size: clamp(42px, 6vw, 72px); max-width: 680px; }
.hero p { font-size: 20px; max-width: 620px; color: #eef5ff; }
.hero-actions, .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-review-link { display: none; }
.hero .hero-trust-line {
  margin: 18px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 800;
  max-width: none;
}
.hero-card {
  background: rgba(255,255,255,.96);
  color: var(--text);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.hero-card h2 { font-size: 22px; }
.hero-card p { color: var(--muted); }
.hero-card a:not(.btn) { color: var(--blue); }
.hero-card ul { margin: 0; padding-left: 18px; }
.hero-card li { margin: 8px 0; }
.hero-card-contact {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}
.hero-card-contact a {
  font-weight: 800;
  color: var(--blue);
}

.trustbar {
  background: var(--white);
  color: var(--blue-dark);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.trust-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.trust-items span,
.trust-items a {
  border-left: 2px solid rgba(200,162,74,.55);
  padding-left: 9px;
  font-weight: 800;
  font-size: 13px;
}
.trust-items a {
  color: var(--blue-dark);
  text-align: left;
  background: transparent;
  text-decoration: none;
}
.trust-items a:hover {
  color: var(--gold);
}

.check-section {
  background: linear-gradient(180deg, var(--light), var(--white));
}
.check-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 34px;
  align-items: start;
}
.check-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.check-card label {
  color: var(--blue-dark);
}
.check-card input,
.check-card select,
.check-card textarea {
  border-color: var(--line);
  background: var(--light);
}
.check-result {
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--light);
  color: var(--text);
  font-weight: 700;
}
.check-result.is-positive {
  border-color: rgba(200,162,74,.75);
  background: #fff8e5;
}
.check-result.is-caution {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.check-whatsapp {
  display: none;
}
.check-whatsapp.is-visible {
  display: inline-flex;
}

.depth-section {
  padding: 36px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}
.depth-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.depth-band h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 10px;
}
.depth-band p {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 17px;
}
.depth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.depth-links .btn {
  box-shadow: none;
}
.compact-route-section,
.trust-proof-section {
  padding: 42px 0;
}
.compact-route {
  padding: 24px 0;
}
.proof-pills,
.local-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.proof-pills {
  margin-top: 16px;
}
.proof-pills span,
.local-link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--blue-dark);
  font-weight: 800;
  text-decoration: none;
}
.local-link-list a:hover {
  border-color: rgba(200,162,74,.7);
  color: var(--blue);
  box-shadow: 0 8px 18px rgba(8,40,70,.08);
}

section {
  position: relative;
  padding: 68px 0;
  overflow: hidden;
}
main > section:not(.hero) > .container {
  position: relative;
  z-index: 1;
}
main > section:not(.hero)::before {
  content: "";
  position: absolute;
  top: 46px;
  right: max(16px, calc((100vw - 1120px) / 2));
  width: min(430px, 42vw);
  height: 250px;
  pointer-events: none;
  opacity: .2;
  background: url("assets/blueprint-detail.svg") center/contain no-repeat;
  mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,.78) 54%, transparent 100%);
}
main > section:not(.hero)::after {
  content: "";
  position: absolute;
  left: max(16px, calc((100vw - 1120px) / 2));
  bottom: 24px;
  width: min(300px, 30vw);
  height: 170px;
  pointer-events: none;
  opacity: .14;
  background: url("assets/blueprint-detail.svg") center/contain no-repeat;
  mask-image: linear-gradient(315deg, #000 0%, rgba(0,0,0,.68) 48%, transparent 100%);
}
main > section:nth-of-type(even):not(.hero)::before {
  right: auto;
  left: max(16px, calc((100vw - 1120px) / 2));
  transform: scaleX(-1);
}
main > section:nth-of-type(even):not(.hero)::after {
  left: auto;
  right: max(16px, calc((100vw - 1120px) / 2));
  transform: scaleX(-1);
}
.section-light { background: var(--light); }
.section-head {
  max-width: 760px;
  margin-bottom: 30px;
}
.local-pages-head {
  margin-top: 42px;
}
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }
.section-head p, .lead { color: var(--muted); font-size: 18px; }

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.fit-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 8px 24px rgba(8, 40, 70, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(200,162,74,.65);
}
.fit-card.is-muted {
  background: var(--light);
}
.fit-card ul {
  margin: 14px 0 20px;
  padding-left: 20px;
}
.fit-card li {
  margin: 9px 0;
  color: var(--muted);
}
.fit-card p {
  color: var(--muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 8px 24px rgba(8, 40, 70, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(200,162,74,.65); }
.card h3 { font-size: 21px; }
.card p { color: var(--muted); margin-bottom: 0; }

.steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.step strong {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--blue-dark);
  border-radius: 50%;
  margin-bottom: 12px;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.project {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(8, 40, 70, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.project:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(200,162,74,.65);
}
.project img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.project-content { padding: 18px; }
.project-meta {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.project-points {
  margin: 14px 0 0;
  padding-left: 18px;
}
.project-points li {
  margin: 7px 0;
  color: var(--muted);
}

.proof-card {
  min-height: 100%;
}
.review-proof {
  border-color: rgba(200,162,74,.72);
  background: linear-gradient(180deg, #fffaf0, var(--white));
}
.review-stars-large {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}
.review-stars-large .star-full {
  color: #fbbc04;
}
.review-stars-large .star-half {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #fbbc04 0 50%, #dadce0 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.google-reviews-live {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(251,188,4,.38);
  border-radius: var(--radius);
  background: #fffdf6;
  box-shadow: 0 12px 28px rgba(8,40,70,.07);
}
.google-reviews-live.is-hidden {
  display: none;
}
.review-loading {
  margin: 0;
  color: var(--muted);
}
.google-review-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text);
}
.google-review-summary strong {
  font-size: 30px;
  color: var(--blue-dark);
}
.dynamic-stars {
  display: inline-flex;
  gap: 1px;
  color: #fbbc04;
  font-size: 18px;
  line-height: 1;
}
.dynamic-stars .star-full {
  color: #fbbc04;
}
.dynamic-stars .star-half {
  color: transparent;
  background: linear-gradient(90deg, #fbbc04 0 50%, #dadce0 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.dynamic-stars .star-empty {
  color: #dadce0;
}
.google-review-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.google-review-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.google-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.google-review-item p {
  margin: 0;
  color: var(--muted);
}
.google-review-more {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}
.google-review-source {
  display: inline-flex;
  margin-top: 12px;
  font-weight: 800;
  color: var(--blue);
}
.review-inline-embed {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  aspect-ratio: 4 / 3;
  box-shadow: 0 12px 30px rgba(8,40,70,.08);
}
.review-inline-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.review-checks {
  margin: 14px 0 0;
  padding-left: 18px;
}
.review-checks li {
  margin: 8px 0;
  color: var(--muted);
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.video-card {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(8, 40, 70, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.video-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(200,162,74,.65);
}
.video-card div {
  padding: 18px;
}
.video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--blue-dark);
  cursor: pointer;
}
.video-thumb img,
.video-thumb iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,40,70,.06), rgba(8,40,70,.42));
  transition: opacity .18s ease;
}
.video-thumb:hover::after {
  opacity: .7;
}
.video-thumb.is-playing::after {
  display: none;
}
.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--gold);
  color: var(--blue-dark);
  box-shadow: 0 14px 34px rgba(8,40,70,.3);
  font-size: 23px;
}
.video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.page-video-card {
  margin: 30px 0;
}
.page-video-card h2 {
  margin-bottom: 8px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  margin: 12px 0;
  padding-left: 28px;
  position: relative;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 13px;
  background: var(--gold);
  border-radius: 50%;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.faq-item h3 { font-size: 19px; margin-bottom: 8px; overflow-wrap: anywhere; }
.faq-item p { margin: 0; color: var(--muted); }

.contact-panel {
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.contact-panel h2, .contact-panel h3 { color: var(--white); }
.contact-panel p { color: #e7eef8; }
.project-fit {
  margin: 18px 0 20px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius);
  background: rgba(8, 40, 70, .24);
}
.project-fit h3 {
  margin-bottom: 10px;
  font-size: 19px;
}
.project-fit ul {
  margin: 0;
  padding-left: 18px;
}
.project-fit li {
  margin: 8px 0;
  color: #e7eef8;
}
.contact-form {
  display: grid;
  gap: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
label { font-weight: 800; font-size: 14px; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--radius);
  padding: 12px;
  font: inherit;
  color: var(--text);
  background: var(--white);
}
textarea { min-height: 124px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #4b5f78; opacity: 1; }
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.1);
  color: #f2f7ff;
  font-weight: 700;
}
.form-note.is-positive {
  background: rgba(200,162,74,.18);
  border-color: rgba(200,162,74,.7);
}
.form-note.is-caution {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.48);
}

.site-footer {
  background: var(--blue-dark);
  color: var(--white);
  padding: 36px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 28px;
}
.site-footer a { color: var(--white); }
.site-footer p { color: #d9e5f3; }

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8,40,70,.62);
  z-index: 30;
}
.modal.is-open { display: flex; }
.modal-content {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.review-drawer {
  width: min(520px, 100%);
}
.review-embed {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--light);
  aspect-ratio: 4 / 5;
}
.review-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.modal-close {
  float: right;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: var(--blue-dark);
}

.review-stars {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0;
}

.page-hero {
  background: linear-gradient(90deg, var(--blue-dark), var(--blue));
  color: var(--white);
  padding: 62px 0;
}
.page-hero h1 { color: var(--white); font-size: clamp(32px, 5vw, 52px); max-width: 860px; }
.page-hero p { color: #e7eef8; max-width: 760px; font-size: 19px; }
.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 36px;
}
.content article h2 { margin-top: 34px; font-size: 30px; }
.content article p { color: #314158; }
.sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}
.link-list a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.fade-in {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity .32s ease,
    transform .32s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 76px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px; }
  .nav-links .nav-configurator-link { margin: 4px 0; border-radius: 8px; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero-grid, .split, .content, .footer-grid, .check-grid, .planning-block { grid-template-columns: 1fr; }
  .configurator-promo-grid { grid-template-columns: 1fr; gap: 30px; }
  .trust-items, .card-grid, .projects, .video-grid, .fit-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr 1fr; }
  .sidebar { position: static; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 24px, 1120px); }
  .configurator-promo { padding: 40px 0; }
  .configurator-promo-grid { gap: 24px; }
  .configurator-promo-copy > p:not(.eyebrow) { font-size: 16px; }
  .configurator-promo-visual { border-width: 4px; border-radius: 12px; }
  .configurator-promo-visual > span { right: 10px; bottom: 10px; }
  .depth-section {
    padding: 28px 0;
  }
  .depth-band {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 0;
  }
  .depth-band p {
    font-size: 16px;
  }
  .depth-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }
  .depth-links .btn {
    width: 100%;
  }
  .depth-links .btn:last-child {
    grid-column: 1 / -1;
  }
  main::before {
    right: -80px;
    width: 260px;
    opacity: .045;
    background-size: 240px auto;
  }
  main::after {
    display: none;
  }
  .hero {
    min-height: 560px;
    padding: 56px 0 44px;
    align-items: flex-end;
    background:
      linear-gradient(180deg, rgba(8,40,70,.42) 0%, rgba(8,40,70,.82) 56%, rgba(8,40,70,.92) 100%),
      url("assets/project-aanbouw-lichtstraat-bussum.jpg") center top/cover;
  }
  .hero::after {
    right: 12px;
    bottom: 18px;
    width: 220px;
    height: 130px;
    opacity: .16;
  }
  main > section:not(.hero)::before {
    top: 26px;
    right: 12px;
    left: auto;
    width: 210px;
    height: 126px;
    opacity: .1;
    transform: none;
  }
  main > section:not(.hero)::after {
    display: none;
  }
  .hero-grid { gap: 28px; }
  .hero p { font-size: 17px; max-width: 100%; }
  .hero-actions { margin-top: 18px; }
  section { padding: 48px 0; }
  .trust-items, .card-grid, .projects, .video-grid, .fit-grid, .steps, .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-row .btn { width: 100%; }
  .brand span { font-size: 15px; }
  .brand img { width: 168px; height: 46px; }
  .contact-panel { padding: 20px; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero-trust-line { font-size: 13px; }
  h2 { font-size: 26px; }
  .card h3,
  .project h3,
  .video-card h3,
  .faq-item h3 {
    font-size: 18px;
    overflow-wrap: anywhere;
  }
}



.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 18px;
}
.review-modal.is-open {
  display: grid;
  place-items: center;
}
.review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,40,70,.66);
}
.review-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  height: min(720px, 88vh);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(8,40,70,.34);
}
.review-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.review-modal__head h2 {
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
}
.review-modal__close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--light);
  color: var(--blue-dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.review-modal__close:hover {
  background: var(--blue);
  color: var(--white);
}
.review-modal iframe {
  display: block;
  width: 100%;
  height: calc(100% - 75px);
  border: 0;
}
body.modal-open {
  overflow: hidden;
}

.planning-block {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  gap: 34px;
  align-items: center;
}
.planning-copy .lead {
  color: #314158;
}
.planning-list {
  margin: 22px 0;
}
.planning-visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.planning-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.planning-visual figcaption {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  background: #fff;
}
.planning-page-block {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
  gap: 22px;
  align-items: center;
  margin: 20px 0 28px;
}
.planning-visual-compact {
  box-shadow: 0 10px 26px rgba(8,40,70,.08);
}
@media (max-width: 860px) {
  .planning-page-block { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .planning-block {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
}

@media (max-width: 620px) {
  .planning-copy h2 {
    font-size: 25px;
  }
  .planning-copy .lead {
    font-size: 16px;
  }
  .planning-list {
    margin: 18px 0;
  }
  .planning-visual {
    overflow: hidden;
  }
  .planning-visual img {
    width: 100%;
    max-width: 100%;
  }
  .planning-visual figcaption {
    font-size: 13px;
  }
}

/* Conceptverbeteringen conversie */
.focus-block .section-head { max-width: 860px; }
.focus-grid .card { min-height: 100%; }
.focus-cta-card { background: var(--blue); color: var(--white); }
.focus-cta-card h3, .focus-cta-card p { color: var(--white); }
.focus-cta-card .btn { margin-top: 10px; }
.project-content .btn { margin-top: 12px; }
.contact-form input[type="url"] { width: 100%; }
@media (max-width: 620px) {
  .focus-cta-card .btn { width: 100%; }
}





/* Persoonlijk bewijsblok */
.about-proof {
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  gap: 34px;
  align-items: stretch;
  margin-top: 8px;
  max-width: 1040px;
}
.about-proof__image {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
  align-self: start;
}
.about-proof__image img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
.about-proof > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.about-proof .check-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 10px 24px rgba(8,40,70,.06);
}
.about-proof .cta-row {
  margin-top: 18px;
}
.about-proof__image figcaption {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.about-page-photo {
  margin: 28px 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
.about-page-photo img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
.about-page-photo figcaption {
  padding: 12px 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) {
  .about-proof {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 22px;
  }
  .about-proof .check-list { padding: 0; border: 0; box-shadow: none; background: transparent; }
}
/* Subtiele diepte en kleurverloop */
:root {
  --shadow-soft: 0 12px 32px rgba(8, 40, 70, .08);
  --shadow-lift: 0 18px 44px rgba(8, 40, 70, .13);
  --fade-card: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  --fade-warm: linear-gradient(180deg, #fffdf7 0%, #ffffff 74%);
  --fade-blue: linear-gradient(145deg, #123f73 0%, #0b3158 100%);
}

.card,
.fit-card,
.step,
.project,
.video-card,
.proof-card,
.check-card,
.planning-visual,
.about-proof__image,
.about-proof .check-list,
.about-page-photo,
.review-card,
.review-embed,
.service-page-card {
  box-shadow: var(--shadow-soft);
}

.card,
.step,
.check-card,
.about-proof .check-list,
.about-page-photo,
.review-card,
.review-embed,
.service-page-card {
  background: var(--fade-card);
}

.fit-card:not(.is-muted),
.proof-card,
.planning-visual {
  background: var(--fade-warm);
}

.fit-card.is-muted {
  background: linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}

.project,
.video-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.contact-panel,
.focus-cta-card,
.cta-band {
  background: var(--fade-blue);
  box-shadow: 0 18px 46px rgba(8, 40, 70, .18);
}

.contact-panel a,
.focus-cta-card a,
.cta-band a {
  color: inherit;
}

.card:hover,
.fit-card:hover,
.project:hover,
.video-card:hover,
.proof-card:hover,
.check-card:hover,
.service-page-card:hover {
  box-shadow: var(--shadow-lift);
}

.trustbar {
  background: var(--white);
  box-shadow: 0 10px 24px rgba(8, 40, 70, .05);
}

@media (min-width: 901px) {
  .trustbar {
    padding: 14px 0;
  }

  .trust-items span,
  .trust-items a {
    font-size: 13px;
    line-height: 1.35;
  }
}


.review-proof {
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 78%);
  box-shadow: var(--shadow-soft);
}
.project img,
.video-thumb,
.about-proof__image img,
.about-page-photo img,
.planning-visual img {
  filter: saturate(1.03) contrast(1.02);
}

.form-note,
.project-fit,
.hero-card,
.review-panel {
  box-shadow: var(--shadow-soft);
}

@media (max-width: 620px) {
  .hero-review-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 14px;
    padding: 10px 13px;
    border: 1px solid rgba(251, 188, 4, .42);
    border-radius: 999px;
    background: linear-gradient(180deg, #fffdf6 0%, #ffffff 100%);
    color: var(--blue-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
  }

  .hero-review-link .floating-review__stars {
    font-size: 14px;
  }

  .hero-review-link strong {
    font-size: 16px;
  }

  .card,
  .fit-card,
  .step,
  .project,
  .video-card,
  .proof-card,
  .check-card,
  .planning-visual,
  .about-proof__image,
  .about-page-photo,
  .review-card,
  .review-embed,
  .service-page-card,
  .form-note,
  .project-fit,
  .hero-card,
  .review-panel {
    box-shadow: 0 8px 22px rgba(8, 40, 70, .07);
  }
}
/* Knopcontrast in donkere CTA-blokken */
.contact-panel a:not(.btn),
.focus-cta-card a:not(.btn),
.cta-band a:not(.btn) {
  color: inherit;
}

.contact-panel .btn-primary,
.focus-cta-card .btn-primary,
.cta-band .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--blue-dark);
}

.contact-panel .btn-primary:hover,
.focus-cta-card .btn-primary:hover,
.cta-band .btn-primary:hover {
  background: #d9b85f;
  border-color: #d9b85f;
  color: var(--blue-dark);
}

.contact-panel .btn-light,
.focus-cta-card .btn-light,
.cta-band .btn-light {
  background: var(--white);
  border-color: rgba(255, 255, 255, .72);
  color: var(--blue-dark);
}

.contact-panel .btn-light:hover,
.focus-cta-card .btn-light:hover,
.cta-band .btn-light:hover {
  background: #f3f7fb;
  color: var(--blue-dark);
}

.contact-panel .btn-outline,
.focus-cta-card .btn-outline,
.cta-band .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .58);
  color: var(--white);
}
/* Professionele footer */
.site-footer {
  background: linear-gradient(145deg, var(--blue-dark) 0%, #0d355e 58%, #123f73 100%);
  border-top: 4px solid var(--gold);
}

.footer-grid-pro {
  grid-template-columns: 1.35fr .85fr 1fr 1fr 1.05fr;
  align-items: start;
}

.site-footer h2,
.site-footer h3,
.site-footer .footer-kicker {
  color: var(--white);
}

.footer-kicker {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--gold) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}

.footer-brand h2 {
  margin-top: 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.12;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #eef5ff;
  font-weight: 700;
  font-size: 13px;
}

.footer-links {
  display: grid;
  gap: 9px;
}

.footer-links h3 {
  margin-bottom: 4px;
}

.site-footer a {
  text-underline-offset: 4px;
}

.footer-links a,
.footer-meta a {
  color: #eef5ff;
  font-weight: 700;
}

.footer-links a:hover,
.footer-meta a:hover,
.site-footer p a:hover {
  color: var(--gold);
}

.footer-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  max-width: 220px;
}

.footer-actions .btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--blue-dark);
}

.footer-actions .btn-primary:hover {
  background: #d9b85f;
  border-color: #d9b85f;
  color: var(--blue-dark);
}

.footer-actions .btn-light {
  color: var(--blue-dark);
}

.footer-meta {
  margin-top: 18px;
  font-weight: 700;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #d9e5f3;
  font-size: 14px;
}

.footer-bottom a {
  color: #d9e5f3;
  font-weight: 700;
}

@media (max-width: 960px) {
  .footer-grid-pro {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding: 32px 0;
  }

  .footer-grid-pro {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-actions {
    max-width: none;
  }

  .footer-actions .btn {
    width: 100%;
  }

  .footer-bottom {
    display: grid;
    justify-content: stretch;
  }
}
/* Floating Google review */
.floating-review {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 850;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 36px);
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .48) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: var(--blue-dark);
  box-shadow: 0 10px 28px rgba(8, 40, 70, .18), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(255,255,255,.24);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.floating-review:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 34px rgba(8, 40, 70, .2), inset 0 1px 0 rgba(255,255,255,.9);
}

.floating-review__stars {
  display: inline-flex;
  gap: 1px;
  color: #fbbc04;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.floating-review__stars .half {
  color: transparent;
  background: linear-gradient(90deg, #fbbc04 0 50%, #dadce0 50% 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.floating-review__text {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.floating-review__text strong {
  font-size: 17px;
  color: var(--blue-dark);
}

@media (max-width: 620px) {
  .floating-review {
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    left: auto;
    padding: 9px 11px;
    font-size: 12px;
    z-index: 5000;
  }
}

/* Conversie- en contentupgrade 2026-07 */

.hero-benefits {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-benefits li {
  position: relative;
  padding-left: 27px;
  color: #eef5ff;
  font-weight: 700;
}

.hero-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900;
}

.hero-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.hero-rating__stars {
  color: #fbbc04;
  letter-spacing: 1px;
}
.project picture {
  display: block;
}

.text-link {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.text-link:hover {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trust-items-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.project .text-link {
  display: inline-block;
  margin-top: 16px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  position: relative;
  min-height: 218px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 162, 74, .72);
  box-shadow: var(--shadow-lift);
}

.service-card > span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 50%;
  background: #fff6dc;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
}

.service-card h3 {
  font-size: 22px;
}

.service-card p {
  margin: 0;
  color: var(--muted);
}

.process-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.process-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: process;
}

.process-steps li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 0 0 28px;
  position: relative;
}

.process-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 4px;
  left: 20px;
  width: 2px;
  background: var(--line);
}

.process-steps li > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--blue-dark);
  font-weight: 900;
}

.process-steps h3 {
  margin: 2px 0 5px;
  font-size: 20px;
}

.process-steps p {
  margin: 0;
  color: var(--muted);
}

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  align-items: start;
}

.review-trust {
  padding: 28px;
  border-radius: 12px;
  background: var(--fade-blue);
  color: var(--white);
  box-shadow: var(--shadow-lift);
}

.review-trust h3 {
  color: var(--white);
  font-size: 26px;
}

.review-trust .check-list {
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

.review-trust .check-list li {
  color: #e7eef8;
}

.review-trust .text-link {
  color: var(--white);
}

.area-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 28px;
  align-items: stretch;
}

.about-compact {
  padding: 30px;
  border: 1px solid rgba(200, 162, 74, .42);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
  box-shadow: var(--shadow-soft);
}

.about-compact p:not(.eyebrow) {
  color: var(--muted);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 20px 44px 20px 0;
  color: var(--blue-dark);
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 16px;
  right: 0;
  font-size: 27px;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  margin: -4px 0 22px;
  color: var(--muted);
}

.contact-conversion-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}

.contact-intro {
  position: sticky;
  top: 104px;
}

.contact-intro > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 18px;
}

.contact-direct {
  display: grid;
  gap: 10px;
  margin: 26px 0;
}

.contact-direct a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--blue-dark);
  text-decoration: none;
}

.contact-direct span {
  color: var(--muted);
  text-align: right;
}

.contact-expectation {
  padding: 18px;
  border-left: 3px solid var(--gold);
  background: var(--light);
  font-size: 15px !important;
}

.contact-conversion-grid .contact-panel {
  padding: clamp(24px, 4vw, 38px);
}

.form-more {
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--radius);
}

.form-more summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  color: var(--white);
  font-weight: 800;
  cursor: pointer;
}

.form-more summary span {
  color: #cbd8e8;
  font-size: 12px;
  text-transform: uppercase;
}

.form-more__fields {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

.form-privacy {
  margin: 0;
  color: #dbe7f5 !important;
  font-size: 12px;
}

.form-privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mobile-contact-bar {
  display: none;
}

.breadcrumb {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb a {
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.footer-grid-pro {
  grid-template-columns: 1.25fr .8fr 1fr .9fr;
}

:focus-visible {
  outline: 3px solid #fbbc04;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .process-layout,
  .review-layout,
  .area-about-grid,
  .faq-layout,
  .contact-conversion-grid {
    grid-template-columns: 1fr;
  }

  .service-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-intro {
    position: static;
  }

  .footer-grid-pro {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .hero-rating {
    font-size: 13px;
  }

  .trust-items-four,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .trust-items-four span {
    padding: 7px 0 7px 10px;
  }

  .service-card {
    min-height: 0;
  }

  .footer-grid-pro {
    grid-template-columns: 1fr;
  }

  .section-actions .btn {
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-direct a {
    display: grid;
    gap: 2px;
  }

  .contact-direct span {
    text-align: left;
  }

  .floating-review {
    display: none;
  }

  .mobile-contact-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, .18);
    background: rgba(11, 49, 88, .97);
    box-shadow: 0 -8px 26px rgba(8, 40, 70, .2);
    backdrop-filter: blur(12px);
  }

  .mobile-contact-bar a {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 46px;
    padding: 4px;
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .mobile-contact-bar a:nth-child(2) {
    border-right: 1px solid rgba(255, 255, 255, .16);
    border-left: 1px solid rgba(255, 255, 255, .16);
  }

  .mobile-contact-bar span {
    color: var(--gold);
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
}

img {
  height: auto;
}

.brand img {
  height: auto;
  max-height: 50px;
}
.project picture,
.visual-proof-band picture {
  display: block;
}
.project img,
.about-proof__image img,
.about-page-photo img,
.visual-proof-band img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.projects {
  align-items: start;
}

.visual-proof-band {
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.visual-proof-band img {
  background: var(--light);
}

.visual-proof-band figcaption {
  padding: 20px 22px;
  border-top: 1px solid var(--line);
}

.visual-proof-band figcaption h2 {
  margin-bottom: 8px;
  font-size: 23px;
}

.visual-proof-band figcaption p {
  margin: 0;
  color: var(--muted);
}

main::before,
main::after,
main > section:not(.hero)::after {
  display: none;
}

.hero::after {
  opacity: .07;
}

main > section:not(.hero)::before {
  width: min(360px, 34vw);
  opacity: .035;
}

@media (max-width: 900px) {
  .hero::after,
  main > section:not(.hero)::before {
    display: none;
  }
}

/* Herstelde componentstijlen uit de complete inhoudsversie van 13 juni 2026. */
.experience-note {
  margin: 18px 0 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fffaf0;
  color: var(--blue-dark);
  font-weight: 800;
}

.card-photo {
  display: block;
  width: 100%;
  height: clamp(170px, 22vw, 240px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 16px;
}

.service-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: clamp(135px, 12vw, 165px);
  object-fit: cover;
  object-position: center center;
}

.service-card-split-photo {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  width: 100%;
  height: clamp(135px, 12vw, 165px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 16px;
  background: var(--blue-soft);
}

.service-card-split-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.service-card-split-photo img + img {
  border-left: 2px solid var(--white);
}

.card > img,
.service-helper-grid .card > img,
.service-page-card img {
  max-width: none;
}

.service-choice-section {
  padding-top: 38px;
  padding-bottom: 54px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.service-choice-section .section-head {
  max-width: 760px;
}

.service-choice-section .section-head p:last-child {
  font-size: 17px;
}

.service-helper-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-helper-grid .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: 0;
  min-height: 100%;
}

.service-helper-grid .card-photo {
  border-radius: 0;
  margin: 0;
}

.service-helper-grid .card h3,
.service-helper-grid .card p,
.service-card-actions {
  margin-left: 16px;
  margin-right: 16px;
}

.service-helper-grid .card h3 {
  margin-top: 16px;
  margin-bottom: 7px;
  font-size: 19px;
}

.service-helper-grid .card p {
  font-size: 15px;
  line-height: 1.45;
}

.service-helper-grid .card > .btn {
  margin: 16px 16px;
}

.service-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.service-check-card {
  justify-content: flex-end;
  min-height: 278px;
  color: var(--white);
}

.card.service-check-card {
  background:
    linear-gradient(145deg, rgba(8,40,70,.94), rgba(8,40,70,.84)),
    url("assets/de-bouw-baron-bouwplaats-foto.jpeg") center/cover;
  color: var(--white);
}

.card.service-check-card h3 {
  color: var(--white);
}

.card.service-check-card p {
  color: #f3f7fc;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.card.service-check-card .btn-primary {
  background: var(--gold);
  color: var(--blue-dark);
}

@media (max-width: 900px) {
  .service-helper-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .service-helper-grid {
    grid-template-columns: 1fr;
  }
}

.service-link-list {
  margin-top: 18px;
}

.article-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0 28px;
}

.article-quick-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 8px 22px rgba(8, 40, 70, .06);
}

.article-quick-card h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.article-quick-card p {
  margin: 0;
  color: var(--muted);
}

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 26px 0 30px;
  padding: 18px;
  border: 1px solid rgba(200,162,74,.5);
  border-radius: var(--radius);
  background: linear-gradient(90deg, #fffaf0 0%, #ffffff 100%);
}

.inline-cta p {
  margin: 0;
  color: var(--blue-dark);
  font-weight: 800;
}

.floor-hero {
  background:
    linear-gradient(90deg, rgba(15,55,97,.98), rgba(29,99,173,.82)),
    var(--blue-dark);
}

.floor-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, .78fr);
  gap: 34px;
  align-items: center;
}

.floor-hero-photo {
  margin: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 52px rgba(0,0,0,.24);
}

.floor-hero-photo img {
  display: block;
  width: 100%;
  height: clamp(260px, 32vw, 430px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
}

.site-moment {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin: 26px 0 34px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff, #f7f9fc);
  box-shadow: 0 10px 28px rgba(8, 40, 70, .07);
}

.site-moment figure {
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
}

.site-moment img {
  display: block;
  width: 100%;
  height: clamp(210px, 24vw, 320px);
  object-fit: cover;
  object-position: center center;
}

.site-moment h2 {
  margin-top: 6px;
}

.system-grid {
  display: grid;
  gap: 18px;
  margin: 22px 0 32px;
}

.system-card {
  display: grid;
  grid-template-columns: minmax(220px, .56fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(8, 40, 70, .06);
}

.system-card > div {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.system-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: calc(var(--radius) - 2px);
  object-fit: cover;
}

.system-card h3 {
  margin-top: 4px;
}

.floor-finish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 20px 0 30px;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0 30px;
}

.photo-strip figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 22px rgba(8, 40, 70, .05);
}

.photo-strip img {
  display: block;
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
}

.photo-strip figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
}

.source-visual {
  margin: 24px 0 0;
}

@media (max-width: 620px) {
.trust-items, .card-grid, .projects, .video-grid, .fit-grid, .steps, .form-row, .page-photo-grid { grid-template-columns: 1fr; }

.article-quick-grid,
  .visual-proof-band {
    grid-template-columns: 1fr;
  }

.card-photo {
    height: clamp(165px, 48vw, 230px);
  }

.floor-hero-photo img,
  .site-moment img,
  .photo-strip img,
  .planning-visual img,
  .planning-visual-compact img,
  .page-feature-photo img,
  .about-page-photo img {
    height: clamp(220px, 58vw, 310px);
  }

.page-photo-grid img {
    height: clamp(190px, 52vw, 260px);
  }

.inline-cta .btn {
    width: 100%;
  }

.photo-strip { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
.floor-hero-grid,
  .site-moment,
  .system-card,
  .floor-finish-grid,
  .photo-strip {
    grid-template-columns: 1fr;
  }

.floor-hero-photo img {
    aspect-ratio: 16 / 10;
  }

.system-card img {
    display: block;
    width: 100%;
    height: clamp(210px, 52vw, 300px);
    min-height: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

.system-card > div {
    display: block;
    width: 100%;
  }
}

.page-feature-photo {
  margin: 28px 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}

.page-feature-photo img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 520px);
  max-height: 520px;
  object-fit: cover;
  object-position: center center;
}

.page-feature-photo figcaption {
  padding: 12px 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.page-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 32px;
}

.page-photo-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 24px rgba(8, 40, 70, .06);
}

.page-photo-grid img {
  display: block;
  width: 100%;
  height: clamp(190px, 18vw, 250px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
}

.page-photo-grid figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
.page-photo-grid {
    grid-template-columns: 1fr;
  }
}

.card-photo,
.service-card-photo,
.service-helper-grid .card > img,
.page-feature-photo > img,
.page-photo-grid figure > img,
.system-card > img,
.photo-strip figure > img,
.planning-visual img,
.visual-proof-band img,
.about-proof__image img,
.about-page-photo img,
.project img,
.video-thumb img {
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.card-photo,
.service-helper-grid .card > img {
  height: clamp(170px, 22vw, 240px);
  aspect-ratio: 4 / 3;
}

img.card-photo.service-card-photo {
  height: clamp(135px, 12vw, 165px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-photo-grid figure > img {
  height: clamp(190px, 18vw, 250px);
  aspect-ratio: 4 / 3;
}

@media (max-width: 760px) {
.card-photo,
  .service-helper-grid .card > img,
  .page-photo-grid figure > img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Herstelde fotopagina's: behoud altijd de natuurlijke beeldverhouding. */
.floor-hero-photo img,
.page-feature-photo > img,
.page-photo-grid figure > img,
.system-card > img,
.photo-strip figure > img,
.aanbouw-photo-grid figure > img,
.badkamer-photo-grid figure > img,
.keuken-photo-grid figure > img,
.kozijnen-photo-grid figure > img,
.dakkapel-photo-grid figure > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.floor-hero-photo,
.page-feature-photo,
.page-photo-grid figure,
.system-card,
.photo-strip figure,
.aanbouw-photo-grid figure,
.badkamer-photo-grid figure,
.keuken-photo-grid figure,
.kozijnen-photo-grid figure,
.dakkapel-photo-grid figure {
  overflow: hidden;
}

/* Aanbouw configurator */
.configurator-page { background: #f3f6f9; }
.configurator-page main::before,
.configurator-page main::after { display: none; }
.configurator-intro {
  padding: 54px 0 34px;
  background: linear-gradient(135deg, #0b3158 0%, #164f85 100%);
  color: var(--white);
  text-align: center;
}
.configurator-intro .container { max-width: 800px; }
.configurator-intro .eyebrow { color: #e3bf69; }
.configurator-intro h1 { margin: 5px 0 12px; color: var(--white); font-size: clamp(32px, 4.5vw, 52px); line-height: 1.08; }
.configurator-intro p:last-child { max-width: 690px; margin: 0 auto; font-size: 18px; color: #e8f0f7; }
.configurator-shell { padding: 38px 0 64px; }
.configurator-grid { display: grid; grid-template-columns: minmax(360px, .83fr) minmax(500px, 1.17fr); gap: 26px; align-items: start; }
.configurator-controls,
.configurator-preview { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(8,40,70,.09); overflow: hidden; }
.configurator-controls { padding: 24px; }
.configurator-progress { display: grid; grid-template-columns: 1fr auto; gap: 9px; color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.configurator-progress strong { color: var(--blue-dark); }
.configurator-progress > div { grid-column: 1 / -1; height: 5px; border-radius: 9px; overflow: hidden; background: #e8edf3; }
.configurator-progress i { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--gold); transition: width .25s ease; }
.config-step { border: 0; padding: 26px 0 8px; margin: 0; min-width: 0; }
.config-step legend { width: 100%; padding: 0; color: var(--blue-dark); font-size: 22px; font-weight: 800; }
.config-step legend span { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 7px; border-radius: 50%; background: #e7eff8; color: var(--blue); font-size: 15px; }
.config-step h3 { margin: 23px 0 10px; font-size: 15px; color: var(--blue-dark); }
.step-help { margin: 8px 0 20px; color: var(--muted); font-size: 14px; }
.config-step-assurance { display: inline-flex; align-items: center; gap: 6px; margin: -11px 0 18px; color: #35624f; font-size: 11px; font-weight: 800; }
.config-step-assurance::before { content: "✓"; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #4d806b; font-size: 10px; }
.dimension-grid { display: grid; gap: 22px; }
.dimension-grid label { font-weight: 800; color: var(--blue-dark); }
.dimension-grid label span { float: right; color: var(--blue); }
.dimension-grid input[type="range"] { display: block; width: 100%; margin-top: 12px; accent-color: var(--blue); }
.area-readout { display: flex; align-items: baseline; gap: 9px; margin-top: 24px; padding: 15px 17px; border-radius: 9px; background: #edf4fb; color: var(--muted); }
.area-readout strong { font-size: 25px; color: var(--blue-dark); }
.choice-grid { display: grid; gap: 10px; }
.choice-grid-three { grid-template-columns: repeat(3, 1fr); }
.choice-card { position: relative; padding: 9px; border: 2px solid var(--line); border-radius: 9px; cursor: pointer; text-align: center; }
.choice-card:has(input:checked) { border-color: var(--blue); background: #f3f8fd; }
.choice-card input { position: absolute; opacity: 0; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { margin-top: 6px; font-size: 14px; }
.choice-card small { color: var(--muted); font-size: 11px; }
.choice-swatch { display: block; height: 40px; border-radius: 5px; border: 1px solid rgba(15,55,97,.14); }
.swatch-brick { background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.4) 8px 9px), repeating-linear-gradient(90deg, #9b604f 0 20px, #b87660 20px 39px, #e1c1b5 39px 40px); }
.swatch-stucco { background: #f0eee8; }
.swatch-wood { background: repeating-linear-gradient(90deg, #a27348 0 11px, #6f492c 11px 13px); }
.choice-list { display: grid; gap: 8px; }
.choice-list label { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 9px; cursor: pointer; }
.choice-list label:has(input:checked) { border-color: var(--blue); background: #f3f8fd; box-shadow: inset 3px 0 var(--blue); }
.choice-list input { accent-color: var(--blue); width: 17px; height: 17px; }
.choice-list strong, .choice-list small { display: block; }
.choice-list small { color: var(--muted); font-size: 12px; }
.choice-list b { color: var(--blue-dark); font-size: 12px; white-space: nowrap; }
.config-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.config-select-grid label { display: grid; gap: 5px; color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.config-select-grid select { width: 100%; min-width: 0; padding: 10px 30px 10px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--text); font: inherit; }
.config-more { margin-top: 16px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfd; }
.config-more summary { padding: 12px 14px; color: var(--blue); cursor: pointer; font-size: 13px; font-weight: 800; }
.config-more .config-select-grid { margin: 0; padding: 0 13px 14px; }
.finish-grid { display: grid; gap: 10px; }
.finish-grid label { cursor: pointer; }
.finish-grid input { position: absolute; opacity: 0; }
.finish-grid label > span { position: relative; display: block; padding: 15px 16px; border: 2px solid var(--line); border-radius: 9px; }
.finish-grid input:checked + span { border-color: var(--blue); background: #f3f8fd; }
.finish-grid strong, .finish-grid small, .finish-grid b { display: block; }
.finish-grid small { max-width: 85%; margin: 4px 0; color: var(--muted); }
.finish-grid b { color: var(--blue); font-size: 13px; }
.finish-grid em { position: absolute; right: 10px; top: 10px; padding: 2px 7px; border-radius: 10px; background: var(--gold); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; }
.config-note { margin-top: 18px; padding: 13px 15px; border-left: 3px solid var(--gold); background: #fbf8ef; font-size: 12px; color: #5d5542; }
.config-note p { margin: 4px 0 0; }
.config-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.config-back { background: #edf1f5; color: var(--blue-dark); }
.config-back:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.config-nav .config-review-button { flex: 1; box-shadow: 0 12px 24px rgba(15,55,97,.2); }
.config-sticky-summary { position: relative; z-index: 12; display: grid; grid-template-columns: minmax(220px,1fr) minmax(235px,.92fr); gap: 16px; align-items: center; padding: 15px 18px; color: #fff; background: linear-gradient(125deg,#0b3158,#155487); box-shadow: 0 10px 25px rgba(8,40,70,.16); }
.config-sticky-summary > div { display: grid; gap: 3px; }
.config-sticky-summary > div > span { color: #ead78f; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.config-sticky-summary strong { display: flex; align-items: center; gap: 7px; color: #fff; font-size: clamp(19px,2vw,25px); line-height: 1.15; white-space: nowrap; }
.config-sticky-summary strong i { color: #ead78f; font-style: normal; }
.config-sticky-summary .btn { min-height: 46px; padding: 10px 13px; color: var(--blue-dark); background: #ead78f; font-size: 12px; line-height: 1.25; box-shadow: none; }
.config-sticky-summary .btn:hover { background: #f1dc92; }
.preview-topline { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--blue-dark); font-weight: 800; }
.preview-topline button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--blue); cursor: pointer; font-weight: 700; }
.extension-scene { position: relative; height: 420px; overflow: hidden; perspective: 900px; background: linear-gradient(#dbe8f1 0 57%, #b5c997 57% 71%, #a7a29a 71%); }
.config-photo { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .3s ease, filter .3s ease; }
.config-photo-interior { opacity: 0; }
.extension-scene.is-interior .config-photo-exterior { opacity: 0; }
.extension-scene.is-interior .config-photo-interior { opacity: 1; }
.config-visual-tint { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: color; transition: opacity .25s, background .25s; }
.visual-exterior-layers,.visual-interior-layers { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.visual-exterior-layers { display: none !important; }
.preview-topline small { display:block; margin-top:1px; color:var(--muted); font-size:10px; font-weight:600; }
.config-photo-exterior { transition:opacity .16s ease; }
.config-photo.is-loading,
.config-render-gallery img.is-loading { opacity:.35; }
.visual-interior-layers { display: none; }
.extension-scene.is-interior .visual-exterior-layers { display: none; }
.extension-scene.is-interior .visual-interior-layers { display: block; }
.visual-facade { position: absolute; display: block; background-color: rgba(165,85,55,.76); background-image: repeating-linear-gradient(0deg,transparent 0 7px,rgba(246,225,213,.55) 7px 8px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(246,225,213,.42) 18px 19px); mix-blend-mode: color; transition: background .25s, opacity .25s; }
.visual-facade-top { left: 16%; top: 22.7%; width: 68%; height: 15.2%; }
.visual-facade-left { left: 16%; top: 35%; width: 7.2%; height: 38.5%; }
.visual-facade-right { right: 16%; top: 35%; width: 7.2%; height: 38.5%; }
.facade-stucco .visual-facade { background: rgba(242,239,230,.96); mix-blend-mode: normal; box-shadow: inset 0 0 10px rgba(80,75,65,.12); }
.facade-wood .visual-facade { background-color: rgba(111,70,38,.88); background-image: repeating-linear-gradient(90deg,transparent 0 10px,rgba(35,21,12,.52) 10px 12px); mix-blend-mode: multiply; }
.extension-scene[data-facade-variant*="yellow"] .visual-facade { background-color: rgba(194,157,78,.72); }
.extension-scene[data-facade-variant*="white"] .visual-facade { background-color: rgba(220,213,195,.75); }
.extension-scene[data-facade-variant*="black"] .visual-facade,.extension-scene[data-facade-variant*="anthracite"] .visual-facade { background-color: rgba(40,44,45,.8); }
.extension-scene[data-facade-variant*="green"] .visual-facade { background-color: rgba(63,87,63,.8); }
.extension-scene[data-facade-variant*="cedar"] .visual-facade { background-color: rgba(151,84,39,.82); }
.extension-scene[data-facade-variant*="frake"] .visual-facade { background-color: rgba(104,78,54,.82); }
.visual-rollaag { display: none; position: absolute; left: 23%; top: 35%; width: 54%; height: 4.4%; border-bottom: 1px solid rgba(255,255,255,.6); background: repeating-linear-gradient(90deg,rgba(132,62,42,.9) 0 8px,rgba(230,202,185,.9) 8px 9px); }
.has-rollaag .visual-rollaag { display: block; }
.facade-stucco .visual-rollaag { background: repeating-linear-gradient(90deg,#ded9ca 0 8px,#fff 8px 9px); }
.facade-wood .visual-rollaag { background: repeating-linear-gradient(90deg,#6c482d 0 9px,#2f2118 9px 11px); }
.visual-roof { position: absolute; left: 15.7%; top: 21.6%; width: 68.5%; height: 2.6%; background: #9ba1a3; transition: background .2s; }
.rooftrim-black .visual-roof { background: #20282c; }.rooftrim-zinc .visual-roof { background: linear-gradient(#d4d9d8,#7c898b); }
.visual-green-roof { display: none; position: absolute; left: 17%; top: 19.5%; width: 66%; height: 3.6%; background: repeating-linear-gradient(90deg,#456b32 0 7px,#789551 7px 12px); border-radius: 45% 45% 0 0; box-shadow: 0 -2px 5px rgba(35,74,24,.35); }
.green-roof .visual-green-roof { display: block; }
.visual-overhang { display: none; position: absolute; left: 13.5%; top: 22.8%; width: 73%; height: 5%; background: #f2f2ed; box-shadow: 0 5px 6px rgba(0,0,0,.3); }
.has-overhang .visual-overhang { display: block; }.overhang-anthracite .visual-overhang { background: #30383c; }.overhang-wood .visual-overhang { background: repeating-linear-gradient(90deg,#eee 0 14px,#c8c3b8 14px 16px); }
.visual-frame { position: absolute; left: 23%; top: 37.5%; width: 54%; height: 36%; border: 5px solid #252d31; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.frame-white .visual-frame { border-color: #e9e8e2; }
.visual-frame i { position: absolute; top: 0; bottom: 0; width: 4px; background: #252d31; transition: left .2s, opacity .2s; }.frame-white .visual-frame i { background: #e9e8e2; }
.visual-frame i:nth-child(1){left:25%}.visual-frame i:nth-child(2){left:50%}.visual-frame i:nth-child(3){left:75%}.visual-frame i:nth-child(4),.visual-frame i:nth-child(5){display:none}
.doors-french .visual-frame i:nth-child(1){left:50%}.doors-french .visual-frame i:nth-child(2),.doors-french .visual-frame i:nth-child(3){display:none}
.doors-sliding .visual-frame i:nth-child(1){left:50%}.doors-sliding .visual-frame i:nth-child(2),.doors-sliding .visual-frame i:nth-child(3){display:none}
.doors-folding .visual-frame i:nth-child(1){left:20%}.doors-folding .visual-frame i:nth-child(2){left:40%}.doors-folding .visual-frame i:nth-child(3){left:60%}.doors-folding .visual-frame i:nth-child(4){display:block;left:80%}
.visual-outside-spots { position:absolute; left:22%; right:22%; top:25%; display:flex; justify-content:space-around; }.visual-outside-spots i,.visual-inside-spots i { width:8px;height:8px;border-radius:50%;background:#fff8c9;box-shadow:0 0 9px 3px rgba(255,231,133,.75); }
.visual-wall-light { display:none; position:absolute; top:48%; width:7px; height:18px; border-radius:3px; background:#151a1c; box-shadow:0 0 10px 4px rgba(255,226,140,.45); }.visual-wall-light.light-left{left:18.7%}.visual-wall-light.light-right{right:18.7%}.outside-light-left .light-left,.outside-light-right .light-right,.outside-light-both .visual-wall-light{display:block}
.visual-socket,.visual-tap { display:none; position:absolute; bottom:28%; width:8px; height:8px; border-radius:2px; background:#222; border:1px solid #aaa; }.socket-left,.tap-left{left:19%}.socket-right,.tap-right{right:19%}.visual-tap{bottom:33%;width:11px;height:5px;background:#a9b1b2}.socket-left-on .socket-left,.socket-right-on .socket-right,.tap-left-on .tap-left,.tap-right-on .tap-right{display:block}
.visual-downpipe { display:none; position:absolute; top:23%; width:6px; height:51%; border-radius:3px; background:#d5d8d6; box-shadow:1px 0 2px rgba(0,0,0,.4); }.downpipe-visual-left{left:15.7%}.downpipe-visual-right{right:15.7%}.downpipe-left .downpipe-visual-left,.downpipe-right .downpipe-visual-right,.downpipe-both .visual-downpipe{display:block}.downpipe-black .visual-downpipe{background:#222b2f}.downpipe-zinc .visual-downpipe{background:linear-gradient(90deg,#778486,#e4e8e6,#7a8587)}
.visual-inside-spots { position:absolute; left:24%; right:20%; top:18%; display:flex; justify-content:space-around; }
.visual-skylight { position:absolute; left:28%; top:3.5%; width:48%; height:18%; border:5px solid rgba(245,245,240,.92); background:rgba(185,218,230,.12); box-shadow:inset 0 0 14px rgba(50,80,92,.35); transform:perspective(300px) rotateX(-8deg); }
.skylight-none .visual-skylight { left:26%; top:2%; width:53%; height:22%; border:0; background:#eeeae3; box-shadow:none; transform:none; }
.skylight-single .visual-skylight { left:37%; width:28%; }
.skylight-large .visual-skylight::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; background:rgba(70,85,88,.65); box-shadow:-16px 0 0 rgba(255,255,255,.25),16px 0 0 rgba(255,255,255,.25); }
.extension-scene[data-wall-finish="plates"] .visual-interior-layers::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(171,174,171,.22) 0 17%,transparent 28% 77%,rgba(171,174,171,.22) 90%); }
.extension-scene[data-wall-finish="paint"] .config-photo-interior { filter:brightness(1.06) saturate(.92); }
.visual-radiator { display:none; position:absolute; bottom:22%; width:4%; height:24%; background:repeating-linear-gradient(90deg,#eee 0 3px,#aeb3b3 3px 4px); box-shadow:0 2px 5px rgba(0,0,0,.25); }.radiator-left{left:12%}.radiator-right{right:10%}.heat-left .radiator-left,.heat-right .radiator-right,.heat-both .visual-radiator{display:block}
.visual-wallpoint { display:none; position:absolute; top:46%; width:9px; height:15px; border-radius:50% 50% 20% 20%; background:#202427; box-shadow:0 0 12px 5px rgba(255,231,162,.6); }.wallpoint-left{left:8%}.wallpoint-right{right:5%}.wallpoints-on .visual-wallpoint{display:block}
.visual-floor-heating { display:none; position:absolute; left:15%; right:15%; bottom:5%; height:20%; opacity:.7; }.visual-floor-heating i{position:absolute;left:0;right:0;height:22%;border:3px solid #d54a35;border-radius:50%;}.visual-floor-heating i:nth-child(2){top:34%}.visual-floor-heating i:nth-child(3){top:68%}.floor-heating-on .visual-floor-heating{display:block}
.visual-interior-label { position:absolute; left:12px; bottom:12px; padding:5px 9px; border-radius:12px; background:rgba(15,55,97,.84); color:#fff; font-size:10px; font-weight:800; }
.extension-scene.green-roof:not(.is-interior)::after { content: "Sedumdak"; position: absolute; z-index: 10; right: 14px; top: 14px; padding: 6px 10px; border-radius: 15px; background: #52723b; color: #fff; font-size: 11px; font-weight: 800; }
.extension-scene .scene-sky,.extension-scene .scene-house,.extension-scene .scene-extension,.extension-scene .scene-floor { opacity: 0; }
.extension-scene .measure { z-index: 9; }
.scene-sky { position: absolute; inset: 0; background: radial-gradient(circle at 16% 18%, rgba(255,255,255,.85) 0 6%, transparent 14%), linear-gradient(165deg, transparent 0 66%, rgba(255,255,255,.3) 66%); }
.scene-house { position: absolute; left: 7%; top: 10%; width: 86%; height: 58%; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.26) 12px 13px), repeating-linear-gradient(90deg, #a75f48 0 25px, #bb765f 25px 49px, #dbc1b7 49px 50px); box-shadow: inset 0 0 40px rgba(60,25,15,.18); }
.scene-house i { position: absolute; top: 18%; width: 12%; height: 27%; background: #b8d1de; border: 7px solid #eee; box-shadow: inset 0 0 0 2px #7e929b; }
.scene-house i:nth-child(1) { left: 10%; }.scene-house i:nth-child(2) { left: 44%; }.scene-house i:nth-child(3) { right: 10%; }
.scene-extension { position: absolute; left: 15%; bottom: 21%; width: 67%; height: 46%; filter: drop-shadow(13px 18px 12px rgba(19,30,33,.2)); transform-origin: bottom center; transition: width .25s, left .25s, height .25s; }
.scene-front { position: absolute; inset: 12% 0 0; display: flex; gap: 4px; padding: 5% 7% 6%; border: 9px solid #9b604f; background: #9b604f; }
.facade-stucco .scene-front { border-color: #ece9e1; background: #ece9e1; }
.facade-wood .scene-front { border-color: #795234; background: repeating-linear-gradient(90deg,#9a704d 0 11px,#69452d 11px 13px); }
.scene-glass { flex: 1; position: relative; border: 5px solid #222a30; background: linear-gradient(140deg, rgba(231,244,249,.93), rgba(86,115,126,.72)); box-shadow: inset 0 0 28px rgba(255,255,255,.32); }
.scene-glass::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 10%; height: 26%; background: rgba(225,213,190,.65); }
.doors-sliding .glass-2 { display: none; }.doors-sliding .scene-glass { border-width: 4px; }
.doors-folding .scene-front { gap: 2px; padding-left: 3%; padding-right: 3%; }.doors-folding .scene-glass { transform: skewY(-1deg); }
.scene-side { position: absolute; left: 100%; top: 19%; width: 13%; height: 81%; background: #754537; transform: skewY(-28deg); transform-origin: left top; }
.facade-stucco .scene-side { background: #d6d2c8; }.facade-wood .scene-side { background: #604029; }
.scene-roof { position: absolute; z-index: 2; left: -2%; top: 6%; width: 105%; height: 12%; background: #20282c; transform: skewX(-21deg); box-shadow: 0 8px 5px rgba(0,0,0,.22); }
.scene-roof i { display: none; position: absolute; left: 29%; top: 15%; width: 40%; height: 70%; border: 2px solid #c5d8de; background: linear-gradient(130deg,#d9edf4,#668894); }
.skylight-single .scene-roof i { display: block; width: 22%; left: 40%; }.skylight-large .scene-roof i { display: block; }
.green-roof .scene-roof { background: repeating-linear-gradient(90deg,#5c7e42 0 8px,#7b994c 8px 14px); }
.scene-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 29%; transform: skewY(-4deg); transform-origin: left top; background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.23) 70px 72px), #a59d92; }
.scene-floor span { position: absolute; width: 20px; height: 40px; border-radius: 45% 45% 4px 4px; background: #58713f; box-shadow: 0 20px 0 -6px #795934; }
.scene-floor span:nth-child(1) { left: 7%; top: 35%; }.scene-floor span:nth-child(2) { right: 7%; top: 22%; }.scene-floor span:nth-child(3) { left: 2%; top: 66%; }.scene-floor span:nth-child(4) { right: 17%; top: 67%; }
.extension-scene.is-interior .scene-house { opacity: .15; }.extension-scene.is-interior .scene-front { border-width: 18px; background: #eee8dc; }.extension-scene.is-interior .scene-glass::after { height: 38%; background: linear-gradient(#dfd2bd 0 55%, #3b4850 55%); }.extension-scene.is-interior .scene-floor { background: repeating-linear-gradient(90deg,#a2764e 0 42px,#725033 42px 44px); }
.measure { position: absolute; z-index: 4; color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.measure::before, .measure::after { content: ""; position: absolute; background: var(--blue); }
.measure-width { left: 24%; right: 20%; bottom: 14%; border-top: 2px solid var(--blue); text-align: center; }.measure-width::before,.measure-width::after { top: -5px; width: 2px; height: 9px; }.measure-width::before { left: 0; }.measure-width::after { right: 0; }.measure-width span { position: relative; top: -24px; padding: 2px 6px; background: rgba(255,255,255,.85); border-radius: 4px; }
.measure-depth { display: none; }
.selection-summary { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.selection-summary span { padding: 5px 9px; border-radius: 15px; background: #edf3f8; color: #516273; font-size: 12px; }
.config-render-overview { padding: 18px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.config-render-overview-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.config-render-overview-head h3 { margin: 0; color: var(--blue-dark); font-size: 15px; }
.config-render-overview-head span { color: var(--muted); font-size: 11px; }
.config-render-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.config-render-gallery figure { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.config-render-gallery img { display: block; width: 100%; height: 145px; object-fit: cover; transition: opacity .18s ease; }
.config-render-gallery figcaption { display: grid; gap: 3px; padding: 10px; }
.config-render-gallery small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.config-render-gallery strong { overflow: hidden; color: var(--blue-dark); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; }
.config-choice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; }
.config-choice-toolbar > span { display: grid; gap: 1px; }
.config-choice-toolbar strong { color: var(--blue-dark); font-size: 13px; }
.config-choice-toolbar small { color: var(--muted); font-size: 10px; }
.config-choice-controls { display: flex; gap: 6px; }
.config-choice-controls button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cbd9e5; border-radius: 8px; background: var(--white); color: var(--blue-dark); cursor: pointer; font-size: 17px; font-weight: 900; }
.config-choice-controls button:hover { border-color: var(--blue); color: var(--blue); }
.config-choice-controls button:disabled { opacity: .35; cursor: default; }
.config-choice-chips { display: flex; gap: 8px; margin-top: 8px; padding: 2px 0 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-color: var(--blue) #dfe8f0; scrollbar-width: auto; scroll-snap-type: x mandatory; }
.config-choice-chips::-webkit-scrollbar { height: 9px; }
.config-choice-chips::-webkit-scrollbar-track { border-radius: 10px; background: #dfe8f0; }
.config-choice-chips::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--blue); }
.config-choice-chips > span { flex: 0 0 auto; display: grid; min-width: 142px; max-width: 220px; gap: 2px; padding: 10px 12px; border: 1px solid #dce6ef; border-radius: 8px; background: var(--white); scroll-snap-align: start; }
.config-choice-chips small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.config-choice-chips strong { overflow: hidden; color: var(--blue-dark); font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.price-panel { padding: 19px 22px 22px; }
.price-panel > p:first-child { display: flex; justify-content: space-between; margin: 0 0 4px; color: var(--blue-dark); font-weight: 800; }.price-panel > p:first-child span { color: var(--muted); font-size: 12px; font-weight: 400; }
.price-range { display: flex; align-items: center; gap: 10px; color: var(--blue-dark); }.price-range strong { font-size: clamp(24px,3vw,34px); }.price-range i { color: var(--gold); font-style: normal; }
.price-panel .config-price-index { display: block; margin: 5px 0 11px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .015em; }
.size-step-note { margin: -4px 0 14px; color: var(--muted); font-size: 11px; font-weight: 700; }
.site-price-index-note { margin: -4px 0 22px; padding: 11px 14px; border: 1px solid #d8e3ec; border-radius: 8px; color: var(--blue-dark); background: #f5f8fb; font-size: 12px; font-weight: 700; }
.price-details-toggle { padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--blue); cursor: pointer; font-weight: 700; }
.price-details { margin-top: 12px; padding: 11px 13px; border-radius: 7px; background: #f5f7fa; font-size: 12px; }.price-details div { display: flex; justify-content: space-between; gap: 12px; }.price-details div + div { margin-top: 4px; }.price-details div:last-child { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 800; }
.price-disclaimer { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.config-pdf-promise { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; margin: 16px 0 11px; padding: 12px; border: 1px solid #d7e2ec; border-radius: 9px; background: #f7fafc; }
.config-pdf-promise > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--blue-dark); background: #efe0a9; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.config-pdf-promise p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.config-pdf-promise strong { display: block; margin-bottom: 1px; color: var(--blue-dark); font-size: 12px; }
.config-quote-button { width: 100%; }
.config-explanation { padding: 58px 0; background: var(--white); }.config-explanation .container { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }.config-explanation h2 { margin: 3px 0 10px; color: var(--blue-dark); }.config-explanation ol { list-style: none; padding: 0; margin: 0; counter-reset: steps; }.config-explanation li { counter-increment: steps; display: grid; grid-template-columns: 42px 1fr; margin: 14px 0; }.config-explanation li::before { content: counter(steps); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blue-dark); color: #fff; font-weight: 800; }.config-explanation li span { color: var(--muted); }
.config-local-seo { padding: 68px 0; background: #f5f8fb; }
.config-local-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 50px; align-items: start; }
.config-local-grid h2,
.config-faq h2 { margin: 4px 0 14px; color: var(--blue-dark); font-size: clamp(28px, 3.5vw, 40px); }
.config-local-grid article p { max-width: 720px; }
.config-local-card { padding: 27px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 16px 40px rgba(8,40,70,.09); }
.config-local-card h2 { font-size: 23px; }
.config-local-card ol { display: grid; gap: 10px; margin: 17px 0 23px; padding-left: 22px; color: var(--muted); }
.config-faq { padding: 64px 0; }
.config-faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.config-faq-grid .faq-item { height: 100%; padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.config-faq-grid .faq-item h3 { margin-top: 0; color: var(--blue-dark); }
.config-request-dialog { width: min(650px, calc(100% - 28px)); max-height: calc(100vh - 30px); padding: 28px; border: 0; border-radius: 13px; box-shadow: 0 28px 90px rgba(0,0,0,.28); }.config-request-dialog::backdrop { background: rgba(6,25,42,.72); backdrop-filter: blur(3px); }.config-request-dialog h2 { margin: 3px 0 5px; color: var(--blue-dark); }.config-request-dialog > p:not(.eyebrow) { margin-top: 0; color: var(--muted); }.dialog-close { position: absolute; right: 14px; top: 11px; border: 0; background: none; color: var(--blue-dark); font-size: 29px; cursor: pointer; }.config-request-dialog form { display: grid; gap: 12px; }.config-request-dialog label { display: grid; gap: 4px; color: var(--blue-dark); font-size: 13px; font-weight: 700; }.config-request-dialog input,.config-request-dialog textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }.config-request-dialog input[aria-invalid="true"],.config-request-dialog textarea[aria-invalid="true"] { border-color: #b8473e; box-shadow: 0 0 0 3px rgba(184,71,62,.12); }.config-request-dialog textarea { min-height: 80px; resize: vertical; }.config-request-dialog .form-privacy { margin: 0; color: var(--muted) !important; font-size: 11px; }.config-request-dialog .form-privacy a { color: var(--blue); }
.optional-label { justify-self: end; margin-top: -18px; color: var(--muted); font-size: 10px; font-weight: 600; }
.config-contact-help { margin: -5px 0 0; color: var(--muted); font-size: 11px; }
.config-contact-help.is-error { color: #9a3e36; font-weight: 800; }
.config-form-alternative { margin: -3px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.config-form-alternative a { color: var(--blue-dark); font-weight: 800; }
.config-dialog-brand { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: -4px 38px 20px 0; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.config-dialog-brand img { width: 205px; height: auto; }
.config-dialog-brand span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-align: right; text-transform: uppercase; }
.config-pdf-submit { display: grid; justify-items: center; gap: 1px; width: 100%; }
.config-pdf-submit small { font-size: 10px; font-weight: 600; opacity: .78; }
.config-pdf-submit[disabled] { cursor: wait; opacity: .68; }
.config-form-status { padding: 11px 13px; border-radius: 7px; color: #194f3e; background: #e8f5ef; font-size: 13px; line-height: 1.45; }
.config-form-status.is-error { color: #7a342d; background: #fff0ed; }
.config-form-status strong { display: block; margin-bottom: 2px; }
.config-request-dialog .hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.config-mobile-action { display: none; }

@media (max-width: 980px) {
  .configurator-grid { grid-template-columns: 1fr; }
  .config-local-grid { grid-template-columns: 1fr; gap: 25px; }
  .config-faq-grid { grid-template-columns: 1fr; }
  .configurator-preview { position: static; grid-row: 1; }
  .extension-scene { height: min(52vw, 420px); min-height: 300px; }
}
@media (min-width: 981px) { .configurator-preview { position: sticky; top: 96px; } }
@media (max-width: 620px) {
  .configurator-page { padding-bottom: 91px; }
  .configurator-intro { padding: 38px 0 27px; text-align: left; }
  .configurator-intro p:last-child { font-size: 16px; }
  .configurator-shell { padding: 18px 0 42px; }
  .configurator-grid { width: min(100% - 18px, 1120px); gap: 12px; }
  .configurator-controls { padding: 18px 15px; }
  .configurator-preview { border-radius: 10px; }
  .config-sticky-summary { display: none; }
  .extension-scene { height: 270px; min-height: 0; }
  .scene-extension { left: 10%; width: 73%; }
  .choice-grid-three { grid-template-columns: 1fr 1fr 1fr; }
  .choice-card { padding: 6px 4px; }.choice-card small { display: none; }.choice-swatch { height: 30px; }
  .choice-list label { grid-template-columns: auto 1fr; }.choice-list b { grid-column: 2; }
  .config-select-grid { grid-template-columns: 1fr; }
  .config-nav .btn { padding: 10px 12px; font-size: 13px; }
  .price-panel { padding: 16px; }.price-range strong { font-size: 23px; }
  .config-render-overview { padding: 14px; }
  .config-render-overview-head { display: grid; gap: 2px; }
  .config-render-gallery { grid-template-columns: 1fr 1fr; }
  .config-render-gallery img { height: 110px; }
  .config-choice-toolbar { align-items: flex-end; }
  .config-choice-toolbar small { max-width: 175px; }
  .config-choice-chips > span { min-width: 134px; }
  .config-explanation .container { grid-template-columns: 1fr; gap: 20px; }
  .config-local-seo, .config-faq { padding: 44px 0; }
  .config-local-card { padding: 20px; }
  .config-request-dialog { padding: 23px 17px; }.config-request-dialog .form-row { grid-template-columns: 1fr; }
  .config-dialog-brand { align-items: flex-start; }.config-dialog-brand img { width: 160px; }.config-dialog-brand span { max-width: 120px; font-size: 8px; }
  .config-mobile-action { position: fixed; z-index: 60; left: 8px; right: 8px; bottom: 8px; grid-template-columns: minmax(0,.9fr) minmax(145px,1.1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; color: #fff; background: #0b3158; box-shadow: 0 14px 35px rgba(0,0,0,.32); }
  .configurator-page.configurator-started .config-mobile-action { display: grid; }
  .config-mobile-action > div { display: grid; min-width: 0; gap: 1px; padding-left: 3px; }
  .config-mobile-action small { overflow: hidden; color: #ead78f; font-size: 8px; font-weight: 900; letter-spacing: .025em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .config-mobile-action strong { display: flex; min-width: 0; align-items: center; gap: 4px; color: #fff; font-size: clamp(12px,3.55vw,16px); line-height: 1.2; white-space: nowrap; }
  .config-mobile-action strong i { color: #ead78f; font-style: normal; }
  .config-mobile-action .btn { min-height: 48px; padding: 9px 8px; font-size: 11px; line-height: 1.2; }
}

/* Dedicated Google Ads landing page */
.ads-landing-page { background: #fff; }
.ads-landing-page main::before,
.ads-landing-page main::after { display: none; }
.ads-header { position: relative; z-index: 10; border-bottom: 1px solid #dde6ee; background: #fff; }
.ads-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ads-header .brand img { width: min(235px, 42vw); }
.ads-header-contact { display: grid; justify-items: end; gap: 1px; color: var(--muted); font-size: 12px; }
.ads-header-contact a { color: var(--blue-dark); font-size: 16px; font-weight: 800; text-decoration: none; }
.ads-header-contact a:hover { color: var(--blue); }

.ads-hero { padding: 66px 0 62px; overflow: hidden; background: linear-gradient(135deg, #f3f7fa 0%, #fff 61%); }
.ads-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr); gap: 54px; align-items: center; }
.ads-hero-copy h1 { max-width: 620px; margin: 8px 0 19px; color: var(--blue-dark); font-size: clamp(39px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em; }
.ads-hero-lead { max-width: 650px; margin: 0 0 25px; color: #4c5e70; font-size: 18px; line-height: 1.65; }
.ads-rating { display: inline-flex; align-items: center; gap: 11px; margin: -5px 0 23px; color: var(--blue-dark); text-decoration: none; }
.ads-rating-stars { color: #fbbc04; font-size: 17px; letter-spacing: 1px; line-height: 1; }
.ads-rating > span:last-child { display: grid; gap: 1px; }
.ads-rating strong { font-size: 14px; line-height: 1.1; }
.ads-rating small { color: var(--muted); font-size: 10px; font-weight: 700; }
.ads-rating:hover strong { color: var(--blue); }
.ads-hero-actions { display: grid; justify-items: start; gap: 12px; }
.ads-primary-cta { padding-inline: 25px; font-size: 16px; box-shadow: 0 13px 25px rgba(15,55,97,.2); }
.ads-direct-contact { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 13px; }
.ads-direct-contact a { color: var(--blue-dark); font-weight: 800; text-underline-offset: 3px; }
.ads-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin: 27px 0 0; padding: 0; list-style: none; color: #42566a; font-size: 13px; font-weight: 700; }
.ads-checks li { position: relative; padding-left: 24px; }
.ads-checks li::before { content: "✓"; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--blue-dark); background: #ead78f; font-size: 11px; font-weight: 900; }
.ads-hero-visual { position: relative; margin: 0; overflow: hidden; border: 8px solid #fff; border-radius: 18px; background: #fff; box-shadow: 0 25px 70px rgba(8,40,70,.2); }
.ads-hero-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ads-hero-visual figcaption { position: absolute; left: 17px; bottom: 17px; display: grid; gap: 2px; max-width: calc(100% - 34px); padding: 11px 14px; border-radius: 8px; color: #fff; background: rgba(10,42,72,.9); box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.ads-hero-visual figcaption span { color: #e8d182; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ads-hero-visual figcaption strong { font-size: 13px; }

.ads-trust { position: relative; z-index: 2; border-top: 1px solid #dce5ec; border-bottom: 1px solid #dce5ec; background: var(--blue-dark); }
.ads-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ads-trust-grid > div { display: grid; gap: 1px; min-height: 105px; align-content: center; padding: 20px 30px; color: #fff; }
.ads-trust-grid > div + div { border-left: 1px solid rgba(255,255,255,.14); }
.ads-trust-grid strong { color: #ead78f; font-size: 18px; }
.ads-trust-grid span { font-size: 11px; line-height: 1.4; opacity: .82; }

.ads-section { padding: 82px 0; }
.ads-section-head { max-width: 760px; margin: 0 auto 37px; text-align: center; }
.ads-section-head h2,
.ads-proof-copy h2,
.ads-showcase-copy h2,
.ads-local h2,
.ads-final-cta h2 { margin: 6px 0 13px; color: var(--blue-dark); font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
.ads-section-head > p:last-child { color: var(--muted); font-size: 17px; }
.ads-proof { background: #f3f7fa; }
.ads-proof-grid { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); gap: 58px; align-items: center; }
.ads-emiel-card { position: relative; margin: 0; overflow: hidden; border: 7px solid #fff; border-radius: 16px; background: #fff; box-shadow: 0 22px 55px rgba(8,40,70,.16); }
.ads-emiel-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ads-emiel-card figcaption { position: absolute; right: 15px; bottom: 15px; left: 15px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 9px; color: #fff; background: rgba(10,42,72,.92); }
.ads-emiel-card figcaption strong { color: #ead78f; font-size: 15px; }
.ads-emiel-card figcaption span { font-size: 11px; line-height: 1.4; }
.ads-proof-copy > p:not(.eyebrow) { max-width: 680px; color: var(--muted); font-size: 16px; }
.ads-project-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.ads-project-facts > div { padding: 14px; border: 1px solid #d8e4ed; border-radius: 9px; background: #fff; }
.ads-project-facts dt { margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ads-project-facts dd { margin: 0; color: var(--blue-dark); font-size: 12px; font-weight: 800; line-height: 1.4; }
.ads-customer-quote { margin: 0 0 14px; padding: 17px 19px; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; background: #fff; box-shadow: 0 10px 26px rgba(8,40,70,.07); }
.ads-customer-quote p { margin: 0; color: var(--blue-dark); font-size: 15px; font-weight: 700; line-height: 1.55; }
.ads-customer-quote footer { margin-top: 8px; color: var(--muted); font-size: 10px; font-weight: 800; }
.ads-review-link { font-size: 12px; }
.ads-how { background: #fff; }
.ads-step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ads-step-grid li { min-height: 215px; padding: 24px; border: 1px solid #dce5ed; border-radius: 12px; background: #fbfcfd; }
.ads-step-grid li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--blue-dark); font-weight: 900; }
.ads-step-grid h3 { margin: 20px 0 7px; color: var(--blue-dark); font-size: 17px; }
.ads-step-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.ads-centered-cta { display: grid; justify-items: center; gap: 8px; margin-top: 34px; }
.ads-centered-cta span { color: var(--muted); font-size: 11px; }

.ads-showcase { background: #f3f7fa; }
.ads-showcase-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 56px; align-items: center; }
.ads-showcase-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.ads-feature-list { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.ads-feature-list li { position: relative; padding: 10px 12px 10px 40px; border: 1px solid #dce5ed; border-radius: 8px; color: var(--blue-dark); background: #fff; font-size: 13px; font-weight: 800; }
.ads-feature-list li::before { content: "✓"; position: absolute; left: 14px; color: var(--gold); font-weight: 900; }
.ads-image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ads-image-pair figure { margin: 0; overflow: hidden; border: 6px solid #fff; border-radius: 13px; background: #fff; box-shadow: 0 18px 40px rgba(8,40,70,.13); }
.ads-image-pair figure:nth-child(2) { margin-top: 42px; }
.ads-image-pair img { width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.ads-image-pair figcaption { padding: 10px 12px 7px; color: var(--blue-dark); font-size: 11px; font-weight: 800; }

.ads-local { background: #fff; }
.ads-local-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 65px; align-items: center; }
.ads-local-grid > div > p:not(.eyebrow) { max-width: 670px; color: var(--muted); font-size: 16px; }
.ads-places { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ads-places span { padding: 7px 12px; border: 1px solid #d8e4ed; border-radius: 20px; color: var(--blue-dark); background: #f7fafc; font-size: 12px; font-weight: 800; }
.ads-local-card { padding: 30px; border-radius: 14px; color: #fff; background: var(--blue-dark); box-shadow: 0 20px 48px rgba(15,55,97,.18); }
.ads-local-card h3 { margin: 0 0 15px; color: #ead78f; font-size: 22px; }
.ads-local-card ol { display: grid; gap: 10px; margin: 0 0 24px; padding-left: 20px; color: rgba(255,255,255,.85); font-size: 13px; }
.ads-local-card .btn { width: 100%; }
.ads-local-whatsapp { display: block; margin-top: 14px; color: #fff; font-size: 12px; font-weight: 800; text-align: center; text-underline-offset: 3px; }

.ads-faq { background: #f7f9fb; }
.ads-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; max-width: 950px; margin: 0 auto; }
.ads-faq details { padding: 18px 20px; border: 1px solid #dbe4ec; border-radius: 10px; background: #fff; }
.ads-faq summary { color: var(--blue-dark); cursor: pointer; font-size: 14px; font-weight: 800; }
.ads-faq details p { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.ads-final-cta { padding: 78px 0; color: #fff; text-align: center; background: linear-gradient(135deg, #092a4b, #0f4678); }
.ads-final-cta .eyebrow { color: #ead78f; }
.ads-final-cta h2 { color: #fff; }
.ads-final-cta p:not(.eyebrow) { max-width: 650px; margin: 0 auto 22px; color: rgba(255,255,255,.78); }
.ads-final-cta .btn { min-width: 260px; }
.ads-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ads-final-cta small { display: block; margin-top: 12px; color: rgba(255,255,255,.65); }
.ads-footer { padding: 24px 0; color: #667587; background: #fff; font-size: 11px; }
.ads-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ads-footer nav { display: flex; gap: 17px; }
.ads-mobile-actions { display: none; }

@media (max-width: 980px) {
  .ads-hero { padding-top: 42px; }
  .ads-hero-grid,
  .ads-proof-grid,
  .ads-showcase-grid,
  .ads-local-grid { grid-template-columns: 1fr; gap: 38px; }
  .ads-hero-visual { max-width: 760px; }
  .ads-emiel-card { max-width: 760px; }
  .ads-trust-grid { grid-template-columns: 1fr 1fr; }
  .ads-trust-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .ads-trust-grid > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.14); }
  .ads-step-grid { grid-template-columns: 1fr 1fr; }
  .ads-step-grid li { min-height: 0; }
  .ads-image-pair { max-width: 760px; }
}

@media (max-width: 620px) {
  .ads-landing-page { padding-bottom: 65px; }
  .ads-header-inner { min-height: 65px; }
  .ads-header .brand img { width: 170px; height: 42px; }
  .ads-header-contact span { display: none; }
  .ads-header-contact a { font-size: 12px; }
  .ads-hero { padding: 34px 0 35px; }
  .ads-hero-grid { gap: 28px; }
  .ads-hero-copy h1 { font-size: 38px; }
  .ads-hero-lead { font-size: 16px; }
  .ads-primary-cta { width: 100%; }
  .ads-hero-actions { justify-items: stretch; text-align: center; }
  .ads-checks { grid-template-columns: 1fr; }
  .ads-hero-visual { border-width: 4px; border-radius: 12px; }
  .ads-hero-visual figcaption { left: 10px; bottom: 10px; }
  .ads-trust-grid { grid-template-columns: 1fr 1fr; }
  .ads-trust-grid > div { min-height: 96px; padding: 15px; }
  .ads-trust-grid strong { font-size: 15px; }
  .ads-section { padding: 56px 0; }
  .ads-section-head { text-align: left; }
  .ads-emiel-card { border-width: 4px; border-radius: 12px; }
  .ads-emiel-card figcaption { right: 9px; bottom: 9px; left: 9px; }
  .ads-project-facts { grid-template-columns: 1fr; }
  .ads-step-grid { grid-template-columns: 1fr; }
  .ads-step-grid li { display: grid; grid-template-columns: 38px 1fr; column-gap: 13px; padding: 18px; }
  .ads-step-grid h3 { margin: 0; }
  .ads-step-grid p { grid-column: 2; }
  .ads-image-pair { gap: 8px; }
  .ads-image-pair figure { border-width: 3px; }
  .ads-image-pair figure:nth-child(2) { margin-top: 23px; }
  .ads-faq-grid { grid-template-columns: 1fr; }
  .ads-local-card { padding: 23px 20px; }
  .ads-final-cta { padding: 57px 0; }
  .ads-footer-inner { display: grid; }
  .ads-mobile-actions { position: fixed; z-index: 50; left: 10px; right: 10px; bottom: 9px; display: grid; grid-template-columns: .8fr 1.2fr; overflow: hidden; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
  .ads-mobile-actions a { padding: 13px 10px; color: #fff; background: var(--blue); font-size: 13px; font-weight: 900; text-align: center; text-decoration: none; }
  .ads-mobile-actions a:last-child { background: #147a43; }
}

/* Homepage: compacte contactmomenten en kort aanvraagformulier */

.home-page #quote-form .form-field {
  display: grid;
}

.home-page #quote-form .form-field-help,
.home-page #quote-form .form-field-error {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.home-page #quote-form .form-field-help {
  grid-column: 1 / -1;
  color: #dbe7f5;
}

.home-page #quote-form .form-field-error {
  min-height: 16px;
  color: #ffe0d9;
}

.home-page #quote-form .form-field-error:empty {
  min-height: 0;
  margin: 0;
}

.home-page #quote-form .form-field-error--row {
  grid-column: 1 / -1;
}

.home-page #quote-form :is(input, textarea)[aria-invalid="true"] {
  border-color: #ffb6a7;
  box-shadow: 0 0 0 3px rgba(255, 182, 167, .2);
}

.home-page #quote-form .form-photo-route {
  margin: 0;
  padding: 11px 12px;
  border-radius: 6px;
  color: #e7eef8;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
}

.home-page #quote-form .form-photo-route a {
  color: var(--white);
  font-weight: 800;
  text-underline-offset: 3px;
}

.home-page #quote-form .form-submit-status {
  margin: 0;
  padding: 11px 12px;
  border-radius: 6px;
  color: #eaf8f1;
  background: rgba(21, 115, 71, .45);
  font-size: 13px;
  font-weight: 700;
}

.home-page #quote-form .form-submit-status.is-error {
  color: #fff0ed;
  background: rgba(154, 62, 54, .7);
}

.home-page .home-desktop-whatsapp {
  display: none;
}

@media (min-width: 901px) {
  .home-page .home-desktop-whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 850;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 999px;
    color: var(--white);
    background: #157347;
    box-shadow: 0 12px 30px rgba(8, 40, 70, .24);
    font-size: 13px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }

  .home-page .home-desktop-whatsapp:hover {
    transform: translateY(-2px);
    background: #11633d;
    box-shadow: 0 16px 34px rgba(8, 40, 70, .28);
  }

  .home-page .home-desktop-whatsapp span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #11633d;
    background: var(--white);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: -.02em;
  }
}

@media (max-width: 780px) {
}

@media (max-width: 520px) {
}