/* Altair V2 — de vijf akten.
   Editoriale regel uit het brief: donkere, paginabrede momenten wisselen af
   met smalle tekstmomenten, en geen sectie herhaalt de kolomverdeling van
   zijn buur. */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--s-16);
}

/* Lichte akten dekken het toneel af: daar is de 3D-ruimte even weg en telt
   alleen de inhoud. */
.section--light {
  background: var(--ivory);
  color: var(--pine);
}

.section--white {
  background: var(--white);
  color: var(--pine);
}

.section--pine {
  background: var(--pine);
}

.section--light .lede,
.section--white .lede {
  color: var(--graygreen);
}

/* Op de lichte akten (en in de witte formulierkaart) is --graygreen wél de
   juiste, AA-halende gedempte kleur uit het brief. */
.section--light .smallprint,
.section--white .smallprint,
.section--light .eyebrow--muted,
.section--white .eyebrow--muted,
.form-card .smallprint {
  color: var(--graygreen);
}

.section__head {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-16);
}

/* Zowel een kop ín de kophuls als een kop die zélf de huls is — die tweede
   vorm komt voor waar er geen lede naast staat. Zonder de tweede selector
   viel zo'n kop terug op de standaard h2-grootte. */
.section__head h2,
h2.section__head {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-snug);
  max-width: 18ch;
}

/* ==========================================================================
   Akte I — Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding-block: var(--s-32) var(--s-16);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: var(--s-6);
}

/* De kop loopt over de volle breedte en blijft op twee regels — dat is de
   editoriale maat uit het brief. De token --text-hero groeit met 11vw en zou
   deze achttien tekens over vier regels trekken; 8,2vw houdt hem binnen de
   band van 8-14vw die het brief zelf noemt, en binnen de container. */
.hero__title {
  font-size: clamp(2.5rem, 8.2vw, 8.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-display);
  margin-top: var(--s-4);
  text-wrap: nowrap;
}

/* Onder de kop: links de actie, rechts-onder de sub. */
.hero__foot {
  display: grid;
  gap: var(--s-8);
  margin-top: var(--s-12);
}

@media (width >= 1024px) {
  .hero__foot {
    /* De linkerkolom moet de twee knoppen naast elkaar kunnen dragen (samen
       ~645px); bij een gelijkere verdeling brak de tweede knop af. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr);
    align-items: end;
    gap: var(--s-16);
  }
}

.hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ivory-soft);
  max-width: var(--measure-narrow);
}

@media (width >= 1024px) {
  .hero__sub {
    justify-self: end;
    text-align: right;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.hero__chip {
  margin-top: 0;
}

/* Bij smalle schermen breekt de kop wél af — daar is geen breedte voor twee
   regels van achttien tekens, en drie regels leest daar prima. */
@media (width < 640px) {
  .hero__title {
    text-wrap: balance;
  }
}

/* Zachte scrollhint onderaan de hero. */
.hero__hint {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-12);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

.hero__hint svg {
  animation: hint-drift 2.4s var(--ease-in-out-quart) infinite;
}

@keyframes hint-drift {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__hint svg {
    animation: none;
  }
}

/* ==========================================================================
   2 — Probleem en belofte
   ========================================================================== */

.problem__grid {
  display: grid;
  gap: var(--s-16);
}

@media (width >= 1024px) {
  .problem__grid {
    /* 4 van 12 links voor de pijnpunten, de rest voor de belofte. */
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-24);
    align-items: start;
  }
}

.pains {
  display: grid;
}

.pain {
  padding-block: var(--s-6);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--text-base);
  color: var(--ivory-soft);
}

.pain:last-child {
  border-bottom: 1px solid var(--hairline-dark);
}

.pain b {
  display: block;
  font-weight: 600;
  color: var(--ivory);
  margin-bottom: var(--s-1);
}

.promise {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-display);
  text-wrap: balance;
}

/* Het accentwoord: cursief, iets lichter, zodat het leunt in plaats van
   schreeuwt. Optisch iets terug in de regel — een cursieve Fraunces begint
   verder naar rechts dan de rechte. */
.promise em {
  font-style: italic;
  font-weight: 500;
  color: var(--copper);
  margin-inline: -0.03em 0.02em;
}

@media (width >= 1024px) {
  .promise {
    text-align: right;
  }
}

/* ==========================================================================
   Akte II — Portfolio, vastgezette horizontale galerij
   ========================================================================== */

.work {
  background: var(--pine);
}

/* De hoogte van de huls bepaalt hoelang de galerij vastgezet blijft.
   Onder 1024px vervalt dit volledig: dan is het een gewone stapel (bewuste
   afwijking, gedocumenteerd in QA v2 — houdt tab-volgorde intact). */
.work__wrap {
  position: relative;
}

.work__intro {
  padding-block: var(--section-y) var(--s-12);
}

.work__rail {
  display: grid;
  gap: var(--s-8);
  padding-inline: var(--gutter);
  padding-bottom: var(--section-y);
}

.work__cta {
  padding-inline: var(--gutter);
  padding-bottom: var(--section-y);
}

@media (width >= 1024px) {
  .work__wrap {
    height: 300vh;
  }

  .work__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-8);
    overflow: hidden;
  }

  .work__rail {
    grid-auto-flow: column;
    /* Smaller dan een half scherm: zo staan er altijd twee panelen naast
       elkaar en blijft de miniatuur op paginaformaat leesbaar in plaats van
       uitvergroot. */
    grid-auto-columns: min(38vw, 540px);
    align-items: start;
    gap: var(--s-8);
    padding-bottom: 0;
    padding-inline: var(--gutter);
    will-change: transform;
  }
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.work-card__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgb(8 21 18 / 0.5), rgb(30 77 66 / 0.4));
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out-expo);
}

.work-card:hover .work-card__frame {
  border-color: var(--copper);
}

/* De drie panelen zijn geen balkjesschema meer maar echte, verkleinde
   webpagina's: echte koppen, echte navigatie, echte prijzen. Alle maten staan
   in cqw (procent van de kaartbreedte), dus de hele pagina schaalt mee met de
   kaart alsof je een schermafbeelding kleiner maakt — 16px tekst op een
   ontwerp van 1200px wordt 1,33cqw.

   De zaken zijn verzonnen en heten ook zo zichtbaar. Bewust géén uitgewiste
   logo's: een weggevaagde naam leest als "echte klant, identiteit afgeschermd"
   en dat zou werk suggereren dat er niet is. Het label "Demovoorbeeld" staat
   erbij, de namen zijn duidelijk fictief, en verder mag het er zo echt
   mogelijk uitzien. */

.mini {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  overflow: hidden;
  background: var(--ivory);
  font-family: var(--font-body);
  line-height: 1.45;
  text-align: left;
}

.mini__chrome {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 1.1cqw 1.6cqw;
  background: color-mix(in srgb, var(--pine) 12%, var(--ivory));
  border-bottom: 1px solid var(--border-hairline);
}

.mini__chrome i {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pine) 26%, transparent);
}

.mini__site {
  position: absolute;
  inset: 3.6cqw 0 0;
  overflow: hidden;
}

.mini__shot {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: linear-gradient(160deg, var(--leaf), var(--pine));
}

.mini__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gedeelde navigatiebalk. */
.mini__nav {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2cqw 3.4cqw;
}

.mini__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1cqw;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mini__links {
  display: flex;
  gap: 2cqw;
  margin-left: auto;
  font-size: 1.25cqw;
  white-space: nowrap;
}

.mini__btn {
  padding: 0.8cqw 1.8cqw;
  border-radius: 99px;
  font-size: 1.2cqw;
  font-weight: 600;
  white-space: nowrap;
}

/* ==== A · Van Dessel Renovaties — donker, foto voorop ==================== */

.mini--trade .mini__site {
  color: var(--ivory);
}

.mini--trade .mini__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    92deg,
    rgb(8 21 18 / 0.9) 0%,
    rgb(8 21 18 / 0.66) 46%,
    rgb(8 21 18 / 0.2) 100%
  );
}

.mini--trade .mini__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.mini--trade .mini__brand {
  color: var(--ivory);
}

.mini--trade .mini__links {
  color: rgb(246 242 234 / 0.72);
}

.mini--trade .mini__btn {
  background: var(--copper);
  color: var(--ink);
}

.mini--trade .mini__hero {
  align-self: center;
  padding: 0 3.4cqw;
  max-width: 62%;
}

.mini--trade .mini__hero h1 {
  font-family: var(--font-display);
  font-size: 3.9cqw;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.4cqw;
  color: var(--ivory);
}

.mini--trade .mini__hero p {
  font-size: 1.35cqw;
  color: rgb(246 242 234 / 0.78);
  margin-bottom: 2.2cqw;
}

.mini--trade .mini__cta {
  display: inline-block;
  padding: 1.1cqw 2.4cqw;
  border-radius: 99px;
  background: var(--copper);
  color: var(--ink);
  font-size: 1.3cqw;
  font-weight: 600;
}

.mini--trade .mini__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4cqw;
  padding: 0 3.4cqw 3cqw;
}

.mini--trade .mini__cards div {
  padding: 1.3cqw;
  border: 1px solid rgb(246 242 234 / 0.2);
  border-radius: 0.5cqw;
  background: rgb(8 21 18 / 0.5);
  font-size: 1.15cqw;
}

.mini--trade .mini__cards b {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4cqw;
}

.mini--trade .mini__cards span {
  color: rgb(246 242 234 / 0.6);
}

/* ==== B · Praktijk Corpus — licht, gecentreerd ========================== */

.mini--care .mini__site {
  background: var(--white);
  color: var(--pine);
}

.mini--care .mini__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.mini--care .mini__brand {
  color: var(--pine);
}

.mini--care .mini__links {
  color: color-mix(in srgb, var(--pine) 62%, transparent);
}

.mini--care .mini__btn {
  background: var(--leaf);
  color: var(--ivory);
}

.mini--care .mini__hero {
  text-align: center;
  padding: 1cqw 8cqw 2cqw;
}

.mini--care .mini__eyebrow {
  font-size: 1cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1cqw;
}

.mini--care .mini__hero h1 {
  font-family: var(--font-display);
  font-size: 3.2cqw;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1cqw;
}

.mini--care .mini__hero p {
  font-size: 1.3cqw;
  color: color-mix(in srgb, var(--pine) 60%, transparent);
  margin-bottom: 1.8cqw;
}

.mini--care .mini__cta {
  display: inline-block;
  padding: 1cqw 2.4cqw;
  border-radius: 99px;
  background: var(--copper);
  color: var(--ink);
  font-size: 1.25cqw;
  font-weight: 600;
}

.mini--care .mini__band {
  position: relative;
  margin: 0 3.4cqw;
  border-radius: 0.6cqw;
  overflow: hidden;
}

.mini--care .mini__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  padding: 2.4cqw 3.4cqw 3cqw;
  text-align: center;
  font-size: 1.15cqw;
}

.mini--care .mini__info b {
  display: block;
  font-size: 1cqw;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 0.5cqw;
}

.mini--care .mini__info span {
  color: color-mix(in srgb, var(--pine) 58%, transparent);
}

/* ==== C · Bistro Marcel — donker, redactioneel, met kaart =============== */

.mini--dine .mini__site {
  background: var(--ink);
  color: var(--ivory);
}

.mini--dine .mini__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1.02fr 1fr;
}

.mini--dine .mini__top {
  position: relative;
  overflow: hidden;
}

.mini--dine .mini__mark {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1cqw;
  background: linear-gradient(180deg, rgb(8 21 18 / 0.48), rgb(8 21 18 / 0.76));
  text-align: center;
}

.mini--dine .mini__mark h1 {
  font-family: var(--font-display);
  font-size: 3.4cqw;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mini--dine .mini__rule {
  width: 6cqw;
  height: 1px;
  background: var(--copper);
}

.mini--dine .mini__mark p {
  font-size: 1.2cqw;
  color: rgb(246 242 234 / 0.68);
  letter-spacing: 0.05em;
}

.mini--dine .mini__menu {
  display: grid;
  align-content: center;
  gap: 1.5cqw;
  padding: 2.4cqw 5cqw;
}

.mini--dine .mini__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1.2cqw;
  font-size: 1.3cqw;
}

.mini--dine .mini__row em {
  font-style: normal;
  white-space: nowrap;
}

.mini--dine .mini__dots {
  border-bottom: 1px dotted rgb(246 242 234 / 0.32);
  transform: translateY(-0.3cqw);
}

.mini--dine .mini__row i {
  font-style: normal;
  color: var(--copper);
  white-space: nowrap;
}

.mini--dine .mini__reserve {
  justify-self: center;
  margin-top: 0.8cqw;
  padding: 0.9cqw 2.4cqw;
  border: 1px solid var(--copper);
  border-radius: 99px;
  color: var(--copper);
  font-size: 1.2cqw;
  font-weight: 600;
}

/* Een plusteken dat pas bij nadering verschijnt: het paneel voelt daardoor
   als iets dat je kunt openen, nog voor je het aanwijst. */
.work-card__frame::after {
  content: "+";
  position: absolute;
  inset: auto var(--s-4) var(--s-4) auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 50%;
  background: rgb(8 21 18 / 0.6);
  font-size: 1rem;
  line-height: 1;
  color: var(--ivory);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-overshoot),
    background var(--dur-fast) var(--ease-out-expo);
}

.work-card:hover .work-card__frame::after {
  opacity: 1;
  transform: scale(1);
}

/* Linksonder, niet linksboven: daar zit in elk van de drie ontwerpen het
   woordmerk van de demozaak, en het label dekte dat af. Rechtsonder zit het
   plusteken. */
.work-card__label {
  position: absolute;
  inset: auto auto var(--s-4) var(--s-4);
  z-index: 2;
  padding: 0.35rem var(--s-3);
  border: 1px solid var(--hairline-dark-strong);
  border-radius: var(--radius-pill);
  background: rgb(8 21 18 / 0.7);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ivory-faint);
}

.work-card__badge {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--copper);
}

.work-card__caption {
  font-size: var(--text-base);
  color: var(--ivory-soft);
  max-width: 34ch;
}

.work__meter {
  display: none;
  height: 1px;
  margin-inline: var(--gutter);
  background: var(--hairline-dark);
}

@media (width >= 1024px) {
  .work__meter {
    display: block;
  }
}

.work__meter span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
}

/* ==========================================================================
   Akte III — Pakketten
   ========================================================================== */

.plans {
  display: grid;
  gap: var(--s-6);
}

@media (width >= 900px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: var(--s-8);
  }

  /* De Business-kaart breekt de rij van drie: hij zakt door de rasterlijn
     heen in plaats van er netjes op te staan. */
  .plan-card--featured {
    transform: translateY(calc(var(--s-8) * -1));
  }
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8);
  background: var(--white);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  color: var(--pine);
  transition: border-color var(--dur-base) var(--ease-out-expo);
}

.plan-card:hover {
  border-color: var(--copper);
}

.plan-card--featured {
  border-color: var(--copper);
}

.plan-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.plan-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
}

.plan-card__badge {
  padding: 0.3rem var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--copper);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.plan-card__for {
  font-size: var(--text-sm);
  color: var(--graygreen);
}

.plan-card__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}

.plan-card__features {
  display: grid;
  gap: var(--s-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.plan-card__features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
}

.plan-card__features li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--copper);
}

.plan-card__features strong {
  font-weight: 600;
}

.plan-card__split {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--graygreen);
}

/* ==========================================================================
   5 — Onderhoudsstrook
   ========================================================================== */

.care {
  padding-block: var(--s-16);
  background: var(--pine);
  text-align: center;
}

.care p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--ivory);
  max-width: 30ch;
  margin-inline: auto;
}

/* ==========================================================================
   6 — Werkwijze
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--s-16);
}

.step {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border-hairline);
}

@media (width >= 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-12);
  }
}

/* De cijfers lopen op editoriale schaal buiten hun kolom, en drijven trager
   mee dan de tekst — dat is de diepte. */
.step__numeral {
  position: absolute;
  top: calc(var(--s-8) * -1);
  left: -0.08em;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1;
  color: rgb(15 46 40 / 0.08);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.step__name {
  position: relative;
  font-size: var(--text-xl);
}

.step__text {
  position: relative;
  font-size: var(--text-base);
  color: var(--graygreen);
  max-width: 34ch;
}

.step__text strong {
  color: var(--pine);
  font-weight: 600;
}

/* De verbindingslijn tekent zichzelf terwijl de sectie passeert. */
.steps__line {
  display: none;
}

@media (width >= 900px) {
  .steps__line {
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: var(--s-12);
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* ==========================================================================
   Akte IV — Het Atelier
   ========================================================================== */

/* Asymmetrisch, maar zonder tegenhanger: de tekst houdt de linkerhelft en de
   rechterhelft blijft leeg, zodat de 3D-ruimte daar volledig open ligt. Dat
   lege vlak is hier de inhoud — het atelier zelf. */
.atelier__grid {
  display: grid;
  gap: var(--s-12);
  align-items: center;
}

@media (width >= 1024px) {
  .atelier__grid {
    grid-template-columns: minmax(0, 46%);
  }
}

.atelier__body {
  display: grid;
  gap: var(--s-6);
  max-width: var(--measure-narrow);
}

.atelier__body p {
  color: var(--ivory-soft);
}

.atelier__lead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--ivory);
}

.atelier__sign {
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--muted-on-dark);
}

/* ==========================================================================
   8 — Vertrouwensstrook
   ========================================================================== */

.trust {
  display: grid;
  gap: var(--s-8);
}

@media (width >= 768px) {
  .trust {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-12);
  }
}

@media (width >= 1024px) {
  .trust {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust__item {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border-hairline);
}

.trust__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--copper);
}

.trust__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--graygreen);
}

/* ==========================================================================
   Akte V — Slot-CTA met formulier
   ========================================================================== */

.close__grid {
  display: grid;
  gap: var(--s-12);
  align-items: start;
}

@media (width >= 1024px) {
  .close__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: var(--s-16);
  }
}

.close__title {
  font-size: var(--text-3xl);
  max-width: 14ch;
}

.close__intro {
  margin-top: var(--s-6);
  max-width: var(--measure-narrow);
}

.close__list {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-12);
}

.close__list li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--text-sm);
}

.close__list b {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-on-dark);
}