/* =========================================================================
   juliaharinck.nl — productie-stylesheet
   Vertaald uit de designreferentie naar schone, class-gebaseerde CSS.
   Kleuren/typografie/spacing komen uit tokens.css (CSS custom properties).
   Data-gedreven waarden (accentkleuren, rotaties) komen via inline
   custom properties (--accent, --rot, ...), nooit via inline styling.
   ========================================================================= */

/* ---------- Fonts (lokaal, geen externe requests) ---------- */
@font-face{font-family:'Mikela';src:url('../fonts/MikelaLight.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Mikela';src:url('../fonts/MikelaRegular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Mikela';src:url('../fonts/MikelaBold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Larosa Sans';src:url('../fonts/LarosaLight.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Larosa Sans';src:url('../fonts/LarosaRegular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Larosa Sans';src:url('../fonts/LarosaMedium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Larosa Sans';src:url('../fonts/LarosaBold.woff2') format('woff2');font-weight:700;font-display:swap;}
/* Variabele fonts: één bestand dekt het hele gewichtsbereik */
@font-face{font-family:'Quicksand';src:url('../fonts/Quicksand.woff2') format('woff2');font-weight:400 700;font-display:swap;}
/* Verkleinde subsets (tools: fonttools pyftsubset): Jost alleen vet + Latijnse tekens, voor de
   stempels op de kaarten (6 KB i.p.v. 27 KB); Caveat Latijn zonder contextuele varianten (25 KB i.p.v. 51 KB). */
@font-face{font-family:'Jost';src:url('../fonts/Jost.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Caveat';src:url('../fonts/Caveat.woff2') format('woff2');font-weight:600;font-display:swap;}

/* --p (scrollvoortgang hero, main.js) erft niet: alleen kaart en schaduw rekenen ermee */
@property --p{syntax:'<number>';inherits:false;initial-value:0;}

/* ---------- Reset / basis ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:500;
  line-height:var(--lh-body);
  color:var(--content);
  background:var(--surface);
  overflow-x:hidden;
  overflow-x:clip;   /* clip i.p.v. hidden waar ondersteund: maakt geen scrollcontainer (sticky blijft werken) */
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
img{max-width:100%;}

/* Tekstselectie in huisstijl: blush met inkt i.p.v. systeemblauw */
::selection{background:var(--blush);color:var(--ink);}

/* Geen zichtbare scrollbalk op de pagina (scrollen werkt gewoon: wiel, trackpad, toetsen,
   vegen). Alleen de pagina zelf; tekstvakken houden hun scrollbalk. */
html{scrollbar-width:none;}
html::-webkit-scrollbar{display:none;}
a{color:var(--heading);text-decoration:none;}
h1,h2,h3,p{margin:0;}
button{font-family:inherit;}
.svg-defs{position:absolute;}

/* Nette regelafbreking: koppen gebalanceerd, lopende tekst zonder los woord op de laatste regel */
h1,h2,h3,h4{text-wrap:balance;}
p,li,figcaption,blockquote,dd{text-wrap:pretty;}

/* Tekstselectie in de huisstijl */
::selection{background:var(--terracotta);color:var(--cream);}
::-moz-selection{background:var(--terracotta);color:var(--cream);}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--terracotta);color:var(--cream);padding:10px 16px;border-radius:8px;transition:top .2s;}
.skip-link:focus{top:8px;}

/* Focus-zichtbaarheid */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:3px;
}

/* ---------- Herbruikbare bouwstenen ---------- */
.eyebrow{
  font-family:var(--font-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--eyebrow);
}
.eyebrow--terra{color:var(--heading);}
.eyebrow--light{color:var(--blush);}
.eyebrow--row{display:inline-flex;align-items:center;gap:9px;}
.eyebrow-row{display:flex;align-items:center;gap:9px;margin-bottom:8px;}

.section-title{
  font-family:var(--font-display);font-weight:400;color:var(--heading);
  line-height:1.02;
}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer;
  transition:transform var(--dur-fast),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast);}
.btn--pill{border-radius:var(--r-pill);padding:15px 32px;}
.btn--terra{background:var(--terracotta);color:#fff;padding:14px 28px;font-size:14px;
  box-shadow:0 8px 22px rgba(167,83,72,.24);}
.btn--terra:hover{transform:translateY(-2px);background:var(--flame);}

.social-btn{width:34px;height:34px;flex:none;border-radius:9px;background:var(--terracotta);
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:transform .2s,background .2s,color .2s;}
.social-btn:hover{transform:translateY(-2px);color:#fff;}
.social-btn--linkedin:hover{background:var(--linkedin);}
.social-btn--instagram:hover{background:var(--instagram);}
.social-btn--mail:hover,.social-btn--phone:hover{background:var(--terracotta);}

.social-btn--glass{width:40px;height:40px;border-radius:10px;background:rgba(251,246,242,.16);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}

/* Scroll-reveal — alleen verbergen als JS aanstaat (anders altijd zichtbaar) */
.js .reveal{opacity:0;transform:translateY(34px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.js .reveal.in{opacity:1;transform:none;}
/* Bij een herstelde scrollpositie (refresh midden op de pagina) verschijnen al-zichtbare
   secties direct: voorkomt een burst van zware sectie-transities terwijl men al hovert. */
.js .reveal--instant{transition:none;}

/* Ankerlinks (menu, 'Kijk wat ik doe', 'Bel of mail'): de kop landt op ±96px, onder de vaste
   menubalk. De secties hebben zelf al clamp(50px,7vw,100px) bovenmarge; de scroll-margin vult
   alleen aan wat daaraan ontbreekt (desktop 0, tablet ±40px, telefoon 46px). */
section[id],header[id]{scroll-margin-top:clamp(0px,96px - 7vw,46px);}
#direct{scroll-margin-top:96px;}

/* =========================================================================
   STICKY NAV
   ========================================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;padding:14px clamp(14px,4vw,28px);
  /* Weggeschoven is ook onbereikbaar voor Tab en schermlezers (visibility). Bij verbergen schakelt
     visibility pas ná het uitschuiven om; bij tonen meteen. */
  transform:translateY(-135%);visibility:hidden;
  transition:transform var(--dur-move) var(--ease),visibility 0s linear var(--dur-move);}
.nav.show{transform:translateY(0);visibility:visible;transition:transform var(--dur-move) var(--ease),visibility 0s;}
.nav__inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(160deg,var(--nav-bg1),var(--nav-bg2));
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  border:1px solid var(--nav-border);border-radius:var(--r-nav);padding:10px 14px 10px 22px;
  box-shadow:var(--sh-nav),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 2px rgba(167,83,72,.06);}
.nav__logo{display:block;width:104px;height:36px;}
.nav__logo img{width:100%;height:100%;object-fit:contain;object-position:left center;}
.nav__links{display:flex;align-items:center;gap:18px;}
.nav__link{font-size:15px;color:var(--heading);font-weight:500;transition:color .2s;}
.nav__link:hover{color:var(--flame);}
.nav__social{display:flex;align-items:center;gap:10px;}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{padding:20px;}
.hero__card{position:relative;border-radius:var(--r-hero);overflow:hidden;overflow:clip;box-shadow:var(--sh-hero);
  /* svh (kleine schermhoogte) i.p.v. dvh: dvh groeit op iOS mee als de adresbalk bij het scrollen
     inklapt, waardoor de hero langer werd en de foto 'inzoomde'. svh blijft vast. vh = fallback. */
  min-height:calc(100vh - 40px);min-height:calc(100svh - 40px);display:flex;flex-direction:column;}
.hero__photo{position:absolute;inset:0;pointer-events:none;
  /* Kleurvlak zolang er geen assets/hero.jpg is */
  background:linear-gradient(120deg,#7a3b30 0%,#a75348 38%,#c7867e 66%,#e6a52c 100%);
  background-size:cover;background-position:center;}
/* ---- Hero groeit met de scroll van kaart naar volledig scherm (Apple TV-achtig) ----
   Alleen met JS en zonder 'minder beweging' (boot.js zet .hero-x); anders blijft het de kaart.
   De kaart is nu al schermvullend opgemaakt; een knipmasker (clip-path) laat in rust alleen het
   'kaartvenster' zien (marge --hx-pad, hoeken --r-hero). main.js zet --p van 0 → 1 over de eerste
   ~120px scroll: het masker groeit naar het hele scherm, terwijl foto, tekst en knoppen exact op
   hun plek in de hero blijven. De pagina scrolt intussen gewoon mee (de hero blijft níét staan:
   dat kostte scrollafstand waarin niets bewoog). De schaduw zit op een aparte laag
   (.hero__shade), want clip-path knipt een box-shadow weg. */
.hero__shade{display:none;}
.hero-x .hero{padding:0;--hx-pad:20px;}
.hero-x .hero__stage{position:relative;}
.hero-x .hero__card{min-height:100vh;min-height:100svh;border-radius:0;box-shadow:none;will-change:clip-path;
  clip-path:inset(calc(var(--hx-pad) * (1 - var(--p,0))) round calc(var(--r-hero) * (1 - var(--p,0))));}
/* De schaduw blijft op kaartmaat en vervaagt alleen (opacity is goedkoop: geen layout en geen
   nieuwe blur per frame); hij is weg voordat het masker merkbaar gegroeid is. */
.hero-x .hero__shade{display:block;position:absolute;z-index:0;pointer-events:none;
  inset:var(--hx-pad);border-radius:var(--r-hero);
  box-shadow:var(--sh-hero);opacity:calc(1 - var(--p,0) * 3);}
/* tekst en knoppen houden dezelfde afstand tot de schermrand als in de kaart */
.hero-x .hero__bar{margin:var(--hx-pad) var(--hx-pad) 0;}
.hero-x .hero__content{margin-left:var(--hx-pad);margin-bottom:var(--hx-pad);}
/* met foto: liggende uitsnede op desktop/tablet, eigen kleine versie op mobiel */
.hero__photo.has-photo{background-image:var(--hero-d);}
@media(max-width:640px){ .hero__photo.has-photo{background-image:var(--hero-m,var(--hero-d));background-position:var(--hero-pos,center);} }
/* WebP (kleiner) waar de browser image-set met type() kent; anders blijft de JPG hierboven. */
@supports (background-image:image-set(url("x.webp") type("image/webp"))){
  .hero__photo.has-webp{background-image:image-set(var(--hero-dw) type("image/webp"),var(--hero-d) type("image/jpeg"));}
  @media(max-width:640px){ .hero__photo.has-webp{background-image:image-set(var(--hero-mw) type("image/webp"),var(--hero-m) type("image/jpeg"));} }
}
.hero__overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(74,46,40,.66) 0%,rgba(74,46,40,.32) 44%,rgba(74,46,40,.06) 72%);}
/* Met foto: extra zwart verloop vanuit de rechterbovenhoek, zodat de contacticonen en de
   taallink ook op een lichte foto leesbaar blijven. */
.hero__photo.has-photo + .hero__overlay{
  background:
    /* donker verloop onderin: tekst blijft leesbaar op de lichte vloer van de foto */
    linear-gradient(to top,rgba(26,15,11,.62) 0%,rgba(26,15,11,.3) 38%,rgba(26,15,11,0) 64%),
    radial-gradient(ellipse clamp(360px,46vw,700px) clamp(240px,30vw,400px) at 100% 0%,
      rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 100%),
    linear-gradient(120deg,rgba(74,46,40,.66) 0%,rgba(74,46,40,.32) 44%,rgba(74,46,40,.06) 72%);}
/* flex-start: logo lijnt uit met de iconenrij (niet met de taallink daaronder) */
.hero__bar{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;
  padding:36px clamp(22px,3.5vw,44px);}
.hero__logo{display:block;width:118px;height:42px;}
.hero__logo img{width:100%;height:100%;object-fit:contain;object-position:left center;}
.hero__social{display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.hero__icons{display:flex;align-items:center;gap:10px;}
.hero__lang{color:var(--cream);font-family:var(--font-label);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1.5px solid rgba(251,246,242,.55);padding-bottom:2px;
  transition:border-color .2s,color .2s;}
.hero__lang:hover{border-color:var(--ochre);color:#fff;}
/* Links in de balk: logo · lijn · functietitel (titel alleen ≥ 900px, zie onder) */
.hero__brand{display:flex;align-items:center;gap:36px;}
.hero__sep{width:1.5px;height:34px;background:rgba(251,246,242,.5);}
/* Lijn optisch precies in het midden: het logobestand heeft rechts ±23px lege ruimte (de
   tekening is smaller dan het 118px-vak) en de F van de titel begint ±1,5px na zijn vak.
   Zonder correctie was het wit links van de lijn ±23px groter dan rechts; nu aan beide kanten gelijk (37,5px). */
@media(min-width:900px){ .hero__brand .hero__logo{margin-right:-21.6px;} }
.hero__role{margin:0;font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1.35;color:var(--cream);}
.hero__content{position:relative;z-index:3;margin-top:auto;padding:clamp(28px,4vw,64px);max-width:700px;}
/* Hero-tekst (ontwerp ronde 3 desktop / 5a mobiel):
   groet in handschrift → naam → (labels, < 900px) → motto in kapitalen → knoppen.
   Desktop schaalt lineair tussen 900 en 1440px; daaronder vaste maten (zie media query). */
.hero__title{font-family:var(--font-display);font-weight:400;color:var(--cream);line-height:1;margin:0;
  font-size:clamp(46px,6.4vw,92px);}
.hero__greeting{display:block;font-family:var(--font-hand);font-weight:600;font-size:clamp(36px,3.9vw,56px);
  line-height:1;color:var(--blush);}
.hero__greeting-r{display:inline-block;transform:rotate(-4deg);transform-origin:left center;}
/* het masker van de gekantelde groet krijgt bovenin lucht (anders knipt hij de opstaande kant af) */
.hvw.hero__greeting-w{--gap:6px;padding-top:.3em;margin-top:-.3em;}
.hero__name-w{--gap:0px;}
.hero__name{display:block;white-space:nowrap;}
.hvw.hero__labels-w{display:none;}
.hero__labels{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.hero__labels li{font-family:var(--font-body);font-weight:700;font-size:13px;line-height:1;color:var(--cream);
  padding:7px 12px;border:1.5px solid rgba(251,246,242,.6);border-radius:var(--r-pill);white-space:nowrap;}
.hero__tagline{font-family:var(--font-label);font-weight:400;font-size:clamp(18px,1.32vw,19px);line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--cream);margin:8px 0 0 8px;white-space:nowrap;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-top:40px;}
.hero__ctas .btn{font-weight:700;font-size:16px;}
.hero .btn--pill{background:var(--cream);color:var(--terracotta);box-shadow:0 8px 22px rgba(0,0,0,.2);padding:17px 30px;}
.hero .btn--pill:hover{transform:translateY(-3px);background:var(--flame);color:#fff;}
.btn--underline{color:var(--cream);border-bottom:2px solid transparent;padding-bottom:3px;line-height:1;}
.hero .btn--underline{border-bottom-color:rgba(251,246,242,.5);}
.btn--underline:hover,.hero .btn--underline:hover{border-color:var(--ochre);}
@media(min-width:900px){
  /* extra verloop linksboven: de functietitel in de balk blijft leesbaar op een lichte foto */
  .hero__photo.has-photo + .hero__overlay{background:
    linear-gradient(160deg,rgba(74,46,40,.40) 0%,rgba(74,46,40,0) 24%),
    linear-gradient(to top,rgba(26,15,11,.62) 0%,rgba(26,15,11,.3) 38%,rgba(26,15,11,0) 64%),
    radial-gradient(ellipse clamp(360px,46vw,700px) clamp(240px,30vw,400px) at 100% 0%,
      rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 100%),
    linear-gradient(120deg,rgba(74,46,40,.66) 0%,rgba(74,46,40,.32) 44%,rgba(74,46,40,.06) 72%);}
}
/* Kleinere desktops/tablets (tot 1280px): Julia zit in de foto dichter bij het tekstblok. Het motto
   breekt dan na de komma (smaller blok) en de foto schuift iets naar rechts waar de uitsnede dat
   toelaat — zo loopt de tekst niet over haar heen. */
@media(min-width:641px) and (max-width:1279px){ .hero__photo.has-photo{background-position:30% center;} }
@media(min-width:900px) and (max-width:1279px){
  .hero__tagline{white-space:normal;}
  .hero .hero__tagline .hvw,.hero .hero__tagline .tl-part{display:block;}
}
@media(max-width:899px){
  /* titel niet in de balk maar als labels onder de naam (één keer zichtbaar per breedte) */
  .hero__sep,.hero__role{display:none;}
  .hvw.hero__labels-w{display:block;--gap:0px;margin-top:12px;}
  .hero__title{font-size:46px;}
  .hero__greeting{font-size:36px;}
  .hero__tagline{font-size:18px;margin:10px 0 0 3px;white-space:normal;}
  .hero .hero__tagline .hvw,.hero .hero__tagline .tl-part{display:block;}   /* vaste breuk na de komma */
  .hero__ctas{margin-top:26px;gap:20px;}
  .hero__ctas .btn{font-size:15px;}
  .hero .btn--pill{padding:14px 24px;}
  /* extra verloop onderin voor de leesbaarheid van het hogere tekstblok */
  .hero__photo.has-photo + .hero__overlay{background:
    linear-gradient(0deg,rgba(74,46,40,.74) 0%,rgba(74,46,40,0) 48%),
    linear-gradient(to top,rgba(26,15,11,.62) 0%,rgba(26,15,11,.3) 38%,rgba(26,15,11,0) 64%),
    radial-gradient(ellipse clamp(360px,46vw,700px) clamp(240px,30vw,400px) at 100% 0%,
      rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 100%),
    linear-gradient(120deg,rgba(74,46,40,.66) 0%,rgba(74,46,40,.32) 44%,rgba(74,46,40,.06) 72%);}
}
/* ---- Hero-entree: tekst schuift van achter een onzichtbare lijn omhoog ----
   .hvw is het masker, .hvu het element dat erin beweegt. De padding geeft lucht voor
   staartletters (g, j, y); de negatieve marge compenseert die zodat de bestaande
   spacing exact gelijk blijft. Alleen actief als de animatie gaat spelen (hero-anim,
   gezet vóór de eerste paint): zonder JS of bij herbezoek staat de tekst er meteen. */
/* De padding geeft lucht voor staartletters; de negatieve marge heft die weer op zodat
   de layout exact gelijk blijft. --gap is de échte witruimte onder de regel. */
.hvw{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:calc(var(--gap,0px) - .14em);}
/* tagline: de twee delen staan op desktop náást elkaar (één regel).
   inline-block op het deel zelf: op een inline element werkt transform niet. */
.hero__tagline .hvw{display:inline-block;vertical-align:top;}
.hero__tagline .tl-part{display:inline-block;}
.hero-anim .hvu{opacity:0;will-change:transform;}
.hero-anim .hero__ctas .btn{opacity:0;}
/* letters van de naam: elk in een eigen mini-masker (JS zet deze op). De negatieve marge heft de
   padding (lucht voor staartletters) weer op, net als bij .hvw: anders is de regel tijdens de
   entree .12em hoger en zakt het onderaan vastgezette tekstblok bij het opruimen een stukje. */
.hero__name .hvl{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;}
.hero__name .hvl>span{display:inline-block;}

/* =========================================================================
   GEWERKT VOOR
   ========================================================================= */
.brands{padding:clamp(32px,4vw,56px) clamp(20px,5vw,64px) clamp(60px,7vw,100px);text-align:center;}
.brands__label{margin:0 0 26px;}
/* Het scheidingsteken zweeft midden in de tussenruimte (absoluut) en neemt zelf geen plek in:
   tonen/verbergen verandert de regelindeling dus niet. Anders past een merk zónder teken nét
   wel op de vorige regel en mét niet, en blijft de indeling omslaan. --sep-gap = ruimte
   tussen twee merken (incl. het teken). */
.brands__row{--sep-gap:72px;max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;
  gap:16px var(--sep-gap);align-items:center;line-height:1;}
.brand{position:relative;display:inline-flex;align-items:center;white-space:nowrap;}
.brand__sep{position:absolute;left:calc(var(--sep-gap) / -2);top:50%;transform:translate(-50%,-50%);
  color:var(--ochre);font-size:16px;}
.brand__name{font-family:var(--font-display);font-size:clamp(22px,2.6vw,32px);color:var(--heading);line-height:1;}
/* De merkenrij staat in light én dark op dezelfde achtergrond als de hero (de pagina),
   zodat die twee naadloos in elkaar overlopen. (Vroeger in dark een lichtere tint.) */

/* =========================================================================
   OVER MIJ (contrast)
   ========================================================================= */
.about{position:relative;overflow:hidden;overflow:clip;color:var(--cream);
  background:var(--about-grad);
  padding:clamp(56px,8vw,110px) clamp(20px,5vw,64px);}
.about__texture{position:absolute;inset:0;background-image:url('../assets/tex-grain.png');
  background-image:image-set(url('../assets/tex-grain.webp') type('image/webp'),url('../assets/tex-grain.png') type('image/png'));
  background-size:200px 200px;opacity:.1;pointer-events:none;}
.about__vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%,transparent 58%,rgba(30,12,9,.32));}
/* Polaroid + tekst als één blok, horizontaal gecentreerd (gelijke marge links/rechts) */
.about__grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:max-content minmax(0,480px);
  justify-content:center;align-items:center;column-gap:clamp(48px,6.5vw,104px);row-gap:34px;
  position:relative;z-index:2;}
@media(max-width:900px){
  .about__grid{grid-template-columns:minmax(0,480px);justify-content:center;}
}
.about__text .eyebrow{margin:0 0 16px;}
.about__title{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4vw,50px);
  margin:0 0 22px;line-height:1.02;}
.about__para{font-size:15px;line-height:1.8;color:var(--text-on-dark);margin:0 0 18px;}
.about__para:last-child{margin-bottom:0;}
/* Knop naar het cv (nu LinkedIn): rustige omlijnde pil op de donkere achtergrond */
.about__cv{margin-top:14px;padding:12px 24px;font-size:14px;color:var(--cream);
  border:1.5px solid rgba(251,246,242,.5);}
.about__cv:hover{background:var(--cream);border-color:var(--cream);color:var(--terracotta);transform:translateY(-2px);}

/* Polaroid — als Instax Mini-fotootje.
   Foto in de Instax-verhouding (46:62); de randen volgen de echte film (opzij smal, boven iets
   meer, onder breed om op te schrijven), ±20% smaller dan het origineel zodat het kader
   subtieler is. Alles schaalt mee met --pw, de breedte van de foto. */
.polwrap{--pw:min(257px,62vw);position:relative;display:inline-block;justify-self:center;}
/* naast de tekst (breed scherm): polaroid iets hoger dan het midden van het tekstblok */
@media(min-width:901px){ .polwrap{align-self:start;margin-top:56px;} }
/* De hint staat buiten de kaart (schudt dus niet mee bij het klikken), maar de kaart is -3°
   gekanteld om zijn eigen midden; het bijschrift schuift daardoor naar rechts. --tip-x
   compenseert dat (afstand midden → bijschrift × sin 3°). */
.poltip{--tip-x:calc(var(--pw) * .035);
  position:absolute;bottom:-12px;left:50%;
  transform:translate(calc(-50% + var(--tip-x)),100%) rotate(-3deg);
  font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.04em;color:#e7b6a8;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:5;}
.polwrap:hover .poltip,.polwrap:focus-within .poltip{opacity:1;}
/* Schaduw als losse laag om de kaart: drop-shadow wordt ná het kantelen en wiegen van de kaart
   berekend, dus de schaduw volgt de vorm maar valt altijd dezelfde kant op (licht van
   linksboven), zoals bij een echte foto. Strak vlak onder de rand + zacht en ver weg. */
.polschaduw{display:inline-block;
  filter:drop-shadow(0 1px 1px rgba(30,12,9,.22)) drop-shadow(5px 12px 14px rgba(30,12,9,.24));}
.polaroid{position:relative;display:inline-block;border:none;cursor:pointer;
  width:calc(var(--pw) * 1.14);
  padding:calc(var(--pw) * .113) calc(var(--pw) * .07) 0;
  /* koel, mat wit fotopapier (zoals echte Instax-film), bijna rechte hoeken */
  /* licht valt van linksboven: links iets lichter dan rechts */
  background:linear-gradient(100deg,#f6f7f5 0%,#f1f2f0 55%,#e9eae7 100%);
  border-radius:3px;
  /* alleen een heel dunne contactrand; de echte schaduw zit op .polschaduw (zie hieronder) */
  box-shadow:0 0 0 .5px rgba(30,12,9,.12);
  transform:rotate(-3deg);transform-origin:center;}
/* onderrand: de heel lichte ribbelstructuur van de echte film (waar de chemie in zat) */
.polaroid::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--pw) * .3);
  border-radius:0 0 3px 3px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);}
.polaroid__photo{display:block;width:100%;aspect-ratio:46/62;position:relative;overflow:hidden;
  border-radius:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
/* Instax-kleur: iets zachter contrast, licht opgetilde zwarten, tikje warm (--instax).
   Het 'ontwikkelen' begint donker en kleurloos en eindigt op die kleur; dezelfde reeks
   functies in begin en eind, zodat de overgang vloeiend loopt. */
.polaroid__photo{filter:brightness(1.03) contrast(.9) saturate(.9) sepia(.08);}
.js .polaroid__photo{filter:brightness(0) contrast(.9) saturate(.2) sepia(.08);transition:filter 5.5s ease .2s;}
.js .polaroid.pdev .polaroid__photo{filter:brightness(1.03) contrast(.9) saturate(.9) sepia(.08);}
/* lichte vignettering + opgetilde zwarten, zoals echte instantfilm */
.polaroid__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 55%,rgba(20,10,5,.22) 100%),
    linear-gradient(rgba(60,45,35,.06),rgba(60,45,35,.06));}
.polaroid.pshow{animation:wave 1.8s linear .1s both;}
.polaroid--single{cursor:default;}
.polaroid__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(251,246,242,.9);opacity:0;pointer-events:none;text-align:center;padding:0 14px;z-index:1;}
/* bijschrift in de brede onderrand, met de hand geschreven: op twee regels (balans) en iets
   schuin, zoals je er met een stift op schrijft */
.polaroid__caption{display:flex;align-items:center;justify-content:center;height:calc(var(--pw) * .3);
  padding:0 calc(var(--pw) * .08);font-family:var(--font-hand);text-align:center;text-wrap:balance;
  font-size:calc(var(--pw) * .095);line-height:.95;color:var(--terracotta);
  transform:translateY(calc(var(--pw) * -.0025)) rotate(-4deg);transform-origin:center;}   /* optisch midden van de rand */

/* Foto's onder de vouw: pas laden als de sectie in de buurt komt (main.js zet .near).
   Zonder JavaScript (geen .js) gewoon direct. */
.js .lazy:not(.near) .pcard-ph,
.js .lazy:not(.near) .polaroid__photo,
.js .lazy:not(.near) .about__texture{background-image:none!important;}   /* korrel ook pas bij nadering */

/* Projectverhalen als tekst: staan in de HTML voor zoekmachines en worden door main.js in de
   pop-up gezet. Altijd verborgen; alleen als JavaScript echt uit staat toont een <noscript>-stijl
   in index.php ze onder de kaarten. (Niet afhankelijk van .js: die haalt het vangnet in boot.js
   weg als main.js traag laadt, en dan stonden de verhalen ineens onder de kaarten.) */
.stories{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,64px) clamp(40px,6vw,72px);display:none;gap:28px;}
.story__title{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.1;color:var(--heading);}
.story__meta{margin:4px 0 8px;font-size:13px;color:var(--content-2);}
.story__text{font-size:15px;line-height:1.75;color:var(--content);white-space:pre-line;}

/* =========================================================================
   UITGELICHT WERK — posterdeck
   ========================================================================= */
.work{padding:clamp(52px,7vw,96px) clamp(20px,5vw,64px);}
.work__inner{max-width:1160px;margin:0 auto;}
.work__label{text-align:center;margin:0 0 30px;}
.deck{display:flex;justify-content:center;flex-wrap:wrap;padding:24px 0 12px;}
.c{position:relative;z-index:1;margin-left:-54px;cursor:pointer;border:none;background:transparent;padding:0;
  -webkit-tap-highlight-color:transparent;}
.c:first-child{margin-left:0;}
/* Eén vaste transform-lijst voor alle staten (rust, hover, buren); per staat veranderen alleen
   de variabelen. Zo interpoleert de browser per functie i.p.v. via een matrix en blijft de
   GPU-laag dezelfde. will-change maakt die laag al bij het laden (eerste hover hapert niet).
   --hx opzij · --ty hoogte (rust: --oy) · --tr kanteling (rust: --rot) · --hs schaal */
.cfx{display:block;position:relative;will-change:transform;
  transform:translateX(var(--hx,0px)) translateY(var(--ty,var(--oy,0px))) rotate(var(--tr,var(--rot,0deg))) scale(var(--hs,1));
  transition:transform var(--dur-move) var(--ease),opacity var(--dur-move) var(--ease);}
.svc-card{transform:translateZ(0);}
.c::after{content:'';position:absolute;left:0;right:0;top:-24px;bottom:-46px;z-index:-1;}
/* Focusrand van een werkkaart volgt de (schuine, afgeronde) kaart i.p.v. het rechthoekige
   knopvlak. .focus-stil: focus teruggezet na het sluiten van de pop-up die met muis/vinger
   werd geopend — dan geen zichtbare rand (bij toetsenbordgebruik wél). */
.c:focus-visible{outline:none;}
.c:focus-visible .card{outline:3px solid var(--ochre);outline-offset:4px;}
.c.focus-stil .card{outline:none;}
/* Hover-choreografie via JS-klassen (pointer-events) i.p.v. CSS :hover/:has():
   Safari werkt :hover na een scroll geregeld niet bij (kaart blijft 'hangen',
   buurkaarten reageren niet meer). JS zet: .hov (gehoverde kaart), .hov-l/.hov-r
   (buren links/rechts), .deck--hov (dim de rest). */
.deck--hov .c:not(.hov) .cfx{opacity:.82;}
.c.hov{z-index:20;}
.c.hov .cfx{--ty:-22px;--tr:0deg;--hs:1.05;}
/* stempel: erop draait hij rustig rond (0,8 s), eraf vlotter terug (0,5 s, zie .stamp) */
.c.hov .stamp{transform:rotate(360deg);transition-duration:.8s;}
.c.hov-r .cfx{--hx:84px;}
.c.hov-l .cfx{--hx:-84px;}
.spark{position:absolute;z-index:25;opacity:0;transform:scale(.5);
  transition:opacity .34s var(--ease),transform .34s var(--ease);}
.c.hov .spark-a{opacity:1;transform:rotate(16deg) scale(1);}
.c.hov .spark-b{opacity:1;transform:rotate(-13deg) scale(1);transition-delay:.05s;}

.card{display:block;width:290px;height:398px;border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh-card);position:relative;background:var(--card-bg,#a75348);text-align:left;
  -webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0);backface-visibility:hidden;}
.pcard-ph{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:var(--r-card);}
/* Elke fotolaag op een eigen GPU-laag → de (dure) duotone-filter wordt één keer
   gerasterd en de opacity-fade bij hover is daardoor een goedkope compositor-actie
   i.p.v. elk frame opnieuw filteren (fixt de Safari-hapering). */
/* Kleurversie alleen op apparaten met hover — op touch zie je 'm nooit, dus niet laden. */
.pcard-color{transition:transform var(--dur-emph) var(--ease);transform:translateZ(0);}
@media(hover:hover){ .pcard-color{background-image:var(--img);} }
/* opacity .999 (onzichtbaar verschil): de duotone dekt de kleurlaag dan nét niet
   volledig af, waardoor Safari die onderliggende laag niet mag culleren/purgen —
   anders moet 'ie bij de eerste hover na inactiviteit opnieuw decoderen (hapering). */
.pcard-duo{transition:opacity .55s var(--ease);transform:translateZ(0);opacity:.999;}
.duo0{filter:url(#duo-0);}
.duo1{filter:url(#duo-1);}
.duo2{filter:url(#duo-2);}
.duo3{filter:url(#duo-3);}
.c.hov .pcard-duo{opacity:0;}
.c.hov .pcard-color{transform:scale(1.06) translateZ(0);}
.card__grad{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,0) 32%,rgba(40,18,14,.76) 100%);}
/* max-width houdt het label links van het stempel (14px + 64px rechtsboven + lucht);
   een lang label breekt dan netjes af i.p.v. eronder door te lopen. */
.card__cat{position:absolute;top:16px;left:16px;max-width:calc(100% - 112px);background:var(--cream);color:var(--accent);
  color:color-mix(in srgb,var(--accent) 70%,#2a1410);   /* donkerder: AA-contrast (≥4.5) op crème bij 10px */
  font-size:10px;letter-spacing:.14em;line-height:1.35;text-transform:uppercase;padding:6px 12px;
  border-radius:var(--r-pill);text-wrap:balance;}
.stamp{position:absolute;top:14px;right:14px;width:64px;height:64px;transition:transform .5s var(--ease);}
.card__body{position:absolute;left:18px;right:18px;bottom:20px;}
/* balance: regels even lang ("Pleinbioscoop / 2025 & 2026"), zodat geen woord half
   onder de overlappende buurkaart verdwijnt */
.card__title{display:block;font-family:var(--font-display);font-size:var(--title-size,34px);
  color:var(--cream);line-height:.92;text-wrap:balance;}
.card__role{display:block;margin:6px 0 0;font-size:13px;color:#f2d3cb;}
.card__more{display:inline-block;margin:11px 0 0;font-family:var(--font-label);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  border-bottom:1px solid rgba(251,246,242,.5);padding-bottom:2px;}

/* =========================================================================
   ANDER WERK
   ========================================================================= */
.otherwork{padding:clamp(44px,6vw,84px) clamp(20px,5vw,64px);background:var(--surface-2);}
.otherwork__inner{max-width:1080px;margin:0 auto;}
.otherwork__title{font-size:clamp(26px,3.6vw,42px);margin:0 0 34px;}
.otherwork__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px;}
.otherwork__cat{font-family:var(--font-label);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cat-color,var(--terracotta));font-weight:600;margin:0 0 16px;}
.otherwork__items{display:flex;flex-direction:column;gap:13px;}
.otherwork__name{font-size:15px;font-weight:600;}
.otherwork__role{margin:1px 0 0;font-size:13px;color:var(--content-muted);}

/* =========================================================================
   DIENSTEN
   ========================================================================= */
.services{padding:clamp(50px,7vw,100px) clamp(20px,5vw,64px);}
.services__inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:0.82fr 1.18fr;
  gap:clamp(32px,4.5vw,60px);align-items:center;}
/* (was sticky: schoof 16px mee onder de menubalk; de blokken zijn nauwelijks hoger dan de intro) */
.services__intro .eyebrow{margin:0 0 14px;}
.services__title{font-size:clamp(30px,4.4vw,54px);margin:0 0 20px;}
.services__lead{margin:0 0 26px;font-size:15px;line-height:1.75;color:var(--content-2);max-width:360px;}
/* Alle vier de blokken even groot: minimaal 150px, en anders zo hoog als het blok met de meeste
   tekst (1fr-rijen in een grid zonder vaste hoogte worden gelijk aan de hoogste). De omschrijving
   neemt in rust al ruimte in (opacity 0), dus bij hover verspringt niets. */
.services__grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(150px,1fr);gap:16px;}
.svc-card{position:relative;border-radius:var(--r-tile);padding:24px 26px;overflow:hidden;background:var(--surface-raised);
  box-shadow:var(--sh-tile);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  transform-origin:center;}
/* Dienstblok: volledig gekleurd (verloop uit de JSON: --g1/--g2) met witte titel, ster en
   omschrijving. Zo staat het op telefoon en tablet. Op desktop met muis staat in rust alleen de
   titel en wordt het blok bij hover de lichte versie met omschrijving (zie hieronder). */
.svc-card__ov{position:absolute;inset:0;z-index:1;background:linear-gradient(125deg,var(--g1),var(--g2));}
.svc-card__ct{position:relative;z-index:2;width:100%;}
.svc-card__row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;}
.svc-card__title{flex:1;min-width:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(18px,1.6vw,22px);color:#fff;margin:0;line-height:1.12;word-break:keep-all;}
.svc-card__star{flex:none;transition:transform .5s var(--ease-spring);}
.svc-card__star path{fill:#fff;}
.svc-card:hover .svc-card__star{transform:scale(1.5) rotate(90deg);}   /* ook bij aantikken */
.svc-card__desc{margin-top:9px;padding-right:12px;font-size:13.5px;line-height:1.5;color:#fff;}

/* ---- Desktop met muis: kleur in rust, lichte versie met tekst bij hover ----
   In rust staat de titel midden in het blok (--svc-shift = halve hoogte van de onzichtbare
   omschrijving, gezet door main.js; die neemt al ruimte in, dus bij hover verspringt niets).
   Bij hover: de kleur trekt weg, de titel kleurt mee en schuift omhoog, het blok groeit 4% en
   de ster draait; daarna komt de omschrijving erbij.
   Binnenkomst: main.js zet alle blokken eerst in de lichte staat (.svc-card--demo) en laat ze,
   zodra ze in beeld zijn, één voor één terugkeren naar kleur. Zonder groei en draaiende ster. */
@media(min-width:1100px) and (hover:hover){
  .svc-card__star{opacity:.7;}
  .svc-card__row{transform:translateY(var(--svc-shift,0px));}
  .svc-card__desc{opacity:0;transform:translateY(8px);}

  .svc-card:hover{transform:scale(1.04);z-index:6;box-shadow:var(--sh-tile-hover);}
  .svc-card:hover .svc-card__ov,.svc-card--demo .svc-card__ov{opacity:0;}
  .svc-card:hover .svc-card__title,.svc-card--demo .svc-card__title{color:var(--heading);}
  .svc-card:hover .svc-card__row,.svc-card--demo .svc-card__row{transform:none;}
  .svc-card:hover .svc-card__desc,.svc-card--demo .svc-card__desc{opacity:1;transform:none;color:var(--content-2);}
  .svc-card:hover .svc-card__star,.svc-card--demo .svc-card__star{opacity:1;}
  .svc-card:hover .svc-card__star path,.svc-card--demo .svc-card__star path{fill:var(--g1);}

  /* Overgangen. Regels onder :hover = uitklappen, regels in rust = inklappen.
     Uitklappen: eerst het blok (kleur weg, titel omhoog, groei), vanaf 0,2 s de tekst erbij.
     Inklappen voelt hetzelfde, in omgekeerde volgorde: eerst de tekst weg (0,25 s), dan vanaf
     ±0,1 s alles tegelijk (kleur, titelkleur, titel naar het midden, krimpen, ster). De ster
     verkleurt mee, anders is hij even wit op wit. Beide ±0,6 s; de titel zakt iets sneller. */
  .svc-card{transition:transform .38s var(--ease) .12s,box-shadow .38s ease .12s;}
  .svc-card:hover{transition:transform .38s var(--ease),box-shadow .38s ease;}
  .svc-card__ov{transition:opacity .45s ease .12s;}
  .svc-card:hover .svc-card__ov{transition:opacity .45s ease;}
  .svc-card__title{transition:color .45s ease .12s;}
  .svc-card:hover .svc-card__title{transition:color .35s ease;}
  .svc-card__row{transition:transform .3s var(--ease) .1s;}
  .svc-card:hover .svc-card__row{transition:transform .42s var(--ease);}
  .svc-card__desc{transition:opacity .25s ease,transform .3s ease;}
  .svc-card:hover .svc-card__desc{transition:opacity .3s ease .2s,transform .4s var(--ease) .2s;}
  .svc-card__star{transition:opacity .35s ease .12s,transform .5s var(--ease-spring) .12s;}
  .svc-card:hover .svc-card__star{transition:opacity .35s ease,transform .5s var(--ease-spring);}
  .svc-card__star path{transition:fill .45s ease .12s;}
  .svc-card:hover .svc-card__star path{transition:none;}
}

/* =========================================================================
   CONTACT — ansichtkaart
   ========================================================================= */
/* overflow:CLIP i.p.v. hidden — hidden maakt de sectie stiekem scrollbaar: scrollIntoView
   (preview) en veld-focus zetten dan contact.scrollTop op ~31px, en zodra de kaart bij het
   versturen krimpt klapt die terug naar 0 → alle content in de sectie 'verspringt' 30px.
   clip knipt alleen af en kan níét scrollen. (hidden als fallback voor oude browsers) */
.contact{position:relative;overflow:hidden;overflow:clip;background:var(--contact-grad);
  padding:clamp(56px,8vw,110px) clamp(20px,5vw,64px);}
.contact__inner{max-width:780px;margin:0 auto;text-align:center;}
.contact__title{font-size:clamp(30px,4.4vw,52px);margin:0 0 34px;}
.contact__inner .eyebrow{margin:0 0 8px;}
/* De kaart staat in flow als BLOCK (niet als flex/grid-kind): zo houdt aspect-ratio z'n
   hoogte betrouwbaar vast — óók in Safari, waar aspect-ratio op een flex-kind faalt, de
   sendbox daardoor krimpt en de content bij het versturen verspringt. Bevestiging = overlay. */
.sendbox{position:relative;display:block;min-height:320px;transition:min-height .5s var(--ease);}
.postcard{width:min(660px,100%);margin:0 auto;aspect-ratio:5/3;background:var(--surface-raised-2);border-radius:var(--r-postcard);
  box-shadow:var(--sh-postcard);transform:rotate(-1.5deg);position:relative;display:grid;
  grid-template-columns:1fr 1fr;text-align:left;z-index:2;}
/* Fallback-strook: schuift bij een mislukte verzending achter de kaart vandaan naar beneden,
   in dezelfde rotatie, met een mailto-link die de kaartgegevens meeneemt. Flame = huisstijl-accent. */
/* Vierkante bovenhoeken + extra top-padding: de strook tuckt 42px achter de kaart (lijkt op een
   kaartje dat uit het midden van de kaart schuift) en de tekst centreert in het ZICHTBARE deel
   (padding-top = padding-bottom + tuck), niet in het deel dat onder de kaart doorloopt. */
.cf-fallback{position:absolute;left:50%;bottom:0;z-index:1;width:min(600px,90%);
  transform:translate(-50%,0) rotate(-1.5deg);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),opacity var(--dur-base);
  display:flex;align-items:center;justify-content:center;gap:11px;text-align:center;
  background:var(--flame);color:#fff;border-radius:0 0 16px 16px;padding:57px 24px 15px;
  box-shadow:0 16px 30px rgba(74,46,40,.26);}
.cf-fallback__ico{flex:none;width:22px;height:22px;margin-top:-2px;}
.sendbox.cf-failed .cf-fallback{opacity:1;pointer-events:auto;
  transform:translate(-50%,calc(100% - 42px)) rotate(-1.5deg);}
.cf-fallback__line{margin:0;font-size:14px;font-weight:600;line-height:1.45;color:#fff;white-space:nowrap;}
.cf-fallback__btn{color:#fff;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  transition:opacity .2s;}
.cf-fallback__btn:hover{opacity:.82;}
/* Alleen de 'Liever direct?'-tekst schuift mee omlaag; de sectie-onderkant blijft staan. */
.contact__direct,#cf-status{transition:transform .5s var(--ease);}
.sendbox.cf-failed ~ .contact__direct,
.sendbox.cf-failed ~ #cf-status{transform:translateY(48px);}
/* Langere melding (bv. te veel pogingen): strook over twee regels, 'Liever direct?' schuift verder */
.sendbox.cf-failed--lang .cf-fallback__line{white-space:normal;max-width:470px;}
.sendbox.cf-failed--lang ~ .contact__direct,
.sendbox.cf-failed--lang ~ #cf-status{transform:translateY(70px);}
/* Eigen compositielaag: voorkomt dat de streepjeslijn (sub-pixel op de geroteerde kaart)
   'verspringt' wanneer de knop bij hover/klik hertekent. */
.postcard__divider{position:absolute;left:50%;top:6%;bottom:6%;border-left:2px dashed var(--border);
  transform:translateZ(0);}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.postcard__msg{padding:26px 24px;display:flex;flex-direction:column;position:relative;}
.postcard__msglabel{margin:0 0 10px;font-family:var(--font-label);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--eyebrow);}
.postcard__textarea{flex:1;width:100%;font-family:var(--font-body);font-weight:500;border:none;
  background:transparent;font-size:15px;line-height:1.6;color:var(--content);outline:none;resize:none;}
.postcard__addr{padding:26px 24px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;}
.stampwrap{position:absolute;top:20px;right:34px;width:66px;height:82px;}
.poststempel{position:absolute;top:12px;left:-118px;width:147px;height:78px;max-width:none;transform:rotate(-7deg);
  opacity:0;z-index:2;pointer-events:none;}
.postzegel{position:absolute;top:1px;left:9px;width:100%;height:100%;display:block;}
.postcard__fields{display:flex;flex-direction:column;gap:14px;}
.field{position:relative;}
.cf-input{width:100%;font-family:var(--font-body);font-weight:500;border:none;
  border-bottom:1.5px solid var(--border);background:transparent;padding:9px 2px;font-size:15px;
  color:var(--heading);outline:none;transition:border-color .2s;}
.cf-input:focus{border-bottom-color:var(--terracotta);}
/* Ansichtkaart-velden: geen outline-box bij focus (de onderstreping is de indicatie) */
.cf-input:focus-visible,.postcard__textarea:focus-visible{outline:none;}
/* Berichtveld heeft geen rand → zichtbare focus als onderstreping (WCAG 2.4.7), geen kader */
.postcard__textarea:focus-visible{box-shadow:inset 0 -2px 0 var(--terracotta);}
/* In dark mode is de kaart donker → getypte tekst wit */
@media(prefers-color-scheme:dark){
  .postcard__textarea,.cf-input{color:#fff;}
}
/* Fout of leeg verplicht veld: rode onderlijn (2px) + placeholder in rood. Het berichtveld heeft
   geen rand, dus daar een rode lijn onderin. Geen apart meldingsblok: de velden zelf vertellen
   het; schermlezers krijgen per veld de melding (.cf-err, aria-describedby). */
/* Placeholders: eigen kleur i.p.v. de browserstandaard (#757575 haalde op de donkere kaart geen AA) */
.cf-input::placeholder,.postcard__textarea::placeholder{color:var(--text-muted);opacity:1;}
.cf-field[aria-invalid="true"]{border-bottom-color:var(--field-error);border-bottom-width:2px;color:var(--field-error);}
.cf-field[aria-invalid="true"]::placeholder{color:var(--field-error);opacity:1;}
.postcard__textarea[aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--field-error);}
.postcard__submitrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px;}
.cf-submit{align-self:flex-start;font-family:var(--font-label);border:none;cursor:pointer;
  background:var(--terracotta);color:#fff;padding:13px 28px;border-radius:var(--r-pill);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  transform:translateZ(0);transition:transform .2s,background .2s;}
.cf-submit:hover:not(:disabled){transform:translate3d(0,-2px,0);background:var(--flame);}
.cf-submit:disabled{background:var(--btn-disabled);color:var(--cream);cursor:not-allowed;box-shadow:none;}
.postcard__privacy{margin:0;flex:1;min-width:120px;font-size:10px;line-height:1.4;color:var(--text-muted);font-weight:500;}
.postcard__privacy a{color:var(--text-muted);border-bottom:1px solid #ddcabf;}
.cf-err{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.cf-summary{display:none;}

/* Verzendanimatie */
.postcard.sent .poststempel{animation:stampdown .5s var(--ease-spring) forwards;}
/* Verzendanimatie (design-referentie: krimpen + omhoog driften + faden), aangevuld met
   perspectief zodat de bovenkant naar achteren klapt terwijl de kaart wegzakt. De kaart
   blijft in flow → flex houdt 'm gecentreerd (geen naar-rechts-schuiven). */
.sendbox.sent .postcard{pointer-events:none;}
.postcard.sent{animation:flyaway .95s var(--ease-in) .55s forwards;}
.confirm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.confirm[hidden]{display:none;}   /* anders overlapt de (transparante) bevestiging het formulier */
.js .confirm{opacity:0;}
.sendbox.sent .confirm{opacity:0;animation:fadeUp var(--dur-emph) var(--ease) 1.5s forwards;}
.confirm__title{font-family:var(--font-display);font-weight:400;font-size:34px;color:var(--heading);}
.confirm__text{font-size:15px;color:var(--content-2);}
/* na het versturen (main.js showSent): titel wisselt, 'Liever direct?' verdwijnt, vlak krimpt */
.contact__title{transition:opacity var(--dur-base) var(--ease);}
.contact__title.is-wissel{opacity:0;}
.contact__direct.is-weg{opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.sendbox.sent{min-height:0;transition:height var(--dur-emph) var(--ease);}
.confirm{padding:0 16px;text-align:center;}
.confirm__title:focus{outline:none;}
.confirm__opnieuw{margin-top:8px;background:none;border:0;padding:0 0 2px;cursor:pointer;font:600 14px/1.4 var(--font-body);
  color:var(--heading);border-bottom:1.5px solid var(--clay);}
.confirm__opnieuw:hover{color:var(--flame);border-color:var(--flame);}
.postcard.is-terug{animation:fadeUp var(--dur-emph) var(--ease) both;}
.contact__fout{max-width:520px;margin:0 auto 22px;padding:12px 18px;border-radius:12px;
  background:rgba(192,57,43,.1);color:var(--field-error);font-size:14px;font-weight:600;}
/* Live statusmelding van het formulier (versturen / fout) */
.contact__msg{margin-top:20px;font-size:14px;font-weight:600;}
.contact__msg--info{color:var(--content-2);}
/* Fout: geel waarschuwingsblokje met wit driehoekje en witte tekst */
.contact__msg--error{display:inline-flex;align-items:center;gap:11px;max-width:440px;text-align:left;
  background:rgba(230,165,44,.16);color:var(--content);padding:12px 20px 12px 15px;
  border-radius:14px;line-height:1.4;}
.contact__msg--error::before{content:"";flex:none;width:21px;height:21px;
  background:url('/assets/warning.svg') center/contain no-repeat;}
/* 'RETOUR / VERZENDEN MISLUKT'-stempel: links van de postzegel, grotendeels op het
   wit van de kaart met maar een kleine overlap. Slaat in bij een mislukte verzending. */
/* Lichte grijze overlay over de kaart bij een mislukte verzending → aandacht naar de melding.
   Ligt onder het stempel (z-6) maar boven de velden/postzegel, zodat het stempel scherp blijft. */
.postcard::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(120,110,104,.3);
  z-index:5;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);}
.postcard.cf-error::after{opacity:1;}
.cf-stamp{position:absolute;top:26px;right:74px;width:104px;height:104px;color:#6b3b33;
  opacity:0;pointer-events:none;z-index:6;}
/* Het stempel is een masker: de vorm komt uit het SVG-bestand, de kleur uit color (currentColor),
   zodat licht/donker gewoon blijven werken en de SVG niet in elke pagina staat. */
.cf-stamp{background:currentColor;-webkit-mask:url('../assets/error-stamp.svg') center/contain no-repeat;
  mask:url('../assets/error-stamp.svg') center/contain no-repeat;}
/* In dark mode is de kaart donker → stempel lichter zodat 'ie leesbaar blijft */
@media(prefers-color-scheme:dark){.cf-stamp{color:#d6ab9c;}}
.postcard.cf-error .cf-stamp{animation:stampdown .5s var(--ease-spring) forwards;}
@media(max-width:640px){
  .cf-stamp{width:62px;height:62px;top:86px;right:6px;}   /* rechts onder de postzegel, niet over het bericht */
  /* strook mag op smal scherm over 2 regels; padding-top houdt de tuck (42px) aan */
  .cf-fallback{width:min(600px,92%);padding:56px 18px 14px;}
  .cf-fallback__line{white-space:normal;font-size:13.5px;}
  /* meer ruimte: hogere strook op mobiel → 'Liever direct?' schuift verder, met genoeg sectie-padding */
  .contact{padding-bottom:84px;}
  .sendbox.cf-failed ~ .contact__direct,
  .sendbox.cf-failed ~ #cf-status{transform:translateY(62px);}
  .sendbox.cf-failed--lang ~ .contact__direct,
  .sendbox.cf-failed--lang ~ #cf-status{transform:translateY(84px);}
}
.contact__direct{margin:30px 0 0;font-size:14px;color:var(--content-2);}
.contact__direct a{border-bottom:1px solid var(--clay);}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--footer-bg);padding:clamp(46px,6vw,74px) clamp(20px,5vw,64px);position:relative;overflow:hidden;overflow:clip;}
.footer__inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;
  gap:16px;text-align:center;position:relative;z-index:2;}
.footer__logo{display:block;width:240px;height:88px;}
.footer__logo img{width:100%;height:100%;object-fit:contain;}
.footer__tagline{font-family:var(--font-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-on-dark);}
.footer__social{display:flex;gap:20px;align-items:center;margin-top:4px;}
.footer__social a{color:var(--cream);font-size:14px;border-bottom:1px solid rgba(251,246,242,.5);padding-bottom:2px;transition:border-color .2s;}
.footer__social a:hover{border-color:var(--cream);}
.footer__legal{--sep-gap:32px;margin-top:14px;padding-top:16px;border-top:1px solid rgba(251,246,242,.28);width:100%;
  max-width:678px;display:flex;flex-wrap:wrap;gap:6px var(--sep-gap);justify-content:center;font-size:12px;
  color:var(--text-on-dark);opacity:.8;}
/* zelfde zwevende scheidingsteken als in de merkenrij (zie .brand__sep) */
.fitem{position:relative;display:inline-flex;align-items:center;white-space:nowrap;}
.fsep{position:absolute;left:calc(var(--sep-gap) / -2);top:50%;transform:translate(-50%,-50%);}
.fbreak{display:none;}   /* alleen op smalle schermen een regelafbreking (zie media query) */
.footer__legal a{color:var(--cream);border-bottom:1px solid rgba(251,246,242,.5);padding-bottom:1px;}

/* =========================================================================
   PROJECT MODAL (native <dialog>)
   ========================================================================= */
.modal{width:min(640px,100%);max-height:88vh;overflow-y:auto;border:none;padding:0;background:var(--modal-surface);
  border-radius:var(--r-card);box-shadow:0 40px 90px rgba(0,0,0,.4);}
.modal::backdrop{background:rgba(251,246,242,.55);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);}
/* De open-animatie doet main.js via een FLIP (kaart → popup); hier alleen de backdrop. */
.modal[open]::backdrop{animation:overlayIn .3s ease;}
.modal.is-closing::backdrop{animation:overlayOut .3s var(--ease-in) forwards;}   /* main.js: tijdens het terugmorfen */
.modal__accent{height:8px;background:var(--accent,var(--terracotta));}
.modal{outline:none;}
.modal__close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:none;cursor:pointer;
  border-radius:50%;background:var(--modal-close-bg);color:var(--content);font-size:18px;line-height:1;
  user-select:none;-webkit-user-select:none;}
.modal__body{padding:34px clamp(24px,4vw,44px) 40px;}
.modal__cat{display:inline-block;background:var(--accent,var(--terracotta));color:#fff;font-family:var(--font-label);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 13px;border-radius:var(--r-pill);}
.modal__title{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4vw,46px);
  color:var(--heading);margin:16px 0 4px;line-height:1;}
.modal__role{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 22px;}
/* Projectfoto (16:9, via JS uit data-photo). Zonder foto: hetzelfde kleurvlak als de kaart. */
.modal__photo{width:100%;aspect-ratio:16/9;border-radius:12px;margin-bottom:22px;
  background:linear-gradient(150deg,var(--accent,#a75348),#20130f);background-size:cover;background-position:center;}
.modal__story{font-size:16px;line-height:1.75;color:var(--content);white-space:pre-line;}   /* witregels uit de JSON blijven staan */

/* =========================================================================
   SUBPAGINA'S — privacyverklaring en bedankpagina (zonder JS na het formulier)
   ========================================================================= */
/* Logo boven de privacypagina, op de tekstkolom, in de kleur van de koppen (--heading: terracotta
   in licht, zalm in donker). Het logo is één kleur, dus het SVG dient als masker; de <img> blijft
   staan voor de alt-tekst en als vangnet zonder mask-ondersteuning of in forced colors. */
.sub-top{max-width:720px;margin:0 auto;padding:clamp(24px,4vw,40px) clamp(20px,5vw,40px) 0;}
.sub-top__logo{display:block;width:118px;height:42px;}
.sub-top__logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;}
@supports (mask:url('x.svg')) or (-webkit-mask:url('x.svg')){
  .sub-top__logo{background:var(--heading);
    -webkit-mask:url('../assets/logo-terra.svg') left center/contain no-repeat;
    mask:url('../assets/logo-terra.svg') left center/contain no-repeat;}
  .sub-top__logo img{opacity:0;}
}
@media(forced-colors:active){ .sub-top__logo{-webkit-mask:none;mask:none;background:none;} .sub-top__logo img{opacity:1;} }
.legal{max-width:720px;margin:0 auto;padding:clamp(40px,7vw,90px) clamp(20px,5vw,40px);line-height:1.7;}
.sub-top + .legal{padding-top:clamp(32px,5vw,56px);}
.legal .back{font-family:var(--font-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow);}
.legal h1{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,6vw,54px);color:var(--heading);margin:20px 0 6px;}
.legal h2{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--heading);margin:34px 0 10px;}
/* Koppen eigen regelafstand (erfden de 1.7 van de lopende tekst: koppen over twee regels,
   zoals op mobiel, stonden daardoor ver uit elkaar) en evenwichtig afbreken. */
.legal h1,.legal h2{line-height:1.12;text-wrap:balance;}
.legal p,.legal li{font-size:15px;color:var(--content);}
.legal .meta{font-family:var(--font-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 34px;}
.legal ul{margin:0 0 20px;padding-left:20px;}
.legal a{border-bottom:1px solid var(--clay);}

.thanks{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:40px 26px;background:var(--contact-grad);}
.thanks__card{max-width:520px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.thanks h1{font-family:var(--font-display);font-weight:400;font-size:clamp(34px,6vw,52px);color:var(--heading);margin:0;}
.thanks p{font-size:16px;color:var(--content-2);margin:0;}
.thanks a.back{margin-top:10px;}

/* =========================================================================
   KEYFRAMES
   ========================================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-14px) rotate(var(--r,0deg));}}
@keyframes flyaway{
  0%{transform:perspective(1200px) rotateX(0deg) scale(1) translateY(0) rotate(-1.5deg);opacity:1;}
  22%{transform:perspective(1200px) rotateX(7deg) scale(1.05) translateY(10px) rotate(-1.5deg);opacity:1;}
  100%{transform:perspective(1200px) rotateX(60deg) scale(.06) translateY(-24vh) rotate(-1.5deg);opacity:0;}
}
@keyframes wave{
  0%{transform:rotate(-3deg) perspective(500px) rotateX(0deg) skewX(0deg);}
  8%{transform:rotate(-3deg) perspective(500px) rotateX(16deg) skewX(3.5deg);}
  18%{transform:rotate(-3deg) perspective(500px) rotateX(-13deg) skewX(-3deg);}
  29%{transform:rotate(-3deg) perspective(500px) rotateX(10deg) skewX(2.2deg);}
  40%{transform:rotate(-3deg) perspective(500px) rotateX(-7deg) skewX(-1.5deg);}
  51%{transform:rotate(-3deg) perspective(500px) rotateX(4.5deg) skewX(1deg);}
  62%{transform:rotate(-3deg) perspective(500px) rotateX(-2.5deg) skewX(-.6deg);}
  70%,100%{transform:rotate(-3deg) perspective(500px) rotateX(0deg) skewX(0deg);}
}
@keyframes stampdown{0%{opacity:0;transform:rotate(-7deg) scale(2.6);}55%{opacity:.82;transform:rotate(-7deg) scale(.9);}75%{transform:rotate(-7deg) scale(1.05);}100%{opacity:.82;transform:rotate(-7deg) scale(1);}}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes overlayOut{from{opacity:1;}to{opacity:0;}}

/* =========================================================================
   RESPONSIVE  (volgt de cascade-volgorde van de designreferentie)
   Breakpoints: <=640 telefoon · <=700 posters · 641-1099 tablet · >=1100 desktop
   ========================================================================= */

/* ---- tablet & kleiner: diensten stapelen ---- */
@media(max-width:820px){
  .services__inner{grid-template-columns:1fr;gap:36px;}
  .services__intro{position:static;}
  .deck{gap:26px;padding:8px 0;}
  .c{margin-left:0;}
  .card{width:min(300px,88vw);height:auto;aspect-ratio:290/398;}
}

/* ---- tablet/iPad: posters 2×2 met behoud van de schuine look ---- */
@media(min-width:641px) and (max-width:1099px){
  .about__grid{gap:30px;}
  .deck{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;align-items:start;gap:0;padding:30px 0 26px;}
  .c{margin-left:0;}
  .c:nth-child(even){margin-left:-46px;}
  .c:nth-child(n+3){margin-top:-2px;}
  .card{width:284px;height:auto;aspect-ratio:290/398;}
  .c.hov-r .cfx,.c.hov-l .cfx{--hx:0px;}   /* 2×2: buren schuiven niet opzij */
  .c.hov .cfx{--ty:-16px;--hs:1.04;}
}

/* ---- posters op mobiel: gestapelde kaarten (zoals bij truus.co) ----
   Kaarten onder elkaar; elke kaart blijft 'plakken' (position:sticky) en de volgende schuift er
   bij het scrollen overheen, tot ze als een stapel liggen. Gewone paginascroll: geen apart
   scrollvlak en geen JavaScript. --i (index) laat elke kaart iets lager plakken, zodat de randen
   van de stapel zichtbaar blijven. De titel 'Uitgelicht werk' blijft er als strook boven staan.

   Maten (alles afgeleid, zodat titel en stapel op elk scherm kloppen):
   --band-h   hoogte titelstrook (vanaf de schermrand, achter de menubalk): tekst op 96px
   --card-w/h kaartmaat; breedte ook begrensd door de schermhoogte (iPhone SE)
   --stack-top plakpositie eerste kaart: verticaal gecentreerd in het zichtbare scherm (svh),
              maar nooit hoger dan net onder de titel
   --release  hoe ver de deck onder de sectie-inhoud uitsteekt (negatieve marge). Daardoor laat
              de titel precies los op het moment dat de laatste kaart aankomt: titel en stapel
              scrollen samen weg, in plaats van dat de kaarten onder de titel doorschuiven.
              De sectie krijgt die afstand onderaan terug als padding (layout blijft gelijk). */
@media(max-width:700px){
  .work{--band-h:140px;
    --card-w:min(300px,80vw,calc((100svh - 195px) * .729));
    --card-h:calc(var(--card-w) * 1.3724);
    --stack-top:max(calc(var(--band-h) + 4px), calc((100svh - var(--card-h)) / 2 - (var(--n,4) - 1) * 5px));
    --release:calc(var(--stack-top) + (var(--n,4) - 1) * 10px + var(--card-h) + 18px - var(--band-h));
    padding-top:0;padding-bottom:calc(var(--release) + 52px);}
  /* flow-root: anders 'lekt' de negatieve marge van de deck door (margin collapsing) en wordt de
     sectie-inhoud niet korter — dan laat de titel te laat los */
  .work__inner{display:flow-root;}
  .work[id]{scroll-margin-top:0;}   /* de titelstrook heeft de ruimte voor de menubalk al (padding 96px) */
  .work__label{position:sticky;top:0;z-index:3;box-sizing:border-box;height:var(--band-h);
    margin:0 -20px;padding:96px 20px 0;background:var(--surface);}
  .deck{display:flex;flex-direction:column;align-items:center;flex-wrap:nowrap;gap:28px;
    padding:6px 0 18px;margin-bottom:calc(var(--release) * -1);}
  /* margin-bottom compenseert de 10px-trap per kaart: zo laten alle kaarten (en de titel) op
     exact hetzelfde moment los en schuift de stapel als één geheel weg */
  .deck .c{position:sticky;margin:0 0 calc((var(--n,4) - 1 - var(--i,0)) * 10px);
    top:calc(144px + var(--i,0) * 10px);top:calc(var(--stack-top) + var(--i,0) * 10px);}
  .card{width:var(--card-w);height:auto;aspect-ratio:290/398;}
  /* Geen inloopanimatie op mobiel: de stapel scrolt zelf al het beeld in (fade was dubbelop). */
  .js .work.reveal{opacity:1;transform:none;transition:none;}
  .cfx,.c.hov-r .cfx,.c.hov-l .cfx,.c.hov .cfx{--hx:0px;--ty:0px;--tr:calc(var(--rot,0deg) * .5);--hs:1;}
}

/* ---- telefoon ---- */
@media(max-width:640px){
  .hero{padding:10px;}
  .hero__card{border-radius:20px;min-height:calc(100vh - 20px);min-height:calc(100svh - 20px);}
  /* Op de telefoon blijft de hero een vaste kaart: het groeien was daar te subtiel (10px marge)
     en Safari kon het knipmasker bij snel scrollen niet bijhouden. */
  .hero-x .hero{padding:10px;}
  .hero-x .hero__card{min-height:calc(100vh - 20px);min-height:calc(100svh - 20px);border-radius:20px;
    clip-path:none;will-change:auto;box-shadow:var(--sh-hero);}
  .hero-x .hero__shade{display:none;}
  /* alleen de zij-/ondermarges terugzetten; margin-top:auto van .hero__content moet blijven
     (die duwt de tekst naar de onderkant van de kaart) */
  .hero-x .hero__bar{margin:0;}
  .hero-x .hero__content{margin-left:0;margin-bottom:0;}
  .hero__bar{padding:20px 18px;}
  .hero__logo{width:96px;height:34px;}
  .hero__content{padding:0 18px 30px;max-width:100%;}

  .brands__row{--sep-gap:44px;row-gap:14px;}
  .brand__name{font-size:21px;}

  .about__grid{gap:32px;}
  .polwrap{--pw:min(216px,56vw);margin-bottom:34px;}
  .poltip{opacity:.9;bottom:-6px;font-size:11.5px;}

  .otherwork__grid{gap:26px;}
  .otherwork__items{gap:9px;}
  .otherwork__name,.otherwork__role{display:inline;}
  .otherwork__role::before{content:'\00a0\00b7\00a0';color:var(--clay);}

  .otherwork__title{font-size:34px;}
  .services__title{font-size:38px;}
  .about__title{font-size:34px;}   /* gelijk aan 'Andere toffe projecten' */

  /* Motto in de footer breekt op de komma → altijd twee nette regels (hero: zie < 900px) */
  .footer__tagline .tl-part{display:block;}

  /* diensten: één kolom, gradient + tekst permanent zichtbaar, CTA onder de blokken.
     Ritme gelijk aan 'Even voorstellen' (eyebrow→titel 16, titel→tekst 22) en een
     kleinere sprong van de intro naar de dienstblokken. Gap 0: de marges sturen. */
  .services__inner{display:flex;flex-direction:column;gap:0;align-items:stretch;}
  .services__intro{display:contents;}
  .services__intro .eyebrow{margin:0 0 16px;}
  .services__title{margin:0 0 22px;}
  .services__lead{margin:0 0 20px;}
  .services__gridwrap{order:4;margin-top:0;}
  .services__grid{grid-template-columns:1fr;grid-auto-rows:1fr;gap:12px;}
  .services__cta{order:5;align-self:stretch;justify-content:center;text-align:center;
    background:transparent;color:var(--terracotta);border:1.6px solid var(--terracotta);box-shadow:none;
    padding:15px 20px;margin-top:22px;}
  .svc-card{padding:20px 22px;box-shadow:0 6px 18px rgba(74,46,40,.1);min-height:112px;}
  .svc-card__ov{background:linear-gradient(168deg,var(--g1),var(--g2));}
  .svc-card__title{font-size:20px;}

  /* ansichtkaart: één kolom */
  .postcard{aspect-ratio:auto;grid-template-columns:1fr;transform:rotate(-1deg);}
  .postcard__divider{display:none;}
  .postcard__msg{padding:18px;padding-top:13px;position:relative;}
  .postcard__msglabel{margin-bottom:5px;}
  .postcard__msg::after{content:'';position:absolute;left:20px;right:20px;bottom:0;border-bottom:2px dashed var(--border);}
  /* Berichtveld groeit mee met de tekst (JS zet de hoogte) i.p.v. intern scrollen.
     flex:none — anders bepaalt de flexbox de hoogte en wordt de gezette hoogte genegeerd. */
  .postcard__textarea{flex:none;min-height:120px;overflow:hidden;}
  .postcard__addr{padding:18px;padding-top:18px;position:static;}
  .stampwrap{position:absolute;top:16px;right:22px;width:54px;height:67px;z-index:3;}
  .poststempel{left:-104px;width:115px;height:61px;top:2px;}
  .postcard__textarea{margin-top:2px;padding-right:66px;}
  .postcard__submitrow{flex-direction:column;align-items:stretch;gap:10px;}
  .cf-submit{align-self:stretch;padding:15px 20px;}
  .postcard__privacy{text-align:center;flex:none;}

  .footer__logo{width:186px;height:70px;}
  /* Vaste regelindeling in de footer-legal (2 + 2 + privacylink): de .fbreak-items
     forceren de afbreking, zodat de indeling niet meer van een paar pixels afhangt. */
  .footer__legal .fbreak{display:block;flex-basis:100%;height:0;margin:0;}

  #gewerkt,#over,#werk,#contact,.otherwork,.services,.footer{padding-left:26px;padding-right:26px;}
}

/* ---- nav op smalle schermen ---- */
@media(max-width:600px){
  .nav__inner{padding:8px 10px 8px 16px;}
  .nav__link--collapsible{display:none;}   /* alleen de laatste link (Let's connect) blijft */
  .nav__links{gap:12px;}
}

/* =========================================================================
   REDUCED MOTION — gericht (a11y)
   Keyframe-animaties springen direct naar hun eindstaat (stempels staan, de verstuurde kaart is
   weg). Overgangen blijven, maar kort (150 ms): een kleur- of fadewissel is dan zacht in plaats
   van abrupt. Verplaatsingen en schaalsprongen bij hover vallen helemaal weg.
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    animation-delay:0s!important;transition-duration:var(--dur-quick)!important;scroll-behavior:auto!important;}
  /* hero-anim wordt bij reduced-motion niet eens gezet; dit is het vangnet */
  .hvu,.hero__ctas .btn{animation:none!important;opacity:1!important;transform:none!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
  .js .polaroid__photo{filter:brightness(1.03) contrast(.9) saturate(.9) sepia(.08)!important;}
  .confirm{opacity:1!important;}
  /* geen bewegende hover-staten: knop-lifts, dienstblokken, stempel en foto in de werkkaart */
  .btn:hover,.hero .btn--pill:hover,.social-btn:hover,.about__cv:hover,.cf-submit:hover:not(:disabled),
  .svc-card:hover,.svc-card:hover .svc-card__star,.c.hov .stamp,.c.hov .pcard-color{transform:none;}
}
/* waaier: de gehoverde kaart en zijn buren blijven in hun ruststand (op ≤700px is dat al zo) */
@media(prefers-reduced-motion:reduce) and (min-width:701px){
  .c.hov .cfx,.c.hov-l .cfx,.c.hov-r .cfx{--hx:0px;--ty:initial;--tr:initial;--hs:1;}
}

/* ---- Dark mode: AA-contrast voor kleine gekleurde tekst ----
   De merkkleuren zijn gekozen voor een lichte achtergrond; op de donkere vlakken zakten ze
   onder 4,5:1 (Lighthouse). Hier 35% lichter gemengd en een lichtere labeltint. */
@media(prefers-color-scheme:dark){
  .otherwork__cat{color:color-mix(in srgb,var(--cat-color) 65%,#fff);}
  .postcard__msglabel{color:#d6ab9c;}
}
@media(prefers-color-scheme:dark) and (max-width:640px){
  .services__cta{color:var(--heading);border-color:var(--heading);}
}