/* =====================================================================
   JUST SOCIALS – huisstijl
   Alle kleuren, lettertypes en maten staan bovenaan in :root.
   Hier pas je dus als eerste iets aan als je de stijl wilt wijzigen.
   ===================================================================== */

/* ---------- Lettertypes (lokaal gehost, geen Google Fonts nodig) ---------- */
@font-face{font-family:"Noto Serif Display";src:url("../fonts/noto-serif-display.woff2") format("woff2");font-weight:100 900;font-stretch:62.5% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-500-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Whisper";src:url("../fonts/whisper.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Variabelen ---------- */
:root{
  --offwhite:#f6f4f1;
  --white:#ffffff;
  --taupe:#5b5247;
  --burgundy:#560707;
  --red:#b64040;              /* rood in teksten en accenten (zelfde rood als het logo en je Canva-ontwerp) */
  --logo-red:#b64040;
  --text:#644d4d;
  --olive:#495640;

  --font-display:"Noto Serif Display","Bodoni Moda",Didot,"Times New Roman",serif;
  --font-body:"Cormorant Garamond",Cormorant,Garamond,Georgia,serif;
  --font-script:"Whisper","Brush Script MT",cursive;
  --font-button:"Montserrat","Helvetica Neue",Arial,sans-serif;   /* alle knoppen (behalve in het menu): Montserrat in hoofdletters */

  --header-h:88px;                              /* compacte menubalk (zodra je scrolt) */
  --bar-top:clamp(68px,9.45vw,121px);           /* menubalk bovenaan de pagina = Canva-voorbeeld (121px bij 1280px breed) */
  --logo-top-h:calc(var(--bar-top) * 1.406);    /* logo bovenaan = Canva-voorbeeld (171px hoog bij 1280px breed), steekt een stukje over de foto */
  --logo-top-y:calc(var(--bar-top) * .088);
  --logo-small-h:calc(var(--header-h) - 14px);  /* logo in de compacte balk */
  --wrap:1180px;
  /* Rustige bewegingen: zachte start en zachte landing, iets langere duur dan voorheen */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.45,.05,.2,1);
}
@media (max-width:1080px){:root{--header-h:68px}}   /* compacte header zodra het hamburgermenu zichtbaar is */

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Onderdelen waar je naartoe springt (menu, Tab-toets) blijven onder de menubalk vandaan.
   Bewust per element en niet als scroll-padding op <html>: dan springt de pagina bij Tab door het (sticky) menu. */
:target{scroll-margin-top:var(--header-h)}
main a,main button,main input,main select,main textarea,main summary,main [tabindex],.site-footer a{scroll-margin-top:calc(var(--header-h) + 8px)}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font-body);font-weight:500;
  font-size:clamp(19px,17px + .4vw,22px);line-height:1.5;font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-stretch:62.5%;font-weight:400;line-height:1.1;text-wrap:balance}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:0}   /* onderdelen waar het menu naartoe scrolt krijgen geen rand om het hele blok */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--taupe);color:var(--offwhite);padding:10px 16px;border-radius:999px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- Gedeelde onderdelen ---------- */
/* Titels "Our Services" en "Packages" staan in het bruine blok, dus in wit (rood zou op bruin nauwelijks leesbaar zijn) */
.section-title{
  color:var(--white);text-align:center;letter-spacing:-.02em;
  font-size:clamp(46px,5.4vw,64px);
  padding:clamp(40px,6vw,72px) 20px clamp(26px,4vw,48px);
}
/* Knoppen (alle knoppen met tekst, behalve die in het menu): Montserrat, in hoofdletters */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:46px;padding:.3em 2.1em;border:0;border-radius:999px;cursor:pointer;
  background:var(--offwhite);color:var(--text);text-decoration:none;
  font-family:var(--font-button);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;font-size:clamp(12.5px,.2vw + 11px,14px);line-height:1.1;
  transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
a.pill:hover,button.pill:hover{background:var(--white);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.pill--on-light{background:var(--offwhite);box-shadow:inset 0 0 0 1px rgba(91,82,71,.28)}
a.pill--on-light:hover{background:var(--taupe);color:var(--offwhite);box-shadow:0 8px 20px rgba(91,82,71,.2)}
.pill--label{cursor:default}
.pill--label:hover{transform:none;box-shadow:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.4em 2.4em;border:0;border-radius:999px;cursor:pointer;
  background:var(--taupe);color:var(--offwhite);
  font-family:var(--font-button);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;font-size:13.5px;
  transition:background-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.btn:hover{background:var(--burgundy);transform:translateY(-1px);box-shadow:0 10px 22px rgba(86,7,7,.24)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}

/* ---------- Header + menu ---------- */
/* Bovenaan de pagina staat de effen balk met het grote logo. Zodra je naar beneden scrolt wordt de balk transparant
   (alleen de tekst blijft staan, wit boven donkere vlakken). Terwijl je scrolt verdwijnt het menu zacht;
   zodra je even stopt komt het transparant terug. (JavaScript zet daarvoor de klassen is-scrolled / is-scrolling en data-tone.) */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:center;
  background-color:var(--offwhite);
  --hd-fg:var(--text);--hd-line:rgba(91,82,71,.4);--hd-accent:var(--red);--hd-hover-bg:var(--taupe);--hd-hover-fg:var(--offwhite);
  transition:background-color .8s var(--ease);
}
.site-header.is-scrolled{background-color:rgba(246,244,241,0)}
.site-header.menu-open{background-color:var(--offwhite)}
/* Boven een donker vlak (foto, bruin blok, footer) wordt de tekst wit; boven een licht vlak blijft hij donker */
.site-header.is-scrolled:not(.menu-open)[data-tone="dark"]{--hd-fg:#fff;--hd-line:rgba(255,255,255,.72);--hd-accent:#fff;--hd-hover-bg:#fff;--hd-hover-fg:var(--taupe)}
/* Heel zachte nevel achter de balk, zodat de menutekst leesbaar blijft boven foto's en tekst (de balk blijft daarmee transparant) */
.site-header::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-18px;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(246,244,241,.42),rgba(246,244,241,0));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent);
  transition:opacity .55s var(--ease);
}
.site-header[data-tone="dark"]::after{background:linear-gradient(to bottom,rgba(52,45,38,.38),rgba(52,45,38,0))}
.site-header.is-scrolled:not(.is-scrolling):not(.menu-open)::after{opacity:1}
/* Bovenaan de pagina is de balk iets hoger (zoals in het Canva-voorbeeld); zodra je scrolt wordt hij compact */
.site-header::before{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--bar-top) - var(--header-h));background:var(--offwhite);transform-origin:50% 0;transition:transform .7s var(--ease);pointer-events:none}
.site-header.is-scrolled::before,.site-header.menu-open::before{transform:scaleY(0)}
.site-header__inner{
  position:relative;width:100%;height:100%;max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:opacity .55s var(--ease),transform .55s var(--ease);   /* zo snel komt het menu terug nadat je stopt met scrollen (was .9s) */
}
/* Terwijl je scrolt: het menu verdwijnt zacht (en komt weer terug zodra je stopt). Niet tijdens het openen van het mobiele menu. */
.site-header.is-scrolled.is-scrolling:not(.menu-open) .site-header__inner{opacity:0;transform:translateY(-10px);pointer-events:none;transition-duration:.4s}
.logo{display:block;flex:none;line-height:0}
/* Logo: overal even groot (zelfde afmeting als in het Canva-voorbeeld) en steekt een beetje over de foto */
.site-header .logo,.choice-bar .logo{position:absolute;left:clamp(16px,3vw,40px);top:var(--logo-top-y);z-index:2;transition:top .7s var(--ease)}
.logo img{height:var(--logo-top-h);width:auto;transition:height .7s var(--ease)}
.site-header.is-scrolled .logo,.site-header.menu-open .logo{top:calc((var(--header-h) - var(--logo-small-h)) / 2)}
.site-header.is-scrolled .logo img,.site-header.menu-open .logo img{height:var(--logo-small-h)}
.nav,.nav-toggle{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:clamp(18px,2.8vw,44px);list-style:none}
.nav a{
  position:relative;display:inline-block;padding:10px 2px;text-decoration:none;color:var(--hd-fg);
  font-family:var(--font-display);font-stretch:62.5%;font-weight:400;
  text-transform:uppercase;letter-spacing:.09em;font-size:17px;line-height:1;
  transition:color .7s var(--ease),text-shadow .7s var(--ease);
}
.site-header.is-scrolled:not(.menu-open)[data-tone="dark"] .nav a{text-shadow:0 1px 14px rgba(30,24,18,.34)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--hd-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease),background-color .7s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="true"]{color:var(--hd-accent)}
/* "Naar Just Events / Just Married" is een knop: ook hier gewone zinsopbouw en iets kleiner */
.nav .nav__switch{
  margin-left:clamp(0px,1vw,12px);padding:8px 17px;border:1px solid var(--hd-line);border-radius:999px;
  text-transform:none;font-size:15px;letter-spacing:.03em;
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),text-shadow .7s var(--ease);
}
.nav .nav__switch::after{display:none}
.nav .nav__switch:hover{background:var(--hd-hover-bg);border-color:var(--hd-hover-bg);color:var(--hd-hover-fg);text-shadow:none}
.nav-toggle{display:none;position:relative;width:48px;height:48px;border:0;border-radius:50%;background:transparent;cursor:pointer}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;background:var(--hd-fg);border-radius:2px;transition:transform .5s var(--ease),opacity .3s,top .5s var(--ease),background-color .7s var(--ease)}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:23px}
.nav-toggle span:nth-child(3){top:30px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){top:23px;transform:rotate(-45deg)}

@media (min-width:1081px){
  /* bovenaan staat het menu iets lager in de hogere balk (zoals in het Canva-voorbeeld) */
  .nav{transform:translateY(calc(var(--bar-top) * .552 - var(--header-h) / 2));transition:transform .7s var(--ease)}
  .site-header.is-scrolled .nav{transform:none}
}
@media (max-width:1080px){
  .nav-toggle{display:block}
  .nav{
    /* het uitklapmenu heeft een eigen, lichte achtergrond: daarin altijd de donkere tekstkleuren */
    --hd-fg:var(--text);--hd-line:rgba(91,82,71,.4);--hd-accent:var(--red);--hd-hover-bg:var(--taupe);--hd-hover-fg:var(--offwhite);
    position:fixed;left:0;right:0;top:var(--header-h);z-index:99;max-height:calc(100svh - var(--header-h));overflow:auto;
    background:var(--offwhite);padding:10px 20px 30px;border-top:1px solid rgba(91,82,71,.12);
    box-shadow:0 24px 40px rgba(60,50,40,.18);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;text-align:center}
  .nav li{border-bottom:1px solid rgba(91,82,71,.1)}
  .nav li:last-child{border-bottom:0;padding-top:18px}
  .nav a{display:block;padding:14px 8px;font-size:22px}
  .nav a::after{display:none}
  .nav .nav__switch{display:inline-block;margin:0;font-size:17px;padding:11px 26px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;display:grid;place-items:center;text-align:center;color:var(--white);
  min-height:calc(100vh - var(--header-h));min-height:max(540px,calc(100svh - var(--header-h)));
  background:var(--taupe);overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform:scale(1.03);animation:heroZoom 22s var(--ease-out) forwards}   /* de hero-foto is een gewone <img> in de HTML; het zwaartepunt staat daar in style="object-position" */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(70,62,52,.16),rgba(70,62,52,.34))}
.hero__inner{padding:48px 20px clamp(120px,15vw,190px)}
.hero h1{
  font-size:clamp(38px,5.6vw,72px);letter-spacing:.077em;text-transform:uppercase;line-height:1.08;
  margin:0 0 clamp(22px,3vw,34px);text-shadow:0 2px 30px rgba(0,0,0,.28);
}
@media (max-width:640px){
  /* Op telefoons blijft "Content Creation" op één regel */
  .hero h1{font-size:clamp(27px,8.3vw,44px);letter-spacing:.07em}
}
.hero .pill{background:rgba(246,244,241,.9)}
.hero .pill:hover{background:var(--white)}
/* "with love by Maria": handtekening in Angella White (als afbeelding, uit je Canva-ontwerp) */
.hero__sign{
  position:absolute;right:clamp(14px,4.2vw,68px);bottom:clamp(10px,2.7vw,40px);margin:0;
  width:clamp(150px,22.8vw,372px);height:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.25));
}
@keyframes heroZoom{from{transform:scale(1.07)}to{transform:scale(1.0)}}

/* ---------- About / Waarom Just? ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);background:var(--white);min-height:clamp(560px,62vw,800px)}
.about__text{align-self:center;padding:clamp(44px,6vw,80px) clamp(24px,7.5vw,112px)}
.about__text h2{color:var(--red);font-size:clamp(46px,5.4vw,64px);letter-spacing:-.02em;margin-bottom:.5em}
.about__text p{max-width:30em;font-size:clamp(20px,1.2vw + 10px,24px);line-height:1.4;letter-spacing:-.01em}
.about__text .about__lead{font-style:italic}
.about__sign{margin:1.2em 0 1.8em!important}
.about__sign strong{font-weight:700}
.about__sign em{display:block}
.about__photo{position:relative;background:var(--offwhite);overflow:hidden;min-height:420px}
.about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 40%;mix-blend-mode:multiply}
@media (max-width:900px){
  .about{grid-template-columns:1fr;min-height:0}
  .about__photo{min-height:0;aspect-ratio:4/4.6}
  .about__photo img{object-position:50% 35%}
}

/* Per pagina: welke foto's bij welke pagina horen (paden zijn relatief aan dit CSS-bestand) */

/* ---------- Our Services (slider) ---------- */
.services{background:var(--taupe)}
.services .section-title{padding-bottom:clamp(2px,.6vw,8px)}   /* titel staat nu in het bruine blok, direct boven de slides */
.slider{position:relative}
.slider__viewport{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;transition:opacity .6s var(--ease)}
.slider__viewport.is-animating,.packages__track.is-animating{scroll-snap-type:none}   /* tijdens het (zachte) doorschuiven met eigen beweging staat het magneetje even uit (ook bij de pakketten op mobiel) */
.slider__viewport::-webkit-scrollbar{display:none}
.slider__viewport:focus-visible{outline-offset:-4px}
.slider.is-wrapping .slider__viewport{opacity:0}
.slide{flex:0 0 100%;min-width:0;display:flex;scroll-snap-align:start;scroll-snap-stop:always}
.slide__band{flex:1;min-width:0;background:var(--taupe);padding:clamp(34px,4.6vw,60px) clamp(16px,4vw,40px) clamp(54px,6vw,78px)}
.slide__inner{max-width:920px;margin:0 auto;display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:clamp(26px,4.4vw,64px);align-items:center}
.slide__media{
  position:relative;aspect-ratio:9/16;overflow:hidden;background:#4a4238;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.slide__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* de poster is een gewone <img> in de HTML */
.slide__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.slide__media video.is-playing{opacity:1}
.slide__media::after{content:"";position:absolute;inset:0;background:var(--taupe);opacity:.52;pointer-events:none;transition:opacity .8s var(--ease)}
.slide__media.is-started::after{opacity:0}   /* zodra de video speelt verdwijnt de bruine waas */
/* Grote afspeelknop op de video (alleen zichtbaar vóór het afspelen) */
.media-play{
  position:absolute;inset:0;z-index:2;display:none;place-items:center;width:100%;height:100%;padding:0;
  border:0;background:transparent;cursor:pointer;transition:opacity .6s var(--ease);
}
.js .media-play{display:grid}
.media-play span{
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:rgba(246,244,241,.92);color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .5s var(--ease),background-color .5s var(--ease);
}
.media-play:hover span{transform:scale(1.05);background:var(--white)}
.media-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.media-play:focus-visible{outline:2px solid var(--offwhite);outline-offset:-6px;border-radius:0}
.slide__media.is-started .media-play{opacity:0;pointer-events:none}
.media-toggle{
  position:absolute;right:10px;bottom:10px;z-index:3;display:none;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(246,244,241,.92);color:var(--text);cursor:pointer;
}
.media-toggle svg{width:18px;height:18px;fill:currentColor}
.media-toggle .i-play{display:none}
.media-toggle[aria-pressed="true"] .i-pause{display:none}
.media-toggle[aria-pressed="true"] .i-play{display:block}
.slide__media.is-started .media-toggle{display:grid}
.slide__text{color:var(--white);text-align:center;font-size:clamp(19px,1.1vw + 11px,21px);line-height:1.45}
.slide__text p{margin:0 0 1.1em}
.slide__text strong{font-weight:700}
.slide__text .pill{margin-top:.6em}
/* Kleine, witte toelichting onder de knop (stond eerst onder het bruine blok) */
.slide__text .slide__note{max-width:30em;margin:1.3em auto 0;font-size:16.5px;line-height:1.45;color:var(--white);text-wrap:balance}
/* Subtiel streepje onderaan het bruine blok: het witte streepje laat zien welke slide je bekijkt (de andere zijn doorzichtig); je kunt erop klikken */
.slider__line{position:absolute;left:0;right:0;bottom:clamp(12px,1.8vw,22px);z-index:3;display:flex;justify-content:center;gap:8px;pointer-events:none}
.slider__line button{pointer-events:auto;position:relative;width:clamp(44px,7vw,72px);height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.slider__line button::before{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(246,244,241,.3);transition:background-color .9s var(--ease)}
.slider__line button:hover::before{background:rgba(246,244,241,.55)}
.slider__line button[aria-current="true"]::before,.slider__line button[aria-current="true"]:hover::before{background:var(--white)}
.slider__line button:focus-visible{outline:2px solid var(--offwhite);outline-offset:-2px;border-radius:4px}
.slider__dots{display:flex;gap:6px}
.slider__dots button{position:relative;width:26px;height:26px;border:0;background:transparent;cursor:pointer;padding:0}
.slider__dots button::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(91,82,71,.28);transition:background-color .6s var(--ease),transform .6s var(--ease)}
.slider__dots button[aria-current="true"]::before{background:var(--red);transform:scale(1.35)}
.slider__dots--light button::before{background:rgba(246,244,241,.38)}
.slider__dots--light button[aria-current="true"]::before{background:var(--offwhite)}
/* Instagram-video in een slide: alleen actief als er bij data-instagram een Instagram-link staat (zie LEESMIJ).
   Eerst staat de poster er met een korte toelichting; pas na een klik laadt de video van Instagram en past het venster zich aan het soort video aan. */
.media-note{display:none}
.slide__media.is-instagram:not(.is-ig-loaded) .media-note{
  display:block;position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:40px 12px 12px;
  text-align:center;font-size:12.5px;line-height:1.4;color:#fff;background:linear-gradient(to top,rgba(36,30,24,.84),rgba(36,30,24,0));pointer-events:none;
}
.media-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
.slide[data-ig-type]{--ig-w:340px}                /* breedte van het Instagram-venster: reels staan smal, posts en tv wat breder */
.slide[data-ig-type="p"]{--ig-w:400px}
.slide[data-ig-type="tv"]{--ig-w:460px}
.slide__media.is-ig-loaded{width:min(100%,var(--ig-w));aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
.slide__media.is-ig-loaded::after{display:none}
.slide__media.is-ig-loaded>:not(.slide__embed){display:none!important}
.slide__embed{width:100%;background:#fff;border-radius:3px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.slide__embed iframe{display:block!important;max-width:100%!important;min-width:0!important;margin:0 auto!important}
.slide__embed blockquote.instagram-media{display:flex;align-items:center;justify-content:center;min-height:220px;margin:0;padding:24px 16px;text-align:center;font-size:16px;line-height:1.4;color:var(--text)}
.slide__embed blockquote.instagram-media a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
@media (min-width:761px){.slide.is-ig-loaded .slide__inner{grid-template-columns:minmax(0,var(--ig-w)) minmax(0,1fr)}}
@media (max-width:760px){
  .slide__inner{grid-template-columns:1fr;justify-items:center;gap:26px}
  .slide__media{width:min(64vw,260px)}
  .slide__text{max-width:34em}
}

/* ---------- Packages (enveloppen) ---------- */
.packages{background:var(--taupe)}   /* Our Services en Packages lopen in dezelfde bruine kleur door: geen witte streep ertussen */
.packages__band{position:relative;background:var(--taupe);padding:0 clamp(16px,4vw,40px) clamp(40px,5vw,64px)}
.packages .section-title{padding-bottom:clamp(26px,3.6vw,44px)}   /* titel staat in het bruine blok, boven de enveloppen */
.packages__track{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.6vw,52px);align-items:end}
.package{container-type:inline-size;display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
/* Kleine, witte toelichting onderin het bruine blok (stond eerst eronder op wit) */
.packages__note{text-wrap:balance;max-width:50em;margin:clamp(26px,3.6vw,42px) auto 0;padding:0 20px;text-align:center;font-size:16.5px;line-height:1.45;color:var(--white)}
.packages__note strong{font-weight:700}
.packages__note+.packages__note{margin-top:.85em}
/* Add-ons (Just Married): klein en wit, onder de toelichting */
.packages__extra{max-width:34em;margin:clamp(22px,3vw,34px) auto 0;padding:0 20px;text-align:center;color:var(--white)}
.packages__extra h3{margin:0 0 .45em;font-size:clamp(26px,2.4vw,30px);letter-spacing:.01em;color:var(--white)}
.packages__extra ul{list-style:none;display:grid;gap:.2em;font-size:18px;line-height:1.4}
.packages__extra li::before{content:"\2013\00a0"}
.packages__dots{display:none;justify-content:center;margin-top:12px}

.envelope{--body-h:46.4%;position:relative;width:100%;aspect-ratio:345/472;perspective:1000px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.envelope__hint{
  position:absolute;left:0;right:0;top:19%;z-index:2;margin:0;text-align:center;pointer-events:none;
  font-family:var(--font-script);font-size:26px;font-size:max(26px,9.4cqw);line-height:1;color:rgba(246,244,241,.9);
  transition:opacity .6s var(--ease);
}
.envelope__hint::after{content:"↓";display:block;margin-top:.15em;font-family:var(--font-body);font-size:.7em;opacity:.8;animation:nudge 2.8s ease-in-out infinite}
.envelope.is-open .envelope__hint{opacity:0}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.envelope__back,.envelope__front,.envelope__flap{position:absolute;left:0;right:0}
/* Rustige, matte envelop in ivoor (zonder harde verlopen of drukke schaduwen) */
.envelope__back{bottom:0;height:var(--body-h);z-index:1;border-radius:4px;background:#e3dbcc;box-shadow:0 26px 34px -22px rgba(0,0,0,.42)}
.letter-clip{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.envelope__front{bottom:0;height:var(--body-h);z-index:3;pointer-events:none;filter:drop-shadow(0 -1px 1px rgba(80,62,40,.2))}
.envelope__front::before{content:"";position:absolute;inset:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#f4efe6,#eee7da);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.envelope__flap{
  top:calc(100% - var(--body-h));height:calc(var(--body-h) * .58);z-index:4;pointer-events:none;
  transform-origin:50% 0;filter:drop-shadow(0 3px 3px rgba(70,52,32,.2));
  transition:transform .8s var(--ease-soft) .5s,z-index 0s .5s;
}
.envelope__flap::before{content:"";position:absolute;inset:-.4% -.2% 0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#f6f1e8,#eee7da)}
.envelope:not(.is-open):hover .envelope__flap{transform:rotateX(28deg);transition-delay:0s}
.envelope__toggle{position:absolute;inset:0;z-index:6;width:100%;height:100%;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.envelope__toggle:focus-visible{outline:2px solid var(--offwhite);outline-offset:5px}
/* Label "meest gekozen" (Angella White, rood): subtiel, alsof het met de hand op de voorkant van de envelop is geschreven */
.package__badge{
  position:absolute;left:50%;bottom:6.5%;z-index:5;width:52%;height:auto;margin:0;
  transform:translateX(-50%) rotate(-3.5deg);transform-origin:50% 60%;pointer-events:none;
}

/* De kaart: effen ivoor papier met één fijn lijntje, zoals een klassieke trouwkaart */
.letter{
  position:absolute;left:3.5%;right:3.5%;top:0;height:100%;border-radius:2px;
  background:linear-gradient(180deg,#fcfaf5,#f6f2e9);
  transform:translateY(56%);transition:transform .9s var(--ease-soft);
  box-shadow:0 1px 2px rgba(60,45,30,.18),0 10px 22px -10px rgba(60,45,30,.28);
}
.letter::before{content:"";position:absolute;inset:3% 7%;border:1px solid rgba(150,128,96,.36);pointer-events:none}
.envelope.is-open .letter{transform:translateY(0);transition:transform 1.15s var(--ease-soft) .45s}
.envelope.is-open .envelope__flap{transform:rotateX(180deg);z-index:1;transition:transform .8s var(--ease-soft) 0s,z-index 0s 0s}
.letter__content{position:absolute;left:12%;right:12%;top:0;padding-top:14cqw;text-align:center;color:var(--text)}
.letter__price{margin:0;font-family:var(--font-display);font-stretch:62.5%;font-weight:700;font-size:24px;font-size:max(23px,7.4cqw);letter-spacing:.13em;line-height:1.2}
.letter__time{margin:.1em 0 .2em;font-family:var(--font-script);font-size:36px;font-size:max(34px,11.6cqw);line-height:1.05}
.letter__list{margin:0;font-size:16px;font-size:max(16px,5cqw);line-height:1.38;letter-spacing:.04em}
.letter__list strong{font-weight:700}
.letter__desc{margin:.8em 0 0;font-size:14px;font-size:max(14px,4.3cqw);line-height:1.12;font-style:italic;font-weight:500;color:var(--olive);letter-spacing:.04em}

/* Naam in de knop: altijd op één regel, zodat alle pakketten even hoog zijn */
.pill--package{width:100%;font-size:clamp(12px,1.1vw,14px);font-size:clamp(12px,5cqw,14px);letter-spacing:.1em;white-space:nowrap;padding-left:.8em;padding-right:.8em;text-align:center}

@media (max-width:900px){
  .packages__band{padding-left:0;padding-right:0}
  .packages__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:18px;padding:4px 11vw 26px;scrollbar-width:none;align-items:flex-end}
  .packages__track::-webkit-scrollbar{display:none}
  .package{flex:0 0 min(78vw,360px);scroll-snap-align:center}
  .packages__dots{display:flex}
}

/* ---------- Contact ---------- */
.contact{background:var(--offwhite);padding:clamp(48px,7vw,104px) clamp(18px,4vw,40px)}
.contact__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,6vw,92px);align-items:start}
.contact__intro h2{color:var(--red);font-size:clamp(46px,5.4vw,64px);letter-spacing:-.02em;margin-bottom:.45em}
.contact__intro p{font-size:clamp(20px,1.2vw + 10px,24px);line-height:1.4;max-width:24em}
.contact__links{list-style:none;margin:clamp(22px,3vw,34px) 0 0;display:grid;gap:18px}
.contact__links li{display:grid;gap:2px}
.contact__links .label{font-family:var(--font-display);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.12em;font-size:17px;color:var(--taupe)}
.contact__links a{font-size:clamp(21px,1vw + 12px,24px);text-decoration:none;border-bottom:1px solid rgba(100,77,77,.3);width:fit-content;transition:color .5s var(--ease),border-color .5s var(--ease)}
.contact__links a:hover{color:var(--red);border-color:var(--red)}

.form{display:grid;gap:20px;background:var(--white);padding:clamp(22px,3.4vw,44px);border-radius:26px;box-shadow:0 22px 60px rgba(91,82,71,.14)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;margin-bottom:6px;font-family:var(--font-display);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:var(--taupe)}
.field label small{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:15px;font-style:italic;color:rgba(100,77,77,.75)}
.field input,.field select,.field textarea{
  width:100%;padding:.62em 1em;border:1px solid rgba(91,82,71,.3);border-radius:14px;background:var(--offwhite);color:var(--text);
  font-family:var(--font-body);font-weight:500;font-size:18px;line-height:1.35;
  transition:border-color .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;border-radius:18px}
.field input[type="date"]{appearance:none;-webkit-appearance:none;min-height:calc(2.59em + 2px);height:calc(2.59em + 2px);padding-top:0;padding-bottom:0}   /* even hoog als de andere invoervelden */
.field input[type="date"]::-webkit-date-and-time-value{text-align:left}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23644d4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red);background-color:var(--white);box-shadow:0 0 0 3px rgba(182,64,64,.16)}
.field.is-highlight select,.field.is-highlight textarea{animation:flash 2.4s var(--ease) 1}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(182,64,64,.55)}35%{box-shadow:0 0 0 7px rgba(182,64,64,.25)}100%{box-shadow:0 0 0 0 rgba(182,64,64,0)}}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form__fine{margin:0;font-size:15px;line-height:1.4;color:rgba(100,77,77,.85)}
.form__fine a{color:var(--red)}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.form__status{margin:0;font-size:16.5px;line-height:1.35}
.form__status[data-state="ok"]{color:var(--olive);font-weight:600}
.form__status[data-state="error"]{color:var(--red)}
.form__status a{color:inherit}
.form__thanks{display:none;margin:0;padding:16px 20px;border-radius:14px;background:rgba(73,86,64,.1);color:var(--olive);font-size:17px;font-weight:600;line-height:1.35}
.form__thanks:target{display:block}
@media (max-width:860px){
  .contact__inner{grid-template-columns:1fr}
  .contact__intro p{max-width:none}
}
@media (max-width:520px){
  .form__row{grid-template-columns:1fr}
  .btn{width:100%;padding-left:1em;padding-right:1em;white-space:nowrap}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--taupe);color:var(--offwhite);padding:clamp(44px,6vw,76px) clamp(18px,4vw,40px) 28px}
.site-footer__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.45fr .85fr 1.1fr;gap:clamp(30px,5vw,80px)}
.site-footer h2{font-size:24px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:16px;font-weight:400}
.site-footer p{margin:0;font-size:20px;line-height:1.4;max-width:20em;opacity:.9}
/* Het logo in de voet: je eigen "Just socials"-svg (assets/img/just-socials-white.svg), wit. De tekening is 1-op-1 overgenomen;
   het bestand is alleen bijgesneden tot de tekening zelf. --jh bepaalt de grootte (de hoogte volgt daaruit, de breedte volgt de hoogte). */
.site-footer .site-footer__brand{--jh:clamp(96px,9.4vw,124px);display:block;height:calc(var(--jh) * 1.041);margin:0 0 16px;line-height:0;opacity:1;max-width:none}
.site-footer__brand img{display:block;height:100%;width:auto;max-width:none}
.site-footer ul{list-style:none;display:grid;gap:8px}
.site-footer a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .5s var(--ease),opacity .5s var(--ease)}
.site-footer a:hover{border-color:currentColor}
.site-footer li{font-size:21px;line-height:1.35}
.site-footer .label{display:block;font-family:var(--font-display);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.12em;font-size:16px;opacity:.7;margin-bottom:1px}
.site-footer__bottom{max-width:var(--wrap);margin:clamp(34px,5vw,60px) auto 0;padding-top:20px;border-top:1px solid rgba(246,244,241,.24);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;font-size:18.5px}
.site-footer .site-footer__legal{display:flex;flex-wrap:wrap;gap:6px 26px}
.site-footer .site-footer__legal li{font-size:inherit}
@media (max-width:1100px){
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__grid>:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .site-footer__grid{grid-template-columns:1fr}
  .site-footer__bottom{flex-direction:column}
  .site-footer .site-footer__brand{--jh:min(96px,calc((100vw - 36px) / 3.5))}   /* op de smalste telefoons past het hele logo nog steeds op één regel */
}

/* ---------- Keuzescherm (index.html) ---------- */
body.page-choice{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--offwhite)}
.choice-bar{position:relative;height:var(--bar-top);background:var(--offwhite);z-index:3}
.choice{flex:1;display:flex;min-height:0}
.choice__half{
  position:relative;isolation:isolate;flex:1 1 0;display:grid;place-items:center;overflow:hidden;
  text-align:center;color:var(--white);text-decoration:none;padding:clamp(28px,4vw,64px) clamp(20px,3vw,48px);
  transition:flex-grow 1.1s var(--ease-soft);
}
.choice__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.04);transition:transform 1.8s var(--ease-soft)}   /* de foto is een gewone <img> in de HTML */
.choice__half::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint);transition:opacity .8s var(--ease)}
.choice__half--married{--tint:linear-gradient(rgba(70,62,52,.34),rgba(70,62,52,.58))}
.choice__half--events{--tint:linear-gradient(rgba(86,7,7,.38),rgba(60,5,5,.66))}
.choice__eyebrow{display:block;margin-bottom:14px;font-family:var(--font-display);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.24em;font-size:clamp(17px,1.5vw,21px);opacity:.92}
.choice__title{font-size:clamp(40px,5.6vw,80px);letter-spacing:.07em;text-transform:uppercase;line-height:1.05;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.choice__text{max-width:22em;margin:16px auto 26px;font-size:clamp(20px,1.4vw + 10px,26px);font-style:italic;line-height:1.3;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.choice__half:hover .pill,.choice__half:focus-visible .pill{background:var(--white);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.choice__inner{max-width:30em;opacity:0;transform:translateY(12px);animation:rise 1.4s var(--ease-out) .3s forwards}
.choice__half--events .choice__inner{animation-delay:.55s}
@keyframes rise{to{opacity:1;transform:none}}
@media (hover:hover) and (min-width:861px){
  .choice:hover .choice__half{flex-grow:.82}
  .choice .choice__half:hover{flex-grow:1.4}
  .choice__half:hover .choice__img{transform:scale(1.09)}
}
@media (max-width:860px){
  .choice{flex-direction:column}
  .choice__half{min-height:300px}
}

/* ---------- Juridische pagina's ---------- */
.legal{max-width:860px;margin:0 auto;padding:clamp(40px,6vw,84px) clamp(20px,4vw,32px) clamp(56px,7vw,100px)}
/* de hoge balk (met het grote logo) steekt onder de menubalk uit: die ruimte erbij, zodat de afstand tot de tekst gelijk blijft */
.page-legal .legal{padding-top:calc(var(--bar-top) - var(--header-h) + clamp(40px,6vw,84px) + 10px)}
.legal h1{color:var(--red);font-size:clamp(34px,calc((100vw - 44px)/6.8),72px);letter-spacing:-.02em;margin-bottom:.15em}
.legal__version{margin:0 0 1.8em;font-style:italic;color:rgba(100,77,77,.85)}
.legal__toc{margin:0 0 2.4em;padding:20px 24px;border-radius:18px;background:var(--offwhite);columns:2;column-gap:36px}
.legal .legal__toc h2{font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin:0 0 10px;column-span:all}
.legal .legal__toc ol{list-style:none;padding:0;margin:0;font-size:19px;line-height:1.5}
.legal .legal__toc li{font-size:inherit;line-height:inherit;margin-bottom:.35em}
.legal__toc a{text-decoration:none;border-bottom:1px solid transparent}
.legal__toc a:hover{color:var(--red);border-color:var(--red)}
.legal h2{font-size:clamp(30px,3.2vw,38px);color:var(--red);margin:1.9em 0 .55em;letter-spacing:-.01em}
.legal h3{font-size:24px;color:var(--taupe);margin:1.4em 0 .4em;letter-spacing:.02em}
.legal p,.legal li{font-size:clamp(20px,.6vw + 15px,22px);line-height:1.55}
.legal ol,.legal ul{padding-left:1.5em;margin:0 0 1em}
.legal .legal__intro{font-size:clamp(21px,.6vw + 16px,24px);line-height:1.5}
.legal ol.clauses{list-style:none;padding:0;margin:0 0 1em}
.legal ol.clauses>li{position:relative;padding-left:3.3em}
.legal ol.clauses>li>.n{position:absolute;left:0;top:0;width:3em;color:var(--taupe);font-weight:700;font-variant-numeric:lining-nums tabular-nums}
.legal li>ul{list-style:disc;padding-left:1.3em;margin:.5em 0 .3em}
.legal li>ul>li{margin-bottom:.3em}
.legal section{scroll-margin-top:calc(var(--header-h) + 12px)}
.legal li{margin-bottom:.5em}
.legal li>ul,.legal li>ol{margin-top:.5em}
.legal a{color:var(--red)}
.legal .todo{background:#fff0a8;color:#5a4300;padding:0 .3em;border-radius:4px;font-weight:600}
.legal__back{display:inline-block;margin-bottom:1.4em;text-decoration:none;font-family:var(--font-display);font-stretch:62.5%;text-transform:uppercase;letter-spacing:.1em;font-size:18px;color:var(--taupe);border-bottom:1px solid rgba(91,82,71,.35)}
.legal__back:hover{color:var(--red);border-color:var(--red)}
@media (max-width:640px){.legal__toc{columns:1}}

/* ---------- Animaties bij scrollen (alleen als JavaScript aanstaat) ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
}