/* StartupTN × 108 Collective — v2 · Swiss grid, big type, no boxes */
:root{
  --paper:#F2F0EA; --paper-2:#E8E5DD; --ink:#12142B; --ink-2:#4A4E66; --ink-3:#8B8FA6; --rule:rgba(18,20,43,.16);
  --navy:#0F1737; --navy-2:#182460; --blue:#2B3F8C; --yellow:#F7AA00; --yellow-l:#FFCF5C;
  --fam-feature:#7A3FE0; --fam-passage:#F0A800; --fam-decal:#2A6DDC; --fam-filler:#29A85A;
  --hud-ink:rgba(255,255,255,.86); --hud-dim:rgba(255,255,255,.5); --hud-line:rgba(255,255,255,.14);
  --bar-h:52px; --track-h:44px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Inter Tight","Noto Sans Tamil","Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  --m:96px; /* slide margin */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--navy);color:var(--hud-ink);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
img{display:block}

/* ---------- shell ---------- */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;z-index:20;padding-top:env(safe-area-inset-top)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:13.5px;color:var(--hud-ink);letter-spacing:.01em}
.brand .x{color:var(--hud-dim);font-weight:400}
.brand svg{width:22px;height:22px;flex:none}
.chapter{justify-self:center;text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hud-ink);white-space:nowrap}
.chapter small{display:block;font-size:10.5px;color:var(--hud-dim);margin-top:2px;letter-spacing:.06em}
.tools{justify-self:end;display:flex;align-items:center;gap:4px}
.tools button{height:34px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--hud-ink);display:flex;align-items:center;gap:7px;transition:background .15s}
.tools button:hover{background:rgba(255,255,255,.08)}
.tools button[aria-pressed="true"]{background:rgba(247,170,0,.18);color:var(--yellow-l)}
.tools svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.count{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--hud-dim);font-size:13px;padding:0 10px}
.count b{color:var(--hud-ink);font-weight:500}

.stage-wrap{position:fixed;inset:var(--bar-h) 0 var(--track-h) 0;display:grid;place-items:center;padding:0 64px;z-index:5}
.frame{position:relative;width:min(100%, calc((100vh - var(--bar-h) - var(--track-h)) * 16 / 9));aspect-ratio:16/9;background:var(--paper);box-shadow:none;overflow:visible;user-select:none}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--paper);color:var(--ink)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;overflow:hidden;background:var(--paper);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s;transform:translateY(24px) scale(.995)}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.slide.leaving{opacity:0;transform:translateY(-18px) scale(1.005)}
.hit{position:absolute;top:0;bottom:0;width:18%;z-index:2;cursor:pointer;display:none}
.frame.hits .hit{display:block}
.hit.prev{left:0;cursor:w-resize}.hit.next{right:0;cursor:e-resize}
.arrow{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:64px;display:grid;place-items:center;z-index:12;color:var(--hud-dim);border-radius:8px;transition:color .15s,background .15s}
.arrow:hover{color:#fff;background:rgba(255,255,255,.08)}
.arrow.prev{left:10px}.arrow.next{right:10px}
.arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arrow[disabled]{opacity:.2;pointer-events:none}

/* reveal stagger */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.slide.on .rv{opacity:1;transform:none}
.slide.on .rv:nth-child(1){transition-delay:.05s}.slide.on .rv:nth-child(2){transition-delay:.15s}.slide.on .rv:nth-child(3){transition-delay:.25s}.slide.on .rv:nth-child(4){transition-delay:.35s}.slide.on .rv:nth-child(5){transition-delay:.45s}.slide.on .rv:nth-child(6){transition-delay:.55s}
.rv[data-d="1"]{transition-delay:.15s!important}.rv[data-d="2"]{transition-delay:.3s!important}.rv[data-d="3"]{transition-delay:.45s!important}.rv[data-d="4"]{transition-delay:.6s!important}.rv[data-d="5"]{transition-delay:.75s!important}

/* chapter track */
.track{position:fixed;inset:auto 0 0 0;height:var(--track-h);padding:0 20px env(safe-area-inset-bottom);display:flex;align-items:center;z-index:20}
.segs{display:flex;width:100%;gap:3px;height:22px;align-items:flex-end}
.seg{position:relative;flex:var(--n) 1 0;height:100%;display:flex;align-items:flex-end}
.seg .fill{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--hud-line);overflow:hidden;transition:height .15s}
.seg .fill i{display:block;height:100%;width:var(--p,0%);background:var(--yellow);transition:width .25s ease}
.seg .name{position:absolute;left:0;bottom:9px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hud-dim);white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .15s,transform .15s;pointer-events:none}
.seg.cur .name,.seg:hover .name{opacity:1;transform:none}
.seg.cur .name{color:#fff}
.seg:hover .fill{height:5px}
.seg.done .fill i{width:100%}
.seg.wide .name{opacity:.8;transform:none}
.seg.cur .name{opacity:1}

/* drawer / grid / toast / landing / film modal */
.drawer{position:fixed;top:var(--bar-h);right:0;bottom:var(--track-h);width:300px;max-width:88vw;background:var(--navy-2);border-left:1px solid var(--hud-line);z-index:18;transform:translateX(100%);transition:transform .22s ease;overflow:auto;padding:14px 10px}
.drawer.open{transform:none}
.drawer h2{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-dim);padding:6px 12px 10px}
.drawer ol{list-style:none}
.drawer li button{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;text-align:left;font-size:13.5px;color:var(--hud-ink);transition:background .12s}
.drawer li button:hover{background:rgba(255,255,255,.06)}
.drawer li.cur button{background:rgba(247,170,0,.18);color:#fff}
.drawer li span{font-family:var(--mono);font-size:13px;color:var(--hud-dim)}
.drawer li.cur span{color:var(--yellow-l)}
.drawer .hint{margin:18px 12px 4px;font-size:12px;line-height:1.7;color:var(--hud-dim)}
.drawer kbd,.landing kbd{display:inline-block;min-width:20px;padding:0 5px;border:1px solid var(--hud-line);border-radius:4px;font:inherit;font-size:11px;text-align:center;color:var(--hud-ink);margin-right:2px}
.grid{position:fixed;inset:var(--bar-h) 0 var(--track-h) 0;background:var(--navy);z-index:15;overflow:auto;padding:20px 24px 40px;display:none}
.grid.open{display:block}
.grid section{margin-bottom:26px}
.grid h3{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-ink);margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.grid h3 span{color:var(--hud-dim)}
.grid .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.grid button{position:relative;aspect-ratio:16/9;background:var(--paper);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s}
.grid button img{width:100%;height:100%;display:block;object-fit:cover}
.grid button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.45)}
.grid button.cur{outline:2px solid var(--yellow);outline-offset:2px}
.grid button em{position:absolute;left:6px;bottom:5px;font-style:normal;font-family:var(--mono);font-size:13px;padding:2px 6px;background:rgba(15,23,55,.85);color:#fff}
.grid button em.live{background:var(--yellow);color:var(--navy)}
.toast{position:fixed;left:50%;bottom:calc(var(--track-h) + 14px);transform:translate(-50%,8px);background:#fff;color:var(--navy);font-size:13px;font-weight:500;padding:8px 14px;border-radius:6px;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:30}
.toast.on{opacity:1;transform:translate(-50%,0)}
.landing{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--navy);padding:24px;text-align:center;transition:opacity .35s ease;overflow:hidden}
.landing canvas{position:absolute;inset:0;width:100%;height:100%}
.landing-in{position:relative}
.landing.closing{opacity:0;pointer-events:none}
.landing .mark{width:60px;height:60px;margin:0 auto 22px}
.landing h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.03em;color:#fff;line-height:1}
.landing h1 .x{color:var(--hud-dim);font-weight:400}
.landing p{margin-top:14px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--hud-dim)}
.landing .hint-line{margin-top:28px;text-transform:none;letter-spacing:0;font-family:var(--font);font-size:12px}
.landing .choices{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.choice-btn{display:flex;align-items:center;gap:9px;height:48px;padding:0 24px;border-radius:999px;font-size:14.5px;font-weight:500;transition:transform .15s,background .15s}
.choice-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.choice-btn:hover{transform:translateY(-1px)}
.choice-btn.primary{background:var(--yellow);color:var(--navy)}
.choice-btn.primary svg{fill:currentColor}
.choice-btn.secondary{background:transparent;color:var(--hud-ink);border:1px solid rgba(255,255,255,.3)}
.videoModal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(15,23,55,.92);padding:24px}
.videoModal.open{display:flex}
.videoModal-inner{position:relative;width:min(100%,1100px)}
.videoClose{position:absolute;top:-42px;right:0;width:34px;height:34px;border-radius:8px;color:#fff;font-size:22px;display:grid;place-items:center}
.videoWrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.videoWrap video{position:absolute;inset:0;width:100%;height:100%}

/* ---------- floor-map navigator (persistent) ---------- */
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.mapnav{position:fixed;inset:var(--bar-h) 0 var(--track-h) 0;z-index:17;background:rgba(15,23,55,.96);display:none}
.mapnav.open{display:block}
.mapnav .close{position:absolute;right:24px;top:18px;width:38px;height:38px;border-radius:8px;color:#fff;font-size:24px;display:grid;place-items:center;z-index:3}
.mapnav .title{position:absolute;left:32px;top:22px;color:#fff;z-index:3}
.mapnav .title h2{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em}
.mapnav .title p{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hud-dim);margin-top:6px}
.mapnav .map3d{position:absolute;inset:0}

/* =================================================================
   SLIDE DESIGN SYSTEM (1920 × 1080)
   ================================================================= */
.g{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:100% 100%,calc((1920px - 2 * var(--m)) / 12) 100%;background-position:0 0,var(--m) 0;opacity:.35;mask-image:linear-gradient(90deg,transparent 0,#000 var(--m),#000 calc(100% - var(--m)),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--m),#000 calc(100% - var(--m)),transparent 100%)}
.dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--dotc,rgba(18,20,43,.18)) 2px,transparent 2.4px);background-size:48px 48px;background-position:24px 24px}
.dark{background:var(--navy);color:#fff}
.dark .g{--rule:rgba(255,255,255,.12)}
.dark .dots{--dotc:rgba(255,255,255,.16)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.dark .mono{color:rgba(255,255,255,.55)}
.rule{height:1px;background:var(--rule)}
.dark .rule{background:rgba(255,255,255,.18)}
h1.d,h2.d,.d{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.92}
.d.xl{font-size:190px}.d.l{font-size:140px}.d.m{font-size:96px}.d.s{font-size:64px}
.d .y{color:var(--yellow)}.d .b{color:var(--blue)}.d .dim{color:var(--ink-3);font-weight:500}
.dark .d .dim{color:rgba(255,255,255,.4)}
.lead{font-size:26px;line-height:1.35;color:var(--ink-2);max-width:620px}
.dark .lead{color:rgba(255,255,255,.78)}
.small{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:420px}
.dark .small{color:rgba(255,255,255,.7)}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.tag i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--blue))}
.dark .tag{color:rgba(255,255,255,.7)}

/* head slide */
.s-head{height:100%;position:relative}
.s-head .top{position:absolute;left:var(--m);right:var(--m);top:84px;display:flex;justify-content:space-between;align-items:baseline}
.s-head .top .rule{position:absolute;left:0;right:0;top:34px}
.s-head .num{position:absolute;left:var(--m);top:150px;font-family:var(--display);font-weight:700;font-size:420px;line-height:.8;letter-spacing:-.06em;color:var(--paper-2)}
.dark.s-head .num{color:rgba(255,255,255,.06)}
.s-head h2{position:absolute;left:var(--m);bottom:178px;max-width:1300px}
.s-head .sub{position:absolute;left:var(--m);bottom:96px;font-size:22px;color:var(--ink-2);max-width:900px}
.dark.s-head .sub{color:rgba(255,255,255,.7)}
.s-head .art{position:absolute;right:var(--m);top:150px;width:900px;height:640px;display:grid;place-items:center}
.s-head .art img,.s-head .art svg{max-width:100%;max-height:100%}

/* statement slide */
.s-state{height:100%;position:relative;padding:130px var(--m) 100px;display:flex;flex-direction:column}
.s-state h2{margin-top:26px;max-width:1500px}
.s-state .foot{margin-top:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.s-state .foot>div{grid-column:span 4}
.s-state .foot p{font-size:18px;line-height:1.45;color:var(--ink-2)}
.dark.s-state .foot p{color:rgba(255,255,255,.7)}

/* full-bleed photo */
.s-photo{height:100%;position:relative;background:#0b0e22}
.s-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-photo.two img{width:50%}.s-photo.two img+img{left:50%}
.s-photo .cap{position:absolute;left:var(--m);bottom:70px;color:#fff;max-width:900px}
.s-photo .cap .mono{color:rgba(255,255,255,.6)}
.s-photo .cap h3{font-family:var(--display);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1;margin-top:10px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.s-photo .cap p{margin-top:12px;font-size:19px;color:rgba(255,255,255,.85);max-width:700px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.s-photo .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,34,0) 45%,rgba(11,14,34,.75) 100%)}
.s-photo.fit{background:var(--paper)}
.s-photo.fit img{object-fit:contain;padding:110px var(--m) 220px}
.s-photo.fit .cap{color:var(--ink)}.s-photo.fit .cap .mono{color:var(--ink-2)}.s-photo.fit .cap p{color:var(--ink-2);text-shadow:none}.s-photo.fit .cap h3{text-shadow:none}.s-photo.fit .veil{display:none}

/* showcase root */
.s-show{height:100%;position:relative}
.hd{position:absolute;left:var(--m);top:84px;z-index:5;pointer-events:none;max-width:1100px}
.hd .mono{display:block;margin-bottom:14px}
.hd h2{pointer-events:auto}
.hd .sub{margin-top:16px;font-size:20px;color:var(--ink-2);max-width:620px;line-height:1.4}
.dark .hd .sub{color:rgba(255,255,255,.7)}
.ctl{position:absolute;left:var(--m);bottom:56px;z-index:5;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px 10px 12px;background:rgba(255,255,255,.72);border:1px solid var(--rule);border-radius:14px;backdrop-filter:blur(6px)}
.ctl::before{content:"Try it";font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:7px 11px;border-radius:999px;font-weight:500}
.dark .ctl{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.slide.on .ctl{animation:ctlin .7s cubic-bezier(.2,.7,.2,1) .6s both}
@keyframes ctlin{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.ctl.right{left:auto;right:var(--m)}
.ctl .lbl{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.dark .ctl .lbl{color:rgba(255,255,255,.5)}
.seg-btn{display:inline-flex;border-bottom:1px solid var(--rule)}
.seg-btn button{height:40px;padding:0 14px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);position:relative;transition:color .15s}
.seg-btn button[aria-pressed="true"]{color:var(--ink)}
.seg-btn button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--yellow)}
.dark .seg-btn{border-color:rgba(255,255,255,.2)}.dark .seg-btn button{color:rgba(255,255,255,.5)}.dark .seg-btn button[aria-pressed="true"]{color:#fff}
.rng{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.rng input{width:240px;accent-color:var(--ink);height:2px}
.dark .rng{color:rgba(255,255,255,.5)}.dark .rng input{accent-color:var(--yellow)}
.btn{height:40px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.btn:hover{background:var(--ink);color:#fff}
.dark .btn{border-color:rgba(255,255,255,.5);color:#fff}.dark .btn:hover{background:#fff;color:var(--navy)}
.hint{position:absolute;right:var(--m);bottom:70px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-l);background:var(--navy);padding:10px 14px;border-radius:999px;z-index:5;display:flex;align-items:center;gap:10px}
.hint::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(247,170,0,.6);animation:hintping 1.6s ease-out infinite}
@keyframes hintping{0%{box-shadow:0 0 0 0 rgba(247,170,0,.6)}100%{box-shadow:0 0 0 10px rgba(247,170,0,0)}}
.dark .hint{background:var(--yellow);color:var(--ink)}.dark .hint::before{background:var(--ink);box-shadow:0 0 0 0 rgba(18,20,43,.5);animation:none}
.callout{position:absolute;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(15,23,55,.85);padding:8px 12px;white-space:nowrap}

/* 3D stacks */
.scene3d{position:absolute;inset:0;perspective:2200px;display:grid;place-items:center;touch-action:none;cursor:grab}
.scene3d:active{cursor:grabbing}
.stack3d{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));transition:transform .08s linear}
.stack3d.anim{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.stack3d .lyr{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--k) * var(--gap,0px)));transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .6s}
.stack3d .lyr .ply{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;transform:translateZ(calc(var(--t,0) * 1px))}
.stack3d .lyr .ply.face{filter:drop-shadow(0 22px 18px rgba(20,24,50,.45)) drop-shadow(0 4px 4px rgba(20,24,50,.25))}
.stack3d .lyr .tag{position:absolute;left:calc(100% + 30px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);opacity:var(--tagop,0);transition:opacity .4s}
.stack3d .lyr .tag::before{content:"";position:absolute;right:calc(100% + 10px);top:50%;width:22px;height:1px;background:currentColor}

/* 3D floor map */
.map3d{position:absolute;inset:0;perspective:2800px;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:grab}
.map3d .slab{position:relative;width:1000px;height:1030px;transform-style:preserve-3d;transform:translateY(var(--ty,60px)) rotateX(var(--rx,58deg)) rotateZ(var(--rz,-28deg)) scale(var(--sc,1));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.map3d.drag .slab{transition:none}
.map3d .base{position:absolute;inset:0;background:url(img/plan_base_t.png) center/contain no-repeat;opacity:1;filter:contrast(1.3)}
.map3d .under{display:none}
.map3d .shadow{display:none}
.map3d .fam{position:absolute;inset:0;background:var(--c);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform:translateZ(calc(var(--t) * 1px));opacity:var(--op,1);transition:opacity .4s}
.map3d .fam.top{filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.map3d .grey{position:absolute;inset:0;background:rgba(242,240,234,.72);clip-path:polygon(var(--poly));transform:translateZ(14px);pointer-events:none}
.map3d .zone{position:absolute;transform-style:preserve-3d}
.map3d .zone .lab{position:absolute;left:0;top:0;transform:rotateZ(calc(-1 * var(--rz,-28deg))) rotateX(calc(-1 * var(--rx,58deg)));transform-origin:0 100%;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.9);padding:6px 10px;white-space:nowrap;border-left:3px solid var(--yellow)}
.map3d .zone .lab.dim{color:var(--ink-3);border-color:#B9B4A6}
.map3d .pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;transform-style:preserve-3d;z-index:3}
.map3d .pin .bb{position:absolute;left:0;bottom:0;transform-origin:0 100%;transform:rotateZ(calc(-1 * var(--rz,-28deg))) rotateX(calc(-1 * var(--rx,58deg)))}
.map3d .pin .stem{position:absolute;left:-1px;bottom:0;width:2px;height:var(--h,70px);background:var(--c,var(--ink))}
.map3d .pin .tip{position:absolute;left:-30px;bottom:var(--h,70px);width:60px;height:42px;background:#fff;box-shadow:0 8px 20px rgba(15,23,55,.3);border-top:3px solid var(--c,var(--ink));cursor:pointer;transition:transform .15s;transform-origin:50% 100%;overflow:hidden}
.map3d .pin .tip img{width:100%;height:100%;object-fit:cover}
.map3d .pin .tip span{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--ink);padding:2px 4px;display:none;white-space:normal;line-height:1.2}
.map3d .pin:hover{z-index:9}.map3d .pin:hover .tip{transform:scale(2.2)}.map3d .pin:hover .tip span{display:block}
.map3d .pin.cur .tip{outline:3px solid var(--yellow)}
.map3d .legend{position:absolute;left:var(--m);bottom:64px;display:flex;flex-direction:column;gap:10px;z-index:5}
.map3d .legend button{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:opacity .2s}
.map3d .legend button[aria-pressed="false"]{opacity:.35}
.map3d .legend i{width:26px;height:4px;background:var(--c)}
.mapnav .map3d .legend button{color:rgba(255,255,255,.8)}
.mapnav .map3d .base{filter:invert(1) brightness(2.2);opacity:1}
.mapnav .map3d .grey{background:rgba(255,255,255,.12)}
.mapnav .map3d .pin.cur .tip{transform:scale(1.9);outline:3px solid var(--yellow);box-shadow:0 0 0 10px rgba(247,170,0,.25)}
.mapnav .map3d .pin.cur .tip span{display:block}
.map3d .here{position:absolute;right:var(--m);bottom:64px;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em;color:#fff;text-align:right;z-index:5}
.map3d .here span{display:block;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}

/* kolam */
.kolam-st{position:absolute;inset:0;display:grid;place-items:center}
.kolam-st svg{width:100%;height:100%}
.kolam-st .dot{fill:#fff;opacity:0}
.kolam-st .line{fill:none;stroke:var(--yellow);stroke-width:.075;stroke-linecap:round;stroke-linejoin:round}
.field{position:absolute;inset:0}
.field canvas{position:absolute;inset:0;width:100%;height:100%}

/* process strip */
.proc{position:absolute;inset:0}
.proc .stage-img{position:absolute;left:var(--m);right:var(--m);top:250px;bottom:190px}
.proc .stage-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s;transform:scale(.985)}
.proc .stage-img img.on{opacity:1;transform:none}
.proc .steps{position:absolute;left:var(--m);right:var(--m);bottom:70px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px}
.proc .steps button{text-align:left;padding-top:14px;border-top:2px solid var(--rule);transition:border-color .2s}
.proc .steps button .n{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.proc .steps button .t{display:block;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;margin-top:6px;color:var(--ink-3);transition:color .2s}
.proc .steps button[aria-pressed="true"]{border-color:var(--ink)}
.proc .steps button[aria-pressed="true"] .t{color:var(--ink)}
.dark .proc .steps button{border-color:rgba(255,255,255,.2)}.dark .proc .steps button[aria-pressed="true"]{border-color:#fff}.dark .proc .steps button[aria-pressed="true"] .t{color:#fff}

/* compare */
.cmp{position:absolute;inset:0;overflow:hidden;background:#222;touch-action:none;cursor:ew-resize}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp img.b{clip-path:inset(0 0 0 var(--x,50%))}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;height:auto;padding:0;display:block;z-index:1;background:#fff;transform:translateX(-50%)}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:64px;height:64px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.35);color:var(--navy);font-size:22px}
.cmp .lab{position:absolute;bottom:70px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(15,23,55,.8);padding:8px 12px}
.cmp .lab.a{left:var(--m)}.cmp .lab.b{right:var(--m)}

/* lenticular */
.lent{position:absolute;left:780px;right:var(--m);top:0;bottom:0;display:grid;place-items:center;perspective:1600px}
.lent .fr{position:relative;width:640px;height:640px;background:#111;border:16px solid #F7F5F0;box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12);overflow:hidden;touch-action:none;cursor:ew-resize;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .12s ease-out}
.lent .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .08s}
.lent .fr img.on{opacity:1}
.lent .fr .lens{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px);pointer-events:none;mix-blend-mode:screen}
.lent .fr .sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent calc(var(--p,50%) - 18%),rgba(255,255,255,.16) var(--p,50%),transparent calc(var(--p,50%) + 18%));pointer-events:none}

/* infinity */
.inf{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.inf .wall{position:relative;background:#EFECE4 url(img/infinite_art.png) center 50%/86% auto no-repeat;overflow:hidden}
.inf .box{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:760px;height:200px}
.inf .word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:128px;letter-spacing:.04em;color:#F7AA00;opacity:calc(1 - var(--i) * .09);text-shadow:0 0 18px rgba(247,170,0,.55);transition:opacity .6s}
.inf .word.front{color:#FFD26A;text-shadow:0 0 26px rgba(247,170,0,.9),0 0 3px #fff;-webkit-text-stroke:2px #fff}
.inf.off .word{opacity:0}.inf.off .word.front{opacity:1;color:#B9B2A2;text-shadow:none;-webkit-text-stroke:0}
.inf .diag{position:relative;background:var(--navy);display:grid;place-items:center}
.inf .diag svg{width:86%;height:auto}

/* doodle wall */
.dood{position:absolute;inset:0}
.dood .fr{position:absolute;background:#fff;padding:10px;box-shadow:0 18px 40px rgba(15,23,55,.18);transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,z-index 0s;cursor:pointer}
.dood .fr img{width:100%;height:100%;object-fit:cover}
.dood .fr:hover,.dood .fr.open{transform:rotate(0deg) scale(1.6);z-index:9;box-shadow:0 40px 80px rgba(15,23,55,.35)}
.dood .fr .cap{position:absolute;left:0;right:0;bottom:-40px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s;text-align:center;white-space:nowrap}
.dood .fr:hover .cap,.dood .fr.open .cap{opacity:1}

/* end */
/* thank you: the film plays on the right, where the cover's loop plays */
.end-film{position:absolute;right:var(--m);top:96px;width:480px;height:853px;overflow:hidden;background:#000 url(img/film_poster.jpg) center/cover no-repeat;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.end-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.end-snd{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:50%;background:rgba(15,23,55,.7);color:#fff;display:grid;place-items:center;z-index:2;transition:background .2s}
.end-snd:hover{background:rgba(15,23,55,.92)}
.end-snd svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.end-snd .on{display:none}.end-snd.on .on{display:inline}.end-snd.on .off{display:none}

/* strip */
.strip{position:absolute;left:0;right:0;top:250px;bottom:120px;overflow:hidden;cursor:grab}
.strip .row{position:absolute;left:var(--m);top:0;bottom:0;display:flex;gap:40px;align-items:center;will-change:transform}
.strip .row img{height:100%;width:auto;flex:none}

@media (max-width:820px){
  :root{--bar-h:48px;--track-h:40px}
  .bar{grid-template-columns:auto 1fr auto;padding:0 12px;gap:8px}
  .brand .txt{display:none}.chapter{font-size:10px}.chapter small{display:none}
  .tools .lbl{display:none}.tools button{padding:0 9px}.count{padding:0 4px}
  .stage-wrap{padding:0 8px}.arrow{display:none}.track{padding:0 12px env(safe-area-inset-bottom)}
  .grid{padding:14px 12px 30px}.grid .row{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .landing .choices{flex-direction:column;width:100%;max-width:280px}.choice-btn{width:100%;justify-content:center}
  .mini{width:96px;height:100px;right:10px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* autoplay progress */
.autobar{position:fixed;left:0;right:0;top:calc(var(--bar-h) + env(safe-area-inset-top));height:2px;z-index:21;pointer-events:none}
.autobar i{display:block;height:100%;width:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0);opacity:.85}
.autobar.off{display:none}

/* kolam engine drawings */
.kol{width:100%;height:100%;overflow:visible;display:block}
.kol .kd{fill:#fff}
.kol .kl{fill:none;stroke:var(--yellow);stroke-width:.11;stroke-linecap:round;stroke-linejoin:round}
.kol .khit{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,0);stroke-width:.04;cursor:pointer;transition:fill .15s,stroke .15s}
.kol .khit:hover{fill:rgba(247,170,0,.28);stroke:rgba(247,170,0,.9)}
/* statistics wall: magnetic stems */
.stem{fill:#E7E3D9;cursor:pointer;transition:fill .25s}
.stem:hover{fill:#CFC9BA}
.stem.on{fill:#1B2A6B}
.stem.on:hover{fill:#2B3F8C}
.stepper{display:flex;gap:6px}
.stepper button{height:30px;min-width:34px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;font-family:var(--mono);font-size:13px;color:var(--ink);background:#fff;transition:background .15s,color .15s}
.stepper button:hover{background:var(--ink);color:#fff}
/* chapter opener with a photographic hero */
.s-head .art.hero{right:0;top:0;width:1080px;height:100%;display:block}
.s-head .art.hero img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:60% 50%}
.s-head .art.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:240px;background:linear-gradient(90deg,var(--paper),rgba(242,240,234,0));z-index:1}
.s-head:has(.art.hero) h2{max-width:760px}
.s-head:has(.art.hero) .sub{max-width:640px}
.proc .steps.many button .t{font-size:20px}

/* chapter head: second heading line */
.s-head.has-deck h2{bottom:246px}
.s-head .deck{position:absolute;left:var(--m);bottom:168px;max-width:760px;font-family:var(--display);font-weight:700;font-size:58px;line-height:1.05;letter-spacing:-.03em;color:var(--ink-2)}
/* mural: meet the cast */
.mz{position:absolute;left:0;right:0;top:0;height:860px;overflow:hidden;background:var(--paper);cursor:pointer}
.mz-world{position:absolute;left:0;top:0;width:4000px;height:2801px;transform-origin:0 0;will-change:transform}
.mz-world img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mz-sharp{opacity:0;transition:opacity 1.2s cubic-bezier(.65,0,.35,1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.mz-band{position:absolute;left:var(--m);right:var(--m);top:860px;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:40px;border-top:1px solid var(--rule)}
.mz-cap{min-width:0}
.mz-cap .mono{color:var(--ink-2)}
.mz-name{font-family:var(--display);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1;margin-top:8px}
.mz-line{margin-top:8px;font-size:21px;color:var(--ink-2);max-width:880px}
.mz-cap.in{animation:mzcap .45s cubic-bezier(.2,.7,.2,1)}
@keyframes mzcap{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.mz-ticks{flex:none;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.mz-ticks .mono{color:var(--ink-2)}
.mz-ticks .row{display:flex;gap:6px}
.mz-ticks button{width:30px;height:24px;position:relative}
.mz-ticks button::after{content:"";position:absolute;left:0;right:0;top:10px;height:4px;border-radius:2px;background:var(--rule);transition:background .2s,height .2s,top .2s}
.mz-ticks button:hover::after{background:var(--ink-3)}
.mz-ticks button.on::after{background:var(--yellow);height:6px;top:9px}
/* mural: the making */
.mk-row{position:absolute;left:var(--m);top:212px;display:grid;grid-template-columns:repeat(3,428px);gap:36px}
.mk{margin:0}
.mk-frame{position:relative;aspect-ratio:9/16;background:#E6E2D8;overflow:hidden;border-radius:4px}
.mk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.mk-row.in .mk img{opacity:1}
.mk figcaption{margin-top:16px;display:flex;gap:10px;align-items:baseline;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.mk figcaption .mono{font-size:13px}
/* concept build-up: pictures stand on one line; the one in focus zooms in */
.bu-row{position:absolute;left:var(--m);right:var(--m);bottom:220px;height:600px;display:flex;gap:40px;align-items:flex-end}
.bu{margin:0;flex:none;position:relative;cursor:pointer;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.bu-frame{position:relative;width:100%;overflow:hidden;border-radius:4px;background:#E6E2D8;box-shadow:0 0 0 1px var(--rule)}
.bu-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.bu-row.in .bu-frame img{opacity:1}
.bu.on .bu-frame img{transform:scale(1.03)}
.bu:not(:first-child)::before{content:"→";position:absolute;left:-20px;bottom:28px;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:18px;display:grid;place-items:center;z-index:2}
.bu figcaption{position:absolute;left:0;top:100%;width:100%;padding-top:18px}
.bu figcaption .mono{color:var(--ink-2)}
.bu figcaption .w{display:block;margin-top:6px;font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.03em;line-height:1;white-space:nowrap;color:var(--ink);transition:color .4s}
.bu figcaption p{margin-top:8px;font-size:17px;line-height:1.4;color:var(--ink-2);max-width:520px;transition:opacity .4s}
.bu-row.focus .bu:not(.on) .w{color:var(--ink-3)}
.bu-row.focus .bu:not(.on) figcaption p{opacity:0}

/* no frame line or shadow around the slides */
.frame:focus,.frame:focus-visible{outline:none}
/* top bar and chapter track never wrap or collide */
.count,.tools button{white-space:nowrap}
.seg.cur{z-index:2}
.seg.cur .name{background:var(--navy);padding-right:10px}
.seg.cur + .seg .name{opacity:0}
/* lenticular: the four prints as big headings under the frame */
.lent-tabs{position:absolute;left:var(--m);top:470px;display:flex;flex-direction:column;gap:4px;z-index:5}
.lent-tab{position:relative;display:flex;align-items:baseline;gap:22px;padding:8px 0 8px 26px;color:rgba(255,255,255,.3);text-align:left;transition:color .25s}
.lent-tab .mono{width:118px;font-size:13px;color:inherit}
.lent-tab .w{font-family:var(--display);font-weight:700;font-size:62px;letter-spacing:-.035em;line-height:1}
.lent-tab:hover{color:rgba(255,255,255,.7)}
.lent-tab.on{color:#fff}
.lent-tab::before{content:"";position:absolute;left:0;top:14px;bottom:10px;width:6px;border-radius:3px;background:var(--yellow);transform:scaleY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lent-tab.on::before{transform:scaleY(1)}


/* photo slides with no caption */
.s-photo.bare .veil,.s-photo.bare .cap{display:none}
/* process pages with a one-line sub under the heading (meeting rooms); Tamil names in yellow */
.proc.sub .stage-img{top:300px}
.hd h2 .ta{color:var(--yellow);margin-left:.3em}

/* chapter openers, one system: a white page edge to edge, the number top left, the title bottom left.
   The art hangs from the number's top line and keeps the right margin; art that is cut sits in the bottom-right corner and runs off the page there. */
.s-head{background:#fff}
.s-head .num{color:#F1F0EC}
.s-head:has(.art:not(.hero)) h2,.s-head:has(.art.line) h2,.s-head:has(.art.bleed) h2{max-width:960px}
.s-head .art:not(.hero),.s-head .art.line,.s-head .art.bleed{left:700px;right:var(--m);top:150px;bottom:auto;width:auto;height:780px;display:flex;justify-content:flex-end;align-items:flex-start}
.s-head .art.bleed{right:0;height:930px}
.s-head .art.line.wide{height:470px}
.s-head .art.line:not(.wide){left:1044px}
.s-head .art.line img,.s-head .art.bleed img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:100% 0;mix-blend-mode:multiply}
.s-head .art.bleed img{object-position:100% 100%}
.s-head .art.line::before,.s-head .art.bleed::before{display:none}
.s-head .art.hero::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}

/* the page around the slide takes the slide's colour (set by the deck); the frame itself is see-through */
.stage-wrap{transition:background-color .5s cubic-bezier(.2,.7,.2,1)}
.frame,.stage{background:transparent}
body.lit .arrow{color:rgba(18,20,43,.4)}
body.lit .arrow:hover{color:var(--ink);background:rgba(18,20,43,.06)}
/* opener subtitles wrap early so the art in the corner keeps its distance */
.s-head .sub,.s-head:has(.art.hero) .sub{max-width:560px}

/* opener art reaches the window's right edge: the deck sets --bleed-r to the width of the side area, in slide pixels.
   The stage-wrap clips at the window; every other slide still clips itself. */
.stage-wrap{overflow:hidden}
.slide:has(> .s-head){overflow:visible}
.s-head .art.bleed{right:calc(0px - var(--bleed-r, 0px));bottom:0;height:auto;align-items:flex-end}

/* the four lenticular frames: whole prints, on the paper */
.quad-row{position:absolute;left:var(--m);right:var(--m);top:260px;bottom:110px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:end}
.quad-fig{position:relative;margin:0;aspect-ratio:1/1.075;overflow:hidden;background:#0b0e22}
.quad-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quad-fig figcaption{position:absolute;left:0;right:0;top:100%;margin-top:14px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* two photos, the first wide on top and the second below it */
.s-photo.two.stack img{width:100%;height:62%;left:0}.s-photo.two.stack img+img{top:62%;height:38%;object-position:50% 40%}

/* process in loop mode: the image fills the page and dissolves on a beat; the steps read as a caption strip */
.proc.loop .stage-img{top:230px;bottom:150px}
.proc.loop .stage-img img{transition:opacity .55s ease-in-out;transform:none}
.proc .steps.quiet button{pointer-events:none}
.proc .steps.quiet button .t{font-size:20px}
/* carousel */
.car{position:absolute;inset:0;background:#0b0e22}
.car img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease-in-out}
.car img.on{opacity:1}
.s-show .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,34,0) 50%,rgba(11,14,34,.72) 100%);pointer-events:none}
.s-show .cap{position:absolute;left:var(--m);bottom:70px;color:#fff;max-width:900px;z-index:2}
.s-show .cap .mono{color:rgba(255,255,255,.6)}
.s-show .cap h3{font-family:var(--display);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1;margin-top:10px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.s-show .cap .which{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.car-dots{position:absolute;right:var(--m);bottom:84px;display:flex;gap:8px;z-index:3}
.car-dots button{width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);transition:background .3s}
.car-dots button.on{background:var(--yellow)}
/* film */
.filmclip,.filmstill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmclip{transition:opacity 1.4s ease-in-out}
.s-show.done .filmclip{opacity:0}
/* meeting rooms: the glass fills the page */
.proc.sub .stage-img{top:280px;bottom:170px;left:var(--m);right:var(--m)}

/* meeting rooms: the anatomy of the design */
.rs{position:absolute;left:var(--m);top:250px;width:1728px;height:750px;overflow:hidden;background:var(--paper-2);cursor:pointer;transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),width .9s cubic-bezier(.65,0,.35,1),height .9s cubic-bezier(.65,0,.35,1)}
.rs.s5{left:0;top:0;width:1920px;height:1080px}
.rs-svg{position:absolute;inset:0;width:100%;height:100%}
.rs-dots circle{fill:var(--ink);opacity:0;transition:opacity .9s}
.rs.s2 .rs-dots circle,.rs.s3 .rs-dots circle{opacity:.55}
.rs.s4 .rs-dots circle{opacity:.22}
.rs-lat *{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-dasharray:420;stroke-dashoffset:420;opacity:0;transition:opacity .2s}
.rs.s3 .rs-lat *{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) var(--d),opacity .2s var(--d)}
.rs.s3 .rs-lat .acc{fill:var(--yellow);stroke:var(--yellow)}
.rs.s4 .rs-lat *{opacity:0;stroke-dashoffset:0;transition:opacity .8s}
.rs-art,.rs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease-in-out}
.rs-art{object-fit:contain;background:var(--paper-2)}
.rs.s4 .rs-art{opacity:1}
.rs.s5 .rs-photo{opacity:1}
.rs-insp{position:absolute;top:0;right:0;width:1728px;height:750px;overflow:hidden;opacity:1;transition:top .9s cubic-bezier(.65,0,.35,1),right .9s cubic-bezier(.65,0,.35,1),width .9s cubic-bezier(.65,0,.35,1),height .9s cubic-bezier(.65,0,.35,1),opacity .6s}
.rs-insp img{width:100%;height:100%;object-fit:cover}
.rs.s2 .rs-insp,.rs.s3 .rs-insp{top:28px;right:28px;width:300px;height:300px;box-shadow:0 22px 50px rgba(18,20,43,.28)}
.rs.s4 .rs-insp,.rs.s5 .rs-insp{top:28px;right:28px;width:300px;height:300px;opacity:0}
.rs-cap{position:absolute;left:36px;bottom:30px;z-index:3;color:var(--ink);max-width:900px}
.rs-cap .mono{display:block;color:var(--ink-2)}
.rs-cap b{display:block;font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.025em;line-height:1.05;margin-top:6px}
.rs-cap.in{animation:mzcap .45s cubic-bezier(.2,.7,.2,1)}
.rs.s1 .rs-cap,.rs.s5 .rs-cap{color:#fff}
.rs.s1 .rs-cap .mono,.rs.s5 .rs-cap .mono{color:rgba(255,255,255,.7)}
.rs.s1 .rs-cap b,.rs.s5 .rs-cap b{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.rs.s5 .rs-cap{left:var(--m);bottom:70px}
.s-show.hero .hd h2,.s-show.hero .hd .mono{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.s-show.hero .hd .sub{color:rgba(255,255,255,.8);text-shadow:0 1px 12px rgba(0,0,0,.5)}

/* lenticular frames: three stages */
.ls-hero{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out}
.ls-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ls-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,34,0) 55%,rgba(11,14,34,.7) 100%)}
.ls-hero .cap{position:absolute;left:var(--m);bottom:70px;color:#fff;z-index:2}
.ls-hero .cap .mono{color:rgba(255,255,255,.6)}
.ls-hero .cap h3{font-family:var(--display);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1;margin-top:10px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.s-show.st1 .ls-hero{opacity:1}
.ls-hd{opacity:0;transition:opacity .6s}
.s-show.st2 .ls-hd,.s-show.st3 .ls-hd{opacity:1}
.ls-hd h2{color:#fff}.ls-hd .sub{color:rgba(255,255,255,.7);max-width:720px}
.ls-loops{position:absolute;left:var(--m);right:var(--m);top:330px;bottom:80px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px;align-items:end;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.s-show.st2 .ls-loops{opacity:1;transform:none}
.ls-loops figure{margin:0;position:relative}
.ls-loops img{width:100%;height:auto;display:block;border-radius:3px}
.ls-loops figcaption{margin-top:16px;display:flex;gap:12px;align-items:baseline;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em;color:#fff}
.ls-loops figcaption .mono{color:rgba(255,255,255,.5)}
.ls-real{position:absolute;left:var(--m);right:var(--m);top:330px;bottom:80px;display:grid;grid-template-columns:440px 1fr;gap:48px;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.s-show.st3 .ls-real{opacity:1;transform:none}
.ls-real .clip,.ls-real .close{position:relative;overflow:hidden;border-radius:3px;background:#000}
.ls-real .clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ls-real .close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ================= v3 · Studio Counsel version ================= */
/* One interaction language: a yellow dot and one mono verb on a hairline, bottom left, the same place on every slide.
   No pills, no boxes, no "Try it". The dot breathes while the slide rests and is the only thing moving; a hand stops it. */
.ctl{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:14px 0 0;backdrop-filter:none;gap:22px;bottom:58px;opacity:.62;transition:opacity .3s}
.dark .ctl{background:none;border-top-color:rgba(255,255,255,.22)}
.ctl:hover,.touched .ctl,.ctl.hands{opacity:1}
.ctl::before{content:"";order:-2;width:9px;height:9px;padding:0;border-radius:50%;background:var(--yellow);flex:none;animation:cue 2.6s ease-in-out infinite}
.ctl::after{content:attr(data-verb);order:-1;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-left:-10px;margin-right:6px}
.dark .ctl::after{color:#fff}
.ctl .cue-txt{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.dark .ctl .cue-txt{color:rgba(255,255,255,.55)}
.hint{left:var(--m);right:auto;bottom:58px;background:none;padding:14px 0 0;border-top:1px solid var(--rule);border-radius:0;color:var(--ink-2);font-size:12.5px;gap:12px}
.hint::before{width:9px;height:9px;box-shadow:none;animation:cue 2.6s ease-in-out infinite}
.dark .hint{background:none;color:rgba(255,255,255,.75);border-top-color:rgba(255,255,255,.22)}.dark .hint::before{background:var(--yellow);animation:cue 2.6s ease-in-out infinite}
.touched .ctl::before,.touched .hint::before{animation:none}
@keyframes cue{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(247,170,0,0)}50%{transform:scale(1.3);box-shadow:0 0 0 7px rgba(247,170,0,.16)}}
/* sliders: a hairline with a yellow dot for a knob */
.rng input{-webkit-appearance:none;appearance:none;width:280px;height:22px;background:transparent;accent-color:auto;cursor:grab}
.rng input:active{cursor:grabbing}
.rng input::-webkit-slider-runnable-track{height:1px;background:var(--ink-3)}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--yellow);margin-top:-9.5px;box-shadow:0 0 0 5px rgba(247,170,0,.18)}
.rng input::-moz-range-track{height:1px;background:var(--ink-3)}
.rng input::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--yellow)}
.dark .rng input::-webkit-slider-runnable-track{background:rgba(255,255,255,.4)}
.seg-btn{border-bottom:0}
.seg-btn button[aria-pressed="true"]::after{left:50%;right:auto;bottom:2px;width:6px;height:6px;margin-left:-3px;border-radius:50%}
.btn{border-radius:0}
/* chrome steps back when nobody is touching anything */
.bar,.track,.arrow,.autobar{transition:opacity .5s}
body.idle .bar,body.idle .track,body.idle .arrow{opacity:.3}
/* openers: the kolam grid sits under every opener */
.s-head::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(18,20,43,.11) 1.6px,transparent 2.2px);background-size:48px 48px;background-position:24px 24px}
.dark.s-head::before,.s-head.dark::before{background-image:radial-gradient(circle,rgba(255,255,255,.1) 1.6px,transparent 2.2px)}
/* half-openers: a sub-piece inside a chapter keeps the opener page but not the big number */
.s-head.half .num{display:none}
.s-head.half h2.d.l{font-size:140px}
/* Old / New switch in the top bar */
.ver{display:inline-flex;align-items:center;gap:2px;margin-right:6px;padding:3px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
.ver a{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--hud-dim);padding:5px 10px;border-radius:999px;text-decoration:none}
.ver a.cur{background:var(--yellow);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ctl::before,.hint::before{animation:none}}
/* ---------- scrub rail ---------- */
.rail{position:relative;flex:1;min-width:700px;height:64px;cursor:pointer;touch-action:none;outline:none}
.rail-line{position:absolute;left:0;right:0;top:12px;height:1px;background:var(--ink-3)}
.rail-fill{position:absolute;left:0;top:11.5px;height:2px;background:var(--ink);width:0}
.dark .rail-line{background:rgba(255,255,255,.35)}.dark .rail-fill{background:#fff}
.rail-stop{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;cursor:pointer}
.rail-stop:first-of-type{transform:none;align-items:flex-start;padding-left:0}
.rail-stop:last-of-type{transform:translateX(-100%);align-items:flex-end;padding-right:0}
.rail-stop i{width:9px;height:9px;margin-top:8px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink-3);transition:background .2s,border-color .2s}
.rail-stop.on i{background:var(--ink);border-color:var(--ink)}
.rail-stop .n{display:none}
.rail-stop .t{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.rail-stop.on .t{color:var(--ink)}
.rail-knob{position:absolute;top:12px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 6px rgba(247,170,0,.2);pointer-events:none;z-index:2}
.rail:focus-visible .rail-knob{outline:2px solid var(--ink);outline-offset:3px}
.ctl.hands{left:var(--m);right:var(--m);opacity:1;align-items:flex-start}
.ctl.hands::before{margin-top:7px}.ctl.hands::after{margin-top:3px}
/* ---------- anatomy (meeting rooms) ---------- */
.an{background:var(--paper)}
.an .an-panel{position:absolute;transform-origin:0 0;transition:transform 1.6s cubic-bezier(.65,0,.35,1);z-index:2}
.an .an-art{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:var(--paper)}
.an.hero .an-art{overflow:visible}
.an .an-l{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;user-select:none}
.an .an-lat,.an .an-dots{opacity:1}
.an .an-dots circle{fill:#12142B}
.an .an-lat{filter:invert(1)}
.an .an-hand{-webkit-mask-image:linear-gradient(100deg,#000 calc(var(--wipe,110%) - 8%),transparent var(--wipe,110%));mask-image:linear-gradient(100deg,#000 calc(var(--wipe,110%) - 8%),transparent var(--wipe,110%))}
.an .an-photo{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}
.an .an-side{position:absolute;left:var(--m);top:84px;width:400px;bottom:150px;display:flex;flex-direction:column;transition:opacity .6s}
.an .an-side h2.d.m{font-size:96px;margin-top:22px;line-height:.95}
.an .an-side h2 .ta{display:block;font-family:'Noto Sans Tamil',sans-serif;font-weight:700;color:var(--yellow);font-size:64px;letter-spacing:0;margin-top:14px}
.an .an-side .sub{margin-top:22px;font-size:20px;line-height:1.4;color:var(--ink-2);max-width:380px}
.an .an-cap{margin-top:auto}
.an .an-cap .n{color:var(--ink);font-size:13px}
.an .an-cap .t{margin-top:12px;font-size:26px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:400px;min-height:68px}
.an.pair .an-side{top:84px;bottom:150px;width:auto;right:var(--m);pointer-events:none}
.an.pair .an-cap{position:absolute;left:0;bottom:0;width:100%;display:flex;gap:24px;align-items:baseline}
.an.pair .an-cap .t{margin-top:0;min-height:0;max-width:none;font-size:22px}
.an .an-title{position:absolute;z-index:3}
.an .an-title h3.d.s{font-size:56px;line-height:1}
.an .an-title h3 .ta{font-family:'Noto Sans Tamil',sans-serif;color:var(--yellow);font-size:40px;margin-left:14px;letter-spacing:0}
.an .an-title p{margin-top:8px;font-size:17px;color:var(--ink-2);max-width:620px}
.an .an-veil{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;padding:0 var(--m) 120px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,transparent,rgba(8,10,24,.72));opacity:0;transition:opacity .9s .5s;pointer-events:none}
.an .an-veil .mono{color:rgba(255,255,255,.8)}
.an .an-veil h3{margin-top:12px;font-family:var(--display);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1;color:#fff;max-width:1100px}
.an.hero .an-veil{opacity:1}
.an.hero .an-side,.an.hero .an-title{opacity:0}
.an.hero .ctl.hands{opacity:.0;pointer-events:none;transition:opacity .4s}
.an.hero .ctl.hands:hover{opacity:1;pointer-events:auto}
/* ---------- compare: the knob is the cue dot, enlarged; labels are mono on the flowline ---------- */
.cmp .knob{background:var(--yellow);color:transparent;box-shadow:0 0 0 10px rgba(247,170,0,.28),0 8px 22px rgba(0,0,0,.25);width:58px;height:58px;font-size:0}
.cmp .knob::before,.cmp .knob::after{content:"";position:absolute;top:50%;width:0;height:0;border:7px solid transparent;margin-top:-7px}
.cmp .knob::before{left:9px;border-right-color:var(--ink)}.cmp .knob::after{right:9px;border-left-color:var(--ink)}
.cmp .lab{background:none;padding:0;bottom:26px;text-shadow:0 1px 8px rgba(0,0,0,.5);font-size:13px}
/* ---------- scrub (sketch to wall) ---------- */
.scr-stage{position:absolute;left:var(--m);right:var(--m);top:250px;height:660px;display:block}
.scr-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
/* ---------- index: nine places ---------- */
.ix .ix-left{position:absolute;left:var(--m);top:84px;width:640px;bottom:150px;display:flex;flex-direction:column}
.ix .ix-left h2.d.m{margin-top:22px;font-size:96px;line-height:.95}
.ix .ix-sub{margin-top:18px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ix .ix-list{list-style:none;margin:auto 0 0;padding:0;columns:1}
.ix .ix-row{opacity:.18;transition:opacity .5s,transform .5s;transform:translateX(-8px)}
.ix .ix-row.in{opacity:1;transform:none}
.ix .ix-row button{display:flex;align-items:baseline;gap:22px;width:100%;padding:9px 0;border-top:1px solid var(--rule);text-align:left}
.ix .ix-row .mono{color:var(--ink-2);font-size:13px;width:28px}
.ix .ix-row .nm{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.025em;line-height:1;color:var(--ink);transition:color .2s}
.ix .ix-row.on .nm{color:var(--ink)}.ix .ix-row.on .mono{color:var(--yellow)}
.ix .ix-row.on button{border-top-color:var(--ink)}
.ix .ix-list:hover .ix-row:not(.on) .nm{color:var(--ink-3)}
.ix .ix-plan{position:absolute;left:780px;right:40px;top:110px;bottom:110px;overflow:hidden}
.ix .ix-inner{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.7s cubic-bezier(.65,0,.35,1)}
.ix .ix-inner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.55}
.ix .ix-pin{position:absolute;width:0;height:0;opacity:0;transition:opacity .4s}
.ix .ix-pin.in{opacity:1}
.ix .ix-pin i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--ink);transition:background .3s,transform .3s}
.ix .ix-pin b{position:absolute;left:14px;top:-9px;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);background:var(--paper);padding:0 4px;transition:transform .3s}
.ix .ix-pin.on i{background:var(--yellow);transform:scale(1.5)}
/* ---------- compare page (wallpaper) ---------- */
.c2 .c2-box{position:absolute;left:720px;right:var(--m);top:200px;bottom:160px;background:#fff}
.c2 .c2-box img{object-fit:contain;background:#fff}
.c2 .c2-labs{position:absolute;left:720px;right:var(--m);bottom:118px;display:flex;justify-content:space-between}
.c2 .c2-labs .mono{color:var(--ink-2)}
.c2 .c2-insp{position:absolute;left:var(--m);top:340px;width:520px;margin:0}
.c2 .c2-insp img{width:100%;height:520px;object-fit:cover;display:block}
.c2 .c2-insp figcaption{margin-top:12px;color:var(--ink-2)}
/* ---------- ending ---------- */
.endx .endx-top{position:absolute;left:var(--m);top:var(--rt)}
.endx .endx-top .mono{color:rgba(255,255,255,.72)}
.endx .endx-kolam{position:absolute;left:var(--m);top:150px;width:440px;height:440px;overflow:visible}
.endx .endx-kolam circle{fill:rgba(255,255,255,.35);transition:fill .4s,r .4s}
.endx .endx-kolam text{font-family:var(--mono);font-size:.12px;fill:rgba(255,255,255,0);text-anchor:middle;transition:fill .4s}
.endx .endx-kolam g.lit circle{fill:var(--yellow);r:.08}
.endx .endx-kolam g.lit text{fill:rgba(255,255,255,.8)}
.endx .endx-line{fill:none;stroke:var(--yellow);stroke-width:.045;stroke-linecap:round;stroke-linejoin:round}
.endx .endx-txt{position:absolute;left:var(--m);bottom:230px;right:640px}
.endx .endx-txt h1{color:#fff}
.endx .endx-txt>p{margin-top:24px;font-size:22px;color:rgba(255,255,255,.75)}
.endx .endx-txt .endx-cred{margin-top:28px;font-size:13px;line-height:2;color:rgba(255,255,255,.72)}
.endx .endx-acts{position:absolute;left:var(--m);bottom:var(--rb);display:flex;gap:40px;border-top:1px solid rgba(255,255,255,.22);padding-top:16px}
.endx .endx-act{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.endx .endx-act i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5)}
.endx .endx-act.p{color:#fff}.endx .endx-act.p i{background:var(--yellow);animation:cue 2.6s ease-in-out infinite}
.endx .endx-act:hover{color:#fff}
.endx .endx-marks{position:absolute;right:var(--m);bottom:var(--rb);display:flex;gap:28px;align-items:center}
.endx .endx-marks .tn{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.02em}
.endx .endx-marks .tn svg{height:54px;width:auto}
.endx .end-film{top:96px}
/* ---------- MORE / BACK, right margin on the flowline ---------- */
.more-cue{position:absolute;right:var(--m);bottom:58px;z-index:6;display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.more-cue i{width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.more-cue b{font-weight:500;color:var(--ink)}
.slide.dark .more-cue,.slide:has(.s-photo) .more-cue,.slide:has(.s-show.dark) .more-cue{color:rgba(255,255,255,.8);border-top-color:rgba(255,255,255,.3)}
.slide.dark .more-cue b,.slide:has(.s-photo) .more-cue b,.slide:has(.s-show.dark) .more-cue b{color:#fff}
/* the Old / New switch: two mono words in the bar, the current one underlined in yellow */
.ver{display:inline-flex;gap:4px;margin-left:18px;padding:0;border:0;border-radius:0}
.ver button{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-dim);padding:6px 8px;position:relative}
.ver button.cur{color:var(--hud-ink)}
.ver button.cur::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--yellow)}
.ver button:not(.cur):hover{color:var(--hud-ink)}
.landing-in{position:relative;z-index:2}

/* ================= build 2: the dots-then-line maker, the brief, one drawing at a time, the floor, where the frames hang ================= */
.km .km-sub{position:absolute;left:var(--m);top:440px;width:520px;font-size:22px;line-height:1.45;color:rgba(255,255,255,.72)}
.km-grid{position:absolute;left:700px;right:70px;top:250px;bottom:170px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:8px;z-index:2}
.km-cell{position:relative;min-height:0;display:block;cursor:pointer}
.km-svg{width:100%;height:100%;display:block;overflow:visible}
.km-svg .kd{fill:#fff;opacity:.85}
.km-svg .kl{fill:none;stroke:#fff;stroke-width:.12;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:opacity .6s,stroke .6s}
.km-cell.new .kl{stroke:var(--yellow);opacity:1}
.km-cell:hover .kl{opacity:1}
.km .hd h2{max-width:900px}

.br .br-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.br .br-fig{opacity:0;animation:brfig 1s .3s both}
@keyframes brfig{to{opacity:1}}
.br .br-cap{position:absolute;left:520px;right:520px;bottom:62px;text-align:center;font-size:22px;line-height:1.4;color:var(--ink-2)}
.br .hd h2{max-width:1200px}

.p9 .p9-fig{position:absolute;opacity:0;transition:opacity .5s;pointer-events:none}
.p9 .p9-fig.on{opacity:1;pointer-events:auto;cursor:pointer}
.p9 .p9-lyr,.p9 .p9-photo{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:fill}
.p9 .p9-photo{opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.p9 .p9-photo.loose{object-fit:contain}
.p9 .p9-clip{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.p9 .p9-clip .p9-photo{position:absolute;-webkit-mask-image:none;mask-image:none;max-width:none}
.p9 .p9-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p9 .p9-svg path{stroke-linecap:round}
.p9 .p9-cap{position:absolute;left:var(--m);top:300px;width:520px;font-size:20px;line-height:1.45;color:var(--ink-2);opacity:0}
.p9 .p9-cap.in{animation:capin .7s .15s both}
@keyframes capin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.p9-mark{display:flex;align-items:baseline;gap:10px;opacity:.5;transition:opacity .2s}
.p9-mark.on,.p9-mark:hover{opacity:1}
.p9-mark .nm{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-bottom:3px;border-bottom:2px solid transparent}
.p9-mark.on .nm{border-bottom-color:var(--yellow)}

.s-photo .detail{position:absolute;right:var(--m);bottom:70px;height:560px;aspect-ratio:4/5;margin:0;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.s-photo .detail img{position:static;width:100%;height:100%;object-fit:cover}
.s-photo .detail figcaption{position:absolute;left:0;top:-30px;color:rgba(255,255,255,.8)}
.s-photo.has-detail .cap{bottom:70px}

.fl .fl-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;pointer-events:none}
.fl .fl-still.on{opacity:1}
.fl .fl-left{position:absolute;left:var(--m);top:84px;width:640px;z-index:3}
.fl .fl-left .d{margin-top:14px;font-size:84px}
.fl .fl-sub{margin-top:16px;font-size:20px;line-height:1.4;color:var(--ink-2);max-width:560px}
.fl .fl-list{list-style:none;margin-top:30px;border-top:1px solid var(--rule)}
.fl .fl-row{border-bottom:1px solid var(--rule);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.fl .fl-row.in{opacity:1;transform:none}
.fl .fl-row button{display:grid;grid-template-columns:64px 1fr;align-items:baseline;width:100%;text-align:left;padding:7px 0}
.fl .fl-row .mono{color:var(--ink-2)}
.fl .fl-row .nm{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.03em;color:#7B7F96;transition:color .3s}
.fl .fl-row .ds{grid-column:2;font-size:16px;color:var(--ink-2);margin-top:2px}
.fl .fl-row.on .nm{color:var(--ink)}.fl .fl-row.on .mono{color:var(--c);font-weight:500}
.fl .fl-big{display:none}
.fl.ph .fl-list,.fl.ph .fl-sub{display:none}
.fl.ph .fl-big{display:block;position:absolute;left:var(--m);bottom:140px;z-index:3;color:var(--ink)}
.fl.ph .fl-big b{display:block;font-family:var(--mono);font-size:64px;color:var(--c,#12142B);font-weight:500}
.fl.ph .fl-big span{display:block;font-family:var(--display);font-weight:700;font-size:150px;line-height:.9;letter-spacing:-.04em;max-width:900px}
.fl.ph .fl-left .d{font-size:110px}

.lh .lh-grid{position:absolute;left:var(--m);top:250px;width:940px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.lh .lh-fig{margin:0}
.lh .lh-fig img{width:100%;height:270px;object-fit:cover;display:block}
.lh .lh-fig figcaption{display:flex;align-items:center;gap:12px;margin-top:10px}
.lh .lh-fig figcaption i{width:26px;height:26px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}
.lh .lh-plan{position:absolute;right:var(--m);top:100px;height:880px;aspect-ratio:997/1234}
.lh .lh-plan>img{width:100%;height:100%;display:block}
.lh .lh-mark{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-style:normal;box-shadow:0 0 0 6px rgba(247,170,0,.22)}
.lh .lh-mark b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}

/* cover: a still of the relief in the 9:16 box, a slow push, a faint dot field under the title */
.cv .dots{--dotc:rgba(255,255,255,.09)}
.cv .cv-box{position:absolute;right:var(--m);top:96px;width:480px;height:853px;overflow:hidden;background:#0b0e22;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.cv .cv-still{width:100%;height:100%;object-fit:cover;transform-origin:50% 55%}
.cv .cv-still.push{animation:cvpush 12s cubic-bezier(.3,.1,.5,1) forwards}
@keyframes cvpush{from{transform:scale(1)}to{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.cv .cv-still.push{animation:none}}

/* ---------- phones ---------- */
.turn,.turn-ov{display:none}
/* landscape phone: chrome by height. A 40 px bar with only the mark, a hairline track, the stage edge to edge */
@media (max-height:500px){
  :root{--bar-h:40px;--track-h:6px}
  .bar{grid-template-columns:auto 1fr;padding:0 12px}
  .brand .txt,.chapter,.tools,.ver,.count{display:none!important}
  .brand svg{width:20px;height:20px}
  .stage-wrap{padding:0}
  .track{padding:0}
  .segs{height:6px;gap:2px}
  .seg .name{display:none}
  .seg .fill{height:2px}
  .arrow{width:34px;height:48px}
  .more-cue{display:none}
}
/* portrait phone: the landing, the film, and one line asking for the other way round */
@media (orientation:portrait) and (max-width:600px){
  .turn-ov{display:flex;position:fixed;inset:0;z-index:60;background:var(--navy);flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px;text-align:center}
  .turn-ov svg{width:56px;height:56px}
  .turn-ov p{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:#fff;line-height:1.15}
  .landing{z-index:70}
  .landing .turn{display:block;color:var(--yellow-l);font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em;text-transform:none;margin-top:22px}
  #btnHistory,.landing .hint-line{display:none}
  .landing .choices{margin-top:24px}
}

/* a photo opener softens its hard left edge over 400 px into the white page */
.s-head .art.fade-l img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 400px);mask-image:linear-gradient(90deg,transparent 0,#000 400px)}

.mz .hint,.slide:has(.mz) .hint{left:820px}
/* a photo with a 4:5 detail: the print on the paper, the detail beside it */
.s-photo.has-detail{background:var(--paper)}
.s-photo.has-detail>img:first-of-type{inset:auto;left:var(--m);top:150px;width:1040px;height:505px}
.s-photo.has-detail .veil{display:none}
.s-photo.has-detail .cap{left:var(--m);bottom:120px;color:var(--ink)}
.s-photo.has-detail .cap .mono{color:var(--ink-2)}
.s-photo.has-detail .cap h3{color:var(--ink);text-shadow:none}
.s-photo.has-detail .detail{right:var(--m);top:150px;bottom:auto;height:760px;box-shadow:none}
.s-photo.has-detail .detail figcaption{color:var(--ink-2);top:-30px}

/* the studio's reference kolams on the idea slide */
.km-art{position:absolute;inset:6%;background:#fff;opacity:.6;transition:opacity .6s,background .6s;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.km-cell.new .km-art{background:var(--yellow);opacity:1}
.km-cell:hover .km-art{opacity:1}
/* cover: the two marks, bottom right, on a white plate */
.cv .cv-logos{position:absolute;right:var(--m);bottom:var(--rb);display:flex;align-items:center;gap:48px}
.cv .cv-logos .tn{height:104px;width:auto}.cv .cv-logos .c8{height:132px;width:132px}

/* TV wall demonstration: the live board at the left, the words in the middle, the hand-and-stem photograph at the right */
.mt-text{position:absolute;left:930px;top:400px;width:300px;display:flex;flex-direction:column;gap:22px}
.mt-text p{font-size:18px;line-height:1.5;color:var(--ink-2)}
.mt-text p.lead{font-size:21px;color:var(--ink)}
.mt-fig{position:absolute;right:var(--m);top:214px;width:560px;height:700px;margin:0}
.mt-fig img{width:100%;height:100%;object-fit:cover;display:block}

/* master: full-bleed pictures run to the window's left and right edges, not the 16:9 stage's */
.slide:has(> .s-photo),.slide:has(.car),.slide:has(.filmstill){overflow:visible}
.s-photo:not(.two):not(.has-detail)>img:first-of-type{left:calc(0px - var(--bleed-l,0px));width:calc(100% + var(--bleed-l,0px) + var(--bleed-r,0px))}
.s-photo:not(.two):not(.has-detail) .veil{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.car{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.s-show .veil{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.filmstill,.filmclip{left:calc(0px - var(--bleed-l,0px));width:calc(100% + var(--bleed-l,0px) + var(--bleed-r,0px))}
.s-photo.has-detail{overflow:visible}

.an .an-inspo{position:absolute;width:auto;display:block;box-shadow:0 12px 40px rgba(18,20,43,.25);pointer-events:none;user-select:none}

/* lenticular: the four prints are stacked, one set shown at a time */
.lent .fr .lset{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.lent .fr .lset.on{opacity:1}
.lent .fr .lset img{transition:none}

/* infinity: the wall in the centre, big; the letters keep their own reflections; the section small at the bottom right */
.inf2{background:#EFECE4}
.inf2 .inf2-art{position:absolute;inset:0;background:url(img/infinite_art.png) center 46%/74% auto no-repeat;opacity:.9}
.inf2 .inf2-stage{position:absolute;left:50%;top:46%;width:1240px;transform:translate(-50%,-50%);touch-action:none;cursor:crosshair}
.inf2 .inf2-svg{width:100%;height:auto;display:block;overflow:visible}
.inf2 .inf2-diag{position:absolute;right:var(--m);bottom:var(--rb);width:470px;height:auto}
.inf2 .hd .mono{color:var(--ink-2)}

/* the making: the three clips side by side, filling the whole screen */
.slide:has(.mk-full){overflow:visible}
.mk-full .mk-row{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));top:0;bottom:0;gap:0;grid-template-columns:repeat(3,1fr)}
.mk-full .mk{height:100%;position:relative}
.mk-full .mk-frame{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.mk-full .mk figcaption{position:absolute;left:32px;bottom:60px;margin:0;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.55);z-index:2}
.mk-full .mk figcaption .mono{color:rgba(255,255,255,.75)}
.mk-full .mk-veil{position:absolute;left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));top:0;height:360px;background:linear-gradient(180deg,rgba(11,14,34,.72),rgba(11,14,34,0));pointer-events:none;z-index:1}
.mk-full .hd{z-index:3}.mk-full .hd h2,.mk-full .hd .mono{color:#fff}
.mk-full .mk:nth-child(n+2)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55);z-index:2}
.photo-zoom>img:first-of-type{animation:kzoom 18s ease-in-out infinite alternate;transform-origin:50% 55%}
@keyframes kzoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.photo-zoom>img:first-of-type{animation:none}}

/* the ending: the same two marks as the cover */
.endx .endx-marks{display:flex;align-items:center;gap:48px;right:var(--m);bottom:var(--rb)}
.endx .endx-marks .tn{height:92px;width:auto}.endx .endx-marks .c8{height:120px;width:120px}
/* the film slide */
.ff{background:#0b0e22}
.ff .ff-k{position:absolute;left:var(--m);top:46px;color:rgba(255,255,255,.6)}
.ff .ff-wrap{position:absolute;left:50%;top:50%;height:1010px;aspect-ratio:404/720;transform:translate(-50%,-50%);background:#000;cursor:pointer;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.ff .ff-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.ff .ff-snd{position:absolute;right:var(--m);bottom:58px;z-index:6;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);padding-top:14px;border-top:1px solid rgba(255,255,255,.3)}

/* openers: one scale of art. cover = a wide drawing is cropped to the box instead of shrunk; --hs enlarges a drawing from its bottom-right corner */
.s-head .art.bleed.cover img{object-fit:cover;object-position:100% 100%}
.s-head .art.bleed img{transform:translateY(var(--hy,0px)) rotate(var(--hr,0deg)) scale(var(--hs,1));transform-origin:var(--ho,100% 100%)}

/* slide 41: the box takes the artwork's own 1.92:1 shape, so there is no white above or below it */
.c2 .c2-box{top:250px;bottom:auto;height:575px;background:transparent}
.c2 .c2-labs{bottom:auto;top:840px}
.c2 .c2-insp{top:250px}
.c2 .c2-insp img{height:575px}

/* meeting rooms, rebuilt: one stage for all three */
.an .an-panel{background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(18,20,43,.10);transition:none}
.an .an-grid{position:absolute;inset:0;--r:-240;opacity:0;background-image:radial-gradient(circle,#12142B 2.3px,transparent 2.9px);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 calc(var(--r)*1px),transparent calc(var(--r)*1px + 240px));mask-image:radial-gradient(circle at 50% 50%,#000 calc(var(--r)*1px),transparent calc(var(--r)*1px + 240px))}
.an .an-art{background:none;overflow:visible}
.an .an-l{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;user-select:none}
.an .an-lattice,.an .an-ink{--w:-10%;-webkit-mask-image:linear-gradient(100deg,#000 calc(var(--w) - 9%),transparent var(--w));mask-image:linear-gradient(100deg,#000 calc(var(--w) - 9%),transparent var(--w))}
.an .an-lat,.an .an-dots{filter:none}
.an .an-insp{margin:34px 0 0;transition:none;will-change:opacity,transform;opacity:0}
.an .an-insp img{display:block;height:340px;width:auto;max-width:400px;object-fit:cover;box-shadow:0 14px 40px rgba(18,20,43,.22)}
.an .an-final{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;pointer-events:none;background:#0b0d1c}
.an .an-final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.an .an-final .an-veil{opacity:1;transition:none}
.an.hero .an-side,.an.hero .an-title{opacity:0}
.an .ctl.hands{z-index:5}
.an.hero .ctl.hands{animation:none;opacity:0;pointer-events:none;transition:opacity .4s}
.an.hero .ctl.hands:hover{opacity:1;pointer-events:auto}

/* slide 38: hover-only frames; the caption lives in the white mount under the picture */
.dood .fr{padding:10px 10px 10px;height:auto;cursor:default;transform:none;rotate:var(--r,0deg);transition:translate .55s cubic-bezier(.2,.7,.2,1),scale .55s cubic-bezier(.2,.7,.2,1),rotate .55s cubic-bezier(.2,.7,.2,1),box-shadow .4s,opacity .4s}
.dood .fr .ph{width:100%;overflow:hidden}
.dood .fr .ph img{width:100%;height:100%;object-fit:cover;display:block}
.dood .fr:hover,.dood .fr.open{transform:none;box-shadow:0 18px 40px rgba(15,23,55,.18)}
.dood .fr.on{rotate:0deg;z-index:9;box-shadow:0 40px 80px rgba(15,23,55,.35)}
.dood .fr .cap{position:static;display:block;max-height:0;opacity:0;overflow:hidden;padding:0 6px;text-align:left;white-space:normal;line-height:1.5;font-size:13px;color:var(--ink);transition:max-height .45s,padding .45s,opacity .35s .1s}
.dood .fr.on .cap{max-height:84px;opacity:1;padding:20px 6px 12px}
.dood.has-focus .fr:not(.on){opacity:.3}
.dood .fr:hover .cap,.dood .fr.open .cap{opacity:0}
.dood .fr.on:hover .cap,.dood .fr.on.open .cap{opacity:1}

/* slide 28: the call-out */
.inf2 .inf2-stage{top:46%}
.inf2 .inf2-art{background-position:center 45%}
.inf2 .inf2-call{position:absolute;left:370px;bottom:80px;width:1180px;display:flex;align-items:center;gap:48px;padding:26px 44px 26px 36px;background:#233D9A;border-radius:16px;color:#fff;box-shadow:0 24px 60px rgba(18,28,90,.28)}
.inf2 .inf2-call::before{content:"";position:absolute;left:50%;top:-18px;margin-left:-18px;border:18px solid transparent;border-top:0;border-bottom:18px solid #233D9A}
.inf2 .inf2-dg{flex:none;width:400px}
.inf2 .inf2-diag{position:static;width:100%;height:auto;display:block}
.inf2 .inf2-ct .mono{color:var(--yellow-l);font-size:13px}
.inf2 .inf2-ct h3{margin-top:10px;font-family:var(--display);font-weight:700;font-size:34px;line-height:1.05;letter-spacing:-.025em;color:#fff}
.inf2 .inf2-ct ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:18px;line-height:1.4;color:rgba(255,255,255,.9)}
.inf2 .inf2-ct li{display:flex;gap:14px;align-items:baseline}
.inf2 .inf2-ct li b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:14px;font-weight:700}

/* slide 14: demo centred and big, text under the heading, the photograph as a ringed circle tied to the incubators counter */
.mt-text{left:var(--m);top:196px;width:1080px;flex-direction:row;gap:48px}
.mt-text p{flex:1;font-size:18px}
.mt-text p.lead{font-size:20px}
.mt-fig{right:auto;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 6px #2B3F8C,0 22px 50px rgba(18,28,90,.25)}
.mt-fig img{object-position:50% 60%}
.mt-hint{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 8px 24px rgba(247,170,0,.35);transition:opacity .4s}
.mt-hint i{width:10px;height:10px;border-radius:50%;background:var(--ink);animation:cue 2.2s ease-in-out infinite}
.mt-hint.gone{opacity:0;pointer-events:none}

/* slide 7: one grid, bigger drawings, the three names beside the heading */
.p9 .p9-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(18,20,43,.2) 2px,transparent 2.7px)}
.p9 .p9-fig{right:auto;bottom:auto}
.p9 .p9-cap{left:auto;right:var(--m);top:178px;width:760px;text-align:right;font-size:20px}
.p9 .p9-tabs{position:absolute;right:var(--m);top:92px;display:flex;gap:44px;align-items:baseline}
.p9 .p9-mark{opacity:.32;gap:12px}
.p9 .p9-mark .mono{font-size:13px;color:var(--ink-2)}
.p9 .p9-mark .nm{font-family:var(--display);font-size:46px;letter-spacing:-.025em;text-transform:none;font-weight:700;line-height:1;border-bottom:4px solid transparent;padding-bottom:6px}
.p9 .p9-mark.on{opacity:1}
.p9 .p9-mark.on .nm{border-bottom-color:var(--yellow)}

/* slide 2: every cell shows its own dot grid before the line is drawn; the page carries the same kind of grid at 20 % of the strength */
.km .km-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.12) 2px,transparent 2.7px);background-size:44px 44px;background-position:22px 22px}
.km-cell{background:var(--navy)}
.km-art.km-pre{opacity:.6;background:#fff;transition:none;clip-path:none}
.km-cell.new .km-art.km-pre,.km-cell:hover .km-art.km-pre{background:#fff;opacity:.6}


/* ===== one type scale and one grid, for every slide =====
   stage 1920x1080 · margin 96 · kicker y 84 (mono 13) · title y 108 · description 20/1.45 · captions 56 · openers 140 · display 160
   rule: every slide has the same left edge (96), the same top (84) and the same title size; only openers and the two bookends are bigger */
:root{--t-title:72px;--t-cap:56px;--t-open:140px;--t-body:20px;--t-disp:160px}
.d.s,.d.m,.hd h2,.hd h2.d,.an .an-side h2.d.m,.ix .ix-left h2.d.m,.fl .fl-left .d{font-size:var(--t-title);line-height:1;letter-spacing:-.03em}
.hd .sub,.fl .fl-sub,.an .an-side .sub,.km .km-sub,.br .br-cap,.p9 .p9-cap,.mt-text p,.mt-text p.lead,.s-head .sub{font-size:var(--t-body);line-height:1.45}
.s-head h2.d.l,.s-head.half h2.d.l{font-size:var(--t-open)}
.d.xl{font-size:var(--t-disp)}
.km .km-sub{top:292px}
.an .an-side h2.d.m{margin-top:14px}
.mt-text{top:212px}
.p9 .p9-cap{top:186px}

/* slide 35: video columns */
.mk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease;pointer-events:none}
.mk-row.in .mk video{opacity:1}

/* slide 31: one clip, big, on the right */
.lc .lc-sub{position:absolute;left:var(--m);top:268px;width:520px;font-size:var(--t-body);line-height:1.45;color:rgba(255,255,255,.72)}
.lc .lc-vid{position:absolute;right:var(--m);top:90px;height:900px;aspect-ratio:9/16;background:#0b0e22;overflow:hidden;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lc .lc-vid video{width:100%;height:100%;object-fit:cover;display:block}

/* slide 8: the four walls as a bento, edge to edge; the corner detail stands tall on the right */
.cor{background:#F2F0EA}
.cor .cor-grid{position:absolute;left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));top:236px;bottom:0;display:grid;gap:10px;grid-template-columns:1fr 1fr minmax(420px,.62fr);grid-template-rows:1fr 1fr}
.cor .cor-t{position:relative;margin:0;overflow:hidden;background:#E8E5DD}
.cor .cor-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.cor .cor-t:hover img{transform:scale(1.05)}
.cor .cor-atom{grid-column:1 / 3;grid-row:1}
.cor .cor-detail{grid-column:3;grid-row:1 / 3}
.cor .cor-light{grid-column:1;grid-row:2}
.cor .cor-land{grid-column:2;grid-row:2}
.cor .cor-t figcaption{position:absolute;left:28px;bottom:22px;display:flex;gap:14px;align-items:baseline;font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--ink)}
.cor .cor-t figcaption .mono{font-size:13px;color:var(--ink-2)}
.cor .cor-detail img{object-position:30% 50%}


/* ===== edge to edge: show slides run to the window's left and right edges, not just the 16:9 stage's ===== */
.slide:has(> .show-root){overflow:visible}
.g{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));background-position:0 0,calc(var(--m) + var(--bleed-l,0px)) 0}
.dots,.p9 .p9-bg,.km .km-bg{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.s-head::before{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.fl .fl-still{left:calc(0px - var(--bleed-l,0px));width:calc(100% + var(--bleed-l,0px) + var(--bleed-r,0px))}
.scr-stage{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.mz{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.mz-world{margin-left:var(--bleed-l,0px)}
.an .an-grid{right:0}

/* slide 2: vector kolams on one lattice */
.km .km-svg2{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.km .km-d{fill:#fff;opacity:.9}
.km .km-l{fill:none;stroke:rgba(255,255,255,.88);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .6s}
.km .km-k.new .km-l{stroke:var(--yellow)}
.km .km-hit{fill:transparent;cursor:pointer}
.km .km-k:hover .km-l{stroke:#fff}
.km .km-bg{background-image:radial-gradient(circle,rgba(255,255,255,.17) 2.2px,transparent 2.9px)}
.km .hd .sub{max-width:400px}
.km-cell,.km-art,.km-grid{display:none}

/* slide 8: the walls, full screen, one after another */
.cor .cor-stage{position:absolute;left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));top:0;bottom:0;background:#E8E5DD}
.cor .cor-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 2.4s linear}
.cor .cor-stage img.on{opacity:1;transform:scale(1)}
.cor .cor-veil{position:absolute;left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));top:0;height:380px;background:linear-gradient(180deg,rgba(10,12,28,.62),rgba(10,12,28,0));pointer-events:none}
.cor .hd h2,.cor .hd .mono{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.cor .cor-names{position:absolute;left:var(--m);bottom:55px;display:flex;gap:55px;font-family:var(--display);font-weight:700;font-size:55px;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.cor .cor-names span{opacity:.4;display:flex;gap:13px;align-items:baseline;transition:opacity .4s}
.cor .cor-names span.on{opacity:1}
.cor .cor-names i{font-size:13px;font-style:normal}

/* slide 10 and 11: one box, 1920 x 472, for every frame and for the front view of the relief */
.scr-stage{left:0;right:0;top:344px;height:472px}
.scr-stage img{object-fit:cover}


/* ===== golden grid: Fibonacci spacing (13 21 34 55 89 144) and type (13 21 55 89 144); no margin boxes, but the same breathing space everywhere =====
   a heading group is kicker, 13, title, 21, body; the group sits at 55 from the top and 89 from the left; art and photographs run edge to edge */
:root{--m:89px;--t-title:89px;--t-cap:55px;--t-open:144px;--t-body:21px;--t-disp:160px}
.d.s,.d.m,.hd h2,.hd h2.d,.an .an-side h2.d.m,.ix .ix-left h2.d.m,.fl .fl-left .d{font-size:var(--t-title);line-height:1;letter-spacing:-.035em}
.hd,.fl .fl-left,.an .an-side,.ix .ix-left{top:55px}
.hd{max-width:1300px}
.hd .mono{margin-bottom:13px}
.hd .sub,.fl .fl-sub,.an .an-side .sub{margin-top:21px;font-size:var(--t-body);line-height:1.45}
.hd .sub{max-width:600px}
.an .an-side h2.d.m{margin-top:13px}
.s-head .top{top:55px}
.s-head h2.d.l,.s-head.half h2.d.l{font-size:var(--t-open)}
.s-head .sub{font-size:var(--t-body);bottom:89px}
.s-head h2{bottom:144px}
.s-photo .cap h3,.mz-name,.cor .cor-names{font-size:var(--t-cap)}
.p9 .p9-cap{position:static;display:block;width:auto;max-width:620px;margin-top:21px;text-align:left;font-size:var(--t-body)}
.p9 .p9-tabs{top:72px}
.km .km-sub{display:none}
.km .hd .sub{max-width:400px}
.mt-text{display:none}

.s-head h2{bottom:178px}
.s-head .sub{bottom:89px}
.inf2 .hd h2{max-width:1300px!important}

/* slides 22-24: no white ground behind the grid; the glass photograph runs to the window's edges */
.an .an-panel{background:none;box-shadow:none}
.an .an-final{left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px))}
.an .an-final .an-veil{left:0;right:0}

/* slide 28: the artwork is the heading; demo and call-out each keep their full size and never overlap */
.inf2 .inf2-art{display:none}
.inf2 .hd h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.inf2 .inf2-stage{top:41%}
.inf2 .inf2-stage{top:38%}
.inf2 .inf2-call{bottom:56px}

/* slide 2: the studio's own eight kolams, traced to vector outlines; same grid cells as the shared design */
.km .km-svg2{display:none}
.km-cell,.km-art,.km-grid{display:block}
.km .km-sub{display:block}
.km-grid{position:absolute;left:700px;right:70px;top:250px;bottom:170px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:8px;z-index:2}
.km-cell{position:relative;min-height:0;display:block;cursor:pointer;background:none}
.km .km-sub{position:absolute;left:var(--m);top:292px;width:400px;font-size:var(--t-body);line-height:1.45;color:rgba(255,255,255,.72)}
.km .hd .sub{display:none}

.mt-ping{animation:mtping 1.8s ease-out infinite}
@keyframes mtping{0%{opacity:1;r:9px}100%{opacity:.25;r:19px}}
svg.gone{opacity:0;transition:opacity .4s}

/* slide 27: no small title text; StartupTN blue everywhere; bigger technical drawing and copy */
.inf2 .hd{display:none}
.inf2 .inf2-call{background:linear-gradient(135deg,#2B3F8C,#1B2A6B);padding:30px 48px 30px 40px;gap:52px}
.inf2 .inf2-call::before{border-bottom-color:#2B3F8C}
.inf2 .inf2-dg{width:440px}
.inf2 .inf2-ct h3{font-size:42px}
.inf2 .inf2-ct ol{font-size:24px;gap:12px;margin-top:16px}
.inf2 .inf2-ct li b{width:32px;height:32px;font-size:17px}
.inf2 .inf2-ct .mono{font-size:15px}

/* ===== slide 2: one lattice for the page and all eight kolams ===== */
.km .km-bg{background-image:radial-gradient(circle,rgba(255,255,255,.22) 1.5px,transparent 2.1px);background-size:34px 34px;background-position:calc(4px + var(--bleed-l,0px)) 4px}
.km .km-dots{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.km .km-dots circle{fill:#fff;opacity:.62;transition:fill .6s,opacity .6s}
.km .km-cell:hover .km-dots circle,.km .km-cell.new .km-dots circle{opacity:.95}
.km-cell .km-art{overflow:visible}

/* ===== slide 7: every wall whole, over a soft copy of itself; no crop ===== */
.cor .cor-st{position:absolute;left:calc(0px - var(--bleed-l,0px));right:calc(0px - var(--bleed-r,0px));top:0;bottom:0;background:#E8E5DD;overflow:hidden}
.cor .cor-w{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.cor .cor-w.on{opacity:1}
.cor .cor-w img{position:absolute;inset:0;width:100%;height:100%;opacity:1;transition:none}
.cor .cor-w img.bgf{object-fit:cover;filter:blur(38px) brightness(.97);transform:scale(1.18)}
.cor .cor-w img.fg{object-fit:contain;transform:scale(1.025);transition:transform 3.6s linear}
.cor .cor-w.on img.fg{transform:scale(1)}

/* ===== slide 10: more contrast in the exploded relief: deeper sides, harder shadow ===== */
.stack3d .lyr .ply.face{filter:drop-shadow(0 26px 20px rgba(14,16,34,.62)) drop-shadow(0 3px 3px rgba(14,16,34,.42))}

/* ===== slide 30: the three other frames, smaller than the clip ===== */
.lc .lc-row{position:absolute;left:var(--m);bottom:90px;height:610px;display:flex;gap:21px}
.lc .lc-ph{margin:0;height:100%;aspect-ratio:9/16;overflow:hidden;border-radius:4px;background:#0b0e22;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.lc .lc-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== one fixed ruler for every slide =====
   left 89 and right 89 (so 89 and 1831 on the 1920 stage), kickers at 55 from the top, the bottom of every caption, cue line,
   subtitle and button row at 89 from the bottom. Art and photographs either run edge to edge (the window's edge) or sit on these lines. */
:root{--rl:89px;--rr:89px;--rt:55px;--rb:89px;--m:var(--rl)}
.s-photo .cap{bottom:var(--rb)}
.ctl,.hint,.more-cue{bottom:var(--rb)}
.cor .cor-names{bottom:var(--rb)}
.endx .endx-acts,.endx .endx-marks{bottom:var(--rb)}
.endx .endx-marks{right:var(--m)}
.hd,.fl .fl-left,.an .an-side,.ix .ix-left{left:var(--m)}

/* captions, dot rows and the mural sit on the same rulers */
.s-show .cap{bottom:var(--rb)}
.car-dots{bottom:var(--rb)}
.mk-full .mk figcaption{bottom:var(--rb)}
.mk-full .mk:first-child figcaption{left:calc(var(--bleed-l,0px) + var(--m))}
.mz{height:903px}
.mz-band{top:903px}
/* the glass photographs run to the window's edge, but their caption keeps to the same ruler as every heading: stage edge + 89 */
.an .an-final .an-veil{padding:0 calc(var(--m) + var(--bleed-r,0px)) var(--rb) calc(var(--m) + var(--bleed-l,0px))}