/* LABEL 4 – Company Deck "All Access" · canvas 1920 × 1080 · CI: direction C, round 5 */
:root{
  --k:#0A0A0A; --w:#FFFFFF; --off:#F5F3EE; --lime:#D9FF3A; --cob:#2B3BFF; --org:#FF3B18; --grey:#8C8A84;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-io:cubic-bezier(0.77,0,0.175,1);
  --pad:96px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:Inter,system-ui,sans-serif}
.sym{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- stage ---------- */
.stage{position:fixed;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;background:var(--bg);color:var(--ink);overflow:hidden;visibility:hidden}
.slide.is-active{visibility:visible;z-index:2}
.slide.is-leaving{visibility:visible;z-index:1}
.slide[data-theme=dark]{--bg:var(--k);--ink:var(--w);--mute:#9A9893}
.slide[data-theme=off]{--bg:var(--off);--ink:var(--k);--mute:#6E6C67}
.slide[data-theme=white]{--bg:var(--w);--ink:var(--k);--mute:#6E6C67}
.slide[data-theme=orange]{--bg:var(--org);--ink:var(--k);--mute:rgba(10,10,10,.62)}
.slide[data-theme=cobalt]{--bg:var(--cob);--ink:var(--w);--mute:rgba(255,255,255,.86)}
.slide[data-theme=lime]{--bg:var(--lime);--ink:var(--k);--mute:rgba(10,10,10,.62)}
.notes{display:none}

/* ---------- type ---------- */
.display{font-family:Archivo,sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.9;letter-spacing:-.012em;margin:0}
.head{font-family:Archivo,sans-serif;font-weight:800;font-stretch:125%;text-transform:uppercase;line-height:1;letter-spacing:-.005em;margin:0}
.label{font-family:Archivo,sans-serif;font-weight:700;font-stretch:125%;text-transform:uppercase;letter-spacing:.08em;font-size:19px;line-height:1.3}
.body{font-size:26px;line-height:1.45;margin:0;font-weight:400}
.small{font-size:21px;line-height:1.45;margin:0}
.mute{color:var(--mute)}
.ln{display:block;overflow:hidden;padding:0 .04em .08em .04em;margin:0 0 -.08em -.04em}
.ln>span{display:inline-block}
.acc-org{color:var(--org)} .acc-lime{color:var(--lime)} .acc-cob{color:var(--cob)}
.num{font-family:Archivo,sans-serif;font-weight:900;font-stretch:125%;line-height:.86;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- CI parts ---------- */
.wm{display:block;fill:currentColor}
.pill{--h:50px;display:inline-flex;align-items:center;height:var(--h);padding:0 calc(var(--h)*.48);border:calc(var(--h)*.068) solid currentColor;border-radius:999px;
  font-family:Archivo,sans-serif;font-weight:700;font-stretch:125%;font-size:calc(var(--h)*.4);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;line-height:1}
.pill.fill{background:var(--pf,currentColor);border-color:var(--pf,currentColor);color:var(--pi,var(--k))}
.coin{--d:120px;width:var(--d);height:var(--d);border-radius:50%;border:calc(var(--d)*.075) solid currentColor;display:inline-grid;place-items:center;flex:none;
  font-family:Archivo,sans-serif;font-weight:800;font-stretch:125%;font-size:calc(var(--d)*.58);line-height:1;letter-spacing:-.03em}
.coin>span{display:block;transform:translateY(.035em)}
.coin.sm>span{font-size:.62em}
.coin svg{height:40%;width:auto;fill:currentColor;display:block}
.coin.solid{background:var(--cf);border-color:var(--cf);color:var(--ci)}
.lockup{--fs:20px;display:inline-flex;flex-direction:column;align-items:center;font-family:Archivo,sans-serif;font-weight:800;font-stretch:125%;
  font-size:var(--fs);line-height:.94;letter-spacing:-.01em;text-transform:uppercase;text-align:center}
.lockup .wm{height:calc(var(--fs)*.688);width:auto;margin:0 0 calc(var(--fs)*.26)}

/* ---------- photos ---------- */
.ph{position:absolute;margin:0;overflow:hidden;background:#111}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.bg{position:absolute;inset:0;margin:0;overflow:hidden}
.bg img{width:100%;height:100%;object-fit:cover;display:block}
.scrim{position:absolute;inset:0;pointer-events:none}
.cap{position:absolute;font-size:18px;line-height:1.4;color:var(--mute)}

/* ---------- chrome ---------- */
.chrome{position:absolute;left:var(--pad);right:var(--pad);bottom:44px;z-index:20;display:flex;justify-content:space-between;align-items:center;color:var(--chrome,#fff);pointer-events:none;transition:opacity .3s ease}
.chrome .wm{height:17px;width:auto}
.chrome .ct{font-family:Archivo,sans-serif;font-weight:700;font-stretch:125%;font-size:15px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.chrome.off{opacity:0}
.progress{position:absolute;left:0;bottom:0;height:4px;background:var(--org);z-index:21;transform-origin:left;transition:transform .5s var(--ease-out)}
.wipe{position:absolute;inset:0;z-index:30;transform:translateX(-101%);pointer-events:none}
.blackout{position:absolute;inset:0;background:#000;z-index:40;display:none}
.blackout.on{display:block}
.pending{opacity:0}
body.idle,body.idle *{cursor:none!important}

/* ---------- overview ---------- */
#ov{display:none;position:fixed;inset:0;overflow:auto;background:#111;padding:40px;z-index:100}
body.ov #ov{display:grid;grid-template-columns:repeat(4,var(--tw,384px));gap:24px;justify-content:center;align-content:start}
body.ov .stage{display:none}
.ov-tile{width:var(--tw,384px);height:calc(var(--tw,384px)*.5625);position:relative;overflow:hidden;cursor:pointer;outline:3px solid transparent;outline-offset:3px}
.ov-tile.cur{outline-color:var(--org)}
.ov-tile>.slide{visibility:visible;transform:scale(var(--ts,.2));transform-origin:0 0;width:1920px;height:1080px}
.ov-tile b{position:absolute;left:8px;top:8px;z-index:5;background:#fff;color:#000;font:700 12px/1 Archivo;padding:4px 6px}

/* ---------- presenter ---------- */
body.presenter{background:#141414;color:#eee;overflow:auto}
.pv{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto 1fr;gap:20px;padding:24px;height:100vh;box-sizing:border-box;font-family:Inter,sans-serif}
.pv iframe{border:0;width:100%;aspect-ratio:16/9;background:#000;display:block}
.pv .meta{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;font:700 18px Archivo;letter-spacing:.06em}
.pv .notes-box{font-size:22px;line-height:1.5;white-space:pre-wrap;overflow:auto;background:#1e1e1e;padding:20px 24px;margin-top:16px}
.pv .timer{font:800 40px Archivo;font-variant-numeric:tabular-nums}

/* ---------- export (PDF) & static ---------- */
html[data-mode=print],html[data-mode=print] body{overflow:auto;height:auto;background:#444}
html[data-mode=print] .stage{position:static;transform:none;width:auto;height:auto;background:none}
html[data-mode=print] .slide{position:relative;visibility:visible;width:1920px;height:1080px;zoom:.75;margin:0}
html[data-mode=print] .chrome,html[data-mode=print] .progress,html[data-mode=print] .wipe{display:none}
html[data-mode=print] .marquee-track{animation:none!important}
@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{overflow:visible;height:auto;background:none}
  .stage{position:static;transform:none;width:1920px;height:auto}
  .slide{position:relative;visibility:visible;break-after:page;width:1920px;height:1080px}
  .chrome,.progress,.wipe,#ov{display:none}
  .pending{opacity:1}
  .marquee-track{animation:none!important}
}

/* ================================================================
   SLIDES (Agentur-Deck)
   ================================================================ */


/* 01 cold open */
#s1 .bg img{object-position:50% 45%}
#s1 .scrim{background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 26%,rgba(10,10,10,.5) 58%,rgba(10,10,10,.93) 100%)}
#s1 .top{position:absolute;left:var(--pad);top:88px}
#s1 h1{position:absolute;left:var(--pad);bottom:190px;font-size:132px}
#s1 .sub{position:absolute;left:var(--pad);bottom:104px;width:900px;color:#D7D5CF}

/* 03 belief */
#s2 h2{position:absolute;left:var(--pad);top:120px;font-size:118px}
#s2 .bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:130px;display:flex;justify-content:space-between;align-items:flex-end;gap:80px}
#s2 .bottom .body{width:820px}

/* 04 four roles */
#s3 h2{position:absolute;left:var(--pad);top:104px;font-size:100px}
#s3 .intro{position:absolute;right:var(--pad);top:120px;width:640px}
#s3 .intro b{font-weight:700;color:var(--lime)}
#s3 .table{position:absolute;left:var(--pad);right:var(--pad);top:494px;height:6px;background:var(--ink)}
#s3 .cols{position:absolute;left:var(--pad);right:var(--pad);top:434px;display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
#s3 .col .coin{background:var(--bg)}
#s3 .col h3{margin:32px 0 12px;font-size:32px}
#s3 .q{margin:22px 0 0;padding-top:16px;border-top:2px solid rgba(255,255,255,.35);font-size:20px;line-height:1.4;font-style:italic}

/* 12 what we build */
#s4 h2{position:absolute;left:var(--pad);top:120px;font-size:78px}
#s4 .how{position:absolute;left:var(--pad);bottom:120px;width:640px}
#s4 .how ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
#s4 .how li{display:flex;align-items:center;gap:14px;font-family:Archivo;font-weight:800;font-stretch:125%;font-size:24px;text-transform:uppercase}
#s4 .how li .coin{border-width:4px}
#s4 .how li .coin span{font-size:.6em}
#s4 .set{position:absolute;left:860px;right:var(--pad);top:110px}
#s4 .it{display:grid;grid-template-columns:64px 1fr auto;gap:0 20px;align-items:start;border-top:3px solid var(--ink);padding:22px 0 24px}
#s4 .it .n{font-family:Archivo;font-weight:700;font-stretch:125%;font-size:20px;letter-spacing:.06em;padding-top:8px}
#s4 .it h4{margin:0 0 8px;font-size:32px}
#s4 .it p{margin:0;font-size:21px;line-height:1.4}
#s4 .it .pill{--h:38px;margin-top:2px}

/* 05 tracklist */
#s5 .left{position:absolute;left:var(--pad);top:104px;width:540px;height:840px}
#s5 h2{font-size:78px}
#s5 .left .body{margin-top:32px;width:480px}
#s5 .left .coin{position:absolute;left:0;bottom:0}
#s5 .list{position:absolute;left:700px;right:var(--pad);top:104px}
#s5 .side{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--ink);padding:0 0 14px;margin:0 0 4px}
#s5 .trk{display:grid;grid-template-columns:60px 1fr auto;align-items:baseline;gap:0 20px;padding:18px 0 17px;border-bottom:1px solid rgba(10,10,10,.2)}
#s5 .trk .c{font-family:Archivo;font-weight:700;font-stretch:125%;font-size:21px;color:var(--mute)}
#s5 .trk .t{font-family:Archivo;font-weight:800;font-stretch:125%;font-size:25px;text-transform:uppercase;letter-spacing:-.005em;white-space:nowrap}
#s5 .trk .r{font-size:20px;color:#45433F;text-align:right;white-space:nowrap}
#s5 .trk.hot .c{color:var(--org)}
#s5 .gap{height:46px}

/* 06 directions */
#s6 .ph.a{left:0;top:0;width:840px;height:1080px}
#s6 .ph.a img{object-position:50% 50%}
#s6 .ph.b{left:470px;top:650px;width:340px;height:240px;border:10px solid var(--k)}
#s6 .ph.b img{object-position:50% 40%}
#s6 .r{position:absolute;left:1000px;right:var(--pad);top:96px}
#s6 h2{font-size:80px;margin-top:30px}
#s6 .quote{margin-top:20px;font-size:24px;font-style:italic}
#s6 .stats{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;margin-top:40px}
#s6 .stats .num{font-size:80px;white-space:nowrap}
#s6 .stats .small{margin-top:12px}
#s6 .role{position:absolute;left:1000px;right:var(--pad);bottom:100px;border-top:2px solid rgba(255,255,255,.3);padding-top:16px}

/* 07 turn it up */
#s7 .bg img{object-position:50% 40%}
#s7 .scrim{background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.55) 48%,rgba(10,10,10,.1) 100%),linear-gradient(0deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,0) 42%)}
#s7 .top{position:absolute;left:var(--pad);top:88px}
#s7 h2{position:absolute;left:var(--pad);top:200px;font-size:88px}
#s7 .p{position:absolute;left:var(--pad);top:540px;width:760px}
#s7 .strip{position:absolute;left:var(--pad);right:var(--pad);bottom:120px;display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr;border-top:3px solid var(--lime)}
#s7 .strip>div{padding:22px 24px 0 0}
#s7 .strip .num{font-size:76px;color:var(--lime)}
#s7 .strip .small{margin-top:10px}
#s7 .strip .plus .body{font-size:24px;padding-top:6px}

/* 08 red bull stage */
#s8 .ph.top{left:0;top:0;width:1920px;height:560px}
#s8 .ph.top img{object-position:50% 58%}
#s8 .tag{position:absolute;left:var(--pad);top:88px}
#s8 h2{position:absolute;left:var(--pad);top:620px;font-size:68px}
#s8 .p{position:absolute;left:1110px;right:var(--pad);top:624px}
#s8 .marquee{position:absolute;left:0;right:0;bottom:0;height:180px;border-top:3px solid var(--ink);overflow:hidden}
#s8 .marquee .label{position:absolute;left:var(--pad);top:18px;color:var(--mute)}
.marquee-track{position:absolute;left:0;top:70px;display:flex;gap:40px;align-items:center;white-space:nowrap;padding-left:var(--pad);animation:marq 70s linear infinite}
.marquee-track span{font-family:Archivo;font-weight:800;font-stretch:125%;font-size:46px;text-transform:uppercase}
.marquee-track .dot{--d:26px;color:var(--org);border-width:5px}
@keyframes marq{to{transform:translateX(-50%)}}

/* 09 more works */
#s9 h2{position:absolute;left:var(--pad);top:96px;font-size:84px}
#s9 .intro{position:absolute;right:var(--pad);top:112px;width:560px}
#s9 .grid{position:absolute;left:var(--pad);right:var(--pad);top:300px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:310px 310px;gap:24px}
#s9 .tile{position:relative;overflow:hidden;background:var(--tb,#111);color:var(--ti,var(--w))}
#s9 .tile .ph{position:absolute;inset:0}
#s9 .tile .tc{position:absolute;left:0;right:0;bottom:0;padding:60px 24px 20px;background:linear-gradient(0deg,rgba(10,10,10,.82),rgba(10,10,10,0));color:var(--w);display:flex;gap:16px;align-items:baseline}
#s9 .tile .tc .c{font-family:Archivo;font-weight:700;font-stretch:125%;font-size:20px;color:var(--lime)}
#s9 .tile .tc .head{font-size:26px}
#s9 .tile.type{padding:30px 32px}

/* 10 artists */
#s10 .band{position:absolute;left:0;right:0;top:0;height:210px;background:var(--k);color:var(--w);display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad);z-index:3}
#s10 .band h2{font-size:60px}
#s10 .half{position:absolute;top:210px;bottom:0;width:960px;overflow:hidden}
#s10 .half.l{left:0} #s10 .half.r{left:960px}
#s10 .half .ph{inset:0;position:absolute}
#s10 .half .scrim{background:linear-gradient(0deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.6) 40%,rgba(10,10,10,0) 66%)}
#s10 .half .info{position:absolute;left:64px;right:64px;bottom:100px;color:var(--w)}
#s10 .half .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
#s10 .half .num{font-size:52px;white-space:nowrap}
#s10 .half .small{font-size:19px;margin-top:8px}
#s10 .half .tags{margin-top:28px}
#s10 .divider{position:absolute;left:957px;top:210px;bottom:0;width:6px;background:var(--k);z-index:2}

/* 12 what we build */
#s11 h2{position:absolute;left:var(--pad);top:120px;font-size:78px}
#s11 .how{position:absolute;left:var(--pad);bottom:120px;width:640px}
#s11 .how ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
#s11 .how li{display:flex;align-items:center;gap:14px;font-family:Archivo;font-weight:800;font-stretch:125%;font-size:24px;text-transform:uppercase}
#s11 .how li .coin{border-width:4px}
#s11 .how li .coin span{font-size:.6em}
#s11 .set{position:absolute;left:860px;right:var(--pad);top:110px}
#s11 .it{display:grid;grid-template-columns:64px 1fr auto;gap:0 20px;align-items:start;border-top:3px solid var(--ink);padding:22px 0 24px}
#s11 .it .n{font-family:Archivo;font-weight:700;font-stretch:125%;font-size:20px;letter-spacing:.06em;padding-top:8px}
#s11 .it h4{margin:0 0 8px;font-size:32px}
#s11 .it p{margin:0;font-size:21px;line-height:1.4}
#s11 .it .pill{--h:38px;margin-top:2px}

/* 11 team */
#s12 h2{position:absolute;left:var(--pad);top:104px;font-size:100px}
#s12 .home{position:absolute;left:var(--pad);bottom:110px;width:560px;font-size:22px}
#s12 .p1,#s12 .p2{position:absolute;top:96px;width:520px}
#s12 .p1{left:756px} #s12 .p2{left:1304px}
#s12 .p1 .ph,#s12 .p2 .ph{position:relative;width:520px;height:580px}
#s12 .who{margin-top:24px}
#s12 .who .head{font-size:30px}
#s12 .who .small{margin-top:12px;font-size:20px}
#s12 .cap{left:1304px;bottom:96px}

/* 13 all access */
#s13 h2{position:absolute;left:var(--pad);top:110px;font-size:100px}
#s13 .contact{position:absolute;left:var(--pad);top:560px;width:820px}
#s13 .contact .head{font-size:44px}
#s13 .contact .body{margin-top:14px;font-size:32px;line-height:1.4}
#s13 .contact .body b{color:var(--lime);font-weight:600}
#s13 .pills{position:absolute;left:var(--pad);bottom:110px;display:flex;gap:16px}
#s13 .pass{position:absolute;left:1230px;top:150px;width:520px;height:810px;background:var(--lime);color:var(--k);padding:44px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-4deg);box-shadow:0 40px 90px rgba(0,0,0,.45)}
#s13 .pass .row1{display:flex;justify-content:space-between;align-items:center}
#s13 .pass .wm{height:30px;width:auto}
#s13 .pass .big{font-size:80px;line-height:.9}
#s13 .pass .meta{font-family:Archivo;font-weight:700;font-stretch:125%;font-size:20px;letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
#s13 .pass .hole{position:absolute;left:50%;top:22px;width:90px;height:18px;margin-left:-45px;border-radius:9px;background:var(--k)}
/* agency-deck additions */
#s1 .brand{position:absolute;left:var(--pad);right:var(--pad);top:88px;display:flex;justify-content:space-between;align-items:center}
#s1 .brand .wm{height:34px;width:auto;color:var(--w)}
#s1 h1{font-size:124px}
#s2 .bottom .body{width:900px}
#s2 .bottom .body b{font-weight:600}
#s4 h2{font-size:84px}
#s4 .lead{position:absolute;left:var(--pad);top:470px;width:640px}
#s4 .how{display:none}
#s4 .set{top:96px}
#s4 .it{padding:20px 0 22px}
#s4 .it h4{font-size:30px}
#s4 .it p{font-size:20px}
#s4 .it .pill{--h:36px;color:var(--org)}
#s11 h2{font-size:84px}
#s11 .how{display:none}
#s11 .keep{position:absolute;left:var(--pad);bottom:120px;width:660px}
#s11 .keep .label{margin-bottom:16px}
#s11 .keep .pill{--h:48px;margin:0 10px 12px 0}
#s11 .set{top:110px}
#s11 .it{grid-template-columns:64px 1fr;padding:26px 0 28px}
#s11 .it h4{font-size:34px}
#s11 .it p{font-size:22px}
#s3 .intro b{color:var(--lime)}
#s13 .contact .body b{color:var(--lime)}
/* fixes after first render */
#s1 h1{bottom:236px}
#s1 .sub{bottom:96px;width:1180px}
#s11 .it{padding:40px 0 44px}
#s11 .it h4{font-size:40px;margin-bottom:12px}
#s11 .it p{font-size:24px}
/* artists: six numbers per half */
#s10 .half .info{bottom:72px}
#s10 .half .stats{grid-template-columns:repeat(3,1fr);gap:22px 24px;margin-top:26px}
#s10 .half .num{font-size:44px}
#s10 .half .small{font-size:17px;margin-top:6px;line-height:1.3}
#s10 .half .scrim{background:linear-gradient(0deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.72) 46%,rgba(10,10,10,0) 72%)}
