/* VersBeeld contact-sheet preview. Keeps the existing interactions intact. */
:root {
  --ink: #192b20;
  --muted: #586b5d;
  --green: #2d6847;
  --line: #d9e4d9;
  --paper: #f8faf7;
}
body.clean-site { background: var(--paper); }
h1, h2, h3 { text-wrap: balance; }
.preview-bar { background: #e8efe6; color: #49634f; }
.site-header { background: #f8faf7f2; border-color: #dce6db; }
.header-inner, .site-footer { max-width: 1380px; }
.header-inner { height: 76px; }
.desktop-nav { font-size: 13px; gap: 30px; }
.button { background: #255d3d; border-color: #255d3d; border-radius: 5px; font-size: 13px; }
.button:hover { background: #34744e; border-color: #34744e; }
.login-link { border-radius: 5px; }
.eyebrow,
.experience-heading .eyebrow,
.results-heading .eyebrow,
.pricing-heading .eyebrow,
.faq-heading .eyebrow,
.closing-section .eyebrow {
  margin-bottom: 15px;
  color: #376d49;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.4;
  text-transform: none;
}

/* The photographic proof is the single dominant element. */
.hero.hero-refresh {
  display: block;
  overflow: hidden;
  padding: 0;
  background: #183729;
  color: #f6f9f3;
}
.hero-refresh::before, .hero-stage::before { display: none; }
.hero-refresh-inner {
  display: block;
  width: min(1380px, calc(100% - 80px));
  min-height: 0;
  margin: auto;
  padding: 64px 0 76px;
}
.hero-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  align-items: end;
  gap: clamp(40px, 7vw, 110px);
  margin-bottom: 47px;
}
.hero-kicker {
  display: block;
  margin: 0 0 22px;
  color: #b9d5b8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.hero-refresh h1 {
  color: #f7faf5;
  font-size: clamp(58px, 6.6vw, 101px);
  font-weight: 630;
  letter-spacing: -.079em;
  line-height: .99;
}
.hero-refresh .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: end;
  max-width: 400px;
  padding-bottom: 4px;
}
.hero-refresh .intro {
  max-width: 35ch;
  margin: 0;
  color: #d0dfd0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
}
.hero-refresh .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  margin-top: 26px;
}
.hero-refresh .button {
  justify-content: space-between;
  min-width: 285px;
  min-height: 53px;
  padding: 14px 19px;
  border-color: #e7f3df;
  background: #e7f3df;
  color: #163a25;
  font-size: 13px;
}
.hero-refresh .button:hover { border-color: white; background: white; }
.hero-refresh .quiet-link { min-height: 40px; color: #e8f2e6; font-size: 13px; }
.hero-refresh .quiet-link:hover { color: #c7e0be; }
.hero-stage-heading,
.hero-stage-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #d1e1cf;
  font-size: 12px;
  letter-spacing: 0;
}
.hero-stage-heading { margin: 0 1px 14px; }
.hero-stage-heading span:first-child {
  color: #f2f8ee;
  font-size: 12px;
  font-weight: 630;
  letter-spacing: 0;
  text-transform: none;
}
.hero-stage-footer { margin: 16px 1px 0; }
.hero-stage-footer span:last-child { color: #c9d9c6; font-size: 12px; letter-spacing: 0; text-transform: none; }
.hero-stage-footer a { color: #e5f1df; text-decoration: none; }
.hero-stage-footer a:hover { color: white; text-decoration: underline; text-underline-offset: 4px; }
.hero-film { position: relative; overflow: hidden; aspect-ratio: 2 / 1; border-radius: 5px; background: #b8bbb7; }
.hero-film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-film-mark { position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #ffffffa6; border-radius: 3px; background: #173325ba; color: white; font-size: 10px; font-weight: 650; letter-spacing: .13em; }
.hero-film-mark span { width: 6px; height: 6px; border-radius: 50%; background: #d2edcb; box-shadow: 0 0 0 3px #d2edcb33; }
.hero-film-toggle { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 92px; min-height: 38px; padding: 8px 12px; border: 1px solid #ffffffbb; border-radius: 3px; background: #173325d9; color: #fff; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.hero-film-toggle:hover { background: #173325; }
.hero-film-toggle:focus-visible { outline: 3px solid #d8f1cf; outline-offset: 3px; }
.hero-film-toggle .film-play-icon { display: none; }
.hero-film-toggle[aria-pressed="true"] .film-play-icon { display: inline; }
.hero-film-toggle[aria-pressed="true"] .film-pause-icon { display: none; }
.hero-refresh .photo-comparison {
  aspect-ratio: 2 / 1;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}
.hero-refresh .photo-comparison > img { object-fit: cover; object-position: center bottom; }
.hero-refresh .photo-comparison .image-labels { top: 18px; left: 18px; right: 18px; }
.hero-refresh .image-labels span { border-radius: 4px; }
.hero-refresh .comparison-line > span { background: #eef8e8; color: #174227; }

/* Three linked stages, not three floating SaaS cards. */
.experience-section { width: min(1380px, calc(100% - 80px)); padding: 100px 0 112px; }
.experience-heading { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); margin-bottom: 41px; }
.experience-heading h2 { max-width: 12ch; font-size: clamp(42px, 4.35vw, 65px); font-weight: 580; }
.experience-heading > p:last-child { max-width: 37ch; color: #5d7061; font-size: 16px; }
.process-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #b9cdbb; }
.process-card,
.process-card:hover {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  min-height: 0;
  padding: 28px 30px 0;
  border: 0;
  border-right: 1px solid #d5e2d6;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: none;
}
.process-card:first-child { padding-left: 0; }
.process-card:last-child { padding-right: 0; border-right: 0; }
.process-card .process-copy { min-height: 242px; }
.process-number { margin: 0 0 23px; color: #2b6643; font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.process-number i { display: none; }
.process-card h3 { font-size: clamp(21px, 1.8vw, 26px); font-weight: 590; }
.process-card .process-copy > p { max-width: 37ch; margin-top: 12px; color: #586b5d; font-size: 15px; line-height: 1.65; }
.studio-switch { margin-top: 19px; }
.studio-switch button { border-radius: 4px; }
.process-card .studio-preview,
.process-card .portal-illustration {
  width: 100%;
  height: 258px;
  min-height: 0;
  margin-top: 0;
  border-radius: 5px;
}
.process-card .studio-preview { aspect-ratio: auto; }
.studio-preview-label { border-radius: 3px; }
.process-card .portal-illustration { display: flex; flex-direction: column; }
.process-card .illustration-body { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.process-card .series-images { align-items: stretch; flex: 1; }
.process-card .series-images img { height: 150px; }
.process-link { margin-top: 17px; }

/* Before/after gallery as a light proof sheet. */
.results-section { padding: 96px 40px 108px; background: #e9f0e9; color: #1c3022; }
.results-heading { align-items: end; margin-bottom: 35px; }
.results-heading h2 { max-width: 15ch; font-size: clamp(41px, 4.25vw, 64px); font-weight: 590; }
.results-subline { max-width: 55ch; margin-top: 18px; color: #526a58; font-size: 16px; line-height: 1.65; }
.car-tabs { border-color: #b6cbb9; border-radius: 5px; background: #dfe9df; }
.car-tabs button { min-width: 110px; border-radius: 3px; color: #31583d; }
.car-tabs button[aria-selected=true] { background: #255c3b; color: white; }
.car-tabs button:not([aria-selected=true]):hover { background: #cadbcb; color: #173c27; }
.results-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.results-visual .photo-comparison { border: 1px solid #c5d4c5; border-radius: 5px; }
.results-view-label { border-radius: 4px; }
.results-toolbar { margin: 20px 0 12px; color: #536f59; font-size: 13px; }
.results-toolbar span { font-size: 12px; letter-spacing: 0; text-transform: none; }
.results-section .view-thumbnails { gap: 10px; }
.results-section .view-thumbnails button,
.results-section .view-thumbnails button:hover {
  border-color: #c5d6c5;
  border-radius: 5px;
  background: #f8faf7;
  color: #2b4933;
  opacity: 1;
  transform: none;
}
.results-section .view-thumbnails button[aria-pressed=true] { border-color: #2b6843; box-shadow: 0 0 0 1px #2b6843; }
.results-section .view-thumbnails button:hover { border-color: #2b6843; }

/* Pricing makes the estimate the visual anchor, then explains each tier. */
.pricing-section.pricing-experience { width: min(1380px, calc(100% - 80px)); padding: 104px 0 112px; }
.pricing-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 0 60px; margin-bottom: 36px; }
.pricing-heading .eyebrow { grid-column: 1 / -1; }
.pricing-heading h2 { max-width: 15ch; font-size: clamp(42px, 4.3vw, 63px); font-weight: 590; }
.pricing-heading > p:last-child { justify-self: end; max-width: 37ch; margin-bottom: 6px; color: #5b6d5e; font-size: 16px; line-height: 1.65; }
.pricing-experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.calculator-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3vw, 42px); border: 0; border-radius: 5px; background: #1c4b31; box-shadow: none; }
.calculator-head label { color: #d5ead3; font-size: 15px; }
.calculator-head output { color: white; font-size: 48px; }
.price-range { background: linear-gradient(90deg, #cce6b0 var(--progress), #598166 var(--progress)); }
.price-range::-webkit-slider-thumb { background: #d6edbb; box-shadow: 0 0 0 1px #d6edbb, 0 2px 8px #0002; }
.price-range::-moz-range-thumb { background: #d6edbb; box-shadow: 0 0 0 1px #d6edbb, 0 2px 8px #0002; }
.calculator-scale, .calculator-totals span, #calculator-help { color: #d0e3cf; }
.calculator-totals { border-color: #ffffff40; }
.calculator-totals strong, .calculator-totals > div:last-child strong { color: white; }
.calculator-breakdown { color: #d9edd2; }
.price-table-card { border-radius: 5px; box-shadow: none; }
.price-table-card .price-table tbody tr.is-current { background: #e9f3e7; }
.price-table-card .price-table caption { font-size: 14px; }
.price-table-card .price-table caption span,
.price-table-card .price-table th,
.price-table-card .price-table td:nth-child(3) { color: #445d49; font-size: 12px; }
.price-table-card .price-table td:nth-child(2) { font-variant-numeric: tabular-nums; }

.faq-section.faq-experience { width: min(1380px, calc(100% - 80px)); padding: 75px 0 106px; }
.faq-heading h2 { font-size: clamp(39px, 4vw, 56px); font-weight: 580; }
.faq-experience .faq-list summary { font-size: 16px; }
.faq-experience .faq-list p { color: #566b5a; }
.contact-banner.closing-section {
  width: min(1380px, calc(100% - 80px));
  min-height: 300px;
  margin-bottom: 100px;
  padding: clamp(34px, 5vw, 65px);
  border-radius: 5px;
  background: #dcebd6;
  color: #183721;
  box-shadow: none;
}
.closing-section .eyebrow { color: #356a47; }
.closing-section h2 { max-width: 20ch; color: #183721; font-size: clamp(34px, 4vw, 57px); }
.closing-section p:not(.eyebrow) { max-width: 55ch; color: #466249; font-size: 16px; }
.closing-section .button { border-color: #255d3d; background: #255d3d; color: white; }
.closing-section .button:hover { border-color: #34744e; background: #34744e; }

/* The two supporting routes share the same visual language. */
.results-intro.container,
.results-gallery.container,
.contact-page { width: min(1380px, calc(100% - 80px)); max-width: none; }
.results-intro { padding: 76px 0 32px; }
.results-intro h1 { font-size: clamp(42px, 5vw, 68px); font-weight: 610; }
.results-gallery { padding: 42px 0 80px; }
.results-gallery .gallery-heading h2 { font-size: 32px; }
.results-gallery .vehicle-viewer, .results-gallery .view-thumbnails { max-width: 1120px; }
.results-gallery .photo-comparison { aspect-ratio: 2 / 1 !important; border-radius: 5px; }
.results-gallery .photo-comparison > img { object-fit: cover; object-position: center 75%; }
.contact-page { padding: 83px 0 98px; }
.breadcrumbs, .breadcrumbs a, .breadcrumbs [aria-current="page"] { color: #506554; font-size: 12px; }
.contact-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(45px, 7vw, 120px); }
.contact-intro h1 { font-size: clamp(45px, 4.9vw, 72px); font-weight: 590; }
.contact-intro > p:not(.section-kicker) { max-width: 50ch; color: #566b59; font-size: 16px; line-height: 1.7; }
.contact-note p { color: #607362; font-size: 13px; }
.contact-photo { max-width: 520px; margin: 30px 0 0; }
.contact-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.contact-photo figcaption { margin-top: 8px; color: #607362; font-size: 11px; }
.form-panel { border-radius: 5px; padding: clamp(26px, 3vw, 42px); }
.form-panel h2 { font-size: 29px; }
.test-notice { color: #486147; font-size: 12px; }
.field label { font-size: 13px; }
.field input, .field select, .field textarea { border-radius: 4px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: #2d6847; }
.primary-button { border-radius: 4px; font-size: 13px; }
.primary-button:hover { background: #34744e; }
.site-footer { padding-top: 56px; }
.footer-top p, .footer-top nav, .footer-contact { color: #536757; font-size: 13px; }
.footer-bottom, .footer-bottom span { color: #506554; font-size: 11px; }

@media (max-width: 1050px) {
  .hero-lead { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  .hero-refresh h1 { font-size: clamp(54px, 6.4vw, 72px); }
  .process-card, .process-card:hover { padding-right: 20px; padding-left: 20px; }
  .process-card:first-child { padding-left: 0; }
  .process-card:last-child { padding-right: 0; }
}
@media (max-width: 800px) {
  .hero-refresh-inner { width: calc(100% - 40px); padding: 57px 0 62px; }
  .hero-lead { grid-template-columns: 1fr; gap: 25px; margin-bottom: 37px; }
  .hero-refresh h1 { font-size: clamp(50px, 8.5vw, 75px); }
  .hero-refresh .hero-copy { max-width: 590px; }
  .hero-refresh .intro { max-width: 49ch; }
  .hero-refresh .hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero-refresh .photo-comparison { aspect-ratio: 3 / 2; }
  .experience-section, .pricing-section.pricing-experience, .faq-section.faq-experience,
  .contact-banner.closing-section { width: calc(100% - 40px); }
  .experience-section { padding: 74px 0 80px; }
  .experience-heading, .pricing-heading { grid-template-columns: 1fr; gap: 14px; }
  .experience-heading .eyebrow, .pricing-heading .eyebrow { margin-bottom: 0; }
  .experience-heading > p:last-child, .pricing-heading > p:last-child { justify-self: start; margin: 0; }
  .process-list { grid-template-columns: 1fr; }
  .process-card, .process-card:hover, .process-card:last-child {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    border-right: 0;
    border-bottom: 1px solid #d5e2d6;
  }
  .process-card .process-copy { min-height: 0; }
  .process-card .studio-preview, .process-card .portal-illustration { height: 220px; }
  .results-section { padding: 74px 20px 83px; }
  .results-heading { align-items: start; }
  .pricing-section.pricing-experience { padding: 80px 0; }
  .pricing-experience-grid { grid-template-columns: 1fr; }
  .faq-section.faq-experience { padding: 70px 0 80px; }
  .contact-page, .results-intro.container, .results-gallery.container { width: calc(100% - 40px); }
  .contact-page { padding: 62px 0 76px; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .header-inner { height: 68px; }
  .hero-refresh-inner { padding: 45px 0 52px; }
  .hero-kicker { margin-bottom: 16px; font-size: 12px; }
  .hero-refresh h1 { font-size: clamp(43px, 11vw, 59px); }
  .hero-refresh .intro { font-size: 16px; }
  .hero-refresh .hero-actions { align-items: stretch; gap: 7px; }
  .hero-refresh .button { min-width: 0; width: 100%; }
  .hero-refresh .quiet-link { padding: 0 2px; }
  .hero-stage-heading span:first-child { font-size: 11px; }
  .hero-stage-heading span:last-child { display: none; }
  .hero-film { aspect-ratio: 1.65; }
  .hero-film-mark { top: 12px; left: 12px; padding: 7px 8px; font-size: 9px; }
  .hero-film-toggle { right: 12px; bottom: 12px; }
  .hero-refresh .photo-comparison { aspect-ratio: 1.65; }
  .hero-refresh .photo-comparison > img { transform: scale(1.12); transform-origin: center bottom; }
  .hero-stage-footer { font-size: 11px; }
  .hero-stage-footer span:last-child { display: none; }
  .experience-heading h2, .results-heading h2, .pricing-heading h2, .faq-heading h2 { font-size: clamp(36px, 9vw, 43px); }
  .experience-heading > p:last-child, .pricing-heading > p:last-child, .results-subline { font-size: 15px; }
  .process-card, .process-card:hover, .process-card:last-child { display: flex; flex-direction: column; align-items: stretch; gap: 19px; }
  .process-card .studio-preview, .process-card .portal-illustration { height: 215px; }
  .results-heading { gap: 20px; }
  .results-section .view-thumbnails { display: grid; }
  .calculator-head output { font-size: 40px; }
  .contact-banner.closing-section { padding: 32px 25px; margin-bottom: 66px; }
  .closing-section h2 { font-size: 39px; }
  .contact-intro h1 { font-size: 46px; }
  .contact-note { display: flex; margin: 28px 0 22px; }
}