/* ============================================================
   SKIN: CONTACT — "HET GEBAAR"
   Sfeer: één groot roze vlak, telefoonnummer enorm, verder niets.
   Geen display-font: de mono wordt hier zelf het ontwerp.
   ============================================================ */

body[data-skin="gebaar"] {
  --pg-bg:   #ff4f8b;
  --pg-fg:   #16161a;
  --pg-mut:  rgba(22,22,26,.62);
  --pg-lijn: rgba(22,22,26,.16);
  --display: var(--mono);
  background: var(--pg-bg);
  color: var(--pg-fg);
}

/* Op de roze balk moet het logo omkeren om leesbaar te blijven.
   Let op: alleen binnen .nav — de footer is donker en heeft juist
   het gewone lichte logo nodig. */
body[data-skin="gebaar"] .nav .lw-badge { background: var(--ink); }
body[data-skin="gebaar"] .nav .lw-woord { color: var(--ink); }
body[data-skin="gebaar"] .nav .lw-woord .h { color: #fff; }
body[data-skin="gebaar"] .nav .lw-woord .s { color: var(--geel); }
body[data-skin="gebaar"] .nav .lw-payoff { color: rgba(22,22,26,.55); }
body[data-skin="gebaar"] .nav .lw-payoff i { color: #fff; }
body[data-skin="gebaar"] .label::before { background: var(--ink); }
body[data-skin="gebaar"] .label.geel::before { background: var(--geel); }
body[data-skin="gebaar"] .nav-links a:hover { color: var(--ink); }
body[data-skin="gebaar"] .nav-links a::after { background: var(--ink); }
body[data-skin="gebaar"] .nav-bel { background: var(--ink); color: #fff; }

/* ---------- HET GEBAAR ---------- */
.gebaar {
  padding: calc(var(--nav-h) + clamp(46px, 8vw, 100px)) var(--pad-x) clamp(52px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
/* groot </> als watermerk */
.gebaar::after {
  content: "</>";
  position: absolute;
  right: -2%;
  bottom: -14%;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(180px, 34vw, 460px);
  line-height: 1;
  color: rgba(255,255,255,.13);
  pointer-events: none;
  user-select: none;
}
.gebaar > .wrap { position: relative; z-index: 1; }

/* Ritme van contact: de kop staat rechts, het telefoonnummer daaronder
   loopt juist over de volle breedte. Weer anders dan alle andere pagina's.
   In de lege ruimte links hangt een foto, scheef, als een polaroid. */
.gebaar > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  position: relative;
}
.gebaar .gebaar-sub { margin-left: auto; }
.gebaar .gebaar-knoppen { justify-content: flex-end; }

.gebaar-foto {
  position: absolute;
  left: 0;
  top: 4px;
  width: clamp(180px, 22vw, 268px);
  border-radius: var(--ronding);
  overflow: hidden;
  background: #fff;
  padding: 10px 10px 46px;
  box-shadow: var(--schaduw-3);
  transform: rotate(-3.5deg);
  transition: transform var(--traag);
}
.gebaar-foto:hover { transform: rotate(0deg) scale(1.03); }
.gebaar-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--ronding);
  display: block;
}

.gebaar h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: .92;
  letter-spacing: -.045em;
  margin: 20px 0 clamp(28px, 4vw, 46px);
}

/* het telefoonnummer is hier het belangrijkste element van de site */
.mega-nr {
  display: block;
  width: 100%;
  /* ruimte vrijhouden voor de polaroid die links zweeft, anders
     verdwijnt de eerste 06 achter de foto */
  padding-left: calc(clamp(180px, 22vw, 268px) + 40px);
  text-align: right;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.9rem, 8.4vw, 6rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  padding: clamp(20px, 3vw, 34px) 0;
  border-top: 3px solid rgba(22,22,26,.2);
  border-bottom: 3px solid rgba(22,22,26,.2);
  transition: color var(--snel), letter-spacing var(--snel), border-color var(--snel);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.mega-nr::-webkit-scrollbar { display: none; }
.mega-nr:hover {
  color: var(--ink);
  letter-spacing: .01em;
  border-color: var(--ink);
}

.gebaar-sub {
  font-size: var(--t-lead);
  line-height: 1.85;
  color: rgba(22,22,26,.78);
  max-width: 52ch;
  margin: clamp(22px, 2.6vw, 30px) 0 0;
}
.gebaar-sub:last-of-type { margin-bottom: 30px; }

/* De kernzin: waarom je iemand kiest. Groter, in ink, met een dikke
   streep ervoor, zodat dit de zin is die je leest voordat je belt. */
.gebaar-kern {
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
  max-width: 46ch;
  /* de pagina lijnt rechts uit, dus de streep hoort aan die kant */
  padding-right: clamp(16px, 1.8vw, 24px);
  border-right: 5px solid var(--ink);
}

.gebaar-knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-wit { background: #fff; color: var(--ink); }
.btn-wit:hover { filter: brightness(.95); }

/* ---------- PRAKTISCH ---------- */

/* ---------- FORMULIER ---------- */
.form-sectie {
  padding: clamp(52px, 8vw, 100px) var(--pad-x) clamp(64px, 9vw, 120px);
  background: #f6f6f7;
  color: var(--ink);
}
.form-in {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.form-sectie .label { color: var(--label); }
.form-sectie .label::before { background: var(--roze); }
.form-sectie .label.geel::before { background: var(--geel-diep); }

.form-txt h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--t-l);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 18px 0 16px;
}
.form-txt > p {
  font-size: var(--t-body);
  line-height: 1.9;
  color: var(--label);
  max-width: 44ch;
  margin-bottom: 32px;
}
/* ---------- HET KOPJE KOFFIE ----------
   Eigen blok met dezelfde truc als de opening van de homepage: de
   sectie is hoger dan het scherm en daarbinnen blijft één schermvulling
   plakken. Terwijl je die hoogte doorscrollt schenken de pixels het
   kopje vol en vormt de stoom het logo. Daarna loopt de pagina door. */
.koffie-sectie {
  position: relative;
  height: 190vh;
  background: var(--pg-bg);
}
.koffie-plak {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--nav-h) var(--pad-x) 0;
}

.koffie {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.koffie-doek {
  display: block;
  width: 100%;
  height: min(60svh, 460px);
}
.koffie figcaption {
  font-family: var(--mono);
  font-size: var(--t-klein);
  line-height: 1.75;
  color: var(--ink);
  max-width: 30ch;
  margin-top: 14px;
}
.koffie figcaption strong {
  display: block;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}
.koffie figcaption span { opacity: .66; }

@media (max-width: 780px) {
  .koffie-sectie { height: 165vh; }
}

/* wie beweging uit heeft, ziet gewoon een stilstaand kopje */
@media (prefers-reduced-motion: reduce) {
  .koffie-sectie { height: auto; }
  .koffie-plak { position: static; height: auto; padding: clamp(40px, 6vw, 80px) var(--pad-x); }
}

.gegevens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--lijn);
}
.geg { display: flex; flex-direction: column; gap: 5px; }
.geg-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.geg a, .geg span:not(.geg-label) {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.geg a { border-bottom: 1px solid var(--roze); align-self: flex-start; }
.geg a:hover { color: var(--roze); }

/* het formulier zelf */
.form {
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  padding: clamp(26px, 3.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--schaduw-3);
  position: relative;
  overflow: hidden;
}
.form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--roze) 64%, var(--geel) 64%);
}

/* spamval — moet onzichtbaar zijn maar niet display:none
   (sommige bots slaan verborgen velden dan over) */
.honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.veld { display: flex; flex-direction: column; gap: 7px; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.veld label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--label);
}
.ster { color: var(--roze); }

.veld input,
.veld select,
.veld textarea {
  font-family: var(--mono);
  font-size: var(--t-body);
  color: var(--ink);
  background: #fbfbfc;
  border: 1.5px solid var(--lijn);
  border-radius: var(--ronding);
  padding: 13px 15px;
  width: 100%;
  transition: border-color var(--snel), background var(--snel);
}
.veld textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.veld input::placeholder,
.veld textarea::placeholder { color: #b4b4bd; }

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  outline: none;
  border-color: var(--roze);
  background: #fff;
}
.veld input:focus-visible,
.veld select:focus-visible,
.veld textarea:focus-visible {
  outline: 3px solid var(--geel);
  outline-offset: 2px;
}

.form-knop { margin-top: 6px; align-self: flex-start; }
.form-fijn {
  font-size: var(--t-label);
  line-height: 1.7;
  color: var(--muted);
}

/* melding na het versturen */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .form-in   { grid-template-columns: 1fr; }
  /* de foto zweeft niet meer maar staat gewoon bovenaan mee */
  .gebaar-foto {
    position: static;
    width: 168px;
    align-self: flex-start;
    margin-bottom: 26px;
  }
  .mega-nr { padding-left: 0; text-align: center; }
}

@media (max-width: 560px) {
  .veld-rij { grid-template-columns: 1fr; }
  .gegevens { grid-template-columns: 1fr; }
  .gebaar-knoppen .btn { flex: 1; }
  .form-knop { width: 100%; }
  /* het nummer mag op mobiel niet buiten beeld vallen */
  .mega-nr { font-size: clamp(1.5rem, 9vw, 2.4rem); }
}

/* ============================================================
   GRAFISCH ACCENT: MIX & MATCH
   Contact blijft knalroze en recht in je gezicht. Daaroverheen
   komt van elke andere pagina één ding terug: het glas van werk,
   de schetslijn van over mij, het plakband van het lab.
   ============================================================ */

/* SCHETS — golvende streep onder het laatste woord van de kop */
.gebaar h1 {
  position: relative;
  display: inline-block;
}
.gebaar h1::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.02em;
  width: 62%;
  height: .16em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 62 3, 98 19, 152 10 S 252 2, 297 12' fill='none' stroke='%2316161a' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* PLAKBAND — de polaroid hangt vastgeplakt, zoals in het lab */
.gebaar-foto::before,
.gebaar-foto::after {
  content: "";
  position: absolute;
  width: 66px;
  height: 20px;
  background: rgba(255, 210, 63, .75);
  z-index: 3;
}
.gebaar-foto::before { top: -9px;    left: -16px;  transform: rotate(-26deg); }
.gebaar-foto::after  { bottom: -9px; right: -16px; transform: rotate(-26deg); }


/* GESCHEURDE RAND — het roze vlak loopt rafelig over in het donker */
.gebaar {
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 14px),
    88% 100%, 74% calc(100% - 11px), 57% 100%,
    41% calc(100% - 12px), 24% 100%, 9% calc(100% - 9px), 0 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .gebaar-foto::before, .gebaar-foto::after { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   DE VRAGEN — SWISS
   Geen kaartjes, maar één strak raster op het roze vlak: harde
   lijnen, een vaste kolom voor het nummer, de vraag groot ernaast
   en een plusteken rechts. Wijs je een rij aan, dan keert hij om
   naar ink met roze letters. Klap je hem open, dan blijft hij om.
   Het zijn <details>-elementen, dus toetsenbord en zoekmachines
   snappen het ook zonder JavaScript.
   ══════════════════════════════════════════════════════════════ */
.vragen {
  padding: clamp(56px, 8vw, 110px) var(--pad-x) clamp(40px, 6vw, 80px);
  background: var(--pg-bg);
  color: var(--ink);
}

.vragen-kop {
  display: grid;
  grid-template-columns: var(--v-nr-kolom, clamp(64px, 8vw, 116px)) 1fr;
  gap: 0 clamp(16px, 2.6vw, 40px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.vk-label {
  grid-column: 1;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: start;
  opacity: .66;
}
.vragen-kop h2 {
  grid-column: 2;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  line-height: .86;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.vragen-lijst { border-top: 3px solid var(--ink); }

.vraag {
  border-bottom: 3px solid var(--ink);
  transition: background var(--snel), color var(--snel);
}

.vraag summary {
  display: grid;
  grid-template-columns: var(--v-nr-kolom, clamp(64px, 8vw, 116px)) 1fr auto;
  gap: 0 clamp(16px, 2.6vw, 40px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px) clamp(14px, 1.8vw, 22px) clamp(18px, 2.4vw, 28px) 0;
  cursor: pointer;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

.v-nr {
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  opacity: .38;
  padding-left: clamp(10px, 1.4vw, 18px);
}
.v-tekst {
  font-weight: 700;
  font-size: clamp(1.05rem, 2.5vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.03em;
}

/* het plusteken: twee streepjes, waarvan er één wegdraait bij openen */
.v-teken {
  position: relative;
  width: clamp(20px, 2.4vw, 30px);
  height: clamp(20px, 2.4vw, 30px);
  flex-shrink: 0;
}
.v-teken::before,
.v-teken::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 3px;
  background: currentColor;
  transition: transform var(--snel);
}
.v-teken::after { transform: rotate(90deg); }
.vraag[open] .v-teken::after { transform: rotate(0deg); }

/* omkeren bij aanwijzen én zolang hij openstaat */
.vraag:hover,
.vraag[open] {
  background: var(--ink);
  color: var(--pg-bg);
}

.v-antwoord {
  display: grid;
  grid-template-columns: var(--v-nr-kolom, clamp(64px, 8vw, 116px)) 1fr;
  gap: 0 clamp(16px, 2.6vw, 40px);
  padding: 0 clamp(14px, 1.8vw, 22px) clamp(24px, 3vw, 34px) 0;
}
.v-antwoord p {
  grid-column: 2;
  font-size: var(--t-body);
  line-height: 1.9;
  max-width: 62ch;
  opacity: .88;
}

@media (max-width: 620px) {
  .vragen-kop,
  .vraag summary,
  .v-antwoord { grid-template-columns: 44px 1fr auto; }
  .vk-label { writing-mode: horizontal-tb; transform: none; grid-column: 1 / -1; margin-bottom: 12px; }
  .vragen-kop h2 { grid-column: 1 / -1; }
  .v-antwoord p { grid-column: 2 / -1; }
}

/* ---------- DE MELDING NA HET VERSTUREN ----------
   Swiss: geen zacht gekleurd bakje maar een hard blok met een label
   erboven, een dikke lijn eronder en de tekst in kolommen. Ink met
   roze voor goed nieuws, roze met ink als er iets misging. */
.melding {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 44px);
  padding: clamp(30px, 4vw, 46px);
  margin: 0 0 34px;
  border-radius: var(--ronding);
  box-shadow: var(--schaduw-3);
  overflow: hidden;
}

/* de verspringende lijn, zoals overal op de site */
.melding::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--lijn-dik) solid var(--geel);
  border-radius: var(--ronding);
  transform: translate(var(--vspr), var(--vspr));
}

/* een groot </> als watermerk, half over de rand */
.melding::before {
  content: "</>";
  position: absolute;
  right: -10px;
  bottom: -34px;
  font-size: clamp(5rem, 12vw, 9rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: 1;
  color: currentColor;
  opacity: .1;
  pointer-events: none;
}
.melding-merk {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-top: 6px;
  white-space: nowrap;
  border-top: 3px solid currentColor;
}
.melding strong {
  grid-column: 2;
  font-size: clamp(1.3rem, 3.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.melding p {
  grid-column: 2;
  font-size: var(--t-body);
  line-height: 1.8;
  max-width: 52ch;
  opacity: .82;
}

.melding-goed { background: var(--ink); color: var(--geel); }
.melding-goed::after { border-color: var(--roze); }
.melding-goed p { color: #fff; }
.melding-fout { background: var(--ink); color: var(--roze); }
.melding-fout p { color: #fff; }

@media (max-width: 620px) {
  .melding { grid-template-columns: 1fr; }
  .melding-merk { grid-row: auto; grid-column: 1; justify-self: start; }
  .melding strong, .melding p { grid-column: 1; }
}

/* Het mobiele menu ligt hier op het roze vlak. De roze // van de
   huidige pagina en de roze belknop zouden daarin wegvallen, dus
   die worden op deze pagina zwart. */
@media (max-width: 780px) {
  body[data-skin="gebaar"] .nav-links a[aria-current="page"]::before { color: var(--ink); }
  /* de drie strepen zijn roze, en dat valt weg op dit roze vlak */
  body[data-skin="gebaar"] .menu-knop span { background: var(--ink); }
  body[data-skin="gebaar"] .nav-links .menu-bel { background: var(--ink); color: #fff; }
}