/* =========================================================
   The Blind Spot Session — sales page
   Cream paper, ink black, one electric blue. Op-art + ink.
   ========================================================= */

@font-face{font-family:'Bebas Neue';src:url("../assets/fonts/BebasNeue.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nyght Serif';src:url("../assets/fonts/NyghtSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nyght Serif';src:url("../assets/fonts/NyghtSerif-RegularItalic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Raleway';src:url("../assets/fonts/Raleway-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url("../assets/fonts/Raleway-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url("../assets/fonts/Raleway-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Raleway';src:url("../assets/fonts/Raleway-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* colour */
  --paper:#F9F6EB;          /* hero paper, matches the poster (gemeten uit hero.jpg) */
  --cream:#F6F2E7;
  --ink:#0A0A0A;
  --blue:#0030F5;
  --blue-light:#8196FF;     /* the blue, readable on ink */

  --ink-80:rgba(10,10,10,.82);
  --ink-60:rgba(10,10,10,.66);
  --ink-16:rgba(10,10,10,.16);
  --cream-85:rgba(246,242,231,.86);
  --cream-65:rgba(246,242,231,.68);
  --cream-18:rgba(246,242,231,.18);

  /* type */
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --serif:'Nyght Serif',Georgia,serif;
  --sans:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --hover:200ms var(--ease);
  --reveal:520ms var(--ease);

  --header-h:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--ink)}
body{
  font-family:var(--sans);font-size:16px;line-height:1.7;
  color:var(--ink);background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none;transition:background-color var(--hover),color var(--hover),border-color var(--hover)}
svg{display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.is-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--blue-light)}

/* Delen die 'on hold' staan (attribuut hidden) blijven in de code maar tonen niet, ook al krijgen ze een eigen display-regel */
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.skip-link:focus{top:12px}

/* =====================  type  ===================== */
.display{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.9;letter-spacing:.006em;text-wrap:balance;
  -webkit-text-stroke:.024em currentColor;paint-order:stroke fill;   /* thickens Bebas towards the poster's heavy cut */
}
.subhead{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2.3vw,34px);line-height:1.14;letter-spacing:-.005em;text-wrap:balance;
  font-variant-numeric:lining-nums;
}
.pull{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.1vw,30px);line-height:1.3;text-wrap:balance;
}
.copy{display:flex;flex-direction:column;gap:1.05em;font-size:clamp(15.5px,1.08vw,17px);line-height:1.74;max-width:36em;text-wrap:pretty}
.is-light .copy{color:var(--ink-80)}
.is-dark .copy{color:var(--cream-85)}
.copy strong{font-weight:600}
.copy .lead{font-family:var(--serif);font-size:1.22em;line-height:1.5}
.hl{color:var(--blue)}
.is-dark .hl{color:var(--blue-light)}
.tag{
  font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.9;
}
.is-light .tag,.hero .tag{color:var(--ink-60)}
.is-dark .tag{color:var(--cream-65)}
.rule{width:56px;height:1px;background:currentColor;opacity:.5;border:0;margin:0}

/* =====================  buttons  ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:19px 32px;border:0;cursor:pointer;line-height:1.2;
}
.btn svg{width:18px;height:10px;transition:transform var(--hover)}
.btn:hover svg{transform:translateX(5px)}
.btn:hover{background:var(--ink);color:var(--cream)}
.is-dark .btn:hover,.site-footer .btn:hover{background:var(--cream);color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:var(--blue);color:#fff}
.btn--sm{font-size:11px;padding:14px 22px;gap:12px}
.btn--block{display:flex;width:100%}

/* =====================  header  ===================== */
.site-header{
  position:sticky;top:0;z-index:50;height:var(--header-h);
  background:var(--paper);border-bottom:1px solid var(--ink-16);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 clamp(16px,4vw,48px);
}
.site-header__brand{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.5}
.site-header__nav{display:flex;gap:clamp(24px,3.4vw,52px)}
.site-header__nav a{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent}
.site-header__nav a:hover{border-bottom-color:var(--ink)}

/* =====================  hero  ===================== */
/* Opzet van mockup 3: kleine tekstkolom links (tag boven, belofte en knop onder), de poster rechts.
   De poster heeft links een stuk leeg papier in dezelfde kleur als --paper, dus de overgang is onzichtbaar. */
.hero{
  background:var(--paper);
  display:grid;grid-template-columns:minmax(290px,27%) minmax(0,1fr);grid-template-areas:"text poster";
}
.hero__poster{grid-area:poster;margin-left:calc(-1 * clamp(0px,3.4vw,64px))}   /* schuift over het lege papier links in de poster, zodat het beeld iets groter blijft */
.hero__poster img{width:100%;height:auto}
@media (min-width:901px){
  .hero__poster img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 3.2%);mask-image:linear-gradient(to right,transparent 0,#000 3.2%)}
}
.hero__text{
  position:relative;z-index:1;
  grid-area:text;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,4vw,64px);
  padding:clamp(24px,3vw,52px) clamp(8px,1.4vw,24px) clamp(28px,3.6vw,64px) clamp(20px,3.4vw,56px);
}
.hero__tag{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__tag svg{width:26px;height:10px;color:var(--ink)}
.hero__promise{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2vw,30px)}
.hero__lede{font-family:var(--serif);font-size:clamp(17px,1.62vw,25px);line-height:1.4;letter-spacing:-.003em;text-wrap:balance}
.hero__lede em{font-style:normal;color:var(--blue)}
.hero__promise .btn{padding:17px 24px;white-space:nowrap}

/* =====================  layout primitives  ===================== */
.sec{position:relative}
.is-light{background:var(--cream);color:var(--ink)}
.is-dark{background:var(--ink);color:var(--cream)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split__text{
  padding:clamp(64px,8vw,132px) clamp(24px,5.4vw,96px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,2.3vw,32px);
}
.split__photo{position:relative;min-height:clamp(460px,52vw,860px);background:var(--ink);overflow:hidden}
.split__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split--flip .split__photo{order:-1}

.full-bleed{position:relative;overflow:hidden;background:var(--ink);color:var(--cream)}
.full-bleed__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.full-bleed__content{position:relative;padding:clamp(72px,10vw,160px) clamp(24px,5vw,96px);max-width:1440px;margin:0 auto}

.editorial{padding:clamp(72px,9vw,150px) clamp(24px,5vw,96px)}
.editorial__inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(44px,5.4vw,84px)}

/* =====================  01 · herkenning (dark)  ===================== */
#herkenning .display{font-size:clamp(46px,6.6vw,108px)}
#herkenning .subhead,#brilliance .subhead{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  font-size:clamp(14px,1.4vw,20px);line-height:1.25;letter-spacing:.15em;
  color:var(--cream-85);max-width:26em;
  margin-top:calc(-1 * clamp(20px,2.3vw,32px) + 2px);   /* heft de gap van .split__text op: de ondertitel sluit direct aan op de titel */
}
#brilliance .subhead{color:var(--ink)}   /* zwart op crème */

/* =====================  02 · je voelt het (light)  ===================== */
#voelt .subhead{font-size:clamp(24px,3vw,44px);text-transform:none;line-height:1.2;max-width:15em}

/* =====================  quote (nebula)  ===================== */
.quote{min-height:clamp(520px,78vh,820px);display:flex}
.quote .full-bleed__content{display:flex;align-items:center;justify-content:center;width:100%}
.quote .full-bleed__bg{opacity:.95}
.quote::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,6,.35),rgba(0,0,6,.1) 40%,rgba(0,0,6,.45))}
.quote .full-bleed__content{z-index:1}
.quote blockquote{
  font-family:var(--serif);font-style:italic;font-weight:400;text-align:center;color:var(--cream);
  font-size:clamp(30px,5.2vw,82px);line-height:1.1;letter-spacing:-.012em;max-width:17em;text-wrap:balance;
}

/* =====================  04 · brilliance (light)  ===================== */
#brilliance .display{font-size:clamp(46px,6.6vw,108px)}
/* De hele afbeelding (staand formaat) vult de kolom: de zwarte lijnen lopen van boven- tot onderkant van de sectie, zoals in de mockup.
   Het papier is op het crème van de pagina afgestemd en de rechterrand loopt zacht uit, dus er is geen zichtbare rand. */
#brilliance .split__photo{background:transparent}
#brilliance .split__photo img{
  object-position:30% 50%;
  -webkit-mask-image:linear-gradient(to right,#000 94%,transparent);mask-image:linear-gradient(to right,#000 94%,transparent);
}
@media (max-width:900px){#brilliance .split__photo{aspect-ratio:4/5}}

/* =====================  05 · de sessie (dark)  ===================== */
#sessie .display{font-size:clamp(46px,6.6vw,108px)}
#sessie .subhead{text-transform:none;font-size:clamp(21px,2.2vw,32px)}
.topics{border-top:1px solid var(--ink-16);max-width:36em}
.topics li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;padding:16px 0;border-bottom:1px solid var(--ink-16);font-size:clamp(15.5px,1.08vw,17px);line-height:1.6;color:var(--ink-80)}
.topics li::before{counter-increment:topic;content:counter(topic,decimal-leading-zero);font-family:var(--display);font-size:24px;line-height:1.1;color:var(--blue);letter-spacing:.04em}
.topics{counter-reset:topic}
.moment{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,4.4vw,70px);line-height:.95;letter-spacing:.008em;-webkit-text-stroke:.02em currentColor;paint-order:stroke fill}
.moment span{display:block}
.moment span:last-child{color:var(--blue)}
/* donkere variant (sectie "Same business") */
.is-dark .topics{border-top-color:var(--cream-18)}
.is-dark .topics li{border-bottom-color:var(--cream-18);color:var(--cream-85)}
.is-dark .topics li::before{color:var(--blue-light)}
.is-dark .moment span:last-child{color:var(--blue-light)}

/* =====================  07 · hoe het werkt (light)  ===================== */
.how__intro{display:flex;flex-direction:column;gap:20px;max-width:38em}
.how__intro .display{font-size:clamp(46px,6.6vw,108px)}
.how__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
@media (max-width:760px){.how__grid{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--ink);padding-top:22px}
.step__num{font-family:var(--serif);font-size:clamp(44px,4.6vw,68px);line-height:1;color:var(--blue);font-variant-numeric:lining-nums}
.step__title{font-family:var(--display);font-size:clamp(30px,2.8vw,40px);line-height:1;text-transform:uppercase;letter-spacing:.02em;-webkit-text-stroke:.02em currentColor;paint-order:stroke fill}
.step__body{font-size:clamp(15px,1.05vw,16.5px);line-height:1.7;color:var(--ink-80);max-width:25em}

/* =====================  beeldmerk "BLIND SPOT" (donker)  ===================== */
.banner{background:#070706;line-height:0}   /* zwart afgestemd op de afbeelding */
.banner img{display:block;width:100%;height:auto}
@media (max-width:700px){
  .banner img{aspect-ratio:4/3;object-fit:cover;object-position:0% 50%}   /* op telefoon: het woord BLIND SPOT blijft in beeld */
}

/* =====================  09 · prijs  ===================== */
.price{position:relative;background:#F5F1E5;overflow:hidden}
.price__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.price__inner{
  position:relative;max-width:1600px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,88px);align-items:center;
  padding:clamp(64px,8vw,128px) clamp(24px,5vw,96px);
}
.price__text{display:flex;flex-direction:column;gap:clamp(20px,2.3vw,30px)}
.price__text .display{font-size:clamp(44px,6vw,100px);color:var(--ink)}
.price__text .display .hl{display:block}
.price__script{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,38px);line-height:1.2}
.price__card{
  background:rgba(250,248,238,.94);border:1px solid var(--ink-16);
  padding:clamp(26px,3.2vw,48px);display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
}
.price__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:clamp(16px,2vw,24px);border-bottom:1px solid var(--ink)}
.price__label{width:100%;font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-60)}
.price__figure{font-family:var(--serif);font-size:clamp(62px,7.4vw,112px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.price__sub{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.9;color:var(--ink-60);max-width:15em}
.price__list{display:flex;flex-direction:column}
.price__list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:clamp(12px,1.4vw,18px) 0;border-bottom:1px solid var(--ink-16)}
.price__list .ico{width:28px;height:28px;margin-top:2px}
.price__list h3{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.price__list p{font-size:14px;line-height:1.6;color:var(--ink-60);margin-top:2px}
.ico{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* =====================  10 · faq (dark)  ===================== */
.faq__inner{max-width:1100px;margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq__intro{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--header-h) + 32px)}
.faq__intro .display{font-size:clamp(44px,5.6vw,88px)}
.faq__list{border-top:1px solid var(--cream-18)}
.faq__item{border-bottom:1px solid var(--cream-18)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;
  padding:24px 0;font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.3;color:var(--cream);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--blue-light)}
.faq__icon{position:relative;flex:none;width:16px;height:16px}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.5px;background:currentColor;transition:transform var(--hover)}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}
.faq__body{padding:0 0 26px;max-width:34em;font-size:clamp(15px,1.05vw,16.5px);line-height:1.72;color:var(--cream-85)}

/* =====================  final cta (light)  ===================== */
.final{overflow:hidden}
.final__text{padding:clamp(64px,8vw,132px) clamp(24px,5.4vw,96px);display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,2.6vw,36px)}
.final__title{font-size:clamp(78px,15.5vw,248px);line-height:.82;letter-spacing:0;color:var(--ink)}
.final__title span{display:block}
.final__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.final__meta{font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-60);line-height:1.8}
.final .split__photo img{object-position:60% 50%}

/* =====================  footer  ===================== */
.site-footer{
  background:var(--ink);color:var(--cream-65);
  padding:34px clamp(24px,5vw,72px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  border-top:1px solid var(--cream-18);
  font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;line-height:1.8;
}

/* =====================  beweging  ===================== */
/* De verborgen begintoestand (.is-hidden) wordt door js/motion.js gezet, niet hier, zodat de pagina leesbaar blijft zonder script. */
.rv{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-hidden{opacity:0;transform:translateY(22px)}
.rv.btn{transition:opacity .85s var(--ease),transform .85s var(--ease),background-color var(--hover),color var(--hover)}   /* knoppen houden hun hover-overgang */
/* koppen "vegen" omhoog */
.rv--wipe{transition:none}
.rv--wipe.is-hidden{opacity:0;transform:translateY(38px)}
@keyframes wipe-up{from{clip-path:inset(0 0 100% 0);transform:translateY(38px)}to{clip-path:inset(-8% -3% -14% -3%);transform:none}}
.rv--wipe.wipe-in{animation:wipe-up 1s var(--ease) both}
/* foto's faden in */
.rv--photo{transition:opacity 1.2s var(--ease)}
.rv--photo.is-hidden{opacity:0;transform:none}
/* "One insight. One sentence. One lightbulb moment." regel voor regel */
.moment.rv.is-hidden{opacity:1;transform:none}
.moment span{transition:transform .9s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--n,0) * 130ms)}
.moment span:nth-child(2){--n:1}
.moment span:nth-child(3){--n:2}
.moment.is-hidden span{opacity:0;transform:translateY(55%)}
.quote .hl{color:var(--blue-light)}   /* het blauw uit het citaat blijft leesbaar op de donkere nevel */
/* citaat: woorden lichten op bij het scrollen (opacity wordt door het script gezet) */
.qw{display:inline-block;will-change:opacity}
/* parallax en zoom (de waarden --py en --ps komen uit het script) */
[data-parallax],[data-zoom]{transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));will-change:transform}
.hero__poster{overflow:hidden}
.banner{overflow:hidden}
/* voortgangslijn onder het menu */
.site-header__progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform:scaleX(var(--progress,0));transform-origin:0 50%;pointer-events:none}
/* hero komt binnen bij het laden */
@keyframes poster-in{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__poster{animation:poster-in 1.6s var(--ease) both}
.hero__tag{animation:rise .9s var(--ease) .55s both}
.hero__lede{animation:rise .9s var(--ease) .75s both}
.hero__promise .btn{animation:rise .9s var(--ease) .95s both}

/* =====================  responsive  ===================== */
@media (min-width:1100px){
  .price__inner{padding-right:clamp(96px,22vw,420px)}   /* keeps the face in the artwork visible next to the card */
}

@media (max-width:1020px){
  .faq__inner{grid-template-columns:1fr}
  .faq__intro{position:static}
}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  /* picture first on small screens: a visual break between every block of text */
  .split__photo,.split--flip .split__photo{order:-1;min-height:0;aspect-ratio:4/3}
  .split__photo img{object-position:50% 30%}
  .final .split__photo{aspect-ratio:1/1}
  .price__art{position:relative;inset:auto;height:68vw;max-height:520px;object-position:88% 50%}
  .price__inner{grid-template-columns:1fr;padding:clamp(40px,8vw,64px) clamp(20px,5vw,40px) clamp(56px,10vw,88px)}
  /* hero: poster bovenaan, daaronder de belofte en de knop, de tag als laatste */
  .hero{grid-template-columns:1fr;grid-template-areas:"poster" "text"}
  .hero__poster{margin-left:0}
  .hero__text{justify-content:flex-start;padding:clamp(28px,5vw,44px) clamp(20px,5vw,40px) clamp(44px,7vw,64px)}
  .hero__tag{order:2}
  .hero__tag svg{display:none}
  .hero__lede{font-size:clamp(21px,3.4vw,30px);max-width:23em}
}

@media (max-width:820px){
  .site-header__nav{display:none}
}

@media (max-width:700px){
  :root{--header-h:62px}
  .hero__poster{overflow:hidden}
  .hero__poster img{aspect-ratio:4/3;object-fit:cover;object-position:11% 50%}
  .btn{padding:18px 26px;letter-spacing:.22em}
  .btn.btn--sm{padding:13px 16px;gap:10px;letter-spacing:.2em}
  .hero__promise .btn,.final__cta .btn{width:100%}
  .site-header__brand br{display:none}
  .site-header__brand{max-width:9.5em;letter-spacing:.2em}
}

@media (max-width:420px){
  .split__photo,.split--flip .split__photo{aspect-ratio:1/1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.btn svg,.moment span{transition:none}
  .hero__poster,.hero__tag,.hero__lede,.hero__promise .btn{animation:none}
  [data-parallax],[data-zoom]{transform:none}
}

/* foto zwevend (en sticky) in de kolom in plaats van over de volledige kolom; gebruikt in "You're fucking good…" */
.split__photo--float{display:flex;align-items:flex-start;justify-content:center;overflow:visible;background:transparent;padding:clamp(48px,6vw,112px) clamp(24px,4vw,72px)}   /* overflow:visible, anders werkt sticky niet */
.split__photo--float img{position:sticky;inset:auto;top:calc(var(--header-h) + 28px);width:min(100%,400px);height:auto;object-fit:contain;box-shadow:0 0 0 1px var(--cream-18)}
@media (max-width:900px){
  .split__photo--float,.split--flip .split__photo--float{aspect-ratio:auto;padding:clamp(32px,7vw,56px) 24px 0}
  .split__photo--float img{position:static;width:min(100%,340px)}
}