/* ---- behind the scenes, what we make, FAQ, the brief, the end card ---- */
.mono{font-family:Mono}
.pill2{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:12px;padding:7px 20px 7px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.14);cursor:pointer;color:#FFF3E2;font:600 14px/1 SG;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 10px 30px rgba(0,0,0,.4);transition:box-shadow .3s,border-color .3s}
.pill2:hover{border-color:rgba(224,102,31,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 30px rgba(224,102,31,.3)}
.pill2 .pd{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);box-shadow:0 0 16px rgba(224,102,31,.6)}
.pill2 svg{width:11px;height:12px;margin-left:2px;fill:#FFF3E2}

/* ===== SC.06 behind the scenes: a strip of 35mm negative that rolls past as you scroll; a loupe over the frames ===== */
.bts2{padding:0}
.bts2-pin{position:relative;height:240vh}
.bts2-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:4vh;overflow:hidden;padding-top:60px}
.bts2-head{display:flex;justify-content:space-between;align-items:end;gap:30px}
.strip-view{position:relative}
.strip{position:relative;display:flex;flex-direction:column;width:max-content;padding:0 6vw;will-change:transform;
  background:linear-gradient(180deg,#1d1109,#2a170b 50%,#1d1109);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,190,120,.12)}
.edge{height:40px;display:flex;align-items:center;gap:0;position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='40'%3E%3Crect x='14' y='13' width='18' height='14' rx='3' fill='%23f3e4cc' fill-opacity='.9'/%3E%3C/svg%3E") 0 0/46px 40px repeat-x}
.edge span{position:relative;top:17px;font:400 9px/1 Mono;letter-spacing:.2em;color:#FF9A4A;margin-right:calc(46px * 3 - 8px);white-space:nowrap;text-shadow:0 0 6px rgba(255,120,40,.5)}
.edge:first-child span{top:-16px}
.frames{display:flex;gap:26px;padding:10px 0}
.fr{position:relative;margin:0;height:min(44vh,440px);aspect-ratio:3/2;border-radius:3px;overflow:hidden;background:#0c0806;box-shadow:0 0 0 2px #120a05}
.fr.real{cursor:zoom-in}
.fr.real img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(.95) sepia(.08)}
.fr figcaption{position:absolute;left:10px;bottom:10px;font:400 10px/1 Mono;letter-spacing:.16em;color:#FFF3E2;background:rgba(0,0,0,.55);padding:5px 8px;border-radius:4px}
.fr.empty{display:grid;place-content:center;text-align:center;gap:10px;background:repeating-linear-gradient(45deg,rgba(255,243,226,.025) 0 12px,transparent 12px 24px),radial-gradient(closest-side,#20150d,#0c0806)}
.fr.empty span{font:400 clamp(40px,5vw,72px)/1 Anton;color:rgba(255,243,226,.16)}
.fr.empty small{font:400 10px/1 Mono;letter-spacing:.24em;color:rgba(255,154,74,.55)}
.loupe{position:absolute;left:0;top:0;width:210px;height:210px;margin:-105px 0 0 -105px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s var(--ease);
  background:#000 no-repeat;border:2px solid rgba(255,243,226,.85);box-shadow:0 0 0 6px rgba(20,14,10,.55),0 0 0 7px rgba(255,243,226,.25),0 20px 60px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.45)}
.loupe.on{opacity:1;transform:none}
.loupe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),transparent 45%)}
.strip-foot{font:400 10px/1 Mono;letter-spacing:.22em;color:rgba(239,225,198,.4)}

/* ===== SC.07 what we make: a cinema camera's menu, the monitor shows the mode ===== */
.make2-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:5vh}
.make2-head .mono{font-size:11px;letter-spacing:.26em;color:var(--accent)}
.cam{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:16px;padding:16px}
.menu{display:flex;flex-direction:column;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);padding:10px;font-family:Mono}
.menu-h,.menu-f{display:flex;justify-content:space-between;padding:10px 12px;font-size:10px;letter-spacing:.2em;color:rgba(239,225,198,.5)}
.menu-h{border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px}.menu-f{margin-top:auto;border-top:1px solid rgba(255,255,255,.07)}
.mi{position:relative;display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:10px;padding:16px 14px;border:0;border-radius:8px;background:none;cursor:pointer;text-align:left;color:rgba(239,225,198,.7)}
.mi .n{font:400 11px/1 Mono;letter-spacing:.14em;color:rgba(239,225,198,.4)}
.mi .t{font:600 16px/1.2 SG;color:inherit}
.mi .v{font:400 18px/1 SG;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.mi::before{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(90deg,rgba(224,102,31,.34),rgba(224,102,31,.08));border:1px solid rgba(255,150,80,.55);box-shadow:0 0 20px rgba(224,102,31,.25);opacity:0;transform:scaleX(.96);transition:opacity .25s,transform .3s var(--ease)}
.mi.on{color:#FFF3E2}.mi.on::before{opacity:1;transform:none}.mi.on .n{color:#FFB070}.mi.on .v{opacity:1;transform:none}
.mi>span{position:relative}
.mview{position:relative;border-radius:12px;overflow:hidden;min-height:440px;background:#050404;border:1px solid rgba(255,255,255,.06)}
.mv-media{position:absolute;inset:0}
.mv-media i{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:0;transform:scale(1.08);transition:opacity .9s,transform 5s linear}
.mv-media i.on{opacity:1;transform:scale(1)}
/* editing and color: the same frame, flat on the left, graded on the right, the wipe sweeping between */
.mv-media i span{position:absolute;inset:0;background:inherit}
.mv-media i .raw{filter:saturate(.3) contrast(.72) brightness(1.12)}
.mv-media i .gd{clip-path:inset(0 0 0 var(--wx,50%));filter:saturate(1.15) contrast(1.06)}
.mv-media i .wl{position:absolute;top:0;bottom:0;left:var(--wx,50%);width:2px;margin-left:-1px;background:#FFF3E2;box-shadow:0 0 12px rgba(255,243,226,.8)}
.mv-media i .lb{position:absolute;z-index:1;top:52px;font:400 10px/1 Mono;font-style:normal;letter-spacing:.2em;color:#FFF3E2;background:rgba(0,0,0,.5);padding:5px 7px;border-radius:4px}
.mv-media i .lb.l{left:22px}.mv-media i .lb.r{right:22px;color:#FFB070}
.mv-media.grade{animation:wipe 3.2s ease-in-out infinite alternate}
.mview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,4,4,.45),rgba(5,4,4,.05) 35%,rgba(5,4,4,.35) 60%,rgba(5,4,4,.92));pointer-events:none}
.mvc{position:absolute;z-index:2;width:22px;height:22px;border:1.5px solid rgba(239,225,198,.6)}
.mvc.tl{left:16px;top:16px;border-right:0;border-bottom:0}.mvc.tr{right:16px;top:16px;border-left:0;border-bottom:0}.mvc.bl{left:16px;bottom:16px;border-right:0;border-top:0}.mvc.br{right:16px;bottom:16px;border-left:0;border-top:0}
.mv-ui{position:absolute;z-index:2;left:48px;right:48px;top:21px;display:flex;justify-content:space-between;font:400 10px/1 Mono;letter-spacing:.18em;color:rgba(239,225,198,.8)}
.mv-copy{position:absolute;z-index:2;left:40px;right:40px;bottom:36px}
.mv-t{margin:0;font:800 clamp(28px,3vw,46px)/1 BSD;color:#FFF3E2;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.mv-d{margin:12px 0 0;font:600 16px/1.5 SG;color:rgba(239,225,198,.82);max-width:520px}
.mv-cta{display:flex;gap:24px;margin-top:20px}
.mv-cta a,.mv-cta button{font:600 14px/1 SG;color:#FFB070;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.mv-cta a:hover,.mv-cta button:hover{color:#FFF3E2}
.mv-copy.swap{animation:mvswap .6s var(--ease)}
@keyframes mvswap{from{opacity:0;transform:translateY(10px);filter:blur(6px)}}

/* ===== SC.08 FAQ: questions as subtitle cues, the answer plays as subtitles ===== */
.faq2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
.cues{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.qcue{width:100%;display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center;padding:17px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:none;cursor:pointer;text-align:left;color:rgba(239,225,198,.72);transition:color .25s,background .25s}
.qcue .tc{font:400 11px/1 Mono;letter-spacing:.1em;color:rgba(239,225,198,.38)}
.qcue .q{font:600 17px/1.3 SG}
.qcue:hover{color:#FFF3E2}
.qcue[aria-expanded="true"]{color:#FFF3E2;background:linear-gradient(90deg,rgba(224,102,31,.14),transparent)}
.qcue[aria-expanded="true"] .tc{color:var(--accent)}
.ans{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* read by screen readers; shown as subtitles */
.screen{position:sticky;top:110px;aspect-ratio:2.39/1.35;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.06)}
.scr-bg{position:absolute;inset:0}
.scr-bg i{position:absolute;inset:-4%;background:#000 center/cover no-repeat;opacity:0;filter:blur(3px) brightness(.45) saturate(.8);transition:opacity 1s;transform:scale(1.04)}
.scr-bg i.on{opacity:1}
.screen .bar{position:absolute;left:0;right:0;height:13%;background:#000;z-index:1}.screen .bar.t{top:0}.screen .bar.b{bottom:0}
.scr-ui{position:absolute;z-index:2;left:16px;right:16px;top:12px;display:flex;justify-content:space-between;font:400 10px/1 Mono;letter-spacing:.18em;color:rgba(239,225,198,.55)}
.sub{position:absolute;z-index:2;left:8%;right:8%;bottom:17%;text-align:center}
.sub .sq{margin:0 0 12px;font:400 11px/1 Mono;letter-spacing:.22em;color:#FFB070}
.sub .sl{display:block;margin:4px auto 0;width:fit-content;max-width:100%;padding:3px 10px;font:600 clamp(15px,1.45vw,21px)/1.35 SG;color:#FFF7E6;background:rgba(0,0,0,.55);border-radius:3px;text-shadow:0 1px 2px #000;
  opacity:0;transform:translateY(6px);animation:subin .45s var(--ease) forwards;animation-delay:calc(var(--k) * .7s + .15s)}
@keyframes subin{to{opacity:1;transform:none}}

/* ===== SC.09 the brief: a clapperboard; the yak's hologram next to it ===== */
.brief2{padding-bottom:12vh}
.brief2-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,80px);align-items:center}
.slate{position:relative;margin-top:56px;padding-top:62px}
.clap{position:absolute;left:0;right:0;top:0;height:62px}
.clap i{position:absolute;left:0;right:0;height:30px;border-radius:5px;overflow:hidden}
.clap .top{bottom:0;background:#0d0c0c;border:1px solid rgba(255,255,255,.1)}
.clap .arm{top:6px;transform-origin:0 100%;transform:rotate(-6deg);transition:transform .16s cubic-bezier(.6,0,.9,.4);background:#0d0c0c;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.clap b{position:absolute;inset:0;background:repeating-linear-gradient(115deg,#F2E6D0 0 30px,#0d0c0c 30px 60px,#E0661F 60px 90px,#0d0c0c 90px 120px)}
.clap .hinge{left:6px;right:auto;width:22px;height:22px;top:26px;border-radius:50%;background:radial-gradient(circle,#bbb 0 3px,#555 4px,#222 70%);z-index:2}
.slate.clapped .arm{transform:none}
.slate-body{display:grid;grid-template-columns:1fr 1fr;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#141312,#0c0b0b);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.55)}
.slate-row{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-bottom:1px solid rgba(242,230,208,.18)}
.slate-row span{padding:12px 14px;font:400 10px/1 Mono;letter-spacing:.18em;color:rgba(242,230,208,.5);border-right:1px solid rgba(242,230,208,.18)}
.slate-row span:last-child{border-right:0}
.slate-row b{display:block;margin-top:6px;font:400 20px/1 Anton;letter-spacing:.04em;color:#F2E6D0}
.sf{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid rgba(242,230,208,.12);border-right:1px solid rgba(242,230,208,.12)}
.sf:nth-of-type(even){border-right:0}
.sf.full{grid-column:1/-1;border-right:0}
.sf label{font:400 10px/1 Mono;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,230,208,.55)}
.sf input,.sf select,.sf textarea{width:100%;border:0;border-bottom:1px dashed rgba(242,230,208,.25);background:transparent;color:#FFF7E6;font:600 16px/1.4 SG;padding:4px 0 6px;outline:none;border-radius:0;resize:vertical}
.sf select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23E0661F'/%3E%3C/svg%3E") right 4px center no-repeat}
.sf select option{background:#141210;color:#FFF7E6}
.sf input::placeholder,.sf textarea::placeholder{color:rgba(242,230,208,.3)}
.sf input:focus,.sf select:focus,.sf textarea:focus{border-bottom:1px solid var(--accent)}
.sf.bad label{color:#FF8A6A}.sf.bad input,.sf.bad select{border-bottom-color:#FF6B57}
.send2{display:flex;align-items:center;gap:20px;padding:18px 16px;flex-wrap:wrap}
.send2 p{margin:0;flex:1;min-width:200px;font:400 11px/1.5 Mono;letter-spacing:.08em;color:rgba(242,230,208,.45)}
.clapbtn{padding:15px 26px;border-radius:999px;border:0;cursor:pointer;font:600 15px/1 SG;color:#1a0f08;background:linear-gradient(180deg,#F08A45,#E0661F);box-shadow:0 0 0 1px rgba(255,200,150,.4) inset,0 10px 30px rgba(224,102,31,.4);transition:transform .15s,box-shadow .3s}
.clapbtn:hover{box-shadow:0 0 0 1px rgba(255,200,150,.6) inset,0 0 40px rgba(224,102,31,.65)}
.clapbtn:active{transform:scale(.97)}
.wrapstamp{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) rotate(-8deg) scale(1.6);padding:14px 26px;border:3px solid var(--accent);border-radius:8px;font:400 clamp(30px,4vw,56px)/1 Anton;letter-spacing:.06em;color:var(--accent);
  background:rgba(12,11,11,.72);box-shadow:0 0 40px rgba(224,102,31,.45);opacity:0;pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.2,1.4,.4,1)}
.slate.wrapped .wrapstamp{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
.ok2{margin:18px 0 0;font:600 15px/1.5 SG;color:#FFE3C4;display:none}.ok2 a{color:#FFB070}
.ok2.on{display:block}
/* the hologram */
.holo2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.holo-stage{position:relative;width:min(100%,320px);aspect-ratio:606/1000}
.holo-stage canvas{position:relative;z-index:1;width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px rgba(255,150,70,.45))}
.holo-stage .beam{position:absolute;left:-8%;right:-8%;top:8%;bottom:2%;background:linear-gradient(0deg,rgba(255,160,90,.24),rgba(255,160,90,.04) 75%,transparent);clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);filter:blur(8px)}
.holo-stage .pad{position:absolute;left:-10%;right:-10%;bottom:-4%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,110,.75),rgba(255,140,70,.22) 60%,transparent);box-shadow:0 0 30px rgba(255,140,70,.35)}
.holo-cap .mono{font-size:10px;letter-spacing:.24em;color:var(--accent)}
.holo-cap p{margin:10px 0 0;font:600 16px/1.4 SG;color:rgba(239,225,198,.78)}
.direct2{display:flex;flex-direction:column;gap:8px}
.direct2 .mono{font-size:10px;letter-spacing:.2em;color:rgba(239,225,198,.45);text-transform:uppercase}
.direct2 a{font:800 clamp(20px,2vw,28px)/1 BSD;color:#FFF3E2;text-decoration:none;border-bottom:1px solid rgba(224,102,31,.6);padding-bottom:4px}

/* ===== the end card ===== */
.foot2{position:relative;background:linear-gradient(180deg,transparent,rgba(4,3,3,.85) 70%);padding:12vh 0 5vh;border-top:1px solid rgba(255,255,255,.06);overflow:hidden}
.foot2::before{content:"";position:absolute;left:50%;top:0;width:min(900px,90vw);height:320px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(224,102,31,.12),transparent);pointer-events:none}
.endcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.ec-lock{display:flex;align-items:flex-end;gap:14px}
.ec-lock img{height:clamp(110px,14vw,170px);filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.ec-word{text-align:left;padding-bottom:10px}
.ec-word b{display:block;font:400 clamp(56px,8vw,120px)/.86 Anton;letter-spacing:.01em;background:linear-gradient(180deg,#FFF6E4,#EFE1C6 45%,#C9B38C);-webkit-background-clip:text;background-clip:text;color:transparent}
.ec-word small{display:block;margin-top:10px;font:600 13px/1 SG;letter-spacing:.62em;color:var(--accent)}
.ec-tag{margin:0;font:800 clamp(22px,2.4vw,34px)/1.1 BSD;color:var(--ink)}
.ec-tag small{display:block;margin-top:12px;font:600 15px/1.5 SG;color:rgba(239,225,198,.6)}
.credits2{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:40px;margin:9vh auto 0;max-width:1000px;padding-top:40px;border-top:1px solid rgba(255,255,255,.07)}
.credits2 h4{margin:0 0 16px;font:400 10px/1 Mono;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.credits2 a,.credits2 span{display:block;margin:0 0 10px;font:600 15px/1.5 SG;color:rgba(239,225,198,.78);text-decoration:none}
.credits2 a:hover{color:#FFF3E2}
.legal2{display:flex;justify-content:space-between;gap:20px;margin:8vh auto 0;max-width:1000px;font:400 10px/1 Mono;letter-spacing:.18em;color:rgba(239,225,198,.4);text-transform:uppercase}
.legal2 .ftc{color:rgba(224,102,31,.8)}

@media (max-width:720px){
  .bts2-head,.make2-head{flex-direction:column;align-items:flex-start;gap:16px}
  .fr{height:34vh}.loupe{display:none}
  .cam{grid-template-columns:1fr}.mview{min-height:380px}.mi{padding:12px 10px}.mi .t{font-size:14px}.mv-copy{left:22px;right:22px;bottom:24px}
  .faq2-grid,.brief2-grid{grid-template-columns:1fr}
  .screen{display:none}
  .qcue{grid-template-columns:1fr;gap:6px}
  .ans{position:static;width:auto;height:auto;clip:auto;overflow:visible;margin:0;padding:0 6px;max-height:0;opacity:0;font:600 15px/1.55 SG;color:rgba(239,225,198,.78);transition:max-height .4s,opacity .3s,padding .3s}
  .qcue[aria-expanded="true"]+.ans{max-height:220px;opacity:1;padding:4px 6px 18px}
  .slate-body{grid-template-columns:1fr}.sf{border-right:0}.slate-row{grid-template-columns:1.6fr 1fr 1fr}.slate-row span:last-child{display:none}
  .holo-stage{width:62%}
  .credits2{grid-template-columns:1fr;gap:26px}.legal2{flex-direction:column;align-items:center;text-align:center}
  .ec-lock img{height:96px}
}

/* a video over the page, in glass */
.lbx{position:fixed;inset:0;z-index:300;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lbx.on{opacity:1;pointer-events:auto}
.lbx-veil{position:absolute;inset:0;background:rgba(5,4,4,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lbx-box{position:relative;width:min(92vw,1100px);aspect-ratio:16/9;padding:10px}
.lbx-box.tall{width:min(92vw,440px);aspect-ratio:9/15}
.lbx-frame{position:absolute;inset:10px;border-radius:12px;overflow:hidden;background:#000}
.lbx-frame iframe{width:100%;height:100%;border:0}
.lbx-x{position:absolute;right:-14px;top:-14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(20,16,13,.92);color:#fff;font:600 15px/1 SG;cursor:pointer}

/* a short strip (only a few photos so far): no scroll pinning, the frames sit centred */
.bts2-pin.few{height:auto}.bts2-pin.few .bts2-stage{position:relative;height:auto;padding:15vh 0}
.bts2-pin.few .strip{margin:0 auto;transform:none!important}