/*
  Design tokens - Tekenbureau Winter
  Kleuren gesampled uit de live site (jwwb.nl theme-css, --jw-accent-container-background-color: #4caac9)
  en het logo (antraciet/zwarte lijntekening). Donker, getekend, "blueprint" thema.
*/

:root {
  /* ---------- Kleur: inkt (donkere achtergronden) ---------- */
  --color-ink: #141414;
  --color-ink-deep: #0d0d0d;
  --color-ink-soft: #1c1c1a;
  --color-ink-raised: #232320;

  /* ---------- Kleur: papier (licht, gebroken wit) ---------- */
  --color-paper: #f4f1ea;
  --color-paper-dim: #cfc9ba;
  --color-paper-faint: #8c887b;

  /* ---------- Kleur: accent - gesampled van tekenbureauwinter.com ---------- */
  --color-accent: #4caac9;
  --color-accent-tint: #7ec4dc;
  --color-accent-deep: #2f7d96;
  --color-accent-ink: #06222b;

  /* ---------- Lijnen / rasters (op donkere achtergrond) ---------- */
  --color-line: rgba(244, 241, 234, 0.14);
  --color-line-strong: rgba(244, 241, 234, 0.34);
  --color-line-accent: rgba(76, 170, 201, 0.55);
  /* Bewust een stuk subtieler dan --color-line: het blueprint-raster
     beslaat de volledige achtergrond en moet op de achtergrond blijven. */
  --color-grid-line: rgba(244, 241, 234, 0.05);

  /* ---------- Tekst op papier (lichte secties) ---------- */
  --color-text-on-paper: #181715;
  --color-muted-on-paper: #5b5648;
  --color-line-on-paper: rgba(20, 20, 20, 0.14);
  --color-line-on-paper-strong: rgba(20, 20, 20, 0.32);

  /* ---------- Typografie ---------- */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.75rem;
  --fs-xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-2xl: clamp(3rem, 1.8rem + 5vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --ls-wide: 0.18em;
  --ls-wider: 0.28em;

  /* ---------- Spacing (8px ritme) ---------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --space-9: 9rem;

  /* ---------- Layout ---------- */
  --container-max: 78rem;
  --container-pad: clamp(1.25rem, 2vw + 0.5rem, 3rem);
  --header-height: 5.5rem;

  /* ---------- Vorm & beweging ---------- */
  --radius-sm: 1px;
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 220ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;

  /* ---------- Z-index schaal ---------- */
  --z-grid: 0;
  --z-content: 10;
  --z-header: 50;
  --z-overlay: 80;
}
/* Reset & basislagen */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  /* Achtergrondkleur + raster komen van .blueprint-grid (fixed, z-index 0)
     zodat donkere secties het raster laten doorschemeren en lichte
     (papier) secties het met hun eigen ondergrond volledig afdekken. */
  background: none;
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: 1px solid var(--color-line-strong);
}

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

/* ---------- Toegankelijkheid ---------- */

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-3);
  z-index: var(--z-overlay);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: top var(--duration-fast) var(--ease-soft);
}

.skip-link:focus {
  top: var(--space-3);
}

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

/* Verberg visueel, blijf beschikbaar voor screenreaders */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Structuur: container, header, footer, sectie-ritme, grids */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  position: relative;
}

main {
  position: relative;
  z-index: var(--z-content);
}

.section {
  position: relative;
  padding-block: var(--space-8);
}

.section--tight {
  padding-block: var(--space-6);
}

.section--paper {
  background: var(--color-paper);
  color: var(--color-text-on-paper);
}

.section--divider {
  border-top: 1px solid var(--color-line);
}

.section--paper.section--divider {
  border-top: 1px solid var(--color-line-on-paper);
}

/* ---------- Blueprint achtergrondraster ---------- */

.blueprint-grid {
  position: fixed;
  inset: 0;
  z-index: var(--z-grid);
  pointer-events: none;
  overflow: hidden;
  background: var(--color-ink);
}

.blueprint-grid__layer {
  position: absolute;
  inset: -10% -10%;
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  will-change: transform;
}

.blueprint-grid__layer--fine {
  background-image:
    linear-gradient(var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.4;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Bewust geen backdrop-filter hier: filter/backdrop-filter op een
     voorouder creëert een containing block voor "position: fixed"-
     kinderen, waardoor het fixed mobile-menu (.site-nav, hieronder)
     niet meer relatief aan de viewport zou positioneren maar aan deze
     header-balk - met een doorzichtig, kapot menu als gevolg. */
  background: rgba(15, 15, 14, 0.97);
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-height);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.site-header__logo img {
  height: 2.1rem;
  width: auto;
  filter: invert(1) brightness(1.15);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-paper-dim);
  transition: color var(--duration-fast) var(--ease-soft);
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-draw);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-paper);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  transform: scaleX(1);
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-paper);
}

.site-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--color-paper);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
}

.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--color-paper);
  width: 100%;
  transition: transform var(--duration-fast) var(--ease-soft), opacity var(--duration-fast) var(--ease-soft);
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--color-ink);
    z-index: var(--z-overlay);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft), visibility 0s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6) var(--container-pad);
  }

  .site-nav__list a {
    font-size: var(--fs-md);
  }

  body.nav-is-open .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  body.nav-is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

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

.site-footer {
  position: relative;
  background: var(--color-ink-deep);
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-7) var(--space-5);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}

.site-footer__brand .site-footer__logo img {
  height: 1.9rem;
  filter: invert(1) brightness(1.15);
  margin-bottom: var(--space-3);
}

.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-paper-dim);
  text-transform: uppercase;
  max-width: 18rem;
}

.site-footer__col h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-tint);
  margin-bottom: var(--space-3);
}

.site-footer__col address,
.site-footer__col p {
  font-style: normal;
  color: var(--color-paper-dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}

.site-footer__col a:hover {
  color: var(--color-accent-tint);
}

.site-footer__social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-paper-dim);
  transition: border-color var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}

.site-footer__social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-tint);
  transform: translateY(-2px);
}

.site-footer__social span {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-paper-faint);
}

@media (max-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-4);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- Grids ---------- */

.grid {
  display: grid;
  gap: var(--space-5);
}

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

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

@media (max-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }
}
/* Herbruikbare componenten: knoppen, kaarten, vorm, maatvoering-decoratie */

/* ---------- Eyebrow / maatvoering-labels ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-tint);
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--color-accent);
}

.section--paper .eyebrow {
  color: var(--color-accent-deep);
}

.blueprint-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-paper-faint);
}

/* ---------- Sectiekoppen ---------- */

.section-head {
  max-width: 42rem;
  margin-bottom: var(--space-7);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: var(--fs-xl);
}

.section-head p {
  margin-top: var(--space-4);
  color: var(--color-paper-dim);
  font-size: var(--fs-md);
  max-width: 36rem;
}

.section--paper .section-head p {
  color: var(--color-muted-on-paper);
}

/* ---------- Maatlijn (dimension line) als decoratief element ---------- */

.dimension-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  color: var(--color-paper-faint);
}

.dimension-line__rule {
  flex: 1;
  position: relative;
  height: 1px;
  background: var(--color-line-strong);
}

.dimension-line__rule::before,
.dimension-line__rule::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--color-line-strong);
}

.dimension-line__rule::before {
  left: 0;
}

.dimension-line__rule::after {
  right: 0;
}

.dimension-line__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid var(--color-line-strong);
  color: var(--color-paper);
  transition: border-color var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft), background var(--duration-fast) var(--ease-soft);
}

.btn::before,
.btn::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-soft);
}

.btn::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.btn::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-tint);
}

.btn:hover::before,
.btn:hover::after,
.btn:focus-visible::before,
.btn:focus-visible::after {
  border-color: var(--color-accent);
}

.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-tint);
  color: var(--color-accent-ink);
}

.section--paper .btn {
  color: var(--color-text-on-paper);
  border-color: var(--color-line-on-paper-strong);
}

.section--paper .btn:hover {
  color: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
}

.btn__arrow {
  transition: transform var(--duration-fast) var(--ease-soft);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* ---------- Kaarten (diensten / specialisaties) ---------- */

.card {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  background: linear-gradient(180deg, var(--color-ink-soft), var(--color-ink));
  transition: border-color var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft);
}

.card:hover {
  border-color: var(--color-line-accent);
  transform: translateY(-4px);
}

.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent-tint);
  letter-spacing: var(--ls-wide);
}

.card__title {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
}

.card__text {
  margin-top: var(--space-3);
  color: var(--color-paper-dim);
}

.section--paper .card {
  background: #fff;
  border-color: var(--color-line-on-paper);
}

.section--paper .card__text {
  color: var(--color-muted-on-paper);
}

/* ---------- Prijskaarten (pakketten) ---------- */

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-line-on-paper);
  background: #fff;
}

.pricing-card--featured {
  border-color: var(--color-accent-deep);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-0.75rem);
  box-shadow: 0 30px 60px -25px rgba(20, 20, 20, 0.4);
}

.pricing-card--featured .pricing-card__text,
.pricing-card--featured .pricing-card__item {
  color: var(--color-paper-dim);
}

.pricing-card--featured .pricing-card__price {
  color: var(--color-accent-tint);
}

.pricing-card__flag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.pricing-card__name {
  font-size: var(--fs-lg);
}

.pricing-card__text {
  margin-top: var(--space-2);
  color: var(--color-muted-on-paper);
  min-height: 3rem;
}

.pricing-card__divider {
  margin-block: var(--space-4);
  height: 1px;
  background: var(--color-line-on-paper-strong);
}

.pricing-card--featured .pricing-card__divider {
  background: var(--color-line);
}

.pricing-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.pricing-card__item {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-muted-on-paper);
}

.pricing-card__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

.pricing-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-accent-deep);
  margin-bottom: var(--space-4);
}

.pricing-card__price span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-muted-on-paper);
  font-weight: 400;
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
  letter-spacing: 0.06em;
}

.pricing-card--featured .pricing-card__price span {
  color: var(--color-paper-faint);
}

/* ---------- Foto-placeholders (4:3) ---------- */

.photo-placeholder {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background:
    repeating-linear-gradient(135deg, var(--color-line) 0 1px, transparent 1px 14px),
    var(--color-ink-soft);
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
}

/* Portretfoto's: staand formaat past beter dan de standaard 4:3-liggende box. */
.photo-placeholder--portrait {
  aspect-ratio: 3 / 4;
}

.section--paper .photo-placeholder {
  background:
    repeating-linear-gradient(135deg, var(--color-line-on-paper) 0 1px, transparent 1px 14px),
    #fff;
  border-color: var(--color-line-on-paper);
}

.photo-placeholder__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-paper-faint);
}

/* Zodra een <img> in de placeholder staat vult die de hele 4:3-box. */
.photo-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- SVG lijntekeningen: draw-on-scroll ---------- */

.line-art {
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
  Geen "stroke: currentColor" hier: elke <g> in svg-art.js zet zijn eigen
  stroke-kleur via style="stroke:var(--color-...)", en die erft normaal
  door naar de kindelementen. Een regel hier zou die overerving juist
  doorbreken (een waarde die direct op een element staat wint altijd van
  een geërfde waarde, ongeacht specificiteit).
*/
.line-art path,
.line-art line,
.line-art polyline,
.line-art circle,
.line-art rect {
  fill: none;
  /*
    Bewust geen vector-effect:non-scaling-stroke: deze SVG's worden via
    width:100% flink opgeschaald t.o.v. hun (kleine) viewBox. Met
    non-scaling-stroke wordt het stroke-dasharray/-dashoffset (gezet op
    basis van getTotalLength() in viewBox-eenheden) in een ándere
    schaalruimte toegepast dan het pad zelf - de "volledige lengte" dekt
    daardoor maar een deel van het zichtbare pad en de teken-animatie
    lijkt halverwege vast te lopen, ook al staat dashoffset al op 0.
  */
}

.draw-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/*
  Hero-plattegrond (.line-art--plan): de annotaties (ruimtelabels, maten,
  titelblok) beginnen verborgen en worden door initHeroPlan onthuld zodra
  hun lijnen getekend zijn. Bij no-js of reduced-motion staan ze er meteen.
*/
.line-art--plan .anno {
  opacity: 0;
}

.no-js .line-art--plan .anno {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .line-art--plan .anno {
    opacity: 1;
  }
}

/* ---------- Hoekmarkeringen ---------- */

.corner-marks {
  position: relative;
}

.corner-marks::before,
.corner-marks::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--color-line-accent);
  pointer-events: none;
}

.corner-marks::before {
  top: -9px;
  left: -9px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.corner-marks::after {
  bottom: -9px;
  right: -9px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

/* ---------- Formulier (contact) ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form__field label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-paper-faint);
}

.section--paper .form__field label {
  color: var(--color-muted-on-paper);
}

.form__field input,
.form__field textarea {
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--duration-fast) var(--ease-soft);
}

.section--paper .form__field input,
.section--paper .form__field textarea {
  border-color: var(--color-line-on-paper-strong);
}

.form__field input:focus,
.form__field textarea:focus {
  border-color: var(--color-accent);
}

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

.form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
}

.form__status[data-state="success"] {
  color: var(--color-accent-tint);
}

.section--paper .form__status[data-state="success"] {
  color: var(--color-accent-deep);
}

.form__status[data-state="error"] {
  color: #d98c5f;
}
/*
  Eén terughoudende reveal: tekstkoppen komen rustig omhoog wanneer ze in
  beeld scrollen. Informatieblokken (foto's, kaartenrasters) krijgen géén
  entree-beweging meer - die staan er gewoon. Zonder JS, en bij
  reduced-motion, blijft alles meteen zichtbaar.

  data-reveal-fade / -scale / -stagger blijven als hook in de HTML staan,
  maar verbergen niets meer: ze tonen hun inhoud direct.
*/

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Potlood-hover: lijn die "aangezet" wordt */
.pencil-underline {
  position: relative;
  display: inline-block;
}

.pencil-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-draw);
}

.pencil-underline:hover::after,
.pencil-underline:focus-visible::after {
  transform: scaleX(1);
}
/* Paginaspecifieke lay-outpatronen, herbruikbaar over de site */

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

.hero {
  position: relative;
  padding-block: var(--space-8) var(--space-7);
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.hero h1 {
  font-size: var(--fs-2xl);
  max-width: 18ch;
}

.hero__lede {
  margin-top: var(--space-5);
  max-width: 32rem;
  font-size: var(--fs-md);
  color: var(--color-paper-dim);
}

.hero__actions {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hero__art {
  position: relative;
}

.hero__meta-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__art {
    order: -1;
  }
}

/* ---------- Page header (niet-home pagina's) ---------- */

.page-header {
  padding-block: var(--space-8) var(--space-6);
  position: relative;
}

.page-header h1 {
  font-size: var(--fs-2xl);
  max-width: 24ch;
}

.page-header__lede {
  margin-top: var(--space-4);
  max-width: 38rem;
  font-size: var(--fs-md);
  color: var(--color-paper-dim);
}

.page-header__actions {
  margin-top: var(--space-5);
}

/* ---------- Split (tekst + beeld, beide richtingen) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.split--reverse > *:first-child {
  order: 2;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }

  .split--reverse > *:first-child {
    order: 0;
  }
}

/* ---------- Galerij (projecten) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gallery__item figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-paper-faint);
}

@media (max-width: 960px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* ---------- CTA-band (afsluitend blok vóór footer) ---------- */

.cta-band {
  position: relative;
  padding-block: var(--space-7);
  text-align: center;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.cta-band h2 {
  font-size: var(--fs-xl);
  max-width: 28ch;
  margin-inline: auto;
}

.cta-band p {
  margin-top: var(--space-4);
  color: var(--color-paper-dim);
  max-width: 34rem;
  margin-inline: auto;
}

.cta-band__actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* ---------- Contactpagina ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-info__block h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-tint);
  margin-bottom: var(--space-2);
}

.contact-info__block address,
.contact-info__block p {
  font-style: normal;
  color: var(--color-paper-dim);
}

.contact-info__block a:hover {
  color: var(--color-accent-tint);
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}