@charset "UTF-8";
/* ==========================================================================
   Harrie Visser — portretten op maat
   Designsysteem, afgeleid van het Paper-ontwerp (frames A–F).
   Opbouw: 1 fonts · 2 tokens · 3 reset · 4 basis · 5 layout · 6 componenten
           7 secties · 8 formulier · 9 responsive · 10 voorkeuren/print
   ========================================================================== */

/* 1 — Lettertypen (lokaal gehost: geen externe verzoeken, AVG-veilig) ------ */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/spectral-500.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/spectral-600.woff2') format('woff2');}

/* 2 — Ontwerptokens -------------------------------------------------------- */
:root{
  /* Kleur */
  --paper:#F4EDE0;
  --surface:#EBE1CF;
  --surface-soft:#FBF6EC;
  --ink:#23201C;
  --muted:#645D52;          /* iets donkerder dan het ontwerp: haalt AA op papier */
  --line:#E0D6C4;
  --line-strong:#C9BFAD;
  --terracotta:#A8442C;     /* AA-contrast op papier (4.9:1) */
  --terracotta-strong:#8F3A24;
  --terracotta-tint:#F0DCD2;
  --green:#3E5347;
  --green-soft:#456153;
  --green-line:#557165;
  --ochre:#C08A3E;          /* alleen als achtergrond (donkere tekst erop) */
  --ochre-light:#F0D08C;    /* als tekstkleur op de groene vlakken: AA-contrast */
  --ochre-ink:#2A2317;
  --on-accent:#FDF8EF;
  --on-dark:#F4EDE0;
  --on-dark-muted:#BCB2A0;  /* AA op --ink */

  /* Typografie */
  --font-display:'Spectral',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace;

  /* Vloeiende typeschaal: schaalt mee met het scherm, geen sprongen */
  --t-label:0.8125rem;
  --t-sm:0.9375rem;
  --t-base:clamp(1rem,0.97rem + 0.15vw,1.0625rem);
  --t-lg:clamp(1.0625rem,1rem + 0.3vw,1.1875rem);
  --t-xl:clamp(1.25rem,1.15rem + 0.5vw,1.4375rem);
  --t-2xl:clamp(1.5rem,1.3rem + 1vw,2rem);
  --t-3xl:clamp(1.875rem,1.5rem + 1.8vw,2.75rem);
  --t-4xl:clamp(2.25rem,1.6rem + 2.8vw,3.75rem);

  /* Ruimte */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.25rem;--s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem;
  --s-12:3rem;  --s-16:4rem;  --s-20:5rem;  --s-24:6rem;
  --section-y:clamp(3.5rem,2rem + 6vw,5.5rem);

  /* Vorm */
  --r-sm:8px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --shadow-soft:0 22px 44px -30px rgb(35 32 28 / .45);
  --shadow-lift:0 30px 60px -34px rgb(35 32 28 / .5);

  /* Maat */
  --page:1240px;
  --prose:68ch;
}

/* 3 — Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  font-size:var(--t-base);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;text-decoration:none;}

/* Het hidden-attribuut moet ALTIJD winnen.
   De browser geeft [hidden] standaard display:none, maar elke eigen
   display-regel (.form-card{display:flex}) of een inline style overschrijft
   dat. Zonder deze regel staan de bedanktmelding en stap 2 van het formulier
   meteen open. !important is hier terecht: het verslaat ook inline styles. */
[hidden]{display:none!important;}

/* 4 — Basistypografie ------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;}
h1{font-size:var(--t-4xl);}
h2{font-size:var(--t-3xl);}
h3{font-size:var(--t-xl);font-weight:500;}
h4{font-size:var(--t-lg);font-weight:500;}
p{text-wrap:pretty;}
strong{font-weight:600;}

.eyebrow{
  font-family:var(--font-sans);font-weight:600;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);
}
.eyebrow--ochre{color:var(--ochre-light);} /* uitsluitend op donkere/groene vlakken */
.lead{font-size:var(--t-lg);line-height:1.65;color:var(--muted);max-width:var(--prose);}
.muted{color:var(--muted);}
.note{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

/* Toegankelijkheid: overslaan-link en screenreader-tekst */
.skip-link{
  position:absolute;left:var(--s-4);top:-4rem;z-index:100;
  background:var(--ink);color:var(--on-dark);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);
  transition:top .18s ease;
}
.skip-link:focus{top:var(--s-4);}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Zichtbare, consistente focus voor toetsenbordgebruik */
:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px;border-radius:4px;}
.site-footer :focus-visible,.pricing :focus-visible,.cta :focus-visible,
.aside-card :focus-visible{outline-color:var(--ochre-light);}

/* 5 — Layout --------------------------------------------------------------- */
.container{width:min(100% - 2.5rem,var(--page));margin-inline:auto;}
@media (min-width:48rem){.container{width:min(100% - 4rem,var(--page));}}
.section{padding-block:var(--section-y);}
.section--surface{background:var(--surface);border-block:1px solid var(--line);}
.section--tight{padding-block:calc(var(--section-y) * .6);}
.stack{display:flex;flex-direction:column;gap:var(--s-4);}
.section-head{display:flex;flex-direction:column;gap:var(--s-3);max-width:var(--prose);margin-bottom:var(--s-10);}
.section-head--row{
  max-width:none;flex-direction:row;align-items:flex-end;
  justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
}

/* 6 — Componenten ---------------------------------------------------------- */
/* Knoppen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:3.25rem;padding:0 1.75rem;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--t-sm);text-align:center;
  border:1px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn--primary{background:var(--terracotta);color:var(--on-accent);}
.btn--primary:hover{background:var(--terracotta-strong);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{background:var(--surface);border-color:var(--muted);}
.btn--ochre{background:var(--ochre);color:var(--ochre-ink);}
.btn--ochre:hover{background:#AE7B33;}
.btn--light{background:var(--on-accent);color:var(--terracotta-strong);}
.btn--light:hover{background:#fff;}
.btn--outline-light{background:transparent;color:var(--on-accent);border-color:rgb(253 248 239 / .55);}
.btn--outline-light:hover{background:rgb(253 248 239 / .12);}
.btn--block{width:100%;}

/* Tekstlink met pijl */
.arrow-link{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:500;color:var(--terracotta);
  border-bottom:1px solid transparent;transition:border-color .18s ease;
}
.arrow-link:hover{border-bottom-color:currentColor;}
.arrow-link::after{content:"→";transition:transform .18s ease;}
.arrow-link:hover::after{transform:translateX(3px);}

/* Kaarten */
.card{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-8);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
}
.card--surface{background:var(--surface);}
.card__icon{width:2rem;height:2rem;color:var(--terracotta);}

/* Werk-kaart (portfolio) */
.work{display:flex;flex-direction:column;gap:var(--s-3);}
.work__frame{
  border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  aspect-ratio:4/5;
}
.work__frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1);}
a.work:hover .work__frame img,a.work:focus-visible .work__frame img{transform:scale(1.035);}
.work__title{font-family:var(--font-display);font-weight:500;font-size:var(--t-lg);}
.work__meta{font-size:var(--t-sm);color:var(--muted);}
.work--wide .work__frame{aspect-ratio:4/3;}

/* Roosters */
.grid{display:grid;gap:var(--s-6);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));}
.grid--work{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));}

/* Kopbalk */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgb(244 237 224 / .92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);padding-block:var(--s-4);}
.brand{display:flex;flex-direction:column;line-height:1.1;}
.brand__name{font-family:var(--font-display);font-weight:600;font-size:1.375rem;letter-spacing:-.01em;}
.brand__tag{font-size:.6875rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.nav{display:flex;align-items:center;gap:var(--s-8);}
.nav__list{display:flex;align-items:center;gap:var(--s-6);}
.nav__link{font-weight:500;font-size:var(--t-sm);padding-block:.25rem;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;}
.nav__link:hover{color:var(--terracotta);}
.nav__link[aria-current="page"]{color:var(--terracotta);border-bottom-color:var(--terracotta);}

/* Hamburger (mobiel) */
/* Minimaal 44×44 px raakvlak (WCAG 2.5.5) */
.nav-toggle{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-width:44px;min-height:44px;padding:.6rem;border-radius:var(--r-sm);
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* 7 — Secties -------------------------------------------------------------- */
/* Hero */
.hero{padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem) var(--section-y);}
.hero__inner{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center;grid-template-columns:1fr;}
.hero__text{display:flex;flex-direction:column;gap:var(--s-5);max-width:34rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2);}
.hero__aside{font-size:var(--t-sm);color:var(--muted);}
.hero__media{position:relative;justify-self:center;}
.hero__portrait{
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lift);
  background:var(--surface);max-width:26rem;
}
.hero__inset{
  position:absolute;left:-1.5rem;bottom:-1.75rem;width:8.5rem;
  border-radius:var(--r-md);overflow:hidden;
  border:3px solid var(--paper);box-shadow:var(--shadow-soft);
}

/* Vertrouwensbalk */
.trust{background:var(--surface);border-block:1px solid var(--line);}
.trust__list{display:grid;gap:var(--s-5);padding-block:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.trust__item{display:flex;gap:var(--s-3);align-items:flex-start;}
.trust__item svg{flex:none;width:1.25rem;height:1.25rem;color:var(--terracotta);margin-top:.15rem;}
.trust__item strong{display:block;font-weight:600;font-size:var(--t-sm);}
.trust__item span{font-size:var(--t-sm);color:var(--muted);}

/* Stappen */
.steps{counter-reset:step;display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));}
.step{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8);border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line);}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--font-display);font-weight:600;font-size:2.5rem;line-height:1;
  color:var(--terracotta);
}

/* Prijzen */
.pricing{background:var(--green);color:var(--on-dark);}
.pricing h2,.pricing h3{color:#FBF7EF;}
.pricing .lead{color:#CDD8D2;}
.price-card{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-8);border-radius:var(--r-lg);
  background:var(--green-soft);border:1px solid var(--green-line);
}
.price-card__amount{font-family:var(--font-display);font-weight:600;font-size:var(--t-2xl);color:var(--ochre-light);}
.price-card p{color:#D3DCD6;font-size:var(--t-sm);}
.price-card .note{color:#C2CFC8;}
.pricing__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;margin-top:var(--s-8);}
.pricing__footer p{color:#CDD8D2;max-width:40rem;font-size:var(--t-sm);}

/* Verhaal / beeld naast tekst */
.split{display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center;grid-template-columns:1fr;}
.split__media img{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft);width:100%;}
.split__text{display:flex;flex-direction:column;gap:var(--s-5);}

/* Uitgelicht project */
.feature{
  display:grid;gap:0;grid-template-columns:1fr;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);background:var(--paper);
}
.feature__body{display:flex;flex-direction:column;gap:var(--s-5);padding:clamp(1.75rem,1rem + 2vw,3rem);}
.feature__stats{display:flex;flex-wrap:wrap;gap:var(--s-10);margin-top:var(--s-2);}
.feature__stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t-2xl);color:var(--terracotta);}
.feature__stat span{font-size:var(--t-sm);color:var(--muted);}
.feature__aside{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s-10);background:var(--surface);border-top:1px solid var(--line);
}
/* Variant met een echt kunstwerk. Bewust `contain` en niet `cover`: De
   Nachtwacht is een brede compositie met tientallen figuren — bijsnijden tot
   het vlak vol is zou de helft van het werk wegnemen. Liever wat papierkleur
   eromheen dan een half schilderij. */
.feature__aside--beeld{flex-direction:column;padding:0;gap:0;justify-content:space-between;}
.feature__aside--beeld picture{display:flex;flex:1;align-items:center;justify-content:center;padding:var(--s-5);min-height:0;}
.feature__aside--beeld img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:var(--r-sm);}
.feature__aside--beeld figcaption{
  padding:var(--s-4) var(--s-5);font-size:.8125rem;line-height:1.5;
  color:var(--muted);background:var(--surface);
}

/* Placeholder voor ontbrekend beeld — eerlijk, niet nep */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-2);text-align:center;padding:var(--s-8);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--muted);font-size:var(--t-sm);}

/* Ervaringen */
.quote{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-8);border-radius:var(--r-lg);background:var(--paper);border:1px dashed var(--line-strong);}
.quote__mark{font-family:var(--font-display);font-weight:600;font-size:3rem;line-height:.6;color:var(--terracotta-tint);}
.quote blockquote{font-style:italic;color:var(--muted);}
.quote figcaption{padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--t-sm);}
.quote figcaption b{display:block;font-weight:600;color:var(--ink);}
.quote figcaption span{color:var(--muted);}

/* Veelgestelde vragen — details/summary: werkt zonder JavaScript */
.faq{max-width:58rem;margin-inline:auto;}
.faq__item{border-top:1px solid var(--line);}
.faq__item:last-child{border-bottom:1px solid var(--line);}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  padding-block:var(--s-5);cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:500;font-size:var(--t-lg);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"+";flex:none;font-family:var(--font-sans);font-size:1.5rem;font-weight:400;
  color:var(--muted);transition:transform .2s ease,color .2s ease;
}
.faq__item[open] summary::after{content:"−";color:var(--terracotta);}
.faq__item summary:hover{color:var(--terracotta);}
.faq__answer{padding-bottom:var(--s-5);color:var(--muted);max-width:var(--prose);}

/* Slotoproep */
.cta{background:var(--terracotta);color:var(--on-accent);text-align:center;}
.cta h2{color:var(--on-accent);}
.cta p{color:#F6E4DC;max-width:38rem;margin-inline:auto;}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-6);}

/* Voettekst */
.site-footer{background:var(--ink);color:var(--on-dark);padding-block:var(--s-16) var(--s-10);}
.site-footer a:hover{color:var(--ochre);}
.site-footer__top{display:grid;gap:var(--s-10);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.site-footer h2,.site-footer .brand__name{color:var(--on-dark);}
.site-footer p,.site-footer li{color:var(--on-dark-muted);font-size:var(--t-sm);}
.site-footer__title{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#948B7B;margin-bottom:var(--s-3);}
.site-footer__list{display:flex;flex-direction:column;gap:var(--s-2);}
.site-footer__list a{color:#D8CFBE;}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  margin-top:var(--s-10);padding-top:var(--s-6);border-top:1px solid #3A362E;
  font-size:.8125rem;color:#948B7B;
}

/* Kruimelpad */
.breadcrumb{font-size:var(--t-sm);color:var(--muted);padding-block:var(--s-6);}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5em;}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:.5em;color:var(--line-strong);}
.breadcrumb [aria-current="page"]{color:var(--ink);}

/* Detailpagina */
.detail{display:grid;gap:clamp(2rem,1rem + 4vw,3.5rem);grid-template-columns:1fr;align-items:start;}
.detail__media{display:flex;flex-direction:column;gap:var(--s-3);}
.detail__main{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lift);}
.detail__thumbs{display:flex;gap:var(--s-3);flex-wrap:wrap;}
.detail__thumb{width:5.5rem;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);}
.detail__thumb[aria-current="true"]{border:2px solid var(--terracotta);}
.detail__thumb img{width:100%;height:100%;object-fit:cover;}
.spec-list{border-top:1px solid var(--line);}
.spec-list div{display:flex;justify-content:space-between;gap:var(--s-5);padding-block:var(--s-4);border-bottom:1px solid var(--line);}
.spec-list dt{color:var(--muted);font-size:var(--t-sm);}
.spec-list dd{font-weight:500;font-size:var(--t-sm);text-align:right;}

/* 8 — Formulier ------------------------------------------------------------ */
.form-layout{display:grid;gap:var(--s-8);grid-template-columns:1fr;align-items:start;}
.form-card{
  display:flex;flex-direction:column;gap:var(--s-6);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--r-xl);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-soft);
}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field__row{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));}
.field label{font-weight:500;font-size:var(--t-sm);}
.field label .opt{font-weight:400;color:var(--muted);}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field select,.field textarea{
  width:100%;min-height:3.25rem;padding:.8rem 1rem;
  background:var(--surface-soft);border:1px solid var(--line-strong);
  border-radius:var(--r-md);transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:7rem;resize:vertical;line-height:1.55;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted);}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terracotta-tint);outline:none;
}
.field__hint{font-size:.8125rem;color:var(--muted);}
.field__error{font-size:.8125rem;color:var(--terracotta-strong);font-weight:500;}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea,.field[data-invalid="true"] .dropzone{
  border-color:#C0442B;
}

/* Keuzeknoppen (radio als knop) */
.choice-group{display:flex;flex-wrap:wrap;gap:var(--s-3);}
.choice{position:relative;}
.choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.choice span{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.85rem 1.1rem;border-radius:var(--r-md);
  background:var(--surface-soft);border:1px solid var(--line-strong);
  font-weight:500;font-size:var(--t-sm);transition:all .18s ease;
}
.choice span small{font-weight:400;font-size:.75rem;color:var(--muted);}
.choice input:hover + span{border-color:var(--muted);}
.choice input:checked + span{background:var(--terracotta-tint);border-color:var(--terracotta);color:var(--terracotta-strong);}
.choice input:checked + span small{color:#9A6552;}
.choice input:focus-visible + span{outline:3px solid var(--terracotta);outline-offset:3px;}

/* Foto-upload */
.dropzone{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-2);
  padding:var(--s-8);text-align:center;
  background:var(--surface);border:2px dashed var(--line-strong);border-radius:var(--r-md);
  cursor:pointer;transition:border-color .18s ease,background-color .18s ease;
}
.dropzone:hover,.dropzone.is-dragover{border-color:var(--terracotta);background:var(--terracotta-tint);}
.dropzone__icon{
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:var(--r-pill);
  background:var(--terracotta-tint);color:var(--terracotta);font-size:1.35rem;font-weight:600;
}
.dropzone b{font-weight:500;font-size:var(--t-sm);}
.dropzone small{font-size:.8125rem;color:var(--muted);}
.filelist{display:flex;flex-direction:column;gap:var(--s-2);}
.filelist li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:.6rem .85rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:var(--t-sm);
}
.filelist button{color:var(--terracotta);font-size:.8125rem;font-weight:500;text-decoration:underline;}

/* Instemming */
.consent{display:flex;gap:var(--s-3);align-items:flex-start;}
.consent input{flex:none;width:1.35rem;height:1.35rem;margin-top:.15rem;accent-color:var(--terracotta);}
.consent label{font-size:var(--t-sm);color:var(--muted);}
.consent a{color:var(--terracotta);text-decoration:underline;}

/* Stappenbalk */
.stepper{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;justify-content:center;}
.stepper__item{display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm);color:var(--muted);}
.stepper__item b{
  display:flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);font-size:.875rem;font-weight:600;
}
.stepper__item[aria-current="step"]{color:var(--ink);font-weight:600;}
.stepper__item[aria-current="step"] b{background:var(--terracotta);border-color:var(--terracotta);color:var(--on-accent);}
.stepper__line{width:3rem;height:1px;background:var(--line-strong);}

.form-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;}

/* Meldingen */
.alert{display:flex;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-md);font-size:var(--t-sm);}
.alert b{flex:none;}
.alert--error{background:#F7E4DE;border:1px solid #E4B8AC;color:#7C3A28;}
.alert--ok{background:#E6EFE7;border:1px solid #BCD3C0;color:#2C4635;}
.success-panel{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);text-align:center;padding:clamp(2rem,1rem + 3vw,3rem);}
.success-panel__mark{
  display:flex;align-items:center;justify-content:center;width:3.75rem;height:3.75rem;
  border-radius:var(--r-pill);background:#E6EFE7;color:var(--green);font-size:1.6rem;font-weight:700;
}

/* Zijpaneel bij formulier */
.aside-card{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-8);border-radius:var(--r-lg);background:var(--green);color:#D3DCD6;}
.aside-card h2{color:#FBF7EF;font-size:var(--t-xl);}
.aside-card ol{counter-reset:a;display:flex;flex-direction:column;gap:var(--s-3);}
.aside-card li{display:flex;gap:var(--s-3);font-size:var(--t-sm);}
.aside-card li::before{
  counter-increment:a;content:counter(a);flex:none;
  font-family:var(--font-display);font-weight:600;color:var(--ochre-light);
}

/* 9 — Responsive ----------------------------------------------------------- */
@media (max-width:60rem){
  .nav__list{
    position:fixed;inset:4.5rem 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:var(--s-2) 1.25rem var(--s-6);
    box-shadow:var(--shadow-soft);
    transform:translateY(-120%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .nav__list[data-open="true"]{transform:translateY(0);}
  .nav__link{padding-block:var(--s-4);border-bottom:1px solid var(--line);}
  .nav__link[aria-current="page"]{border-bottom-color:var(--line);}
  .nav__cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (min-width:48rem){
  .hero__inner{grid-template-columns:1.05fr .95fr;}
  .split{grid-template-columns:1.25fr 1fr;}
  .feature{grid-template-columns:1.1fr 1fr;}
  .feature__aside{border-top:0;border-left:1px solid var(--line);}
  .detail{grid-template-columns:1.15fr 1fr;}
  .form-layout{grid-template-columns:minmax(0,1fr) 21rem;}
}
@media (min-width:62rem){
  .hero__text{gap:var(--s-6);}
}

/* 10 — Voorkeuren & print --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
@media print{
  .site-header,.nav-toggle,.cta,.skip-link,.hero__actions{display:none;}
  body{background:#fff;color:#000;}
  .section{padding-block:1rem;}
}

/* 11 — Lichtbak (portfolio) -------------------------------------------------
   Het raster toont een 4:5-uitsnede; hier verschijnt het volledige werk. */
.work--klikbaar{cursor:zoom-in;}
.work__vergroot{
  position:absolute;right:.6rem;bottom:.6rem;
  display:flex;align-items:center;gap:.3rem;
  padding:.35rem .6rem;border-radius:var(--r-pill);
  background:rgb(35 32 28 / .72);color:#fff;
  font-size:.75rem;font-weight:500;
  opacity:0;transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.work--klikbaar .work__frame{position:relative;}
.work--klikbaar:hover .work__vergroot,
.work--klikbaar:focus-visible .work__vergroot{opacity:1;transform:translateY(0);}

body.lichtbak-open{overflow:hidden;}

.lichtbak{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:clamp(.75rem,2vw,2rem);
  background:rgb(20 18 16 / .93);
  backdrop-filter:blur(4px);
}
.lichtbak__inhoud{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-4);
  max-width:min(100%,1400px);max-height:100%;margin:0;
}
.lichtbak__beeld{
  max-width:100%;max-height:calc(100vh - 9rem);
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--r-sm);
  box-shadow:0 30px 70px -30px rgb(0 0 0 / .8);
  background:var(--paper);
}
.lichtbak.is-laden .lichtbak__beeld{opacity:.35;transition:opacity .2s ease;}

.lichtbak__bijschrift{
  display:flex;flex-direction:column;gap:.15rem;text-align:center;color:#EDE6DA;
}
.lichtbak__titel{font-family:var(--font-display);font-weight:500;font-size:var(--t-lg);}
.lichtbak__meta{font-size:var(--t-sm);color:#B6ADA0;}
.lichtbak__teller{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;color:#8C8479;}

.lichtbak__sluit,.lichtbak__nav{
  display:flex;align-items:center;justify-content:center;flex:none;
  min-width:44px;min-height:44px;border-radius:var(--r-pill);
  background:rgb(255 255 255 / .1);color:#F4EDE0;
  font-size:1.75rem;line-height:1;
  transition:background-color .18s ease;
}
.lichtbak__sluit:hover,.lichtbak__nav:hover{background:rgb(255 255 255 / .22);}
.lichtbak__sluit{position:absolute;top:clamp(.75rem,2vw,1.5rem);right:clamp(.75rem,2vw,1.5rem);font-size:1.5rem;}
.lichtbak :focus-visible{outline:3px solid var(--ochre-light);outline-offset:3px;}

@media (max-width:40rem){
  .lichtbak{flex-direction:column;justify-content:center;}
  .lichtbak__beeld{max-height:calc(100vh - 12rem);}
  /* Op een smal scherm staan de bladerknoppen onder het werk in plaats van
     ernaast: naast het beeld zouden ze de afbeelding wegdrukken. */
  .lichtbak__nav{position:fixed;bottom:1rem;}
  .lichtbak__nav--vorige{left:1rem;}
  .lichtbak__nav--volgende{right:1rem;}
}