/* =====================================================================
   BharatClinic — homepage, Act I
   Hero: the promise on the left, a large shuffling deck of conditions on
   the right (stacked on phones). Scrolling pins the stage: the deck cuts
   to the doctor's card, which lifts out of the deck and grows into a
   framed portrait panel; the room changes around it (1965, archive
   prints, his introduction) on their own parallax layers.
   ===================================================================== */

.act { position: relative; background: var(--forest-950); }
.act__stage { position: relative; }

/* ---------- HERO ---------- */
.hero { position: relative; color: var(--ivory); padding: var(--frame-inset); }
.hero__frame { position: relative; min-height: calc(100svh - var(--frame-inset) * 2); display: grid; align-items: center; border-radius: var(--frame-radius); overflow: hidden; background: var(--forest-950); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
/* abstract silk (WebGL, site.js 4b); the fallback is a still composition in the same colours */
.hero__art-fallback, .hero__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__art-fallback { --hero-accent: #7A2A36; background:
  radial-gradient(38% 46% at 74% 42%, color-mix(in srgb, var(--hero-accent) 70%, transparent), transparent 72%),
  radial-gradient(30% 34% at 88% 82%, rgb(217 193 144 / .14), transparent 70%),
  conic-gradient(from 210deg at 70% 50%, #0F3022, #143D2C, #0A2419, color-mix(in srgb, var(--hero-accent) 35%, #0A2419), #0F3022);
  transition: background 1.2s ease; }
.hero__art-fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 36 25 / .75), transparent 60%); }
.hero__art { opacity: 0; transition: opacity 1.2s ease; }
.hero__art.is-on { opacity: 1; }
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgb(10 36 25 / .55), transparent 40%); }
.hero__grid { position: relative; z-index: 2; display: grid; gap: 1.5rem; width: min(1240px, 100%); margin: 0 auto; padding: 6.25rem clamp(1.1rem, 4vw, 3.5rem) 2.5rem; }
@media (min-width: 990px) { .hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 4vw, 4rem); padding-top: 7rem; } }
.hero__copy { display: grid; gap: 1rem; justify-items: start; max-width: 38rem; }
.hero__eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.hero__title { font-family: var(--font-display); font-size: clamp(2.7rem, 1.3rem + 3.5vw, 4.9rem); font-weight: 600; line-height: .94; letter-spacing: -.02em; text-wrap: balance; }
.hero__title em { display: block; font-style: italic; color: var(--rose); }
.hero__line { font-size: clamp(1.0625rem, .95rem + .45vw, 1.3rem); line-height: 1.45; color: rgb(251 248 241 / .88); }
.hero__type { display: inline-grid; white-space: nowrap; vertical-align: bottom; text-align: left; }
.hero__type-sizer, .hero__type-live { grid-area: 1 / 1; }
.hero__type-sizer { visibility: hidden; font-weight: 700; }
.hero__type-sizer::before { content: attr(data-sizer); }
.hero__type-live { color: var(--gold-soft); font-weight: 700; }
.hero__type-live::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: .08em; vertical-align: -.12em; background: var(--rose); animation: caret 1s steps(1, end) infinite; }
.hero__type.is-typing .hero__type-live::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.hero__note { font-size: .875rem; color: rgb(251 248 241 / .62); }

.hero__cue { position: absolute; z-index: 2; left: 50%; bottom: clamp(1rem, 2.4vw, 1.75rem); transform: translateX(-50%); display: inline-flex; align-items: center; gap: .7rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(251 248 241 / .7); text-decoration: none; }
.hero__cue i { position: relative; width: 1px; height: 34px; background: rgb(251 248 241 / .3); overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--gold-soft); transform: translateY(-100%); will-change: transform; animation: cue 1.8s var(--ease-std) infinite; }
@keyframes cue { to { transform: translateY(250%); } }   /* transform, not top: composited, no layout or repaint */

/* ---------- the deck: a real shuffle ----------
   Four cards are visible, fanned behind the front one. Every cut the front
   card slides out to the right, drops behind the pile and tucks in at the
   back (3D depth does the re-ordering), while the rest step forward. */
.reel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; justify-items: stretch; width: var(--deck-w); --deck-w: clamp(19rem, 26vw, 25rem); }
@media (min-width: 990px) { .reel { --deck-w: min(31vw, 28.5rem, calc((100svh - 15rem) * .8)); margin-right: 3rem; } }
.reel__stage { position: relative; width: 100%; aspect-ratio: 4 / 5; cursor: grab; perspective: 1400px; transform-style: preserve-3d; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reel__stage:active { cursor: grabbing; }
.reel__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }
.reel-card { --k: 4; --sp: 1; position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: var(--forest-900); box-shadow: 0 34px 60px -26px rgb(0 0 0 / .7), 0 0 0 1px rgb(251 248 241 / .16);
  transform: translate3d(calc(var(--k) * 26px * var(--sp)), calc(var(--k) * -8px * var(--sp)), calc(var(--k) * -60px)) rotate(calc(var(--k) * 4.5deg * var(--sp))) scale(calc(1 - var(--k) * .04));
  opacity: 0; contain: paint; transition: transform .9s var(--ease-out), opacity .6s ease; }
/* depth shading: a black layer whose opacity animates (composited), instead of a filter that repaints every frame */
.reel-card__dim { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; pointer-events: none; opacity: calc(var(--k) * .14); transition: opacity .6s ease; }
.reel-card[data-pos="0"], .reel-card[data-pos="1"], .reel-card.is-out, .reel-card.is-drag { will-change: transform, opacity; }
.reel-card[data-pos="0"] { --k: 0; opacity: 1; }
.reel-card[data-pos="1"] { --k: 1; opacity: 1; }
.reel-card[data-pos="2"] { --k: 2; opacity: .92; }
.reel-card[data-pos="3"] { --k: 3; opacity: .7; }
.reel-card[data-pos="hidden"] { --k: 4; opacity: 0; }
.reel__stage:hover .reel-card { --sp: 1.35; }
.reel-card.no-trans { transition: none; }
.reel-card.is-drag { transition: none; transform: translate3d(var(--dx, 0px), 0, 30px) rotate(var(--dr, 0deg)); }
.reel-card.is-nudge { animation: nudge 1.4s var(--ease-out) 1; }
@keyframes nudge { 30% { transform: translate3d(-34px, 0, 0) rotate(-2.5deg); } 60% { transform: translate3d(10px, 0, 0) rotate(.6deg); } }
.reel-card.is-out { animation: shuffle .95s cubic-bezier(.6, 0, .25, 1) forwards; }
@keyframes shuffle {
  0%   { transform: translate3d(var(--dx, 0px), 0, 30px) rotate(var(--dr, 0deg)); opacity: 1; }
  42%  { transform: translate3d(calc(var(--dir, 1) * 74%), -6%, 30px) rotate(calc(var(--dir, 1) * 10deg)); opacity: 1; }
  58%  { transform: translate3d(calc(var(--dir, 1) * 70%), -8%, -320px) rotate(calc(var(--dir, 1) * 12deg)); opacity: .9; }
  100% { transform: translate3d(104px, -32px, -240px) rotate(18deg) scale(.84); opacity: 0; }
}
.reel-card.is-out .reel-card__dim { animation: shuffle-dim .95s cubic-bezier(.6, 0, .25, 1) forwards; }
@keyframes shuffle-dim { 0%, 42% { opacity: 0; } 100% { opacity: .55; } }
.reel-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 4.5s linear; }
.reel-card[data-pos="0"] img { transform: scale(1.12); }
.reel-card img { -webkit-user-drag: none; pointer-events: none; }
.reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 36 25 / .55) 0%, transparent 45%); pointer-events: none; }
/* a little glass: a thin bright rim and a soft sheen across the top corner */
.reel-card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), inset 0 1px 0 rgb(255 255 255 / .35); background: linear-gradient(135deg, rgb(255 255 255 / .16), transparent 32%); }
.reel-card__cap { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: grid; gap: .4rem; padding: .9rem 1rem 1rem; border-radius: 16px; color: var(--ivory); text-align: left;
  background: linear-gradient(160deg, rgb(20 61 44 / .66), rgb(10 36 25 / .82)); border: 1px solid rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
  transition: -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
/* the frosted blur is recomputed whenever what's behind it moves, so only the card at rest in front gets it */
.reel-card.is-settled[data-pos="0"]:not(.is-out):not(.is-drag) .reel-card__cap { background: linear-gradient(160deg, rgb(20 61 44 / .38), rgb(10 36 25 / .62)); -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); }
.reel-card__tag { justify-self: start; padding: .2rem .65rem; border-radius: 999px; background: var(--maroon); color: #fff; font-size: .75rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .4s ease .15s, transform .5s var(--ease-out) .15s; }
.reel-card__q { font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + .9vw, 1.95rem); font-weight: 600; line-height: 1.02; }
.reel-card__q .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.reel-card__q .w > span { display: inline-block; transform: translateY(105%); transition: transform .55s var(--ease-out); transition-delay: calc(.3s + var(--wi) * 60ms); }
.reel-card__q mark { color: inherit; background: linear-gradient(var(--maroon), var(--maroon)) no-repeat 0 88% / 0% 38%; padding: 0 .06em; transition: background-size .5s var(--ease-out) .95s; }
.reel-card__hi { font-size: .875rem; color: var(--gold-soft); opacity: 0; transition: opacity .5s ease .9s; }
.reel-card[data-pos="0"]:not(.is-out) .reel-card__tag { opacity: 1; transform: none; }
.reel-card[data-pos="0"]:not(.is-out) .reel-card__q .w > span { transform: none; }
.reel-card[data-pos="0"]:not(.is-out) .reel-card__q mark { background-size: 100% 38%; }
.reel-card[data-pos="0"]:not(.is-out) .reel-card__hi { opacity: 1; }
.reel__stage:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 10px; border-radius: 22px; }

.reel__hud { width: 100%; display: grid; gap: .5rem; }
.reel__bars { display: grid; grid-auto-flow: column; gap: 3px; }
.reel__bars li { height: 3px; border-radius: 3px; background: rgb(251 248 241 / .22); overflow: hidden; }
.reel__bars li i { display: block; height: 100%; background: var(--gold-soft); transform-origin: 0 50%; transform: scaleX(0); }
.reel__bars li.is-done i { transform: scaleX(1); }
.reel__meta { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; }
.reel__count { font-variant-numeric: tabular-nums; color: var(--gold-soft); font-weight: 700; }
.reel__chapter { flex: 1; color: rgb(251 248 241 / .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__pause { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(251 248 241 / .35); background: rgb(10 36 25 / .35); color: var(--ivory); cursor: pointer; }
.reel__pause svg { width: 12px; height: 12px; }
.reel__pause .i-play, .reel__pause[aria-pressed="true"] .i-pause { display: none; }
.reel__pause[aria-pressed="true"] .i-play { display: block; }
.reel__ask { display: flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 .9rem 0 .8rem; border-radius: 999px; text-decoration: none; color: var(--ivory); font-size: .9375rem; font-weight: 600;
  background: linear-gradient(155deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06)); border: 1px solid rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .25s ease; }
.reel__ask:hover { background: rgb(255 255 255 / .2); }
.reel__ask svg { width: 18px; height: 18px; color: #7ee0a0; flex-shrink: 0; }
.reel__ask span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__ask i { font-style: normal; color: var(--gold-soft); transition: transform .3s var(--ease-out); }
.reel__ask:hover i { transform: translateX(3px); }
.reel__note { font-size: .6875rem; letter-spacing: .03em; color: rgb(251 248 241 / .5); }

@media (max-width: 989px) {
  .hero__grid { justify-items: center; text-align: center; padding-bottom: 3.5rem; }
  .hero__copy { justify-items: center; }
  .hero__ctas { justify-content: center; }
  .reel { --deck-w: min(68vw, 20rem, calc((100svh - 23rem) * .8)); margin-right: 1.2rem; }
}
@media (max-width: 749px) {
  .hero__grid { gap: 1.1rem; padding-top: 5.4rem; padding-bottom: 3rem; }
  .hero__copy { gap: .7rem; }
  .hero__title { font-size: clamp(2.35rem, 1.6rem + 3.6vw, 3rem); }
  .hero__line { font-size: 1rem; }
  .hero__note, .hero__cue { display: none; }
  .hero__ctas { flex-wrap: nowrap; }
  .hero__ctas .site-cta { min-height: 48px; padding-inline: 1rem; font-size: .9375rem; white-space: nowrap; }
  .reel { --deck-w: min(68vw, 17.5rem, calc((100svh - 30rem) * .8)); margin-right: 1.6rem; }
  .reel-card { --sp: .62; }
  .reel__stage:hover .reel-card { --sp: .62; }
  .reel-card__cap { left: 8px; right: 8px; bottom: 8px; padding: .7rem .8rem .8rem; }
  .reel-card__q { font-size: 1.15rem; }
  .reel-card__hi { font-size: .75rem; }
  .reel__meta { font-size: .75rem; }
  .reel__note { display: none; }
}

/* ---------- PORTRAIT — Dr. D. K. Sharma ---------- */
.portrait { position: relative; overflow: hidden; color: var(--ivory); background: var(--forest-950); }
.portrait__bg { position: absolute; inset: 0; background:
  radial-gradient(55% 60% at 25% 45%, rgb(217 193 144 / .16), transparent 70%),
  radial-gradient(50% 55% at 90% 15%, rgb(111 38 49 / .45), transparent 70%),
  radial-gradient(60% 50% at 70% 100%, rgb(31 90 64 / .45), transparent 70%),
  linear-gradient(160deg, #0F3022, #0A2419 60%, #2A1016); }
.portrait__bg::after { content: ""; position: absolute; inset: 0; opacity: .5; background: repeating-radial-gradient(circle at 30% 45%, transparent 0 22px, rgb(217 193 144 / .05) 23px 24px); }
.portrait__year { position: absolute; right: -1vw; bottom: -4vh; font-family: var(--font-display); font-size: clamp(8rem, 26vw, 26rem); font-weight: 700; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgb(217 193 144 / .26); user-select: none; pointer-events: none; }
.portrait__inner { position: relative; z-index: 2; display: grid; gap: 2rem; align-items: center; width: min(1240px, 100%); min-height: 100svh; margin: 0 auto; padding: 6.5rem clamp(1.25rem, 4vw, 3.5rem) 3rem; }
@media (min-width: 990px) { .portrait__inner { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); } }
.portrait__visual { position: relative; justify-self: center; width: var(--panel-w); --panel-w: min(36rem, 43vw, calc((100svh - 7.5rem) * .8)); }
.portrait__photo { position: relative; z-index: 2; margin: 0; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: var(--forest-900); box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), 0 0 0 1px rgb(217 193 144 / .35); will-change: transform; }
.portrait__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.portrait__photo figcaption { position: absolute; left: .9rem; bottom: .9rem; padding: .3rem .75rem; border-radius: 999px; background: rgb(10 36 25 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .75rem; font-weight: 600; color: var(--ivory); }
.portrait__photo::after { content: ""; position: absolute; inset: 10px; border-radius: 18px; border: 1px solid rgb(251 248 241 / .28); pointer-events: none; }
.portrait__print { position: absolute; z-index: 3; margin: 0; padding: 7px 7px 0; background: var(--ivory); color: var(--ink-soft); border-radius: 6px; box-shadow: 0 30px 50px -20px rgb(0 0 0 / .75); }
.portrait__print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: sepia(.18); border-radius: 2px; }
.portrait__print figcaption { padding: .4rem .1rem .5rem; font-size: .6875rem; font-weight: 600; line-height: 1.25; }
.portrait__print--a { right: -13%; top: -5%; width: 30%; transform: rotate(6deg); }
.portrait__print--b { left: -18%; bottom: 8%; width: 32%; transform: rotate(-7deg); }
.portrait__print--b img { aspect-ratio: 5 / 4; }
.portrait__copy { position: relative; display: grid; gap: .9rem; justify-items: start; max-width: 34rem; }
.portrait__eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); }
.portrait__name { font-family: var(--font-display); font-size: clamp(3rem, 1.6rem + 4.6vw, 6.2rem); font-weight: 700; line-height: .88; letter-spacing: -.025em; }
.portrait__role { text-wrap: balance; font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); color: var(--rose); line-height: 1.1; }
.portrait__text { max-width: 31rem; color: rgb(251 248 241 / .86); font-size: 1.125rem; }
.portrait__ctas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.portrait__quote { max-width: 30rem; margin-top: .4rem; padding-left: 1rem; border-left: 1px solid rgb(217 193 144 / .5); font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.25; color: rgb(251 248 241 / .9); }
.portrait__quote cite { display: block; margin-top: .35rem; font-family: var(--font-body); font-style: normal; font-size: .8125rem; color: var(--gold-soft); }
@media (max-width: 989px) {
  .portrait__inner { justify-items: center; text-align: center; gap: 1.5rem; }
  .portrait__copy { justify-items: center; }
  .portrait__ctas { justify-content: center; }
  .portrait__visual { --panel-w: min(27rem, 70vw, calc((100svh - 22rem) * .8)); }
  .portrait__quote { display: none; }
}
@media (max-width: 749px) {
  .portrait__inner { padding-top: 5rem; padding-bottom: 1.5rem; gap: .9rem; align-content: start; }
  .portrait__visual { --panel-w: min(21rem, 76vw, calc((100svh - 24rem) * .8)); }
  .portrait__copy { gap: .55rem; }
  .portrait__name { font-size: 2.4rem; }
  .portrait__eyebrow { font-size: .6875rem; }
  .portrait__ctas .site-cta { min-height: 46px; padding-inline: 1rem; font-size: .9375rem; }
  .portrait__ctas { flex-wrap: nowrap; }
  .portrait__role { font-size: 1.25rem; }
  .portrait__text { font-size: .9375rem; }
  .portrait__print--a { right: -9%; top: -4%; width: 30%; }
  .portrait__print--b { left: -9%; bottom: 6%; width: 30%; }
  .portrait__photo figcaption { display: none; }
}

/* ---------- cinematic mode: one pinned stage ---------- */
.act.is-cinematic .act__stage { height: 100svh; overflow: hidden; }
.act.is-cinematic .hero { position: absolute; inset: 0; }
.act.is-cinematic .hero__frame { height: 100%; min-height: 0; }
.act.is-cinematic .portrait { position: absolute; inset: 0; background: transparent; pointer-events: none; }
.act.is-cinematic.is-portrait .portrait { pointer-events: auto; }
.act.is-cinematic .portrait__inner { height: 100%; min-height: 0; }
.act.is-cinematic .portrait__photo { transform-origin: 0 0; }

/* ---------- FACTS RIBBON ---------- */
.facts { position: relative; z-index: 1; margin-top: 0; padding: clamp(1.75rem, 3vw, 2.5rem) 0 0; background: var(--paper); }
.facts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
@media (min-width: 990px) { .facts__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .875rem; } }
.facts__list li { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 20px; background: linear-gradient(155deg, #fff, var(--ivory)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -18px rgb(15 48 34 / .4); color: var(--ink-soft); font-size: .9375rem; line-height: 1.35; }
.facts__list strong { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--forest-800); }
.facts__list li:last-child { grid-column: 1 / -1; }
.facts__list li:last-child strong { font-family: var(--font-body); font-size: 1.5rem; color: var(--maroon); }
@media (min-width: 990px) { .facts__list li:last-child { grid-column: auto; } }

@media (prefers-reduced-motion: reduce) {
  .hero__cue i::after, .hero__type-live::after { animation: none; }
  .reel-card, .reel-card img, .reel__tilt { transition: none; }
  .reel-card.is-out { animation: none; }
}

/* ---------- slow-network care: blur-up placeholders under the photos ---------- */
.reel-card, .portrait__photo { background-size: cover; background-repeat: no-repeat; }
.portrait__photo { background-position: 50% 26%; }
.reel-card img, .portrait__photo img { transition: transform 4.5s linear, opacity .7s ease; }
.portrait__photo img { transition: opacity .7s ease; }
.reel-card img.is-loading, .portrait__photo img.is-loading { opacity: 0; }
/* off-screen sections pause their CSS loops (caret, cue, rings, pulses) */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* phones: the "Ask privately about …" link shares a row with the pause button (it already names the area) */
@media (max-width: 749px) {
  .reel__hud { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bars bars" "ask meta"; align-items: center; column-gap: .5rem; }
  .reel__bars { grid-area: bars; }
  .reel__meta { grid-area: meta; }
  .reel__ask { grid-area: ask; }
  .reel__count, .reel__chapter { display: none; }
  .reel__ask [data-reel-ask-label] { display: none; }
}
.reel__ask-short { display: none; }
@media (max-width: 749px) { .reel__ask .reel__ask-short { display: block; } .reel__ask { font-size: .875rem; justify-content: center; } }
@media (max-width: 749px) and (max-height: 700px) {
  .hero__grid { gap: .8rem; padding-top: 4.9rem; }
  .hero__eyebrow { display: none; }            /* the header logo already says BharatClinic Ayurveda · 1965 */
  .hero__callback { min-height: 36px; }
  .reel { --deck-w: min(68vw, 17.5rem, calc((100svh - 26.5rem) * .8)); }
}

/* the caption and its rising words get their own layers, so the words animating in never re-paint the photo */
.reel-card__cap { will-change: transform; transform: translateZ(0); }
.reel-card[data-pos="0"] .reel-card__q .w > span { will-change: transform; }
/* the progress bars (updated every frame) and the typed word + caret live on their own small layers,
   so they never make the page's main layer repaint */
.reel__bars li i { will-change: transform; }
.hero__type { will-change: transform; contain: layout paint; }
.reel__hud { contain: layout paint; }
.hero__line { will-change: transform; }   /* the line holding the typed word repaints alone, not the page layer */