/* SCW Converting. Colours come from the logo and the old site's brand colours.
   Signature: the amber steel rule (.liniaal) and format diagrams drawn to scale (.schaal). */

@font-face {
  font-family: "Rokkitt";
  src: url("/fonts/rokkitt-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blauw: #0070b8;
  --diep: #004d90;
  --amber: #f2ab00;
  --leisteen: #1f2932;
  --tekst: #3e3e3e;
  --label: #56606a;
  --lijn: #c9d2d9;
  --vel: #eef3f7;
  --wit: #fff;
  --slab: "Rokkitt", Rockwell, "Roboto Slab", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --ruimte: clamp(3.5rem, 8vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font: 400 1.0625rem/1.62 var(--sans);
  overflow-wrap: break-word;
}

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

h1, h2, h3 {
  margin: 0;
  color: var(--leisteen);
  font-family: var(--slab);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; }

p, ul, dl, address, blockquote, figure { margin: 0; }
address { font-style: normal; }
p + p { margin-top: 1em; }

a { color: var(--diep); text-underline-offset: 0.18em; }
a:hover { color: var(--blauw); }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--leisteen);
}

.wrap {
  width: min(100% - 2 * var(--rand), 78rem);
  margin-inline: auto;
}

.naar-inhoud {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--leisteen);
  color: var(--wit);
}

.naar-inhoud:focus { top: 0.5rem; color: var(--wit); }

/* Visible placeholders: magenta on purpose, so they cannot be mistaken for the brand. */
.aanvullen {
  padding: 0 0.3em;
  border: 1px dashed #b0124f;
  background: #ffe1ee;
  color: #8f0040;
  font: 600 0.88em/1.5 var(--sans);
  letter-spacing: 0;
}

/* Header */
.kop { background: var(--wit); }

.kop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 0.6rem;
}

.logo img { width: auto; height: clamp(54px, 6vw, 76px); }

.kop-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem clamp(1.25rem, 3vw, 2.5rem);
}

.hoofdnav ul {
  display: flex;
  gap: clamp(1.1rem, 2.6vw, 2.25rem);
  padding: 0;
  list-style: none;
}

.hoofdnav a {
  display: block;
  padding-block: 0.5rem;
  border-bottom: 3px solid transparent;
  color: var(--leisteen);
  font-weight: 600;
  text-decoration: none;
}

.hoofdnav a:hover { border-color: var(--lijn); color: var(--leisteen); }
.hoofdnav a[aria-current] { border-color: var(--amber); }

.kop-tel {
  color: var(--diep);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.taal ul { display: flex; gap: 0.75rem; padding: 0; list-style: none; }

/* The steel rule: ticks every 8px, heavier every 40px and 80px. */
.liniaal {
  position: relative;
  height: 2.5rem;
  background-color: var(--amber);
  background-image:
    repeating-linear-gradient(90deg, var(--leisteen) 0 2px, transparent 2px 80px),
    repeating-linear-gradient(90deg, var(--leisteen) 0 1.5px, transparent 1.5px 40px),
    repeating-linear-gradient(90deg, var(--leisteen) 0 1px, transparent 1px 8px);
  background-repeat: no-repeat;
  background-size: 100% 62%, 100% 42%, 100% 24%;
}

.liniaal span {
  position: absolute;
  left: max(var(--rand), (100% - 78rem) / 2);
  bottom: 0;
  padding: 0 0.6rem 0 0;
  background: var(--amber);
  color: var(--leisteen);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {
  .held .liniaal { animation: snij 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  @keyframes snij {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* Home hero */
.held-kop { padding-block: clamp(1.75rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2.5rem); }

.bovenregel {
  margin-bottom: 0.9rem;
  color: var(--label);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 600;
}

.held h1 {
  font-size: clamp(2.2rem, 11vw, 9.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Three machines under the rule. Real photos in their own portrait shape. */
.held-beeld { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.held-beeld figure { position: relative; }
.held-beeld a { display: block; color: var(--wit); text-decoration: none; }
.held-beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.bijschrift {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0.3rem 0.8rem;
  background: var(--leisteen);
  color: var(--wit);
  font: 700 clamp(1rem, 1.6vw, 1.35rem)/1.2 var(--slab);
}

.foto .bijschrift { left: var(--m); bottom: var(--m); }

/* Page heads on inner pages */
.pagina-kop {
  padding-block: clamp(2.25rem, 6vw, 5rem) clamp(1.75rem, 4vw, 3.5rem);
  background: var(--blauw);
  color: var(--wit);
}

.pagina-kop h1 {
  color: var(--wit);
  font-size: clamp(3.1rem, 11vw, 9.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.pagina-kop--tekst h1 { font-size: clamp(2.6rem, 7.5vw, 6.5rem); }

.pagina-kop p {
  max-width: 44rem;
  margin-top: 1rem;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.35;
}

.dienst-nav { background: var(--leisteen); }

.dienst-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(0.9rem, 3vw, 2.25rem);
  padding: 0;
  list-style: none;
}

.dienst-nav a {
  display: block;
  padding-block: 0.65rem;
  color: var(--wit);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.dienst-nav a:hover { color: var(--amber); }
.dienst-nav a[aria-current] { color: var(--amber); text-decoration: underline; text-underline-offset: 0.35em; }

/* Sections */
.sectie { padding-block: var(--ruimte); }
.sectie--vel { background: var(--vel); }
.sectie--smal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.twee {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.drie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.drie h3, .twee h3 { margin-bottom: 0.8rem; }

.lead {
  color: var(--leisteen);
  font-family: var(--slab);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.14;
}

.tekst > * { max-width: 40rem; }
.tekst h2 { margin-bottom: 1.1rem; }
.tekst h2:not(:first-child) { margin-top: 2.5rem; }

.sectie-titel { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }

.knop {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 0;
  background: var(--amber);
  color: var(--leisteen);
  font: 700 1.0625rem/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.knop:hover { background: var(--leisteen); color: var(--wit); }
.knop[disabled] { opacity: 0.6; cursor: progress; }

.lijst {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lijn);
}

.lijst li { padding: 0.55rem 0; border-bottom: 1px solid var(--lijn); }
.lijst--tussen { margin-block: 1.25rem; }

/* The four services as a ledger */
.diensten { padding: 0; list-style: none; border-bottom: 2px solid var(--leisteen); }

.diensten a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-top: 2px solid var(--leisteen);
  color: var(--tekst);
  text-decoration: none;
}

.diensten a::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}

.diensten a:hover::before, .diensten a:focus-visible::before { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  .diensten a::before { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
}

.dienst-naam {
  color: var(--leisteen);
  font-family: var(--slab);
  font-size: clamp(2.5rem, 6.2vw, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
}

.diensten a:hover .dienst-naam { color: var(--blauw); }

.diensten img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Blue band */
.band { padding-block: var(--ruimte); background: var(--diep); color: var(--wit); }
.band h2, .band h3 { color: var(--wit); }
.band h2 { margin-bottom: 1.1rem; }
.band a { color: var(--wit); }
.band a.knop { color: var(--leisteen); }
.band a.knop:hover { color: var(--wit); }
.band h3 { margin-bottom: 0.8rem; }
.certificaat-link { margin-top: 1.25rem; }
.band .lijst, .band .lijst li { border-color: rgb(255 255 255 / 35%); }
.band .lijst { margin-top: 1.25rem; }

/* Quote and call to action */
.citaat { padding-block: clamp(3rem, 7vw, 6rem); background: var(--leisteen); color: var(--wit); }

.citaat blockquote {
  max-width: 62rem;
  color: var(--wit);
  font-family: var(--slab);
  font-size: clamp(2rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.citaat--lang blockquote { font-size: clamp(1.6rem, 3.4vw, 2.75rem); line-height: 1.12; }
.citaat .kop-tel { color: var(--wit); }

/* Service pages: specifications and diagrams */
.specs {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.spec-lijst { border-top: 2px solid var(--leisteen); }

.spec-lijst > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--lijn);
}

.spec-lijst dt { color: var(--label); font-weight: 500; }

.spec-lijst dd {
  margin: 0;
  color: var(--leisteen);
  font-family: var(--slab);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.spec-extra { margin-top: 1.25rem; }

.schaal figcaption { margin-top: 0.75rem; color: var(--label); font-size: 0.9375rem; }
.schaal svg { width: 100%; }
.schaal-vel { fill: var(--vel); stroke: var(--diep); stroke-width: 2; }
.schaal-klein { fill: var(--amber); stroke: var(--leisteen); stroke-width: 1.5; }
.schaal-lijn { fill: none; stroke: var(--leisteen); stroke-width: 1.5; }
.schaal-tekst { fill: var(--leisteen); font: 600 15px var(--sans); }

/* Photos with crop marks in the margin around them */
.fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

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

.foto {
  --m: 12px;
  --k: 1.5px;
  position: relative;
  padding: var(--m);
  background:
    linear-gradient(var(--leisteen), var(--leisteen)) 0 var(--m) / var(--m) var(--k),
    linear-gradient(var(--leisteen), var(--leisteen)) var(--m) 0 / var(--k) var(--m),
    linear-gradient(var(--leisteen), var(--leisteen)) 100% var(--m) / var(--m) var(--k),
    linear-gradient(var(--leisteen), var(--leisteen)) calc(100% - var(--m)) 0 / var(--k) var(--m),
    linear-gradient(var(--leisteen), var(--leisteen)) 0 calc(100% - var(--m)) / var(--m) var(--k),
    linear-gradient(var(--leisteen), var(--leisteen)) var(--m) 100% / var(--k) var(--m),
    linear-gradient(var(--leisteen), var(--leisteen)) 100% calc(100% - var(--m)) / var(--m) var(--k),
    linear-gradient(var(--leisteen), var(--leisteen)) calc(100% - var(--m)) 100% / var(--k) var(--m);
  background-repeat: no-repeat;
}

.foto img { width: 100%; }

/* Row of a portrait film and portrait photos. The fr values keep them about the same height. */
.beeld {
  display: grid;
  grid-template-columns: 9fr 12fr 12fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.beeld--midden { grid-template-columns: 12fr 9fr 12fr; }
.beeld .foto { display: flex; margin: 0; }
.beeld img, .beeld video { width: 100%; height: 100%; object-fit: cover; }

/* Marked spot for a photo that is not in yet. Filled in by replacing the div with an img. */
.plek {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  border: 1px dashed #b0124f;
  background: #fff5f9;
  text-align: center;
}

.duim-leeg {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 0.25rem;
  border: 1px dashed #b0124f;
  background: #fff5f9;
  text-align: center;
}

/* Warehousing fact */
.feit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 1.5rem; }

.feit strong {
  color: var(--diep);
  font-family: var(--slab);
  font-size: clamp(3.25rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Film */
.film { position: relative; }

.film-knop {
  position: absolute;
  left: calc(var(--m) + 0.75rem);
  bottom: calc(var(--m) + 0.75rem);
  padding: 0.5rem 0.9rem;
  border: 0;
  background: var(--amber);
  color: var(--leisteen);
  font: 700 0.9375rem/1.2 var(--sans);
  cursor: pointer;
}

.film-knop:hover { background: var(--wit); }

/* Team */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 2.5vw, 2.5rem);
  padding: 0;
  list-style: none;
}

.team li { padding-top: 1rem; border-top: 2px solid var(--leisteen); }
.team h3 { margin-bottom: 0.35rem; font-size: clamp(1.4rem, 2vw, 1.75rem); }
.team a { overflow-wrap: anywhere; }

/* Contact */
.contact-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.veld { margin-bottom: 1.25rem; }

.veld label { display: block; margin-bottom: 0.3rem; color: var(--leisteen); font-weight: 600; }

.veld input, .veld textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--leisteen);
  border-radius: 0;
  background: var(--wit);
  color: var(--leisteen);
  font: 400 1.0625rem/1.4 var(--sans);
}

.veld textarea { min-height: 11rem; resize: vertical; }
.veld [aria-invalid="true"] { border-color: #b3261e; }
.veld-fout { margin-top: 0.3rem; color: #b3261e; font-weight: 600; }

.vangnet { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { margin-bottom: 1.25rem; }

.form-melding {
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid #b3261e;
  background: #fdecea;
  color: #7a1712;
}

.klein { margin-top: 1rem; color: var(--label); font-size: 0.9375rem; }

.gegevens h2 { margin-bottom: 0.75rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.gegevens > * + h2 { margin-top: 2rem; }

/* Legal text */
.juridisch > * { max-width: 46rem; }
.juridisch h2 { margin: 2.25rem 0 0.7rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.juridisch h2:first-child { margin-top: 0; }
.juridisch ul { margin-block: 0.75em; padding-left: 1.2rem; }
.juridisch li + li { margin-top: 0.35rem; }

/* Footer */
.voet { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; background: var(--leisteen); color: #dfe5ea; }
.voet a { color: var(--wit); }
.voet a:hover { color: var(--amber); }

.voet-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
}

.voet-naam, .voet h2 {
  margin-bottom: 0.6rem;
  color: var(--wit);
  font-family: var(--slab);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}

.voet ul { padding: 0; list-style: none; }
.voet li + li { margin-top: 0.25rem; }

.voet-onder p { margin: 0; }

.voet-onder {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 25%);
  font-size: 0.9375rem;
}

/* Tablet and phone */
@media (max-width: 62rem) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drie { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .twee, .specs, .contact-raster { grid-template-columns: minmax(0, 1fr); }
  .held-beeld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .held-beeld figure:first-child { grid-column: 1 / -1; }
  .held-beeld figure:first-child img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
  .beeld, .beeld--midden { grid-template-columns: minmax(0, 1fr); }
  .beeld img, .beeld video { height: auto; }
  .beeld .film { width: min(100%, 24rem); margin-inline: auto; }
  .diensten a { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .diensten img, .diensten .duim-leeg { grid-column: 2; grid-row: 1 / span 2; }
  .dienst-naam { font-size: clamp(2.1rem, 10vw, 3rem); }
  .diensten span:not(.dienst-naam, .duim-leeg) { grid-column: 1; }
  .fotos, .fotos--drie { grid-template-columns: minmax(0, 1fr); }
  .liniaal span { font-size: 0.75rem; }
}

@media (max-width: 30rem) {
  .kop-rechts { display: contents; }
  .kop-tel { font-size: 0.9375rem; }
  .hoofdnav { order: 3; width: 100%; }
  .voet-raster { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: minmax(0, 1fr); }
  .spec-lijst > div { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .dienst-nav, .liniaal, .knoppen, .film-knop { display: none; }
}