/* Nox Productstudio: "nachtlicht". Twee lettertypes: Fraunces (titels) en Hanken Grotesk (tekst). Een nachtblauwe ruimte waarin elke foto als een
   belicht object ligt, met gouden hoektekens. Eén zachte maanlichtgloed in de hero.
   Bewust één donkere wereld (geen lichte variant), met crèmekleurige "maanlicht"-banden. */
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/fraunces-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/fraunces-latin-wght-italic.woff2) format("woff2-variations"),url(fonts/fraunces-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-display:swap;font-weight:100 900;src:url(fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2-variations"),url(fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2")}

:root{
  --night:#0D1630;     /* nachtblauw, basis */
  --night-2:#131E3D;   /* iets lichter vlak */
  --night-3:#24325A;   /* lijnen */
  --moon:#F1EADB;      /* maanlicht: tekst en lichte banden */
  --mist:#A8B0C4;      /* gedempte tekst */
  --gold:#CDA55A;      /* krachtkleur */
  --gold-hi:#E4C37F;
  --gold-deep:#8A6522; /* goud op crème */
  --err:#FF9C8C;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s-1:.8125rem;--s0:1.0625rem;--s1:1.25rem;--s2:1.75rem;--s3:clamp(1.9rem,3.6vw,2.6rem);--s4:clamp(2.5rem,5.6vw,4.6rem);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:72rem;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--night);color:var(--moon);font:400 var(--s0)/1.65 var(--f-body);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;text-wrap:balance;margin:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h1{font-size:var(--s4)}
h2{font-size:var(--s3)}
h3{font-size:var(--s1);font-weight:600;line-height:1.25}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--gold)}
p{margin:0;max-width:65ch}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:.6rem 1rem;z-index:20}
.skip:focus{left:var(--gutter)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.label{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.lead{font-size:var(--s1);line-height:1.55}
.slogan{font-family:var(--f-display);font-style:italic;font-size:var(--s1);color:var(--gold)}
.stack{display:flex;flex-direction:column;gap:1.25rem}
.muted{color:var(--mist)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--night);border-bottom:1px solid var(--night-3)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--night)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem}
.brand{flex:none;display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--moon)}
.brand:hover{color:var(--moon)}
.brand-mark{width:26px;height:26px;flex:none;color:var(--gold)}
.brand-name{font-family:var(--f-display);font-weight:600;font-size:1.55rem;letter-spacing:.14em;line-height:1}
.brand-sub{display:block;font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:.25rem;white-space:nowrap}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;padding-block:.3rem;display:inline-block;border-bottom:1px solid transparent;white-space:nowrap}
.nav a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--gold-hi)}
.nav .nav-cta{background:var(--gold);color:var(--night);padding:.5rem 1rem;border:0;font-weight:600}
.nav .nav-cta:hover{background:var(--gold-hi);color:var(--night)}
.nav-toggle{display:none;font:600 .95rem var(--f-body);background:none;color:var(--moon);border:1px solid var(--gold);padding:.45rem .85rem;cursor:pointer}
@media (min-width:961px){.nav ul{flex-wrap:nowrap;justify-content:flex-end}}
@media (max-width:960px){
  .js .nav-toggle{display:inline-flex}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid var(--night-3);padding:1rem var(--gutter-r) 1.4rem var(--gutter)}
  .js .nav.is-open{display:block}
  .js .nav ul{flex-direction:column;align-items:flex-start;gap:.2rem}
  .js .nav a{font-size:1.15rem;padding-block:.55rem}
  .js .nav .nav-cta{margin-top:.6rem}
  .head-row{flex-wrap:wrap}
}

/* knoppen */
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 1rem var(--f-body);text-decoration:none;padding:.85rem 1.3rem;border:1px solid var(--moon);color:var(--moon);background:transparent;cursor:pointer}
.btn:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--night)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--night)}
.btn[disabled]{opacity:.55;cursor:progress}

/* foto als belicht object, met gouden hoektekens */
.print{position:relative;margin:0;padding:12px}
.print::before,.print::after,.print .crop::before,.print .crop::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--gold);border-style:solid;opacity:.75}
.print::before{top:0;left:0;border-width:1px 0 0 1px}
.print::after{top:0;right:0;border-width:1px 1px 0 0}
.print .crop::before{bottom:0;left:0;border-width:0 0 1px 1px}
.print .crop::after{bottom:0;right:0;border-width:0 1px 1px 0}
.print img{width:100%;background:var(--night-2)}
.print figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.print figcaption span:first-child{color:var(--moon)}
.print figcaption span:last-child{font-variant-numeric:tabular-nums}

/* hero met maanlicht */
.hero{position:relative;overflow:hidden;padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem)}
.hero::before{content:"";position:absolute;width:min(70vw,52rem);aspect-ratio:1;right:-12%;top:-35%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(241,234,219,.16),rgba(205,165,90,.07) 55%,transparent 100%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero-text{display:flex;flex-direction:column;gap:1.4rem;min-width:0}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-media{max-width:30rem}}

.page-head{padding-block:clamp(2.25rem,5vw,4rem) clamp(1.75rem,3vw,2.75rem);display:flex;flex-direction:column;gap:1.1rem}
.page-head-wrap{border-bottom:1px solid var(--night-3)}
.crumbs{font-size:var(--s-1);color:var(--mist)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--gold)}

/* secties */
.section{padding-block:clamp(3rem,6.5vw,5.5rem)}
.section+.section{border-top:1px solid var(--night-3)}
.section-head{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2.2rem}
.deep{background:var(--night-2)}
/* maanlichtband: crème vlak met nachtblauwe tekst */
.moonband{background:var(--moon);color:var(--night)}
.moonband .label,.moonband h2 em,.moonband .slogan{color:var(--gold-deep)}
.moonband .muted{color:#4A5370}
.moonband a{text-decoration-color:var(--gold-deep)}
.moonband a:hover{color:var(--gold-deep)}
.moonband .btn{border-color:var(--night);color:var(--night)}
.moonband .btn:hover{background:var(--night);color:var(--moon)}
.moonband .btn-gold{background:var(--night);border-color:var(--night);color:var(--gold-hi)}
.moonband .btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--moon)}
.section+.moonband,.moonband+.section{border-top:0}

/* twee vormen */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.offer{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:1.5rem;align-items:start;min-width:0}
.offer-text{display:flex;flex-direction:column;gap:1rem;min-width:0;height:100%}
@media (max-width:1100px){.offer{grid-template-columns:1fr}.offer .print{max-width:20rem}}
.offer h3{font-size:var(--s2);font-weight:600}
.offer ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem;color:var(--mist)}
.offer .tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--gold);color:var(--night);padding:.3rem .6rem}
.offer .tag.ghost{background:transparent;color:var(--mist);border:1px solid var(--night-3)}
.offer .btns{margin-top:auto;padding-top:.5rem}
@media (max-width:760px){.offers{grid-template-columns:1fr}}

/* doelgroepen */
.audiences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.audience{display:flex;flex-direction:column;gap:.8rem;text-decoration:none;color:var(--moon)}
.audience h3{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.audience h3::after{content:"\2192";font-family:var(--f-body);color:var(--gold)}
.audience:hover h3{color:var(--gold-hi)}
.audience p{color:var(--mist)}
@media (max-width:820px){.audiences{grid-template-columns:1fr}}

/* fotoraster */
.audience .print,.sheet .print{padding:10px}
/* foto's altijd in hun eigen verhouding: nooit bijsnijden */
.audience img,.sheet img{width:100%}
.sheet{display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1.5rem)}
.sheet-row{display:flex;gap:clamp(.75rem,2vw,1.5rem);align-items:flex-start}
.sheet-item{flex:1 1 20px;min-width:0}
.sheet-item a{display:block}
.r1-1{flex-grow:1}.r2-3{flex-grow:.6667}.r3-2{flex-grow:1.5}.r3-4{flex-grow:.75}.r4-3{flex-grow:1.3333}.r4-5{flex-grow:.8}.r5-4{flex-grow:1.25}.r5-3{flex-grow:1.6667}.r5-2{flex-grow:2.5}
.sheet a{display:block;text-decoration:none}
.sheet a:hover img{outline:1px solid var(--gold);outline-offset:-1px}
@media (max-width:600px){.sheet-row{flex-direction:column}.sheet-item{width:100%}.sheet-spacer{display:none}}
.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.cats a{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;border:1px solid var(--night-3);padding:.5rem .8rem}
.cats a:hover{border-color:var(--gold);color:var(--gold-hi)}
.gallery-block+.gallery-block{margin-top:3.5rem}
.gallery-block h2{font-size:var(--s2);margin-bottom:1.25rem;scroll-margin-top:6rem}

/* twee kolommen */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.split>*{min-width:0}
@media (max-width:820px){.split{grid-template-columns:1fr}}

.points{list-style:none;margin:0;padding:0;display:grid}
.points li{padding-block:1.1rem;border-top:1px solid var(--night-3);display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.4rem 1.5rem}
.points li:last-child{border-bottom:1px solid var(--night-3)}
.points strong{font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--gold-hi)}
.points span{color:var(--mist)}
.moonband .points li{border-color:#CFC6B3}
.moonband .points strong{color:var(--gold-deep)}
.moonband .points span{color:#3A4360}
@media (max-width:600px){.points li{grid-template-columns:1fr}}

/* prijzen */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,2rem)}
.price{display:flex;flex-direction:column;gap:1.1rem;border:1px solid var(--night-3);padding:clamp(1.4rem,3vw,2.25rem);min-width:0}
.price.featured{border-color:var(--gold);background:var(--night-2)}
.price-amount{font-family:var(--f-display);font-weight:600;font-size:clamp(2.6rem,6vw,4rem);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.price-amount small{font-family:var(--f-body);font-size:.95rem;font-weight:500;margin-left:.35rem;color:var(--mist)}
.price-amount.text{font-size:clamp(1.9rem,4vw,2.6rem)}
.price ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
.price .btns{margin-top:auto}
@media (max-width:760px){.prices{grid-template-columns:1fr}}
.price-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2.5rem;align-items:end}
@media (max-width:700px){.price-strip{grid-template-columns:1fr;align-items:start}}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.25rem;counter-reset:step}
.steps li{counter-increment:step;display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--gold);padding-top:.9rem;min-width:0}
.steps li::before{content:counter(step);font-family:var(--f-display);font-style:italic;font-size:1.6rem;line-height:1;color:var(--gold)}
.steps p{font-size:.98rem;color:var(--mist)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.faq{display:grid;max-width:52rem}
.faq details{border-top:1px solid var(--night-3)}
.faq details:last-child{border-bottom:1px solid var(--night-3)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding-block:1.15rem;font-weight:600;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--gold-hi)}
.faq details p{padding-bottom:1.2rem;color:var(--mist)}

.cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem}
.cta h2{max-width:20ch}

/* formulier */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.25rem}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.95rem}
.field label .opt{font-weight:400;color:var(--mist)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--moon);background:var(--night-2);border:1px solid var(--night-3);padding:.8rem .9rem;border-radius:0;width:100%}
.field textarea{min-height:9rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6F789A}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.form-note{grid-column:1/-1;font-size:.9rem;color:var(--mist)}
.form-status{grid-column:1/-1;padding:.9rem 1rem;border:1px solid currentColor;font-weight:500}
.form-status.ok{color:var(--gold-hi)}
.form-status.err{color:var(--err)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.contact-aside{display:flex;flex-direction:column;gap:1rem;border-left:1px solid var(--gold);padding-left:1.5rem}
.contact-aside .tel{font-family:var(--f-display);font-size:var(--s2);text-decoration:none;font-variant-numeric:lining-nums}

/* lightbox */
.lightbox{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:transparent}
.lightbox::backdrop{background:rgba(6,10,24,.94)}
.lightbox[open]{display:grid;grid-template-rows:auto 1fr auto;color:var(--moon)}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:calc(.75rem + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) .75rem max(16px,env(safe-area-inset-left,0px));font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.lb-stage img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.lb-nav{display:flex;justify-content:center;gap:.75rem;padding:.75rem 16px calc(1rem + env(safe-area-inset-bottom,0px))}
.lb-btn{font:600 .95rem var(--f-body);background:transparent;color:var(--moon);border:1px solid var(--gold);padding:.6rem 1rem;cursor:pointer;min-width:3rem}
.lb-btn:hover{background:var(--gold);color:var(--night)}

/* footer */
.site-foot{background:#091024;border-top:1px solid var(--night-3);padding-block:3.5rem calc(2rem + env(safe-area-inset-bottom,0px));font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot-grid h2{font-family:var(--f-body);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);margin-bottom:.8rem}
.legal{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--night-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;color:var(--mist);font-size:.85rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

.prose{display:flex;flex-direction:column;gap:1.1rem;max-width:44rem}
.prose h2{font-size:var(--s2);margin-top:1.2rem}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}
.sheet+.btns{margin-top:2rem}
.offer .print{max-width:22rem}
.offer img{width:100%}
.legal-links{display:flex;gap:1.25rem}
/* tikdoelen minstens 44px op aanraakschermen */
.nav-toggle,.cats a,.btn,.lb-btn{min-height:44px}
.cats a{display:inline-flex;align-items:center}
@media (pointer:coarse){.foot-grid ul a,.legal a,.crumbs a{display:inline-block;padding-block:.45rem}}

/* kennis */
.reads{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:clamp(1rem,2.5vw,2rem)}
.reads a{display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:var(--moon);height:100%;border-top:1px solid var(--gold);padding-top:1rem}
.reads a strong{font-family:var(--f-display);font-weight:600;font-size:1.25rem;line-height:1.25}
.reads a:hover strong{color:var(--gold-hi)}
.reads .print{padding:10px}
.reads img{width:100%}
@media (max-width:820px){.reads{grid-template-columns:1fr}}
.article{display:flex;flex-direction:column;gap:1.5rem;max-width:56rem}
.article>.print{align-self:flex-start;max-width:100%}
.article>.print img{width:auto;max-width:100%;max-height:75vh}
.byline{font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.prose h2{font-size:var(--s2)}
.prose a:not(.btn){color:var(--gold-hi)}
.prose li{color:var(--mist)}
.prose li strong{color:var(--moon)}
.prose .check{list-style:none;padding:0}
.prose .check li{position:relative;padding-left:1.8rem}
.prose .check li::before{content:"";position:absolute;left:.15rem;top:.5em;width:.75rem;height:.4rem;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.table-wrap{overflow-x:auto;border:1px solid var(--night-3)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.97rem}
.table-wrap th,.table-wrap td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--night-3)}
.table-wrap thead th{font-family:var(--f-display);font-weight:600;color:var(--gold-hi);font-size:1.05rem}
.table-wrap tbody th{font-weight:600;color:var(--moon);white-space:nowrap}
.table-wrap td{color:var(--mist)}
.table-wrap tr:last-child th,.table-wrap tr:last-child td{border-bottom:0}