@charset "utf-8";

/* ==========================================================================
   Esther Schog Fotografie — V1 · DE GROEIBOX
   warm zand · diep teal · Faustina

   Eén ontwerp, dus één stylesheet zonder wisselaar. Alles houdt de `v1-`
   naamruimte aan zodat een tweede versie er later naast kan zonder dat er
   iets lekt.
   ========================================================================== */

/* ---------- lettertypen, lokaal, nul verzoeken naar een ander domein ------ */
@font-face{font-family:'Faustina';font-style:normal;font-weight:400;font-display:swap;src:url(font/faustina-400.woff2) format('woff2')}
@font-face{font-family:'Faustina';font-style:normal;font-weight:600;font-display:swap;src:url(font/faustina-600.woff2) format('woff2')}
@font-face{font-family:'Faustina';font-style:normal;font-weight:700;font-display:swap;src:url(font/faustina-700.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;src:url(font/public-sans-400.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;src:url(font/public-sans-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(font/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(font/jetbrains-mono-500.woff2) format('woff2')}

/* ---------- reset ---------------------------------------------------------
   `img{height:auto}` staat hier met opzet: een width/height-attribuut telt als
   presentational hint op height, en dan doet een CSS aspect-ratio niets meer.
   Zonder deze regel rendert een staande bronfoto op zijn volle intrinsieke
   hoogte. Regels die wél een echte hoogte willen overschrijven dit hieronder. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,picture,svg,video{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,figure,figcaption,ul,ol,dl,dd,fieldset,legend,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit}
table{border-collapse:collapse;width:100%}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ==========================================================================
   TOKENS

   Elke gedempte tint is doorgerekend tegen ELK vlak waar hij op landt
   (LESSONS regel 1). De uitkomst zit in de namen:
     --v1-quiet        op zand 5.38:1, op crème 5.89:1
     --v1-quiet-licht  op diep 8.47:1, op het kamerveld 5.00:1
   De teal uit haar palet (#2F6070) haalde als KAMERVLAK maar 4.06:1 met de
   gedempte lichte tint, dus daar staat een diepere variant (#24505E, 5.00:1).
   De lichtere teal blijft de accentkleur voor knoppen en links op licht.
   ========================================================================== */
#version-v1{
  --v1-veld:#E8D9BF;          /* het Naturals-doek, gemeten in haar eigen foto's */
  --v1-veld-2:#F4EADA;        /* licht crème */
  --v1-diep:#221E17;          /* de donkere band onder de tarieven */
  --v1-kamer:#24505E;         /* het contactvlak, diep genoeg voor gedempte tekst */
  --v1-accent:#2F6070;        /* teal uit haar gepubliceerde kleurenpalet */
  --v1-ink:#2A2418;
  --v1-roest:#7E4100;         /* haar roestbruin, 5.72:1 op zand */
  --v1-quiet:rgba(42,36,24,.74);
  --v1-quiet-licht:rgba(244,234,218,.76);
  /* de prijsschaal wil stiller zijn dan quiet-licht, maar .34 haalde 2.8:1
     op het diepe vlak; .56 is de laagste waarde die er nog 5.23:1 haalt */
  --v1-stil-diep:rgba(244,234,218,.56);
  --v1-lijn:rgba(42,36,24,.20);
  --v1-lijn-licht:rgba(244,234,218,.22);

  --v1-u:8px;                 /* elke verticale maat is een veelvoud hiervan */
  --v1-ease:cubic-bezier(.34,1.2,.34,1);
  --v1-snel:160ms;
  --v1-mid:380ms;
  --v1-traag:820ms;
  --v1-r:2px;                 /* één radius, overal */
  --v1-schaduw:0 30px 64px rgba(70,50,20,.28);
  --v1-schaduw-plaat:0 14px 30px rgba(70,50,20,.26);  /* fysieke fotoplaten */

  /* zes tekstmaten, niet meer */
  --v1-s6:clamp(2.6rem,7.4vw,6rem);
  --v1-s5:clamp(1.9rem,4.2vw,3.1rem);
  --v1-s4:clamp(1.2rem,2.1vw,1.7rem);
  --v1-s3:1rem;
  --v1-s2:.88rem;
  --v1-s1:.76rem;

  background:var(--v1-veld);
  color:var(--v1-ink);
  font:400 17px/1.62 'Public Sans',system-ui,sans-serif;
}
#version-v1 ::selection{background:var(--v1-accent);color:#F4EADA}

/* Eén focusring, zonder specificiteit. Dubbel uitgevoerd, want een
   currentColor-ring verdwijnt juist op een gevulde knop (LESSONS regel 19). */
#version-v1 :where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--v1-ink);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(244,234,218,.96)}
/* op de donkere vlakken keert de ring om */
.v1-tarieven :where(a,button,summary,[tabindex]):focus-visible,
.v1-kamer :where(a,button,summary,[tabindex]):focus-visible{
  outline-color:var(--v1-veld-2) !important;
  box-shadow:0 0 0 6px rgba(34,30,23,.92) !important}

.v1-skip{position:absolute;left:-9999px;top:0;z-index:99}
.v1-skip:focus{left:12px;top:12px;padding:10px 16px;background:var(--v1-accent);color:#F4EADA;border-radius:var(--v1-r)}

/* ---------- gedeelde typografie ------------------------------------------ */
.v1-h2{font-family:'Faustina',Georgia,serif;font-weight:700;
  font-size:var(--v1-s5);line-height:1.06;letter-spacing:-.012em;max-width:20ch}
.v1-h2-licht{color:var(--v1-veld-2)}

.v1-cta{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;
  background:var(--v1-accent);color:#F7F1E6;text-decoration:none;border-radius:var(--v1-r);
  font-weight:600;font-size:var(--v1-s3);box-shadow:0 16px 34px rgba(47,96,112,.30);
  transition:transform var(--v1-mid) var(--v1-ease),box-shadow var(--v1-mid) var(--v1-ease)}
.v1-cta:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(47,96,112,.38)}
.v1-cta-licht{background:var(--v1-veld-2);color:var(--v1-diep);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.v1-cta-wit{background:var(--v1-veld-2);color:#1B3C46;box-shadow:0 16px 34px rgba(0,0,0,.28)}

.v1-ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;
  border:1px solid var(--v1-lijn);border-radius:var(--v1-r);text-decoration:none;
  font-weight:600;font-size:var(--v1-s2);color:var(--v1-accent);
  transition:border-color var(--v1-mid) var(--v1-ease),color var(--v1-mid) var(--v1-ease)}
.v1-ghost:hover{border-color:var(--v1-accent);color:var(--v1-ink)}
.v1-ghost-licht{border-color:var(--v1-lijn-licht);color:var(--v1-veld-2)}
.v1-ghost-licht:hover{border-color:var(--v1-veld-2);color:#fff}

.v1-note{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  line-height:1.55;color:var(--v1-quiet);max-width:28ch}
.v1-note-licht{color:var(--v1-quiet-licht)}

/* citaten: overal dezelfde vorm, alleen het vlak verschilt */
.v1-quote p{font-family:'Faustina',Georgia,serif;font-size:var(--v1-s4);
  line-height:1.42;font-weight:400;max-width:34ch}
.v1-quote cite{display:block;margin-top:calc(var(--v1-u)*1.5);font-style:normal;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  letter-spacing:.04em;color:var(--v1-quiet)}

/* ---------- kop ----------------------------------------------------------- */
.v1-head{display:flex;align-items:center;gap:calc(var(--v1-u)*3);
  padding:calc(var(--v1-u)*3) 26px;max-width:1200px;margin:0 auto}
.v1-mark{text-decoration:none;font-family:'Faustina',Georgia,serif;font-weight:700;
  font-size:21px;line-height:1.1;letter-spacing:-.01em;flex:0 0 auto}
.v1-mark i{font-style:normal;font-weight:400;color:var(--v1-quiet)}
.v1-nav{margin-left:auto}
.v1-burger{display:none}
.v1-menu{display:flex;gap:calc(var(--v1-u)*3)}
.v1-menu a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;font-size:14.5px;font-weight:600;color:var(--v1-quiet);
  transition:color var(--v1-mid) var(--v1-ease)}
.v1-menu a:hover{color:var(--v1-accent)}
.v1-tel{margin-left:calc(var(--v1-u)*2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;
  color:var(--v1-quiet);white-space:nowrap;transition:color var(--v1-mid) var(--v1-ease)}
.v1-tel:hover{color:var(--v1-ink)}

/* ==========================================================================
   1 · HERO — gelaagde compositie, luidheid 3, veld zand
   ========================================================================== */
.v1-hero{position:relative;overflow:hidden;
  background-image:
    radial-gradient(70% 58% at 22% 4%,rgba(255,250,240,.62) 0%,rgba(255,250,240,0) 64%),
    radial-gradient(46% 52% at 96% 84%,rgba(126,65,0,.13) 0%,rgba(126,65,0,0) 70%);
  background-color:var(--v1-veld)}
/* De kop loopt over de VOLLE breedte en de twee kolommen staan eronder. In één
   kolom van 458px kon 86px displaytype niet uit: hij viel in vijf regels en
   duwde de knop uit het eerste scherm. Dit is ook de eigen indelingslogica van
   dit ontwerp: eerst een typebanier, dan pas de bento. */
.v1-wrap{position:relative;max-width:1200px;margin:0 auto;
  padding:calc(var(--v1-u)*3) 26px calc(var(--v1-u)*3);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  grid-template-areas:'kop kop' 'copy box';
  align-items:center;column-gap:calc(var(--v1-u)*4);row-gap:calc(var(--v1-u)*3)}
.v1-copy{grid-area:copy;min-width:0;position:relative;z-index:3}
.v1-h1{grid-area:kop;font-family:'Faustina',Georgia,serif;font-weight:700;
  font-size:var(--v1-s6);line-height:1.02;letter-spacing:-.015em;max-width:19ch}
.v1-h1 em{font-style:normal;color:var(--v1-roest)}
/* De plaatsregel is bewust de tweede grootste regel op het scherm: uit de twee
   grootste regels boven de vouw moet blijken welk vak dit is en waar. */
.v1-place{font-size:var(--v1-s4);font-weight:600;line-height:1.32;
  margin-bottom:calc(var(--v1-u)*2);max-width:26ch}
.v1-lead{color:var(--v1-quiet);font-size:var(--v1-s3);max-width:42ch;
  margin-bottom:calc(var(--v1-u)*4)}
.v1-actions{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--v1-u)*2.5)}

/* de box: steekt rechts buiten de container, zodat je ziet dat er meer in past */
.v1-boxwrap{grid-area:box;position:relative;min-width:0;margin-right:calc(var(--v1-u)*-10)}
/* De kolomverhouding is uitgerekend, niet gekozen: twee kleine cellen plus de
   tussenruimte moeten precies even hoog zijn als de grote vierkante cel, anders
   blijft er onder de grote plaat een gat van tachtig pixel staan. */
.v1-box{position:relative;display:grid;
  grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);
  grid-template-rows:auto auto auto;gap:calc(var(--v1-u)*1.5);
  padding:calc(var(--v1-u)*2);background:var(--v1-veld-2);
  border:1px solid var(--v1-lijn);box-shadow:var(--v1-schaduw)}
.v1-cell{position:relative;margin:0}
.v1-cell img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--v1-r);box-shadow:var(--v1-schaduw-plaat);
  filter:saturate(1.03) contrast(1.03)}
.v1-cell-lg{grid-row:span 2}
.v1-cell figcaption{position:absolute;left:calc(var(--v1-u)*1.25);bottom:calc(var(--v1-u)*1.25);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;font-size:var(--v1-s1);
  letter-spacing:.08em;padding:5px 9px;border-radius:var(--v1-r);
  background:rgba(244,234,218,.90);color:var(--v1-ink)}
.v1-slot{display:grid;place-items:center;aspect-ratio:1/1;border-radius:var(--v1-r);
  border:1px dashed var(--v1-lijn);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  letter-spacing:.08em;color:var(--v1-quiet);text-align:center;padding:8px}
/* de lege plek in de box: één brede strook, geen vierkant */
.v1-slot-wide{grid-column:1 / -1;aspect-ratio:auto;min-height:58px}
.v1-sat{position:absolute;z-index:4;border-radius:var(--v1-r);
  background:var(--v1-ink);color:var(--v1-veld-2);
  box-shadow:var(--v1-schaduw);
  padding:calc(var(--v1-u)*1.5) calc(var(--v1-u)*2)}
.v1-sat b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  font-size:.96rem;letter-spacing:.02em}
.v1-sat span{display:block;font-size:var(--v1-s1);line-height:1.35;color:rgba(244,234,218,.82);max-width:20ch}
.v1-sat-a{left:calc(var(--v1-u)*-3);top:calc(var(--v1-u)*4)}
.v1-sat-b{left:calc(var(--v1-u)*-4);bottom:calc(var(--v1-u)*8);background:var(--v1-roest)}

/* ==========================================================================
   2 · DE BOX ZELF — stille tussenruimte, luidheid 1, veld zand
   Opent koud: geen kop, alleen lopende tekst in een smallere kolom dan de
   rest van de pagina. De verticale lijn begint IN de hero en loopt hier door,
   zodat de grens tussen 1 en 2 door iets wordt overschreden.
   ========================================================================== */
.v1-naschrift{position:relative;background:var(--v1-veld);
  padding:calc(var(--v1-u)*4) 0 calc(var(--v1-u)*9)}
.v1-naschrift::before{content:"";position:absolute;left:26px;top:calc(var(--v1-u)*-7);
  width:1px;height:calc(var(--v1-u)*13);background:var(--v1-roest);opacity:.55}
.v1-naschrift::after{content:"";position:absolute;left:calc(26px - 4px);top:calc(var(--v1-u)*-7);
  width:9px;height:9px;background:var(--v1-roest)}
.v1-naschrift-in{max-width:920px;margin:0 auto;padding:0 26px 0 calc(26px + var(--v1-u)*6);
  display:grid;gap:calc(var(--v1-u)*2);color:var(--v1-quiet);font-size:var(--v1-s2)}
.v1-naschrift-in p{max-width:64ch}

/* ==========================================================================
   3 · HET JAAR ROND — tijdlijn, luidheid 4, veld crème
   Opent met het spoor: een label dat de compositie zelf is, boven de kop.
   ========================================================================== */
.v1-fases{background:var(--v1-veld-2);padding:calc(var(--v1-u)*11) 0 calc(var(--v1-u)*10)}
.v1-fases-in{max-width:1200px;margin:0 auto;padding:0 26px}
/* het spoor staat op de maat van de rail eronder, niet op die van de
   tekstkolom: zo is het de kop van die rail en geen kicker boven de H2 */
.v1-spoor{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;
  gap:calc(var(--v1-u)*1) calc(var(--v1-u)*4);
  padding:0 max(26px,calc((100vw - 1400px) / 2));
  margin-bottom:calc(var(--v1-u)*4);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--v1-quiet)}
.v1-fases-lead{margin-top:calc(var(--v1-u)*2);color:var(--v1-quiet);max-width:56ch}

/* De rail breekt uit de tekstcontainer naar een eigen maat van 1400. Dat is
   geen sier: op 214px per plaat las deze band in de bluртest als een strook
   thumbnails, terwijl hij juist de sectie is die het idee buiten de hero moet
   dragen. Op 264px leest hij als een reeks platen.
   De uitbraak gebeurt met PADDING, niet met een negatieve marge of 100vw:
   padding kan per definitie geen horizontale overflow maken. */
.v1-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:calc(var(--v1-u)*2.5);margin-top:calc(var(--v1-u)*6);align-items:end;
  padding:0 max(26px,calc((100vw - 1400px) / 2)) calc(var(--v1-u)*7);
  position:relative}
/* de basislijn waar de platen aan hangen: één streep die de hele band
   samenbindt en die de bluртest wél haalt */
.v1-track::after{content:"";position:absolute;left:0;right:0;
  bottom:calc(var(--v1-u)*3);height:1px;background:var(--v1-lijn)}
/* de trap: elke plaat hangt iets hoger boven de basislijn dan de volgende,
   alsof hij er net bij is gelegd. Dat maakt de rij een tijdlijn, geen raster. */
.v1-fase{position:relative;min-width:0;padding-bottom:var(--drop,0px)}
.v1-fase:nth-child(1){--drop:72px}
.v1-fase:nth-child(2){--drop:54px}
.v1-fase:nth-child(3){--drop:36px}
.v1-fase:nth-child(4){--drop:18px}
/* de afhanglijn van plaat naar basislijn, plus het merkteken erop */
.v1-fase::after{content:"";position:absolute;left:0;
  bottom:calc(var(--v1-u)*-4);width:1px;
  height:calc(var(--drop,0px) + var(--v1-u)*4);background:var(--v1-lijn)}
.v1-fase::before{content:"";position:absolute;left:-2px;
  bottom:calc(var(--v1-u)*-4 - 2px);width:5px;height:5px;
  background:var(--v1-accent);z-index:2}
.v1-fase img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--v1-r);
  box-shadow:var(--v1-schaduw-plaat);filter:saturate(1.03) contrast(1.03)}
.v1-fase figcaption{margin-top:calc(var(--v1-u)*1.75)}
.v1-fase figcaption b{display:block;font-family:'Faustina',Georgia,serif;
  font-weight:600;font-size:var(--v1-s4);line-height:1.14}
.v1-fase figcaption span{display:block;margin-top:calc(var(--v1-u)*.5);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  color:var(--v1-quiet)}
/* het nummer kruist de onderrand van de foto: half op het beeld, half eraf */
.v1-fasenr{position:absolute;left:calc(var(--v1-u)*-1);z-index:2;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  font-size:var(--v1-s1);letter-spacing:.08em;padding:4px 8px;
  background:var(--v1-roest);color:#F7F1E6;border-radius:var(--v1-r)}
.v1-fase .v1-fasenr{top:calc(100% - var(--drop,0px) - 86px)}

.v1-quote-fases{margin-top:calc(var(--v1-u)*4);padding-left:calc(var(--v1-u)*3);
  border-left:1px solid var(--v1-lijn)}

/* ==========================================================================
   4 · ZES DOEKEN — register, luidheid 2, veld crème
   Opent met een bijschrift VÓÓR de kop. De rijen lopen full-bleed tot beide
   schermranden: dit is de sectie die de container het hardst breekt.
   ========================================================================== */
.v1-doeken{background:var(--v1-veld-2);padding:0 0 calc(var(--v1-u)*11)}
/* het bijschrift staat VÓÓR de kop en is echte lopende tekst, geen kicker */
.v1-voorschrift{max-width:1200px;margin:0 auto calc(var(--v1-u)*3);padding:0 26px;
  font-size:var(--v1-s3);color:var(--v1-quiet)}
.v1-voorschrift + .v1-h2{max-width:1200px;margin:0 auto;padding:0 26px}
.v1-register{margin-top:calc(var(--v1-u)*5);border-top:1px solid var(--v1-lijn)}
.v1-rij{display:grid;align-items:center;
  grid-template-columns:var(--v1-u) 8.5rem minmax(0,1fr) 16rem 130px;
  gap:calc(var(--v1-u)*3);
  padding:calc(var(--v1-u)*2) max(26px,calc((100vw - 1200px) / 2 + 26px));
  border-bottom:1px solid var(--v1-lijn)}
.v1-vlek{width:var(--v1-u);height:calc(var(--v1-u)*7);border-radius:var(--v1-r);
  border:1px solid var(--v1-lijn)}
.v1-rij-naam{font-family:'Faustina',Georgia,serif;font-weight:700;
  font-size:var(--v1-s4);line-height:1.16}
.v1-rij-tekst{font-size:var(--v1-s2);color:var(--v1-quiet);max-width:56ch}
.v1-rij-reg{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  line-height:1.5;color:var(--v1-quiet)}
.v1-rij-beeld{width:130px;height:173px;object-fit:cover;border-radius:var(--v1-r);
  box-shadow:var(--v1-schaduw-plaat);filter:saturate(1.03) contrast(1.03)}

/* ==========================================================================
   5 · WAT HET KOST — datablok, luidheid 3, veld diep
   Opent met een full-bleed veldwissel: eerst alleen de prijsschaal, de kop
   komt pas daarna.
   ========================================================================== */
.v1-tarieven{background:var(--v1-diep);color:var(--v1-veld-2);
  padding:calc(var(--v1-u)*9) 0 calc(var(--v1-u)*20)}
.v1-schaal{display:flex;flex-wrap:wrap;gap:calc(var(--v1-u)*3);
  padding:0 26px calc(var(--v1-u)*6);max-width:1040px;margin:0 auto;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s4);
  color:var(--v1-stil-diep)}
.v1-schaal span:first-child{color:var(--v1-veld-2)}
.v1-tarieven-in{max-width:1040px;margin:0 auto;padding:0 26px}
.v1-tarieven-in .v1-h2{max-width:22ch}

.v1-tabel{margin-top:calc(var(--v1-u)*5);font-size:var(--v1-s2)}
.v1-tabel caption{text-align:left;padding-bottom:calc(var(--v1-u)*1.5);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  letter-spacing:.06em;color:var(--v1-quiet-licht)}
.v1-tabel th,.v1-tabel td{text-align:left;padding:calc(var(--v1-u)*1.5) calc(var(--v1-u)*2);
  border-bottom:1px solid var(--v1-lijn-licht);vertical-align:baseline}
.v1-tabel thead th{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;
  font-size:var(--v1-s1);letter-spacing:.06em;color:var(--v1-quiet-licht);
  border-bottom-color:rgba(244,234,218,.4)}
.v1-tabel tbody th{font-weight:400;padding-left:0}
.v1-tabel td{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v1-tabel .v1-leeg{color:var(--v1-quiet-licht);white-space:normal}

.v1-uitklap{margin-top:calc(var(--v1-u)*5);border-top:1px solid var(--v1-lijn-licht)}
.v1-vouw{border-bottom:1px solid var(--v1-lijn-licht)}
.v1-vouw summary{display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--v1-u)*2);min-height:56px;cursor:pointer;list-style:none;
  font-family:'Faustina',Georgia,serif;font-weight:600;font-size:var(--v1-s4)}
.v1-vouw summary::-webkit-details-marker{display:none}
.v1-vouw summary::after{content:"+";font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--v1-s4);color:var(--v1-quiet-licht)}
.v1-vouw[open] summary::after{content:"\2212"}
.v1-lijst{padding-bottom:calc(var(--v1-u)*3)}
.v1-lijst li{display:flex;flex-wrap:wrap;gap:calc(var(--v1-u)*2);
  justify-content:space-between;padding:calc(var(--v1-u)*1.25) 0;
  border-top:1px solid var(--v1-lijn-licht);font-size:var(--v1-s2)}
.v1-lijst li span{color:var(--v1-quiet-licht);flex:1 1 16rem;min-width:0}
.v1-lijst li b{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v1-pakket{padding:calc(var(--v1-u)*1.5) 0 calc(var(--v1-u)*3)}
.v1-pakket h3{font-family:'Faustina',Georgia,serif;font-weight:700;font-size:var(--v1-s4);
  line-height:1.2;margin:0 0 calc(var(--v1-u)*.75)}
.v1-pakket p{font-size:var(--v1-s2);color:var(--v1-quiet-licht);max-width:60ch}
.v1-pakket ul{margin-top:calc(var(--v1-u)*1.5)}
.v1-pakket li{position:relative;padding-left:calc(var(--v1-u)*2.5);
  font-size:var(--v1-s2);color:var(--v1-quiet-licht);max-width:60ch}
.v1-pakket li::before{content:"";position:absolute;left:0;top:.72em;
  width:var(--v1-u);height:1px;background:currentColor}
.v1-vouw-noot{padding-bottom:calc(var(--v1-u)*3);font-size:var(--v1-s1);
  font-family:'JetBrains Mono',ui-monospace,monospace;line-height:1.6;
  color:var(--v1-quiet-licht);max-width:64ch}
.v1-kleine-letters{margin-top:calc(var(--v1-u)*4);font-size:var(--v1-s2);
  color:var(--v1-quiet-licht);max-width:66ch}
.v1-tarief-actie{margin-top:calc(var(--v1-u)*5);display:flex;flex-wrap:wrap;
  align-items:center;gap:calc(var(--v1-u)*2.5)}

/* ==========================================================================
   6 · TROUWEN — full-bleed beeldveld, luidheid 5
   Het beeld begint IN de donkere sectie hierboven en loopt hier door: dat is
   de tweede grensoverschrijding. Het gaat rand tot rand, ongecropt door een
   container: beeldeis 1.
   ========================================================================== */
.v1-trouwen{position:relative;z-index:2;margin-top:calc(var(--v1-u)*-14);
  padding-bottom:calc(var(--v1-u)*11);background:var(--v1-veld-2)}
.v1-trouwbeeld{width:100%;height:auto;display:block}
.v1-trouwpaneel{position:relative;max-width:1200px;margin:calc(var(--v1-u)*-9) auto 0;
  padding:0 26px}
.v1-trouwpaneel{display:block}
.v1-trouwpaneel > *{max-width:640px}
.v1-trouwpaneel{background:none}
/* De tekst krijgt een EIGEN plaat op het element dat de tekst bevat, niet op de
   sectie: alleen dan wordt hij als tekst op fotografie gemeten. */
.v1-trouwpaneel{
  --plaat:linear-gradient(180deg,rgba(244,234,218,.97) 0%,rgba(244,234,218,.94) 100%)}
.v1-trouwpaneel .v1-h2,
.v1-trouwpaneel .v1-trouwprijs,
.v1-trouwpaneel .v1-inbegrepen,
.v1-trouwpaneel .v1-trouwtekst{background-image:var(--plaat);padding:calc(var(--v1-u)*1.5) calc(var(--v1-u)*3)}
.v1-trouwpaneel .v1-h2{padding-top:calc(var(--v1-u)*3)}
.v1-trouwprijs{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s4);
  color:var(--v1-roest)}
.v1-inbegrepen li{position:relative;padding-left:calc(var(--v1-u)*3);font-size:var(--v1-s2);
  color:var(--v1-quiet)}
.v1-inbegrepen li::before{content:"";position:absolute;left:calc(var(--v1-u)*.5);top:.72em;
  width:var(--v1-u);height:1px;background:var(--v1-roest)}
.v1-trouwtekst{font-size:var(--v1-s2);color:var(--v1-quiet);
  padding-bottom:calc(var(--v1-u)*3) !important}
.v1-quote-trouw{position:relative;max-width:1200px;
  margin:calc(var(--v1-u)*5) auto 0;padding:0 26px}
.v1-quote-trouw p{background:var(--v1-veld-2);max-width:46ch;
  padding-left:calc(var(--v1-u)*3);border-left:1px solid var(--v1-roest)}
.v1-quote-trouw cite{padding-left:calc(var(--v1-u)*3)}

/* ==========================================================================
   7 · ADOPTIE 2026 — editorial spread, luidheid 2, veld crème
   Opent met één zin op displaymaat, die het werk van een kop doet.
   ========================================================================== */
.v1-project{background:var(--v1-veld-2);padding:calc(var(--v1-u)*11) 0}
.v1-project-in{max-width:1120px;margin:0 auto;padding:0 26px;
  display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
  grid-template-areas:'zin zin' 'beeld tekst';
  column-gap:calc(var(--v1-u)*7);row-gap:calc(var(--v1-u)*6);align-items:start}
.v1-zin{grid-area:zin;max-width:26ch;font-weight:400}
.v1-project-beeld{grid-area:beeld;position:relative}
.v1-project-beeld img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--v1-r);box-shadow:var(--v1-schaduw)}
.v1-project-beeld figcaption{margin-top:calc(var(--v1-u)*1.5);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  letter-spacing:.06em;color:var(--v1-quiet)}
.v1-project-tekst{grid-area:tekst;display:grid;gap:calc(var(--v1-u)*2.5);
  padding-top:calc(var(--v1-u)*2)}
.v1-project-tekst p{max-width:52ch;color:var(--v1-quiet);font-size:var(--v1-s3)}
.v1-project-link a{color:var(--v1-accent);font-weight:600;
  text-decoration-thickness:1px;text-underline-offset:4px}

/* ==========================================================================
   8 · OP SCHOOL — diagram, luidheid 3, veld zand
   De kop staat ÍN de compositie: tussen de twee portretten in, niet erboven.
   ========================================================================== */
.v1-school{background:var(--v1-veld);
  padding:calc(var(--v1-u)*11) 0 calc(var(--v1-u)*24)}
.v1-school-in{max-width:1200px;margin:0 auto;padding:0 26px}
.v1-school-kop{display:flex;align-items:center;justify-content:center;
  gap:calc(var(--v1-u)*5);flex-wrap:wrap}
.v1-school-kop .v1-h2{text-align:center;max-width:14ch;flex:0 1 auto}
.v1-school-a,.v1-school-b{width:230px;height:230px;object-fit:cover;flex:0 0 auto;
  border-radius:var(--v1-r);box-shadow:var(--v1-schaduw-plaat);
  filter:saturate(1.03) contrast(1.03)}
.v1-school-a{transform:translateY(calc(var(--v1-u)*-2))}
.v1-school-b{transform:translateY(calc(var(--v1-u)*2))}

.v1-dag{margin-top:calc(var(--v1-u)*8);display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--v1-u)*3);
  border-top:1px solid var(--v1-lijn);padding-top:calc(var(--v1-u)*3)}
.v1-dag li{position:relative;min-width:0;padding-top:calc(var(--v1-u)*2)}
.v1-dag li::before{content:"";position:absolute;left:0;top:calc(var(--v1-u)*-3 - 1px);
  width:var(--v1-u);height:var(--v1-u);background:var(--v1-accent)}
.v1-dag b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:500;font-size:var(--v1-s1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--v1-accent)}
.v1-dag span{display:block;margin-top:calc(var(--v1-u)*1);font-size:var(--v1-s2);
  color:var(--v1-quiet)}

.v1-cijfers{margin-top:calc(var(--v1-u)*7);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--v1-u)*4)}
.v1-cijfers b{display:block;font-family:'Faustina',Georgia,serif;font-weight:700;
  font-size:var(--v1-s5);line-height:1;letter-spacing:-.02em}
.v1-cijfers span{display:block;margin-top:calc(var(--v1-u)*1.5);font-size:var(--v1-s2);
  color:var(--v1-quiet);max-width:30ch}
.v1-school-slot{margin-top:calc(var(--v1-u)*7);max-width:74ch;font-size:var(--v1-s2);
  color:var(--v1-quiet)}
.v1-school-slot .v1-ghost{margin-top:calc(var(--v1-u)*2.5)}

/* ==========================================================================
   9 · PLANNEN — footer als kamer, luidheid 4, veld teal
   Het paneel schuift omhoog OVER de schoolsectie heen: de derde
   grensoverschrijding, en meteen de derde beeldeis (een blok dat met een
   bewuste verspringing over een ander blok valt).
   ========================================================================== */
.v1-plannen{background:var(--v1-veld);padding:0 0 calc(var(--v1-u)*6)}
.v1-kamer{position:relative;max-width:1200px;margin:calc(var(--v1-u)*-16) auto 0;
  background:var(--v1-kamer);color:var(--v1-veld-2);
  box-shadow:var(--v1-schaduw);border-radius:var(--v1-r);
  padding:calc(var(--v1-u)*7) calc(var(--v1-u)*6);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:calc(var(--v1-u)*7);align-items:start;
  width:calc(100% - 52px)}
.v1-kamer-lead{margin-top:calc(var(--v1-u)*2.5);color:var(--v1-quiet-licht);
  font-size:var(--v1-s3);max-width:50ch}
.v1-kamer-actie{margin-top:calc(var(--v1-u)*4);display:flex;flex-wrap:wrap;
  align-items:center;gap:calc(var(--v1-u)*2)}
.v1-gegevens{margin-top:calc(var(--v1-u)*5);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--v1-u)*3);
  border-top:1px solid var(--v1-lijn-licht);padding-top:calc(var(--v1-u)*3)}
.v1-gegevens dt{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--v1-s1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--v1-quiet-licht)}
.v1-gegevens dd{margin-top:calc(var(--v1-u)*.75);font-size:var(--v1-s2);
  overflow-wrap:anywhere}
.v1-gegevens a{text-decoration-thickness:1px;text-underline-offset:3px}
.v1-cadeau{margin-top:calc(var(--v1-u)*4);font-size:var(--v1-s2);
  color:var(--v1-quiet-licht);max-width:52ch}
.v1-kamer-rechts img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--v1-r);box-shadow:var(--v1-schaduw-plaat)}
.v1-quote-kamer{margin-top:calc(var(--v1-u)*3);padding-left:calc(var(--v1-u)*2.5);
  border-left:1px solid var(--v1-lijn-licht)}
.v1-quote-kamer p{font-size:var(--v1-s3);max-width:38ch}
.v1-quote-kamer cite{color:var(--v1-quiet-licht)}
.v1-quote-klant p{color:var(--v1-quiet-licht)}

/* ---------- voet ---------------------------------------------------------- */
.v1-foot{background:var(--v1-veld);max-width:1200px;margin:0 auto;
  padding:calc(var(--v1-u)*4) 26px calc(var(--v1-u)*7);
  display:flex;flex-wrap:wrap;gap:calc(var(--v1-u)*2);justify-content:space-between;
  border-top:1px solid var(--v1-lijn);font-size:var(--v1-s2);color:var(--v1-quiet)}
.v1-foot a{color:var(--v1-ink)}

/* ==========================================================================
   BEWEGING
   Eén easing, drie duraties, en één georkestreerd moment: de box vult zich.
   Alles staat achter prefers-reduced-motion, dus onder motion-uit wordt er
   niets aangemaakt en blijft er ook niets onzichtbaar achter.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @keyframes v1-slide{from{transform:translate(22px,14px);opacity:0}to{transform:translate(0,0);opacity:1}}
  @keyframes v1-open{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
  .v1-box{animation:v1-open var(--v1-traag) var(--v1-ease) both}
  .v1-cell-lg{animation:v1-slide .8s .25s var(--v1-ease) both}
  .v1-cell-a{animation:v1-slide .8s .40s var(--v1-ease) both}
  .v1-cell-b{animation:v1-slide .8s .55s var(--v1-ease) both}
  .v1-sat-a{animation:v1-open .7s .85s var(--v1-ease) both}
  .v1-sat-b{animation:v1-open .7s 1s var(--v1-ease) both}
  .v1-rij{transition:background var(--v1-mid) var(--v1-ease)}
  .v1-rij:hover{background:rgba(42,36,24,.05)}
  .v1-fase img{transition:transform var(--v1-mid) var(--v1-ease)}
  .v1-fase:hover img{transform:translateY(-4px)}
}

/* ==========================================================================
   BREEDTES
   Mobiel is een herschikking, geen verkleinde desktop.
   ========================================================================== */
@media (max-width:1200px){
  .v1-rij{grid-template-columns:var(--v1-u) 8rem minmax(0,1fr) 13rem 110px;
    gap:calc(var(--v1-u)*2.5)}
  .v1-rij-beeld{width:110px;height:147px}
}

@media (max-width:1000px){
  .v1-wrap{grid-template-columns:1fr;grid-template-areas:'kop' 'copy' 'box';
    row-gap:calc(var(--v1-u)*3);padding-bottom:calc(var(--v1-u)*4)}
  .v1-h1{max-width:none}
  .v1-boxwrap{margin-right:calc(var(--v1-u)*-3)}
  .v1-sat-a{left:auto;right:calc(var(--v1-u)*5);top:calc(var(--v1-u)*-2)}
  .v1-sat-b{left:calc(var(--v1-u)*-2);bottom:calc(var(--v1-u)*3)}

  .v1-track{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(var(--v1-u)*5);
    padding-left:26px;padding-right:26px}
  .v1-spoor{padding-left:26px;padding-right:26px}
  .v1-fase:nth-child(n){--drop:0px}
  .v1-fase::after,.v1-fase::before{display:none}
  .v1-track::after{display:none}

  .v1-rij{grid-template-columns:var(--v1-u) minmax(0,1fr) 96px;
    grid-template-areas:'vlek naam beeld' 'vlek tekst beeld' 'vlek reg beeld';
    row-gap:calc(var(--v1-u)*.5);align-items:start}
  .v1-vlek{grid-area:vlek;height:100%;min-height:calc(var(--v1-u)*7)}
  .v1-rij-naam{grid-area:naam}
  .v1-rij-tekst{grid-area:tekst}
  .v1-rij-reg{grid-area:reg}
  .v1-rij-beeld{grid-area:beeld;width:96px;height:128px;align-self:center}

  .v1-project-in{grid-template-columns:minmax(0,1fr);
    grid-template-areas:'zin' 'beeld' 'tekst';row-gap:calc(var(--v1-u)*4)}
  .v1-project-beeld{max-width:420px}

  .v1-dag{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--v1-u)*4)}
  .v1-cijfers{grid-template-columns:minmax(0,1fr);gap:calc(var(--v1-u)*3)}

  .v1-kamer{grid-template-columns:minmax(0,1fr);gap:calc(var(--v1-u)*5);
    margin-top:calc(var(--v1-u)*-10)}
  .v1-kamer-rechts{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
    gap:calc(var(--v1-u)*3);align-items:start}
  .v1-quote-kamer{margin-top:0}
  .v1-kamer-rechts img{grid-row:span 2}
}

@media (max-width:900px){
  .v1-head{padding:calc(var(--v1-u)*2) 20px;flex-wrap:wrap;row-gap:calc(var(--v1-u)*1.5)}
  .v1-burger{display:flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 14px;list-style:none;cursor:pointer;
    border:1px solid var(--v1-lijn);border-radius:var(--v1-r);
    font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
  .v1-burger::-webkit-details-marker{display:none}
  /* Een expliciete display op het kind houdt de lijst in de lay-out terwijl de
     <details> dicht is: de links renderen dan wel, maar focus() landt op body
     en het menu is met het toetsenbord onbereikbaar. Dus expliciet wegzetten. */
  .v1-nav:not([open]) .v1-menu{display:none}
  .v1-menu{flex-direction:column;gap:0;width:100%;margin-top:calc(var(--v1-u)*1.5)}
  .v1-menu li{border-top:1px solid var(--v1-lijn)}
  .v1-menu a{display:block;padding:13px 0;font-size:16px}
  /* de zwevende lade hangt aan .has-js, niet aan een beweging-klasse: zonder
     script blijft de <details> open en valt het menu terug op een gestapelde
     lijst in plaats van op een lade die de kop bedekt */
  .has-js .v1-nav[open] .v1-menu{position:absolute;left:20px;right:20px;z-index:40;
    margin-top:calc(var(--v1-u)*1.5);padding:0 18px;background:var(--v1-veld-2);
    box-shadow:var(--v1-schaduw)}

  .v1-wrap{padding:calc(var(--v1-u)*3) 20px calc(var(--v1-u)*3)}
  .v1-boxwrap{margin-right:calc(var(--v1-u)*-2.5)}
  .v1-box{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);padding:calc(var(--v1-u)*1.25);
    gap:calc(var(--v1-u)*1)}
  .v1-place{max-width:none}
  .v1-sat-a{right:calc(var(--v1-u)*1.5);top:calc(var(--v1-u)*-1.5)}
  .v1-sat-b{left:calc(var(--v1-u)*-1);bottom:calc(var(--v1-u)*2)}
  .v1-sat span{max-width:15ch}

  .v1-naschrift::before,.v1-naschrift::after{left:20px}
  .v1-naschrift::after{left:16px}
  .v1-naschrift-in{padding:0 20px 0 calc(20px + var(--v1-u)*5)}

  .v1-fases,.v1-project{padding:calc(var(--v1-u)*8) 0}
  .v1-fases-in,.v1-project-in,.v1-school-in,.v1-tarieven-in,
  .v1-voorschrift,.v1-voorschrift + .v1-h2,
  .v1-track,.v1-spoor{padding-left:20px;padding-right:20px}
  .v1-doeken{padding-bottom:calc(var(--v1-u)*8)}
  .v1-rij{padding-left:20px;padding-right:20px}

  .v1-tarieven{padding:calc(var(--v1-u)*7) 0 calc(var(--v1-u)*17)}
  .v1-schaal{padding:0 20px calc(var(--v1-u)*4);gap:calc(var(--v1-u)*2)}
  .v1-trouwpaneel,.v1-quote-trouw{padding-left:20px;padding-right:20px}
  .v1-school{padding:calc(var(--v1-u)*8) 0 calc(var(--v1-u)*20)}
  .v1-school-kop{gap:calc(var(--v1-u)*3)}
  .v1-school-a,.v1-school-b{width:min(34vw,180px);height:min(34vw,180px)}
  .v1-kamer{width:calc(100% - 40px);padding:calc(var(--v1-u)*5) calc(var(--v1-u)*3.5)}
  .v1-foot{padding:calc(var(--v1-u)*4) 20px calc(var(--v1-u)*7)}
}

@media (max-width:720px){
  .v1-spoor{justify-content:flex-start;gap:calc(var(--v1-u)*.5) calc(var(--v1-u)*3)}
  /* De prijstabel wordt hier een echte scrolrail in plaats van een geknepen
     tabel: de tabelsemantiek blijft heel, en de rail krijgt min-width:0 plus
     max-width:100% zodat hij de paginabreedte nooit opduwt. */
  .v1-tabel{display:block;overflow-x:auto;min-width:0;max-width:100%;
    -webkit-overflow-scrolling:touch}
  .v1-tabel caption{display:block}
  .v1-tabel caption::after{content:" \2014 sleep de tabel opzij"}

  .v1-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v1-project-tekst{padding-top:0}
  .v1-kamer-rechts{grid-template-columns:minmax(0,1fr)}
  .v1-kamer-rechts img{grid-row:auto;max-width:300px}
  .v1-quote-kamer{margin-top:calc(var(--v1-u)*3)}
  /* Onder deze breedte eet een plaat over de foto het beeld op. Dan gaat de
     tekst er niet OP maar ERONDER, en verdwijnt de contrastvraag helemaal. */
  .v1-trouwen{margin-top:calc(var(--v1-u)*-8)}
  .v1-trouwpaneel{margin-top:calc(var(--v1-u)*4)}
  .v1-trouwpaneel .v1-h2,
  .v1-trouwpaneel .v1-trouwprijs,
  .v1-trouwpaneel .v1-inbegrepen,
  .v1-trouwpaneel .v1-trouwtekst{background-image:none;padding-left:0;padding-right:0}
  .v1-trouwpaneel .v1-h2{padding-top:0}
}

@media (max-width:480px){
  .v1-track{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--v1-u)*4)}
  .v1-fase{max-width:320px}
  .v1-dag{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--v1-u)*3)}
  .v1-rij{grid-template-columns:var(--v1-u) minmax(0,1fr) 78px;gap:calc(var(--v1-u)*2)}
  .v1-rij-beeld{width:78px;height:104px}
  .v1-gegevens{grid-template-columns:minmax(0,1fr)}
  .v1-lijst li{flex-direction:column;gap:calc(var(--v1-u)*.5)}
}

@media (max-width:420px){
  .v1-sat-b{display:none}
}