/* ============================================================
   H2G Theme — main.css
   Globale stijlen, CSS custom properties, reset, typografie.
   Neutrale defaults — re-skin per klant via /h2g-reskin (tokens, niet classes).
   ============================================================ */



/* ─── Custom Properties ─────────────────────────────────── */
:root {
  /* Kleuren — Lijndraad huisstijl (/h2g-reskin). MONOCHROOM: blauw #006EFF op crème #FFF8F1.
     Tekst = accent = "inkt" (blauw); surfaces/inverse-tekst = crème. Zie docs/design-tokens.md. */
  --color-black:        #006EFF;   /* inkt: koppen, knop-bg, nadruk = accentblauw */
  --color-accent:         #006EFF; /* accent (identiek — monochroom) */
  --color-accent-light:   #CCE0FF; /* lichte blauw-tint */
  --color-accent-dark:    #0052CC; /* donkerder blauw (hover/nadruk) */
  --color-white:        #FFF8F1;   /* primaire surface & pagina-achtergrond = crème */
  --color-grey-100:     #FFF8F1;   /* licht oppervlak = crème */
  --color-grey-200:     #EBE2D5;   /* subtiele warme rand/divider */
  --color-grey-300:     #8FA6C9;   /* gedempt blauw-grijs (secundaire tekst) */
  --color-text:         #006EFF;   /* bodytekst = blauw */
  --color-dark-bg:      #006EFF;   /* "donkere"/inverse secties = blauw vlak */
  --color-card-accent-bg: #E6F0FF; /* zeer lichte blauw-tint (icoon-vlakken) */

  /* Typografie — Archivo (variable, headings + body) + IBM Plex Mono (nummers/labels) */
  --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing & layout */
  --radius:        6px;
  --radius-small:  4px;
  --radius-pill:   999px;
  /* Fluïde ritme: schaalt vloeiend mee tussen mobiel en desktop i.p.v. één
     harde 760px-sprong. Blokken gebruiken var(--gutter) voor hun horizontale
     rand, zodat de tablet-marge (761–1024px) automatisch meekrimpt. */
  --section-pad:   clamp(56px, 7vw, 80px);
  --max-width:     1600px;
  --gutter:        clamp(20px, 4.5vw, 40px);

  /* Schaduw */
  --shadow-card: 0px 4px 12px rgba(0,0,0,0.08), 0px 1px 3px rgba(0,0,0,0.06);

  /* Merk-pijl (mask voor core/button ::after — spiegelt h2g_arrow_svg()) */
  --h2g-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7h8M7 3l4 4-4 4' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ─── Bricks / WordPress thema override ─────────────────── */
/* Zorg dat de content wrapper van het thema geen breedte beperkt */
#brx-content,
#brx-content article,
.brx-body #brx-content,
.bricks-is-frontend #brx-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Verberg de door het thema gegenereerde paginatitel boven onze hero */
#brx-content > h1:first-child,
#brx-content .entry-title,
.h2g-homepage ~ h1,
article.hentry > h1 {
  display: none !important;
}

/* ─── Homepage wrapper ───────────────────────────────────── */
.h2g-homepage {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Secties vullen altijd de volledige scherm breedte */
.h2g-hero,
.h2g-sectie,
.h2g-intro,
.h2g-diensten,
.h2g-portfolio-preview,
.h2g-cta-banner {
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Kleine ademruimte bij anchor-links. De topbar is NIET sticky (nav.css),
     dus geen volledige headerhoogte nodig — 80px liet een leeg gat achter. */
  scroll-padding-top: 1.5rem;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ─── Typografie ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-black);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: 48px; font-weight: 700; }
h2 { font-size: 36px; font-weight: 600; }
h3 { font-size: 28px; font-weight: 600; }
h4 { font-size: 22px; font-weight: 500; }

p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.7;
}

/* ─── Utility: container ────────────────────────────────── */
.h2g-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─── Utility: sectie ───────────────────────────────────── */
.h2g-sectie {
  padding: var(--section-pad) 0;
}

.h2g-sectie--grijs {
  background-color: var(--color-grey-100);
}

.h2g-sectie--donker {
  background-color: var(--color-dark-bg);
}

/* ─── Utility: label boven heading ─────────────────────── */
.h2g-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}

/* ─── Utility: sectie header (gecentreerd) ──────────────── */
.h2g-sectie-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.h2g-sectie-header h2 {
  margin-top: 8px;
  margin-bottom: 16px;
}

.h2g-sectie-header p {
  font-size: 17px;
}

/* ─── Utility: sectie CTA ───────────────────────────────── */
.h2g-sectie-cta {
  text-align: center;
  margin-top: 48px;
}

/* ─── Utility: goud lijn decoratief ────────────────────── */
.h2g-gold-line {
  display: inline-block;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 2px;
  margin-bottom: 20px;
}

/* ─── Kleur utilities ────────────────────────────────────── */
.h2g-wit { color: var(--color-white) !important; }
.h2g-licht { color: var(--color-grey-300) !important; }

/* ─── Label variant op lichte achtergrond ───────────────── */
.h2g-label--donker {
  color: rgba(17,17,17,0.5);
}

/* ─── Intro sectie ──────────────────────────────────────── */
.h2g-intro {
  position: relative;
  overflow: hidden;
  /* Extra padding-top om de diagonale hero-bodem op te vangen */
  padding-top: calc(var(--section-pad) + 40px) !important;
}

.h2g-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Goud linker accent lijn op tekst kolom */
.h2g-intro__tekst {
  padding-left: 28px;
  border-left: 3px solid var(--color-accent);
}

.h2g-intro__tekst h2 {
  margin-bottom: 20px;
  line-height: 1.2;
}

.h2g-intro__tekst p {
  margin-bottom: 16px;
}

.h2g-intro__tekst .h2g-btn {
  margin-top: 8px;
}

/* Groot decoratief jaar achtergrond */
.h2g-intro__bg-text {
  position: absolute;
  right: -20px;
  bottom: -60px;
  font-family: var(--font-heading);
  font-size: 280px;
  font-weight: 700;
  color: var(--color-grey-200);
  line-height: 1;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Kenmerken lijst */
.h2g-intro__kenmerken {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.h2g-kenmerk {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px;
  border-radius: var(--radius);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.h2g-kenmerk:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.h2g-kenmerk__icoon {
  width: 44px;
  height: 44px;
  background-color: var(--color-card-accent-bg);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent-dark);
}

.h2g-kenmerk h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 4px;
}

.h2g-kenmerk p {
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
}

/* ─── Diensten sectie ────────────────────────────────────── */
.h2g-dienst-card__nr {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  display: block;
  margin-bottom: -4px;
}

/* ─── Portfolio preview sectie ───────────────────────────── */
.h2g-portfolio-preview {
  position: relative;
  padding-top: calc(var(--section-pad) + 60px) !important;
  padding-bottom: calc(var(--section-pad) + 60px) !important;
}

/* Diagonale ingangen */
.h2g-portfolio-preview__diag-top {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background-color: var(--color-white);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.h2g-portfolio-preview__diag-bot {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background-color: var(--color-grey-100);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Tall portfolio card (middelste) */
.h2g-portfolio-card--tall {
  grid-row: span 1;
  transform: translateY(-20px);
}

/* ─── CTA Banner sectie ──────────────────────────────────── */
.h2g-cta-banner {
  position: relative;
  background-color: var(--color-accent-light);
  padding: calc(var(--section-pad) + 40px) 0;
  border-top: 3px solid var(--color-accent);
  overflow: hidden;
}

/* Decoratieve blokken rechtsboven (logo-motief echo) */
.h2g-cta-deco {
  position: absolute;
  display: block;
  background-color: var(--color-accent);
  border-radius: 3px;
}

.h2g-cta-deco--a {
  width: 80px;
  height: 80px;
  top: -20px;
  right: 80px;
  opacity: 0.12;
}

.h2g-cta-deco--b {
  width: 52px;
  height: 52px;
  top: 20px;
  right: 20px;
  opacity: 0.09;
}

.h2g-cta-deco--c {
  width: 30px;
  height: 30px;
  top: 52px;
  right: 150px;
  opacity: 0.06;
}

.h2g-cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  position: relative;
  z-index: 1;
}

.h2g-cta-banner__tekst h2 {
  color: var(--color-black);
  font-size: 42px;
  margin-bottom: 14px;
  margin-top: 8px;
  line-height: 1.1;
}

.h2g-cta-banner__tekst p {
  color: var(--color-text);
  max-width: 480px;
  font-size: 17px;
}

.h2g-cta-banner__actie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  min-width: 240px;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .h2g-intro__inner { gap: 48px; }
  .h2g-cta-banner__inner { gap: 40px; }
  .h2g-cta-banner__tekst h2 { font-size: 34px; }
}

@media (max-width: 768px) {
  .h2g-intro__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .h2g-intro__bg-text { font-size: 160px; bottom: -30px; }

  .h2g-portfolio-preview {
    padding-top: calc(48px + 60px) !important;
    padding-bottom: calc(48px + 60px) !important;
  }

  .h2g-portfolio-card--tall { transform: none; }

  .h2g-cta-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .h2g-cta-banner__tekst h2 { font-size: 28px; }

  .h2g-cta-banner__actie {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .h2g-cta-banner { padding: 64px 0; }
  .h2g-cta-banner__actie { flex-direction: column; }
  .h2g-intro__bg-text { display: none; }
}

/* ─── Responsive typografie ─────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }

  .h2g-sectie { padding: 48px 0; }
  .h2g-sectie-header { margin-bottom: 36px; }
}

/* ══════════════════════════════════════════════════════════
   OVER ONS PAGINA LAYOUT
   ══════════════════════════════════════════════════════════ */

/* ─── Verhaal sectie ─────────────────────────────────────── */
.h2g-verhaal-sectie {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--section-pad) + 40px) !important;
}

.h2g-verhaal__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.h2g-verhaal__tekst {
  padding-left: 28px;
  border-left: 3px solid var(--color-accent);
}

.h2g-verhaal__tekst h2 {
  margin-top: 8px;
  margin-bottom: 20px;
  line-height: 1.2;
}

.h2g-verhaal__tekst p {
  margin-bottom: 16px;
}

/* Rechter kolom */
.h2g-verhaal__visueel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.h2g-verhaal__visueel .h2g-intro__bg-text {
  right: -40px;
  bottom: -80px;
}

/* Stats 2×2 grid */
.h2g-verhaal__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 1;
}

.h2g-verhaal__stat {
  background-color: var(--color-white);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h2g-verhaal__stat--accent {
  background-color: var(--color-black);
}

.h2g-verhaal__stat--accent .h2g-verhaal__stat-getal {
  color: var(--color-accent);
}

.h2g-verhaal__stat--accent .h2g-verhaal__stat-label {
  color: var(--color-grey-300);
}

.h2g-verhaal__stat-getal {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
  letter-spacing: -0.03em;
}

.h2g-verhaal__stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
}

/* Quote */
.h2g-verhaal__quote {
  background-color: var(--color-card-accent-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  position: relative;
  z-index: 1;
}

.h2g-verhaal__quote p {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-black);
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 8px;
}

.h2g-verhaal__quote cite {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-accent-dark);
  font-style: normal;
}

/* ─── Merkwaarden grid ───────────────────────────────────── */
.h2g-merkwaarden-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ─── Werkwijze sectie ───────────────────────────────────── */
.h2g-werkwijze-stappen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.h2g-werkwijze-stap {
  position: relative;
  padding: 36px 28px;
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: 0 8px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.h2g-werkwijze-stap:first-child { margin-left: 0; }
.h2g-werkwijze-stap:last-child  { margin-right: 0; }

.h2g-werkwijze-stap:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.h2g-werkwijze-stap__nr {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: 16px;
  display: block;
}

.h2g-werkwijze-stap__lijn {
  display: none;
}

.h2g-werkwijze-stap__icoon {
  width: 52px;
  height: 52px;
  background-color: var(--color-card-accent-bg);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-dark);
  margin-bottom: 20px;
}

.h2g-werkwijze-stap h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 12px;
  line-height: 1.3;
}

.h2g-werkwijze-stap p {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

/* Verbindingslijn tussen stappen */
.h2g-werkwijze-stappen::before {
  content: '';
  position: absolute;
  top: 68px;
  left: calc(25% - 8px);
  right: calc(25% - 8px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-light), var(--color-accent), var(--color-accent-light));
  z-index: 0;
  pointer-events: none;
}

/* ─── Over ons responsive ────────────────────────────────── */
@media (max-width: 1024px) {
  .h2g-werkwijze-stappen {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .h2g-werkwijze-stap {
    margin: 0;
  }

  .h2g-werkwijze-stappen::before {
    display: none;
  }

  .h2g-verhaal__inner {
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .h2g-verhaal__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .h2g-merkwaarden-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .h2g-werkwijze-stappen {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .h2g-verhaal__stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGINA LAYOUT
   ══════════════════════════════════════════════════════════ */

/* ─── Hero gegevens strip ────────────────────────────────── */
.h2g-contact-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.h2g-contact-hero__gegevens {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.h2g-contact-hero__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.h2g-contact-hero__item:hover {
  background-color: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.3);
}

.h2g-contact-hero__icoon {
  width: 38px;
  height: 38px;
  background-color: rgba(201,168,76,0.12);
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

.h2g-contact-hero__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-grey-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.h2g-contact-hero__item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white);
}

/* ─── Contact sectie layout ──────────────────────────────── */
.h2g-contact-sectie {
  background-color: var(--color-grey-100);
  padding-top: calc(var(--section-pad) + 40px) !important;
}

.h2g-contact__layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: start;
}

/* ─── Info kolom ─────────────────────────────────────────── */
.h2g-contact__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 24px;
}

.h2g-contact__info-kaart {
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.h2g-contact__info-kaart h2 {
  font-size: 20px;
  color: var(--color-black);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--color-grey-200);
}

.h2g-contact__gegeven {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-grey-100);
}

.h2g-contact__gegeven:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.h2g-contact__gegeven-icoon {
  width: 34px;
  height: 34px;
  background-color: var(--color-card-accent-bg);
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-dark);
  flex-shrink: 0;
  margin-top: 1px;
}

.h2g-contact__gegeven-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey-300);
  margin-bottom: 3px;
}

.h2g-contact__gegeven-waarde {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: none;
  transition: color 0.18s ease;
}

a.h2g-contact__gegeven-waarde:hover {
  color: var(--color-accent-dark);
}

.h2g-contact__gegeven-waarde--muted {
  color: var(--color-text);
  font-weight: 400;
  font-style: italic;
}

/* Reactietijd kaart */
.h2g-contact__respons-kaart {
  background-color: var(--color-card-accent-bg);
  border: 1.5px solid var(--color-accent-light);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.h2g-contact__respons-icoon {
  color: var(--color-accent-dark);
  flex-shrink: 0;
}

.h2g-contact__respons-kaart strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 4px;
}

.h2g-contact__respons-kaart p {
  font-size: 13px;
  color: var(--color-text);
  margin: 0;
  line-height: 1.55;
}

/* Offerte kaart */
.h2g-contact__offerte-kaart {
  background-color: var(--color-dark-bg);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius);
  padding: 28px;
}

.h2g-contact__offerte-kaart h3 {
  font-size: 18px;
  color: var(--color-white);
  margin: 8px 0 10px;
}

.h2g-contact__offerte-kaart p {
  font-size: 13px;
  color: var(--color-grey-300);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* ─── Formulier kolom ────────────────────────────────────── */
.h2g-contact__formulier {
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 48px;
}

.h2g-contact__form-header {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1.5px solid var(--color-grey-200);
}

.h2g-contact__form-header .h2g-label {
  margin-bottom: 8px;
}

.h2g-contact__form-header h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--color-black);
}

.h2g-contact__form-header p {
  font-size: 14px;
  color: var(--color-text);
  margin: 0;
}

/* ─── Contact responsive ─────────────────────────────────── */
@media (max-width: 1024px) {
  .h2g-contact-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .h2g-contact-hero__gegevens {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .h2g-contact__layout {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }

  .h2g-contact__info {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .h2g-contact__info-kaart {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .h2g-contact-hero__gegevens {
    grid-template-columns: 1fr;
  }

  .h2g-contact__info {
    grid-template-columns: 1fr;
  }

  .h2g-contact__formulier {
    padding: 28px 24px;
  }
}

/* ============================================================
   H2G compat-aliases — oude boilerplate-varnamen → neutrale palette
   zodat opt-in bibliotheekblokken (pakketten/academy/etc.) niet breken
   ============================================================ */
:root{
  --russian-violet:      var(--color-black);
  --russian-violet-dark: var(--color-dark-bg);
  --purple:              var(--color-accent);
  --purple-light:        var(--color-accent-light);
  --sea-green:           var(--color-accent);
  --morning-glory:       var(--color-accent-light);
  --charcoal:            var(--color-text);
  --mint-cream:          var(--color-grey-100);
  --lavender-100:        var(--color-grey-100);
  --grey-100:            var(--color-grey-100);
  --grey-200:            var(--color-grey-200);
  --grey-300:            var(--color-grey-300);
  --white:               var(--color-white);
}