/* Lip Sync site styles: the cinematic concept. Dark only; the palette follows the logo's orange and silver. */

:root { --bg:#0B0B0D; --bg2:#111113; --footer:#08080A; --card:#161618; --line:#1B1B1E; --line2:#26262A; --line3:#2E2E33; --ink:#F3F3F4; --ink2:#E4E5E8; --muted:#A1A1A8; --muted2:#8A8A92; --muted3:#6E6E76; --accent:#FF6A13; --accent2:#FF9A3D; --accent3:#FFB36B; --silver:#C9CCD1; --rec:#FF3B30;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --indic: 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', sans-serif;
  color-scheme: dark; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: 'Manrope', sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--accent); }
ul { list-style: none; }
::selection { background: rgba(255,106,19,0.35); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
section[id] { scroll-margin-top: 72px; }

@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-4%); } 60% { transform: translate(-2%,5%); } 80% { transform: translate(4%,2%); } }
@keyframes waveBar { 0%,100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes gradSlide { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes kenburns { 0% { opacity: 0; transform: scale(1.12) translate(0,0); } 6% { opacity: 1; } 25% { opacity: 1; } 31% { opacity: 0; transform: scale(1) translate(-2%, -1%); } 100% { opacity: 0; } }
@keyframes filmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes num { 0% { opacity: 0; transform: scale(1.35); } 12% { opacity: 1; transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes introMark { from { opacity: 0; transform: scale(0.8); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes introOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes ringOut { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.7; } 100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; } }
@keyframes typeOn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes subIn { 0%, 8% { opacity: 0; transform: translateY(8px); } 14%, 46% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; } }
@keyframes onAir { 0%,100% { box-shadow: 0 0 18px rgba(255,59,48,0.55), inset 0 0 10px rgba(255,59,48,0.4); } 50% { box-shadow: 0 0 34px rgba(255,59,48,0.85), inset 0 0 16px rgba(255,59,48,0.6); } }
@keyframes playhead { from { left: 84px; } to { left: calc(100% - 6px); } }
@keyframes pageIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ringPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes cornerIn { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── Shared pieces ────────────────────────────────────────────────────────── */

.section { padding: clamp(80px, 11vw, 130px) clamp(20px, 5vw, 48px); border-top: 1px solid var(--line); }
.section--alt { background: var(--bg2); }
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap--narrow { max-width: 1200px; }
.eyebrow { display: block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.h2 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(36px, 5.4vw, 70px); letter-spacing: -1.5px; color: var(--ink); line-height: 1; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { height: 38px; width: auto; display: block; }
.brand__word { height: 15px; width: auto; display: block; }
.brand--sm .brand__mark { height: 34px; }
.brand--sm .brand__word { height: 13px; }

/* home.js leans [data-magnetic] buttons toward a nearby cursor, so they have no hover lift */
.btn-quote { display: inline-block; text-decoration: none; color: #0B0B0D; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; background: linear-gradient(120deg, var(--accent), var(--accent2)); padding: 11px 26px; border-radius: 100px; transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s; }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 100px; border: 1px solid var(--line3); background: transparent; color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: border-color 0.3s; }
.chip { font-size: 12px; font-weight: 600; color: var(--ink2); border: 1px solid var(--line3); padding: 4px 12px; border-radius: 100px; }

/* headline lines slide up from a clipped mask; --d staggers them */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > span { display: block; animation: lineUp var(--dur, 1s) cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.shimmer { background: linear-gradient(100deg, #FF6A13 0%, #FFB36B 25%, #FF6A13 50%, #FFB36B 75%, #FF6A13 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradSlide 6s linear infinite; }

/* waveform bars: home.js fills a [data-bars] box with spans and sets each height, --dur and --dl */
.bars { display: flex; align-items: center; }
.bars > span { border-radius: 2px; transform-origin: center; animation: waveBar var(--dur, 1.2s) ease-in-out var(--dl, 0s) infinite; }

/* reveal on scroll (home.js adds .revealed); content stays visible if JS never runs. --rd delays one element. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease var(--rd, 0s), transform 0.8s cubic-bezier(.2,.7,.2,1) var(--rd, 0s); }
/* mask: section headings wipe in from a clipped box */
.js [data-reveal="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(0.35em); transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1) var(--rd, 0s), transform 1.1s cubic-bezier(.2,.7,.2,1) var(--rd, 0s), color 0.3s; }
/* card: tiles rise and scale in, row by row */
.js [data-reveal="card"] { transform: translateY(40px) scale(0.96); transition: opacity 0.8s ease var(--rd, 0s), transform 0.9s cubic-bezier(.2,.7,.2,1) var(--rd, 0s); }
.js [data-reveal].revealed { opacity: 1; transform: none; }
.js [data-reveal="mask"].revealed { clip-path: inset(-20% -5% -25% -5%); }
/* fill: a line that draws out from the left */
.js [data-fill] { transform: scaleX(0); }
.js [data-fill].revealed { transform: scaleX(1); }

/* home.js adds .is-paused to animated blocks while they are off screen */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* film grain */
.grain::after { content: ''; position: fixed; inset: -50%; z-index: 1001; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.4s steps(6) infinite; }

/* ── Intro: film-leader countdown (once per session; index.html adds .intro / .intro-hold) ── */

.intro-screen { display: none; position: fixed; inset: 0; z-index: 3000; background: var(--bg); align-items: center; justify-content: center; animation: introOut 0.9s cubic-bezier(.76,0,.24,1) 2.5s both; }
.intro .intro-screen { display: flex; }
.leader { position: relative; width: min(56vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #2A2A2E; overflow: hidden; animation: fadeIn 0.3s ease both; }
.leader__h { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #2A2A2E; }
.leader__v { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #2A2A2E; }
.leader__ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid #2A2A2E; }
.leader__sweep { position: absolute; top: 0; left: 50%; width: 50%; height: 50%; transform-origin: 0% 100%; background: linear-gradient(90deg, rgba(255,106,19,0.35), transparent); animation: sweep 0.6s linear 3 both; }
.leader__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 800; font-size: min(26vw, 120px); color: var(--ink); animation: num 0.6s linear var(--d, 0s) both; }
.leader__num--last { color: var(--accent); }
.leader__mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); animation: introMark 0.7s cubic-bezier(.2,.8,.2,1) 1.8s both; }
.leader__mark img { height: 58%; width: auto; }
.intro-skip { position: absolute; left: 50%; bottom: clamp(20px, 6vh, 48px); transform: translateX(-50%); background: none; border: 1px solid var(--line3); color: var(--muted2); font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 9px 18px; border-radius: 100px; cursor: pointer; }
/* the hero entrance waits behind the curtain and plays as it lifts */
.intro-hold .hero, .intro-hold .hero * { animation-play-state: paused !important; }

/* ── Navigation ───────────────────────────────────────────────────────────── */

#scrollProgressBar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 1002; background: linear-gradient(90deg, var(--accent), var(--accent3)); pointer-events: none; }

/* nav: transparent at the top, solid with blur once the page scrolls; slides away on the way down */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; transition: all 0.45s cubic-bezier(.2,.7,.2,1); background: transparent; padding: 20px 48px; }
.site-nav.scrolled { background: rgba(11,11,13,0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 12px 48px; }
.site-nav.nav-hidden:not(:focus-within) { transform: translateY(-110%); }
.nav-desktop { display: flex; align-items: center; gap: 32px; }
.nav-link { text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; padding: 11px 0; transition: color 0.3s; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; flex-direction: column; justify-content: center; gap: 5px; align-items: flex-end; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 1px; }
.nav-burger span:nth-child(2) { width: 18px; }
.nav-burger span:nth-child(3) { width: 12px; background: var(--accent); }

/* auto margins centre the menu and still let it scroll on short screens */
.mobile-menu { position: fixed; inset: 0; z-index: 999; background: rgba(11,11,13,0.98); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 90px 20px 40px; overflow-y: auto; animation: fadeIn 0.3s ease; }
.mobile-menu > * { animation: fadeUp 0.45s ease both; }
.mobile-menu > :first-child { margin-top: auto; }
.mobile-menu > :last-child { margin-bottom: auto; }
.mobile-menu > :nth-child(2) { animation-delay: 0.05s; }
.mobile-menu > :nth-child(3) { animation-delay: 0.1s; }
.mobile-menu > :nth-child(4) { animation-delay: 0.15s; }
.mobile-menu > :nth-child(5) { animation-delay: 0.2s; }
.mobile-menu > :nth-child(6) { animation-delay: 0.25s; }
.mobile-menu > :nth-child(7) { animation-delay: 0.3s; }
.mobile-menu > :nth-child(8) { animation-delay: 0.35s; }
.mobile-menu__mark { height: 60px; width: auto; margin-bottom: 8px; }
.mobile-menu__link { text-decoration: none; color: var(--ink); font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(28px, 8vw, 38px); }
.mobile-menu .btn-quote { font-size: 15px; padding: 15px 36px; margin-top: 8px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
/* studio photos cross-fade with a slow push-in; home.js sets --sy (scroll px) so they drift as the page scrolls */
.hero__bg { position: absolute; inset: 0; transform: translate3d(0, calc(var(--sy, 0) * 0.25px), 0); }
.kb-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: kenburns 24s ease-in-out var(--d, 0s) infinite; }
.hero__shade { position: absolute; inset: 0; pointer-events: none; }
.hero__shade--side { background: linear-gradient(90deg, rgba(11,11,13,0.97) 0%, rgba(11,11,13,0.82) 45%, rgba(11,11,13,0.55) 100%); }
.hero__shade--base { background: linear-gradient(0deg, #0B0B0D 2%, rgba(11,11,13,0) 45%); }
/* spotlight follows the cursor: home.js sets --hx / --hy on the hero */
.hero__spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px circle at var(--hx, 70%) var(--hy, 40%), rgba(255,106,19,0.12), transparent 62%); }

.hero__body { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(110px, 15vh, 150px) clamp(20px, 5vw, 48px) 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 44px; opacity: calc(1 - var(--sy, 0) / 800); }
/* a size container, so the headline can scale to the column it sits in */
.hero__copy { flex: 1 1 400px; min-width: 0; container-type: inline-size; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 24px; animation: fadeUp 0.8s ease 0.1s both; }
.rec-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: pulseDot 1.2s ease-in-out infinite; }
/* sized so "EVERY STORY" always fits on one line of its column, and the headline is three tidy lines */
.hero h1 { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(40px, 7.2vw, 108px); font-size: clamp(40px, min(14.2cqi, 13vh), 108px); line-height: 0.94; letter-spacing: -2px; color: var(--ink); margin-bottom: 26px; }
.hero__lead { font-size: clamp(15px, 1.7vw, 18px); color: var(--muted); max-width: 500px; line-height: 1.75; text-wrap: pretty; animation: fadeUp 0.8s ease 0.45s both; }

/* "dubbing session" panel: a timeline with one track per language. The outer box
   carries the entrance; the inner one tilts toward the cursor (--tx / --ty). */
.session-wrap { flex: 1 1 360px; max-width: 560px; min-width: 0; animation: fadeUp 1s cubic-bezier(.2,.7,.2,1) 0.55s both; }
.session { border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(18,18,20,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 16px; box-shadow: 0 40px 80px rgba(0,0,0,0.5); transform: perspective(1200px) rotateY(calc(var(--tx, 0) * -8deg)) rotateX(calc(var(--ty, 0) * 6deg)); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.session__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-family: var(--mono); }
.session__rec { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--rec); letter-spacing: 1px; }
.session__label { font-size: 11px; color: var(--muted3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session__tc { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 1px; }
.film { position: relative; height: 58px; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: var(--bg); }
.film__strip { display: flex; gap: 3px; width: max-content; height: 100%; animation: filmScroll 22s linear infinite; }
.film__strip span { width: 92px; height: 100%; border-radius: 4px; background-size: cover; opacity: 0.85; }
.tracks { position: relative; display: flex; flex-direction: column; gap: 6px; }
.track { display: flex; align-items: center; gap: 10px; height: 34px; }
.track__label { flex: 0 0 74px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px; height: 100%; border-radius: 6px; background: #19191C; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--tc); }
.track__label span { font-family: 'Manrope', sans-serif; font-weight: 500; color: var(--muted2); }
.track__wave { flex: 1; min-width: 0; height: 100%; border-radius: 6px; background: #141416; gap: 2px; padding: 0 6px; overflow: hidden; }
.track__wave > span { flex: 1; min-width: 2px; background: var(--tc); opacity: 0.85; }
.playhead { position: absolute; top: -78px; bottom: -4px; left: 84px; width: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(255,106,19,0.9); animation: playhead 6s ease-in-out infinite alternate; pointer-events: none; }
.playhead::before { content: ''; position: absolute; top: -4px; left: -5px; width: 12px; height: 8px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.session__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-family: var(--mono); font-size: 10px; color: var(--muted3); }

.hero__creds { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px) clamp(22px, 4vh, 40px); animation: fadeUp 0.9s ease 0.8s both; }
.creds { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 16px clamp(16px, 3vw, 28px); border-top: 1px solid rgba(255,255,255,0.1); }
.cred { display: inline-flex; align-items: center; gap: 12px; }
.cred svg { flex-shrink: 0; }
.cred__title { display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.cred__sub { display: block; font-size: 12px; color: var(--muted2); }

/* ── Services: a sticky visual beside a list that scrolls past it ─────────── */

.svc-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(36px, 5vw, 60px); }
.svc-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(40px, 6vw, 80px); letter-spacing: -1.5px; line-height: 1; }
.svc-title a { display: inline-flex; align-items: center; gap: 18px; color: var(--ink); text-decoration: none; }
.ring-arrow { position: relative; flex-shrink: 0; width: clamp(44px, 5vw, 62px); height: clamp(44px, 5vw, 62px); border-radius: 50%; border: 1px solid rgba(255,106,19,0.6); display: inline-flex; align-items: center; justify-content: center; }
.ring-arrow::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent); animation: ringPulse 2.4s ease-out infinite; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 8px 0; }

.svc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.svc-visual { position: sticky; top: 110px; z-index: 2; height: min(70vh, 560px); min-height: 420px; border-radius: 22px; overflow: hidden; border: 1px solid #222225; background: radial-gradient(120% 90% at 30% 20%, #1A1714 0%, #111113 60%); }
.svc-visual__label { position: absolute; top: 16px; left: 18px; z-index: 3; font-family: var(--mono); font-size: 11px; color: var(--muted3); letter-spacing: 1px; }
.svc-visual__num { position: absolute; top: 14px; right: 18px; z-index: 3; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 42px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,106,19,0.6); }
/* one scene per service; showing one restarts its animations */
.scene { position: absolute; inset: 0; display: none; animation: fadeIn 0.6s ease both; }
.scene.active { display: flex; }
.scene__cap { display: block; font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-bottom: 8px; }

.scene--dub { flex-direction: column; justify-content: center; gap: 16px; padding: 52px clamp(18px, 3vw, 34px) 24px; }
.scene--dub .bars { gap: 3px; height: clamp(34px, 7vh, 54px); }
.scene--dub .bars > span { flex: 1; background: #5A5A62; }
.scene--dub .bars--dubbed > span { background: linear-gradient(180deg, var(--accent3), var(--accent)); }
.scene__sync { position: absolute; top: 70px; bottom: 50px; left: 0; right: 0; display: flex; justify-content: space-around; pointer-events: none; }
.scene__sync span { width: 0; border-left: 1px dashed rgba(255,106,19,0.5); }
.scene__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: rgba(255,106,19,0.14); border: 1px solid rgba(255,106,19,0.4); padding: 6px 12px; border-radius: 100px; }

.scene--ad { flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 56px 28px 30px; text-align: center; }
.rings { position: relative; display: flex; align-items: center; justify-content: center; }
.rings i { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255,106,19,0.5); animation: ringOut 2.6s ease-out var(--d, 0s) infinite backwards; }
.scene--ad .rings { width: 110px; height: 110px; }
.scene__typed { display: inline-block; max-width: 420px; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5; color: var(--ink); font-style: italic; animation: typeOn 3.2s steps(46) 0.3s both; }

.scene--subs.active { display: block; }
.scene--subs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.scene--subs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,11,13,0.9), transparent 60%); }
.subs { position: absolute; z-index: 1; left: 0; right: 0; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; }
.subs__lines { position: relative; height: 46px; width: 100%; display: flex; justify-content: center; }
/* "backwards" keeps the second line hidden until its turn */
.subs__lines span { position: absolute; padding: 6px 14px; background: rgba(0,0,0,0.75); border-radius: 4px; font-size: clamp(15px, 1.8vw, 20px); color: #fff; white-space: nowrap; animation: subIn 6s ease-in-out var(--d, 0s) infinite backwards; }
.subs__lines span[lang="ta"] { font-family: var(--indic); }
.subs__time { font-family: var(--mono); font-size: 10px; color: var(--muted); }

.scene--vo { flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.on-air { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 4px; color: var(--rec); padding: 8px 18px; border: 2px solid var(--rec); border-radius: 6px; animation: onAir 2s ease-in-out infinite; }
.scene--vo .rings { width: 140px; height: 140px; }
.scene--vo .rings i { border-color: rgba(255,106,19,0.45); animation-duration: 2.4s; }

/* the row level with the middle of the screen is lit; home.js moves .active */
.svc-item { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 28px 0; border-bottom: 1px solid #1F1F22; transition: opacity 0.5s ease; }
.js .svc-item:not(.active) { opacity: 0.3; }
.svc-item__num { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.svc-item h3 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: -1px; line-height: 1.05; }
.svc-item p { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 480px; text-wrap: pretty; }

/* ── Process ──────────────────────────────────────────────────────────────── */

.process .h2 { margin-bottom: clamp(40px, 6vw, 70px); }
.steps { position: relative; }
/* the line runs behind the numbered circles; it only makes sense with all six steps on one row */
.steps__track, .steps__fill { display: none; position: absolute; top: 27px; left: 28px; right: 28px; height: 1px; background: #2A2A2E; }
.steps__fill { height: 2px; margin-top: -0.5px; background: linear-gradient(90deg, var(--accent), var(--accent3)); box-shadow: 0 0 12px rgba(255,106,19,0.6); transform-origin: left; transition: transform 2.4s cubic-bezier(.4,0,.2,1) 0.2s; }
.steps__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step__n { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); box-shadow: 0 0 0 6px var(--bg2); }
.step h3 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; }
.step p { font-size: 14px; color: var(--muted2); line-height: 1.65; text-wrap: pretty; }

/* ── One story, four voices: the tagline in each language ─────────────────── */

.voices { overflow: hidden; text-align: center; padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 48px); }
.voices__wrap { max-width: 1100px; margin: 0 auto; }
.voices .eyebrow { margin-bottom: 26px; }
.lang-tabs { display: inline-flex; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 5px; max-width: 100%; overflow-x: auto; border-radius: 100px; border: 1px solid var(--line2); background: #121214; margin-bottom: clamp(36px, 5vw, 56px); }
.lang-tab { flex-shrink: 0; border: none; cursor: pointer; padding: 10px clamp(12px, 2vw, 22px); border-radius: 100px; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; background: transparent; color: var(--muted); transition: all 0.35s; }
.lang-tab[aria-selected="true"] { background: var(--accent); color: #0B0B0D; }
.phrase { min-height: clamp(110px, 14vw, 170px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.phrase__mask { display: block; overflow: hidden; padding: 0.12em 0; }
.phrase__text { display: block; font-family: var(--indic); font-weight: 700; font-size: clamp(24px, 4.6vw, 58px); line-height: 1.4; text-wrap: balance; color: var(--ink); animation: lineUp 0.8s cubic-bezier(.2,.8,.2,1) both; }
.phrase__note { font-size: 14px; color: var(--muted2); animation: fadeIn 0.8s ease 0.3s both; }
.phrase-wave { justify-content: center; gap: 4px; height: 70px; margin-top: 26px; }
.phrase-wave > span { width: 4px; border-radius: 3px; }

/* ── Featured projects: coverflow, then the grid of every title ───────────── */

.work { padding-left: 0; padding-right: 0; overflow: hidden; }
.work__head { max-width: 1280px; margin: 0 auto 30px; padding: 0 clamp(20px, 5vw, 48px); display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.cf-arrows { display: flex; gap: 10px; }
.cf-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line3); background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.3s; }
.cf-arrow--next { border-color: var(--accent); background: rgba(255,106,19,0.12); color: var(--accent); }
/* home.js places each poster: the middle one faces the viewer, the rest turn away to either side */
.coverflow { position: relative; height: clamp(320px, 38vw, 470px); perspective: 1400px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cf-card { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 2 / 3; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: var(--card); cursor: pointer; box-shadow: 0 20px 40px rgba(0,0,0,0.5); transition: transform 0.8s cubic-bezier(.2,.75,.2,1), opacity 0.6s, filter 0.6s, box-shadow 0.6s; }
.cf-card.active { box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,106,19,0.6); cursor: default; }
.cf-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
.cf-info { text-align: center; padding: 26px 20px 0; min-height: 132px; }
.cf-info__inner { animation: fadeUp 0.6s ease both; }
.cf-meta { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.cf-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 12px; }
.cf-langs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cf-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
/* a 4px line in a taller, tappable button */
.cf-dot { position: relative; width: 8px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; transition: width 0.4s; }
.cf-dot::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: #3A3A40; transition: background 0.4s; }
.cf-dot[aria-current="true"] { width: 28px; }
.cf-dot[aria-current="true"]::before { background: var(--accent); }

.titles { max-width: 1100px; margin: clamp(50px, 7vw, 80px) auto 0; padding: 0 clamp(20px, 5vw, 48px); }
.titles__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.titles__label { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; }
.titles__label span { color: var(--muted3); font-weight: 600; }

.poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: 14px; }
.pcard-wrap--pop { animation: cardIn 0.55s cubic-bezier(.2,.7,.2,1) both; }
/* common.js tilts the tile toward the cursor and moves the glare (--mx / --my / --spot-o) */
@supports not (aspect-ratio: 1) { .pcard::before { content: ''; display: block; padding-top: 133.33%; } } /* older Safari */
.pcard { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--card); border: 1px solid var(--line2); transition: transform 0.25s ease-out, box-shadow 0.4s ease, border-color 0.4s ease; will-change: transform; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.pcard__blank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 18px 16px; gap: 14px; }
.pcard__blank img { height: 34px; width: auto; opacity: 0.55; }
.pcard__blank span { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.15; color: rgba(243,243,244,0.22); text-transform: uppercase; letter-spacing: 0.5px; overflow-wrap: anywhere; }
.pcard__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.16), transparent 60%); opacity: var(--spot-o, 0); transition: opacity 0.3s; }
.pcard__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 13px 13px; background: linear-gradient(to top, rgba(8,8,10,0.96) 0%, rgba(8,8,10,0.75) 55%, transparent 100%); }
.pcard__meta { display: block; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 5px; }
.pcard__title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.25; color: var(--ink); margin: 0 0 8px; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.pcard__langs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.pcard__langs span { font-size: 10.5px; font-weight: 600; color: var(--ink2); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 100px; }
.pcard__services { display: block; font-size: 10.5px; color: var(--muted2); font-weight: 600; }

/* ── Partners ─────────────────────────────────────────────────────────────── */

.partners__head { text-align: center; margin-bottom: 44px; }
.partners__head .h2 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -1px; }
.partners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.partners__grid > li { display: flex; }
/* every partner uses the same card: the logo on a light plate (the files mix white and transparent backgrounds), the name below.
   The <li> carries the scroll reveal so the card keeps its own hover lift. common.js sets --mx / --my / --spot-o on hover. */
.ptile { flex: 1; position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #222225; background: #121214; padding: 10px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.4s, transform 0.5s cubic-bezier(.2,.7,.2,1); }
.ptile__spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255,106,19,0.16), transparent 65%); opacity: var(--spot-o, 0); transition: opacity 0.35s; }
.ptile__plate { position: relative; height: 118px; border-radius: 11px; background: #F6F6F7; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* each logo sets its own box (width / height inline) so the marks look evenly sized */
.ptile__plate img { object-fit: contain; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.ptile__name { position: relative; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink2); text-align: center; padding-bottom: 4px; }

/* ── About and the reel frame ─────────────────────────────────────────────── */

.about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.about .h2 { font-size: clamp(38px, 6vw, 70px); margin-bottom: 26px; }
.about p { font-size: 16px; color: var(--muted); line-height: 1.9; margin-bottom: 18px; text-wrap: pretty; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.stat { padding: 26px 22px; background: var(--card); border-radius: 16px; border: 1px solid #242427; }
.stat__num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(36px, 4vw, 52px); white-space: nowrap; color: var(--accent); display: block; line-height: 1; margin-bottom: 10px; }
.stat:nth-child(2) .stat__num { color: var(--accent2); }
.stat__label { font-size: 12.5px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
.stat__bar { display: block; height: 2px; margin-top: 18px; background: linear-gradient(90deg, #FF6A13, transparent); transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.7,.2,1) 0.2s; }
.stat:nth-child(2) .stat__bar { background: linear-gradient(90deg, #FF9A3D, transparent); transition-delay: 0.35s; }

/* a viewfinder frame; it holds studio photos until there is a showreel to put in it */
.reel { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; border: 1px solid var(--line2); background: var(--bg); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__frame { position: absolute; inset: 14px; pointer-events: none; }
.reel__frame > i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--accent); animation: cornerIn 0.8s ease var(--d, 0s) both; }
.reel__frame > i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.reel__frame > i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; --d: 0.1s; }
.reel__frame > i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; --d: 0.2s; }
.reel__frame > i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; --d: 0.3s; }
.reel__label { position: absolute; top: 8px; left: 38px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--rec); }
.reel__label .rec-dot { width: 7px; height: 7px; animation-duration: 1s; }

/* ── Footer: contact details, then the bottom bar ─────────────────────────── */

.site-footer { position: relative; background: var(--footer); border-top: 1px solid var(--line); overflow: hidden; }
/* the name, huge and outlined, behind the contact details */
.footer-word { position: absolute; left: 0; right: 0; bottom: -0.18em; text-align: center; font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(80px, 19vw, 300px); line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05); pointer-events: none; white-space: nowrap; }
.contact { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(70px, 10vw, 110px) clamp(20px, 5vw, 48px) clamp(50px, 7vw, 70px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }
.contact .h2 { font-size: clamp(38px, 6vw, 72px); margin-bottom: 22px; }
.contact__lead { font-size: 16px; color: var(--muted); line-height: 1.8; max-width: 520px; text-wrap: pretty; }
.contact__list { display: flex; flex-direction: column; gap: 26px; }
.contact-item { display: flex; align-items: center; gap: 18px; }
.contact-item > div { min-width: 0; }
.contact-item__icon { width: 50px; height: 50px; border-radius: 13px; background: var(--card); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item__label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted3); font-weight: 700; margin-bottom: 5px; }
.contact-link { display: inline-block; padding: 5px 0; margin: -5px 0; font-size: 15px; color: var(--ink2); text-decoration: none; transition: color 0.3s; overflow-wrap: anywhere; }
.contact-phones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; color: #4A4A50; }
.contact-phones a { white-space: nowrap; }
.contact-map { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; margin: 0 0 -6px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }

.footer-bar { position: relative; border-top: 1px solid var(--line); padding: 26px clamp(20px, 5vw, 48px); }
.footer-bar__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand__tag { font-size: 12px; color: var(--muted3); margin-left: 6px; }
.footer-copy { font-size: 12px; color: var(--muted3); }

/* ── Tablets and small screens ────────────────────────────────────────────── */

@media (min-width: 700px) {
  .partners__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .steps__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps__track, .steps__fill { display: block; }
}

@media (max-width: 899px) {
  .site-nav { padding: 20px; }
  .site-nav.scrolled { padding: 12px 20px; }
  .nav-desktop { display: none; }
  .nav-burger { display: flex; }
  /* Phones and upright tablets: the headline, then the credentials, then the session
     panel, so the first screen is the message and the certifications. The body box
     dissolves and its two children take their place in the hero's own column. */
  .hero__body { display: contents; }
  .hero__copy { order: 1; flex: 1 0 auto; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 108px 20px 26px; opacity: calc(1 - var(--sy, 0) / 800); }
  .hero__copy > * { align-self: flex-start; }
  .hero__creds { order: 2; }
  .session-wrap { order: 3; position: relative; z-index: 2; flex: none; max-width: none; margin: 4px 20px 30px; }
  /* the visual stays pinned under the nav while its rows scroll beneath it */
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-visual { top: 64px; height: 260px; min-height: 260px; }
  .svc-item { min-height: 44vh; }
  .scene--ad { gap: 14px; padding: 44px 20px 16px; }
  .scene--ad .rings { width: 68px; height: 68px; }
  .scene--ad .rings svg { width: 68px; height: 68px; }
  .scene--vo { gap: 16px; padding-top: 30px; }
  .scene--vo .rings { width: 96px; height: 96px; }
  .scene--vo .rings svg { width: 54px; height: 54px; }
  .subs { bottom: 18px; }
}

/* a phone on its side is too short to pin the picture and still read the list under it */
@media (max-width: 899px) and (max-height: 520px) {
  .svc-visual { position: relative; top: 0; }
  .svc-item { min-height: 0; padding: 36px 0; }
}

@media (max-width: 400px) {
  .lang-tab { font-size: 12.5px; padding: 9px 8px; }
}

/* the narrowest phones: tiles are about 130px wide, so their text steps down a size */
@media (max-width: 359px) {
  .pcard__info { padding: 26px 10px 10px; }
  .pcard__meta { font-size: 8.5px; letter-spacing: 1px; margin-bottom: 4px; }
  .pcard__title { font-size: 12.5px; margin-bottom: 6px; -webkit-line-clamp: 3; }
  .pcard__langs { gap: 4px; margin-bottom: 5px; }
  .pcard__langs span { font-size: 9.5px; padding: 1px 6px; }
  .pcard__services { font-size: 9.5px; }
  .pcard__blank { padding: 14px 12px; gap: 10px; }
  .pcard__blank img { height: 28px; }
  .pcard__blank span { font-size: 14px; }
  .session__label { display: none; }
  .lang-tab { font-size: 12px; padding: 8px 6px; }
  .lang-tabs { gap: 2px; padding: 4px; }
}

/* short laptop screens: tighten the hero so the credentials row still fits on the first screen */
@media (min-width: 900px) and (max-height: 760px) {
  .hero__body { padding-top: 92px; padding-bottom: 16px; gap: 32px; }
  .hero__eyebrow { margin-bottom: 16px; }
  .hero h1 { margin-bottom: 18px; }
  .film { height: 44px; }
  .playhead { top: -64px; }
  .track { height: 28px; }
}

/* ── Hover effects (pointer devices only, so taps don't leave them stuck) ─── */

@media (hover: hover) {
  a:hover { color: var(--accent2); }
  .nav-link:hover, .contact-link:hover, .back-link:hover { color: var(--accent); }
  .contact-map:hover, .text-link:hover { color: var(--accent2); }
  .btn-quote:hover { color: #0B0B0D; box-shadow: 0 10px 28px rgba(255,106,19,0.4); }
  .btn-ghost:hover, .cf-arrow:hover { border-color: var(--accent); color: var(--ink); }
  .cf-arrow--next:hover { color: var(--accent); }
  .svc-title a:hover { color: var(--accent3); }
  .ptile:hover { border-color: #3A3A40; transform: translateY(-4px); }
  .ptile:hover .ptile__plate img { transform: scale(1.08); }
  .pcard:hover { box-shadow: 0 24px 48px rgba(0,0,0,0.55); border-color: rgba(255,106,19,0.45); }
  .pcard:hover .pcard__img { transform: scale(1.06); }
}

/* loops stop and everything rests in its finished state; the scripts skip the intro, timecode, parallax, tilts and magnets */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .kb-slide { animation: none !important; }
  .kb-slide:first-child { opacity: 1; }
  .shimmer, .rec-dot, .film__strip, .playhead, .on-air, .scene__typed { animation: none !important; }
  .subs__lines span { animation: none !important; opacity: 0; }
  .subs__lines span:first-child { opacity: 1; }
  .rings i, .ring-arrow::before { display: none; }
  .session { transform: none; }
}