/* ═══════════════════════════════════════════════════════════
   FLEUR PRESENTS — Concept 3 "Presence"
   Fashion-editorial. Fleur zelf is het systeem.
   Kleuren gesampled uit haar podiumbelichting: aubergine,
   magenta, violet — tegen warm bot en diep zwart.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bone:    #F2EFE9;
  --bone-2:  #E7E2D9;
  --ink:     #0B0A0C;
  --plum:    #241020;
  --ink-2:   #56505A;
  --ink-3:   #8B848F;
  --magenta: #C4256E;
  --violet:  #7B4FD0;
  --line:    rgba(11,10,12,.16);
  --line-l:  rgba(242,239,233,.18);

  --disp: "Bodoni Moda", Didot, Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;

  --wrap:1300px; --gut:48px;
  --s-2:16px; --s-3:24px; --s-4:36px; --s-5:52px;
  --s-6:72px; --s-7:104px; --s-8:140px; --s-9:190px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.66; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; } blockquote{ margin:0; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:12px 20px; z-index:200; }
.skip:focus{ left:12px; top:12px; }

/* ── typografie ─────────────────────────────────────────── */
.h-ed{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(36px,4.3vw,62px); line-height:1.04; letter-spacing:-.018em;
}
.h-ed em{ font-style:italic; color:var(--magenta); }
.h-ed-light{ color:var(--bone); }
.h-ed-light em{ color:var(--magenta); }
.sp-num{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin-bottom:var(--s-3);
}
.sp-num-light{ color:rgba(242,239,233,.55); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 32px; font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:500; border:1px solid transparent; border-radius:0; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.btn-fill{ background:var(--magenta); color:#fff; }
.btn-fill:hover{ background:var(--bone); color:var(--ink); }
.btn-out{ border-color:rgba(242,239,233,.45); color:var(--bone); }
.btn-out:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.link-u{
  display:inline-block; margin-top:var(--s-4);
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid var(--magenta); padding-bottom:5px; color:var(--magenta);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-u:hover{ color:var(--ink); border-color:var(--ink); }

/* ── header ────────────────────────────────────────────── */
.site{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition:background .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site.is-stuck{ background:rgba(242,239,233,.92); backdrop-filter:blur(12px);
                border-bottom-color:var(--line); }
.hdr{ display:flex; align-items:center; justify-content:space-between; padding-block:22px; }
.mark{
  font-family:var(--disp); font-size:19px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--bone); transition:color .45s var(--ease);
}
.site.is-stuck .mark{ color:var(--ink); }
.nav{ display:flex; gap:var(--s-4); }
.nav a{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  color:rgba(242,239,233,.78); transition:color .45s var(--ease);
}
.nav a:hover{ color:var(--bone); }
.site.is-stuck .nav a{ color:var(--ink-2); }
.site.is-stuck .nav a:hover{ color:var(--ink); }

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:var(--s-7); background:var(--ink); overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  /* Y laag houden: bij cover snijdt een hogere waarde de bovenkant van
     haar hoofd af. Op desktop schaalt dit beeld altijd op breedte, dus
     6% laat consequent ruimte boven haar hoofd. */
  object-fit:cover; object-position:50% 6%;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,10,12,.92) 0%, rgba(11,10,12,.55) 40%, rgba(11,10,12,.30) 72%, rgba(11,10,12,.5) 100%),
    linear-gradient(to right, rgba(11,10,12,.86) 0%, rgba(36,16,32,.34) 48%, rgba(11,10,12,0) 78%);
}
.hero-in{ position:relative; z-index:2; color:var(--bone); }
.hero-eyebrow{
  font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(242,239,233,.72); margin-bottom:var(--s-3);
}
.hero-word{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(46px,9.6vw,152px); line-height:.9;
  letter-spacing:-.03em; color:var(--bone);
  text-shadow:0 2px 34px rgba(11,10,12,.55);
}
.hero-sub{
  margin-top:var(--s-4); max-width:44ch;
  font-size:19px; color:rgba(242,239,233,.82); font-weight:300;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--s-5); }
/* verticaal randlabel */
.hero-side{
  position:absolute; right:26px; top:50%; z-index:2;
  transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,239,233,.5);
}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(242,239,233,.55);
}
.scroll-cue i{ width:1px; height:34px; background:rgba(242,239,233,.4); }

/* ── statement ─────────────────────────────────────────── */
.statement{ position:relative; padding-block:var(--s-8); overflow:hidden; }
/* oversized woord als redactionele kop, loopt de marge uit */
.giant{
  display:block; margin-left:-.055em; margin-bottom:var(--s-6);
  font-family:var(--disp); font-style:italic; font-weight:400;
  font-size:clamp(64px,13.4vw,208px); line-height:.86; letter-spacing:-.04em;
  color:var(--bone-2); white-space:nowrap; pointer-events:none;
}
.statement-in{ position:relative; z-index:2;
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-7); align-items:start; }
.st-lead{
  font-family:var(--disp); font-size:clamp(22px,2.3vw,31px); line-height:1.36;
  max-width:26ch; font-weight:400;
}
.st-lead b{ font-weight:400; font-style:italic; color:var(--magenta); }
.st-meta{
  display:grid; gap:var(--s-4);
  border-top:1px solid var(--line); padding-top:var(--s-4);
}
.st-meta li{ display:flex; flex-direction:column; gap:9px; font-size:15px; color:var(--ink-2); }
.st-meta span{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
}

/* ── spreads ───────────────────────────────────────────── */
.spread{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:0; padding-block:var(--s-7);
}
.spread-b{ grid-template-columns:.85fr 1.15fr; }
.sp-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.spread-a .sp-media{ padding-right:var(--s-6); }
.spread-b .sp-media{ padding-left:var(--s-6); }
.sp-copy{ padding-inline:var(--s-6); max-width:640px; }
.spread-a .sp-copy{ padding-right:var(--gut); }
.spread-b .sp-copy{ padding-left:var(--gut); }
.sp-copy p{ margin-top:var(--s-3); color:var(--ink-2); max-width:46ch; }
.sp-list{ margin-top:var(--s-4); border-top:1px solid var(--line); }
.sp-list li{
  padding-block:13px; border-bottom:1px solid var(--line);
  font-size:14px; letter-spacing:.1em; text-transform:uppercase;
}

/* ── filmstrip ─────────────────────────────────────────── */
.strip{ overflow:hidden; padding-block:var(--s-5); }
.strip-track{ display:flex; gap:10px; width:max-content; animation:roll 64s linear infinite; }
.strip-track figure{ flex:none; width:clamp(240px,26vw,380px); }
.strip-track img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
@keyframes roll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ── opleiding (donkere band) ──────────────────────────── */
.opl{ background:var(--plum); color:var(--bone); padding-block:var(--s-8); }
.opl-head{ max-width:900px; }
.opl-intro{ margin-top:var(--s-3); color:rgba(242,239,233,.66); font-size:18px; }
.fases{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-4); margin-block:var(--s-7);
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.fase{ border-top:1px solid var(--line-l); padding-top:var(--s-3); }
.fase-n{
  display:block; font-family:var(--disp); font-size:14px;
  color:var(--magenta); letter-spacing:.1em; margin-bottom:var(--s-3);
}
.fase h3{ font-family:var(--disp); font-size:24px; line-height:1.14; margin-bottom:10px; }
.fase p{ font-size:14.5px; color:rgba(242,239,233,.62); line-height:1.6; }
.fase-last h3{ color:var(--magenta); }

.opl-band{ position:relative; }
.opl-band img{ width:100%; aspect-ratio:21/9; object-fit:cover; }
.opl-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(11,10,12,.82) 0%, rgba(11,10,12,.22) 32%, rgba(11,10,12,0) 58%);
}
.opl-band figcaption{
  position:absolute; z-index:2; left:var(--gut); bottom:var(--s-5);
  display:flex; flex-direction:column; gap:8px;
  font-size:16px; color:rgba(242,239,233,.9); max-width:34ch;
}
.opl-band figcaption span{
  font-family:var(--disp); font-size:34px; font-style:italic; color:var(--bone);
}
.opl-facts{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--s-5); flex-wrap:wrap; margin-top:var(--s-7);
}
.opl-facts ul{ display:flex; gap:var(--s-6); flex-wrap:wrap; }
.opl-facts li{ display:flex; flex-direction:column; gap:5px; }
.opl-facts b{ font-family:var(--disp); font-size:30px; font-weight:400; }
.opl-facts span{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,239,233,.5);
}

/* ── signatuur: scroll-sequentie ───────────────────────── */
.seq{ position:relative; background:var(--ink); color:var(--bone); }
.seq-label{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  padding-top:var(--s-7); margin-bottom:0;
}
.seq-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.seq-frames{ position:relative; }
.seq-frame{
  position:absolute; inset:0; display:grid;
  grid-template-columns:1.05fr .95fr; align-items:center; gap:var(--s-7);
  opacity:0; transition:opacity .75s var(--ease); pointer-events:none;
}
.seq-frame.is-on{ opacity:1; pointer-events:auto; }
.seq-frames::before{ content:""; display:block; padding-top:min(62svh, 620px); }
.seq-fig{ overflow:hidden; }
.seq-fig img{
  width:100%; height:min(62svh,620px); object-fit:cover;
  transform:scale(1.05); transition:transform 1.5s var(--ease);
}
.seq-frame.is-on .seq-fig img{ transform:scale(1); }
.seq-i{
  display:block; font-family:var(--disp); font-size:13px; letter-spacing:.16em;
  color:var(--magenta); margin-bottom:var(--s-3);
}
.seq-txt h3{
  font-family:var(--disp); font-size:clamp(28px,3.2vw,46px);
  line-height:1.08; letter-spacing:-.018em; margin-bottom:var(--s-3);
}
.seq-txt p{ color:rgba(242,239,233,.7); max-width:42ch; font-size:17px; }
.seq-dots{ display:flex; gap:10px; margin-top:var(--s-5); }
.seq-dots li{
  width:34px; height:2px; background:rgba(242,239,233,.22);
  transition:background .4s var(--ease);
}
.seq-dots li.is-on{ background:var(--magenta); }
.seq-triggers{ position:relative; margin-top:-100svh; }
.trig{ height:100svh; }

/* ── quotes ────────────────────────────────────────────── */
.quote-sec{ padding-block:var(--s-9); }
.q-big p{
  font-family:var(--disp); font-size:clamp(28px,4vw,58px); line-height:1.16;
  letter-spacing:-.018em;
}
.q-big em{ font-style:italic; color:var(--magenta); }
.q-big cite{
  display:block; margin-top:var(--s-4); font-style:normal;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
}
.q-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5);
  margin-top:var(--s-8); border-top:1px solid var(--line); padding-top:var(--s-5);
}
.q-row p{ font-size:17px; color:var(--ink-2); line-height:1.55; }
.q-row cite{
  display:block; margin-top:14px; font-style:normal;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}

/* ── meer ──────────────────────────────────────────────── */
.meer{ padding-bottom:var(--s-9); }
.meer-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6);
           border-top:1px solid var(--line); padding-top:var(--s-5); }
.meer-item h3{ font-family:var(--disp); font-size:26px; line-height:1.14; margin-bottom:12px; }
.meer-item p{ color:var(--ink-2); font-size:16px; }
.meer-meta{
  display:block; margin-top:var(--s-3); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ── cta ───────────────────────────────────────────────── */
.cta{ position:relative; min-height:74svh; display:flex; align-items:center;
      background:var(--ink); overflow:hidden; }
.cta-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
          object-position:50% 42%; opacity:.72; }
.cta-veil{ position:absolute; inset:0;
  background:linear-gradient(to right, rgba(11,10,12,.9) 0%, rgba(11,10,12,.55) 60%, rgba(36,16,32,.6) 100%); }
.cta-in{ position:relative; z-index:2; color:var(--bone); padding-block:var(--s-8); }
.cta-title{
  font-family:var(--disp); font-size:clamp(38px,5.6vw,86px); line-height:1;
  letter-spacing:-.026em;
}
.cta-title em{ font-style:italic; color:var(--magenta); }
.cta-in p{ margin-top:var(--s-3); max-width:46ch; color:rgba(242,239,233,.76); }

/* ── footer ────────────────────────────────────────────── */
.foot{ background:var(--ink); color:rgba(242,239,233,.62); padding-top:var(--s-6);
       border-top:1px solid var(--line-l); }
.foot .mark{ color:var(--bone); }
.foot-in{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-6);
          padding-bottom:var(--s-6); border-bottom:1px solid var(--line-l); }
.foot-in > div > p{ margin-top:10px; font-size:14px; color:rgba(242,239,233,.42); }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
.foot-cols h4{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
               color:rgba(242,239,233,.4); margin-bottom:13px; font-weight:400; }
.foot-cols a, .foot-cols span{ display:block; font-size:14.5px; padding-block:5px;
                               color:rgba(242,239,233,.7); transition:color .3s var(--ease); }
.foot-cols a:hover{ color:var(--bone); }
.foot-bar{ display:flex; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap;
           padding-block:20px 30px; font-size:10.5px; letter-spacing:.18em;
           text-transform:uppercase; color:rgba(242,239,233,.34); }

/* ═══════════ MOBIEL ═══════════ */
@media (max-width:1000px){
  :root{ --gut:22px; --s-9:120px; --s-8:88px; --s-7:64px; }
  .nav{ display:none; }

  .hero{ min-height:96svh; padding-bottom:var(--s-6); }
  .hero-img{ object-position:58% 22%; }
  .hero-side{ display:none; }
  .hero-sub{ font-size:17px; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; }

  .giant{ font-size:clamp(48px,15vw,80px); margin-bottom:var(--s-4); }
  .statement-in{ grid-template-columns:1fr; gap:var(--s-5); }
  .st-lead{ max-width:none; }

  /* spreads: beeld boven, tekst onder — met vol-bleed beeld */
  .spread, .spread-b{ grid-template-columns:1fr; gap:var(--s-4); padding-block:var(--s-6); }
  .spread-a .sp-media, .spread-b .sp-media{ padding:0; }
  .spread-b .sp-media{ order:-1; }
  .sp-copy, .spread-a .sp-copy, .spread-b .sp-copy{ padding-inline:var(--gut); max-width:none; }
  .sp-media img{ aspect-ratio:3/2; }

  .strip-track figure{ width:64vw; }

  .fases{ grid-template-columns:1fr 1fr; gap:var(--s-4); }
  .opl-band img{ aspect-ratio:3/2; }
  .opl-band figcaption span{ font-size:26px; }
  .opl-facts{ flex-direction:column; align-items:stretch; }
  .opl-facts ul{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
  .opl-facts .btn{ width:100%; }

  /* sequentie wordt een gestapelde editorial reeks */
  .seq-label{ padding-top:var(--s-6); }
  .seq-sticky{ position:static; height:auto; padding-block:0 var(--s-7); }
  .seq-frames{ display:grid; gap:var(--s-6); }
  .seq-frames::before{ display:none; }
  .seq-frame{ position:static; opacity:1; pointer-events:auto;
              grid-template-columns:1fr; gap:var(--s-3); }
  .seq-fig img{ height:auto; aspect-ratio:3/2; transform:none; }
  .seq-dots{ display:none; }
  .seq-triggers{ display:none; }

  .q-row{ grid-template-columns:1fr; gap:var(--s-4); }
  .meer-row{ grid-template-columns:1fr; gap:var(--s-5); }
  .cta{ min-height:0; }
  .foot-in{ grid-template-columns:1fr; gap:var(--s-5); }
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .foot-bar{ flex-direction:column; gap:8px; }
}

@media (max-width:560px){
  .hero-cta{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .fases{ grid-template-columns:1fr; }
  .opl-facts ul{ grid-template-columns:1fr; }
  .foot-cols{ grid-template-columns:1fr; }
}

/* ── reduced motion: sequentie wordt een rustige stapel ── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .strip-track{ animation:none; }
  *,*::before,*::after{ transition-duration:.001ms !important; }

  /* de sequentie wordt een rustige, gestapelde editorial reeks */
  .seq-sticky{ position:static; height:auto; padding-block:0 var(--s-8); }
  .seq-frames{ display:grid; gap:var(--s-7); }
  .seq-frames::before{ display:none; }
  .seq-frame{ position:static; opacity:1; pointer-events:auto; }
  .seq-frame:nth-child(even){ direction:rtl; }
  .seq-frame:nth-child(even) > *{ direction:ltr; }
  .seq-fig img{ height:auto; aspect-ratio:4/3; transform:none; }
  .seq-dots{ display:none; }
  .seq-triggers{ display:none; }
}