/* =============================================================
   ETB Xact - etb-xact.nl
   Huisstijl: navy #131225 / geel #FABB55 / Oswald (koppen)
   Vormentaal: scherpe hoeken, 1 afgeschuinde hoek op knoppen
   en beeldvlakken (verwijst naar de hoekige bliksem in het logo)
   ============================================================= */

:root {
  --ink: #131225;
  --ink-2: #1c1a36;
  --ink-3: #24224a;
  --geel: #fabb55;
  --geel-donker: #f2a935;
  --wit: #ffffff;
  --bg-licht: #f6f6f9;
  --bg-wit: #fdfdfe;
  --tekst: #44435c;
  --tekst-licht: #b9b7cd;
  --lijn: #e3e2ec;
  --lijn-donker: rgba(255, 255, 255, 0.12);

  --font-kop: "Oswald", "Arial Narrow", sans-serif;
  --font-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --cut: 16px; /* afgeschuinde hoek */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Basis ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bg-wit);
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2"),
    url("../fonts/Oswald-Variable.ttf") format("truetype");
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2.3rem, 4.3vw, 3.4rem);
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}

h3 {
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--ink);
}

.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

section {
  scroll-margin-top: 88px;
}

.sectie {
  padding-block: clamp(4rem, 9vw, 7rem);
}

.sectie-kop {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.sectie-kop p {
  font-size: 1.125rem;
  margin-bottom: 0;
}

/* bredere kop, zodat de introzin op één regel past */
.sectie-kop--breed {
  max-width: 62rem;
}

:focus-visible {
  outline: 3px solid var(--geel);
  outline-offset: 3px;
}

::selection {
  background: var(--geel);
  color: var(--ink);
}

/* ---------- Iconen (Phosphor, via mask) ---------- */

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.icon--calculator      { --icon: url("../img/icons/calculator.svg"); }
.icon--compass-tool    { --icon: url("../img/icons/compass-tool.svg"); }
.icon--pencil-ruler    { --icon: url("../img/icons/pencil-ruler.svg"); }
.icon--clipboard-text  { --icon: url("../img/icons/clipboard-text.svg"); }
.icon--hard-hat        { --icon: url("../img/icons/hard-hat.svg"); }
.icon--lightning       { --icon: url("../img/icons/lightning.svg"); }
.icon--plugs-connected { --icon: url("../img/icons/plugs-connected.svg"); }
.icon--lightbulb       { --icon: url("../img/icons/lightbulb.svg"); }
.icon--book-open-text  { --icon: url("../img/icons/book-open-text.svg"); }
.icon--envelope        { --icon: url("../img/icons/envelope-simple.svg"); }
.icon--phone           { --icon: url("../img/icons/phone.svg"); }
.icon--map-pin         { --icon: url("../img/icons/map-pin.svg"); }
.icon--linkedin        { --icon: url("../img/icons/linkedin-logo.svg"); }
.icon--arrow-right     { --icon: url("../img/icons/arrow-right.svg"); }
.icon--arrow-up-right  { --icon: url("../img/icons/arrow-up-right.svg"); }
.icon--paper-plane     { --icon: url("../img/icons/paper-plane-right.svg"); }
.icon--check-circle    { --icon: url("../img/icons/check-circle.svg"); }
.icon--warning-circle  { --icon: url("../img/icons/warning-circle.svg"); }
.icon--list            { --icon: url("../img/icons/list.svg"); }
.icon--x               { --icon: url("../img/icons/x.svg"); }
.icon--buildings       { --icon: url("../img/icons/buildings.svg"); }
.icon--image           { --icon: url("../img/icons/image.svg"); }
.icon--users-three     { --icon: url("../img/icons/users-three.svg"); }
.icon--caret-down      { --icon: url("../img/icons/caret-down.svg"); }

/* ---------- Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-kop);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    0 100%
  );
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    transform 0.15s var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.btn--geel {
  background: var(--geel);
  color: var(--ink);
}

.btn--geel:hover {
  background: var(--geel-donker);
}

.btn--ghost {
  background: transparent;
  color: var(--wit);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  clip-path: none;
}

.btn--ghost:hover {
  box-shadow: inset 0 0 0 2px var(--geel);
  color: var(--geel);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  transition: box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 28px rgba(19, 18, 37, 0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand img {
  height: 38px;
  width: auto;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-kop);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wit);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.site-nav a:hover {
  color: var(--geel);
  border-color: var(--geel);
}

.header-cta {
  padding: 0.7rem 1.4rem;
  font-size: 0.85rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--wit);
  padding: 0.5rem;
  margin-left: auto;
  cursor: pointer;
}

.nav-toggle .icon {
  width: 1.8rem;
  height: 1.8rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--tekst-licht);
  overflow: hidden;
}

.hero::before {
  /* diagonale gele lijn, verwijzing naar het briefpapier */
  content: "";
  position: absolute;
  left: 40%;
  bottom: -18%;
  width: 35%;
  height: 136%;
  border-right: 3px solid rgba(250, 187, 85, 0.28);
  transform: skewX(-24deg);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.hero h1 {
  color: var(--wit);
  margin-bottom: 0.5em;
}

.hero h1 em {
  font-style: normal;
  color: var(--geel);
}

.hero-tekst p {
  font-size: 1.15rem;
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  justify-self: end;
  width: 100%;
  display: grid;
  place-items: center;
  background-color: var(--ink-2);
  background-image: linear-gradient(rgba(250, 187, 85, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 187, 85, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  clip-path: polygon(
    0 0,
    calc(100% - 42px) 0,
    100% 42px,
    100% 100%,
    0 100%
  );
}

.hero-visual img {
  width: 62%;
  height: auto;
}

/* ---------- Intro / feiten ---------- */

.intro .container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* geen max-width: op brede schermen past de kop op één regel,
   op smallere breekt hij vanzelf netjes af */
.intro h2 {
  text-wrap: balance;
}

.intro p {
  max-width: 60ch;
}

.feiten {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0 0 0 1.75rem;
  border-left: 3px solid var(--geel);
  list-style: none;
}

.feit strong {
  display: block;
  font-family: var(--font-kop);
  font-size: clamp(1.7rem, 1.6vw + 0.55rem, 2.15rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
  text-wrap: balance;
}

.feit span {
  font-size: 0.98rem;
}

/* ---------- Diensten (bento) ---------- */

.diensten {
  background: var(--bg-licht);
}

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.dienst {
  background: var(--wit);
  border: 1px solid var(--lijn);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.dienst p {
  margin: 0;
  font-size: 0.99rem;
}

.dienst p + p {
  margin-top: 0.6em;
}

.dienst-icoon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  background: rgba(250, 187, 85, 0.16);
  color: var(--ink);
}

.dienst-icoon .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.dienst--groot {
  grid-column: span 3;
}

.dienst--klein {
  grid-column: span 2;
}

.dienst--breed {
  grid-column: span 6;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

.dienst--breed .dienst-tekst {
  max-width: 62rem;
}

.dienst--breed h3 {
  margin-bottom: 0.35em;
}

/* donkere accentcel */
.dienst--donker {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--tekst-licht);
  background-image: linear-gradient(rgba(250, 187, 85, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 187, 85, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
}

.dienst--donker h3 {
  color: var(--wit);
}

.dienst--donker .dienst-icoon {
  background: var(--geel);
  color: var(--ink);
}

/* gele accentcel */
.dienst--accent {
  background: #fdf3e2;
  border-color: #f3ddb4;
}

.bibliotheek {
  margin-top: auto;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--lijn-donker);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.bibliotheek .icon {
  color: var(--geel);
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.15rem;
}

.bibliotheek strong {
  display: block;
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--wit);
  margin-bottom: 0.2rem;
}

.bibliotheek p {
  font-size: 0.93rem;
  margin: 0;
}

/* ---------- Werkwijze ---------- */

.werkwijze .container {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* geen max-width: de kop breekt vanzelf naar twee regels */
.werkwijze h2 {
  text-wrap: balance;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.chips li {
  font-family: var(--font-kop);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid #cfceda;
  padding: 0.45rem 0.9rem;
}

.chips-label {
  margin-top: 2rem;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Beeld-placeholders ---------- */

.media-slot {
  position: relative;
  display: grid;
  place-items: center;
  background-color: var(--ink-2);
  background-image: linear-gradient(rgba(250, 187, 85, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 187, 85, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  clip-path: polygon(
    0 0,
    calc(100% - 28px) 0,
    100% 28px,
    100% 100%,
    0 100%
  );
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.media-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/beeldmerk-wit.png") no-repeat center / 45%;
  opacity: 0.08;
}

.media-slot--portret {
  aspect-ratio: 3 / 4;
}

.media-slot--breed {
  aspect-ratio: 21 / 9;
}

.media-slot--project {
  aspect-ratio: 16 / 10;
}

/* zodra een echte foto in het slot staat, vult die het hele vlak */
.media-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-kop);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.media-tag .icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- Gele band ---------- */

.band {
  background: var(--geel);
  color: var(--ink);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.band .container {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.band h2 {
  margin: 0;
}

/* beide zinsdelen blijven ieder op één regel */
.band h2 span {
  display: inline-block;
  white-space: nowrap;
}

.band p {
  margin: 0;
  font-size: 1.1rem;
  color: #392c10;
}

.band p + p {
  margin-top: 1em;
}

/* ---------- Team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.team-card {
  display: flex;
  flex-direction: column;
}

.team-card h3 {
  margin: 1.4rem 0 0.15rem;
}

.team-rol {
  font-family: var(--font-kop);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a6420;
  margin-bottom: 0.9rem;
}

.team-bio p {
  font-size: 0.98rem;
  margin: 0 0 1em;
}

.team-bio p:last-child {
  margin-bottom: 0;
}

.bio-meer summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-kop);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.15rem 0;
  margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--geel);
  width: max-content;
}

.bio-meer summary::-webkit-details-marker {
  display: none;
}

.bio-meer summary .icon {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.2s var(--ease);
}

.bio-meer[open] summary .icon {
  transform: rotate(180deg);
}

.bio-label--dicht {
  display: none;
}

.bio-meer[open] .bio-label--open {
  display: none;
}

.bio-meer[open] .bio-label--dicht {
  display: inline;
}

@media (prefers-reduced-motion: no-preference) {
  .bio-meer[open] p {
    animation: bio-in 0.4s var(--ease);
  }
}

@keyframes bio-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (min-width: 1024px) {
  .team-card:nth-child(2) {
    margin-top: 2.5rem;
  }
}

/* Tijdelijke variant zolang de portretfoto's ontbreken: geen versprongen
   middenkaart en geen ruimte boven de naam. Verwijder de class
   "team-grid--zonder-fotos" in de HTML zodra de foto's terugkomen. */
.team-grid--zonder-fotos .team-card h3 {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .team-grid--zonder-fotos .team-card:nth-child(2) {
    margin-top: 0;
  }
}

/* ---------- Werken bij ---------- */

.werken-bij {
  background: var(--bg-licht);
}

/* De opmaak van het weggehaalde contactblok (.routes / .route) staat
   bewaard in _bewaard/werken-bij-contactblok.html. */

/* intro en vervolgtekst vormen een doorlopend verhaal, dus dichter op elkaar */
.werken-bij .sectie-kop {
  margin-bottom: 1.4rem;
}

.werken-bij-tekst {
  max-width: 62ch;
  margin-bottom: clamp(2.75rem, 6vw, 4rem);
}

.werken-bij-tekst p:last-child {
  margin-bottom: 0;
}

.werken-bij-tekst a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--geel);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.werken-bij-tekst a:hover {
  background: rgba(250, 187, 85, 0.28);
}

.werken-bij-slot {
  font-weight: 600;
  color: var(--ink);
}

.leerbedrijf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--lijn);
}

/* het erkenningsbordje van SBB heeft een eigen achtergrond en staat
   daarom los, met alleen een dunne lijn om de rand te definieren */
.sbb-bordje {
  width: 190px;
  border: 1px solid var(--lijn);
}

.sbb-bordje img {
  width: 100%;
  height: auto;
  display: block;
}

.leerbedrijf-tekst {
  max-width: 62ch;
}

.leerbedrijf-tekst h3 {
  margin-bottom: 0.4rem;
}

.leerbedrijf-tekst p {
  margin: 0;
  font-size: 0.99rem;
}

.stageplekken {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.stageplekken a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-kop);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid var(--geel);
  transition: color 0.2s var(--ease);
}

.stageplekken a:hover {
  color: #8a6420;
}

.stageplekken .icon {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.25s var(--ease);
}

.stageplekken a:hover .icon {
  transform: translate(2px, -2px);
}

/* ---------- Projecten ---------- */

.projecten {
  background: var(--bg-licht);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.project-card--breed {
  grid-column: span 2;
}

.project-card h3 {
  margin: 1.3rem 0 0.4rem;
}

.project-card p {
  margin: 0;
  font-size: 0.98rem;
  max-width: 56ch;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.project-meta li {
  font-family: var(--font-kop);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--wit);
  border: 1px solid var(--lijn);
  color: var(--ink);
  padding: 0.35rem 0.75rem;
}

/* ---------- Contact ---------- */

.contact {
  background: var(--ink);
  color: var(--tekst-licht);
}

.contact .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact h2 {
  color: var(--wit);
}

.contact-intro {
  max-width: 46ch;
}

.contact-lijst {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.contact-lijst a {
  color: var(--wit);
  text-decoration: none;
}

.contact-lijst a:hover {
  color: var(--geel);
}

.contact-lijst li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.contact-lijst .icon {
  color: var(--geel);
  margin-top: 0.15rem;
}

.contact-lijst strong {
  display: block;
  font-family: var(--font-kop);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* formulier */

.contact-form {
  background: var(--ink-2);
  border: 1px solid var(--lijn-donker);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  clip-path: polygon(
    0 0,
    calc(100% - 28px) 0,
    100% 28px,
    100% 100%,
    0 100%
  );
}

.form-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-veld {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.form-veld label {
  font-family: var(--font-kop);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wit);
}

.form-veld label span {
  color: var(--geel);
}

.form-veld input,
.form-veld textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--wit);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  padding: 0.8rem 1rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.form-veld input::placeholder,
.form-veld textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.form-veld input:focus,
.form-veld textarea:focus {
  outline: none;
  border-color: var(--geel);
  background: rgba(255, 255, 255, 0.08);
}

.form-veld textarea {
  resize: vertical;
  min-height: 9rem;
}

/* honeypot: visueel en voor hulptechnologie verborgen */
.form-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
  font-size: 0.98rem;
}

.form-status.is-zichtbaar {
  display: flex;
}

.form-status--ok {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: #b5edc8;
}

.form-status--fout {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #f6c6c6;
}

.form-status .icon {
  margin-top: 0.1rem;
}

.contact-form .btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ---------- Footer ---------- */

.site-footer {
  background: #0d0c1b;
  color: var(--tekst-licht);
  padding-block: 3rem 2rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.footer-inner img {
  height: 60px;
  width: auto;
}

.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a {
  color: var(--tekst-licht);
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-nav a:hover {
  color: var(--geel);
}

.footer-meta {
  margin-left: auto;
  text-align: right;
  font-size: 0.88rem;
}

.footer-meta p {
  margin: 0;
}

.footer-meta a {
  color: var(--tekst-licht);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-meta a:hover {
  color: var(--geel);
}

/* credit hoort bij de metaregels: gedempt zodat hij niet met de
   bedrijfsgegevens concurreert, maar wel boven de WCAG AA-drempel
   (6,3:1 voor de tekst, 7,7:1 voor de link) */
.footer-meta .footer-credit {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-meta .footer-credit a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}

.footer-meta .footer-credit a:hover {
  color: var(--geel);
}

/* ---------- Scroll-reveal ---------- */

html.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}

html.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .btn,
  .site-nav a,
  .site-header {
    transition: none;
  }
}

/* ---------- Responsief ---------- */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    justify-self: start;
    max-width: 380px;
  }

  .intro .container,
  .werkwijze .container,
  .band .container,
  .contact .container {
    grid-template-columns: 1fr;
  }

  .feiten {
    grid-template-columns: repeat(3, 1fr);
    border-left: 0;
    border-top: 3px solid var(--geel);
    padding: 1.75rem 0 0;
  }

  .dienst--groot {
    grid-column: span 6;
  }

  .dienst--klein {
    grid-column: span 3;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .site-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--ink);
    border-top: 1px solid var(--lijn-donker);
    padding: 1rem 1.5rem 1.5rem;
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-cta {
    display: none;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .dienst--groot,
  .dienst--klein,
  .dienst--breed {
    grid-column: span 1;
  }

  .dienst--breed {
    flex-direction: column;
  }

  .team-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-card--breed {
    grid-column: span 1;
  }

  .leerbedrijf {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .form-rij {
    grid-template-columns: 1fr;
  }

  .feiten {
    grid-template-columns: 1fr;
  }
}

/* De footerrij heeft ongeveer 920px nodig (logo + menu + gegevens). Daaronder
   wrapt het metablok naar een eigen regel; dan moet het links uitlijnen in
   plaats van rechts blijven zweven met een gat ernaast. */
@media (max-width: 980px) {
  .footer-meta {
    margin-left: 0;
    text-align: left;
  }
}

/* Op telefoonbreedtes past het footermenu (ca. 393px) niet meer op een regel
   en breekt het lelijk af. Het dupliceert het hoofdmenu, dat via het
   hamburgermenu bovenaan gewoon bereikbaar blijft. */
@media (max-width: 460px) {
  .footer-nav {
    display: none;
  }
}