/* Karthi — portfolio v2 · bold & playful, still readable */
@view-transition { navigation: auto; }

:root {
  --cream: #f2ede3;
  --cream-2: #e9e2d4;
  --ink: #111110;
  --mute: #6b675f;
  --line: rgb(17 17 16 / .14);
  --blue: #2e3bff;          /* Karthi */
  --zu: #fd5000;
  --sf: #e6217b;
  --brand: var(--blue);
  --gut: clamp(16px, 3.4vw, 56px);
  --display: "Anybody", "Schibsted Grotesk", Arial, sans-serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, 0, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --r: 22px;
  --card: #ffffff;
  --panel: #111110;
  --nav: rgb(242 237 227 / .84);
  color-scheme: light;
}
/* dark theme: system preference unless the visitor picked light, or explicit pick */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #0f0f0e; --cream-2: #1f1f1d; --ink: #f2ede3; --mute: #a29e95; --line: rgb(242 237 227 / .14);
    --blue: #4b57ff; --card: #1a1a18; --panel: #1a1a18; --nav: rgb(15 15 14 / .82); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cream: #0f0f0e; --cream-2: #1f1f1d; --ink: #f2ede3; --mute: #a29e95; --line: rgb(242 237 227 / .14);
  --blue: #4b57ff; --card: #1a1a18; --panel: #1a1a18; --nav: rgb(15 15 14 / .82); color-scheme: dark;
}
body { transition: background .4s, color .4s; }
.theme { font: 600 15px var(--sans); color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 99px; width: 38px; height: 38px; cursor: pointer; display: grid; place-items: center; padding: 0 !important; }
.theme svg { width: 16px; height: 16px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.smooth { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 18px/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3, .lead { text-wrap: balance; }

.wrap { padding-inline: var(--gut); }
.mono, .label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.label { color: var(--mute); }
.accent { color: var(--brand); }

/* ---------- nav ---------- */
.bar {
  position: fixed; inset: 12px 12px auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 20px; border-radius: 99px; background: var(--nav);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line);
}
.bar .brand { font: 800 17px/1 var(--sans); letter-spacing: -.02em; display: flex; gap: 8px; align-items: center; }
.bar .brand::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.bar .brand .accent { display: none; }
.bar nav { display: flex; gap: 4px; }
.bar nav a { font: 600 14px var(--sans); padding: 9px 14px; border-radius: 99px; transition: background .3s; }
.bar nav a span { display: none; }
.bar nav a:hover { background: var(--cream-2); }
.bar .meta { display: flex; gap: 8px; align-items: center; }
.bar .meta > a { font: 600 14px var(--sans); padding: 9px 12px; text-transform: none; letter-spacing: 0; color: var(--ink) !important; }
.bar button { font: 500 12px var(--mono); color: var(--ink); background: none; cursor: pointer; border: 1px solid var(--line); border-radius: 99px; padding: 9px 12px; }
.bar button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.bar .talk { background: var(--blue); color: #fff !important; padding: 11px 18px; border-radius: 99px; font: 700 14px var(--sans); }
.bar .talk:hover { background: var(--ink); }
@media (max-width: 760px) { .bar nav, .bar button { display: none; } }

/* ---------- custom cursor ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; width: 14px; height: 14px; border-radius: 99px; background: var(--ink);
  display: grid; place-items: center; translate: -50% -50%; transition: width .35s var(--pop), height .35s var(--pop), background .3s; }
.cur span { font: 700 14px var(--sans); color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur.on { width: 72px; height: 72px; background: var(--c, var(--blue)); }
.cur.on span { opacity: 1; }
@media (hover: none) { .cur { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; padding-top: 120px; padding-bottom: 40px; display: grid; grid-template-rows: auto 1fr auto; gap: 28px; }
.hero .who { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; position: relative; z-index: 3; }
.hero .who b { font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font: 600 13px var(--sans); }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22b35e; box-shadow: 0 0 0 4px rgb(34 179 94 / .18); }
.shout { margin: 0; align-self: center; position: relative; z-index: 1; font: 900 clamp(56px, 11vw, 206px)/.88 var(--display); letter-spacing: -.035em; font-stretch: 112%; }
.shout .w { display: inline-block; animation: in 1s var(--pop) both; animation-delay: calc(var(--i) * 90ms + 100ms); }
.shout .blk { background: var(--ink); color: var(--cream); padding: 0 .12em .04em; border-radius: .14em; }
.shout .blu { background: var(--blue); color: #fff; padding: 0 .12em .04em; border-radius: .14em; }
.shout .str { font-stretch: 62%; font-weight: 800; }
@keyframes in { from { opacity: 0; translate: 0 .5em; rotate: 4deg; } }
.hero-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: end; position: relative; z-index: 3; }
.lead { margin: 0; font: 500 clamp(20px, 1.9vw, 28px)/1.3 var(--sans); letter-spacing: -.015em; max-width: 36ch; }
.lead strong { font-weight: 800; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) { .hero-foot { grid-template-columns: 1fr; } .hero-cta { justify-content: flex-start; } }

.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--sans); padding: 16px 24px; border-radius: 99px; background: var(--ink); color: var(--cream); transition: transform .4s var(--pop), background .3s; }
.btn:hover { transform: translateY(-2px); background: var(--blue); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--cream); }

/* draggable logo stickers */
.stickers { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.stk { position: absolute; pointer-events: auto; cursor: grab; touch-action: none; user-select: none;
  width: var(--s, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--bg); color: var(--fg); display: grid; place-items: center; padding: calc(var(--s, 112px) * .2);
  box-shadow: 0 14px 30px rgb(17 17 16 / .18), inset 0 0 0 3px rgb(255 255 255 / .9); rotate: var(--rot, 0deg);
  animation: pop .9s var(--pop) both; animation-delay: calc(var(--i) * 120ms + 500ms); }
.stk:active { cursor: grabbing; }
.stk.pill { border-radius: 99px; aspect-ratio: 2.4; padding: 0 calc(var(--s, 112px) * .14); }
.stk svg { width: 100%; height: auto; overflow: visible; }
.stk svg path.f { fill: currentColor; } .stk svg path.h { fill: var(--bg); }
@keyframes pop { from { scale: 0; } }
@keyframes bob { 50% { translate: 0 -8px; } }
@media (max-width: 760px) { .stk { --s: 64px !important; } }

/* ---------- sections ---------- */
.sec { padding-block: clamp(90px, 12vw, 180px) 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .num { font: 700 13px var(--mono); color: var(--brand); letter-spacing: .06em; text-transform: uppercase; }
.sec-head > .label { display: none; }
.sec-head h2 { margin: 0; font: 900 clamp(44px, 7.4vw, 128px)/.9 var(--display); letter-spacing: -.035em; font-stretch: 108%; max-width: 14ch; }

/* ---------- work: giant colour blocks ---------- */
.work { display: grid; gap: 20px; }
.case {
  position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(20px, 3vw, 48px); align-items: center; overflow: hidden;
  border-radius: var(--r); padding: clamp(28px, 4vw, 64px); min-height: clamp(520px, 62vw, 760px); color: #fff; background: var(--c);
}
.case h3 { margin: 0 0 18px; font: 900 clamp(64px, 10vw, 190px)/.82 var(--display); letter-spacing: -.045em; font-stretch: 116%; }
.case p { margin: 0 0 24px; font-size: 19px; line-height: 1.5; max-width: 40ch; color: rgb(255 255 255 / .94); }
.case .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.case .tags span { font: 600 13px var(--sans); padding: 6px 12px; border-radius: 99px; background: rgb(255 255 255 / .2); }
.case .go { display: inline-flex; gap: 10px; align-items: center; font: 700 16px var(--sans); background: #fff; color: #111110; padding: 15px 22px; border-radius: 99px; transition: transform .4s var(--pop); }
.case:hover .go { transform: scale(1.03); }
.case .media { position: relative; align-self: stretch; border-radius: calc(var(--r) - 6px); overflow: hidden; min-height: 300px; }
.case .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.case:hover .media img { scale: 1.05; }
.case.zu { --c: var(--zu); }
.case.sf { background: linear-gradient(140deg, #ef31ad, #e0145a 70%); --c: #e6217b; }
.case.sf .media { display: grid; place-items: center; background: rgb(17 17 16 / .9); }
.case.sf .mk { width: 46%; }
.case.sf .mk svg { width: 100%; overflow: visible; }
.case .cap { position: absolute; left: 18px; bottom: 14px; right: 18px; display: flex; justify-content: space-between; color: rgb(255 255 255 / .75); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } .case .media { min-height: 260px; order: -1; } }

.fly { position: absolute; z-index: 3; width: clamp(54px, 7vw, 110px); pointer-events: none; filter: drop-shadow(0 12px 20px rgb(0 0 0 / .25)); }
.fly svg { width: 100%; overflow: visible; }

@supports (animation-timeline: view()) {
  .case { animation: tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes tilt { from { transform: scale(.95); } }
  .fly { animation: flyin linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  @keyframes flyin { from { translate: var(--fx, -40vw) var(--fy, 20vh); rotate: var(--fr, -90deg); scale: .4; } }
  .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes rv { from { opacity: 0; translate: 0 50px; } }
}

/* ---------- more work ---------- */
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.more button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: 1fr auto; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r);
  overflow: hidden; background: var(--c); color: var(--t, #fff); transition: transform .5s var(--pop); }
.more button:hover { transform: translateY(-6px); }
.more button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.more .pic { position: relative; overflow: hidden; }
.more .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.more button:hover .pic img { scale: 1.06; }
.more .txt { padding: 20px 22px 24px; }
.more .txt b { display: block; font: 900 clamp(34px, 3.6vw, 56px)/.9 var(--display); letter-spacing: -.035em; font-stretch: 110%; margin-bottom: 6px; }
.more .txt span { font: 500 15px var(--sans); opacity: .85; }
@media (max-width: 900px) { .more { grid-template-columns: 1fr; } .more button { aspect-ratio: 4 / 3.6; } }

/* ---------- marks specimen viewer ---------- */
.spec { display: grid; grid-template-columns: minmax(240px, 1fr) 2.6fr; gap: 20px; }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.spec-list button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 14px; transition: background .3s, color .3s, transform .3s var(--pop); }
.spec-list button .mono { color: var(--mute); }
.spec-list button b { font: 800 22px/1 var(--sans); letter-spacing: -.02em; }
.spec-list button .label { margin-left: auto; font-size: 10px; text-align: right; }
.spec-list button:hover { background: var(--cream-2); }
.spec-list button[aria-current="true"] { background: var(--blue); color: #fff; }
.spec-list button[aria-current="true"] .mono, .spec-list button[aria-current="true"] .label { color: rgb(255 255 255 / .75); }
.spec-stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; min-height: clamp(340px, 36vw, 540px); }
.spec-mark { position: relative; background: var(--panel); color: #f2ede3; border-radius: var(--r); display: grid; place-items: center; padding: 56px clamp(24px, 4vw, 64px); }
.spec-dim { position: absolute; left: 18px; top: 16px; color: #8d8a83; }
.spec-meta { position: absolute; left: 18px; bottom: 14px; right: 18px; color: #8d8a83; }
.spec-box { position: relative; width: 100%; padding: 8%; }
.spec-box .cs { position: absolute; width: 12px; height: 12px; border: 0 solid #7c84ff; }
.spec-box .tl { left: 0; top: 0; border-width: 2px 0 0 2px; } .spec-box .tr { right: 0; top: 0; border-width: 2px 2px 0 0; }
.spec-box .bl { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .spec-box .br { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.spec-svg svg { width: 100%; max-height: 220px; overflow: visible; }
.spec-svg path { fill: #f2ede3; transition: fill .6s, stroke .6s; }
.spec-svg path.h { fill: var(--panel); }
.spec-svg.draw path { fill: transparent; stroke: #7c84ff; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: var(--L); stroke-dashoffset: var(--L); }
.spec-svg.draw.go path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) var(--d), fill .6s; }
.spec-svg.draw.done path.f { fill: #f2ede3; stroke: transparent; }
.spec-svg.draw.done path.h { fill: var(--panel); stroke: transparent; }
.spec-mark:hover .spec-svg.done path.f { fill: #8f97ff; }
.spec-shot { margin: 0; border-radius: var(--r); overflow: hidden; position: relative; background: var(--cream-2); }
.spec-shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.06; transition: opacity .8s, scale 1.6s var(--ease); }
.spec-shot img.on { opacity: 1; scale: 1; }
.spec-shot.none { display: none; }
.spec-stage:has(.spec-shot.none) { grid-template-columns: 1fr; }
@media (max-width: 960px) { .spec, .spec-stage { grid-template-columns: 1fr; } .spec-shot { aspect-ratio: 4 / 3; } .spec-list { grid-template-columns: 1fr 1fr; } }

/* ---------- about ---------- */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rules > div { border-radius: var(--r); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; background: var(--card); transition: transform .5s var(--ease); }
.rules > div:hover { transform: translateY(-4px); }
.rules > div:nth-child(1) { background: var(--blue); color: #fff; }
.rules > div:nth-child(2) { background: var(--ink); color: var(--cream); }
.rules .mono { opacity: .7; color: inherit; }
.rules b { font: 900 clamp(26px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.03em; font-stretch: 105%; }
.rules p { margin: 0; font-size: 17px; line-height: 1.55; opacity: .92; }
@media (max-width: 900px) { .rules { grid-template-columns: 1fr; } }

.timeline { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; border-top: 2px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 180px 1fr 1.4fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: padding .4s var(--ease); }
.timeline li:hover { padding-left: 14px; }
.timeline .mono { color: var(--mute); }
.timeline b { font: 900 clamp(24px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.03em; }
@media (max-width: 760px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }
.awards { margin: 24px 0 0; max-width: 90ch; line-height: 1.7; }
.awards .mono { margin-right: 10px; color: var(--blue); }
.awards a { color: var(--blue); font-weight: 700; }

/* ---------- contact ---------- */
.contact { margin: clamp(90px, 12vw, 180px) var(--gut) var(--gut); border-radius: calc(var(--r) + 8px); background: var(--blue); color: #fff; padding: clamp(32px, 6vw, 96px); position: relative; overflow: hidden; }
.contact .sec-head .num { color: rgb(255 255 255 / .7); }
.contact .sec-head h2 { font-size: clamp(64px, 13vw, 240px); }
.contact .big { display: inline-block; font: 900 clamp(28px, 6vw, 110px)/.95 var(--display); letter-spacing: -.035em; word-break: break-word; background: #fff; color: var(--blue); padding: .08em .22em .14em; border-radius: .2em; rotate: -1.5deg; transition: rotate .4s var(--pop), background .3s, color .3s; }
.contact .big:hover { rotate: 0deg; background: #111110; color: #fff; }
.contact .quote { font: 500 clamp(18px, 1.8vw, 26px)/1.3 var(--sans); margin: 0 0 32px; opacity: .85; }
.hire { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 44px 0 0; }
.hire div { padding: 18px 20px; border-radius: 16px; background: rgb(255 255 255 / .12); }
.hire dt { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: 6px; }
.hire dd { margin: 0; font-weight: 600; }
@media (max-width: 760px) { .hire { grid-template-columns: 1fr; } }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.links a { font: 700 15px var(--sans); padding: 12px 18px; border-radius: 99px; box-shadow: inset 0 0 0 2px currentColor; transition: background .3s, color .3s; }
.contact .links a:hover { background: #fff; color: var(--blue); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 64px; opacity: .8; }
.foot .label { color: inherit; }
kbd { font: 11px var(--mono); border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; }

/* ---------- gallery dialog ---------- */
dialog.gal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--cream); color: var(--ink); overscroll-behavior: contain; }
dialog.gal::backdrop { background: rgb(17 17 16 / .6); }
dialog.gal[open] { animation: up .6s var(--ease); }
@keyframes up { from { translate: 0 6vh; opacity: 0; } }
.gal header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--gut); background: var(--c, var(--ink)); color: #fff; }
.gal h3 { margin: 0; font: 900 clamp(40px, 7vw, 110px)/.85 var(--display); letter-spacing: -.04em; font-stretch: 112%; }
.gal .close { all: unset; cursor: pointer; font: 700 14px var(--sans); background: #fff; color: #111110; border-radius: 99px; padding: 10px 16px; }
.gal .info { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 32px var(--gut); }
.gal .info .label { color: var(--mute); }
.gal .info p { margin: 0; max-width: 60ch; font-size: 19px; }
.gal .imgs { display: grid; gap: 14px; padding: 0 var(--gut) 80px; }
.gal .imgs img { width: 100%; border-radius: 14px; }
.gcap { margin-top: 10px; color: var(--mute); font-size: 14px; }
@media (max-width: 760px) { .gal .info { grid-template-columns: 1fr; } }

.badge { display: inline-block; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 99px; background: var(--cream-2); color: var(--ink); margin-right: 8px; vertical-align: 1px; }
.badge.live { background: #d6f5df; color: #0e6b32; }
.spec-shot .badge { position: absolute; right: 12px; top: 12px; background: rgb(255 255 255 / .9); }

/* ================= case study pages ================= */
.zu { --brand: var(--zu); }
.cs:not(.zu) { --brand: var(--sf); }
.cs-hero { position: relative; margin: 80px var(--gut) 0; border-radius: calc(var(--r) + 8px); padding: clamp(28px, 5vw, 80px); background: var(--brand); color: #fff; overflow: hidden; }
.cs:not(.zu) .cs-hero { background: linear-gradient(140deg, #ef31ad, #e0145a 75%); }
.cs-hero h1 { margin: 0; padding-block: clamp(30px, 6vw, 90px) clamp(24px, 3vw, 40px); font: 900 clamp(72px, 14.5vw, 300px)/.8 var(--display); letter-spacing: -.05em; font-stretch: 112%; }
.cs-hero h1 .flo { font-weight: 300; font-stretch: 80%; color: rgb(255 255 255 / .75); }
.cs-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; }
.cs-intro .lead { color: #fff; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 0; }
.specs dt { font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: .7; padding-top: 3px; }
.specs dd { margin: 0; font-weight: 500; }
@media (max-width: 860px) { .cs-intro { grid-template-columns: 1fr; } }

.glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.glance > div { border-radius: var(--r); padding: clamp(22px, 2.6vw, 36px); background: var(--card); }
.glance > div:nth-child(2) { background: var(--ink); color: var(--cream); }
.glance > div:nth-child(3) { background: var(--blue); color: #fff; }
.glance .label { display: block; margin-bottom: 12px; color: inherit; opacity: .7; }
.glance p { margin: 0; font-size: 18px; line-height: 1.5; }
@media (max-width: 860px) { .glance { grid-template-columns: 1fr; } }

.cs .chap > p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.7; max-width: 62ch; margin: 0 0 clamp(28px, 3vw, 44px); }
.cs .chap > p b { font-weight: 700; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand) 30%, transparent) 0); }
.cs figure { margin: 0; }
.cs figure img, .cs figure video { width: 100%; border-radius: var(--r); background: var(--cream-2); }
.cs figcaption { font: 400 14px/1.4 var(--sans); color: var(--mute); margin-top: 12px; }
.figs { display: grid; gap: 16px; margin-top: 16px; }
.figs.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .figs.g2 { grid-template-columns: 1fr; } }

.swatches { display: grid; grid-template-columns: 2fr 1.4fr 1fr .8fr; gap: 12px; height: clamp(200px, 24vw, 340px); margin-top: 16px; }
.swatches div { background: var(--c); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform .5s var(--pop); }
.swatches div:hover { transform: translateY(-4px); }
.swatches b { font: 600 14px var(--mono); }
.swatches .label { color: rgb(255 255 255 / .8); }
@media (max-width: 760px) { .swatches { grid-template-columns: 1fr 1fr; height: auto; } .swatches div { aspect-ratio: 1; } }

.fronts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.fronts div { border-radius: var(--r); padding: 24px; background: var(--card); display: grid; gap: 8px; }
.fronts .mono { font-size: 13px; }
.fronts b { font: 900 26px/1 var(--display); letter-spacing: -.02em; }
.fronts p { margin: 0; font-size: 16px; }
@media (max-width: 860px) { .fronts { grid-template-columns: 1fr; } }

.proverb { margin: clamp(80px, 10vw, 140px) var(--gut) 0; border-radius: calc(var(--r) + 8px); padding: clamp(32px, 6vw, 96px); background: var(--panel); color: #f2ede3; display: grid; gap: 28px; }
.proverb .ta { margin: 0; font: 800 clamp(40px, 8vw, 140px)/1.08 "Anek Tamil", var(--display); letter-spacing: -.01em; }
.proverb .tr { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
.proverb .tr .label { color: #8d8a83; }
.proverb .tr p { margin: 0; font: 500 clamp(20px, 2.1vw, 30px)/1.25 var(--sans); max-width: 32ch; }
.proverb .links { grid-column: 2; margin-top: 4px; }
.proverb .links a:hover { background: #fff; color: #111110; }
.proverb.end { margin-bottom: var(--gut); background: var(--brand); color: #fff; }
.cs:not(.zu) .proverb.end { background: linear-gradient(140deg, #ef31ad, #e0145a 75%); }
.proverb.end .ta { color: #fff; }
.proverb.end .tr .label { color: rgb(255 255 255 / .75); }
@media (max-width: 760px) { .proverb .tr { grid-template-columns: 1fr; } .proverb .links { grid-column: 1; } }
.pullquote { margin: 0; font: 900 clamp(48px, 8vw, 150px)/.9 var(--display); letter-spacing: -.04em; font-stretch: 110%; }
.pullquote em { font-style: normal; background: #fff; color: var(--brand); padding: 0 .12em; border-radius: .14em; }

/* Spendflo: scroll-built mark */
.morph-sec { height: 340vh; position: relative; margin-top: clamp(80px, 10vw, 140px); }
.morph-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-top: 96px; }
.morph-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; font-size: 18px; max-width: 44ch; padding: 18px 20px; border-radius: 16px; background: var(--card); }
.steps li b { font-weight: 800; }
.steps li .mono { color: var(--brand); padding-top: 4px; grid-row: span 2; }
.mk-wrap { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); }
.mk-wrap .mk { width: min(34vh, 30vw); flex: none; }
.mk-wrap .mk svg { overflow: visible; width: 100%; }
.wm { font: 800 clamp(40px, 7vw, 120px)/1 var(--sans); letter-spacing: -.045em; transition: opacity .6s, translate .8s var(--ease); }
.wm span { font-weight: 300; color: var(--sf); }
.wm sup { color: var(--sf); }
[data-stage] { opacity: .35; transition: opacity .4s, transform .4s var(--pop), box-shadow .3s; }
[data-stage].on { opacity: 1; }
.steps li.on { box-shadow: 0 0 0 2px var(--brand); }
.wm[data-stage] { opacity: 0; translate: -20px 0; } .wm[data-stage].on { opacity: 1; translate: 0 0; }
.handles { opacity: 0; transition: opacity .3s; }
.handles circle { fill: #fff; stroke: var(--blue); stroke-width: .5; }
[data-morph]:hover .handles { opacity: 1; }
@media (max-width: 860px) {
  .morph-grid { grid-template-columns: 1fr; align-content: start; }
  .mk-wrap { order: -1; } .mk-wrap .mk { width: 24vh; } .wm { font-size: 44px; }
  .steps li { font-size: 15px; padding: 12px 14px; }
}


/* Zuper: which orange */
.orange { margin-top: 16px; border-radius: calc(var(--r) + 8px); overflow: hidden; background: var(--panel); }
.o-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; height: clamp(220px, 26vw, 360px); transition: gap 1s var(--ease), padding 1s var(--ease); }
.o-grid i { background: var(--o); border-radius: 12px; transition: background 1s var(--ease), border-radius 1s var(--ease), rotate .8s var(--pop); }
.o-grid i:nth-child(odd) { transition-delay: .08s; rotate: -3deg; } .o-grid i:nth-child(3n) { transition-delay: .16s; rotate: 4deg; }
.orange.one .o-grid { gap: 0; padding: 0; }
.orange.one .o-grid i { background: #fd5000; border-radius: 0; rotate: 0deg; }
.o-cap { position: relative; padding: 16px 18px; min-height: 50px; }
.o-cap .label { position: absolute; left: 18px; top: 16px; transition: opacity .6s; color: #8d8a83; }
.o-b { opacity: 0; color: #f2ede3 !important; }
.orange.one .o-a { opacity: 0; } .orange.one .o-b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- hero v2.1: headline + contained sticker board ---------- */
.hero { grid-template-rows: auto 1fr auto; }
.hero-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.shout { font-size: clamp(52px, 7.4vw, 148px); line-height: .92; font-stretch: 108%; }
.shout .blu { display: inline-block; margin-block: .06em; }
.board { position: relative; aspect-ratio: 1 / .9; border-radius: calc(var(--r) + 10px); background: var(--cream-2); overflow: hidden; }
.board-tag { position: absolute; left: 20px; bottom: 16px; }
.board .stk { position: absolute; }
@media (max-width: 900px) { .hero-main { grid-template-columns: 1fr; } .board { aspect-ratio: 1.3; } }

/* ---------- contact email: one clean line ---------- */
.contact .big { display: inline-flex; align-items: baseline; gap: .3em; background: none; color: #fff; padding: 0 0 .08em; border-radius: 0; rotate: 0deg;
  font: 900 clamp(26px, 5.4vw, 96px)/1.05 var(--display); letter-spacing: -.03em; white-space: nowrap; max-width: 100%;
  background-image: linear-gradient(#fff, #fff); background-size: 0 4px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .6s var(--ease); }
.contact .big:hover { background-size: 100% 4px; background-color: transparent; color: #fff; rotate: 0deg; }
.contact .big span { font-size: .6em; transition: transform .4s var(--ease); }
.contact .big:hover span { transform: translate(4px, -4px); }
@media (max-width: 560px) { .contact .big { font-size: 7.4vw; } }

/* ---------- hero v2.2: mini-humans on the headline ---------- */
.hero-main { grid-template-columns: 1fr auto; align-items: end; }
.shout { font-size: clamp(56px, 10.4vw, 196px); }
.shout .w { position: relative; }
.mh { position: absolute; height: .62em; width: auto; pointer-events: none; image-rendering: auto; }
.mh-a { right: -.42em; bottom: .02em; }
.mh-b { right: -.62em; bottom: .04em; height: .5em; }
.mh-note { margin: 0 0 .8em; max-width: 26ch; font-size: 16px; line-height: 1.5; color: var(--mute); }
.mh-note .mono { display: block; color: var(--blue); margin-bottom: 6px; }
.mh-note a { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--blue); }
.mh-walk { position: absolute; bottom: 0; left: 0; height: 84px; width: auto; pointer-events: none; z-index: 1; animation: walk 38s linear infinite; }
@keyframes walk { from { translate: -120px 0; } to { translate: calc(100vw + 40px) 0; } }
@media (max-width: 900px) { .hero-main { grid-template-columns: 1fr; } .mh-note { margin: 8px 0 0; } }

/* ---------- Zuper: cast + agents ---------- */
.crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.crew figure { margin: 0; background: #fffaea; border-radius: var(--r); aspect-ratio: 4 / 3; display: grid; place-items: end center; padding: 18px 12px 14px; position: relative; overflow: hidden; }
.cs .crew figure img { width: auto; height: 66%; border-radius: 0; background: none; image-rendering: auto; }
.crew figcaption { position: absolute; left: 14px; top: 12px; margin: 0 !important; color: #6b675f !important; font: 500 11px var(--mono) !important; text-transform: uppercase; letter-spacing: .06em; }
.crew figure:nth-child(3n+2) { background: #fce9e1; }
.crew figure:nth-child(4n) { background: #fd5000; } .crew figure:nth-child(4n) figcaption { color: #fff !important; }
@media (max-width: 760px) { .crew { grid-template-columns: repeat(2, 1fr); } }
.agents { display: flex; gap: 0; margin-top: 16px; padding: 36px 24px 0; border-radius: calc(var(--r) + 8px); background: radial-gradient(70% 90% at 50% 100%, rgb(253 80 0 / .45), transparent 70%), #141413; overflow: hidden; }
.agents figure { flex: 1; margin: 0 -2%; display: grid; justify-items: center; transition: transform .5s var(--ease); }
.cs .agents figure img { width: 100%; max-width: 220px; border-radius: 0; background: none; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .45)); }
.agents figure:hover { transform: translateY(-14px); }
.agents figcaption { order: -1; color: #f2ede3 !important; font: 600 13px var(--sans) !important; text-align: center; margin: 0 0 10px !important; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; }
.agents figure:hover figcaption { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .agents { flex-wrap: wrap; justify-content: center; } .agents figure { flex: 0 0 33%; } .agents figcaption { opacity: 1; translate: 0; } }
.hero-main { grid-template-columns: 1fr; }
/* marks viewer: show mockups uncropped, legible badge in both themes */
.spec-stage { min-height: 0; align-items: stretch; }
.spec-shot { aspect-ratio: 4 / 3; align-self: start; }
.spec-shot img { height: 100%; object-fit: cover; }
.spec-shot .badge, .badge { background: #e9e2d4; color: #111110; }
.badge.live { background: #d6f5df; color: #0e6b32; }
.spec-stage { grid-template-columns: 1fr; } .spec-mark { min-height: clamp(340px, 34vw, 520px); } .spec-svg svg { max-height: 260px; } .spec-box { max-width: 760px; }

/* ---------- Zuper: full homepage scrolling inside a laptop ---------- */
.lap-sec { height: 460vh; position: relative; margin-top: clamp(40px, 6vw, 90px); }
.lap-pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; align-content: center; gap: 18px; padding-top: 64px; }
.laptop { width: min(1120px, 90vw, calc((100svh - 190px) * 1.52)); }
.lid { position: relative; background: #1b1b1d; border-radius: 18px 18px 6px 6px; padding: 2.4% 2.4% 2.8%; box-shadow: inset 0 0 0 2px #2e2e31, 0 50px 90px rgb(0 0 0 / .45); }
.lid::before { content: ""; position: absolute; top: 1%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3a3a3e; }
.screen { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #f9f5f2; }
.cs .screen img { width: 100%; height: auto; border-radius: 0; background: none; will-change: transform; }
.deck { position: relative; height: clamp(12px, 1.5vw, 20px); margin: 0 -7%; background: linear-gradient(#dcdce0, #a6a6ab); border-radius: 2px 2px 18px 18px / 2px 2px 100% 100%; }
.deck::before { content: ""; position: absolute; left: 43%; right: 43%; top: 0; height: 45%; background: #9b9ba1; border-radius: 0 0 8px 8px; }
.lap-cap { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mute); }
.lap-bar { width: 120px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lap-bar i { display: block; height: 100%; width: 100%; background: var(--zu); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 760px) { .lap-sec { height: 360vh; } .lap-cap span:nth-child(2) { display: none; } }

/* ===================================================================
   A KARTHI FILM — concept layer
   =================================================================== */
:root { --blue: #d23a26; --gold: #e3a83f; }
:root[data-theme="dark"], :root:not([data-theme="light"]) { --cream: #0b0a09; --ink: #f3ead7; --cream-2: #1a1816; --card: #171513; --panel: #171513; --mute: #a59f92; --nav: rgb(11 10 9 / .82); --blue: #e0482f; }
:root[data-theme="light"] { --cream: #f3ead7; --ink: #15120e; --cream-2: #e8dcc3; --card: #fffaf0; --panel: #15120e; --mute: #6e6656; --nav: rgb(243 234 215 / .86); --blue: #c4311d; --gold: #a8741b; }

/* film grain */
body.film::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* opening certificate */
.cert { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; padding: 20px; transition: opacity .7s; }
.cert.out { opacity: 0; pointer-events: none; }
.cert-card { width: min(620px, 100%); border: 2px solid #f3ead7; color: #f3ead7; padding: clamp(22px, 4vw, 40px); font-family: var(--mono); position: relative; }
.cert-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.cert-top .mono { font-size: 15px; letter-spacing: .4em; }
.cert-u { width: 64px; height: 64px; border: 2px solid #f3ead7; border-radius: 50%; display: grid; place-items: center; font: 900 34px var(--display); }
.cert-line { margin: 0 0 22px; font-size: 15px; line-height: 1.6; }
.cert-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; }
.cert-meta dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.cert-meta dd { margin: 2px 0 0; font-size: 14px; }
.cert-skip { position: absolute; right: 14px; bottom: -44px; background: none; border: 0; color: #f3ead7; font: 500 13px var(--mono); cursor: pointer; opacity: .7; }

/* title card */
.titlecard { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding-block: 110px 60px; text-align: center; }
.titlecard::before, .titlecard::after { content: ""; position: absolute; left: 0; right: 0; height: 6vh; background: #000; z-index: 2; }
.titlecard::before { top: 0; } .titlecard::after { bottom: 0; }
:root[data-theme="light"] .titlecard::before, :root[data-theme="light"] .titlecard::after { background: #15120e; }
.ta-bg { position: absolute; left: 50%; top: 52%; translate: -50% -50%; font: 800 clamp(160px, 34vw, 640px)/1 "Anek Tamil", sans-serif; font-stretch: 125%; white-space: nowrap;
  color: color-mix(in srgb, var(--gold) 9%, transparent); pointer-events: none; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { scale: 1.06; } }
.tc-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.presents { color: var(--gold); letter-spacing: .5em; font-size: 13px; margin: 0; animation: fade 1.2s .3s both; }
.tc-title { margin: 0; display: grid; font: 900 clamp(58px, 12.4vw, 236px)/.84 var(--display); font-stretch: 52%; text-transform: uppercase; letter-spacing: -.005em;
  background: linear-gradient(180deg, #fff6df 20%, var(--gold) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .05em 0 #7a1d10) drop-shadow(0 .14em .2em rgb(0 0 0 / .5)); }
:root[data-theme="light"] .tc-title { background-image: linear-gradient(180deg, #2a1f12 20%, #8d5a12 95%); filter: drop-shadow(0 .05em 0 rgb(196 49 29 / .6)); }
.tc-title span { animation: mass 1.3s var(--ease) both; }
.tc-title span:nth-child(2) { animation-delay: .18s; }
@keyframes mass { from { scale: 1.35; filter: blur(14px); opacity: 0; } }
@keyframes fade { from { opacity: 0; translate: 0 10px; } }
.tc-tag { margin: 0; font: 500 clamp(20px, 2.2vw, 30px)/1.2 var(--sans); letter-spacing: -.01em; animation: fade 1s .7s both; }
.billing { display: grid; grid-template-columns: repeat(4, auto); gap: 10px 36px; justify-content: center; margin: 14px 0 0; animation: fade 1s .9s both; }
.billing dt { font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.billing dd { margin: 0; font-size: 15px; max-width: 26ch; }
.billing .chip { margin-left: 4px; background: var(--card); color: var(--ink); }
.tc-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; animation: fade 1s 1.1s both; }
@media (max-width: 860px) { .billing { grid-template-columns: 1fr 1fr; } }

/* film strip divider */
.strip { height: 46px; background: #050504; position: relative; overflow: hidden; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; width: 200%; height: 9px; background: repeating-linear-gradient(90deg, #2a2723 0 16px, transparent 16px 32px); border-radius: 2px; animation: run 6s linear infinite; }
.strip::before { top: 8px; } .strip::after { bottom: 8px; }
@keyframes run { to { translate: -50% 0; } }

/* movies: poster + synopsis */
.movie { display: grid; grid-template-columns: minmax(280px, .9fr) 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(60px, 8vw, 120px); }
.movie.flip .poster { order: 2; }
.poster { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 7% 7% 6%; color: #fff; box-shadow: 0 40px 80px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .08); transition: transform .6s var(--ease); max-width: 520px; width: 100%; justify-self: center; }
.poster:hover { transform: translateY(-8px); }
.poster.zu { background: radial-gradient(90% 60% at 50% 70%, #ff7a2e, #fd5000 45%, #8a2400 100%); }
.poster.sf { background: radial-gradient(80% 60% at 50% 45%, #ff4fbd, #e6217b 50%, #6d0a37 100%); }
.p-top { font-size: 10px; letter-spacing: .4em; opacity: .85; }
.p-tag { margin-top: 10px; font: 500 15px/1.3 var(--sans); opacity: .95; max-width: 24ch; }
.p-cast { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 116%; margin-top: 8px; }
.p-cast img { width: 30%; margin: 0 -6%; filter: drop-shadow(0 16px 20px rgb(0 0 0 / .4)); }
.p-cast img:nth-child(3) { width: 36%; z-index: 2; }
.p-cast img:nth-child(2), .p-cast img:nth-child(4) { z-index: 1; }
.p-mark { flex: 1; display: grid; place-items: center; width: 62%; }
.p-mark svg { width: 100%; overflow: visible; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .35)); }
.p-title { font: 900 clamp(56px, 7.6vw, 132px)/.82 var(--display); font-stretch: 55%; text-transform: uppercase; letter-spacing: 0; margin-top: 4%;
  text-shadow: 0 .05em 0 rgb(0 0 0 / .25); }
.p-bill { margin-top: 10px; font: 700 11px/1.15 var(--display); font-stretch: 50%; text-transform: uppercase; letter-spacing: .04em; opacity: .9; max-width: 34ch; }
.p-date { margin-top: 10px; font-size: 10px; letter-spacing: .25em; color: #fff3c8; }
.synopsis { display: grid; gap: 18px; align-content: center; max-width: 560px; }
.movieno { color: var(--gold); }
.synopsis h3 { margin: 0; font: 900 clamp(48px, 6vw, 104px)/.86 var(--display); font-stretch: 112%; letter-spacing: -.04em; }
.synopsis p { margin: 0; font-size: 18px; line-height: 1.65; }
.synopsis .go { justify-self: start; display: inline-flex; gap: 10px; font: 700 16px var(--sans); padding: 15px 22px; border-radius: 99px; background: var(--ink); color: var(--cream); transition: transform .4s var(--ease), background .3s; }
.synopsis .go:hover { transform: translateY(-2px); background: var(--blue); color: #fff; }
@media (max-width: 860px) { .movie { grid-template-columns: 1fr; } .movie.flip .poster { order: 0; } .poster { max-width: 400px; } }

/* interval */
.interval { display: grid; place-items: center; gap: 6px; text-align: center; padding: clamp(80px, 12vw, 160px) 20px; margin-top: clamp(40px, 6vw, 80px);
  background: radial-gradient(70% 90% at 50% 50%, #e0482f, #8f1d10 70%, #3d0c06); color: #fff3df; position: relative; overflow: hidden; }
.interval::before, .interval::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; background: repeating-linear-gradient(90deg, rgb(0 0 0 / .28) 0 10px, rgb(255 255 255 / .04) 10px 22px); }
.interval::before { left: 0; } .interval::after { right: 0; transform: scaleX(-1); }
.iv-ta { font: 800 clamp(52px, 10vw, 190px)/1.1 "Anek Tamil", sans-serif; font-stretch: 100%; position: relative; max-width: 100%; }
.iv-en { font: 900 clamp(28px, 4.4vw, 76px)/1 var(--display); font-stretch: 52%; text-transform: uppercase; letter-spacing: .5em; margin-right: -.5em; position: relative; }
.iv-sub { opacity: .8; position: relative; margin-top: 10px; }

.sub { margin: clamp(48px, 6vw, 80px) 0 0; font: 900 clamp(28px, 3vw, 44px)/1 var(--display); font-stretch: 60%; text-transform: uppercase; letter-spacing: .04em; color: var(--gold); }
.sub + .timeline { margin-top: 18px; }

/* end credits */
.credits { margin-top: clamp(90px, 12vw, 160px); background: #000; color: #f3ead7; text-align: center; }
.roll { height: 68vh; overflow: hidden; position: relative; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.roll-in { animation: roll 34s linear infinite; padding-top: 68vh; display: grid; gap: 34px; }
.roll:hover .roll-in { animation-play-state: paused; }
.roll p { margin: 0; font: 600 clamp(20px, 2vw, 30px)/1.3 var(--sans); }
.roll p span { display: block; font: 500 11px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
@keyframes roll { to { transform: translateY(-100%); } }
.bookings { padding: clamp(40px, 6vw, 80px) var(--gut); display: grid; justify-items: center; gap: 18px; }
.bookings .num { color: var(--gold); letter-spacing: .3em; }
.bookings h2 { margin: 0; font: 900 clamp(64px, 12vw, 220px)/.85 var(--display); font-stretch: 112%; letter-spacing: -.045em; }
.bookings .big { display: inline-flex; align-items: baseline; gap: .3em; font: 900 clamp(24px, 4.8vw, 84px)/1.05 var(--display); letter-spacing: -.03em; white-space: nowrap; color: #f3ead7;
  background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 4px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .6s var(--ease); padding-bottom: .06em; }
.bookings .big:hover { background-size: 100% 4px; }
.bookings .hire { width: min(900px, 100%); margin-top: 18px; }
.bookings .hire div { background: rgb(243 234 215 / .07); text-align: left; }
.bookings .links a { color: #f3ead7; }
.bookings .links a:hover { background: #f3ead7; color: #000; }
.subham { padding: clamp(60px, 8vw, 110px) 20px clamp(40px, 5vw, 60px); display: grid; justify-items: center; gap: 14px; border-top: 1px solid rgb(243 234 215 / .1); }
.subham > span:first-child { font: 800 clamp(80px, 15vw, 260px)/1 "Anek Tamil", sans-serif; background: linear-gradient(180deg, #fff6df, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subham .mono { color: #a59f92; letter-spacing: .3em; }
@media (max-width: 560px) { .bookings .big { font-size: 6.6vw; } }

@media (prefers-reduced-motion: reduce) { .roll { height: auto; -webkit-mask: none; mask: none; } .roll-in { padding-top: 40px; } .cert { display: none; } }
.cert-load { margin: 22px 0 0; font-size: 12px; color: #e3a83f; letter-spacing: .08em; } .madras { color: #e3a83f !important; letter-spacing: .14em !important; }
/* case pages, film edition */
.cs .cs-hero .presents { color: #fff3c8; text-align: left; margin: 0; letter-spacing: .4em; font-size: 12px; animation: none; }
.cs .cs-hero h1 { text-transform: uppercase; font-stretch: 54%; letter-spacing: 0; font-size: clamp(84px, 17vw, 330px); line-height: .82;
  text-shadow: 0 .045em 0 rgb(0 0 0 / .28), 0 .12em .25em rgb(0 0 0 / .25); }
.cs .cs-hero h1 .flo { font-weight: 900; font-stretch: 54%; color: rgb(255 255 255 / .72); }
.cs .sec-head .num { color: var(--gold); letter-spacing: .14em; }

/* ---------- anime touches ---------- */
/* "To be continued" end-card arrow */
.tbc { justify-self: end; display: inline-grid; grid-template-columns: auto; gap: 2px; margin-top: 20px; padding: 14px 64px 14px 28px; color: #2b1d0e;
  background: linear-gradient(180deg, #e9cf8a, #c9a24a 60%, #a8822f); clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%, 14px 50%);
  transform: skewX(-10deg); transition: transform .4s var(--ease), filter .3s; filter: drop-shadow(0 6px 0 rgb(0 0 0 / .25)); }
.tbc span { font: 900 clamp(22px, 2.6vw, 38px)/1 var(--display); font-stretch: 60%; text-transform: uppercase; letter-spacing: .02em; }
.tbc small { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.tbc:hover { transform: skewX(-10deg) translateX(10px); filter: drop-shadow(0 6px 0 rgb(0 0 0 / .25)) brightness(1.06); }
/* manga speed lines behind posters on hover */
.poster::after { content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .22) 0deg 1.2deg, transparent 1.2deg 7deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%); mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%); animation: spin 18s linear infinite; }
.poster > * { position: relative; z-index: 1; }
.poster:hover::after { opacity: 1; }
@keyframes spin { to { rotate: 360deg; } }
/* certificate can never trap a visitor: hidden unless JS shows it, and it fades out on its own */
.cert[hidden] { display: none !important; }
.cert:not([hidden]) { animation: certout .7s 2.8s forwards; }
@keyframes certout { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.screen { position: relative; }
.lap-live { position: absolute; left: 0; top: 0; width: 1440px; border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: #f9f5f2; }
.lap-live.on { opacity: 1; }

/* ---------- posters v2: key art + billing ---------- */
.poster { padding: 0; justify-content: flex-start; isolation: isolate; }
.poster .p-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 100%; z-index: 0 !important; transition: scale 1.4s var(--ease); }
.poster:hover .p-art { scale: 1.05; }
.poster.zu { background: #2b1206; }
.poster.zu::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(120 40 0 / .35), transparent 30%, transparent 55%, rgb(20 8 2 / .92) 88%); }
.poster .p-top { margin-top: 8%; }
.poster .p-title { margin-top: 3%; font-size: clamp(84px, 11vw, 190px); line-height: .8; font-stretch: 52%; }
.poster.zu .p-title { color: #fff7ea; text-shadow: 0 .04em 0 #b33a00, 0 0 .5em rgb(253 80 0 / .55); }
.poster .p-tag { margin-top: 12px; font-size: 16px; letter-spacing: .02em; }
.poster .p-foot { margin-top: auto; padding: 0 8% 7%; display: grid; justify-items: center; gap: 10px; }
.poster .p-bill { margin: 0; font-size: 12px; max-width: 36ch; }
.poster .p-date { margin: 0; }
/* Spendflo: layered mark in perspective, with light rays */
.poster.sf { background: radial-gradient(70% 55% at 50% 62%, #ff57c1 0%, #e6217b 38%, #5e0830 85%); perspective: 900px; }
.p-rays { position: absolute; inset: -30%; z-index: 0 !important; background: repeating-conic-gradient(from 0deg at 50% 62%, rgb(255 255 255 / .09) 0 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle at 50% 62%, #000 10%, transparent 62%); mask: radial-gradient(circle at 50% 62%, #000 10%, transparent 62%); animation: spin 40s linear infinite; }
.poster.sf .p-title { color: #fff; text-shadow: 0 .04em 0 #8a0d46, 0 0 .5em rgb(255 79 189 / .5); }
.p-stack { position: relative; width: 62%; aspect-ratio: 1; margin-top: 6%; transform-style: preserve-3d; transform: rotateX(54deg) rotateZ(-28deg); transition: transform 1.2s var(--ease); }
.poster.sf:hover .p-stack { transform: rotateX(48deg) rotateZ(-20deg); }
.p-stack svg { position: absolute; left: 0; width: 100%; overflow: visible; filter: drop-shadow(0 24px 22px rgb(60 0 25 / .55)); }
.p-stack .s1 { top: 0; transform: translateZ(110px); } .p-stack .s2 { top: 38%; transform: translateZ(55px); } .p-stack .s3 { top: 70%; transform: translateZ(0); }
.poster::after { z-index: 0; }

/* hero tamil caption, subham translation */
.ta-cap { position: absolute; right: var(--gut); bottom: calc(6vh + 14px); z-index: 3; color: var(--mute); letter-spacing: .14em; }
.sub-en { color: #f3ead7 !important; opacity: .7; letter-spacing: .08em !important; text-transform: none !important; font-size: 13px !important; }

/* end credits: classic centred two-column roll */
.roll-in { gap: 22px; }
.roll .cr-title { font: 900 clamp(26px, 3vw, 44px)/1 var(--display); font-stretch: 55%; text-transform: uppercase; letter-spacing: .3em; color: var(--gold); margin-bottom: 18px; }
.roll .cr { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; max-width: 980px; margin: 0 auto; width: 100%; padding-inline: 20px; font: inherit; }
.roll .cr span { display: block; text-align: right; margin: 0; padding-top: 6px; font: 500 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.roll .cr b { font: 600 clamp(18px, 1.7vw, 26px)/1.35 var(--sans); color: #f3ead7; }
.roll .cr b small { display: block; margin-top: 6px; font: 400 15px/1.45 var(--sans); color: #b9b2a3; max-width: 40ch; }
@media (max-width: 600px) { .roll .cr { grid-template-columns: 1fr; gap: 4px; text-align: center; } .roll .cr span { text-align: center; } }

/* ===================================================================
   FILM POLISH — one type system, one accent, one card style
   =================================================================== */
/* 1. every display heading = condensed poster lettering */
.film .sec-head h2, .cs .sec-head h2, .synopsis h3, .bookings h2, .more .txt b, .rules b, .timeline b, .gal h3, .pullquote, .glance-title {
  font-family: var(--display); font-weight: 900; font-stretch: 55%; text-transform: uppercase; letter-spacing: .005em; line-height: .88;
}
.film .sec-head h2, .cs .sec-head h2 { font-size: clamp(52px, 7.4vw, 128px); max-width: 16ch; }
.synopsis h3 { font-size: clamp(64px, 7vw, 120px); color: var(--ink); }
.bookings h2 { font-size: clamp(88px, 14vw, 250px); line-height: .82; }
.rules b { font-size: clamp(28px, 2.6vw, 40px); line-height: .95; }
.timeline b { font-size: clamp(28px, 2.8vw, 44px); }
.pullquote { font-size: clamp(56px, 9vw, 170px); }
.cs .sec-head h2 { color: var(--ink); }

/* 2. one accent: gold for kickers and labels */
.sec-head .num, .film .sec-head .num, .cs .sec-head .num, .movieno, .awards .mono, .bookings .num { color: var(--gold) !important; letter-spacing: .22em; }

/* 3. one card style: dark screen with a hairline of gold */
.rules > div, .rules > div:nth-child(1), .rules > div:nth-child(2), .rules > div:nth-child(3),
.glance > div, .glance > div:nth-child(2), .glance > div:nth-child(3), .fronts div, .steps li {
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
.rules .mono, .glance .label { color: var(--gold) !important; opacity: 1; }
.rules > div:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }

/* earlier releases: matching dark cards with condensed titles */
.more button, .more button[style] { background: var(--card) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent); }
.more .txt { padding: 18px 20px 22px; }
.more .txt b { font-size: clamp(40px, 4vw, 64px); margin-bottom: 8px; }
.more .txt span { font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); opacity: 1; }

/* marks list: quiet, gold active state */
.spec-list button[aria-current="true"] { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.spec-list button[aria-current="true"] .mono, .spec-list button[aria-current="true"] .label { color: var(--gold); }
.spec-mark { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 16%, transparent); }

/* 4. posters: crisp titles, readable billing, legible mark */
.poster.zu .p-title { text-shadow: 0 .045em 0 #a83400, 0 .14em .3em rgb(0 0 0 / .35); }
.poster.sf .p-title { font-size: clamp(72px, 9.2vw, 158px); text-shadow: 0 .045em 0 #7a0b3e, 0 .14em .3em rgb(0 0 0 / .3); }
.poster .p-bill { font-size: 13px; line-height: 1.2; opacity: .92; }
.poster .p-tag { font-weight: 600; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.p-stack { width: 56%; transform: rotateX(34deg) rotateZ(-8deg); margin-top: 10%; }
.poster.sf:hover .p-stack { transform: rotateX(26deg) rotateZ(-4deg); }
.p-stack .s1 { transform: translateZ(70px); } .p-stack .s2 { transform: translateZ(35px); }

/* tidy buttons + timeline */
.btn.ghost { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 60%, transparent); }
.timeline { border-top-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.sub { letter-spacing: .12em; }
/* posters v3: generated key art + real lettering and mark on top */
.poster.zu::before { background: linear-gradient(180deg, rgb(60 20 0 / .25), transparent 32%, transparent 62%, rgb(18 8 2 / .9) 90%); }
.poster.zu .p-art { object-position: 50% 50%; }
.poster.sf { background: #0a0612; perspective: none; }
.poster.sf::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(10 6 18 / .2), transparent 40%, rgb(10 6 18 / .25) 62%, rgb(10 6 18 / .92) 92%); }
.poster.sf .p-art { object-position: 50% 50%; }
.p-emblem { position: absolute !important; left: 50%; top: 29.5%; width: 26%; translate: -50% -50%; filter: drop-shadow(0 0 22px rgb(255 80 190 / .75)) drop-shadow(0 10px 18px rgb(0 0 0 / .4)); animation: glow 4s ease-in-out infinite; }
.p-emblem svg { width: 100%; overflow: visible; }
@keyframes glow { 50% { filter: drop-shadow(0 0 34px rgb(255 80 190 / .95)) drop-shadow(0 10px 18px rgb(0 0 0 / .4)); } }
.poster.sf .p-title { margin-top: auto; font-size: clamp(76px, 9.6vw, 164px); }
.poster.sf .p-tag { margin-top: 8px; }
.poster.sf .p-foot { margin-top: 14px; }
/* laptop: a normal section with a live, interactive screen */
.lap-sec { height: auto; }
.lap-pin { position: relative; height: auto; padding: 24px 0 8px; }
.laptop { width: min(1180px, 92vw); }
.lap-live { pointer-events: auto; }
.screen { aspect-ratio: 16 / 10; }

/* ---------- title card v2: projector beam, 3D gold lettering, sheen, flare ---------- */
.beam { position: absolute; left: 50%; top: -10%; width: 140vw; height: 120%; translate: -50% 0; pointer-events: none; z-index: 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgb(255 226 160 / .13) 172deg, rgb(255 236 190 / .2) 180deg, rgb(255 226 160 / .13) 188deg, transparent 200deg);
  -webkit-mask: linear-gradient(#000 30%, transparent 92%); mask: linear-gradient(#000 30%, transparent 92%); animation: flicker 5s steps(30) infinite; }
@keyframes flicker { 0%, 100% { opacity: .95; } 47% { opacity: .82; } 49% { opacity: 1; } 73% { opacity: .9; } }
.dust { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff3d0, transparent), radial-gradient(1px 1px at 44% 62%, #fff3d0, transparent), radial-gradient(1.2px 1.2px at 57% 24%, #fff3d0, transparent),
    radial-gradient(1px 1px at 63% 48%, #fff3d0, transparent), radial-gradient(1.5px 1.5px at 51% 76%, #fff3d0, transparent), radial-gradient(1px 1px at 38% 41%, #fff3d0, transparent), radial-gradient(1.3px 1.3px at 70% 70%, #fff3d0, transparent);
  background-size: 100% 100%; animation: dust 18s linear infinite;
  -webkit-mask: conic-gradient(from 180deg at 50% 0%, transparent 162deg, #000 176deg, #000 184deg, transparent 198deg); mask: conic-gradient(from 180deg at 50% 0%, transparent 162deg, #000 176deg, #000 184deg, transparent 198deg); }
@keyframes dust { to { background-position: 0 -120px, 0 -80px, 0 -140px, 0 -60px, 0 -110px, 0 -90px, 0 -130px; } }
.tc-title { position: relative; filter: none; isolation: isolate; }
.tc-title span { position: relative; display: block;
  background-image: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .95) 50%, transparent 58%), linear-gradient(180deg, #fffaf0 8%, #f6dfa6 45%, #d9a441 78%, #b47d22 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mass 1.3s var(--ease) both, sheen 6s 1.8s ease-in-out infinite; }
.tc-title span::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: #5c1709; -webkit-text-fill-color: #5c1709;
  text-shadow: 0 1px 0 #6a1c0b, 0 2px 0 #6a1c0b, 0 3px 0 #74200d, 0 4px 0 #74200d, 0 5px 0 #7e250f, 0 6px 0 #7e250f, 0 7px 0 #872a11, 0 8px 0 #872a11, 0 10px 18px rgb(0 0 0 / .6), 0 24px 50px rgb(0 0 0 / .5); }
@keyframes sheen { 0%, 70% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
.flare { position: absolute; left: 50%; top: 50%; width: 120%; height: 3px; translate: -50% -50%; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgb(140 190 255 / .0) 10%, rgb(170 210 255 / .85) 45%, #fff 50%, rgb(170 210 255 / .85) 55%, transparent 90%);
  box-shadow: 0 0 18px 4px rgb(150 200 255 / .45); opacity: 0; animation: flare 2.2s 1s ease-out both; mix-blend-mode: screen; }
@keyframes flare { 0% { opacity: 0; scale: .2 1; } 20% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1.2 1; } }
:root[data-theme="light"] .tc-title span::before { color: #b8862c; -webkit-text-fill-color: #b8862c; text-shadow: 0 2px 0 #a8741b, 0 4px 0 #94641a, 0 6px 0 #7e5416, 0 12px 24px rgb(0 0 0 / .25); }
:root[data-theme="light"] .beam, :root[data-theme="light"] .dust { display: none; }
@media (prefers-reduced-motion: reduce) { .tc-title span { animation: none; } .flare, .dust { display: none; } }
.tc-title { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
/* Spendflo poster now mirrors Zuper: title on top of painted key art */
.poster.sf::before { background: linear-gradient(180deg, rgb(70 10 40 / .3), transparent 32%, transparent 62%, rgb(25 6 18 / .9) 90%); }
.poster.sf .p-title { margin-top: 3%; font-size: clamp(64px, 8.2vw, 140px); color: #fff4fa; text-shadow: 0 .045em 0 #9c1150, 0 .14em .3em rgb(0 0 0 / .3); }
.poster.sf .p-tag { margin-top: 12px; }
.poster.sf .p-foot { margin-top: auto; }
/* title extrusion v2: stacked drop-shadows on the gold glyphs (no overlay layer) */
.tc-title span::before { content: none !important; }
.tc-title span { animation: mass2 1.3s var(--ease) both, sheen 6s 1.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 #6a1c0b) drop-shadow(0 1px 0 #74200d) drop-shadow(0 1px 0 #7e250f) drop-shadow(0 2px 0 #872a11) drop-shadow(0 2px 0 #8f2e12) drop-shadow(0 12px 18px rgb(0 0 0 / .55)); }
.tc-title span:nth-child(2) { animation-delay: .18s, 1.95s; }
@keyframes mass2 { from { scale: 1.35; opacity: 0; } }
:root[data-theme="light"] .tc-title span { filter: drop-shadow(0 2px 0 #a8741b) drop-shadow(0 2px 0 #94641a) drop-shadow(0 2px 0 #7e5416) drop-shadow(0 10px 18px rgb(0 0 0 / .2)); }
/* classics cards on home */
.more.classics a { display: grid; grid-template-rows: 1fr auto; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent); transition: transform .5s var(--ease); }
.more.classics a:hover { transform: translateY(-6px); }
.more.classics .pic { position: relative; overflow: hidden; }
.more.classics .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.more.classics a:hover .pic img { scale: 1.06; }
.more.classics .txt { padding: 18px 20px 22px; border-top: 3px solid var(--k); }
.more.classics .txt .mono { display: block; font-size: 10px; letter-spacing: .24em; color: var(--k); margin-bottom: 8px; }
.more.classics .txt b { display: block; font: 900 clamp(40px, 4vw, 64px)/.88 var(--display); font-stretch: 55%; text-transform: uppercase; margin-bottom: 8px; color: var(--ink); }
.more.classics .txt > span:last-child { font: 500 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
/* classic pages: specimen + swatch counts */
.specimen { border-radius: var(--r); padding: clamp(24px, 4vw, 56px); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent); margin-bottom: 16px; }
.specimen .label { color: var(--brand) !important; }
.specimen .sp-big { margin: 14px 0 18px; font-size: clamp(36px, 5vw, 76px); line-height: 1.04; font-weight: 600; letter-spacing: -.02em; max-width: 18ch; }
.specimen .sp-set { margin: 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.7; color: var(--mute); }
.swatches.sw-3 { grid-template-columns: 1.6fr 1.2fr 1fr; }
.swatches.sw-4 { grid-template-columns: 1.4fr 1.2fr 1fr .9fr; }
.swatches div[style*="#f5d7ab"], .swatches div[style*="#e5ebf2"], .swatches div[style*="#c4c4c4"] { color: #111; }
.swatches div[style*="#f5d7ab"] .label, .swatches div[style*="#e5ebf2"] .label, .swatches div[style*="#c4c4c4"] .label { color: #1119 !important; }

/* ===== hero v3: the cinema screen plays a trailer of the work ===== */
.theatre { padding-top: 96px; padding-bottom: 40px; display: grid; gap: clamp(28px, 4vw, 48px); justify-items: center; position: relative; }
.theatre::before { content: ""; position: absolute; left: 50%; top: 60px; width: 90%; height: 60%; translate: -50% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, rgb(255 230 180 / .07), transparent 70%); }
.cinema { position: relative; width: min(1320px, 100%); aspect-ratio: 2.39 / 1; overflow: hidden; background: #000; border-radius: 4px;
  box-shadow: 0 0 0 1px rgb(255 240 210 / .06), 0 40px 120px rgb(255 210 140 / .08), 0 30px 80px rgb(0 0 0 / .6); }
.cinema::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgb(0 0 0 / .65); }
.cut { position: absolute; inset: 0; opacity: 0; display: grid; place-items: center; text-align: center;
  animation: cut 21s linear infinite; animation-delay: calc(var(--i) * 3s); }
.cut:not(.card)::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; animation: push 21s linear infinite; animation-delay: calc(var(--i) * 3s); }
.cut:not(.card)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .1) 40%, rgb(0 0 0 / .65)); }
.cut .ct { position: relative; z-index: 1; font: 900 clamp(48px, 9vw, 150px)/.9 var(--display); font-stretch: 55%; text-transform: uppercase; color: #fff8ec; letter-spacing: .02em; text-shadow: 0 6px 30px rgb(0 0 0 / .5); }
.cut .cs { position: absolute; left: 4%; bottom: 13%; z-index: 1; color: #f3dca8; letter-spacing: .22em; }
.cut.card .ct { font: 500 clamp(18px, 2.4vw, 34px)/1.2 var(--mono); font-stretch: normal; letter-spacing: .5em; text-transform: uppercase; color: #e3a83f; text-shadow: none; padding: 0 6%; }
.cut.card:last-of-type .ct { font: 900 clamp(40px, 6.4vw, 104px)/.95 var(--display); font-stretch: 55%; letter-spacing: .02em; color: #fff8ec; max-width: 16ch; }
@keyframes cut { 0% { opacity: 0; } 1.5% { opacity: 1; } 13.3% { opacity: 1; } 15% { opacity: 0; } 100% { opacity: 0; } }
@keyframes push { 0% { scale: 1.12; } 15% { scale: 1; } 100% { scale: 1; } }
.lb { position: absolute; left: 0; right: 0; height: 7%; background: #000; z-index: 2; } .lb.t { top: 0; } .lb.b { bottom: 0; }
.opening { display: grid; justify-items: center; gap: 14px; text-align: center; }
.opening .presents { color: var(--gold); letter-spacing: .5em; font-size: 12px; margin: 0; }
.opening .name { margin: 0; font: 700 clamp(30px, 4.6vw, 72px)/1 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .16em; color: var(--ink); margin-right: -.16em; }
.opening .role { margin: 0; font: 500 clamp(15px, 1.3vw, 18px) var(--sans); color: var(--mute); letter-spacing: .02em; }
.opening .billing { margin-top: 10px; grid-template-columns: repeat(3, auto); }
@media (max-width: 760px) { .cinema { aspect-ratio: 16 / 10; } .opening .billing { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cut { animation: none; } .cut:nth-child(2) { opacity: 1; } }
.cinema { width: min(1320px, 100%, calc((100svh - 330px) * 2.39)); } .theatre { padding-top: 84px; gap: 26px; }
/* trailer: titles as lower-third credits, not over the art */
.cut:not(.card) .ct { position: absolute; left: 4%; bottom: 11%; font-size: clamp(34px, 4.6vw, 80px); text-align: left; }
.cut:not(.card) .cs { bottom: calc(11% + clamp(34px, 4.6vw, 80px) * .95 + 10px); }
.cut:not(.card)::after { background: linear-gradient(90deg, rgb(0 0 0 / .55), transparent 55%), linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .55)); }
/* certificate: every load, clear skip */
.cert:not([hidden]) { animation: certout .7s 6s forwards; }
.cert-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.cert-foot .cert-load { margin: 0; }
.cert-skip { position: static; opacity: 1; padding: 10px 18px; border: 1.5px solid #f3ead7; border-radius: 99px; font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #f3ead7; background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.cert-skip:hover, .cert-skip:focus-visible { background: #f3ead7; color: #000; }
/* trailer crops: keep faces clear of the lower-third */
.cut:nth-child(2)::before, .cut:nth-child(3)::before { background-position: 50% 62%; }

/* ===== opening certificate, projected-film realism ===== */
.cert { flex-direction: column; gap: 22px; background: radial-gradient(80% 80% at 50% 45%, #151412 0%, #000 75%); overflow: hidden; }
.cert:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.cert::after { content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .14; animation: grain .5s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cert::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px 40px #000; z-index: 2; }
.cert-gate { animation: projflick 2.2s steps(20) infinite; }
@keyframes projflick { 0%, 100% { opacity: 1; } 31% { opacity: .9; } 33% { opacity: 1; } 67% { opacity: .94; } }
.cert-card { width: min(760px, 92vw); border: 3px double #e9e1cf; outline: 1px solid rgb(233 225 207 / .35); outline-offset: 6px; padding: clamp(20px, 3.4vw, 40px);
  color: #e9e1cf; font-family: "Courier New", ui-monospace, monospace; background: #050504; text-shadow: 0 0 6px rgb(255 245 220 / .25); }
.cert-head { display: grid; grid-template-columns: 76px 1fr 76px; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgb(233 225 207 / .4); }
.cert-seal { color: #e9e1cf; width: 76px; opacity: .9; }
.cert-titles { text-align: center; }
.cert-titles p { margin: 0; }
.cert-ta { font: 800 clamp(22px, 2.6vw, 30px)/1.1 "Anek Tamil", sans-serif; }
.cert-en { font: 700 clamp(18px, 2vw, 24px)/1.2 "Courier New", monospace; letter-spacing: .5em; text-transform: uppercase; margin-right: -.5em !important; }
.cert-org { font: 400 11px "Courier New", monospace; letter-spacing: .25em; text-transform: uppercase; opacity: .75; margin-top: 4px !important; }
.cert-u { width: 76px; height: 76px; border: 3px solid #e9e1cf; border-radius: 50%; display: grid; place-items: center; font: 900 44px/1 var(--display); font-stretch: 80%; text-box: trim-both cap alphabetic; }
.cert-no { margin: 16px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.cert-line { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }
.cert-line b, .cert-no b { font-weight: 700; }
.cert-meta { grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; }
.cert-meta dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; font-family: inherit; }
.cert-meta dd { margin: 2px 0 0; font-size: 14px; font-family: inherit; }
.cert-sign { display: flex; justify-content: space-between; align-items: end; margin-top: 22px; padding-top: 6px; }
.cert-sign .sig { display: block; font: 400 clamp(34px, 4vw, 46px)/.9 "Mrs Saint Delafield", cursive; color: #f3ead7; transform: rotate(-4deg); margin-bottom: 2px; }
.cert-sign .sig-line { display: block; border-top: 1px solid rgb(233 225 207 / .6); padding-top: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.cert-date { text-align: right; display: grid; gap: 4px; }
.cert-date .mono { font-size: 10px; letter-spacing: .2em; opacity: .65; }
.cert-date b { font-size: 15px; letter-spacing: .12em; border: 1.5px solid rgb(233 225 207 / .7); padding: 4px 10px; transform: rotate(-2deg); display: inline-block; }
.cert-foot { position: relative; z-index: 3; width: min(760px, 92vw); margin: 0; }
@media (max-width: 600px) { .cert-head { grid-template-columns: 52px 1fr 52px; } .cert-seal, .cert-u { width: 52px; } .cert-u { height: 52px; font-size: 30px; } .cert-meta { grid-template-columns: 1fr; } }
.cert:not([hidden]) { animation: certout .7s 11.5s forwards; }
.cert-t { display: inline-block; min-width: 2.6ch; margin-left: 6px; padding-left: 8px; border-left: 1px solid currentColor; opacity: .8; font-variant-numeric: tabular-nums; }
/* hero v4: opening credits only, centred in the frame */
.theatre { min-height: 100svh; align-content: center; padding-top: 80px; }
.opening { gap: 18px; }
.opening .presents { font-size: 13px; }
.opening .name { font-size: clamp(40px, 7.6vw, 132px); letter-spacing: .1em; margin-right: -.1em; font-stretch: 58%; }
.opening .role { font-size: clamp(16px, 1.5vw, 21px); }

/* ===== hero v5: KARTHI in a montage of movie-title genres ===== */
.titleword { margin: 0; height: clamp(110px, 22vw, 340px); display: grid; place-items: center; width: 100%; overflow: visible; }
.rw { display: block; line-height: 1; white-space: nowrap; font-size: clamp(84px, 19vw, 300px); color: #f3ead7; animation: rwin .35s var(--ease) both; }
@keyframes rwin { from { opacity: 0; scale: 1.06; filter: blur(6px); } }
.g-base { font: 900 clamp(84px, 19vw, 300px)/1 var(--display); font-stretch: 55%; letter-spacing: .04em; }
.g-blockbuster { font-family: "Bebas Neue", sans-serif; letter-spacing: .06em; background: linear-gradient(180deg, #fff6df, #e3a83f 70%, #a8741b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgb(227 168 63 / .35)); }
.g-epic { font-family: "Cinzel", serif; font-weight: 700; font-size: clamp(64px, 14vw, 220px); letter-spacing: .14em; background: linear-gradient(180deg, #f6f1e6, #9c927f 55%, #e9e1cf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-neon { font-family: "Monoton", cursive; font-size: clamp(64px, 14vw, 220px); color: #ff5fd2; text-shadow: 0 0 8px #ff5fd2, 0 0 24px #ff2bbd, 0 0 60px #b3008c; }
.g-horror { font-family: "Creepster", cursive; color: #d3121b; letter-spacing: .04em; text-shadow: 0 4px 0 #5a0006, 0 0 30px rgb(211 18 27 / .45); }
.g-western { font-family: "Rye", serif; font-size: clamp(60px, 13vw, 210px); color: #e2b47a; text-shadow: 0 5px 0 #6b3a16; letter-spacing: .04em; }
.g-scifi { font-family: "Orbitron", sans-serif; font-weight: 800; font-size: clamp(56px, 12vw, 200px); letter-spacing: .14em; color: #b9f3ff; text-shadow: 0 0 12px #2fd6ff, 0 0 40px rgb(47 214 255 / .55); }
.g-fantasy { font-family: "UnifrakturMaguntia", serif; color: #e8d8a8; text-shadow: 0 6px 24px rgb(0 0 0 / .6); }
.g-deco { font-family: "Limelight", serif; font-size: clamp(64px, 14vw, 230px); letter-spacing: .08em; color: #e3c27a; text-shadow: 0 3px 0 #6e4f16; }
.g-thriller { font-family: "Special Elite", monospace; color: #f3ead7; letter-spacing: .12em; text-shadow: 3px 0 0 rgb(210 30 30 / .6), -3px 0 0 rgb(30 160 210 / .5); }
.g-romance { font-family: "Playfair Display", serif; font-style: italic; font-weight: 800; color: #ffb3c7; text-shadow: 0 0 40px rgb(255 120 160 / .35); }
.g-tamil { font: 800 clamp(70px, 15vw, 240px)/1.2 "Anek Tamil", sans-serif; font-stretch: 112%; background: linear-gradient(180deg, #ffe08a, #ff6a1a 70%, #c22a10); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #5c1709); }
.g-action { font-family: "Bungee Shade", cursive; font-size: clamp(56px, 12vw, 200px); color: #ffd23f; }
.g-adventure { font-family: "Pirata One", cursive; font-size: clamp(80px, 17vw, 280px); color: #e7c48b; letter-spacing: .02em; text-shadow: 0 4px 0 #4a2a0b; }
.opening .presents .np-label { opacity: .7; }
.opening .presents .genre { color: #fff3c8; }
.name-sm { margin: 0; font: 700 clamp(18px, 2vw, 28px)/1 var(--display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .3em; margin-right: -.3em; color: var(--ink); }
/* certificate rubber stamp */
.stamp { display: grid; justify-items: center; gap: 2px; padding: 10px 18px 8px; border: 3px solid #d2453a; outline: 1.5px solid #d2453a; outline-offset: 3px; border-radius: 6px;
  color: #d2453a; transform: rotate(-9deg); margin-right: 6px; text-shadow: none; opacity: .88; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, transparent 61%) 0 0 / 7px 7px, linear-gradient(#000, #000);
  -webkit-mask-composite: source-over; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stamp .st-top { font: 700 22px/1 "Courier New", monospace; letter-spacing: .3em; text-transform: uppercase; margin-right: -.3em; }
.stamp .st-mid { font: 700 10px/1.2 "Courier New", monospace; letter-spacing: .18em; text-transform: uppercase; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; padding: 3px 0; }
.stamp .st-u { font: 900 26px/1 var(--display); font-stretch: 80%; width: 34px; height: 34px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; margin-top: 3px; }
/* certificate: full-screen projected frame */
.cert { padding: 2.5vmin; gap: 1.6vmin; }
.cert-card { width: min(96vw, calc((100svh - 13vmin) * 1.62)); height: min(calc(100svh - 13vmin), calc(96vw / 1.62)); display: flex; flex-direction: column; justify-content: space-between;
  padding: 3.4vmin 4.2vmin; border-width: 6px; outline-offset: 8px; }
.cert-head { grid-template-columns: 13vmin 1fr 13vmin; gap: 2vmin; padding-bottom: 2vmin; }
.cert-seal { width: 13vmin; }
.cert-u { width: 13vmin; height: 13vmin; font-size: 8vmin; border-width: .5vmin; }
.cert-ta { font-size: 5.2vmin; }
.cert-en { font-size: 3.6vmin; }
.cert-org { font-size: 1.6vmin; }
.cert-no { font-size: 2vmin; margin: 0; }
.cert-line { font-size: 2.6vmin; line-height: 1.55; margin: 0; max-width: 62ch; }
.cert-meta { gap: 1.6vmin 4vmin; }
.cert-meta dt { font-size: 1.5vmin; }
.cert-meta dd { font-size: 2.3vmin; }
.cert-sign { margin-top: 0; align-items: center; }
.cert-sign .sig { font-size: 7vmin; }
.cert-sign .sig-line { font-size: 1.6vmin; }
.stamp { padding: 1.4vmin 2.6vmin 1.2vmin; border-width: .45vmin; }
.stamp .st-top { font-size: 3.6vmin; }
.stamp .st-mid { font-size: 1.5vmin; }
.stamp .st-u { font-size: 4vmin; width: 5.4vmin; height: 5.4vmin; }
.cert-foot { width: min(96vw, calc((100svh - 13vmin) * 1.62)); }
.cert-load { font-size: 1.7vmin !important; }
.cert-skip { font-size: max(12px, 1.7vmin); padding: 1.2vmin 2.4vmin; }
@media (max-width: 700px) and (orientation: portrait) { .cert-card { width: 94vw; height: auto; min-height: 70svh; } .cert-meta { grid-template-columns: 1fr; } }
/* no top bar; case pages get a small floating back pill */
.backpill { position: fixed; left: 16px; top: 16px; z-index: 50; font: 600 13px var(--sans); padding: 10px 16px; border-radius: 99px; color: var(--ink);
  background: rgb(11 10 9 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 6px 20px rgb(0 0 0 / .45); transition: color .2s; }
.backpill:hover { color: var(--gold); }
.theatre { padding-top: 40px; }
.cs-hero { margin-top: 64px; }

/* ===================================================================
   DE-TEMPLATE PASS: no boxed 3-card grids, no numbered tiles
   =================================================================== */
/* statement rows (What I bring, Zuper system) */
.rules { display: block !important; border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.rules > div, .rules > div:nth-child(n) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px clamp(24px, 5vw, 80px); align-items: baseline;
  padding: clamp(22px, 3vw, 36px) 0; background: none !important; box-shadow: none !important; border-radius: 0; border-bottom: 1px solid var(--line); transition: none; }
.rules > div:hover { transform: none; box-shadow: none !important; }
.rules > div > .mono { display: none; }
.rules b { font-size: clamp(34px, 4.4vw, 72px); line-height: .9; }
.rules p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: 48ch; opacity: 1; color: #d9d3c6; }
@media (max-width: 760px) { .rules > div, .rules > div:nth-child(n) { grid-template-columns: 1fr; } }

/* synopsis (Challenge / Approach / Outcome) */
.glance { display: block !important; margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.glance > div, .glance > div:nth-child(n) { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 32px; align-items: baseline;
  padding: 20px 0; background: none !important; box-shadow: none !important; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.glance .label { margin: 0; color: var(--gold) !important; opacity: 1; }
.glance p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; max-width: 62ch; color: #e6e0d3; }
@media (max-width: 760px) { .glance > div, .glance > div:nth-child(n) { grid-template-columns: 1fr; } }

/* Spendflo launch fronts → rows */
.fronts { display: block; margin-bottom: 32px; border-top: 1px solid var(--line); }
.fronts div { display: grid; grid-template-columns: 40px 220px 1fr; gap: 12px 24px; align-items: baseline; padding: 16px 0; background: none !important; box-shadow: none !important; border-radius: 0; border-bottom: 1px solid var(--line); }
.fronts .mono { color: var(--gold) !important; }
@media (max-width: 760px) { .fronts div { grid-template-columns: 30px 1fr; } .fronts div p { grid-column: 2; } }

/* morph steps → ruled list */
.steps { gap: 0; }
.steps li { background: none !important; box-shadow: none !important; border-radius: 0; padding: 16px 0 16px 20px; border-left: 2px solid var(--line); }
.steps li.on { border-left-color: var(--brand); box-shadow: none !important; }

/* bookings info → one quiet line */
.hire { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px 40px; }
.hire div, .bookings .hire div { background: none !important; padding: 0; text-align: center; }

/* tags as small caps text, not pills */
.badge, .badge.live, .spec-shot .badge { background: none !important; padding: 0; border-radius: 0; color: var(--gold) !important; margin-right: 10px; letter-spacing: .16em; }
.badge.live::before { content: "● "; color: #6fcf8e; }
/* hero v6: generated title designs, slow dissolve */
.titleword { position: relative; height: auto; width: min(1180px, 94vw); aspect-ratio: 21 / 9; display: block; margin: -2vw 0; }
.titleword .tt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; opacity: 0; scale: 1.04;
  transition: opacity 1.1s ease, scale 2.8s var(--ease); -webkit-mask: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent 100%); }
.titleword .tt.on { opacity: 1; scale: 1; }
@media (max-width: 760px) { .titleword { width: 100vw; margin: 0; } }
.poster::after { content: none !important; display: none !important; }
/* hero v6: generated title designs, slow dissolve */
.titleword { position: relative; height: auto; width: min(1180px, 94vw); aspect-ratio: 21 / 9; display: block; margin: -2vw 0; }
.titleword .tt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; opacity: 0; scale: 1.04;
  transition: opacity 1.1s ease, scale 2.8s var(--ease); -webkit-mask: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent 100%); }
.titleword .tt.on { opacity: 1; scale: 1; }
@media (max-width: 760px) { .titleword { width: 100vw; margin: 0; } }
/* interval v2: real curtain, type in the spotlight */
.interval { background: #0a0303 url("assets/interval-curtain.webp") center 40% / cover no-repeat; min-height: clamp(420px, 46vw, 760px); align-content: center; gap: 4px; padding-block: clamp(60px, 9vw, 120px); }
.interval::before, .interval::after { content: none !important; }
.iv-ta { background: linear-gradient(180deg, #fff6df 15%, #f0c76a 60%, #b8862c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgb(80 10 0 / .55)) drop-shadow(0 18px 30px rgb(0 0 0 / .45)); font-size: clamp(56px, 9vw, 170px); }
.iv-en { font-size: clamp(22px, 2.6vw, 44px); color: #fff3df; letter-spacing: .9em; margin-right: -.9em; font-weight: 700; text-shadow: 0 2px 14px rgb(0 0 0 / .5); }
.iv-sub { color: #f3dca8; opacity: 1; letter-spacing: .3em; text-shadow: 0 1px 8px rgb(0 0 0 / .6); margin-top: 18px; }

/* ===== classics as cinema tickets ===== */
.tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ticket { --paper: #efe4cc; position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 150px; min-height: clamp(220px, 21vw, 300px);
  background: var(--paper); color: #1a140c; border-radius: 14px; overflow: hidden; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .45)); transition: transform .5s var(--ease);
  -webkit-mask: radial-gradient(circle 16px at calc(100% - 150px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 16px at calc(100% - 150px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 16px at calc(100% - 150px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 16px at calc(100% - 150px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); }
.t-pic { position: relative; overflow: hidden; }
.t-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.ticket:hover .t-pic img { scale: 1.05; }
.t-pic::after { content: ""; position: absolute; inset: 0; box-shadow: inset -24px 0 30px -20px rgb(0 0 0 / .35); }
.t-body { display: grid; align-content: center; gap: 12px; padding: clamp(18px, 2.4vw, 34px); border-top: 6px solid var(--k); }
.t-kicker { font: 600 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #6b5a3e; }
.t-title { font: 900 clamp(48px, 5.4vw, 92px)/.85 var(--display); font-stretch: 55%; text-transform: uppercase; color: #1a140c; }
.t-rows { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 12px; border-top: 1px dashed rgb(26 20 12 / .3); }
.t-rows span { font: 600 14px var(--sans); }
.t-rows i, .t-seat i { display: block; font: 500 10px var(--mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #8a7655; margin-bottom: 2px; }
.t-stub { position: relative; display: grid; align-content: space-between; justify-items: center; padding: 22px 12px; border-left: 2px dashed rgb(26 20 12 / .35); background: color-mix(in srgb, var(--k) 18%, var(--paper)); transition: transform .5s var(--ease); transform-origin: left center; }
.ticket:hover .t-stub { transform: rotate(3deg) translateX(4px); }
.t-admit { writing-mode: vertical-rl; rotate: 180deg; font: 900 clamp(22px, 2vw, 30px)/1 var(--display); font-stretch: 60%; text-transform: uppercase; letter-spacing: .12em; color: #1a140c; }
.t-seat { text-align: center; font: 800 22px var(--display); font-stretch: 70%; }
.t-code { font: 500 10px var(--mono); letter-spacing: .12em; color: #6b5a3e; }
@media (max-width: 860px) { .ticket { grid-template-columns: 1fr 110px; -webkit-mask: none; mask: none; } .t-pic { grid-column: 1 / -1; height: 200px; position: relative; } .t-stub { grid-row: 2; grid-column: 2; } .t-body { grid-row: 2; } }

/* ===== "Up next" film-strip card (replaces To be continued) ===== */
.nextmovie { justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-top: 28px; background: #060505; color: #f3ead7; border-radius: 6px; overflow: hidden; position: relative;
  padding: 22px 0; transition: transform .5s var(--ease); }
.nextmovie::before, .nextmovie::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 10px, #2a2622 10px 24px, transparent 24px 34px); }
.nextmovie::before { top: 5px; } .nextmovie::after { bottom: 5px; }
.nextmovie:hover { transform: translateY(-4px); }
.nm-art { display: block; aspect-ratio: 16 / 9; background: center / cover no-repeat; margin-left: 22px; border-radius: 3px; filter: saturate(1.05); transition: filter .4s; }
.nextmovie:hover .nm-art { filter: saturate(1.2) brightness(1.08); }
.nm-body { display: grid; align-content: center; gap: 12px; padding: 0 clamp(20px, 3vw, 44px); }
.nm-k { font: 600 11px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.nm-t { font: 900 clamp(48px, 6vw, 104px)/.85 var(--display); font-stretch: 55%; text-transform: uppercase; color: #fff8ec; }
.nm-play { display: inline-flex; align-items: center; gap: 12px; justify-self: start; font: 700 15px var(--sans); padding: 12px 20px 12px 12px; border-radius: 99px; background: #f3ead7; color: #111; }
.nm-play i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-style: normal; font-size: 12px; transition: transform .4s var(--pop); }
.nextmovie:hover .nm-play i { transform: scale(1.15); }
@media (max-width: 760px) { .nextmovie { grid-template-columns: 1fr; } .nm-art { margin: 0 16px 16px; } }
/* ticket tear v2: stub never moves; punched perforation centred on the notches */
.ticket:hover { transform: translateY(-4px); }
.ticket:hover .t-stub { transform: none; }
.t-stub { border-left: 0; }
.t-stub::before { content: ""; position: absolute; left: -2px; top: 22px; bottom: 22px; width: 4px;
  background: radial-gradient(circle 2px at 2px 50%, rgb(11 10 9 / .85) 98%, transparent) 0 0 / 4px 11px repeat-y; }
.ticket { -webkit-mask: radial-gradient(circle 15px at calc(100% - 150px) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 15px at calc(100% - 150px) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 15px at calc(100% - 150px) 0, transparent 97%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle 15px at calc(100% - 150px) 100%, transparent 97%, #000 100%) bottom / 100% 51% no-repeat; }
/* interval v3: a compact breaker band */
.interval { min-height: 0; height: clamp(200px, 22vw, 300px); padding-block: 0; margin-top: clamp(30px, 4vw, 60px); background-position: center 32%; background-size: cover; gap: 0; }
.iv-ta { font-size: clamp(40px, 5.6vw, 92px); line-height: 1.15; }
.iv-en { font-size: clamp(14px, 1.4vw, 22px); letter-spacing: .8em; margin-right: -.8em; }
.iv-sub { margin-top: 10px; font-size: 10px; }

/* ===== interval v4: dark stage, velvet curtains open to the sides ===== */
.interval { background: radial-gradient(38% 80% at 50% 45%, rgb(255 205 140 / .2), transparent 70%), #0a0606 !important; overflow: hidden; height: clamp(230px, 24vw, 320px); }
.curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .45), transparent 22%, transparent 70%, rgb(0 0 0 / .55)),
    repeating-linear-gradient(90deg, #4a070b 0, #7d1116 1.6%, #b0232a 3%, #c93338 3.6%, #8e171c 5.2%, #4a070b 7%);
  transition: transform 1.8s cubic-bezier(.6, .05, .25, 1); }
.curtain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: repeating-linear-gradient(90deg, #d8a94a 0 3px, #8a6420 3px 5px); box-shadow: 0 -2px 0 #b8862c; }
.curtain.l { left: 0; transform-origin: left center; box-shadow: inset -30px 0 40px -20px rgb(0 0 0 / .7); }
.curtain.r { right: 0; transform-origin: right center; box-shadow: inset 30px 0 40px -20px rgb(0 0 0 / .7); }
.interval.open .curtain { transform: scaleX(.24); }
.interval.open .curtain.l { animation: swayL 6s 2s ease-in-out infinite; }
.interval.open .curtain.r { animation: swayR 6s 2s ease-in-out infinite; }
@keyframes swayL { 50% { transform: scaleX(.255) skewY(.4deg); } }
@keyframes swayR { 50% { transform: scaleX(.255) skewY(-.4deg); } }
.interval > span { position: relative; z-index: 1; opacity: 0; transition: opacity 1s .9s; }
.interval.open > span { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .curtain { transform: scaleX(.24); } .interval > span { opacity: 1; } }

/* ===== marks v3: a quiet wall of title cards ===== */
.frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(243 234 215 / .08); border-block: 1px solid rgb(243 234 215 / .08); }
.frame { margin: 0; background: #0f0e0d; aspect-ratio: 1 / 1; display: grid; grid-template-rows: 1fr auto; padding: clamp(18px, 2vw, 28px); transition: background .5s; }
.frame:hover { background: #17150f; }
.fr-logo { display: grid; place-items: center; padding: 14% 10%; }
.fr-logo svg { width: 100%; max-height: 110px; overflow: visible; }
.fr-logo path.f { fill: #e9e1cf; transition: fill .4s; }
.fr-logo path.h { fill: #0f0e0d; transition: fill .5s; }
.frame:hover path.f { fill: #fff8ec; }
.frame:hover path.h { fill: #17150f; }
.frame figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid rgb(243 234 215 / .1); }
.frame b { font: 600 15px var(--sans); color: #f3ead7; }
.frame figcaption span { font: 400 13px var(--sans); color: #8d877b; text-align: right; }
.frames .frame:last-child { grid-column: span 1; }
@media (max-width: 900px) { .frames { grid-template-columns: repeat(2, 1fr); } }
.soon-frame { color: inherit; }
.sf-q { font: 900 clamp(26px, 2.6vw, 40px)/.95 var(--display); font-stretch: 55%; text-transform: uppercase; color: #3a352c; text-align: center; transition: color .4s; }
.soon-frame:hover .sf-q { color: var(--gold); }
.soon-frame figcaption span { color: var(--gold) !important; }
/* interval curtains v2: real velvet halves that slide apart, no squash */
.curtain { width: 51%; background: url("assets/interval-curtain.webp") no-repeat; background-size: 200% auto; transition: transform 2.4s cubic-bezier(.7, 0, .2, 1); animation: none !important; box-shadow: none; }
.curtain.l { background-position: 18% 35%; }
.curtain.r { background-position: 82% 35%; }
.curtain::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent 25%, transparent 75%, rgb(0 0 0 / .6)); }
.curtain.l::before { background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent 25%, transparent 75%, rgb(0 0 0 / .6)), linear-gradient(90deg, transparent 70%, rgb(0 0 0 / .55)); }
.curtain.r::before { background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent 25%, transparent 75%, rgb(0 0 0 / .6)), linear-gradient(270deg, transparent 70%, rgb(0 0 0 / .55)); }
.curtain::after { content: none; }
.interval.open .curtain.l { transform: translateX(-74%); }
.interval.open .curtain.r { transform: translateX(74%); }
.interval .valance { position: absolute; left: 0; right: 0; top: 0; height: 18%; z-index: 3; background: url("assets/interval-curtain.webp") center 8% / 100% auto no-repeat; box-shadow: 0 8px 18px rgb(0 0 0 / .6); }
/* tear interaction */
.t-stub { touch-action: pan-y; cursor: grab; user-select: none; transform-origin: 0 100%; transition: none; }
.t-stub:active { cursor: grabbing; }
.ticket:hover .t-stub { transform: rotate(1.2deg); transition: transform .3s var(--ease); }
.t-hint { font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--k) 70%, #1a140c); }

/* ===== tickets v3: perforated paper with real tear (tear.js) ===== */
.ticket { --stub: 150px; display: block; position: relative; height: clamp(230px, 21vw, 300px); min-height: 0; background: none; border-radius: 0; overflow: visible;
  -webkit-mask: none !important; mask: none !important; clip-path: none !important; filter: drop-shadow(0 18px 26px rgb(0 0 0 / .45)); transform: none !important; color: #1a140c; cursor: pointer; }
.ticket:hover { transform: none !important; }
.tk-paper { position: absolute; inset: 0; will-change: transform; }
.tk-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) var(--stub); background: var(--paper); }
.tk-body .t-pic { position: relative; overflow: hidden; }
.tk-body .t-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.ticket:hover .t-pic img { scale: 1.04; }
.tk-stub { background: color-mix(in srgb, var(--k) 20%, var(--paper)); cursor: grab; touch-action: none; user-select: none; }
.ticket[data-grabbing] .tk-stub { cursor: grabbing; }
.t-stub-in { position: absolute; top: 0; bottom: 0; right: 0; width: var(--stub); display: grid; align-content: space-between; justify-items: center; padding: 22px 12px; }
.tk-fibres { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.tk-fibres path { fill: none; stroke: var(--paper); stroke-linecap: round; opacity: 0; }
.ticket .tk-stub:focus-visible { outline: none; }
.ticket:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
@media (max-width: 760px) { .ticket { --stub: 96px; height: 210px; } .tk-body { grid-template-columns: 0 1fr var(--stub); } .tk-body .t-pic { display: none; } .t-admit { font-size: 18px; } }
.figs.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .figs.g3 { grid-template-columns: 1fr; } }
.tk-body .t-pic { grid-column: auto !important; height: auto !important; }
.cs .figs.g3 img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
/* laptop pinned again: page scroll plays the homepage */
.lap-sec { height: 520vh; }
.lap-pin { position: sticky; top: 0; height: 100svh; padding: 56px 0 0; }
.laptop { width: min(1180px, 92vw, calc((100svh - 140px) * 1.52)); }

/* ===== hero v7: the golden premiere ticket ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theatre { min-height: 100svh; align-content: center; justify-items: center; gap: clamp(18px, 2.4vw, 30px); padding-top: 40px; padding-bottom: 40px;
  background: radial-gradient(50% 55% at 50% 48%, rgb(255 220 150 / .12), transparent 70%); }
.theatre .presents { color: var(--gold); letter-spacing: .5em; font-size: 12px; margin: 0; }
.hero-ticket { --stub: clamp(120px, 13vw, 190px); --paper: #f3e6c4; width: min(1240px, 100%); height: clamp(300px, 34vw, 470px);
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / .55)) drop-shadow(0 0 60px rgb(227 168 63 / .12)); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -6px; } }
.hero-ticket .tk-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) var(--stub);
  background: radial-gradient(120% 140% at 30% 0%, #fbf1d6, #f1e0b3 55%, #e4c98a); }
.hero-ticket .tk-stub { background: linear-gradient(160deg, #e9c46f, #c9973b 70%, #b07f2a); }
.hero-ticket .t-pic { background: #070605; overflow: hidden; }
.hero-ticket .titleword { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; margin: 0; display: block; }
.hero-ticket .titleword .tt { object-fit: cover; scale: 1.12; -webkit-mask: none; mask: none; }
.hero-ticket .titleword .tt.on { scale: 1.06; }
.hero-ticket .np { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #f3dca8; text-shadow: 0 1px 6px #000; }
.hero-ticket .np .genre { color: #fff; }
.hero-ticket .t-body { border-top: 0; padding: clamp(20px, 3vw, 44px); gap: clamp(8px, 1vw, 14px); }
.hero-ticket .t-kicker { color: #8a6420; }
.hero-ticket .t-title { font-size: clamp(42px, 5.6vw, 96px); line-height: .84; color: #1a140c; }
.hero-role { font: 600 clamp(15px, 1.4vw, 20px)/1.3 var(--sans); color: #3b2f1c; }
.hero-ticket .t-rows { border-top-color: rgb(26 20 12 / .25); }
.hero-ticket .t-hint { color: #8a6420; }
.hero-ticket .t-admit { font-size: clamp(22px, 2.4vw, 38px); color: #2a1d08; }
.hero-ticket .t-seat, .hero-ticket .t-code { color: #2a1d08; }
.hero-ticket .tk-fibres path { stroke: #f1e0b3; }
@media (max-width: 760px) {
  .hero-ticket { height: 520px; --stub: 84px; }
  .hero-ticket .tk-body { grid-template-columns: 1fr var(--stub); grid-template-rows: 44% 1fr; }
  .hero-ticket .tk-body .t-pic { display: block; grid-column: 1; grid-row: 1; }
  .hero-ticket .t-body { grid-column: 1; grid-row: 2; padding: 18px; }
  .hero-ticket .t-rows span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-ticket { animation: none; } }
.hero-ticket .titleword .tt { object-fit: contain; scale: 1.02; } .hero-ticket .titleword .tt.on { scale: 1; } .hero-ticket .titleword { inset: 4% 3% 12%; }

/* ===== hero v8: the theatre. curtains part, the title card plays ===== */
.stage-hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #050303; isolation: isolate; }
.stage-hero .screen { position: absolute; left: 8%; right: 8%; top: 9%; bottom: 20%; z-index: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(10px, 1.4vw, 18px);
  background: radial-gradient(70% 75% at 50% 45%, #2a231a 0%, #15110c 55%, #0b0907 100%); box-shadow: 0 0 0 1px rgb(255 240 210 / .05), 0 0 140px rgb(255 214 150 / .1), inset 0 0 120px rgb(0 0 0 / .6); padding: 0 4%; }
.sc-pre { margin: 0; color: var(--gold); font-size: 12px; letter-spacing: .5em; margin-right: -.5em; }
.sc-name { margin: 0; display: grid; font: 900 clamp(56px, 10.5vw, 196px)/.84 var(--display); font-stretch: 55%; text-transform: uppercase; letter-spacing: .01em; color: #f6eedc;
  text-shadow: 0 0 40px rgb(255 226 170 / .18); }
.sc-role { margin: 6px 0 0; font: 500 clamp(17px, 1.7vw, 24px)/1.3 var(--sans); color: #d9d1c1; }
.sc-role span { color: var(--gold); margin: 0 .3em; }
.sc-now { margin: 0; font-size: 11px; letter-spacing: .26em; color: #a59f92; }
.stage-hero .tc-cta { margin-top: 10px; }
/* screen content fades up as the curtain opens */
.stage-hero .screen > * { opacity: 0; translate: 0 14px; transition: opacity 1.1s, translate 1.4s var(--ease); }
.stage-hero.up .screen > * { opacity: 1; translate: 0 0; }
.stage-hero.up .screen > :nth-child(2) { transition-delay: 1.2s; } .stage-hero.up .screen > :nth-child(3) { transition-delay: 1.45s; }
.stage-hero.up .screen > :nth-child(4) { transition-delay: 1.7s; } .stage-hero.up .screen > :nth-child(5) { transition-delay: 1.9s; } .stage-hero.up .screen > :nth-child(6) { transition-delay: 2.1s; }
/* curtains: real velvet halves */
.hc { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 3; pointer-events: none; background: url("assets/interval-curtain.webp") no-repeat; background-size: auto 130%;
  transition: transform 2.8s cubic-bezier(.7, 0, .2, 1); }
.hc.l { left: 0; background-position: 12% 45%; } .hc.r { right: 0; background-position: 88% 45%; }
.hc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 30%, transparent 70%, rgb(0 0 0 / .5)); }
.hc.l::after { background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 30%, transparent 70%, rgb(0 0 0 / .5)), linear-gradient(90deg, transparent 75%, rgb(0 0 0 / .6)); }
.hc.r::after { background: linear-gradient(180deg, rgb(0 0 0 / .35), transparent 30%, transparent 70%, rgb(0 0 0 / .5)), linear-gradient(270deg, transparent 75%, rgb(0 0 0 / .6)); }
.stage-hero.up .hc.l { transform: translateX(-86%); } .stage-hero.up .hc.r { transform: translateX(86%); }
.hval { position: absolute; left: 0; right: 0; top: 0; height: 9%; z-index: 4; background: url("assets/interval-curtain.webp") center 6% / 110% auto no-repeat; box-shadow: 0 10px 24px rgb(0 0 0 / .7); }
/* projector beam from behind the audience, with drifting dust */
.beam2 { position: absolute; left: 50%; bottom: 0; width: 160%; height: 100%; translate: -50% 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 2s 1s;
  background: conic-gradient(from -14deg at 50% 100%, transparent 0deg, rgb(255 232 190 / .07) 6deg, rgb(255 240 210 / .12) 14deg, rgb(255 232 190 / .07) 22deg, transparent 28deg);
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 95%); mask: linear-gradient(0deg, #000 10%, transparent 95%); mix-blend-mode: screen; }
.stage-hero.up .beam2 { opacity: 1; animation: flicker 5s steps(30) 3s infinite; }
.seats { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 26%; z-index: 5; pointer-events: none; }
@media (max-width: 760px) { .stage-hero .screen { left: 4%; right: 4%; top: 12%; bottom: 18%; } .seats { height: 18%; } .sc-pre { letter-spacing: .3em; } }
@media (prefers-reduced-motion: reduce) { .hc { transform: translateX(-86%) !important; } .hc.r { transform: translateX(86%) !important; } .stage-hero .screen > * { opacity: 1; translate: none; } }
.stage-hero .screen { top: 10%; bottom: 25%; } .seats { height: 20%; } .stage-hero .tc-cta { position: relative; z-index: 6; }
.sc-name { font-size: clamp(52px, min(8.6vw, 13svh), 170px); } .stage-hero .screen { top: 9%; bottom: 30%; gap: clamp(8px, 1.1vw, 14px); } .seats { height: 17%; }
.stage-hero .screen { aspect-ratio: auto; overflow: visible; border-radius: 0; height: auto; }
.sc-name { font-size: clamp(52px, min(10vw, 15svh), 190px); }

/* ===== interval v5: a slim running film strip ===== */
.intermission { position: relative; margin-top: clamp(40px, 6vw, 90px); background: #050404; padding: 22px 0; overflow: hidden; rotate: -1.2deg; width: 104%; margin-left: -2%; box-shadow: 0 20px 40px rgb(0 0 0 / .4); }
.intermission::before, .intermission::after { content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 12px, #2c2722 12px 28px, transparent 28px 40px); }
.intermission::before { top: 6px; } .intermission::after { bottom: 6px; }
.im-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: imrun 40s linear infinite; padding: 6px 0; }
.iv-ta2 { font: 800 clamp(30px, 3.4vw, 52px)/1.2 "Anek Tamil", sans-serif; background: linear-gradient(180deg, #fff6df, #e3a83f 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.iv-en2 { font: 900 clamp(26px, 3vw, 46px)/1 var(--display); font-stretch: 55%; text-transform: uppercase; letter-spacing: .3em; color: #f3ead7; }
.iv-sub2 { font: 500 13px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #a59f92; white-space: nowrap; }
.iv-dot { color: var(--gold); font-size: 14px; }
@keyframes imrun { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .im-track { animation: none; } }
/* real audience in the foreground */
.audience { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; object-fit: cover; object-position: center bottom; z-index: 5; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 38%); mask: linear-gradient(180deg, transparent 0%, #000 38%); filter: brightness(.82); }
@media (max-width: 760px) { .audience { height: 22%; } }
/* mini tear tickets on the two main movies */
.ticket.mini { --stub: 112px; height: 168px; width: min(100%, 520px); margin-top: 6px; }
.ticket.mini .tk-body { grid-template-columns: minmax(0, 1fr) var(--stub); }
.ticket.mini .t-body { padding: 18px 22px; gap: 8px; border-top-width: 5px; }
.ticket.mini .t-title { font-size: clamp(38px, 3.4vw, 54px); }
.ticket.mini .t-rows { padding-top: 8px; gap: 6px 22px; }
.ticket.mini .t-admit { font-size: 20px; }
.ticket.mini .t-stub-in { padding: 14px 8px; }
.ticket.mini .t-seat { font-size: 18px; }
@media (max-width: 760px) { .ticket.mini { --stub: 84px; height: 160px; } .ticket.mini .tk-body { grid-template-columns: minmax(0, 1fr) var(--stub); } }
.ticket.mini .t-admit { font-size: 16px; white-space: nowrap; letter-spacing: .1em; } .ticket.mini .t-code { font-size: 9px; }
/* balanced, centred movies */
.movie { max-width: 1160px; margin-inline: auto; grid-template-columns: minmax(280px, 460px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.movie.flip { grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); }
.movie .poster { justify-self: stretch; max-width: none; }
.movie .synopsis { max-width: 600px; }
.movie.flip .synopsis { justify-self: end; }
@media (max-width: 860px) { .movie, .movie.flip { grid-template-columns: 1fr; } .movie .poster { max-width: 420px; justify-self: center; } .movie.flip .synopsis { justify-self: start; } }
.audience { height: 34%; object-position: center top; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%); mask: linear-gradient(180deg, transparent 0%, #000 22%); filter: brightness(.9); } @media (max-width: 760px) { .audience { height: 24%; } }

/* ===== mobile + tablet fixes ===== */
.frames { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frame { padding: 14px; } .frame figcaption { flex-direction: column; gap: 2px; align-items: flex-start; } .frame figcaption span { text-align: left; font-size: 12px; } }
.bookings { max-width: 100%; overflow: hidden; }
@media (max-width: 760px) {
  .bookings .big { display: block; white-space: normal; font-size: clamp(22px, 7.4vw, 40px); text-align: center; }
  .bookings .hire { flex-direction: column; align-items: center; gap: 14px; }
  .t-hint { font-size: 0 !important; } .t-hint::after { content: "Tap to tear"; font-size: 11px; }
}
/* certificate: a little smaller */
/* shrink only the contents; size the frame directly in whole, even pixels so the double border is identical on all four sides */
.cert-card { --k: .84; width: round(calc(var(--k) * min(96vw, calc((100svh - 13vmin) * 1.62))), 2px); height: round(calc(var(--k) * min(calc(100svh - 13vmin), calc(96vw / 1.62))), 2px); padding: calc(var(--k) * 3.4vmin) calc(var(--k) * 4.2vmin); }
.cert-card > * { zoom: var(--k); }
.cert-foot { width: min(81vw, calc((100svh - 13vmin) * 1.36)); }
@media (max-width: 700px) and (orientation: portrait) { .cert-card { --k: .94; width: round(calc(.94 * 94vw), 2px); height: auto; min-height: calc(.94 * 70svh); } .cert-foot { width: 88vw; } }
@media (max-width: 760px) {
  .ticket:not(.hero-ticket):not(.mini) { height: auto; min-height: 190px; }
  .ticket .t-body { padding: 16px 16px; gap: 8px; }
  .ticket .t-kicker { font-size: 9px; letter-spacing: .16em; }
  .ticket .t-rows span:nth-child(3) { display: none; }
  .ticket .t-rows { gap: 4px 16px; }
  .ticket .t-rows span { font-size: 13px; }
  .frame:has(.fr-logo) { aspect-ratio: auto; }
}
/* tablet (761–1024): keep ticket photos, audience visible */
@media (min-width: 761px) and (max-width: 1024px) {
  .ticket { --stub: 120px; height: 230px; }
  .tk-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) var(--stub) !important; }
  .tk-body .t-pic { display: block !important; grid-column: auto !important; grid-row: auto !important; height: auto !important; }
  .t-body, .t-stub-in { grid-row: auto !important; }
  .stage-hero .screen { bottom: 30%; }
  .audience { height: 28%; }
}
.proverb .pullquote { color: var(--cream); } .proverb .pullquote em { background: none; color: var(--sf); padding: 0; } .proverb.end .pullquote em { color: #fff3c8; }
.stage-hero.instant .hc, .stage-hero.instant .screen > *, .stage-hero.instant .beam2 { transition: none !important; }
.proverb .pullquote { color: #f3ead7 !important; }
/* certificate seal stamp */
.stamp2 { width: clamp(120px, 19vmin, 210px); aspect-ratio: 1; color: #d43f33; transform: rotate(-14deg); opacity: .9; mix-blend-mode: screen; margin-right: 1vmin;
  animation: thunk .55s cubic-bezier(.2, 1.6, .4, 1) .9s both; filter: drop-shadow(0 0 1px rgb(212 63 51 / .4)); }
.stamp2 svg { width: 100%; height: 100%; overflow: visible; }
@keyframes thunk { 0% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 60% { opacity: .95; transform: rotate(-14deg) scale(.94); } 100% { opacity: .9; transform: rotate(-14deg) scale(1); } }
.stamp2 { width: clamp(150px, 25vmin, 270px); color: #e04a3c; opacity: .95; margin-top: -4vmin; }
@keyframes thunk { 0% { opacity: 0; transform: rotate(-14deg) scale(1.9); } 60% { opacity: 1; transform: rotate(-14deg) scale(.94); } 100% { opacity: .95; transform: rotate(-14deg) scale(1); } }


/* Spendflo mark: after the morph, each layer gets the spotlight (base → tip) */
.morph-sec { height: 560vh; }
.morph-sec polygon { transition: opacity .45s, translate .6s var(--ease); }
.morph-sec[data-st="2"] polygon:not(:nth-of-type(1)), .morph-sec[data-st="3"] polygon:not(:nth-of-type(2)), .morph-sec[data-st="4"] polygon:not(:nth-of-type(3)) { fill: transparent !important; stroke: rgb(243 234 215 / .28) !important; stroke-width: .8; stroke-dasharray: 2 1.6; }
.morph-sec .steps li { padding-block: 10px; font-size: 16px; }
.morph-sec[data-st="2"] polygon:nth-of-type(1), .morph-sec[data-st="3"] polygon:nth-of-type(2), .morph-sec[data-st="4"] polygon:nth-of-type(3) { translate: 0 -3px; }
.morph-sec[data-st="2"] .handles, .morph-sec[data-st="3"] .handles, .morph-sec[data-st="4"] .handles { opacity: 0; }
.morph-sec .handles { transition: opacity .4s; }
@media (max-width: 760px) { .morph-sec .steps li:not(.on) { display: none; } }
.morph-sec .morph-pin { padding-top: 72px; }
.morph-sec .sec-head h2 { font-size: clamp(40px, 5.2vw, 76px); }

/* QC fixes */
.bookings .links { justify-content: center; }
.rules b { text-wrap: balance; }
@media (max-width: 560px) { .sc-role span { display: block; font-size: 0; } }
@media (min-width: 861px) and (max-height: 820px) { .morph-sec .morph-pin { padding-top: 56px; } .morph-sec .steps li { padding-block: 5px; font-size: 15px; } }
@media (max-width: 760px) { .swatches.sw-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .swatches.sw-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .t-kicker span { display: block; font-size: 0; } }
.fr-logo svg { max-height: clamp(64px, 7.5vw, 110px); }
/* U badge is an SVG matching the K seal; centring no longer depends on font metrics */
.cert-u { height: auto !important; border: 0 !important; border-radius: 0; display: block; color: #e9e1cf; opacity: .9; }
.cert-u svg { display: block; width: 100%; }
/* keep the certificate above the vignette so all four edges are lit evenly; grain stays on top */
.cert-gate { position: relative; z-index: 3; }
.cert::after { z-index: 4; }