/* SEO-landingspagina's: eigen ritme, zelfde vormtaal als de rest van de site. */

/* ---------- hero ---------- */
.seo-hero { background: var(--cream); padding: clamp(140px, 17vh, 190px) 0 clamp(50px, 6vw, 86px); }
.seo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.seo-hero-titel {
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 74px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 16px 0 0;
  max-width: 13ch;
  text-wrap: balance;
}
.seo-hero-sub {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 20px 0 0;
  max-width: 46ch;
}
.seo-hero-tekst .btn-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.seo-hero-punten {
  list-style: none;
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.seo-hero-punten li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.seo-hero-beeld { position: relative; }
.seo-hero-beeld .archimg { position: relative; z-index: 1; }
.seo-hero-boog {
  position: absolute;
  left: -70px;
  bottom: -34px;
  z-index: 0;
  pointer-events: none;
}

/* ---------- cijferband ---------- */
.seo-band { background: var(--forest); color: #fff; padding: clamp(34px, 4vw, 54px) 0; }
.seo-band-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 46px);
}
.seo-cijfer { border-left: 1px solid rgba(255,255,255,.18); padding-left: clamp(16px, 2vw, 26px); }
.seo-cijfer:first-child { border-left: none; padding-left: 0; }
.seo-cijfer-nr {
  font-weight: 600;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.025em;
  line-height: 1;
  color: #fff;
}
.seo-cijfer-tekst {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}

/* ---------- inleiding ---------- */
.seo-intro { background: var(--paper); padding: clamp(56px, 6.5vw, 100px) 0 clamp(20px, 3vw, 44px); }
.seo-intro-tekst { max-width: 780px; margin: 0 auto; text-align: center; }
.seo-intro-tekst p {
  font-family: var(--ark-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.55;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 22px;
}
.seo-intro-tekst p:last-child { margin-bottom: 0; }
.seo-intro-tekst p + p {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.85;
  letter-spacing: 0;
  color: var(--ink-soft);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- inhoudsblokken ---------- */
.seo-blok { padding: clamp(50px, 6vw, 88px) 0; }
.seo-blok.seo-breed { background: var(--cream-2); }
.seo-blok-nr {
  display: block;
  font-family: var(--ark-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 14px;
}
.seo-blok-titel {
  font-weight: 500;
  font-size: clamp(27px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 20ch;
  text-wrap: balance;
}
.seo-blok-tekst p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 66ch;
}
.seo-blok-tekst p:last-child { margin-bottom: 0; }

.seo-duo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(30px, 4.5vw, 74px);
  align-items: center;
}
.seo-duo--om .seo-duo-tekst { order: 2; }
.seo-duo--om .seo-duo-beeld { order: 1; }
.seo-duo-beeld .archimg { border-radius: 28px; overflow: hidden; }
.seo-breed-inner { max-width: 880px; }
.seo-breed-inner .seo-blok-titel { max-width: 24ch; }

/* ---------- vilttinten ---------- */
.seo-tinten { background: var(--paper); padding: clamp(50px, 6vw, 88px) 0; }
.seo-tinten-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.seo-tinten-titel {
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 14px 0 0;
}
.seo-tinten-tekst {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 56ch;
}
.seo-tinten-rij {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}
.seo-tint { text-align: center; }
.seo-tint-vlak {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(20,18,14,.12);
}
.seo-tint-naam {
  display: block;
  margin-top: 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- vragen ---------- */
.seo-faq { position: relative; overflow: hidden; background: var(--cream-2); padding: clamp(56px, 6.5vw, 96px) 0; }
.seo-faq-boog { position: absolute; left: -120px; bottom: -90px; pointer-events: none; }
.seo-faq .wrap { position: relative; z-index: 1; }
.seo-faq-kop { text-align: center; margin-bottom: clamp(26px, 3vw, 44px); }
.seo-faq-kop .eyebrow { justify-content: center; }
.seo-faq-titel {
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  margin: 14px auto 0;
  max-width: 20ch;
  text-wrap: balance;
}
.seo-faq-lijst { max-width: 880px; margin: 0 auto; }

/* ---------- afsluiter ---------- */
.seo-cta { background: var(--paper); padding: clamp(50px, 6vw, 90px) 0 clamp(60px, 7vw, 104px); }

/* ---------- smallere schermen ---------- */
@media (max-width: 1080px) {
  .seo-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .seo-hero-beeld { max-width: 460px; }
  .seo-hero-boog { left: -50px; }
  .seo-duo-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-duo--om .seo-duo-tekst, .seo-duo--om .seo-duo-beeld { order: 0; }
  .seo-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .seo-cijfer:nth-child(3) { border-left: none; padding-left: 0; }
  .seo-tinten-rij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seo-tinten-kop { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .seo-band-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .seo-cijfer { border-left: none; padding-left: 0; }
  .seo-tinten-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-hero-titel { max-width: none; }
}
@media (max-width: 620px) { .seo-intro-tekst { text-align: left; } .seo-intro-tekst p + p { text-align: left; } }

/* Intro met foto: naast een foto links uitgelijnd in plaats van gecentreerd. */
.seo-intro.seo-duo .seo-intro-tekst { max-width: none; margin: 0; text-align: left; }
.seo-intro.seo-duo .seo-intro-tekst p + p { margin-left: 0; margin-right: 0; }
.seo-intro.seo-duo { padding-bottom: clamp(50px, 6vw, 88px); }

/* Foto's in de cijferband en de offertekaart: onder een donkere laag, zodat de witte tekst leesbaar blijft. */
.seo-band--foto { background: linear-gradient(rgba(27,26,22,.72), rgba(27,26,22,.72)), var(--seo-foto) center / cover no-repeat, var(--forest); }
.seo-cta .cta-card[style*="--seo-foto"] { background: linear-gradient(rgba(27,26,22,.74), rgba(27,26,22,.74)), var(--seo-foto) center / cover no-repeat, var(--forest); }
/* Brede foto tussen de kop en de vragen. */
.seo-faq-foto { max-width: 880px; margin: 0 auto clamp(26px, 3vw, 40px); }