@font-face{font-family:Poppins;src:url(fonts/poppins-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --paper:#F2F0ED; --paper-2:#E7E3DD; --paper-3:#DAD5CD;
  --ink:#121211; --ink-2:#55554E; --ink-3:#8C8C82;
  --line:rgba(18,18,17,.13);
  --stage:#111110;
  --accent:#C9832A; --accent-lift:#E9A13B;
  --shadow:0 18px 50px -22px rgba(18,18,17,.45);
}

*{box-sizing:border-box}
figure,figcaption{margin:0}
html,body{height:100%}
body{
  margin:0;background:#0B0B0A;color:var(--ink);
  font-family:Poppins,"Segoe UI",system-ui,sans-serif;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}

/* ---------- viewport + fixed 1920x1080 stage ---------- */
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{
  position:absolute;left:50%;top:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center center;
  background:var(--paper);box-shadow:0 40px 120px -40px rgba(0,0,0,.8);
}

.slide{
  position:absolute;inset:0;background:var(--paper);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.61,.36,1);
  transform:translateX(28px);overflow:hidden;
}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;z-index:2}
.slide.is-leaving{opacity:0;transform:translateX(-28px);z-index:1}

/* ---------- shared type ---------- */
.eyebrow{font-size:19px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.h1{font-size:104px;line-height:.94;font-weight:800;letter-spacing:-.03em;margin:0}
.h2{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.025em;margin:0}
.lede{font-size:26px;line-height:1.62;color:var(--ink-2);font-weight:400;margin:0}
.body{font-size:23px;line-height:1.6;color:var(--ink-2);margin:0}
.rule{height:3px;width:96px;background:var(--accent);border:0;margin:0}

/* ---------- cover ---------- */
.s-cover{background:#0C0C0B}
.s-cover .plate{position:absolute;inset:0;background:url(bg/concrete-corridor.jpg) center/cover no-repeat}
.s-cover .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,8,7,.94) 0%,rgba(8,8,7,.72) 46%,rgba(8,8,7,.5) 100%)}
.s-cover .inner{position:absolute;inset:0;padding:118px 132px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.s-cover .logo{width:318px;display:block}
.s-cover h1{font-size:116px;line-height:.92;font-weight:800;letter-spacing:-.035em;margin:0;max-width:1180px}
.s-cover .sub{font-size:27px;color:rgba(255,255,255,.74);margin:26px 0 0}
.s-cover .year{font-size:19px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-lift);font-weight:600}
.s-cover .startline{display:flex;align-items:center;gap:14px;font-size:19px;color:rgba(255,255,255,.62)}
.kbd{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.34);
  border-radius:7px;font-size:16px;font-weight:600;color:#fff;background:rgba(255,255,255,.07)}

/* ---------- split (about) ---------- */
.s-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.s-split .pane{padding:118px 92px 118px 132px;display:flex;flex-direction:column;justify-content:center;gap:32px}
.s-split .art{background-size:cover;background-position:center}
.s-split.dark{background:var(--stage);color:#fff}
.s-split.dark .lede,.s-split.dark .body{color:rgba(255,255,255,.72)}
.s-split.dark .eyebrow{color:rgba(255,255,255,.5)}
.s-split.dark .pane{padding-right:110px}

/* ---------- section divider ---------- */
.s-divider{background:var(--stage);color:#fff}
.s-divider .tex{position:absolute;inset:0;background:url(shots/x_circuit.jpg) center/cover no-repeat;opacity:.45}
.s-divider .tex::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,9,.95) 32%,rgba(10,10,9,.3) 100%)}
.s-divider .inner{position:absolute;inset:0;padding:132px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.s-divider .num{font-size:22px;letter-spacing:.3em;color:var(--accent-lift);font-weight:700}
.s-divider h2{font-size:116px;line-height:.94;font-weight:800;letter-spacing:-.035em;margin:0;max-width:1320px}
.s-divider p{font-size:29px;color:rgba(255,255,255,.7);margin:0;max-width:900px}

/* ---------- service detail ---------- */
.s-service{display:flex;flex-direction:column}
.s-service .band{position:relative;height:262px;flex:none;color:#fff;overflow:hidden;background:var(--stage)}
.s-service .band .tex{position:absolute;inset:0;background:url(shots/x_circuit.jpg) center/cover no-repeat;opacity:.52}
.s-service .band .tex::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,9,.93) 22%,rgba(10,10,9,.45) 100%)}
.s-service .band .bandin{position:absolute;inset:0;padding:48px 132px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.s-service .band .kicker{font-size:19px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600}
.s-service .band h2{font-size:74px;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1}
.s-service .band .sub{font-size:26px;font-weight:600;color:var(--accent-lift);margin:4px 0 0}
.s-service .grid{flex:1;display:grid;grid-template-columns:1.4fr .72fr;min-height:0}
.s-service.wide .grid{grid-template-columns:1.8fr .7fr}
.s-service .main{padding:44px 60px 48px 132px;display:flex;flex-direction:column;justify-content:center;gap:34px;min-height:0}
.s-service .side{padding:40px 132px 44px 52px;border-left:1px dashed var(--line);
  display:flex;flex-direction:column;gap:34px;justify-content:center;min-height:0}
.side .shot{cursor:zoom-in;border-radius:12px;height:296px;width:100%}
.side .workcap{margin:13px 0 0;font-size:18px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.clientlist{margin:0;padding:0;list-style:none;display:grid;gap:7px 20px}
.clientlist.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.clientlist li{font-size:17px;line-height:1.45;color:var(--ink-2);letter-spacing:.01em}
.caps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:11px 40px;margin:0;padding:0}
.caps li{font-size:23px;line-height:1.4;color:var(--ink);list-style:none;position:relative;padding-left:24px}
.caps li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;background:var(--accent);border-radius:50%}
.capcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.capcols ul{margin:0;padding:0}
.capcols h4{font-size:20px;margin:0 0 12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.capcols li{font-size:20px;line-height:1.5;color:var(--ink-2);list-style:none;margin-bottom:6px}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.flow span{font-size:21px;font-weight:600;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:9px 20px}
.flow i{color:var(--accent);font-style:normal;font-size:21px}
.sect-title{font-size:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 16px}
.side .sect-title{font-size:17px;margin-bottom:10px}

/* ---------- portfolio ---------- */
.s-port{display:grid;padding:84px 132px 90px;gap:36px;grid-template-rows:auto 1fr}
.porthead{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.porthead .lbl{text-align:right;flex:none}
.porthead .lbl .a{font-size:21px;color:var(--ink-3);font-weight:500}
.porthead .lbl .b{font-size:19px;color:var(--ink-3);font-style:italic}
.clientname{font-size:62px;font-weight:800;letter-spacing:-.03em;line-height:1;margin:6px 0 0}
.clientkick{font-size:19px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.clientmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;max-width:1000px}
.chip{font-size:18px;font-weight:500;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:7px 16px}
.shots{display:grid;gap:18px;min-height:0}
.shots.c1{grid-template-columns:minmax(0,1fr)}
.shots.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shots.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shot{position:relative;overflow:hidden;border-radius:14px;background:var(--paper-2);box-shadow:var(--shadow);cursor:zoom-in;min-height:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.shot.fit{background:transparent;box-shadow:none;border-radius:0}
.shot.fit img{object-fit:contain;background:transparent}
.shot:hover img{transform:scale(1.035)}
.shot.fit:hover img{transform:none}
.shot .zoom{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(18,18,17,.62);color:#fff;display:grid;place-items:center;font-size:16px;opacity:0;transition:opacity .2s}
.shot:hover .zoom{opacity:1}

/* packed photo rows: every shot keeps its aspect, rows share a height */
.pwall{display:flex;flex-direction:column;align-items:center;gap:18px;min-height:0;align-self:center}
.prow{display:flex;gap:18px;justify-content:center}
.pwall .shot{flex:none}
.s-duo .pwall{align-self:start;align-items:flex-start}

/* design -> build -> on-site evidence row */
.worksrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;align-self:center;
  gap:22px;margin:0 auto;min-height:0}
.wr{flex:none;display:flex;flex-direction:column;gap:14px;min-width:0}
.wr .box{width:100%;border-radius:13px;overflow:hidden}
.wr .role{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.wr .role em{display:block;font-style:normal;font-size:16px;font-weight:400;
  color:var(--ink-3);margin-top:3px}
.wr .vcard.box{cursor:pointer}

/* website capture framed as a browser window */
.browser{border-radius:13px;overflow:hidden;box-shadow:var(--shadow);background:#fff;
  display:flex;flex-direction:column;cursor:zoom-in;min-height:0}
.browser .bar{height:38px;flex:none;background:#E4E1DC;display:flex;align-items:center;gap:7px;
  padding:0 15px;border-bottom:1px solid rgba(18,18,17,.09)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#C6C2BA;display:block;flex:none}
.browser .url{margin-left:14px;font-size:14px;font-weight:500;color:var(--ink-3);
  background:#F4F2EF;border-radius:6px;padding:4px 14px}
.browser .view{flex:none;aspect-ratio:16/10;overflow:hidden}
.browser .view img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.browser:hover .view img{transform:scale(1.03)}
.webduo .browser{align-self:center}

/* single tall image beside the client block */
.s-hero{padding:84px 132px 90px;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:center}
.s-hero .info{display:flex;flex-direction:column}
.s-hero .clientmeta{margin-bottom:34px}
.s-hero .herolbl{text-align:left;padding-top:26px;border-top:1px solid var(--line)}
.s-hero .shots{height:100%}

/* two-client portfolio */
.s-duo{padding:76px 132px 88px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);gap:14px 60px}
.duohead{grid-column:1/-1;justify-self:end}
.s-duo .clientname{font-size:52px}
.duoinfo{align-self:start}
.duo{display:flex;flex-direction:column;gap:20px;min-height:0}
.duo .shots{flex:1}

/* ---------- video wall ---------- */
.s-videos{padding:76px 132px 82px;display:grid;grid-template-rows:auto 1fr;gap:28px}
.vwall{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;
  gap:18px;min-height:0;margin:0 auto}
.vcard{position:relative;border-radius:12px;overflow:hidden;background:#1a1a18;cursor:pointer;
  box-shadow:var(--shadow);flex:none;width:var(--vw);height:var(--vh)}
.vcard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.vcard:hover img{transform:scale(1.06)}
.vcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 44%,rgba(0,0,0,.84) 100%)}
.vcard .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.93);display:grid;place-items:center;transition:transform .25s}
.vcard:hover .play{transform:translate(-50%,-50%) scale(1.12)}
.vcard .play svg{width:17px;height:17px;fill:#121211;margin-left:3px}
.vcard .cap{position:absolute;left:0;right:0;bottom:0;padding:12px;color:#fff}
.vcard .cap b{display:block;font-size:15px;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vcard .cap span{font-size:13px;color:rgba(255,255,255,.66)}

/* ---------- PR case study ---------- */
.s-case{padding:84px 132px;display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.s-case .arts{display:flex;gap:18px;align-items:flex-start;justify-content:center}
.s-case .art{flex:none;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;background:var(--paper-2)}
.s-case .art img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.stat{background:var(--stage);color:#fff;border-radius:16px;padding:20px 26px;min-width:164px}
.stat b{display:block;font-size:50px;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat b small{font-size:23px;font-weight:600;margin-left:3px}
.stat span{font-size:17px;color:rgba(255,255,255,.62);letter-spacing:.05em}
.kv{display:flex;flex-direction:column;gap:20px}
.kv h4{font-size:19px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;font-weight:700}
.kv p{margin:0;font-size:22px;line-height:1.56;color:var(--ink-2)}

/* ---------- padded grid slides ---------- */
.s-pad{padding:96px 132px;display:flex;flex-direction:column;justify-content:center;gap:66px}
.why{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
.why .cell{border-top:3px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:13px}
.why .cell:nth-child(odd){border-top-color:var(--accent)}
.why .cell h4{font-size:28px;font-weight:700;margin:0;letter-spacing:-.015em;line-height:1.14}
.why .cell p{font-size:20px;line-height:1.52;color:var(--ink-2);margin:0}

.approach{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.step{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:32px 26px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.step .n{font-size:15px;font-weight:800;letter-spacing:.2em;color:var(--accent)}
.step h4{font-size:29px;font-weight:700;margin:0;letter-spacing:-.01em}
.step p{font-size:19px;line-height:1.5;color:var(--ink-2);margin:0}
.step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s ease}
.slide.is-active .step::after{transform:scaleX(1)}
.slide.is-active .step:nth-child(2)::after{transition-delay:.1s}
.slide.is-active .step:nth-child(3)::after{transition-delay:.2s}
.slide.is-active .step:nth-child(4)::after{transition-delay:.3s}
.slide.is-active .step:nth-child(5)::after{transition-delay:.4s}

.svcgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.svc{border:1px solid var(--line);border-radius:18px;padding:32px 26px 28px;background:#fff;
  display:flex;flex-direction:column;gap:13px;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s}
.svc:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:var(--accent)}
.svc .n{font-size:15px;font-weight:800;letter-spacing:.2em;color:var(--accent)}
.svc h4{font-size:27px;font-weight:700;margin:0;letter-spacing:-.018em;line-height:1.12}
.svc p{font-size:19px;line-height:1.5;color:var(--ink-2);margin:0;flex:1}
.svc .go{font-size:17px;font-weight:600;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.svc:hover .go{color:var(--accent)}

/* ---------- journey ---------- */
.timeline{display:flex;flex-direction:column;flex:1;justify-content:center}
.tl{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:24px 0;border-top:1px solid rgba(255,255,255,.16);align-items:baseline}
.tl:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tl .yr{font-size:52px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.tl.now .yr{color:var(--accent-lift)}
.tl p{margin:0;font-size:23px;line-height:1.5;color:rgba(255,255,255,.68)}

/* ---------- clients ---------- */
.s-clients{padding:92px 132px;display:flex;flex-direction:column;gap:40px}
.s-clients .wrap{flex:1;display:grid;place-items:center;min-height:0}
.s-clients img{max-width:100%;max-height:100%;object-fit:contain;display:block}

/* ---------- manifesto ---------- */
.s-mani{background:var(--stage);color:#fff}
.s-mani .tex{position:absolute;inset:0;background:url(shots/x_circuit.jpg) center/cover no-repeat;opacity:.36}
.s-mani .tex::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 18% 30%,rgba(10,10,9,.84),rgba(10,10,9,.97))}
.s-mani .inner{position:absolute;inset:0;padding:118px 132px;display:flex;flex-direction:column;justify-content:center;gap:44px}
.s-mani p.big{font-size:43px;line-height:1.32;font-weight:600;letter-spacing:-.02em;margin:0;max-width:1440px}
.s-mani .kicks{display:flex;gap:18px;flex-wrap:wrap}
.s-mani .kicks span{font-size:22px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:12px 26px;color:rgba(255,255,255,.86)}
.s-mani .three{display:flex;gap:54px;flex-wrap:wrap}
.s-mani .three b{font-size:35px;font-weight:800;letter-spacing:-.02em;color:var(--accent-lift)}

/* ---------- closing ---------- */
.s-close{background:#0C0C0B;color:#fff}
.s-close .plate{position:absolute;inset:0;background:url(bg/stairs.jpg) center/cover no-repeat}
.s-close .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(75deg,rgba(8,8,7,.92) 18%,rgba(8,8,7,.4) 100%)}
.s-close .inner{position:absolute;inset:0;padding:132px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px}
.s-close h2{font-size:102px;font-weight:800;letter-spacing:-.035em;margin:0}
.s-close .card{font-size:23px;line-height:1.72;color:rgba(255,255,255,.8)}
.s-close .card b{color:#fff;font-weight:700}
.s-close .card a{color:var(--accent-lift);text-decoration:none}
.s-close hr{border:0;border-top:1px solid rgba(255,255,255,.28);margin:24px 0}

/* ================= deck chrome ================= */
#chrome{position:fixed;inset:0;pointer-events:none;z-index:40;font-size:14px;
  opacity:1;transition:opacity .5s ease}
#chrome.idle{opacity:0}
#chrome > *{pointer-events:auto}

#bar{position:fixed;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.1)}
#bar i{display:block;height:100%;width:0;background:var(--accent-lift);transition:width .42s ease}

.navbtn{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(20,20,18,.55);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background .2s,opacity .2s;opacity:.35;backdrop-filter:blur(6px)}
.navbtn:hover{background:rgba(20,20,18,.9);opacity:1}
.navbtn svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;fill:none}
#prev{left:22px}
#next{right:22px}

#hud{position:fixed;right:22px;bottom:20px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.72)}
#hud button,#hud a{border:1px solid rgba(255,255,255,.16);background:rgba(20,20,18,.55);color:rgba(255,255,255,.8);
  border-radius:9px;height:34px;padding:0 12px;cursor:pointer;font:600 13px/1 Poppins,sans-serif;
  backdrop-filter:blur(6px);display:inline-flex;align-items:center;text-decoration:none}
#hud button:hover,#hud a:hover{background:rgba(20,20,18,.9);color:#fff}
#hud #pdfbtn{border-color:rgba(233,161,59,.5);color:var(--accent-lift)}
#hud #pdfbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
#count{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.04em;
  background:rgba(20,20,18,.55);backdrop-filter:blur(6px);border-radius:8px;padding:8px 12px}
#seclabel{position:fixed;left:22px;bottom:20px;color:rgba(255,255,255,.72);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;background:rgba(20,20,18,.55);backdrop-filter:blur(6px);
  border-radius:8px;padding:9px 12px}

/* contents panel */
#toc{position:fixed;inset:0;background:rgba(9,9,8,.93);backdrop-filter:blur(10px);z-index:60;
  padding:64px 72px;overflow:auto;display:none}
#toc.open{display:block}
#toc h3{color:#fff;font-size:15px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 30px;font-weight:700}
#toc .cols{columns:4;column-gap:44px}
#toc section{break-inside:avoid;margin-bottom:30px}
#toc h4{color:var(--accent-lift);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
#toc a{display:flex;gap:12px;color:rgba(255,255,255,.72);text-decoration:none;font-size:15px;line-height:1.4;
  padding:5px 0;cursor:pointer}
#toc a:hover{color:#fff}
#toc a.cur{color:var(--accent-lift)}
#toc a em{font-style:normal;color:rgba(255,255,255,.32);font-variant-numeric:tabular-nums;min-width:26px}

/* lightbox + video modal */
#lb{position:fixed;inset:0;background:rgba(8,8,7,.94);z-index:70;display:none;place-items:center;padding:48px}
#lb.open{display:grid}
#lb img{max-width:94vw;max-height:90vh;object-fit:contain;box-shadow:0 30px 90px -30px #000;border-radius:8px}
#lb video{max-width:min(94vw,520px);max-height:90vh;border-radius:14px;box-shadow:0 30px 90px -30px #000;background:#000}
#lb .close{position:fixed;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer;line-height:1}
#lb .lbcap{position:fixed;left:0;right:0;bottom:26px;text-align:center;color:rgba(255,255,255,.7);font-size:15px}

#help{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:80;background:rgba(16,16,15,.97);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:32px 36px;color:#fff;display:none;min-width:380px}
#help.open{display:block}
#help h3{margin:0 0 18px;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-lift)}
#help dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;align-items:center}
#help dt{margin:0}
#help dd{margin:0;color:rgba(255,255,255,.7);font-size:14px}

/* ================= print / PDF =================
   The deck normally stacks all slides absolutely and shows one at a time.
   For print each slide has to sit in normal flow at full size and claim its
   own page. Colour adjust must be forced or every dark slide prints white. */
@media print {
  @page { size: 1920px 1080px; margin: 0 }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html, body { height: auto; overflow: visible; background: #fff }

  #viewport { position: static; display: block; overflow: visible }
  #stage {
    position: static; transform: none; width: 1920px; height: auto;
    box-shadow: none; background: none;
  }

  .slide {
    position: relative; inset: auto;
    width: 1920px; height: 1080px;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; transition: none !important;
    overflow: hidden; box-shadow: none;
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  .slide:last-child { break-after: auto; page-break-after: auto }

  /* the amber rule under each approach card is normally revealed by .is-active */
  .step::after { transform: scaleX(1) !important; transition: none !important }

  /* deck chrome and overlays have no place in a document, and neither does
     the cover's keyboard hint — there is nothing to press in a PDF */
  #chrome, #toc, #lb, #help { display: none !important }
  .shot .zoom { display: none }
  .s-cover .startline { visibility: hidden }

  /* hover-only transforms must not bleed into the render */
  .shot img, .vcard img, .browser .view img { transform: none !important }
}