:root{--ink:#0d0c0e;--coal:#161318;--paper:#f2ece4;--ivory:#faf5ef;--white:#fffdfa;--text:#5f585d;--muted:#938a90;--red:#bf1728;--red-bright:#e0293f;--red-deep:#7d0e1b;--red-soft:#f4c8ce;--line:rgba(13,12,14,.11);--line-d:rgba(255,255,255,.12);--max:1200px;--ease:cubic-bezier(.22,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Manrope",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}img,iframe{max-width:100%;display:block}button,input,textarea,select{font:inherit;color:inherit}h1,h2,h3,p{margin-top:0}.wrap{width:min(var(--max),90vw);margin:auto}
.thread{position:fixed;left:max(18px,3.4vw);top:0;bottom:0;width:2px;z-index:60;pointer-events:none}.thread::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(191,23,40,.13) 12%,rgba(191,23,40,.13) 88%,transparent)}.thread-run{position:absolute;left:-1px;top:0;width:4px;height:0;background:linear-gradient(180deg,transparent,#fff,var(--red-bright),var(--red-deep));box-shadow:0 0 18px rgba(224,41,63,.55);border-radius:999px}
.gate{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:24px;background:rgba(8,7,9,.92);backdrop-filter:blur(18px);transition:.4s}.gate.done{opacity:0;visibility:hidden;pointer-events:none}.gate-card{width:min(540px,100%);padding:clamp(34px,6vw,58px);background:var(--coal);color:white;border:1px solid rgba(224,41,63,.34)}.gate-eyebrow{font-size:var(--fs-label);font-weight:800;letter-spacing:.28em;color:var(--red-soft)}.gate-card h2{margin:16px 0 12px;font:italic 400 clamp(30px,6vw,46px)/1.02 "Fraunces",serif}.gate-card p{color:rgba(255,255,255,.7);line-height:1.7;font-size:var(--fs-sm)}.gate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn{min-height:52px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:999px;font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease)}.btn-solid{background:var(--ink);color:white;border-color:rgba(191,23,40,.35)}.btn-solid:hover{background:var(--red);transform:translateY(-2px)}.btn-line{border-color:rgba(13,12,14,.18);background:transparent}.btn-line:hover{border-color:var(--red);color:var(--red)}.on-dark .btn-solid{background:var(--ivory);color:var(--ink)}.on-dark .btn-line{border-color:rgba(255,255,255,.28);color:white}
.head{position:fixed;inset:0 0 auto;z-index:90;background:rgba(242,236,228,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(191,23,40,.12);transition:transform .45s var(--ease)}.head.hide{transform:translateY(-100%)}.head-in{min-height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;flex-direction:column;font:13px/1.02 "Rubik Mono One",sans-serif;letter-spacing:-.04em}.brand b:last-child{color:var(--red-deep)}.nav{display:flex;align-items:center;gap:24px}.nav .link{font-size:var(--fs-cap);font-weight:700}.nav .active{color:var(--red-deep)}.nav-cta{min-height:44px;padding:0 18px;display:flex;align-items:center;gap:8px;border:1px solid rgba(191,23,40,.3);border-radius:999px;font-size:var(--fs-label);font-weight:800;text-transform:uppercase}.burger{display:none;width:46px;height:46px;border:1px solid rgba(191,23,40,.28);border-radius:50%;background:transparent}.burger span,.burger span::before,.burger span::after{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}.burger span::before,.burger span::after{content:"";position:absolute;left:0}.burger span::before{top:-5px}.burger span::after{top:5px}.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red-bright));z-index:95}
.sec{padding:clamp(76px,9vw,138px) 0}.sec-paper{background:var(--paper)}.sec-ivory{background:var(--ivory);border-block:1px solid var(--line)}.sec-ink{background:var(--ink);color:white}.take{display:flex;gap:14px;align-items:baseline;font-size:var(--fs-label);font-weight:800;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}.take b{font:italic 500 20px "Fraunces",serif;color:var(--red-deep);letter-spacing:0}.sec-ink .take{color:rgba(255,255,255,.5)}.sec-ink .take b{color:var(--red-soft)}.head-xl{margin:20px 0 0;font:clamp(38px,5.6vw,80px)/.94 "Rubik Mono One",sans-serif;letter-spacing:-.055em}.head-xl em{font-style:normal;color:var(--red-deep)}.sec-ink .head-xl em{color:var(--red-soft)}.intro{max-width:590px;margin:22px 0 0;color:var(--text);font-size:var(--fs-body);line-height:1.75}
.hero{position:relative;padding:calc(82px + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,110px);overflow:hidden;background:radial-gradient(120% 80% at 90% 0%,rgba(255,255,255,.5),transparent 42%),var(--paper)}.hero-beam,.libhero-beam{position:absolute;width:900px;height:3px;left:-160px;top:26%;background:linear-gradient(90deg,transparent,rgba(191,23,40,.1),#fff,rgba(224,41,63,.4),transparent);transform:rotate(-11deg)}.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,72px);align-items:center}.hero-tag{font-size:var(--fs-label);font-weight:800;letter-spacing:.2em;color:var(--red-deep);text-transform:uppercase}.hero-title{margin:22px 0 0;font:clamp(44px,7.2vw,104px)/.9 "Rubik Mono One",sans-serif;letter-spacing:-.05em}.hero-title span{display:block}.hero-title .l2{margin-left:clamp(0px,6vw,88px);color:var(--red-deep)}.hero-lead{max-width:530px;margin:30px 0 0;color:var(--text);font-size:clamp(15px,1.15vw,18px);line-height:1.7}.hero-lead .em{font:italic 400 1.05em "Fraunces",serif;color:var(--red-deep)}.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.text-link{align-self:center;font-size:var(--fs-cap);font-weight:800;color:var(--red-deep)}.hero-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:35px;border-top:1px solid var(--line);padding-top:20px}.hero-proof span{font-size:var(--fs-label);color:var(--muted);text-transform:uppercase}.hero-proof b{display:block;color:var(--ink);font-size:var(--fs-body)}.plate{
  position:relative;
  padding:14px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),transparent 42%),
    #121014;
  color:white;
  border:1px solid rgba(191,23,40,.22);
  box-shadow:
    0 38px 90px rgba(13,12,14,.18),
    0 8px 24px rgba(13,12,14,.12);
}
.portrait-card{
  border-radius:4px;
}
.portrait-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.035);
}
.portrait-head{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:6px 8px 14px;
}
.portrait-head > div{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.portrait-kicker{
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.18em;
  color:rgba(255,255,255,.42);
}
.portrait-head strong{
  font:italic 400 22px/1 "Fraunces",serif;
  color:#fff;
}
.portrait-count{
  padding:7px 10px;
  border:1px solid rgba(244,200,206,.2);
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.12em;
  color:var(--red-soft);
}
.plate-stage{
  position:relative;
  aspect-ratio:4/5.35;
  overflow:hidden;
  background:#211c21;
}
.portrait-stage{
  isolation:isolate;
}
.plate-stage img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
  opacity:0;
  transform:scale(1.035);
  filter:saturate(.94) contrast(1.025);
  transition:
    opacity .7s var(--ease),
    transform 5.2s ease;
}
.plate-stage img.on{
  opacity:1;
  transform:scale(1);
}
.portrait-vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 24%,transparent 68%,rgba(0,0,0,.28)),
    linear-gradient(90deg,rgba(0,0,0,.08),transparent 16%,transparent 84%,rgba(0,0,0,.08));
}
.portrait-frame{
  position:absolute;
  inset:12px;
  z-index:3;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.portrait-nav{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 8px 2px;
}
.plate-dots{
  display:flex;
  align-items:center;
  gap:4px;
}
.plate-dots button{
  position:relative;
  min-width:30px;
  padding:7px 0 9px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.32);
  font-size:var(--fs-label);
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color .25s var(--ease);
}
.plate-dots button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:1px;
  background:rgba(255,255,255,.16);
  transform:scaleX(.42);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.plate-dots button:hover{
  color:#fff;
}
.plate-dots button.on{
  color:var(--red-soft);
}
.plate-dots button.on::after{
  background:var(--red-bright);
  transform:scaleX(1);
}
.portrait-signature{
  font:12px/1 "Rubik Mono One",sans-serif;
  letter-spacing:-.035em;
  color:#fff;
}
.cred-rail{background:var(--ivory);border-block:1px solid var(--line);padding:25px 0}.cred-grid{display:grid;grid-template-columns:.4fr 1.3fr .5fr;gap:28px;align-items:center}.cred-mark{display:flex;align-items:center;gap:12px}.cred-mark span{font:28px "Rubik Mono One",sans-serif;color:var(--red-deep)}.cred-mark b,.cred-link{font-size:var(--fs-label);letter-spacing:.14em}.cred-line{margin:0;font:300 clamp(16px,2vw,23px)/1.45 "Fraunces",serif}.cred-line em{color:var(--red-deep)}.cred-link{font-weight:800;text-align:right;color:var(--red-deep)}
.marquee{overflow:hidden;background:var(--red-deep);color:white;padding:12px 0}.marquee-run{display:flex;width:max-content;gap:44px;animation:marquee 24s linear infinite}.marquee span{font:10px "Rubik Mono One",sans-serif;letter-spacing:.08em}@keyframes marquee{to{transform:translateX(-50%)}}
.manifest-grid{display:grid;grid-template-columns:.45fr 1.2fr;gap:60px}.manifest-index span{display:block;font-size:var(--fs-label);letter-spacing:.18em;color:var(--red-soft)}.manifest-index b{display:block;margin:15px 0;font:40px/.95 "Rubik Mono One",sans-serif}.manifest-index i{font-size:var(--fs-label);letter-spacing:.12em;color:rgba(255,255,255,.4)}.manifest{font:300 clamp(28px,4.2vw,58px)/1.14 "Fraunces",serif;max-width:16ch}.manifest .r{font-style:italic;color:var(--red-soft)}.manifest-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px;padding-top:28px;border-top:1px solid var(--line-d)}.manifest-foot small{color:var(--red-soft);font-weight:800;letter-spacing:.14em}.manifest-foot p{margin-top:9px;color:rgba(255,255,255,.64);font-size:var(--fs-cap);line-height:1.65}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border:1px solid var(--line)}.stat{padding:30px 22px;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat b{font:clamp(35px,5vw,58px)/1 "Rubik Mono One",sans-serif}.stat span{display:block;margin-top:12px;font-size:var(--fs-label);letter-spacing:.12em;color:var(--text)}
.vision,.routes,.performer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.vcard,.route,.performer-card{padding:30px 26px;border:1px solid var(--line);background:rgba(255,255,255,.62)}.vcard .n,.route .n,.pc-num{font:50px/1 "Rubik Mono One",sans-serif;color:rgba(191,23,40,.12)}.vcard h3,.route h3{font-size:var(--fs-cap);letter-spacing:.12em;color:var(--red-deep)}.vcard p,.route p,.performer-card p,.performer-card li{color:var(--text);font-size:var(--fs-sm);line-height:1.7}.route em,.performer-card em{font-style:normal;color:var(--red-deep)}.route .lbl,.pc-label{display:block;margin:8px 0;font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;color:var(--red-deep)}
.feature-intro{display:grid;grid-template-columns:1fr .7fr;gap:40px;align-items:end}.reel{display:grid;gap:26px;margin-top:52px}.prod{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:rgba(255,255,255,.6)}.prod:nth-child(even) .prod-media{order:2}.prod-media{padding:22px;background:var(--ink)}.prod-meta-top,.vp-top{display:flex;justify-content:space-between;color:rgba(255,255,255,.62);font-size:var(--fs-label);letter-spacing:.12em;margin-bottom:12px}.prod-video iframe,.vp-media iframe{width:100%;aspect-ratio:16/9;border:0}.prod-body,.vp-body{padding:clamp(26px,4vw,50px)}.kick{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;color:var(--red-deep)}.prod h3,.vp h2{margin:12px 0 20px;font:clamp(25px,3vw,42px)/1 "Rubik Mono One",sans-serif;letter-spacing:-.04em}.prod h3 em,.vp h2 em{font-style:normal;color:var(--red-deep)}.prod-copy,.vp-desc{color:var(--text);line-height:1.7}.info{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);margin:22px 0}.info div{padding:14px 8px;border-right:1px solid var(--line)}.info div:last-child{border-right:0}.info small{display:block;font-size:var(--fs-label);color:var(--muted);letter-spacing:.12em}.info strong{font-size:var(--fs-cap)}.prod-cta,.vp-cta{display:flex;gap:8px;flex-wrap:wrap}.note{margin-top:12px;font-size:var(--fs-label);letter-spacing:.1em;color:var(--muted)}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.about-img{margin:0;overflow:hidden}.about-img img{width:100%;aspect-ratio:4/5;object-fit:cover}.about-copy p{color:rgba(255,255,255,.66);line-height:1.75}.about-copy .lead{color:white;font:italic 400 22px "Fraunces",serif}
.contact{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:white}.contact-l,.contact-r{padding:clamp(28px,5vw,56px)}.contact-l h2{margin:18px 0;font:clamp(30px,4vw,56px)/.98 "Rubik Mono One",sans-serif}.contact-l h2 em{font-style:normal;color:var(--red-soft)}.contact-l p,.cnote{color:rgba(255,255,255,.65);line-height:1.7}.crow{display:grid;grid-template-columns:80px 1fr auto;gap:12px;padding:20px 0;border-bottom:1px solid var(--line-d);align-items:center}.crow small{font-size:var(--fs-label);letter-spacing:.12em;color:var(--red-soft)}.crow strong{font-size:var(--fs-sm)}
.libhero,.shero{position:relative;padding:calc(82px + 70px) 0 70px;background:var(--ink);color:white;overflow:hidden}.libhero h1,.shero h1{position:relative;margin:20px 0 0;font:clamp(44px,7vw,90px)/.92 "Rubik Mono One",sans-serif}.libhero h1 em,.shero h1 em{font-style:normal;color:var(--red-soft)}.libhero .intro,.shero p{position:relative;color:rgba(255,255,255,.67);line-height:1.75;max-width:650px}.library{padding:50px 0 110px}.libbar{position:sticky;top:82px;z-index:20;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 0;background:rgba(242,236,228,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.libcount{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:transparent;font-size:var(--fs-label);font-weight:800;cursor:pointer}.filter.on{background:var(--ink);color:white}.grid{display:grid;gap:24px;margin-top:34px}.vp{display:grid;grid-template-columns:1fr 1fr;background:var(--ivory);border:1px solid var(--line)}.vp.hidden{display:none}.vp-media{background:var(--ink);padding:20px}.commerce-notice{padding:24px 0;background:var(--ivory);border-bottom:1px solid var(--line)}.commerce-notice .wrap{padding:18px 20px;border:1px solid var(--line)}.commerce-notice strong{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase}.commerce-notice p{margin:8px 0 0;color:var(--text);font-size:var(--fs-cap);line-height:1.7}.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.ctrack{display:flex;width:300%}.cslide{width:33.333%;flex:0 0 33.333%;scroll-snap-align:start}.chint{color:rgba(255,255,255,.42);font-size:var(--fs-label);letter-spacing:.12em;margin-top:9px}
.shero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end}.shero-note{border:1px solid rgba(255,255,255,.15);padding:24px}.shero-note span{display:block;font-size:var(--fs-label);letter-spacing:.14em;color:var(--red-soft)}.shero-note strong{display:block;margin-top:10px;font:22px/1.3 "Fraunces",serif}
.performer-card h2{margin:16px 0;font:clamp(23px,2.4vw,32px)/1 "Rubik Mono One",sans-serif}.pc-price{margin:22px 0;font:32px "Rubik Mono One",sans-serif;color:var(--red-deep)}.pc-price small{display:block;font:8px "Manrope",sans-serif;letter-spacing:.12em;color:var(--muted);margin-top:7px}.performer-card ul{padding-left:18px}.ethics{padding:14px;border-left:3px solid var(--red);background:rgba(191,23,40,.05)}
.form-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:start}.form-contact{display:flex;flex-direction:column;gap:10px;margin-top:26px;color:var(--red-deep);font-weight:700}.casting-form{padding:clamp(24px,4vw,42px);background:var(--ivory);border:1px solid var(--line)}.casting-form label{display:block;font-size:var(--fs-label);font-weight:800;margin-bottom:18px}.casting-form input,.casting-form select,.casting-form textarea{width:100%;margin-top:8px;padding:13px 14px;border:1px solid rgba(13,12,14,.18);background:white;border-radius:0;outline:none}.casting-form input:focus,.casting-form select:focus,.casting-form textarea:focus{border-color:var(--red)}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex!important;gap:10px;align-items:flex-start;font-weight:500!important;line-height:1.5}.check input{width:auto;margin-top:3px}.route-summary{margin:0 0 22px;padding:14px 16px;background:rgba(191,23,40,.055);border-left:3px solid var(--red);font-size:var(--fs-cap);line-height:1.6;color:var(--text)}.form-note{margin-top:16px;color:var(--muted);font-size:var(--fs-label);line-height:1.6}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.foot{background:var(--coal);color:white;padding:58px 0 22px}.foot-grid{display:grid;grid-template-columns:1.25fr repeat(3,.8fr);gap:34px}.foot-brand{font:18px/1 "Rubik Mono One",sans-serif}.foot-brand span{display:block;color:var(--red-soft)}.foot p,.foot-col a,.foot-col span{font-size:var(--fs-cap);line-height:1.7;color:rgba(255,255,255,.6)}.foot-col{display:flex;flex-direction:column;gap:8px}.foot-lbl{color:var(--red-soft)!important;font-size:var(--fs-label)!important;font-weight:800;letter-spacing:.14em}.foot-sub{margin-top:9px;padding-top:10px;border-top:1px solid var(--line-d);font-size:var(--fs-label)!important;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.35)!important}.foot-bot{display:flex;justify-content:space-between;border-top:1px solid var(--line-d);margin-top:38px;padding-top:20px;font-size:var(--fs-label);color:rgba(255,255,255,.45)}
.legal-page{background:var(--paper)}.legal-top{background:var(--ink);color:white}.legal-top .wrap{min-height:82px;display:flex;align-items:center;justify-content:space-between}.legal-brand{font:14px/1 "Rubik Mono One",sans-serif}.legal-brand span{display:block;color:var(--red-soft)}.legal-back{font-size:var(--fs-label)}.legal-main{padding:60px 0 90px}.legal-kicker{font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;color:var(--red-deep)}.legal-main h1{margin:12px 0 20px;font:clamp(32px,5vw,60px)/.98 "Rubik Mono One",sans-serif}.legal-updated{font-size:var(--fs-label);color:var(--muted);margin-bottom:30px}.legal-card{max-width:900px;padding:clamp(24px,4vw,44px);background:var(--ivory);border:1px solid var(--line)}.legal-card h2{margin:28px 0 8px;font-size:var(--fs-lead)}.legal-card h2:first-child{margin-top:0}.legal-card p,.legal-card li{font-size:var(--fs-sm);line-height:1.75;color:var(--text)}.legal-card a{text-decoration:underline}.legal-note{margin:22px 0;padding:15px;border-left:3px solid var(--red);background:rgba(191,23,40,.05)}.legal-contact{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.status-page{min-height:100dvh;display:grid;place-items:center;padding:24px}.status-card{max-width:650px;padding:40px;background:var(--ivory);border:1px solid var(--line)}.status-card h1{margin:30px 0 12px;font:35px "Rubik Mono One",sans-serif}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.rv.in{opacity:1;transform:none}
@media(max-width:900px){.nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--paper);padding:24px 5vw;flex-direction:column;align-items:flex-start}.nav.open{display:flex}.burger{display:grid;place-items:center}.hero-grid,.cred-grid,.manifest-grid,.feature-intro,.prod,.about,.vp,.shero-grid,.form-layout{grid-template-columns:1fr}.hero-proof,.stats,.vision,.routes,.performer-grid,.foot-grid{grid-template-columns:1fr 1fr}.prod:nth-child(even) .prod-media{order:0}.libbar{position:relative;top:auto;align-items:flex-start;flex-direction:column}.form-layout{gap:30px}}
@media(max-width:620px){
  .thread{display:none}

  /* 18+ gate: knoppen gestapeld, volle breedte */
  .gate-card{padding:clamp(26px,7vw,40px)}
  .gate-actions{flex-direction:column}
  .gate-actions .btn{width:100%}

  /* HERO compacter + gecentreerd */
  .head-in{min-height:72px}
  .nav{top:72px}
  .hero{padding:96px 0 52px}
  .hero-copy{text-align:center}
  .hero-tag{display:block}
  .hero-title{font-size:clamp(34px,12vw,52px);margin-top:16px}
  .hero-title .l2{margin-left:0}
  .hero-lead{margin:22px auto 0}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:26px}
  .hero-cta .btn{width:100%}
  .hero-cta .text-link{align-self:center;margin-top:2px}

  /* 4 statistieken onder de hero -> 2x2 */
  .hero-proof{grid-template-columns:1fr 1fr;gap:16px 14px;text-align:center;margin-top:28px}

  /* CP / ATELIER-balk gecentreerd */
  .cred-grid{text-align:center}
  .cred-mark{justify-content:center}
  .cred-link{text-align:center}

  /* "In cijfers" -> nette 2x2 met correcte randen */
  .stats{grid-template-columns:1fr 1fr;margin-top:34px}
  .stat{padding:22px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat:nth-child(even){border-right:0}
  .stat:nth-child(n+3){border-bottom:0}

  /* overige kaartgrids: 1 kolom */
  .vision,.routes,.performer-grid,.foot-grid,.manifest-foot,.form-two{grid-template-columns:1fr}

  .plate{margin-top:22px}
  .info{grid-template-columns:1fr}
  .info div{border-right:0;border-bottom:1px solid var(--line)}
  .info div:last-child{border-bottom:0}
  .contact{grid-template-columns:1fr}
  .crow{grid-template-columns:65px 1fr auto}

  /* video- en performers-opening: compacter + gecentreerd */
  .libhero,.shero{padding-top:112px}
  .libhero h1,.shero h1{font-size:clamp(34px,10vw,52px)}
  .libhero .take,.shero .take{justify-content:center}
  .libhero .wrap,.shero-grid>div:first-child{text-align:center}
  .libhero .intro,.shero p{margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.rv{opacity:1;transform:none;transition:none}.marquee-run{animation:none}}
@media(max-width:900px){
  .portrait-card{width:min(560px,100%);margin-inline:auto}
}
@media(max-width:620px){
  .plate{padding:12px}
  .portrait-head{min-height:54px;padding:4px 6px 12px}
  .portrait-head strong{font-size:var(--fs-lead)}
  .portrait-count{display:none}
  .plate-stage{aspect-ratio:4/4.6}
  .portrait-frame{inset:9px}
  .portrait-nav{min-height:50px}
  .plate-dots button{min-width:27px}
}

/* ==========================================================================
   V12 — CONVERSIE- EN MOTIONLAAG
   Bouwt voort op de Acrylic Red-tokens hierboven. Niets uit V11 is verwijderd.
   ========================================================================== */

:root{
  --rail-h:74px;
  --sheet-z:200;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --- Toegankelijkheidsbodem ------------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:3px;
  border-radius:3px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;
  padding:14px 20px;background:var(--ink);color:#fff;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Filmkorrel: sfeer van een atelier, niet van een template ---------- */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.sec-ink .grain{mix-blend-mode:screen}

/* --- Sluiterreveal: kop wordt onthuld door een rode balk --------------- */
.shutter{position:relative;display:inline-block;overflow:hidden}
.shutter > span{display:inline-block;transform:translateY(102%);transition:transform .8s var(--ease-out)}
.shutter::after{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;
}
.shutter.in > span{transform:none}
.shutter.in::after{animation:wipe .82s var(--ease-out) forwards}
@keyframes wipe{
  0%{transform:scaleX(0);transform-origin:left}
  45%{transform:scaleX(1);transform-origin:left}
  55%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv[data-delay="1"]{transition-delay:.08s}
.rv[data-delay="2"]{transition-delay:.16s}
.rv[data-delay="3"]{transition-delay:.24s}

/* --- Vertrouwensrail: staat direct onder de primaire CTA -------------- */
.trustbar{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line);
}
.trustbar span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.trustbar span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none;
}
.sec-ink .trustbar{border-color:var(--line-d)}
.sec-ink .trustbar span{color:rgba(255,255,255,.62)}

/* --- Tellers ----------------------------------------------------------- */
.counter{font-variant-numeric:tabular-nums}

/* --- Videofaçade: geen 10 iframes tegelijk laden ----------------------- */
.facade{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:#0a090b;border:0;cursor:pointer;display:block;padding:0;
}
.facade img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:.6s var(--ease-out)}
.facade:hover img{opacity:.9;transform:scale(1.03)}
.facade-fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 30% 20%,rgba(191,23,40,.22),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 9px),
    #100e12;
}
.facade-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(13,12,14,.55);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);transition:.3s var(--ease-out);
}
.facade-play::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid #fff;border-block:9px solid transparent;
}
.facade:hover .facade-play{background:var(--red);border-color:var(--red-bright);transform:translate(-50%,-50%) scale(1.08)}
.facade-tag{
  position:absolute;left:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;background:rgba(10,9,11,.72);border:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;color:#fff;text-transform:uppercase;
}
.facade-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--red-bright);
  box-shadow:0 0 0 0 rgba(224,41,63,.6);animation:rec 2s infinite;
}
@keyframes rec{70%{box-shadow:0 0 0 8px rgba(224,41,63,0)}100%{box-shadow:0 0 0 0 rgba(224,41,63,0)}}
.facade-live{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- Prijskaart-details in de productkaart ---------------------------- */
.pricerow{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 4px;
}
.pricerow b{font:clamp(28px,3vw,38px)/1 "Rubik Mono One",sans-serif;letter-spacing:-.04em;color:var(--ink)}
.pricerow small{font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.perminute{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;color:var(--muted)}
.badge-top{
  position:absolute;top:0;right:0;z-index:3;
  padding:8px 14px;background:var(--red);color:#fff;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.vp{position:relative}

/* --- Bibliotheekgereedschap: zoeken + sorteren ------------------------ */
.libtools{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-top:18px;padding:16px 0;border-top:1px solid var(--line);
}
.libsearch{position:relative;flex:1 1 240px;max-width:340px}
.libsearch input{
  width:100%;min-height:46px;padding:0 16px 0 40px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  font-size:var(--fs-sm);
}
.libsearch::before{
  content:"";position:absolute;left:16px;top:50%;width:11px;height:11px;
  margin-top:-7px;border:1.6px solid var(--muted);border-radius:50%;
}
.libsort{display:flex;align-items:center;gap:9px}
.libsort label{font-size:var(--fs-label);font-weight:800;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.libsort select{
  min-height:46px;padding:0 34px 0 14px;background:var(--white);
  border:1px solid var(--line);border-radius:999px;font-size:var(--fs-cap);font-weight:600;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.filter{position:relative}
.filter i{font-style:normal;opacity:.5;margin-left:5px;font-size:.85em}
.libempty{
  display:none;padding:48px 0;text-align:center;
}
.libempty.on{display:block}
.libempty b{display:block;font:italic 400 26px "Fraunces",serif;color:var(--red-deep);margin-bottom:8px}
.libempty p{color:var(--text);margin:0 0 18px}
.vp.hidden{display:none}

/* --- Bundel: de belangrijkste AOV-hefboom ----------------------------- */
.bundle{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(30px,4.4vw,58px);
  background:linear-gradient(145deg,rgba(255,255,255,.05),transparent 45%),var(--ink);
  color:#fff;border:1px solid rgba(191,23,40,.3);
}
.bundle::after{
  content:"";position:absolute;left:-140px;top:38%;width:820px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(224,41,63,.55),#fff,transparent);
  transform:rotate(-9deg);pointer-events:none;
}
.bundle-lbl{font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;color:var(--red-soft);text-transform:uppercase}
.bundle h2{margin:14px 0 0;font:clamp(30px,4.2vw,58px)/.96 "Rubik Mono One",sans-serif;letter-spacing:-.05em}
.bundle h2 em{font-style:normal;color:var(--red-soft)}
.bundle p{margin:18px 0 0;color:rgba(255,255,255,.7);line-height:1.75;font-size:var(--fs-body);max-width:48ch}
.bundle-price{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line-d);
}
.bundle-price b{font:clamp(40px,5vw,66px)/.9 "Rubik Mono One",sans-serif;letter-spacing:-.05em}
.bundle-price s{color:rgba(255,255,255,.42);font-size:var(--fs-body);text-decoration-color:var(--red-bright)}
.bundle-price i{font-style:normal;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;color:var(--red-soft);text-transform:uppercase}
.bundle-list{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:11px}
.bundle-list li{position:relative;padding-left:22px;font-size:var(--fs-cap);color:rgba(255,255,255,.76);line-height:1.55}
.bundle-list li::before{
  content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border:1.5px solid var(--red-bright);
}

/* --- Bezwaarblok (FAQ): vangt de vragen die anders de verkoop kosten -- */
.faq{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font:600 clamp(16px,1.6vw,20px)/1.4 "Manrope",sans-serif;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-9px;
  border-right:1.6px solid var(--red);border-bottom:1.6px solid var(--red);
  transform:rotate(45deg);transition:transform .3s var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-4px}
.faq .fa-body{padding:0 8% 26px 0;color:var(--text);line-height:1.8;font-size:var(--fs-body)}
.faq .fa-body p{margin:0 0 12px}
.faq .fa-body p:last-child{margin:0}

/* --- E-mailvangst: het enige bezit dat geen platform kan afnemen ------ */
.capture{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;
  padding:clamp(28px,4vw,52px);background:var(--white);border:1px solid var(--line);
}
.capture h2{margin:12px 0 0;font:clamp(26px,3.4vw,44px)/1 "Rubik Mono One",sans-serif;letter-spacing:-.05em}
.capture h2 em{font-style:normal;color:var(--red-deep)}
.capture p{margin:16px 0 0;color:var(--text);line-height:1.7;font-size:var(--fs-body)}
.capture-form{display:grid;gap:12px}
.capture-form input[type=email]{
  min-height:56px;padding:0 20px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;font-size:var(--fs-body);
}
.capture-form .check{
  display:flex;gap:11px;align-items:flex-start;
  font-size:var(--fs-cap);color:var(--muted);line-height:1.6;
}
.capture-form .check input{margin-top:3px;accent-color:var(--red)}
.capture-note{font-size:var(--fs-label);color:var(--muted);line-height:1.6}

/* --- SIGNATUUR: de filmrand-bestelrail -------------------------------- */
/* 35mm-perforatie langs de bovenrand, framenummer links, actie rechts.  */
.orderrail{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  transform:translateY(115%);transition:transform .5s var(--ease-out);
  background:rgba(13,12,14,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(191,23,40,.4);
  padding-top:9px;
}
.orderrail.on{transform:none}
.orderrail::before{
  content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background-image:repeating-linear-gradient(90deg,
    rgba(242,236,228,.9) 0 9px, transparent 9px 22px);
  opacity:.5;
}
.orderrail-in{
  min-height:var(--rail-h);display:flex;align-items:center;gap:16px;justify-content:space-between;
}
.orderrail-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.orderrail-frame{font-size:9px;font-weight:800;letter-spacing:.2em;color:var(--red-soft);text-transform:uppercase}
.orderrail-title{
  color:#fff;font:600 14px/1.25 "Manrope",sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.orderrail-title b{color:var(--red-soft);font-weight:800}
.orderrail .btn{flex:none}
.orderrail .btn-solid{background:var(--red);color:#fff;border-color:var(--red-bright)}
.orderrail .btn-solid:hover{background:var(--red-bright)}

/* --- Bestelsheet ------------------------------------------------------ */
.sheet{
  position:fixed;inset:0;z-index:var(--sheet-z);display:grid;place-items:center;padding:20px;
  background:rgba(8,7,9,.78);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:.32s var(--ease-out);
}
.sheet.on{opacity:1;visibility:visible}
.sheet-card{
  width:min(560px,100%);max-height:88vh;overflow:auto;
  padding:clamp(26px,4vw,40px);background:var(--ivory);
  border:1px solid rgba(191,23,40,.3);
  transform:translateY(22px) scale(.985);transition:.4s var(--ease-out);
}
.sheet.on .sheet-card{transform:none}
.sheet-close{
  position:absolute;top:18px;right:18px;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;
  color:#fff;font-size:var(--fs-lead);cursor:pointer;
}
.sheet-kick{font-size:var(--fs-label);font-weight:800;letter-spacing:.22em;color:var(--red-deep);text-transform:uppercase}
.sheet-card h2{margin:12px 0 0;font:clamp(24px,3vw,34px)/1 "Rubik Mono One",sans-serif;letter-spacing:-.045em}
.sheet-card label{display:block;margin-top:18px;font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.sheet-card select{
  width:100%;min-height:52px;margin-top:8px;padding:0 16px;
  background:var(--white);border:1px solid var(--line);font-size:var(--fs-body);font-weight:600;
}
.sheet-lines{margin:20px 0 0;border:1px solid var(--line);background:var(--white)}
.sheet-lines div{
  display:flex;justify-content:space-between;gap:16px;padding:13px 16px;
  border-bottom:1px solid var(--line);font-size:var(--fs-cap);
}
.sheet-lines div:last-child{border-bottom:0}
.sheet-lines dt,.sheet-lines small{color:var(--muted);font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.sheet-lines strong{text-align:right}
.sheet-total{background:var(--ink);color:#fff}
.sheet-total small{color:var(--red-soft)}
.sheet-total strong{font:16px "Rubik Mono One",sans-serif;letter-spacing:-.03em}
.sheet-consent{
  display:flex;gap:11px;align-items:flex-start;margin-top:20px;
  padding:16px;background:rgba(191,23,40,.05);border:1px solid rgba(191,23,40,.18);
  font-size:var(--fs-cap);line-height:1.65;color:var(--text);
}
.sheet-consent input{margin-top:3px;accent-color:var(--red);flex:none}
.sheet-actions{display:grid;gap:10px;margin-top:20px}
.sheet-actions .btn{width:100%}
.sheet-actions .btn[disabled]{opacity:.4;pointer-events:none}
.sheet-fine{margin:16px 0 0;font-size:var(--fs-label);line-height:1.65;color:var(--muted)}
.sheet-fine a{text-decoration:underline;text-decoration-color:var(--red-soft)}

/* --- Magnetische knop (alleen desktop, alleen fijne pointer) ---------- */
@media (hover:hover) and (pointer:fine){
  .btn{will-change:transform}
  .mag{transition:transform .28s var(--ease-out),background .25s var(--ease-out)}
}

/* --- Bestaande kaarten iets strakker ---------------------------------- */
.vp{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
@media (hover:hover){
  .vp:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(13,12,14,.13)}
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width:900px){
  .bundle{grid-template-columns:1fr}
  .capture{grid-template-columns:1fr}
}
@media (max-width:620px){
  .orderrail-in{gap:11px}
  .orderrail .btn{min-height:46px;padding:0 16px;font-size:9px}
  .orderrail-title{font-size:12.5px}
  .libtools{flex-direction:column;align-items:stretch}
  .libsearch{max-width:none}
  .libsort{justify-content:space-between}
  .libsort select{flex:1}
  .faq summary{font-size:var(--fs-body);padding-right:36px}
  .faq .fa-body{padding-right:0}
  .sheet{padding:0;place-items:end stretch}
  .sheet-card{width:100%;max-height:92vh;border-inline:0;border-bottom:0}
  .bundle-price b{font-size:44px}
  /* ruimte voor de bestelrail */
  body.has-rail{padding-bottom:calc(var(--rail-h) + 9px)}
}

/* --- Beweging uit ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .shutter > span{transform:none}
  .shutter::after{display:none}
  .grain{display:none}
}

/* ==========================================================================
   V13 — BEWEGINGSSYSTEEM "DE CAMERA" + MOBIELE PASS
   Eén beeldidee, consequent doorgevoerd: diafragma, filmtransport,
   framenummer, halatie, zoeker. Geen losse effecten.
   Alles animeert op transform / opacity / clip-path.
   ========================================================================== */

@property --iris{ syntax:"<percentage>"; inherits:false; initial-value:0%; }

:root{
  --ease-shutter:cubic-bezier(.65,0,.35,1);
  --ease-lens:cubic-bezier(.16,1,.3,1);
  --t-fast:.28s;
  --t-mid:.55s;
  --t-slow:.9s;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* --- 1. DIAFRAGMA ------------------------------------------------------
   De pagina opent als een lens: een gat in het zwart dat zich uitzet.
   Eén keer per sessie. Daarna wordt het element uit de DOM gehaald. */
.aperture{
  position:fixed;inset:0;z-index:170;background:var(--ink);
  pointer-events:none;--iris:0%;
  -webkit-mask-image:radial-gradient(circle at 50% 44%,transparent var(--iris),#000 calc(var(--iris) + 4%));
  mask-image:radial-gradient(circle at 50% 44%,transparent var(--iris),#000 calc(var(--iris) + 4%));
}
.aperture.open{animation:iris var(--t-slow) var(--ease-shutter) forwards}
@keyframes iris{from{--iris:0%}to{--iris:92%}}
/* Zonder @property-ondersteuning een nette fade in plaats van een blok. */
@supports not (background:linear-gradient(in oklab,red,red)){
  .aperture.open{animation:apfade var(--t-slow) var(--ease-shutter) forwards}
}
@keyframes apfade{to{opacity:0}}

/* --- 2. HERO-TYPOGRAFIE ------------------------------------------------
   Rubik Mono One is te zwaar om als blok in te vliegen. Per letter, met
   lichte scheefstand: het leest als een titel die scherpstelt. */
.hero-title .ltr{
  display:inline-block;
  transform:translateY(.6em) skewY(6deg);
  opacity:0;
  transition:transform .8s var(--ease-lens),opacity .45s linear;
  transition-delay:calc(var(--i) * 34ms + var(--row) * 130ms);
}
.hero-title.lit .ltr{transform:none;opacity:1}

/* --- 3. HALATIE --------------------------------------------------------
   Rood licht dat op donkere secties net iets uitloopt, zoals film doet. */
.sec-ink{position:relative;isolation:isolate}
.sec-ink::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(54% 42% at 16% 6%,rgba(191,23,40,.17),transparent 62%),
    radial-gradient(48% 48% at 90% 94%,rgba(224,41,63,.12),transparent 66%);
  opacity:0;transition:opacity 1.1s var(--ease-lens);
}
.sec-ink.lit::after{opacity:1}

/* --- 4. FILMTRANSPORT --------------------------------------------------
   De marquee is geen decoratie meer maar een snelheidsmeter: hij loopt
   mee met hoe snel je scrolt. */
.marquee{transform:skewY(var(--mq-skew,0deg));transition:transform .55s var(--ease-lens)}
.marquee.driven .marquee-run{animation:none;will-change:transform}

/* --- 5. SCRIPTLEZING ---------------------------------------------------
   Het manifest wordt woord voor woord zichtbaar terwijl je erlangs scrolt. */
.readout .w{opacity:.16;transition:opacity .3s linear}
.readout .w.on{opacity:1}

/* --- 6. KAARTEN: kanteling + lichtstreek ------------------------------- */
@media (hover:hover) and (pointer:fine){
  .vp,.prod{
    transition:transform var(--t-mid) var(--ease-lens),box-shadow var(--t-mid) var(--ease-lens);
  }
  .vp::after,.prod::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.42) 50%,transparent 60%);
    opacity:0;transform:translateX(-28%);
    transition:opacity .35s linear,transform .85s var(--ease-lens);
  }
  .vp:hover::after,.prod:hover::after{opacity:.55;transform:translateX(28%)}
  .vp:hover,.prod:hover{
    transform:perspective(1200px)
      rotateX(calc(var(--ty,0) * -2deg))
      rotateY(calc(var(--tx,0) * 2.4deg))
      translateY(-5px);
    box-shadow:0 32px 74px rgba(13,12,14,.16);
  }
}
.prod{position:relative}

/* --- 7. ZOEKER ---------------------------------------------------------
   Op donkere secties volgt een kaderzoeker de muis: vier hoeken en een
   punt. Het is een camera, geen game-cursor. */
.finder{
  position:fixed;left:0;top:0;z-index:75;width:44px;height:44px;
  margin:-22px 0 0 -22px;pointer-events:none;opacity:0;
  transform:translate3d(-200px,-200px,0);
  transition:opacity .3s linear;
}
.finder.on{opacity:1}
.finder i{position:absolute;width:10px;height:10px;border:1.5px solid var(--red-soft)}
.finder i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.finder i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.finder i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.finder i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.finder::after{
  content:"";position:absolute;top:50%;left:50%;
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:var(--red-bright);
}

/* --- 8. PARALLAX -------------------------------------------------------- */
.par{will-change:transform}

/* --- 9. FRAMETELLER IN DE BESTELRAIL ------------------------------------
   De rail toont welk deel van de pagina je bekijkt. Het signatuurelement
   is daarmee niet alleen een knop maar ook een positiemeter. */
.orderrail-frame{display:flex;align-items:center;gap:10px}
.frame-num{
  display:inline-block;min-width:3.4em;color:#fff;
  font-variant-numeric:tabular-nums;
  transition:opacity .16s linear,filter .16s linear;
}
.frame-num.flip{opacity:0;filter:blur(3px)}
.frame-track{display:inline-flex;gap:3px;align-items:center}
.frame-track s{
  width:6px;height:6px;text-decoration:none;flex:none;
  border:1px solid rgba(244,200,206,.4);
  transition:background .25s var(--ease-lens),border-color .25s var(--ease-lens);
}
.frame-track s.on{background:var(--red-bright);border-color:var(--red-bright)}

/* --- 10. BESTELSHEET OPENT ALS EEN DIAFRAGMA ---------------------------- */
.sheet{
  clip-path:circle(0% at var(--ox,50%) var(--oy,50%));
  transition:clip-path .6s var(--ease-shutter),opacity .28s linear,visibility .28s;
}
.sheet.on{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
body.sheet-open{overflow:hidden}

/* --- 11. RASTEROVERGANG ------------------------------------------------- */
.vp.moving{z-index:2}

/* --- 12. PAGINAOVERGANG ------------------------------------------------- */
@view-transition{navigation:auto}
.brand{view-transition-name:cp-brand}
::view-transition-old(root){animation:vtOut .28s var(--ease-shutter) both}
::view-transition-new(root){animation:vtIn .42s var(--ease-lens) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(9px)}}

/* --- 13. VOORTGANG ALS FILMPERFORATIE ----------------------------------- */
.progress{height:3px}
.progress::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 3px,transparent 3px 11px);
  opacity:.55;
}

/* --- 14. KNOPPEN -------------------------------------------------------- */
.btn .arw{display:inline-block;transition:transform .3s var(--ease-lens)}
.btn:hover .arw{transform:translateX(4px)}
.facade-fallback{transition:transform .85s var(--ease-lens)}
.facade:hover .facade-fallback{transform:scale(1.05)}


/* ==========================================================================
   MOBIELE PASS — alles onder 900px opnieuw nagelopen op de V12-onderdelen
   ========================================================================== */

@media (max-width:900px){

  /* Filterchips scrollen horizontaal in plaats van te wrappen; de rij
     blijft één regel hoog en is met de duim te bedienen. */
  .libbar{gap:14px}
  .filters{
    display:flex;flex-wrap:nowrap;gap:8px;width:100%;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none;scroll-snap-align:start;min-height:44px}

  /* Prijs eerst: op een klein scherm moet €89 boven de opsomming staan. */
  .bundle > div:last-child{order:-1}
  .bundle-price{padding-bottom:14px}

  .capture{gap:26px}
}

@media (max-width:620px){

  /* --- Bestelrail: mag nooit onder de iPhone-homebalk vallen --- */
  .orderrail{padding-bottom:var(--safe-b)}
  body.has-rail{padding-bottom:calc(var(--rail-h) + 9px + var(--safe-b))}
  .orderrail-in{gap:10px;min-height:66px}
  .orderrail .btn{min-height:46px;padding:0 15px;font-size:9px}
  .orderrail-title{font-size:12px}
  .orderrail-frame{font-size:8px;gap:7px}
  .frame-track s{width:5px;height:5px}

  /* --- Bestelsheet als echte bottom sheet met greep --- */
  .sheet{padding:0;place-items:end stretch;clip-path:none}
  .sheet.on{clip-path:none}
  .sheet-card{
    width:100%;max-height:86dvh;
    padding:26px 20px calc(26px + var(--safe-b));
    border-inline:0;border-bottom:0;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
    transition:transform .42s var(--ease-lens);
    overscroll-behavior:contain;
  }
  .sheet.on .sheet-card{transform:none}
  .sheet-card::before{
    content:"";display:block;width:42px;height:4px;margin:-8px auto 18px;
    border-radius:999px;background:rgba(13,12,14,.18);
  }
  .sheet-close{
    top:auto;bottom:calc(86dvh + 14px);right:16px;
    width:40px;height:40px;font-size:var(--fs-body);
  }
  .sheet-card select{min-height:54px}
  .sheet-consent{font-size:var(--fs-cap);padding:14px}
  .sheet-actions .btn{min-height:54px}

  /* --- Volledige-schermhoogte klopt ook met de iOS-adresbalk --- */
  .gate{min-height:100dvh}

  /* --- Zoeken/sorteren --- */
  .libtools{flex-direction:column;align-items:stretch;gap:10px;padding:14px 0}
  .libsearch{max-width:none}
  .libsearch input{min-height:50px}
  .libsort{justify-content:space-between;gap:12px}
  .libsort select{flex:1;min-height:50px;background-position:calc(100% - 18px) 23px,calc(100% - 13px) 23px}

  /* --- Productkaarten: knoppen gestapeld op volle breedte --- */
  .vp-cta,.prod-cta{flex-direction:column;align-items:stretch;gap:10px}
  .vp-cta .btn,.prod-cta .btn{width:100%}
  .pricerow{margin:14px 0 2px}
  .pricerow b{font-size:30px}
  .badge-top{padding:6px 10px;font-size:var(--fs-label)}
  .facade-play{width:54px;height:54px}
  .facade-play::after{border-left-width:13px;border-block-width:8px}

  /* --- Voorproefjescarrousel met snap --- */
  .carousel{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .cslide{scroll-snap-align:center}

  /* --- Bundel --- */
  .bundle{padding:26px 20px}
  .bundle-price{flex-wrap:wrap;gap:10px}
  .bundle-price b{font-size:46px}
  .bundle h2{font-size:clamp(26px,9vw,38px)}
  .bundle-list li{font-size:var(--fs-cap)}
  .bundle .btn{width:100%}

  /* --- Vragen --- */
  .faq summary{font-size:var(--fs-body);padding:20px 38px 20px 0;min-height:48px}
  .faq .fa-body{padding:0 0 22px;font-size:var(--fs-sm)}

  /* --- E-maillijst --- */
  .capture{padding:26px 20px;text-align:center}
  .capture h2{font-size:clamp(24px,8.5vw,34px)}
  .capture-form{text-align:left}
  .capture-form input[type=email]{min-height:54px}
  .capture-form .btn{width:100%}

  /* --- Vertrouwensrail gecentreerd onder de hero --- */
  .hero .trustbar,.libhero .trustbar{justify-content:center;gap:8px 16px}
  .trustbar span{font-size:var(--fs-label)}

  /* --- Bewegingen die op mobiel niets toevoegen of janken --- */
  .marquee{transform:none}
  .finder{display:none}
  .grain{opacity:.04}
  .hero-title .ltr{transition-delay:calc(var(--i) * 22ms + var(--row) * 90ms)}
}

/* Zeer smalle toestellen (SE-formaat) */
@media (max-width:380px){
  .orderrail-title{font-size:11px}
  .orderrail .btn{padding:0 12px}
  .bundle-price b{font-size:40px}
  .pricerow b{font-size:27px}
}

/* --- Alles uit ----------------------------------------------------------
   Niet "minder beweging" maar geen beweging: de pagina moet ook volledig
   stil leesbaar en bruikbaar zijn. */
@media (prefers-reduced-motion:reduce){
  .aperture{display:none}
  .hero-title .ltr{transform:none;opacity:1;transition:none}
  .sec-ink::after{opacity:1}
  .readout .w{opacity:1}
  .finder{display:none}
  .marquee{transform:none}
  .sheet{clip-path:none;transition:opacity .15s linear,visibility .15s}
  .sheet.on{clip-path:none}
  .sheet-card{transform:none!important}
  .vp::after,.prod::after{display:none}
  .vp:hover,.prod:hover{transform:none}
}
@media (pointer:coarse){
  .finder{display:none}
  .vp:hover,.prod:hover{transform:none;box-shadow:none}
}

/* --- Parallaxdoelen: het beeld moet iets groter zijn dan zijn kader,
   anders loopt de rand mee. --- */
.about-img img.par{scale:1.09}
.plate{overflow:hidden}

/* De schuine lichtlijnen zijn breder dan een telefoonscherm; hun ouder moet
   ze dus insluiten, anders ontstaat er horizontale scroll. */
.hero,.libhero,.bundle{overflow:hidden}

/* ==========================================================================
   V14 — ONTWERPSYSTEEM
   Tot nu toe stond in dit bestand bij elk onderdeel een eigen, met de hand
   gekozen grootte, ruimte en lijnkleur. Dat werkt, maar het schaalt niet en
   je ziet het: maten die net niet familie van elkaar zijn.
   Hieronder komt er één systeem onder te liggen. De merkrichting verandert
   niet — antraciet, ivoor, acrylic red, Rubik Mono One — alleen de maatvoering
   wordt consequent.
   ========================================================================== */

:root{

  /* --- Typografische schaal -------------------------------------------
     Modulair, verhouding ~1,25 op telefoon en ~1,33 op desktop, vloeiend
     met clamp() zodat er geen sprongen bij breekpunten zitten. Elke maat
     is afgeleid van dezelfde basis in plaats van los gekozen. */
  --fs-label : clamp(.625rem, .60rem + .10vw, .6875rem);   /* 10 → 11 */
  --fs-cap   : clamp(.75rem,  .72rem + .12vw, .8125rem);   /* 12 → 13 */
  --fs-sm    : clamp(.8125rem,.78rem + .15vw, .875rem);    /* 13 → 14 */
  --fs-body  : clamp(1rem,    .96rem + .20vw, 1.0625rem);  /* 16 → 17 */
  --fs-lead  : clamp(1.0625rem,1rem  + .35vw, 1.1875rem);  /* 17 → 19 */
  --fs-h3    : clamp(1.25rem, 1.10rem + .70vw, 1.5rem);
  --fs-h2    : clamp(1.75rem, 1.40rem + 1.8vw, 2.75rem);
  --fs-disp  : clamp(2.25rem, 1.40rem + 4.4vw, 5rem);
  --fs-hero  : clamp(2.6rem,  1.50rem + 5.6vw, 6.25rem);

  --lh-tight : .92;
  --lh-head  : 1.08;
  --lh-body  : 1.7;
  --lh-lead  : 1.62;

  --track-label: .16em;
  --track-disp : -.05em;

  --measure    : 66ch;   /* leesbare regellengte, ~66 tekens */
  --measure-sm : 52ch;

  /* --- Ruimteschaal ----------------------------------------------------
     Uitgelijnd op een 8pt-raster aan beide uiteinden. Alles wat verticaal
     ritme maakt komt hieruit, zodat afstanden niet meer per component
     uiteenlopen. */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem;
  --s-6:3rem;
  --s-7:clamp(3.5rem, 6vw, 5rem);
  --s-8:clamp(4.5rem, 9vw, 8.5rem);

  /* --- Hoeken en hoogte ------------------------------------------------
     Het atelier is filmisch: vlakken zijn scherp als een filmframe, alleen
     bedieningselementen zijn rond. Eén regel, geen uitzonderingen meer. */
  --r-0:0;
  --r-1:3px;
  --r-2:12px;
  --r-pill:999px;

  --e-1:0 2px 8px color-mix(in oklab, var(--ink) 8%, transparent);
  --e-2:0 26px 60px color-mix(in oklab, var(--ink) 13%, transparent);
  --e-3:0 38px 90px color-mix(in oklab, var(--ink) 18%, transparent);

  /* --- Afgeleide kleur -------------------------------------------------
     De lijnen en tinten waren met de hand gekozen rgba-waarden. Nu worden
     ze in oklab uit de merkkleuren gemengd: perceptueel gelijkmatig, en
     ze blijven kloppen als je ooit een merkkleur bijstelt. */
  --line     : color-mix(in oklab, var(--ink) 12%, transparent);
  --line-soft: color-mix(in oklab, var(--ink) 7%,  transparent);
  --line-d   : color-mix(in oklab, var(--white) 13%, transparent);
  --tint-red : color-mix(in oklab, var(--red) 6%, transparent);
  --edge-red : color-mix(in oklab, var(--red) 28%, transparent);
}

/* --- Basiszetwerk --------------------------------------------------------
   Kleine dingen die je niet los aanwijst maar wel voelt: geen weesregels
   in koppen, geen wees-woord onderaan een alinea, cijfers die onder elkaar
   staan, en optische maatvoering van de variabele letters. */
body{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"clig" 1;
}
h1,h2,h3,.head-xl,.hero-title{ text-wrap:balance }
p,li,dd{ text-wrap:pretty }
p{ max-width:var(--measure) }

/* Cijfers in tabelvorm: prijzen, duren en tellers springen anders zichtbaar
   in breedte zodra een cijfer verandert. */
.pricerow b,.bundle-price b,.stat b,.hero-proof b,.info strong,
.counter,.frame-num,.pc-price,.sheet-total strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Fraunces heeft een optische-grootte-as. Op grote maat mag het contrast
   hoger; op kleine maat juist niet. */
.take b,.gate-card h2,.cred-line em,.libempty b,.hero-lead .em{
  font-optical-sizing:auto;
}

/* --- Labels: één definitie in plaats van tien ---------------------------
   Overal stonden losse 8px- en 9px-labels met net iets andere spatiëring.
   Nu één maat, iets groter voor leesbaarheid, met dezelfde letterafstand. */
.take,.hero-tag,.gate-eyebrow,.foot-lbl,.kick,.pc-label,.bundle-lbl,
.sheet-kick,.legal-kicker,.portrait-kicker,.orderrail-frame,
.trustbar span,.filter,.note,.libcount,.facade-tag,.badge-top{
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  font-weight:800;
  text-transform:uppercase;
}
.info small,.sheet-lines small,.stat span,.hero-proof span{
  font-size:var(--fs-label);
  letter-spacing:.1em;
}

/* --- Koppen op de nieuwe schaal ---------------------------------------- */
.hero-title{ font-size:var(--fs-hero); line-height:var(--lh-tight); letter-spacing:var(--track-disp) }
.head-xl,.libhero h1,.shero h1{ font-size:var(--fs-disp); line-height:var(--lh-tight); letter-spacing:var(--track-disp) }
.bundle h2,.capture h2,.sheet-card h2{ font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:-.045em }
.vp-body h2,.prod-body h3,.route h3,.faq summary{ font-size:var(--fs-h3); line-height:1.22 }
.intro,.hero-lead,.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); max-width:var(--measure) }
.vp-desc,.prod-copy,.route p,.bundle p,.capture p,.fa-body{ font-size:var(--fs-sm); line-height:var(--lh-body) }

/* --- Verticaal ritme ----------------------------------------------------
   Alle secties op dezelfde maat, zodat het scrollritme klopt. */
.sec{ padding-block:var(--s-8) }
.head-xl{ margin-block:var(--s-4) 0 }
.intro{ margin-block:var(--s-4) 0 }
.trustbar{ margin-top:var(--s-4); padding-top:var(--s-3); gap:var(--s-2) var(--s-5) }
.faq{ margin-top:var(--s-5) }

/* --- Hoeken consequent -------------------------------------------------- */
.btn,.nav-cta,.libsearch input,.libsort select,.burger{ border-radius:var(--r-pill) }
.vp,.prod,.bundle,.capture,.gate-card,.sheet-lines,.legal-card,.performer-card{ border-radius:var(--r-1) }

/* --- Kaarten: de knop hoort onderaan te staan ---------------------------
   Bij verschillende tekstlengtes zweefden de bestelknoppen op verschillende
   hoogtes. Dat is het duidelijkste teken van een layout die niet is
   nagelopen. De body is nu een kolom en het knoppenblok wordt naar beneden
   geduwd, zodat de knoppen van twee kaarten naast elkaar uitlijnen. */
.vp-body,.prod-body{ display:flex; flex-direction:column; gap:var(--s-2) }
.vp-body .info,.prod-body .info{ margin-top:auto }
.vp-cta,.prod-cta{ margin-top:0 }
.vp-desc,.prod-copy{ max-width:var(--measure-sm) }

/* --- Container queries --------------------------------------------------
   De kaart reageerde op de breedte van het schérm. Nu op haar eigen
   breedte. Zet je de videotheek ooit in drie kolommen of in een smallere
   zijkolom, dan klapt de kaart vanzelf om zonder nieuwe breekpunten. */
.vp-slot,.prod-slot{ container-type:inline-size }
@container (max-width:560px){
  .vp,.prod{ grid-template-columns:1fr }
  .vp-body,.prod-body{ padding-top:var(--s-4) }
}
@container (min-width:900px){
  .vp-body,.prod-body{ gap:var(--s-3) }
}

/* --- Subgrid ------------------------------------------------------------
   De drie routekaarten hadden elk hun eigen interne hoogtes, waardoor
   koppen en knoppen onderling verschoven. Met subgrid delen ze de rijen
   van hun ouder en lijnen ze regel voor regel uit. */
.routes{ grid-template-rows:repeat(5,auto) }
.routes .route{
  grid-row:span 5;
  display:grid;
  grid-template-rows:subgrid;
  align-content:start;
  gap:var(--s-2);
}
.routes .route > .btn{ align-self:end; justify-self:start }

/* --- :has() -------------------------------------------------------------
   Structurele correcties die vroeger een extra klasse in de HTML kostten. */
.vp:has(.badge-top) .vp-top{ padding-right:8.5rem }
.libbar:has(.filter.on:not([data-filter="alles"])) .libcount{ color:var(--red-deep) }
.sheet:has(#sheetConsent:checked) .sheet-consent{
  background:transparent;
  border-color:var(--line);
}
.capture-form:has(input:invalid:not(:placeholder-shown)) .btn{ opacity:.55 }
.faq details:has(+ details[open]){ border-bottom-color:var(--edge-red) }

/* --- Optische uitlijning ------------------------------------------------
   Rubik Mono One draagt veel loze ruimte boven en onder de letters mee.
   text-box-trim haalt die weg, zodat een grote kop echt op de lijn staat
   waar hij hoort in plaats van er iets boven te zweven. */
@supports (text-box-trim: trim-both){
  .hero-title,.head-xl,.bundle h2,.libhero h1,.shero h1{
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
}

/* --- Randen en hoogte consequent ---------------------------------------- */
.plate{ box-shadow:var(--e-3) }
.sec-ivory{ border-block:1px solid var(--line-soft) }
.legal-card,.capture{ box-shadow:var(--e-1) }

@media (hover:hover) and (pointer:fine){
  .vp:hover,.prod:hover{ box-shadow:var(--e-2) }
}

/* --- Mobiel: de schaal doet het meeste werk al ---------------------------
   Wat overblijft zijn maten die op een telefoon anders moeten liggen dan
   alleen kleiner. */
@media (max-width:620px){
  .sec{ padding-block:var(--s-7) }
  p{ max-width:none }
  .vp-desc,.prod-copy{ max-width:none }
  .routes{ grid-template-rows:none }
  .routes .route{ grid-row:auto; display:block }
  .routes .route > .btn{ margin-top:var(--s-3) }
  .vp:has(.badge-top) .vp-top{ padding-right:6.5rem }
}

/* Het rasteritem is sinds V14 het container-slot; verbergen moet daar
   gebeuren, anders houdt een lege cel zijn plek in het raster. */
.vp-slot.hidden,.prod-slot.hidden{display:none}
.vp-slot.moving,.prod-slot.moving{z-index:2}