/* ==========================================================================
   Garage Wantij (Dordrecht) - flagship demo
   Direction: the quiet specialist. Every Dutch garage site is loud, so this
   one is quiet, and the quiet is the claim.
   Dials V7 / M6 / D4. Lane: high-end-visual-design, deviating from the doc 05
   garage row (industrial-brutalist-ui) per the concept-seed assignment.
   Primitives lifted from demo-template/motion-library.css are marked LIB.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --grond: #ECEEF0;
  --inkt: #161A1D;
  --staal: #33525E;
  --mist: #8A9299;
  --veld: #DFE3E6;

  /* LIB: motion-library.css section 1. --curve-* inside `animation`,
     --beweging-* inside `transition`. Mixing them kills the declaration. */
  --curve-micro: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --curve-move: cubic-bezier(0.165, 0.84, 0.44, 1);
  --curve-lang: cubic-bezier(0.19, 1, 0.22, 1);
  --beweging-micro: 0.2s var(--curve-micro);
  --beweging-move: 0.4s var(--curve-move);

  --maat: min(1240px, 100% - 3rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

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

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto so the width/height attributes reserve space against CLS
   without overriding aspect-ratio. Without it a 1500px-tall attribute beats
   the CSS box and the image renders as a 312x1500 strip. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

/* Shape consistency lock: radius 0 everywhere. A machined-metal register does
   not have rounded corners (taste-skill 4.4). */
input, textarea, button, .knop { border-radius: 0; }

.container { width: var(--maat); margin-inline: auto; }

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------- type scale
   FEW sizes, one display leap, nothing between h2 and display.
   The register law: same scale at w300 with negative tracking reads
   expensive; at w900 it reads energetic. Weight is the dial. */
.display {
  font-size: clamp(2.75rem, 7.6vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
p { margin: 0 0 1rem; max-width: 62ch; }
.lead { font-size: 1.1875rem; line-height: 1.55; }
.meta { font-size: 0.9375rem; color: var(--staal); }

/* LIB: .kicker. taste-skill 4.7 caps eyebrows at ceil(sections/3), which
   overrides type-recipes' "kicker above every headline". Two per page, max. */
.kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--staal);
  margin-bottom: 0.7rem;
}

/* ------------------------------------------------------------- demo banner
   doc 05 Global constraints. Required on every page, first inside <body>,
   repeated in the footer. The mandated wording is the one standing exception
   to the em-dash ban. */
.demo-banner {
  background: var(--inkt);
  color: var(--grond);
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 0.6rem var(--gutter);
}
.demo-banner p { margin: 0; max-width: none; }

/* ------------------------------------------------------------------ header */
.kop {
  border-bottom: 1px solid var(--mist);
  position: relative;
  z-index: 5;
  background: var(--grond);
}
.kop__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 68px;
}
.merk {
  font-size: 1.0625rem; font-weight: 650; letter-spacing: 0.02em;
  text-decoration: none; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.28ch; min-height: 44px;
}
.merk span { font-weight: 300; }
.nav ul {
  list-style: none; display: flex; gap: clamp(0.85rem, 2.4vw, 2rem);
  margin: 0; padding: 0; font-size: 0.9375rem;
}
.nav a {
  text-decoration: none; display: inline-block; padding-block: 0.7rem;
  min-height: 44px; min-width: 44px; text-align: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--beweging-micro), color var(--beweging-micro);
}
.nav a:hover, .nav a:focus-visible { border-color: var(--inkt); }
@media (max-width: 559px) {
  .kop__inner { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 0.35rem; }
  .nav ul { gap: 1.15rem; }
  .nav a { white-space: nowrap; }
}
.nav a[aria-current="page"] { border-color: var(--staal); color: var(--staal); }

/* ------------------------------------------------------------------ buttons */
.knop {
  display: inline-block; border: 1px solid var(--inkt); background: var(--inkt);
  color: var(--grond); padding: 0.8rem 1.5rem; font: inherit; font-size: 1rem;
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color var(--beweging-micro), color var(--beweging-micro), border-color var(--beweging-micro);
}
.knop:hover, .knop:focus-visible { background: var(--staal); border-color: var(--staal); }
.knop--licht { background: transparent; color: var(--inkt); }
.knop--licht:hover, .knop--licht:focus-visible { background: var(--inkt); color: var(--grond); }
.knop--opBeeld { background: var(--grond); color: var(--inkt); border-color: var(--grond); }
.knop--opBeeld:hover, .knop--opBeeld:focus-visible { background: var(--staal); border-color: var(--staal); color: var(--grond); }

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

/* ================================================================ FAMILY 1
   Hero: type rail left, square object study right. The hairline enters here. */
.held { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); }
.held__grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
.held__tekst p { max-width: 44ch; }
/* the display has margin 0 by design; the lead needs its own air under it */
.held__tekst .display + p { margin-top: clamp(1rem, 2vw, 1.5rem); }
.held__acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.held__beeld img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* On a phone the two hero buttons sat at natural width, leaving 24px of ground
   on the left and 89px on the right. The gate reads that asymmetry as an
   exposed background bar, and it is right: it looks like a layout bug. Full
   width below 560px makes them symmetric and lifts the tap target at once. */
@media (max-width: 559px) {
  .held__acties { flex-direction: column; align-items: stretch; }
  .held__acties .knop { width: 100%; text-align: center; }
}

@media (min-width: 900px) {
  .held__grid { grid-template-columns: 1fr 0.86fr; }
}

/* the connective hairline: one 1px rule down the left gutter, all sections */
.draad { position: relative; }
.draad::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--mist); opacity: 0.55;
}
.draad > * { padding-left: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 767px) {
  .draad > * { padding-left: 1rem; }
}

/* The rail is the site's ONE signature move, so it runs the whole page rather
   than stopping under the hero, and it survives on a phone. Each section start
   carries a registration tick, which is what turns a stray left border into
   technical-drawing notation. */
.rail { position: relative; }
.rail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--mist); opacity: 0.5;
}
/* the registration tick: what makes the rail read as notation, not a stray border */
.rail::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 9px; height: 1px; background: var(--staal);
}
/* padded on BOTH sides: the rail sits on the container's left edge, and
   content inset on one side only reads as an exposed background bar. */
.rail { padding-inline: clamp(1rem, 2.5vw, 2rem); }
.band .rail::before, .band .rail::after { opacity: 0.85; }
.band .rail::before { background: rgb(236 238 240 / 0.5); }
@media (max-width: 767px) { .rail { padding-inline: 0.9rem; } .rail::after { width: 6px; } }

.rail-merk {
  position: absolute; left: 0; top: 0; width: 9px; height: 1px;
  background: var(--staal);
}
@media (max-width: 767px) { .rail-merk { width: 6px; } }

/* ================================================================ FAMILY 2
   Specimen band: one full-bleed photograph, numbered service index beneath. */
.sectie { padding-block: clamp(2.75rem, 6vw, 5rem); }
.sectie--veld { background: var(--veld); }

.staal-strook img {
  width: 100%; height: clamp(190px, 26vw, 330px); object-fit: cover;
}
.index { list-style: none; margin: 2rem 0 0; padding: 0; }
.index li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.35rem 1rem;
  align-items: baseline; padding-block: 1.05rem;
  border-top: 1px solid var(--mist);
}
.index li:last-child { border-bottom: 1px solid var(--mist); }
.index__nr {
  font-variant-numeric: tabular-nums; font-size: 0.875rem; font-weight: 650;
  color: var(--staal); letter-spacing: 0.05em;
}
/* Both the heading and the body sit in column 2. Without this the <p> is the
   third grid item, auto-placement drops it into row 2 column 1, and it renders
   42px wide: the sliver the gate caught on 2026-07-27. */
.index h3, .index p { grid-column: 2; }
.index h3 { margin: 0; }
.index p { margin: 0.25rem 0 0; font-size: 1rem; color: #3d454b; max-width: 54ch; }

@media (min-width: 780px) {
  .index li { grid-template-columns: 3.5rem 16rem 1fr; column-gap: 1.5rem; }
  .index h3 { grid-column: 2; }
  .index p { grid-column: 3; margin: 0; }
}

/* ================================================================ FAMILY 3
   Price table. The one dense element on a D4 page. Tabular figures. */
.prijs { width: 100%; border-collapse: collapse; margin-top: 1.75rem; }
.prijs caption {
  text-align: left; font-size: 0.9375rem; color: var(--staal);
  padding-bottom: 0.9rem; max-width: 60ch;
}
.prijs th, .prijs td { text-align: left; padding: 0.85rem 0.75rem 0.85rem 0; }
.prijs thead th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 650; color: var(--staal); border-bottom: 1px solid var(--inkt);
}
.prijs tbody tr { border-bottom: 1px solid var(--mist); }
.prijs td:last-child, .prijs th:last-child { text-align: right; padding-right: 0; }
.prijs .bedrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ================================================================ FAMILY 4
   Full-bleed photographic band with the three steps set over it. */
.band { position: relative; color: var(--grond); isolation: isolate; }
.band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* The lightest end was 0.68 alpha. Over a bright patch of the photo that
     still computes to about 6:1, but neither Lighthouse nor a static checker
     can sample a background image, so give the worst case real headroom. */
  background: linear-gradient(90deg, rgb(22 26 29 / 0.88) 0%, rgb(22 26 29 / 0.62) 62%, rgb(22 26 29 / 0.34) 100%);
}
.band .container { padding-block: clamp(2.75rem, 6vw, 5rem); }
.band h2 { color: var(--grond); }
.band .kicker { color: rgb(236 238 240 / 0.75); }
.stappen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.stappen li { border-top: 1px solid rgb(236 238 240 / 0.45); padding-top: 1rem; }
.stappen h3 { color: var(--grond); }
.stappen p { color: rgb(236 238 240 / 0.88); margin: 0; font-size: 1rem; }

/* ================================================================ FAMILY 5
   Asymmetric duo: image one side, argument the other. */
.duo { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) {
  .duo { grid-template-columns: 0.78fr 1fr; }
  .duo--omgekeerd { grid-template-columns: 1fr 0.78fr; }
  .duo--omgekeerd .duo__beeld { order: 2; }
}
/* The box matches the source ratio, per image. A 1:1 photograph in a 7:5 box
   throws away 30% of the frame, which the gate measures and fails. */
.duo__beeld img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
.duo__beeld--vierkant img { aspect-ratio: 1 / 1; }
.duo__beeld--breed img { aspect-ratio: 16 / 9; }

/* ================================================================ FAMILY 6
   Form block. */
.formulier { display: grid; gap: 0.2rem; max-width: 34rem; margin-top: 1.5rem; }
.formulier label { font-size: 1rem; font-weight: 600; margin-top: 0.85rem; }
.formulier input, .formulier textarea {
  font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem;
  border: 1px solid #6d757b; background: #fff; color: var(--inkt);
  width: 100%;
}
.formulier input::placeholder, .formulier textarea::placeholder { color: #5c646a; }
.formulier input:focus, .formulier textarea:focus { border-color: var(--staal); }
.formulier textarea { min-height: 8rem; resize: vertical; }
.formulier .knop { margin-top: 1.2rem; justify-self: start; }
@media (max-width: 559px) { .formulier .knop { justify-self: stretch; width: 100%; } }
.formulier__klein { font-size: 0.875rem; color: #454d53; margin-top: 0.9rem; max-width: 46ch; }
.formulier__klein a { color: var(--staal); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gegevens { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 30rem; }
.gegevens li { padding-block: 0.75rem; border-top: 1px solid var(--mist); }
.gegevens li:last-child { border-bottom: 1px solid var(--mist); }
.gegevens strong {
  display: block; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--staal); font-weight: 650;
}
.tijden { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ footer */
.voet { background: var(--inkt); color: var(--grond); margin-top: clamp(3rem, 7vw, 5rem); }
.voet .container { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.voet__grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .voet__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.voet h2 { font-size: 1.0625rem; font-weight: 650; color: var(--grond); margin-bottom: 0.8rem; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { padding-block: 0.1rem; }
.voet li a { display: inline-block; padding-block: 0.6rem; min-height: 44px; }
.voet a { color: rgb(236 238 240 / 0.88); text-decoration: none; }
.voet a:hover, .voet a:focus-visible { color: var(--grond); text-decoration: underline; }
.voet p { color: rgb(236 238 240 / 0.88); }
.voet__streep {
  border-top: 1px solid rgb(236 238 240 / 0.25); margin-top: 2rem; padding-top: 1.2rem;
  font-size: 0.8125rem; color: rgb(236 238 240 / 0.78);
}
.voet__streep p { max-width: none; margin: 0; color: inherit; }

/* ------------------------------------------------------------------ motion
   LIB: motion-library.css section 2, guarded by @supports AND
   prefers-reduced-motion. Content is fully visible without either. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .onthul {
      animation: onthullen linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 30%;
    }
    @keyframes onthullen {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .index li {
      animation: regel-in linear both;
      animation-timeline: view();
      animation-range: entry 3% cover 22%;
    }
    @keyframes regel-in {
      from { opacity: 0; transform: translateX(-12px); }
      to { opacity: 1; transform: translateX(0); }
    }
    /* THE signature move, and the only one: the connective hairline draws
       itself as the page scrolls. */
    .draad::before {
      animation: draad-trekken linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
      transform-origin: top;
    }
    @keyframes draad-trekken {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }
  }
}

/* ------------------------------------------------------------------- print */
@media print {
  .demo-banner, .nav, .knop { display: none; }
  body { background: #fff; color: #000; }
}