/* LVT Installaties — styles.css (v3)
   Technische werkplaats als bouwtekening: papier, haarlijnen, maatstreepjes,
   mono voor labels en cijfers, één enorm zetsel. Tokens en contrast: DESIGN.md. */

@font-face {
  font-family: "Plex Sans";
  src: url("assets/fonts/plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* kleur */
  --ink: #0A0D0F;
  --paper: #F2EEE7;
  --blue: #1E7BB8;
  --blue-deep: #16648F;
  --blue-light: #4FA3D1;
  --signal: #E8552B;
  --ink-soft: #4F5457;
  --paper-soft: #A8AFB2;
  --line: rgba(10, 13, 15, .16);
  --line-dark: rgba(242, 238, 231, .22);
  --error: #B3261E;

  /* maat */
  --maxw: 1680px;
  --pad: clamp(20px, 4.2vw, 72px);
  --gut: clamp(16px, 1.6vw, 28px);
  --sect: clamp(72px, 9vw, 152px);
  --head-h: 76px;

  /* zetsel */
  --f-display: "Plex Sans", "Liberation Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

section[id], #top { scroll-margin-top: var(--head-h); }

::selection { background: var(--blue); color: var(--paper); }

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

/* mono: labels, nummers, bijschriften. Nooit kleiner dan 12px. */
.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--paper);
  color: var(--ink);
  padding: 14px 20px;
  font-size: 15px;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- raster ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
}

/* ---------- header ---------- */

.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--head-h);
  color: var(--ink);
  background-color: #FDFCFA;
  transition: border-color .2s linear;
  border-bottom: 1px solid rgba(10, 13, 15, .14);
}
.head.is-stuck { border-bottom-color: rgba(10, 13, 15, .3); }

.head-in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Het originele logobestand, ongewijzigd en transparant, direct op de lichte
   headerband. Geen plaat, geen kader, niet omgekleurd. */
.mark {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: auto;
  text-decoration: none;
}
.mark img {
  width: 120px;
  height: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
}
.nav-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 44px;
  padding-block: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .16s linear;
}
.nav-list a:hover,
.nav-list a:focus-visible { border-bottom-color: var(--ink); }
.nav-num { color: var(--ink-soft); }
.nav-foot { display: none; }

.head-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(10, 13, 15, .3);
  transition: background-color .16s linear, color .16s linear, border-color .16s linear;
}
.head-tel:hover,
.head-tel:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.menu { display: none; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: var(--head-h);
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 13, 15, .46) 0%,
      rgba(10, 13, 15, .16) 34%,
      rgba(10, 13, 15, .5) 66%,
      rgba(10, 13, 15, .94) 100%);
}

.hero-body {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  margin-top: auto;
  padding-inline: var(--pad);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(242, 238, 231, .95);
  margin-bottom: clamp(24px, 3.4vw, 52px);
}
.tick { width: 28px; height: 1px; flex: none; background: rgba(242, 238, 231, .6); }

.hero-title {
  font-size: clamp(56px, 17vw, 140px);
  line-height: .86;
  letter-spacing: -.045em;
  font-weight: 500;
  margin-left: -.045em;
}

.hero-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: end;
}
.hero-lead {
  grid-column: 8 / 13;
  justify-self: end;
  max-width: 34ch;
  margin-top: clamp(20px, 2.6vw, 34px);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: rgba(242, 238, 231, .92);
}

.hero-foot {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 18px var(--pad);
  border-top: 1px solid rgba(242, 238, 231, .28);
  color: rgba(242, 238, 231, .82);
}
.hero-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--paper);
}
.hero-tel:hover,
.hero-tel:focus-visible { color: var(--signal); }

.hero-go {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  text-decoration: none;
  color: var(--paper);
  transition: color .16s linear, gap .16s var(--ease);
}
.hero-go:hover,
.hero-go:focus-visible { color: var(--signal); gap: 24px; }

/* ---------- statement ---------- */

.statement {
  background: var(--paper);
  color: var(--ink);
  padding-block: clamp(80px, 10vw, 168px);
  border-bottom: 1px solid var(--line);
}

.statement-label {
  grid-column: 1 / 3;
  color: var(--ink-soft);
  padding-top: .9em;
}

.statement-title {
  grid-column: 3 / 12;
  font-size: clamp(28px, 3.9vw, 62px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 500;
  text-wrap: pretty;
}

.statement-note {
  grid-column: 8 / 13;
  margin-top: clamp(32px, 4.4vw, 64px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.6;
}
.statement-note p { max-width: 46ch; }

/* ---------- secties ---------- */

.sect {
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--sect);
  border-top: 1px solid var(--line);
}
#diensten { padding-bottom: 0; }

.sect-head { align-items: start; margin-bottom: clamp(40px, 5vw, 80px); }

.sect-num {
  grid-column: 1;
  color: var(--ink-soft);
  padding-top: .55em;
}

.sect-title {
  grid-column: 2 / 10;
  font-size: clamp(34px, 5vw, 76px);
  line-height: .92;
  letter-spacing: -.035em;
  font-weight: 500;
  margin-left: -.03em;
}

.sect-note {
  grid-column: 10 / 13;
  align-self: end;
  justify-self: start;
  max-width: 30ch;
  padding-bottom: .45em;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- diensten ---------- */

.svcs { border-bottom: 1px solid var(--line); }

.svc {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: end;
  padding-block: clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background-color .18s linear;
}
.svc:hover { background: rgba(10, 13, 15, .035); }

.svc-num {
  grid-column: 1;
  align-self: start;
  color: var(--ink-soft);
  padding-top: 1em;
}

.svc-name {
  grid-column: 2 / 10;
  font-size: clamp(40px, 7.4vw, 112px);
  line-height: .9;
  letter-spacing: -.045em;
  font-weight: 500;
  margin-left: -.04em;
  transition: color .18s linear;
}

.svc-desc {
  grid-column: 10 / 12;
  align-self: end;
  padding-bottom: .7em;
  max-width: 24ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.svc-go {
  grid-column: 12;
  align-self: end;
  justify-self: end;
  padding-bottom: .95em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .18s linear, transform .18s var(--ease), color .18s linear;
}

.svc:hover .svc-name,
.svc:focus-visible .svc-name { color: var(--blue); }
.svc:hover .svc-go,
.svc:focus-visible .svc-go {
  opacity: 1;
  transform: none;
  color: var(--signal);
}

/* ---------- strip ---------- */

.strip {
  margin-top: clamp(48px, 6vw, 96px);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding-block: clamp(14px, 1.6vw, 22px);
}

.strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: strip 60s linear infinite;
  font-family: var(--f-mono);
  font-size: clamp(18px, 2.1vw, 30px);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.strip-track > span { padding-right: clamp(20px, 2.6vw, 40px); }
.strip-dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--blue-light);
  border-radius: 50%;
}

@keyframes strip {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- werkwijze ---------- */

.sect-steps { border-top: none; }

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  border-top: 1px solid var(--line);
}
.steps::before {
  content: "";
  position: absolute;
  left: calc(100% / 12);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.step {
  position: relative;
  grid-column: 2 / 13;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  column-gap: var(--gut);
  align-items: baseline;
  padding-block: clamp(18px, 2.1vw, 28px);
  border-bottom: 1px solid var(--line);
}
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--ink-soft);
}

.step-k {
  grid-column: 1 / 3;
  color: var(--ink-soft);
  padding-left: 26px;
}

.step-t {
  grid-column: 3 / 12;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 500;
  text-wrap: pretty;
}

/* ---------- praktijk ---------- */

.sect-work {
  background: var(--ink);
  color: var(--paper);
  border-top: none;
  padding-bottom: clamp(64px, 8vw, 128px);
}
.sect-work .sect-num,
.sect-work .sect-note { color: var(--paper-soft); }
.sect-work .sect-head { margin-bottom: clamp(32px, 4vw, 64px); }
.sect-contact .sect-head { margin-bottom: clamp(40px, 5vw, 72px); }

.work-main { margin: 0; width: 100%; }
.work-main img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 52% 36%;
}

.work-lower {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  margin-top: clamp(20px, 2.6vw, 32px);
}

.work-small {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: clamp(-260px, -18vw, -90px);
}
.work-small img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 45% 50%;
  border: 1px solid var(--line-dark);
}

.cap { display: grid; gap: 8px; }
.cap .mono { color: var(--paper-soft); }
.cap p + p { max-width: 40ch; font-size: 15px; line-height: 1.5; }
.cap-a { grid-column: 1 / 6; grid-row: 1; align-self: start; padding-top: 4px; }
.cap-b { grid-column: 8 / 13; grid-row: 2; margin-top: clamp(16px, 2vw, 24px); }

/* ---------- contact ---------- */

.sect-contact { background: var(--paper); }

.contact { align-items: start; }

.contact-left { grid-column: 2 / 7; }
.contact-k { color: var(--ink-soft); }

.contact-tel {
  display: block;
  margin-block: 10px clamp(28px, 3.6vw, 48px);
  padding-bottom: clamp(16px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  font-size: clamp(38px, 6.1vw, 94px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color .16s linear;
}
.contact-tel:hover,
.contact-tel:focus-visible { color: var(--blue-deep); }

.contact-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gut);
  row-gap: 28px;
}
.contact-dl dt { color: var(--ink-soft); margin-bottom: 8px; }
.contact-dl dd { font-size: 16px; line-height: 1.5; }
.contact-dl a {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .16s linear, color .16s linear;
}
.contact-dl a:hover,
.contact-dl a:focus-visible { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }

.form-wrap { grid-column: 8 / 13; }

.form-title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 500;
}
.form-hint {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 28px);
}

.field { margin-top: clamp(20px, 2.4vw, 28px); }

.field label {
  display: block;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 13, 15, .32);
  border-radius: 0;
  padding: 8px 0 10px;
  transition: border-color .16s linear;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover,
.field textarea:hover { border-bottom-color: var(--ink-soft); }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--ink); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--error); }

.field-error {
  margin-top: 6px;
  font-size: 13px;
  color: var(--error);
}
.field-hint {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.req { font-weight: 600; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  margin-top: clamp(28px, 3.2vw, 40px);
  padding: 0 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--signal);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .16s linear, color .16s linear;
}
.submit:hover,
.submit:focus-visible { background: var(--ink); color: var(--paper); }
.submit:disabled { opacity: .65; cursor: progress; }
.submit svg { flex: none; }

.form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.45;
}
.form-status[data-soort="ok"] { border-color: var(--blue-deep); color: var(--blue-deep); }
.form-status[data-soort="fout"] { border-color: var(--error); color: var(--error); }

.form-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */

.foot {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(56px, 7vw, 104px) 28px;
}

.foot-top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  column-gap: clamp(16px, 3vw, 48px);
  row-gap: 12px;
  padding-bottom: clamp(28px, 3.6vw, 48px);
  border-bottom: 1px solid var(--line-dark);
}
.foot-mark {
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: .95;
  letter-spacing: -.035em;
  font-weight: 500;
}
.foot-pay {
  grid-column: 1;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-soft);
}
.contact-mark { margin-top: clamp(44px, 6vw, 76px); }
.contact-mark img { width: 150px; }

.foot-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gut);
  row-gap: 28px;
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line-dark);
}
.foot-block dt { color: var(--paper-soft); margin-bottom: 10px; }
.foot-block dd { font-size: 15px; line-height: 1.5; }
.foot-block a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s linear, color .16s linear;
}
.foot-block a:hover,
.foot-block a:focus-visible { border-bottom-color: var(--paper); }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(16px, 3vw, 40px);
  padding-top: 24px;
  color: var(--paper-soft);
}
.foot-up { margin-left: auto; text-decoration: none; }
.foot-up:hover,
.foot-up:focus-visible { color: var(--signal); }

/* ---------- smaller ---------- */

@media (max-width: 1080px) {
  .nav-list { gap: 18px; }
  .nav-num { display: none; }
}

@media (max-width: 960px) {
  :root { --head-h: 64px; }

  .head-tel { display: none; }
  .mark { padding-right: 14px; }
  .mark img { width: 96px; }

  .menu {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-bars { display: grid; gap: 5px; width: 22px; }
  .menu-bars i { display: block; height: 1px; background: currentColor; transition: transform .16s var(--ease); }
  .menu[aria-expanded="true"] .menu-bars i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu[aria-expanded="true"] .menu-bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

  .nav {
    position: fixed;
    top: var(--head-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px var(--pad) 40px;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s linear, visibility .2s linear;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; }

  .nav-list {
    display: block;
    border-top: 1px solid var(--line-dark);
  }
  .nav-list li { border-bottom: 1px solid var(--line-dark); }
  .nav-list a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-block: 18px;
    font-family: var(--f-display);
    font-size: clamp(32px, 9vw, 48px);
    font-weight: 500;
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--paper);
    border-bottom: 0;
  }
  .nav-num {
    display: inline;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--paper-soft);
  }
  .nav-foot {
    display: block;
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper-soft);
  }

  .hero-foot { grid-template-columns: 1fr auto; row-gap: 12px; }
  .hero-place { grid-column: 1 / -1; order: 2; }
  .hero-tel { grid-column: 1; grid-row: 1; }
  .hero-go { grid-column: 2; grid-row: 1; }

  .hero-lead { grid-column: 1 / -1; justify-self: start; max-width: 44ch; }

  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .statement-label { grid-column: 1 / -1; padding-top: 0; margin-bottom: 18px; }
  .statement-title { grid-column: 1 / -1; }
  .statement-note { grid-column: 1 / -1; }

  .sect-head { row-gap: 14px; }
  .sect-num { grid-column: 1 / -1; padding-top: 0; }
  .sect-title { grid-column: 1 / -1; }
  .sect-note { grid-column: 1 / -1; padding-bottom: 0; max-width: 40ch; }

  .svc { align-items: start; }
  .svc-name { font-size: clamp(42px, 11.2vw, 112px); }
  .svc-desc { font-size: 15px; }
  .svc-num { grid-column: 1; padding-top: .6em; }
  .svc-name { grid-column: 2 / -1; }
  .svc-desc { grid-column: 2 / -1; align-self: start; padding-bottom: 0; margin-top: 14px; max-width: 40ch; }
  .svc-go { display: none; }

  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .step { grid-column: 1; grid-template-columns: 1fr; row-gap: 10px; }
  .step::before { display: none; }
  .step-k { grid-column: 1; padding-left: 0; }
  .step-t { grid-column: 1; }

  .work-main img { aspect-ratio: 16 / 10; }
  .work-lower { grid-template-columns: 1fr; row-gap: 20px; }
  .cap-a, .cap-b, .work-small { grid-column: 1; grid-row: auto; }
  .work-small { width: 78%; margin-top: 0; margin-left: auto; }
  .cap-b { margin-top: 0; }

  .contact-left, .form-wrap { grid-column: 1 / -1; }
  .form-wrap { margin-top: clamp(40px, 6vw, 64px); }

  .foot-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hero-title { font-size: clamp(46px, 15.4vw, 92px); }
  .hero-kicker { letter-spacing: .1em; }
  .kick-place { display: none; }
  .hero-place { max-width: 26ch; }

  .field-grid { grid-template-columns: 1fr; }
  .contact-dl { grid-template-columns: 1fr; row-gap: 22px; }
  .foot-block { grid-template-columns: 1fr; }
  .work-small { width: 100%; }
}

/* ---------- beweging uit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .strip-track { animation: none; transform: none; }
}