/* Ukil Bari — "The door is open". One page, anthropic-style base. */
:root {
  --nav-h:72px;
  /* Bangla is set in SolaimanLipi; Latin (brand and platform names) keeps the style's faces */
  --sans:"Anthropic Sans","SolaimanLipi",Arial,sans-serif;
  --serif:"Anthropic Serif","SolaimanLipi",Georgia,serif;
  --mono:"Anthropic Mono","SolaimanLipi",monospace;
  /* Ukil Bari palette on the style's roles: white page, deep ink, purple as the one small accent,
     pale lavenders as the muted fills behind drawings and in panels */
  --ivory:#ffffff; --ivory-medium:#f8f4fc; --ivory-dark:#efe7f7;
  --ink:#1d1226; --ink-medium:#3e3448; --ink-light:#5f5868; --cloud:#b3a9bd;
  --line:#1d12261a; --line-strong:#1d122633;
  --clay:#7d26c2; --clay-on-dark:#c39be8;
  --oat:#e9dcf6; --heather:#ddd6ee; --cactus:#e6e1f2;
}
html { scroll-padding-top:var(--nav-h);overflow-x:clip }
html.lenis, html.lenis body { height:auto }
.lenis.lenis-smooth { scroll-behavior:auto!important }
body { background:var(--ivory);font-family:var(--sans);overflow-x:clip }
[lang="bn"] { font-family:"SolaimanLipi",var(--sans) }
.skip-link { position:fixed;left:16px;top:-90px;z-index:200;background:var(--ivory);padding:12px }
.skip-link:focus { top:12px }
:focus-visible { outline:2px solid #2c84db!important;outline-offset:4px }
.kicker { font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light) }
.mono { font:400 12px/1.4 var(--mono);letter-spacing:.06em }

/* words */
.w { display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em }
.wi { display:inline-block }
.js .wi { transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:var(--d,0ms) }
.js .words-in .wi { transform:none }
/* Main text stays ready while the door draws. */
.js .hero .wi { transform:none;transition:none }

/* chrome */
.nav { position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:60;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .45s var(--ease),background .3s,color .3s;border-bottom:1px solid transparent }
.nav.scrolled { border-bottom-color:var(--line) }
.nav.hide { transform:translateY(-100%) }
.nav.on-dark { background:rgba(29,18,38,.75);color:var(--ivory) }
.nav.on-dark .button { background:var(--ivory);color:var(--ink);border-color:var(--ivory) }
.nav-inner { height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px }
.brand { text-decoration:none;display:flex;align-items:center;gap:14px }
/* the hand-drawn logo, looping; the still logo shows only until the component is ready */
.brand .live-logo { display:block;height:46px;width:94px }
.brand .logo-fallback { display:none;height:46px;width:auto }
.brand ukil-bari-logo:not(:defined) { display:none }
.brand ukil-bari-logo:not(:defined) + .logo-fallback { display:block }
.nav.on-dark .live-logo { --ink:#ffffff;--blob:rgba(255,255,255,.14) }
.fx { position:absolute;width:0;height:0;overflow:hidden }
.brand span { font-size:16px;color:var(--ink-light);font-weight:600;padding-left:14px;border-left:1px solid var(--line-strong);line-height:1.2 }
.nav.on-dark .brand span { color:var(--cloud);border-color:rgba(255,255,255,.2) }
.nav-right { display:flex;align-items:center;gap:20px }
.status { font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px }
.status i, .status-line i { font-style:normal; width:8px;height:8px;border-radius:50%;background:var(--clay);position:relative;flex:none }
.status i::after, .status-line i::after { content:"";position:absolute;inset:0;border-radius:50%;background:var(--clay);animation:ping 2s var(--ease) infinite }
@keyframes ping { 0% { transform:scale(1);opacity:.8 } 100% { transform:scale(3.2);opacity:0 } }

.spine { position:fixed;left:18px;top:0;bottom:0;width:16px;z-index:40;pointer-events:none }
.spine svg { width:100%;height:100%;overflow:visible }
.spine-path { fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;transition:stroke .3s }
.spine.on-dark .spine-path { stroke:var(--ivory) }
.spine-dot { position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--clay) }

.cursor { position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);z-index:120;pointer-events:none;opacity:0;display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .25s,opacity .25s }
.cursor span { font:600 12px/1 var(--sans);color:var(--ivory);opacity:0;transition:opacity .2s }
.cursor.on { opacity:1 }
.cursor.link { width:36px;height:36px;margin:-18px 0 0 -18px;background:rgba(29,18,38,.12) }
.cursor.chat { width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--clay) }
.cursor.chat span { opacity:1 }
.cursor.on-dark:not(.chat) { background:var(--ivory) }
.follower { position:fixed;left:0;top:0;width:220px;height:180px;margin:-90px 0 0 28px;border-radius:12px;background:var(--cactus);border:1px solid var(--line-strong);z-index:55;pointer-events:none;opacity:0;display:grid;place-items:center;transition:opacity .25s }
.follower.on { opacity:1 }
.follower img { width:78%;height:78%;object-fit:contain }

/* buttons */
.cta-row { display:flex;flex-wrap:wrap;gap:12px }
.cta-row.center { justify-content:center }
.button { will-change:transform }
.button:active { transform:scale(.97) }
.button.invert { background:var(--ivory);color:var(--ink);border-color:var(--ivory) }
.button.invert:hover { background:var(--ivory-dark);border-color:var(--ivory-dark);color:var(--ink) }
.button.ghost { background:transparent;color:var(--ivory);border-color:rgba(255,255,255,.4) }
.button.ghost:hover { background:rgba(255,255,255,.1);color:var(--ivory) }

/* hero */
.hero { min-height:100svh;padding:calc(var(--nav-h) + 4vh) 0 0;display:flex;flex-direction:column;justify-content:center;position:relative }
.hero .hero-grid { display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:center }
.hero h1 { font:700 clamp(44px,5.3vw,92px)/1 var(--sans);letter-spacing:-.03em;margin:20px 0 28px }
.hero h1 .line { display:block }
.lead { font:400 clamp(19px,1.55vw,23px)/1.5 var(--serif);max-width:600px;margin-bottom:28px }
.door-wrap { position:relative;aspect-ratio:1;width:100%;max-width:620px;justify-self:end }
.door { width:100%;height:100%;overflow:visible }
.leaf-l { transform-box:view-box;transform-origin:200px 330px }
.leaf-r { transform-box:view-box;transform-origin:400px 330px }
.status-line { display:flex;align-items:center;gap:12px;width:var(--main-width);margin:4vh auto 3vh;padding-top:16px;border-top:1px solid var(--line-strong);font:400 15px/1.4 var(--sans) }
.status-line .mono { text-transform:uppercase;color:var(--ink-light) }
.desk-word { font:600 15px/1.4 var(--sans);display:inline-block;transition:transform .5s var(--ease),opacity .5s var(--ease) }
.desk-word.exit { transform:translateY(-70%);opacity:0 }
.desk-word.enter { transform:translateY(70%);opacity:0;transition:none }

/* band */
.band { background:var(--ink);color:var(--ivory);padding:28px 0;overflow:hidden }
.band-row { display:flex;white-space:nowrap;font:400 clamp(44px,7vw,112px)/1.15 var(--serif);letter-spacing:-.02em;will-change:transform }
.band-row span { padding-right:.3em }
.band-row.outline { color:transparent;-webkit-text-stroke:1.2px var(--ivory) }

/* sections */
.ways, .proof { padding:16vh 0 }
.abroad { padding:16vh 0 4vh }
.head { display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:end;margin-bottom:56px }
.head h2 { font:700 clamp(34px,4.4vw,68px)/1.02 var(--sans);letter-spacing:-.025em }
.head p { font:400 19px/1.55 var(--serif);max-width:520px }
.way-list { list-style:none;margin:0;padding:0 }
.way { display:grid;grid-template-columns:80px 1.2fr 1.6fr auto;gap:24px;align-items:baseline;padding:34px 0;border-top:1px solid var(--line-strong);text-decoration:none;position:relative;transition:opacity .3s }
.way-list li:last-child .way { border-bottom:1px solid var(--line-strong) }
.way::after { content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(var(--rule,1));transform-origin:left }
.way-n { font:400 13px/1 var(--mono);color:var(--clay) }
.way-t { font:700 clamp(28px,3.2vw,48px)/1.05 var(--sans);letter-spacing:-.02em;transition:transform .45s var(--ease) }
.way-d { font:400 18px/1.5 var(--serif);color:var(--ink-medium);max-width:460px }
.way-go { font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:color .2s,transform .45s var(--ease) }
.way:hover { color:var(--ink) }
@media (hover:hover) and (pointer:fine) {
  .way-list:hover .way:not(:hover) { opacity:.35 }
  .way:hover .way-t { transform:translateX(14px) }
  .way:hover .way-go { color:var(--clay);transform:translateX(-6px) }
}

.proof { background:var(--ivory-medium) }
.proof-grid { display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,96px);align-items:end }
.count { font:700 clamp(72px,13vw,220px)/1 var(--sans);letter-spacing:-.05em;margin:16px 0 24px;display:flex;align-items:flex-start;font-variant-numeric:tabular-nums }
.odo { display:inline-flex }
.odo .dg { display:inline-block;height:1em;overflow:hidden;vertical-align:top }
.odo .dg > span { display:flex;flex-direction:column }
.odo .dg > span > span { display:block;height:1em;line-height:1 }
.plus { color:var(--clay);font-size:.5em;margin-left:.06em;line-height:1 }
.count-sub { font:400 clamp(19px,1.6vw,23px)/1.5 var(--serif);max-width:560px;margin-bottom:28px }
.socials { display:flex;flex-wrap:wrap;gap:10px }
.socials a { font:500 15px/1 var(--sans);text-decoration:none;padding:12px 16px;border:1px solid var(--ink);border-radius:999px;transition:background .2s,color .2s }
.socials a:hover { background:var(--ink);color:var(--ivory) }
.facts { list-style:none;margin:0;padding:0 }
.facts li { display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--line-strong);font:400 16px/1.45 var(--sans) }
.facts li:first-child { border-top:1px solid var(--line-strong) }
.facts span:first-child { font:400 12px/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);flex:none }
.facts span:last-child { font-weight:600;text-align:right }


.clocks { display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 32px }
.clock { border:1px solid var(--line-strong);border-radius:14px;padding:16px;background:#fff;transition:transform .45s var(--ease),border-color .3s }
.clock span { display:block;font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light) }
.clock b { display:block;font:600 clamp(22px,2.2vw,32px)/1.2 var(--mono);letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums }
.clock b i { font-style:normal;animation:blink 1s steps(2) infinite }
.clock.home { background:var(--ink);color:var(--ivory);border-color:var(--ink) }
.clock.home span { color:var(--clay-on-dark) }
@keyframes blink { 50% { opacity:.15 } }
@media (hover:hover) { .clock:hover { transform:translateY(-6px);border-color:var(--ink) } }

/* final */
.final { position:relative;background:var(--ink);color:var(--ivory);padding:24vh 0 22vh;text-align:center;overflow:hidden }
.js .final { clip-path:inset(var(--wipe,0%) 0 0 0) }
.final-inner { position:relative;z-index:2 }
.final h2 { font:700 clamp(48px,8vw,128px)/.98 var(--sans);letter-spacing:-.035em;margin-bottom:28px }
.final-lead { font:400 clamp(19px,1.8vw,24px)/1.5 var(--serif);color:var(--cloud);max-width:560px;margin:0 auto 40px }
.final .knot-target { margin-right:34px }
.final-hours { margin-top:56px;font:400 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--clay-on-dark) }
.final-note { margin-top:12px;font:400 15px/1.5 var(--sans);color:var(--cloud) }
.knot-svg { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible }
.knot-path { fill:none;stroke:var(--ivory);stroke-width:2;stroke-linecap:round;stroke-linejoin:round }
.footer { background:var(--ink);color:var(--ivory);padding:48px 0 40px;border-top:1px solid rgba(255,255,255,.1) }
.footer-row { display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap }
.footer-brand img { height:52px;width:auto;display:block }
.footer-brand span { display:block;margin-top:14px;font:400 12px/1 var(--mono);color:var(--cloud);letter-spacing:.04em }
.footer nav { display:flex;gap:24px }
.footer nav a { font:400 15px/1 var(--sans);text-decoration:none;color:var(--ivory) }
.footer nav a:hover { text-decoration:underline }
.legal { margin-top:32px;font:400 13px/1.7 var(--sans);color:var(--cloud) }
.contact-bar { display:none }

@media (max-width:991px) {
  .hero .hero-grid { grid-template-columns:1fr }
  .door-wrap { max-width:440px;justify-self:center;order:-1;margin:-2vh 0 -4vh }
  .head, .proof-grid { grid-template-columns:1fr }
  .way { grid-template-columns:60px 1fr;row-gap:10px }
  .way-d, .way-go { grid-column:2 }
  .facts span:last-child { text-align:right }
}
@media (max-width:767px) {
  :root { --nav-h:62px }
  .status { display:none }
  .nav-right .button { padding:9px 12px;font-size:14px }
  .brand span { display:none }
  .hero { padding-top:calc(var(--nav-h) + 2vh) }
  .door-wrap { max-width:320px }
  .cta-row .button { flex:1 1 auto }
  .ways, .proof { padding:11vh 0 }
  .abroad { padding:11vh 0 2vh }
  .way { grid-template-columns:1fr;padding:26px 0 }
  .way-d, .way-go { grid-column:auto }
  .way-go { color:var(--clay) }
  .clock.home { grid-column:1 / -1 }
  .facts li { flex-direction:column;gap:4px }
  .facts span:last-child { text-align:left }
  .final { padding:16vh 0 18vh }
  .final .knot-target { flex-basis:100%;margin:0 0 26px }
  .contact-bar { display:grid;grid-template-columns:1.4fr 1fr .8fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px;transform:translateY(110%);transition:transform .5s var(--ease) }
  .contact-bar.on { transform:none }
  .contact-bar a { text-align:center;padding:13px 6px;border-radius:8px;font:600 15px/1.2 var(--sans);color:var(--ivory);text-decoration:none;border:1px solid rgba(255,255,255,.25) }
  .contact-bar a:first-child { background:var(--ivory);color:var(--ink);border-color:var(--ivory) }
  body { padding-bottom:72px }
}
@media (prefers-reduced-motion:reduce) {
  .js .wi { transform:none;transition:none }
  .status i::after, .status-line i::after, .clock b i { animation:none }
  .js .final { clip-path:none }
}

/* ---------- abroad: the launch panel ---------- */
.tz { max-width:var(--main-width);margin:0 auto;background:var(--ivory-medium);border-radius:24px;overflow:hidden;will-change:max-width,border-radius }
.tz-inner { width:var(--main-width);max-width:100%;margin:0 auto;padding:clamp(48px,8vh,96px) clamp(20px,4vw,64px) clamp(40px,7vh,80px);text-align:center }
.tz-line { font:465 clamp(40px,6vw,96px)/1.08 var(--serif);letter-spacing:-.02em;margin-bottom:14px }
.tz-its { color:var(--ink-light) }
.tz-slot { display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;text-align:left }
.tz-now { display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums;transition:transform .5s var(--ease),opacity .5s var(--ease) }
.tz-now.exit { transform:translateY(-60%);opacity:0 }
.tz-now.enter { transform:translateY(60%);opacity:0;transition:none }
.tz-home { font:400 clamp(18px,1.6vw,23px)/1.5 var(--serif);color:var(--ink-medium);margin-bottom:clamp(8px,2vh,24px) }
.tz-home b { font-weight:600;color:var(--clay);font-variant-numeric:tabular-nums }
.tz-arc { width:100%;display:block;overflow:visible;margin-bottom:clamp(20px,4vh,40px) }
.tz-arc .chalk { fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round }
.tz-arc .chalk-ghost { fill:none;stroke:var(--ink);stroke-width:1;stroke-linecap:round;opacity:.25 }
.tz-arc .fleck { fill:var(--ink) }
.tz-arc .run { fill:none;stroke:var(--clay);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 9 }
.tz-pt { cursor:pointer }
.tz-pt .hit { fill:transparent }
.tz-pt .dot { fill:var(--ivory);stroke:var(--ink);stroke-width:2.4;transition:fill .3s,stroke .3s }
.tz-pt .name { font:400 13px var(--mono);letter-spacing:.1em;fill:var(--ink-light);text-transform:uppercase;transition:fill .3s }
.tz-pt .time { font:600 22px var(--mono);fill:var(--ink);font-variant-numeric:tabular-nums }
.tz-pt.on .dot { fill:var(--clay);stroke:var(--clay) }
.tz-pt.on .name { fill:var(--ink) }
.tz-pt.home .dot { fill:var(--clay);stroke:var(--clay) }
.tz-pt.home .name { fill:var(--clay) }
.tz-pt.home .ring { fill:none;stroke:var(--clay);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2.2s var(--ease) infinite }
@keyframes ring { 0% { transform:scale(.7);opacity:1 } 100% { transform:scale(2.6);opacity:0 } }

/* ---------- chalk underline under "moving." ---------- */
.hero h1 .line { position:relative }
.chalk-under { position:absolute;left:0;bottom:-.08em;width:0;height:.32em;overflow:visible;pointer-events:none }
.chalk-under path { fill:none;stroke:var(--clay);stroke-width:5;stroke-linecap:round;stroke-linejoin:round }

@media (max-width:767px) {
  .tz { border-radius:18px;margin:0 16px;max-width:none }
  .tz-inner { width:auto;padding:40px 20px 32px }
  .tz-line { font-size:clamp(28px,7.6vw,40px) }
  .tz-slot { display:block;text-align:center }
  .brand .live-logo { height:40px;width:82px }
  .brand span { display:none }
}
@media (prefers-reduced-motion:reduce) { .tz-pt.home .ring { animation:none;opacity:0 } }

/* ---------- Bangla setting: room for vowel signs, no tracking on joined letters ---------- */
html[lang="bn"] * { letter-spacing:0!important }
html[lang="bn"] .w { padding:.2em 0 .18em;margin:-.2em 0 -.18em }
html[lang="bn"] .hero h1 { line-height:1.18 }
html[lang="bn"] .head h2 { line-height:1.25 }
html[lang="bn"] .final h2 { line-height:1.2 }
html[lang="bn"] .way-t { line-height:1.3 }
html[lang="bn"] .band-row { line-height:1.4 }
html[lang="bn"] .tz-line { line-height:1.35 }
html[lang="bn"] .tz-slot { padding:.12em 0 .14em;margin:-.12em 0 -.14em }
html[lang="bn"] .lead, html[lang="bn"] .head p, html[lang="bn"] .count-sub, html[lang="bn"] .way-d, html[lang="bn"] .tz-home, html[lang="bn"] .final-lead { line-height:1.7 }
html[lang="bn"] .kicker, html[lang="bn"] .mono, html[lang="bn"] .way-go, html[lang="bn"] .final-hours, html[lang="bn"] .facts span:first-child, html[lang="bn"] .clock span { font-size:14px }
html[lang="bn"] .odo .dg { height:1.18em }
html[lang="bn"] .odo .dg > span > span { height:1.18em;line-height:1.18 }
html[lang="bn"] .count { line-height:1.18 }
html[lang="bn"] .final h2 { font-size:clamp(40px,6vw,96px) }
html[lang="bn"] .button { font-size:17px }
html[lang="bn"] .final-note, html[lang="bn"] .final-hours { font-size:16px }
html[lang="bn"] .contact-bar a { font-size:16px }
html[lang="bn"] .tz-slot { max-width:100% }
@media (max-width:991px) { html[lang="bn"] .tz-now { white-space:normal } }

/* ---------- phones: the desktop moments, sized down ---------- */
.way-art { display:none }
@media (max-width:767px) {
  .spine { left:4px;width:12px }
  .door-wrap { max-width:250px;margin:-1vh auto -3vh }
  /* the chalk arc stays; only the active country and Bangladesh carry labels */
  .tz-arc { margin:56px 0 64px }
  .tz-arc .chalk { stroke-width:6 }
  .tz-arc .chalk-ghost { stroke-width:3 }
  .tz-arc .run { stroke-width:6;stroke-dasharray:5 20 }
  .tz-pt:not(.on):not(.home) .name, .tz-pt:not(.on):not(.home) .time { display:none }
  .tz-pt .time { font-size:24px }
  .tz-pt .name { font-size:19px }
  .clocks { display:none!important }
  /* each way gets its drawing, tucked into the row's corner */
  .way { position:relative }
  .way-art { display:block;position:absolute;right:0;top:22px;width:76px;height:62px;padding:6px;border-radius:12px;background:var(--oat);object-fit:contain }
  .way-t, .way-n { padding-right:92px }
}

/* ---------- language switch, top right ---------- */
.lang { display:flex;gap:2px;padding:3px;border:1px solid var(--line-strong);border-radius:999px;background:var(--ivory) }
.lang a { font:500 13px/1 var(--sans);text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--ink-light);transition:background .2s,color .2s }
.lang a[lang="bn"] { font-family:"SolaimanLipi",var(--sans);font-size:15px;padding:7px 12px 6px }
.lang a:hover { color:var(--ink) }
.lang a[aria-current="page"] { background:var(--ink);color:var(--ivory) }
.nav.on-dark .lang { background:transparent;border-color:rgba(255,255,255,.25) }
.nav.on-dark .lang a { color:var(--cloud) }
.nav.on-dark .lang a[aria-current="page"] { background:var(--ivory);color:var(--ink) }
/* Bangla page: SolaimanLipi first in mono, or the mono face sets wide spaces between Bangla words */
html[lang="bn"] { --mono:"SolaimanLipi","Anthropic Mono",monospace }


/* ---------- in numbers: a short deck; each slide sticks and the next stacks over it ---------- */
.pitch { padding:16vh 0 0;overflow-x:clip }
.deck { display:grid;margin-inline:calc(50% - 50vw) }
/* each slide is a full-bleed panel, not a card; the next one slides up over it */
.slide { position:sticky;top:var(--nav-h,68px);min-height:calc(100vh - var(--nav-h,68px));display:grid;grid-template-columns:5fr 7fr;align-items:center;gap:24px clamp(32px,5vw,96px);padding:clamp(48px,9vh,96px) calc((100vw - var(--main-width)) / 2);background:var(--ivory-medium);border-top:1px solid var(--line-strong) }
.slide:nth-child(even) { background:var(--ivory) }
.slide-copy { align-self:center }
.slide-k { display:flex;gap:14px;color:var(--ink-light) }
.slide-k span { color:var(--clay) }
.slide-n { display:flex;align-items:flex-start;white-space:nowrap;margin:18px 0 20px;font:700 clamp(56px,7vw,124px)/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums }
.slide-name { margin:18px 0 20px;font:700 clamp(44px,5.4vw,88px)/1.02 var(--sans);letter-spacing:-.035em }
.slide-pre { font-size:.42em;letter-spacing:-.01em;align-self:flex-end;margin:0 .2em .3em 0 }
.slide-unit { margin-left:.04em }
html[lang="bn"] .slide-unit { margin-left:.18em;font-size:.72em;align-self:flex-end;margin-bottom:.08em }
.slide-lead { font:400 clamp(19px,1.6vw,23px)/1.5 var(--serif);max-width:440px }
.slide-chart { align-self:center }
.slide-note { grid-column:1 / -1;font:400 13px/1.6 var(--sans);color:var(--ink-light);max-width:860px;padding-top:18px;border-top:1px solid var(--line-strong) }
.deck-note { margin-top:40px;font:400 14px/1.6 var(--sans);color:var(--ink-light);max-width:640px }
/* chalk bars */
.bars { list-style:none;margin:0;padding:0;display:grid;gap:22px }
.bars li { display:grid;grid-template-columns:minmax(110px,170px) 1fr auto;gap:18px;align-items:center }
.bar-l { font:400 15px/1.3 var(--sans);color:var(--ink-medium) }
.bar { height:22px }
.bar-in { display:block;width:var(--w);height:100%;transform-origin:0 50% }
.bar-in svg { display:block;width:100%;height:100%;overflow:visible }
.bar-in path { fill:none;stroke:var(--clay);stroke-width:16px;stroke-linecap:round;vector-effect:non-scaling-stroke }
.bars li + li .bar-in path { stroke:var(--ink) }
.bar-v { font:700 18px/1 var(--sans);font-variant-numeric:tabular-nums;min-width:5.5em;text-align:right }
/* chalk growth columns */
.growth { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;height:clamp(260px,34vh,360px);max-width:460px;margin-inline:auto }
.col { display:flex;flex-direction:column;height:100%;justify-content:flex-end }
.col-bar { display:block;height:calc(var(--h) - 64px);transform-origin:50% 100% }
.col-bar svg { display:block;width:100%;height:100%;overflow:visible }
.col-bar path { fill:none;stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke }
.col.now .col-bar path { fill:var(--clay);stroke:var(--clay) }
.col b { margin-top:14px;font:700 24px/1 var(--sans);font-variant-numeric:tabular-nums }
.col span:last-child { margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--ink-light) }
.growth-arrow { position:absolute;left:22%;top:-6%;width:46%;overflow:visible;pointer-events:none }
.growth-arrow path { fill:none;stroke:var(--clay);stroke-width:3;stroke-linecap:round;stroke-linejoin:round }
.growth-up { position:absolute;left:40%;top:-16%;font:700 20px/1 var(--sans);color:var(--clay) }
.slide .facts li:first-child { border-top:1px solid var(--line-strong) }

/* chalk on a cover: an offset outline and a loop around the view count */
.cover-chalk { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none }
.cover-sketch { fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;opacity:.55;transform:translate(7px,8px) }
.cover-loop { fill:none;stroke:var(--clay-on-dark);stroke-width:4;stroke-linecap:round;stroke-linejoin:round }
html[lang="bn"] .slide-n { line-height:1.18 }
html[lang="bn"] .col span:last-child { font-size:14px }
@media (max-width:991px) {
  .slide { grid-template-columns:1fr;align-content:center }
}
@media (max-width:767px) {
  .pitch { padding:11vh 0 8vh }
  .slide { min-height:calc(100svh - var(--nav-h));padding:40px 16px 32px;gap:16px }
  .slide-n { margin:8px 0 10px }
  .slide-lead { font-size:17px }
  .slide-note, html[lang="bn"] .slide-note { font-size:12.5px;line-height:1.55;padding-top:12px }
  .slide .facts li { padding:10px 0 }
  .slide-n { font-size:clamp(52px,15vw,76px) }
  .bars { gap:10px }
  .bars li { grid-template-columns:1fr auto;gap:6px 12px }
  .bar { grid-column:1 / -1;grid-row:2;height:16px }
  .bar-in path { stroke-width:12px }
  .growth { height:240px }
}
@media (prefers-reduced-motion:reduce), (max-height:640px) { .slide { position:relative;top:auto } }


/* ---------- the videos: eight covers on one line; a chalk bracket marks the million-view six ---------- */
.shelf { --g:clamp(12px,1.4vw,22px);padding:14vh 0 12vh }
.shelf .head { margin-bottom:clamp(40px,7vh,72px) }
.shelf-row { position:relative;padding-top:72px }
.shelf-bracket { position:absolute;left:0;top:0;width:calc((100% - 7 * var(--g)) / 8 * 6 + 5 * var(--g));height:52px;text-align:center }
.shelf-bracket span { display:inline-block;font:700 17px/1 var(--sans);color:var(--clay);padding:0 10px;background:var(--ivory) }
.shelf-bracket svg { position:absolute;left:0;right:0;top:26px;width:100%;height:30px;overflow:visible }
.shelf-bracket path { fill:none;stroke:var(--clay);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke }
.shelf-list { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--g) }
.shelf-item { display:block;text-decoration:none;transition:transform .5s var(--ease),opacity .3s }
.shelf-list li:nth-child(odd) .shelf-cover { transform:rotate(-1.2deg) }
.shelf-list li:nth-child(even) .shelf-cover { transform:rotate(1deg) }
.shelf-cover { position:relative;display:block;aspect-ratio:9 / 16 }
.shelf-cover img { width:100%;height:100%;object-fit:cover;border-radius:10px;background:var(--ivory-dark) }
.shelf-v { display:flex;align-items:baseline;gap:5px;margin-top:20px;font:700 clamp(18px,1.7vw,26px)/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink) }
.shelf-v small { font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light) }
.shelf-t { display:block;margin-top:6px;font:400 13px/1.4 var(--sans);color:var(--ink-medium);transition:color .2s }
.shelf-item:hover { color:var(--ink) }
@media (hover:hover) and (pointer:fine) {
  .shelf-list:hover li:not(:hover) .shelf-item { opacity:.45 }
  .shelf-item:hover { transform:translateY(-10px) }
  .shelf-item:hover .shelf-t { color:var(--clay) }
}
.shelf-item.dealing { transition:none !important }
.shelf-item:focus-visible { outline:none }
.shelf-item:focus-visible img { outline:2px solid var(--clay);outline-offset:4px }
html[lang="bn"] .shelf-bracket span { font-size:18px }
html[lang="bn"] .shelf-v small { font-size:13px;letter-spacing:0 }
html[lang="bn"] .shelf-t { font-size:14px;line-height:1.5 }
@media (max-width:991px) {
  .shelf-list { grid-template-columns:repeat(4,minmax(0,1fr));row-gap:32px }
  .shelf-row { padding-top:0 }
  .shelf-bracket { display:none }
}
@media (max-width:767px) {
  .shelf { --g:10px;padding:11vh 0 9vh }
  .shelf-list { row-gap:22px }
  .shelf-cover img { border-radius:6px }
  .shelf-cover .cover-sketch { transform:translate(10px,10px);stroke-width:4 }
  .shelf-cover .cover-loop { stroke-width:9 }
  .shelf-v { margin-top:12px;font-size:16px }
  .shelf-v small { display:none }
  .shelf-t { font-size:11.5px;line-height:1.35 }
  html[lang="bn"] .shelf-t { font-size:12px }
}