/* ==========================================================================
   Plus Jakarta Sans, self-hosted (SIL Open Font License, see assets/fonts/OFL.txt).
   One variable file per subset covers weights 400–800.
   ========================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   VeraGlas theme — design tokens
   ========================================================================== */
:root {
  --vg-accent: #348dcc;        /* brand blue: icons, large type, decoration */
  --vg-accent-deep: #246ea6;   /* action blue: buttons, links, small text (5.4:1 on white, 4.8:1 on muted) */
  --vg-accent-ink: #1d5a87;    /* hover and pressed */
  --vg-accent-light: #5ba3d9;
  --vg-accent-muted: #e8f2fa;
  --vg-ink: #313131;
  --vg-text: #3a3a3a;
  --vg-text-secondary: #4b4b4b;
  --vg-text-muted: #737373;
  --vg-border: #e4e4e7;
  --vg-field-border: #768797;  /* 3.2:1 against the form panel */
  --vg-white: #fff;
  --vg-error: #b42318;
  --vg-error-bg: #fdecea;
  --vg-success: #1f6f43;
  --vg-success-bg: #e7f5ec;

  --vg-scrim: rgba(32, 44, 54, .55);
  --vg-scrim-strong: rgba(32, 44, 54, .62);
  --vg-on-dark: rgba(255, 255, 255, .9);
  --vg-on-dark-muted: rgba(255, 255, 255, .75);
  --vg-shadow: 0 8px 24px rgba(0, 0, 0, .08);

  --vg-radius-sm: 12px;
  --vg-radius-md: 18px;
  --vg-radius-lg: 22px;
  --vg-radius-xl: 26px;

  --vg-focus: var(--vg-accent-deep);
  --vg-ease: cubic-bezier(.22, 1, .36, 1);

  --vg-max: 1440px; /* 1440px artboard, 40px gutters, 1360px of content */
  --vg-gutter: 16px;
  --vg-header-h: 64px;
}

@media (min-width: 1024px) {
  :root {
    --vg-gutter: 40px;
    --vg-radius-lg: 24px;
    --vg-radius-xl: 32px;
    --vg-header-h: 88px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--vg-header-h) + 16px); }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  color: var(--vg-text);
  background: var(--vg-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--vg-ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Long compound words (German) may break on narrow screens instead of overflowing. */
h1, h2, h3, h4, summary { overflow-wrap: break-word; }
@media (max-width: 479px) {
  h1, h2, h3, h4, summary { hyphens: auto; }
}
img { max-width: 100%; display: block; }
a { color: var(--vg-accent-deep); text-decoration: none; }
a:hover { color: var(--vg-accent-ink); }

::selection { background: rgba(52, 141, 204, .25); color: inherit; }
input, textarea, select { caret-color: var(--vg-accent-deep); }

:focus-visible { outline: 3px solid var(--vg-focus); outline-offset: 3px; }
main:focus { outline: none; }

/* Surfaces whose focusable children sit on a dark or blue background. */
.vg-topbar,
.vg-hero__inner,
.vg-pagehero__inner,
.vg-closing__panel,
.vg-footer__panel { --vg-focus: #fff; }

.vg-container {
  width: 100%;
  max-width: var(--vg-max);
  margin-inline: auto;
  padding-inline: var(--vg-gutter);
}

.vg-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;
}

.vg-skip {
  position: absolute; left: var(--vg-gutter); top: 8px; z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--vg-ink); color: #fff;
  font-size: 15px; font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s var(--vg-ease);
}
.vg-skip:focus { transform: none; color: #fff; }

/* Honeypot field: never visible, never focusable. */
.vg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Buttons and pills
   ========================================================================== */
.vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding-inline: 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
  white-space: nowrap;
}
.vg-btn svg { transition: transform .25s var(--vg-ease); }
.vg-btn:hover svg { transform: translateX(2px); }
.vg-btn:disabled { opacity: .6; cursor: progress; }

.vg-btn--primary { background: var(--vg-accent-deep); color: #fff; }
.vg-btn--primary:hover { background: var(--vg-accent-ink); color: #fff; }

.vg-btn--white { background: #fff; color: var(--vg-ink); }
.vg-btn--white:hover { background: var(--vg-accent-muted); color: var(--vg-ink); }

.vg-btn--outline { border: 1.5px solid var(--vg-ink); color: var(--vg-ink); background: transparent; }
.vg-btn--outline:hover { background: var(--vg-ink); color: #fff; }

.vg-btn--outline-accent { border: 1.5px solid var(--vg-accent-deep); color: var(--vg-accent-deep); background: transparent; }
.vg-btn--outline-accent:hover { background: var(--vg-accent-deep); color: #fff; }

.vg-btn--outline-light { border: 1.5px solid rgba(255,255,255,.75); color: #fff; background: transparent; }
.vg-btn--outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }

.vg-btn--hero {
  min-height: 58px;
  padding: 0 8px 0 26px;
  background: #fff;
  color: var(--vg-ink);
  font-size: 16px;
  gap: 16px;
}
.vg-btn--hero:hover { background: var(--vg-accent-muted); color: var(--vg-ink); }
@media (max-width: 399px) {
  .vg-btn { padding-inline: 20px; }
  .vg-btn--hero { justify-content: space-between; padding: 8px 8px 8px 20px; font-size: 15px; white-space: normal; text-align: left; }
}
.vg-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: var(--vg-accent-deep);
  color: #fff;
  flex-shrink: 0;
}

.vg-icon { width: 16px; height: 16px; flex-shrink: 0; }
.vg-icon--lg { width: 20px; height: 20px; }

.vg-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 14px;
  border-radius: 999px;
  background: var(--vg-accent-muted);
  color: var(--vg-accent-deep);
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   Top bar: USPs (rotating on small screens) and the language switcher
   ========================================================================== */
.vg-topbar { background: var(--vg-accent-deep); color: #fff; font-size: 13px; font-weight: 600; }
.vg-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.vg-topbar__usps { position: relative; flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; list-style: none; }
.vg-topbar__usp { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; transition: opacity .5s var(--vg-ease); }
.vg-topbar__usps:not(.is-rotating) .vg-topbar__usp:first-child,
.vg-topbar__usp.is-active { opacity: 1; }
.vg-topbar__usp span { overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 1024px) {
  .vg-topbar__usps { display: flex; align-items: center; gap: 28px; height: auto; }
  .vg-topbar__usp { position: static; opacity: 1 !important; }
  .vg-topbar__usp:nth-child(4) { display: none; }
}
@media (min-width: 1280px) {
  .vg-topbar__usp:nth-child(4) { display: flex; }
}

/* Language switcher: a dropdown. Without JavaScript the list shows as a row of flags. */
.vg-topbar { position: relative; z-index: 55; }
.vg-lang { position: relative; flex-shrink: 0; }
.vg-lang__toggle {
  display: none; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 10px 0 8px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: transparent; color: #fff;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.vg-lang__toggle:hover,
.vg-lang__toggle[aria-expanded="true"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.vg-lang__toggle .vg-icon { width: 14px; height: 14px; transition: transform .25s var(--vg-ease); }
.vg-lang__toggle[aria-expanded="true"] .vg-icon { transform: rotate(180deg); }
.vg-lang.is-ready .vg-lang__toggle { display: inline-flex; }

.vg-lang__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vg-lang__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding-inline: 8px;
  border-radius: 999px;
  color: #fff; font-size: 12px; font-weight: 700;
}
.vg-lang__link:hover { background: rgba(255,255,255,.14); color: #fff; }
.vg-lang:not(.is-ready) .vg-lang__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.vg-lang.is-ready .vg-lang__list {
  position: absolute; right: 0; top: calc(100% + 6px);
  flex-direction: column; align-items: stretch; gap: 2px;
  min-width: 180px; padding: 6px;
  background: #fff;
  border: 1px solid var(--vg-border); border-radius: var(--vg-radius-sm);
  box-shadow: 0 14px 32px rgba(20, 30, 40, .16);
}
.vg-lang.is-ready .vg-lang__list[hidden] { display: none; }
.vg-lang.is-ready .vg-lang__link {
  gap: 10px; min-height: 40px; padding-inline: 10px;
  border-radius: 8px;
  color: var(--vg-ink); font-size: 14px; font-weight: 600; letter-spacing: 0;
  --vg-focus: var(--vg-accent-deep);
}
.vg-lang.is-ready .vg-lang__link:hover { background: var(--vg-accent-muted); color: var(--vg-ink); }
.vg-lang.is-ready .vg-lang__link[aria-current] { background: var(--vg-accent-muted); color: var(--vg-accent-deep); }
.vg-lang.is-ready .vg-lang__list .vg-lang__code { display: none; }
.vg-flag { display: block; flex-shrink: 0; width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.vg-lang__list .vg-flag { box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

@media (max-width: 399px) {
  .vg-header__logo img { height: 34px; }
  .vg-header__quote { padding-inline: 16px; gap: 6px; }
  .vg-header__quote-rest { display: none; }
  .vg-lang:not(.is-ready) .vg-lang__code { display: none; }
  .vg-lang__link { padding-inline: 6px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.vg-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid rgba(228,228,231,.7);
}
.vg-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--vg-header-h); gap: 12px; }
.vg-header__logo { flex-shrink: 0; }
.vg-header__logo img { height: 40px; width: auto; }

.vg-nav { display: none; align-items: center; gap: 4px; }
.vg-nav a {
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding-inline: 16px;
  border-radius: 999px;
  color: var(--vg-ink);
  font-size: 15px; font-weight: 600;
  transition: background-color .2s;
}
.vg-nav a:hover { background: var(--vg-accent-muted); color: var(--vg-ink); }
.vg-nav .current-menu-item > a,
.vg-nav .current_page_item > a,
.vg-nav .current-menu-ancestor > a { color: var(--vg-accent-deep); background: var(--vg-accent-muted); }

.vg-nav li { position: relative; display: flex; align-items: center; list-style: none; }
.vg-nav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 4px; }
.vg-nav__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 12px 0 16px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--vg-ink);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background-color .2s;
}
.vg-nav__toggle[aria-expanded="true"],
.vg-nav .current-menu-ancestor > .vg-nav__toggle,
.vg-nav .current-menu-parent > .vg-nav__toggle { background: var(--vg-accent-muted); }
.vg-nav .current-menu-ancestor > .vg-nav__toggle,
.vg-nav .current-menu-parent > .vg-nav__toggle { color: var(--vg-accent-deep); }
.vg-nav__toggle svg { transition: transform .25s var(--vg-ease); }
.vg-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.vg-nav__toggle:hover { background: var(--vg-accent-muted); }

.vg-nav .sub-menu {
  display: none;
  position: absolute; left: -8px; top: calc(100% + 10px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  width: 560px; padding: 10px;
  background: #fff;
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-radius-md);
  box-shadow: 0 18px 40px rgba(20, 30, 40, .14);
  z-index: 60;
}
.vg-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* Hover bridge. */
.vg-nav li.is-open > .sub-menu { display: grid; }
@media (hover: hover) {
  .vg-nav li:hover > .sub-menu { display: grid; }
}
.vg-nav .sub-menu li { display: block; }
.vg-nav .sub-menu .vg-nav__link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  height: auto; padding: 12px 14px;
  border-radius: var(--vg-radius-sm);
}
.vg-nav__title { color: var(--vg-ink); font-size: 15px; font-weight: 700; }
.vg-nav__desc { color: var(--vg-text-secondary); font-size: 13px; font-weight: 500; line-height: 1.4; }
.vg-nav .sub-menu .current-menu-item > a { background: var(--vg-accent-muted); }
.vg-nav__all { grid-column: 1 / -1; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--vg-border); }
.vg-nav .vg-nav__all a { height: auto; padding: 12px 14px; border-radius: var(--vg-radius-sm); color: var(--vg-accent-deep); font-weight: 700; }

.vg-header__actions { display: flex; align-items: center; gap: 8px; }
.vg-header__phone {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--vg-accent-muted);
  color: var(--vg-accent-deep);
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
}
.vg-header__phone:hover { background: var(--vg-accent-deep); color: #fff; }
.vg-header__phone-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.vg-header__quote { min-height: 44px; padding-inline: 18px; font-size: 14px; }

.vg-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--vg-border);
  border-radius: 999px;
  background: #fff; color: var(--vg-ink);
  cursor: pointer;
}
.vg-burger:hover { border-color: var(--vg-ink); }
.vg-burger__close { display: none; }
.vg-burger[aria-expanded="true"] .vg-burger__open { display: none; }
.vg-burger[aria-expanded="true"] .vg-burger__close { display: block; }

.vg-mobile-nav {
  display: none;
  max-height: calc(100dvh - var(--vg-header-h));
  overflow-y: auto;
  border-top: 1px solid var(--vg-border);
  background: #fff;
  padding: 12px var(--vg-gutter) 24px;
}
.vg-mobile-nav.is-open { display: block; }
.vg-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.vg-mobile-nav__primary li { display: block; }
.vg-mobile-nav__primary a { display: block; padding: 12px; border-radius: var(--vg-radius-sm); color: var(--vg-ink); font-size: 17px; font-weight: 700; }
.vg-mobile-nav__primary a:hover { background: var(--vg-accent-muted); }
.vg-mobile-nav__primary .vg-nav__toggle { justify-content: space-between; width: 100%; height: auto; padding: 12px; border-radius: var(--vg-radius-sm); font-size: 17px; font-weight: 700; }
.vg-mobile-nav__primary .vg-nav__toggle .vg-icon { width: 20px; height: 20px; }
.vg-mobile-nav__primary .sub-menu { display: none; margin: 0 0 8px 12px; padding-left: 12px; border-left: 1px solid var(--vg-border); }
.vg-mobile-nav__primary li.is-open > .sub-menu { display: block; }
.vg-mobile-nav__primary .sub-menu li { display: block; }
.vg-mobile-nav__primary .sub-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.vg-mobile-nav__primary .vg-nav__title { font-size: 16px; }
.vg-mobile-nav__primary .vg-nav__all a { color: var(--vg-accent-deep); font-size: 15px; }
.vg-mobile-nav__primary .vg-nav__all svg { display: none; }
.vg-mobile-nav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.vg-mobile-nav__actions .vg-btn { width: 100%; }

@media (min-width: 640px) {
  .vg-header__quote { min-height: 48px; padding-inline: 22px; font-size: 15px; }
}
@media (min-width: 1024px) {
  .vg-header__logo img { height: 50px; }
  .vg-nav { display: flex; }
  .vg-header__phone { display: inline-flex; }
  .vg-header__quote { min-height: 52px; padding-inline: 24px; }
  .vg-burger { display: none; }
  .vg-mobile-nav { display: none !important; }
}
@media (min-width: 1280px) {
  .vg-header__phone { width: auto; padding-inline: 16px 20px; }
  .vg-header__phone-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.vg-hero { padding-top: 16px; }
.vg-hero__inner {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 540px;
  padding: 24px;
  border-radius: var(--vg-radius-xl);
  overflow: hidden;
  background: var(--vg-ink);
  color: #fff;
  isolation: isolate;
}
.vg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: 0; }
.vg-hero__scrim { position: absolute; inset: 0; background: var(--vg-scrim); z-index: 1; }
.vg-hero__inner > *:not(.vg-hero__bg):not(.vg-hero__scrim) { position: relative; z-index: 2; }
.vg-hero__content { display: flex; flex-direction: column; gap: 16px; }
.vg-hero__title { color: #fff; font-size: clamp(2.25rem, 1.1rem + 3.6vw, 3.75rem); line-height: 1.05; }
.vg-hero__intro { max-width: 38rem; color: var(--vg-on-dark); font-size: 16px; }
.vg-hero__actions { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.vg-hero__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.vg-hero__stars { display: inline-flex; gap: 2px; }
.vg-hero__stars svg { width: 16px; height: 16px; fill: #fff; }
.vg-hero__score { font-weight: 700; }
.vg-hero__count { color: var(--vg-on-dark); white-space: nowrap; }

@media (min-width: 640px) {
  .vg-hero__actions { flex-direction: row; align-items: center; }
  .vg-hero__count::before { content: "·"; margin-right: 8px; }
}
@media (min-width: 1024px) {
  .vg-hero { padding-top: 24px; }
  .vg-hero__inner { min-height: 620px; justify-content: center; padding: 64px; }
  .vg-hero__scrim { background: linear-gradient(90deg, rgba(32,44,54,.72) 0%, rgba(32,44,54,.5) 55%, rgba(32,44,54,.3) 100%); }
  .vg-hero__content { max-width: 720px; gap: 22px; }
  .vg-hero__intro { font-size: 18px; }
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.vg-trust { padding-block: 24px; }
.vg-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.vg-trust__item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--vg-ink); line-height: 1.35; }
.vg-trust__item svg { color: var(--vg-accent); flex-shrink: 0; }

@media (min-width: 1024px) {
  .vg-trust__list { display: flex; justify-content: center; gap: 0; }
  .vg-trust__item { padding-inline: 36px; font-size: 15px; }
  .vg-trust__item + .vg-trust__item { border-left: 1px solid var(--vg-border); }
}

/* ==========================================================================
   Products — full-bleed tinted panel with a scrollable rail
   ========================================================================== */
.vg-products { padding-block: 40px; }
.vg-products__panel { background: var(--vg-accent-muted); padding-block: 40px; }
.vg-products__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vg-products__title { font-size: 30px; }
.vg-products__nav { display: flex; gap: 8px; flex-shrink: 0; }
.vg-products__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--vg-ink);
  background: transparent; color: var(--vg-ink);
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.vg-products__btn:hover { background: var(--vg-ink); color: #fff; }
.vg-products__btn--next { background: var(--vg-ink); color: #fff; border-color: var(--vg-ink); }
.vg-products__btn--next:hover { background: var(--vg-accent-deep); border-color: var(--vg-accent-deep); }
.vg-products__btn:disabled { opacity: .3; cursor: default; background: transparent; color: var(--vg-ink); border-color: var(--vg-ink); }

.vg-rail {
  --vg-rail-start: max(var(--vg-gutter), calc((100% - var(--vg-max)) / 2 + var(--vg-gutter)));
  display: flex; gap: 12px;
  margin: 20px 0 0;
  /* Start at the content edge, run off the right edge of the screen. */
  padding: 6px var(--vg-gutter) 6px var(--vg-rail-start);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--vg-rail-start);
  scrollbar-width: none;
}
.vg-rail::-webkit-scrollbar { display: none; }
.vg-rail > li { flex: 0 0 auto; scroll-snap-align: start; }

.vg-tile {
  position: relative;
  display: block;
  width: 240px; height: 300px;
  border-radius: var(--vg-radius-lg);
  overflow: hidden;
  background: var(--vg-ink);
  isolation: isolate;
}
.vg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--vg-ease); }
.vg-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,44,54,.1) 30%, rgba(32,44,54,.62) 100%); z-index: 1; transition: opacity .3s; }
.vg-tile:hover img { transform: scale(1.05); }
.vg-tile__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center;
  height: 30px; padding-inline: 12px;
  border-radius: 999px;
  background: var(--vg-ink);
  color: #fff; font-size: 12px; font-weight: 700;
}
.vg-tile__title {
  position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 2;
  color: #fff; font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
}

.vg-products__progress { height: 4px; margin-top: 20px; border-radius: 999px; background: rgba(49,49,49,.1); overflow: hidden; }
.vg-products__progress span { display: block; height: 100%; width: 25%; border-radius: 999px; background: var(--vg-accent-deep); transition: width .2s; }
.vg-products__foot { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.vg-products__note { color: var(--vg-text-secondary); font-size: 15px; max-width: 40rem; }

@media (min-width: 640px) {
  .vg-products__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .vg-products { padding-block: 56px; }
  .vg-products__panel { padding-block: 56px; }
  .vg-products__title { font-size: 44px; }
  .vg-products__btn { width: 52px; height: 52px; }
  .vg-rail { gap: 20px; margin-top: 32px; }
  .vg-tile { width: 296px; height: 340px; }
  .vg-tile__title { left: 22px; right: 22px; bottom: 22px; font-size: 22px; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.vg-process { padding-block: 56px; }
.vg-process__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.vg-process__title { font-size: 30px; max-width: 42rem; }
.vg-process__intro { max-width: 42rem; margin-top: 10px; color: var(--vg-text-secondary); font-size: 15px; }
.vg-process__list { display: grid; gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.vg-process__item {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-radius-lg);
  background: #fff;
}
.vg-process__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--vg-accent-deep);
  color: #fff; font-size: 16px; font-weight: 800;
}
.vg-process__item h3 { font-size: 18px; }
.vg-process__item p { color: var(--vg-text-secondary); font-size: 15px; }

@media (min-width: 640px) { .vg-process__list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .vg-process { padding-block: 80px; }
  .vg-process__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .vg-process__title { font-size: 40px; }
  .vg-process__intro { font-size: 17px; }
  .vg-process__list { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 36px; }
}

/* ==========================================================================
   Why VeraGlas
   ========================================================================== */
.vg-why { padding-block: 40px; }
.vg-why__panel { padding: 24px; border-radius: var(--vg-radius-xl); background: var(--vg-accent-muted); }
.vg-why__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.vg-why__title { font-size: 28px; max-width: 42rem; }
.vg-why__intro { max-width: 42rem; margin-top: 10px; color: var(--vg-text-secondary); font-size: 15px; }
.vg-why__grid { display: grid; gap: 10px; margin-top: 24px; }
.vg-why__card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--vg-radius-md); background: #fff; }
.vg-why__card svg { width: 24px; height: 24px; color: var(--vg-accent); }
.vg-why__card h3 { font-size: 16px; line-height: 1.3; }
.vg-why__card p { color: var(--vg-text-secondary); font-size: 14px; }

.vg-why__advice {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 18px; border-radius: var(--vg-radius-md);
  background: var(--vg-accent-deep); color: #fff;
}
.vg-why__advice:hover { background: var(--vg-accent-ink); color: #fff; }
.vg-why__advice h3 { color: #fff; font-size: 18px; line-height: 1.2; }
.vg-why__advice p { color: var(--vg-on-dark); font-size: 14px; }
.vg-why__advice-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding-inline: 18px;
  border-radius: 999px; background: #fff; color: var(--vg-ink);
  font-size: 14px; font-weight: 700;
}
.vg-why__advice-cta svg { color: var(--vg-accent-deep); }

@media (min-width: 640px) { .vg-why__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .vg-why { padding-block: 56px; }
  .vg-why__panel { padding: 56px; }
  .vg-why__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .vg-why__title { font-size: 40px; }
  .vg-why__intro { font-size: 17px; }
  .vg-why__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 36px; }
  .vg-why__card { padding: 24px; border-radius: var(--vg-radius-lg); gap: 12px; }
  .vg-why__card svg { width: 28px; height: 28px; }
  .vg-why__card h3 { font-size: 17px; }
  .vg-why__advice { padding: 24px; border-radius: var(--vg-radius-lg); }
  .vg-why__advice h3 { font-size: 22px; }
}

/* ==========================================================================
   About
   ========================================================================== */
.vg-about { padding-block: 48px; }
.vg-about__inner { display: flex; flex-direction: column; gap: 32px; }
.vg-about__title { font-size: 28px; }
.vg-about__title span { color: var(--vg-accent); }
.vg-about__text { max-width: 36rem; margin-top: 16px; color: var(--vg-text-secondary); font-size: 16px; }
.vg-about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.vg-about__note { display: flex; align-items: flex-start; gap: 10px; max-width: 36rem; margin-top: 24px; color: var(--vg-text-secondary); font-size: 14px; }
.vg-about__note svg { margin-top: 3px; color: var(--vg-accent); }
.vg-about__note a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vg-about__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--vg-radius-xl); overflow: hidden; background: var(--vg-ink); }
.vg-about__media img { width: 100%; height: 100%; object-fit: cover; }
.vg-about__badge {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 12px 16px; border-radius: var(--vg-radius-md); background: #fff;
}
.vg-about__badge strong { color: var(--vg-accent-deep); font-size: 28px; font-weight: 800; line-height: 1; }
.vg-about__badge span { color: var(--vg-ink); font-size: 13px; font-weight: 600; line-height: 1.3; }

@media (min-width: 1024px) {
  .vg-about { padding-block: 64px; }
  .vg-about__inner { flex-direction: row; align-items: center; gap: 64px; }
  .vg-about__body { width: 55%; }
  .vg-about__media { width: 45%; }
  .vg-about__badge { left: 20px; bottom: 20px; }
  .vg-about__title { font-size: 40px; }
  .vg-about__text { font-size: 17px; }
}

/* ==========================================================================
   Inspiration
   ========================================================================== */
.vg-inspiration { padding-block: 48px; }
.vg-inspiration__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vg-inspiration__title { font-size: 30px; }
.vg-inspiration__intro { margin-top: 8px; color: var(--vg-text-secondary); font-size: 15px; }
.vg-inspiration__grid { display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.vg-inspiration__item {
  position: relative; display: block;
  height: 240px; border-radius: var(--vg-radius-lg); overflow: hidden;
  background: var(--vg-ink); isolation: isolate;
}
.vg-inspiration__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--vg-ease); }
a.vg-inspiration__item:hover img { transform: scale(1.05); }
.vg-inspiration__label {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center;
  min-height: 36px; padding-inline: 16px;
  border-radius: 999px; background: #fff;
  color: var(--vg-ink); font-size: 14px; font-weight: 700;
}

@media (min-width: 640px) {
  .vg-inspiration__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .vg-inspiration__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .vg-inspiration__grid > :first-child { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .vg-inspiration { padding-block: 64px; }
  .vg-inspiration__title { font-size: 40px; }
  .vg-inspiration__intro { font-size: 17px; }
  .vg-inspiration__grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 32px; }
  .vg-inspiration__item { height: 320px; }
  .vg-inspiration__grid > :first-child { grid-column: span 1; }
}

/* ==========================================================================
   CTA duo
   ========================================================================== */
.vg-ctaduo { padding-block: 48px; }
.vg-ctaduo__grid { display: grid; gap: 16px; }
.vg-ctaduo__card {
  position: relative; display: block;
  height: 260px; border-radius: var(--vg-radius-xl); overflow: hidden;
  background: var(--vg-ink); isolation: isolate;
}
.vg-ctaduo__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--vg-ease); }
.vg-ctaduo__card:hover img { transform: scale(1.05); }
.vg-ctaduo__card::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vg-ctaduo__card--configurator::after { background: rgba(36,110,166,.76); }
.vg-ctaduo__card--products::after { background: rgba(49,49,49,.62); }
.vg-ctaduo__text { position: absolute; left: 24px; right: 24px; top: 24px; z-index: 2; display: flex; flex-direction: column; }
.vg-ctaduo__line1 { color: #fff; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.vg-ctaduo__line2 { color: var(--vg-on-dark); font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.vg-ctaduo__cta {
  position: absolute; left: 24px; bottom: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding-inline: 20px;
  border-radius: 999px; background: #fff;
  color: var(--vg-ink); font-size: 14px; font-weight: 700;
}
.vg-ctaduo__cta svg { color: var(--vg-accent-deep); transition: transform .25s var(--vg-ease); }
.vg-ctaduo__card:hover .vg-ctaduo__cta svg { transform: translateX(2px); }

@media (min-width: 1024px) {
  .vg-ctaduo { padding-block: 64px; }
  .vg-ctaduo__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  .vg-ctaduo__card { height: 420px; }
  .vg-ctaduo__text { left: 40px; right: 40px; top: 40px; }
  .vg-ctaduo__line1, .vg-ctaduo__line2 { font-size: 34px; }
  .vg-ctaduo__cta { left: 40px; bottom: 40px; height: 50px; padding-inline: 24px; font-size: 15px; }
}

/* ==========================================================================
   Shared section head (for the newer sections)
   ========================================================================== */
.vg-section-head { max-width: 46rem; margin-bottom: 28px; }
.vg-section-head__title { font-size: 28px; }
.vg-section-head__intro { margin-top: 12px; color: var(--vg-text-secondary); font-size: 16px; }

@media (min-width: 1024px) {
  .vg-section-head { margin-bottom: 40px; }
  .vg-section-head__title { font-size: 40px; }
  .vg-section-head__intro { font-size: 17px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.vg-faq { padding-block: 48px; }
.vg-faq__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.vg-faq__title { font-size: 28px; }
.vg-faq__intro { max-width: 30rem; margin-top: 12px; color: var(--vg-text-secondary); font-size: 16px; }
.vg-faq__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.vg-faq__mail { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.vg-faq__list { border-top: 1px solid var(--vg-border); }
.vg-faq__item { border-bottom: 1px solid var(--vg-border); }
.vg-faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  color: var(--vg-ink); font-size: 17px; font-weight: 700; line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.vg-faq__item summary::-webkit-details-marker { display: none; }
.vg-faq__item summary:hover { color: var(--vg-accent-deep); }
.vg-faq__icon { width: 22px; height: 22px; margin-top: 1px; color: var(--vg-accent-deep); transition: transform .3s var(--vg-ease); }
.vg-faq__item[open] .vg-faq__icon { transform: rotate(45deg); }
.vg-faq__item p { max-width: 62ch; padding: 0 38px 22px 0; color: var(--vg-text-secondary); font-size: 16px; }

@media (min-width: 1024px) {
  .vg-faq { padding-block: 80px; }
  .vg-faq__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .vg-faq__head { position: sticky; top: calc(var(--vg-header-h) + 32px); }
  .vg-faq__title { font-size: 40px; }
  .vg-faq__intro { font-size: 17px; }
  .vg-faq__item summary { padding-block: 24px; font-size: 19px; }
}

/* ==========================================================================
   Roof comparison
   ========================================================================== */
.vg-compare { padding-block: 48px; }
.vg-compare__grid { display: grid; gap: 16px; }
.vg-compare__option {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px;
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-radius-lg);
  background: #fff;
}
.vg-compare__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.vg-compare__header h3 { font-size: 22px; }
.vg-compare__tag {
  display: inline-flex; align-items: center;
  min-height: 30px; padding-inline: 12px;
  border-radius: 999px; background: var(--vg-accent-muted);
  color: var(--vg-accent-deep); font-size: 13px; font-weight: 700;
}
.vg-compare__text { color: var(--vg-text-secondary); font-size: 15px; }
.vg-compare__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vg-compare__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.vg-compare__list svg { width: 18px; height: 18px; margin-top: 2px; }
.vg-compare__list .is-pro { color: var(--vg-ink); }
.vg-compare__list .is-pro svg { color: var(--vg-accent-deep); }
.vg-compare__list .is-con { color: var(--vg-text-secondary); }
.vg-compare__list .is-con svg { color: var(--vg-text-muted); }
.vg-compare__variants-title { margin-top: 4px; color: var(--vg-ink); font-size: 14px; font-weight: 700; }
.vg-compare__variants { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 0; padding: 0; list-style: none; }
.vg-compare__variants li { padding: 6px 12px; border: 1px solid var(--vg-border); border-radius: 999px; background: #fff; color: var(--vg-text-secondary); font-size: 13px; }
.vg-compare__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-weight: 700; }

.vg-compare__table-wrap { margin-top: 20px; border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); overflow-x: auto; }
.vg-compare__table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 399px) {
  .vg-compare__table { font-size: 13px; }
  .vg-compare__table th, .vg-compare__table td { padding: 10px; }
}
.vg-compare__table th,
.vg-compare__table td { padding: 12px 14px; border-bottom: 1px solid var(--vg-border); text-align: left; vertical-align: top; }
.vg-compare__table thead > tr > * { background: var(--vg-accent-muted); color: var(--vg-ink); font-weight: 800; }
.vg-compare__table tbody th { width: 34%; color: var(--vg-ink); font-weight: 600; }
.vg-compare__table td { color: var(--vg-text-secondary); }
.vg-compare__table tbody tr:last-child > * { border-bottom: 0; }

.vg-compare__advice { display: grid; gap: 20px; margin-top: 28px; }
.vg-compare__advice > div { padding-top: 16px; border-top: 1px solid var(--vg-border); }
.vg-compare__advice h3 { font-size: 17px; }
.vg-compare__advice p { margin-top: 6px; color: var(--vg-text-secondary); font-size: 15px; }

@media (min-width: 768px) {
  .vg-compare__grid, .vg-compare__advice { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  .vg-compare__table { font-size: 15px; }
  .vg-compare__table th, .vg-compare__table td { padding: 14px 20px; }
}
@media (min-width: 1024px) {
  .vg-compare { padding-block: 80px; }
  .vg-compare__option { padding: 32px; }
  .vg-compare__header h3 { font-size: 26px; }
  .vg-compare__grid { gap: 24px; }
  .vg-compare__advice { gap: 40px; margin-top: 36px; }
}

/* ==========================================================================
   Choices: what you pick, as a ruled two-column list
   ========================================================================== */
.vg-choices { padding-block: 48px; }
.vg-choices__list { display: grid; margin: 0; }
.vg-choices__item { display: grid; gap: 6px; padding-block: 20px; border-top: 1px solid var(--vg-border); }
.vg-choices__item dt { color: var(--vg-ink); font-size: 17px; font-weight: 800; }
.vg-choices__item dd { margin: 0; color: var(--vg-text-secondary); font-size: 15px; }

@media (min-width: 768px) {
  .vg-choices__list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 48px; }
}
@media (min-width: 1024px) {
  .vg-choices { padding-block: 64px; }
  .vg-choices__item { grid-template-columns: 140px minmax(0,1fr); gap: 24px; padding-block: 24px; }
  .vg-choices__item dd { font-size: 16px; }
}

/* ==========================================================================
   Tips before ordering
   ========================================================================== */
.vg-tips { padding-block: 40px; }
.vg-tips__panel { padding: 28px 24px; border-radius: var(--vg-radius-xl); background: var(--vg-accent-muted); }
.vg-tips__grid { display: grid; gap: 24px; }
.vg-tips__item { padding-top: 16px; border-top: 1px solid rgba(49,49,49,.15); }
.vg-tips__item h3 { font-size: 18px; }
.vg-tips__item p { margin-top: 8px; color: var(--vg-text-secondary); font-size: 15px; }

@media (min-width: 768px) {
  .vg-tips__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 48px; }
}
@media (min-width: 1024px) {
  .vg-tips { padding-block: 56px; }
  .vg-tips__panel { padding: 56px; }
  .vg-tips__item p { font-size: 16px; }
}

/* ==========================================================================
   Related products
   ========================================================================== */
.vg-related { padding-block: 48px; }
.vg-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.vg-tile--fluid { width: auto; height: auto; aspect-ratio: 4 / 5; }
.vg-tile--fluid .vg-tile__title { font-size: 17px; }
.vg-related__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.vg-related__grid > :last-child:nth-child(odd) .vg-tile--fluid { aspect-ratio: 16 / 9; }

@media (min-width: 1024px) {
  .vg-related { padding-block: 64px; }
  .vg-related__grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; margin-top: 32px; }
  .vg-tile--fluid .vg-tile__title { font-size: 19px; }
  .vg-related__grid > :last-child:nth-child(odd) { grid-column: auto; }
  .vg-related__grid > :last-child:nth-child(odd) .vg-tile--fluid { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.vg-footer { max-width: var(--vg-max); margin-inline: auto; padding-inline: var(--vg-gutter); }
.vg-footer__panel {
  padding: 48px 24px 28px;
  border-radius: var(--vg-radius-xl) var(--vg-radius-xl) 0 0;
  background: var(--vg-ink);
  color: #fff;
}
.vg-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.vg-footer__brand img { height: 44px; width: auto; filter: brightness(0) invert(1); }
.vg-footer__desc { max-width: 24rem; margin-top: 16px; color: var(--vg-on-dark-muted); font-size: 15px; }
.vg-footer__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.vg-footer__score {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 14px;
  border-radius: 999px; background: #fff;
  color: var(--vg-ink); font-size: 13px; font-weight: 700;
}
.vg-footer__score svg { fill: var(--vg-accent); color: var(--vg-accent); }
.vg-footer__count { color: var(--vg-on-dark-muted); font-size: 13px; }

.vg-footer__col h3 { color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.vg-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vg-footer__col a { display: inline-block; padding-block: 5px; color: var(--vg-on-dark); font-size: 15px; }
.vg-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vg-footer__contact li { display: flex; align-items: center; gap: 10px; }
.vg-footer__contact svg { color: var(--vg-accent-light); flex-shrink: 0; }


.vg-footer__bottom {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.65); font-size: 13px;
}
.vg-footer__bottom a { display: inline-block; padding-block: 4px; color: var(--vg-on-dark-muted); }
.vg-footer__bottom a:hover { color: #fff; }
.vg-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }

@media (min-width: 768px) { .vg-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .vg-footer__panel { padding: 64px 56px 32px; }
  .vg-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; }
  .vg-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 48px; }
}

/* ==========================================================================
   Generic page and post content
   ========================================================================== */
.vg-page { padding-block: 48px 64px; }
.vg-page__title { font-size: 32px; margin-bottom: 24px; }
.vg-page__media { aspect-ratio: 16 / 9; margin-bottom: 32px; border-radius: var(--vg-radius-xl); overflow: hidden; background: var(--vg-ink); }
.vg-page__media img { width: 100%; height: 100%; object-fit: cover; }
.vg-content { max-width: 46rem; }
.vg-content p { margin-bottom: 1.2em; color: var(--vg-text-secondary); }
.vg-content h2 { font-size: 26px; margin: 1.6em 0 .6em; }
.vg-content h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.vg-content ul, .vg-content ol { color: var(--vg-text-secondary); padding-left: 1.2em; margin-bottom: 1.2em; }
.vg-content a { text-decoration: underline; text-underline-offset: 3px; }
.vg-content img { border-radius: var(--vg-radius-md); margin-block: 1.4em; }
.vg-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Legal pages: terms (numbered paragraphs per article) and privacy policy */
.vg-content h2 + p, .vg-content h2 + ul, .vg-content h2 + ol { margin-top: 0; }
.vg-content ol.vg-terms__list { padding-left: 1.6em; }
.vg-content ol.vg-terms__list > li { padding-left: .3em; margin-bottom: .9em; color: var(--vg-text-secondary); }
.vg-content ol.vg-terms__list > li::marker { color: var(--vg-ink); font-weight: 700; }
.vg-content li > p { margin-bottom: .4em; }
.vg-content li > ul { margin: .4em 0 0; }
.vg-content li { margin-bottom: .35em; }
.vg-content strong { color: var(--vg-ink); }
.vg-terms__meta { font-size: 14px; }
.vg-content .vg-terms__pdf { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.vg-content .vg-terms__pdf::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1024px) {
  .vg-page { padding-block: 64px 80px; }
  .vg-page__title { font-size: 44px; }
}

/* ==========================================================================
   Page hero — the banner every inner page opens with
   ========================================================================== */
.vg-pagehero { padding-top: 16px; }
.vg-pagehero__inner {
  position: relative;
  display: flex; flex-direction: column; gap: 24px;
  min-height: 340px; padding: 24px;
  border-radius: var(--vg-radius-xl); overflow: hidden;
  background: var(--vg-ink); color: #fff;
  isolation: isolate;
}
.vg-pagehero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.vg-pagehero__scrim { position: absolute; inset: 0; background: var(--vg-scrim-strong); z-index: 1; }
.vg-pagehero__inner > *:not(.vg-pagehero__bg):not(.vg-pagehero__scrim) { position: relative; z-index: 2; }
.vg-pagehero__content { display: flex; flex-direction: column; gap: 14px; max-width: 46rem; margin-top: auto; }
.vg-pagehero__title { color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.05; }
.vg-pagehero__intro { max-width: 40rem; color: var(--vg-on-dark); font-size: 16px; }
.vg-pagehero__actions { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }

.vg-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--vg-on-dark-muted); }
.vg-breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.vg-breadcrumb a { display: inline-block; padding-block: 4px; color: var(--vg-on-dark); }
.vg-breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vg-breadcrumb li[aria-current] { padding-block: 4px; }
.vg-breadcrumb--dark ol { color: var(--vg-text-secondary); }
.vg-breadcrumb--dark a { color: var(--vg-accent-deep); }
.vg-breadcrumb--dark a:hover { color: var(--vg-accent-ink); }

@media (min-width: 640px) { .vg-pagehero__actions { flex-direction: row; align-items: center; } }
@media (min-width: 1024px) {
  .vg-pagehero { padding-top: 24px; }
  .vg-pagehero__inner { min-height: 400px; padding: 40px 56px 56px; }
  .vg-pagehero__scrim { background: linear-gradient(90deg, rgba(32,44,54,.74) 0%, rgba(32,44,54,.52) 60%, rgba(32,44,54,.36) 100%); }
  .vg-pagehero__intro { font-size: 18px; }
}

/* ==========================================================================
   Split: body text next to a checklist card
   ========================================================================== */
.vg-split { padding-block: 48px; }
.vg-split__inner { display: flex; flex-direction: column; gap: 32px; }
.vg-split__body { display: flex; flex-direction: column; gap: 16px; }
.vg-split__title { font-size: 26px; }
.vg-split__body p { max-width: 40rem; color: var(--vg-text-secondary); font-size: 16px; }
.vg-split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.vg-split__card { padding: 24px; border-radius: var(--vg-radius-lg); background: var(--vg-accent-muted); }
.vg-split__card h2 { font-size: 20px; margin-bottom: 16px; }
.vg-split__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vg-split__card li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--vg-text-secondary); }
.vg-split__lead { color: var(--vg-text-secondary); font-size: 15px; }
.vg-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  border-radius: 999px; background: var(--vg-accent-deep); color: #fff;
}
.vg-check svg { width: 13px; height: 13px; }

@media (min-width: 1024px) {
  .vg-split { padding-block: 72px 56px; }
  .vg-split__inner { flex-direction: row; align-items: flex-start; gap: 64px; }
  .vg-split__body { flex: 1 1 55%; }
  .vg-split__title { font-size: 34px; }
  .vg-split__body p { font-size: 17px; }
  .vg-split__card { flex: 1 1 45%; padding: 36px; }
  .vg-split__card h2 { font-size: 24px; }
}

/* Showroom address and hours */
.vg-address { margin-bottom: 12px; color: var(--vg-ink); font-size: 15px; font-style: normal; font-weight: 700; }
.vg-hours { display: flex; flex-direction: column; margin: 0; }
.vg-hours > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid rgba(49,49,49,.12); }
.vg-hours dt { color: var(--vg-ink); font-size: 15px; font-weight: 600; }
.vg-hours dd { margin: 0; color: var(--vg-text-secondary); font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.vg-hours__note { margin-top: 12px; color: var(--vg-text-secondary); font-size: 14px; }

/* ==========================================================================
   Feature cards (four across)
   ========================================================================== */
.vg-features { padding-block: 40px; }
.vg-features__grid { display: grid; gap: 12px; }
.vg-features__card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); background: #fff;
}
.vg-features__card svg { width: 26px; height: 26px; color: var(--vg-accent); }
.vg-features__card h3 { font-size: 17px; }
.vg-features__card p { color: var(--vg-text-secondary); font-size: 15px; }

@media (min-width: 640px) { .vg-features__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .vg-features { padding-block: 56px; }
  .vg-features__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
  .vg-features__grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ==========================================================================
   Options: image beside a bullet list (also the configurator teaser)
   ========================================================================== */
.vg-options { padding-block: 40px; }
.vg-options__inner { display: flex; flex-direction: column; gap: 32px; }
.vg-options__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--vg-radius-xl); overflow: hidden; background: var(--vg-ink); }
.vg-options__media img { width: 100%; height: 100%; object-fit: cover; }
.vg-options__title { font-size: 28px; }
.vg-options__intro { margin-top: 12px; color: var(--vg-text-secondary); font-size: 16px; }
.vg-options__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vg-options__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--vg-text-secondary); }
.vg-options__actions { margin-top: 28px; }

@media (min-width: 1024px) {
  .vg-options { padding-block: 56px; }
  .vg-options__inner { flex-direction: row; align-items: center; gap: 64px; }
  .vg-options__media { flex: 1 1 45%; }
  .vg-options__body { flex: 1 1 55%; }
  .vg-options__title { font-size: 40px; }
  .vg-options__intro { font-size: 17px; }
  .vg-options__list li { font-size: 16px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.vg-formsection { padding-block: 40px; }
.vg-formsection__inner { display: flex; flex-direction: column; gap: 24px; }
.vg-form { position: relative; padding: 24px; border-radius: var(--vg-radius-xl); background: var(--vg-accent-muted); }
.vg-form h2 { font-size: 24px; margin-bottom: 6px; }
.vg-form > p { color: var(--vg-text-secondary); font-size: 15px; margin-bottom: 20px; }
.vg-form__grid { display: grid; gap: 16px; }
.vg-field { display: flex; flex-direction: column; gap: 6px; }
.vg-field label { font-size: 14px; font-weight: 700; color: var(--vg-ink); }
.vg-req { color: var(--vg-error); }
.vg-field input, .vg-field select, .vg-field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--vg-field-border); border-radius: var(--vg-radius-sm);
  background: #fff; color: var(--vg-ink);
  font: inherit; font-size: 16px;
}
.vg-field input::placeholder, .vg-field textarea::placeholder { color: var(--vg-text-muted); }
.vg-field textarea { min-height: 130px; resize: vertical; }
.vg-field input:focus, .vg-field select:focus, .vg-field textarea:focus {
  border-color: var(--vg-accent-deep);
  box-shadow: 0 0 0 3px rgba(36,110,166,.28);
  outline: 2px solid transparent; /* stays visible in forced-colors mode */
}
.vg-field [aria-invalid="true"] { border-color: var(--vg-error); }
.vg-field--full { grid-column: 1 / -1; }
.vg-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.vg-form__note { font-size: 14px; color: var(--vg-text-secondary); }
.vg-form__note a { font-weight: 700; }
.vg-form__status { margin-top: 16px; padding: 12px 16px; border-radius: var(--vg-radius-sm); font-size: 15px; font-weight: 600; }
.vg-form__status:empty { display: none; }
.vg-form__status.is-pending { padding: 0; color: var(--vg-text-secondary); }
.vg-form__status.is-success { background: var(--vg-success-bg); color: var(--vg-success); }
.vg-form__status.is-error { background: var(--vg-error-bg); color: var(--vg-error); }
.vg-form__status:focus { outline: none; }
.vg-form__fine { margin-top: 12px; color: var(--vg-text-secondary); font-size: 13px; }
.vg-form__fine a { text-decoration: underline; text-underline-offset: 3px; }

.vg-infocards { display: flex; flex-direction: column; gap: 12px; }
.vg-infocard { display: block; padding: 22px; border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); background: #fff; }
.vg-infocard h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 10px; }
.vg-infocard h3 svg { color: var(--vg-accent); }
.vg-infocard p { color: var(--vg-text-secondary); font-size: 15px; }
.vg-infocard > a:not(.vg-infocard__more) { display: block; color: var(--vg-text-secondary); font-size: 15px; }
.vg-infocard strong { color: var(--vg-ink); }
.vg-infocard .vg-infocard__more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; }
.vg-infocard--link { color: inherit; transition: border-color .2s; }
.vg-infocard--link:hover { border-color: var(--vg-accent-deep); color: inherit; }

@media (min-width: 640px) { .vg-form__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) {
  .vg-formsection { padding-block: 56px; }
  .vg-formsection__inner { flex-direction: row; align-items: flex-start; gap: 24px; }
  .vg-form { flex: 1 1 60%; padding: 40px; }
  .vg-infocards { flex: 1 1 40%; }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.vg-stats { padding-block: 40px; }
.vg-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.vg-stat { padding: 24px; border-radius: var(--vg-radius-lg); background: var(--vg-accent-muted); }
.vg-stat strong { display: block; color: var(--vg-accent-deep); font-size: 32px; font-weight: 800; line-height: 1; }
.vg-stat span { display: block; margin-top: 8px; color: var(--vg-text-secondary); font-size: 14px; }

@media (min-width: 1024px) {
  .vg-stats__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
  .vg-stat strong { font-size: 40px; }
}

/* ==========================================================================
   Project page
   ========================================================================== */
.vg-project { padding-block: 24px 16px; }
.vg-project__title { margin-top: 8px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); }
.vg-project__media { aspect-ratio: 4 / 3; margin: 24px 0 0; border-radius: var(--vg-radius-xl); overflow: hidden; background: var(--vg-ink); }
.vg-project__media img { width: 100%; height: 100%; object-fit: cover; }
.vg-project__body { display: grid; gap: 24px; margin-top: 32px; }
.vg-project__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: var(--vg-radius-lg); background: var(--vg-accent-muted); }
.vg-project__cta h2 { font-size: 22px; }
.vg-project__cta p { color: var(--vg-text-secondary); font-size: 15px; }

@media (min-width: 768px) { .vg-project__media { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) {
  .vg-project { padding-block: 40px 24px; }
  .vg-project__body { grid-template-columns: minmax(0,1fr) 400px; gap: 64px; align-items: start; }
  .vg-project__cta { padding: 32px; }
}

/* ==========================================================================
   Closing CTA band
   ========================================================================== */
.vg-closing { padding-block: 40px 56px; }
.vg-closing__panel {
  display: flex; flex-direction: column; gap: 20px;
  padding: 32px 24px; border-radius: var(--vg-radius-xl);
  background: var(--vg-accent-deep); color: #fff;
}
.vg-closing__title { color: #fff; font-size: 26px; }
.vg-closing__text { max-width: 40rem; margin-top: 10px; color: var(--vg-on-dark); font-size: 16px; }
.vg-closing__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }

@media (min-width: 640px) { .vg-closing__actions { flex-direction: row; align-items: center; } }
@media (min-width: 1024px) {
  .vg-closing__panel { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 48px 56px; }
  .vg-closing__title { font-size: 34px; }
}

/* ==========================================================================
   Quote panel under the header button
   ========================================================================== */
.vg-quote { position: static; }
.vg-header__quote-chevron { transition: transform .25s var(--vg-ease); }
.vg-quote:not(.is-ready) .vg-header__quote-chevron { display: none; }
.vg-header__quote[aria-expanded="true"] .vg-header__quote-chevron { transform: rotate(180deg); }
.vg-header__quote:hover .vg-header__quote-chevron { transform: none; }
.vg-header__quote[aria-expanded="true"]:hover .vg-header__quote-chevron { transform: rotate(180deg); }
.vg-quote__panel {
  position: absolute; left: var(--vg-gutter); right: var(--vg-gutter); top: calc(100% + 8px);
  max-height: calc(100dvh - var(--vg-header-h) - 24px); overflow-y: auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--vg-border);
  border-radius: var(--vg-radius-md);
  box-shadow: 0 18px 40px rgba(20, 30, 40, .16);
  z-index: 60;
}
.vg-quote__panel[hidden] { display: none; }
.vg-quote__title { padding: 6px 10px 10px; color: var(--vg-text-secondary); font-size: 14px; font-weight: 700; }
.vg-quote__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.vg-quote__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--vg-radius-sm); color: var(--vg-ink); }
.vg-quote__item:hover { background: var(--vg-accent-muted); color: var(--vg-ink); }
.vg-quote__thumb { flex-shrink: 0; width: 56px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--vg-ink); }
.vg-quote__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vg-quote__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.vg-quote__meta { display: block; color: var(--vg-text-secondary); font-size: 13px; line-height: 1.35; }
.vg-quote__meta.is-config { color: var(--vg-accent-deep); font-weight: 700; }
.vg-quote__other { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 14px 10px 8px; border-top: 1px solid var(--vg-border); font-size: 14px; font-weight: 700; }

@media (min-width: 1024px) {
  .vg-quote { position: relative; }
  .vg-quote__panel { left: auto; right: 0; top: calc(100% + 12px); width: 380px; }
}

/* ==========================================================================
   Quote chooser (/offerte/)
   ========================================================================== */
.vg-chooser { padding-block: 40px 56px; }
.vg-chooser__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vg-chooser__card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg);
  overflow: hidden; background: #fff; color: inherit;
  transition: border-color .2s, box-shadow .3s var(--vg-ease);
}
.vg-chooser__card:hover { border-color: var(--vg-accent-deep); box-shadow: var(--vg-shadow); color: inherit; }
.vg-chooser__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vg-ink); }
.vg-chooser__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vg-ease); }
.vg-chooser__card:hover .vg-chooser__media img { transform: scale(1.04); }
.vg-chooser__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; }
.vg-chooser__title { color: var(--vg-ink); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.vg-chooser__text { color: var(--vg-text-secondary); font-size: 15px; }
.vg-chooser__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--vg-accent-deep); font-weight: 700; }
.vg-chooser__cell--plain .vg-chooser__card { border-color: transparent; background: var(--vg-accent-muted); }
.vg-chooser__cell--plain .vg-chooser__card:hover { border-color: var(--vg-accent-deep); }
.vg-chooser__cell--plain .vg-chooser__body { justify-content: center; padding: 28px; }
.vg-chooser__cell--plain .vg-chooser__text { max-width: 30rem; }
.vg-chooser__cell--plain .vg-chooser__cta { margin-top: 6px; }
.vg-chooser__assure { display: grid; gap: 16px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--vg-border); list-style: none; }
.vg-chooser__assure li { display: flex; align-items: flex-start; gap: 12px; color: var(--vg-text-secondary); font-size: 15px; }
.vg-chooser__assure svg { margin-top: 2px; color: var(--vg-accent); }
.vg-chooser__assure strong { display: block; color: var(--vg-ink); }

@media (min-width: 640px) {
  .vg-chooser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-chooser__cell--wide { grid-column: 1 / -1; }
}
@media (min-width: 768px) { .vg-chooser__assure { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
@media (min-width: 1024px) {
  .vg-chooser { padding-block: 56px 80px; }
  .vg-chooser__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .vg-chooser__cell--wide { grid-column: span 2; grid-row: span 1; }
  .vg-chooser__cell--wide .vg-chooser__card { display: grid; grid-template-columns: 1.15fr 1fr; }
  .vg-chooser__cell--wide .vg-chooser__media { aspect-ratio: auto; min-height: 100%; }
  .vg-chooser__cell--wide .vg-chooser__body { justify-content: center; padding: 32px; }
  .vg-chooser__cell--wide .vg-chooser__title { font-size: 28px; }
  .vg-chooser__cell--plain { grid-column: span 2; }
}

/* Choice pills and unit suffix in the quote forms */
.vg-form__group { margin: 8px 0 14px; color: var(--vg-ink); font-size: 17px; }
.vg-form__grid + .vg-form__group { margin-top: 28px; }
fieldset.vg-field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.vg-field legend { margin-bottom: 8px; padding: 0; color: var(--vg-ink); font-size: 14px; font-weight: 700; }
.vg-choicegroup { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-choice { position: relative; display: inline-flex; }
.vg-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vg-choice span {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--vg-field-border); border-radius: 999px;
  background: #fff; color: var(--vg-ink);
  font-size: 15px; font-weight: 600;
  transition: background-color .15s, border-color .15s, color .15s;
}
.vg-choice input:hover + span { border-color: var(--vg-accent-deep); }
.vg-choice input:checked + span { border-color: var(--vg-accent-deep); background: var(--vg-accent-deep); color: #fff; }
.vg-choice input:focus-visible + span { outline: 3px solid var(--vg-focus); outline-offset: 2px; }
.vg-unit { position: relative; display: block; }
.vg-unit input { padding-right: 52px; }
.vg-unit__label { position: absolute; top: 50%; right: 16px; color: var(--vg-text-muted); font-size: 15px; transform: translateY(-50%); pointer-events: none; }

/* ==========================================================================
   Product overview (/producten/)
   ========================================================================== */
.vg-catalog { padding-block: 40px 16px; }
.vg-catalog__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vg-catalog__item {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg);
  overflow: hidden; background: #fff;
  transition: border-color .2s, box-shadow .3s var(--vg-ease);
}
.vg-catalog__item:hover { border-color: var(--vg-accent-deep); box-shadow: var(--vg-shadow); }
.vg-catalog__item:focus-within { outline: 3px solid var(--vg-focus); outline-offset: 3px; }
.vg-catalog__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--vg-ink); }
.vg-catalog__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--vg-ease); }
.vg-catalog__item:hover .vg-catalog__media img { transform: scale(1.04); }
.vg-catalog__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px 22px; }
.vg-catalog__title { font-size: 22px; }
.vg-catalog__link { color: var(--vg-ink); }
.vg-catalog__link:hover { color: var(--vg-ink); }
.vg-catalog__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vg-catalog__link:focus-visible { outline: none; }
.vg-catalog__text { color: var(--vg-text-secondary); font-size: 15px; }
.vg-catalog__quote { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 700; }

@media (min-width: 640px) { .vg-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .vg-catalog { padding-block: 64px 24px; }
  .vg-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ==========================================================================
   Lightbox for the project photos
   ========================================================================== */
.vg-inspiration__grid > li { display: block; }
.vg-inspiration__zoom {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: #fff; color: var(--vg-ink);
  transition: opacity .25s, transform .25s var(--vg-ease);
}
@media (hover: hover) {
  .vg-inspiration__zoom { opacity: 0; transform: scale(.9); }
  .vg-inspiration__item:hover .vg-inspiration__zoom,
  .vg-inspiration__item:focus-visible .vg-inspiration__zoom { opacity: 1; transform: none; }
}

html.vg-noscroll { overflow: hidden; }
.vg-lightbox {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: #fff;
  --vg-focus: #fff;
}
.vg-lightbox::backdrop { background: rgba(16, 22, 28, .96); }
.vg-lightbox__stage { position: absolute; inset: 72px 16px 132px; display: flex; align-items: center; justify-content: center; }
.vg-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--vg-radius-md); opacity: 0; transition: opacity .3s var(--vg-ease); }
.vg-lightbox__img.is-loaded { opacity: 1; }
.vg-lightbox__caption { position: absolute; left: 16px; right: 16px; bottom: 84px; display: flex; justify-content: center; gap: 12px; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; text-align: center; }
.vg-lightbox__count { color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.vg-lightbox__btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer;
  transition: background-color .2s;
}
.vg-lightbox__btn:hover { background: rgba(255,255,255,.26); }
.vg-lightbox__btn svg { width: 22px; height: 22px; }
.vg-lightbox__close { top: 12px; right: 12px; }
.vg-lightbox__prev { bottom: 16px; left: calc(50% - 64px); }
.vg-lightbox__next { bottom: 16px; left: calc(50% + 12px); }
.vg-lightbox[data-single] .vg-lightbox__prev,
.vg-lightbox[data-single] .vg-lightbox__next,
.vg-lightbox[data-single] .vg-lightbox__count { display: none; }

@media (min-width: 1024px) {
  .vg-lightbox__stage { inset: 72px 112px 72px; }
  .vg-lightbox__caption { bottom: 24px; }
  .vg-lightbox__close { top: 20px; right: 20px; }
  .vg-lightbox__prev { top: 50%; bottom: auto; left: 28px; transform: translateY(-50%); }
  .vg-lightbox__next { top: 50%; bottom: auto; left: auto; right: 28px; transform: translateY(-50%); }
}

/* ==========================================================================
   Reduced motion: keep every state change, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vg-tile img, .vg-inspiration__item img, .vg-ctaduo__card img,
  .vg-btn svg, .vg-ctaduo__cta svg, .vg-faq__icon, .vg-skip, .vg-topbar__usp,
  .vg-chooser__media img, .vg-catalog__media img, .vg-lightbox__img, .vg-nav__toggle svg,
  .vg-lang__toggle .vg-icon { transition: none; }
  .vg-tile:hover img, a.vg-inspiration__item:hover img, .vg-ctaduo__card:hover img,
  .vg-btn:hover svg, .vg-ctaduo__card:hover .vg-ctaduo__cta svg,
  .vg-chooser__card:hover .vg-chooser__media img, .vg-catalog__item:hover .vg-catalog__media img { transform: none; }
}