#habibah-film {
  --hf-height: 100svh;
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  color: #fff8ed;
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
#habibah-film[hidden], #habibah-film-replay[hidden] { display: none !important; }
#habibah-film::-webkit-scrollbar { display: none; }
#habibah-film:focus { outline: none; }
#habibah-film .hf-track { height: calc(var(--hf-height) * 4.4); position: relative; }
#habibah-film .hf-stage { position: sticky; top: 0; height: var(--hf-height); overflow: hidden; background: #142b38; }
#habibah-film .hf-media, #habibah-film .hf-shade { position: absolute; inset: 0; }
#habibah-film .hf-video, #habibah-film .hf-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%;
}
#habibah-film .hf-video { opacity: 0; }
#habibah-film[data-video-painted='true']:not([data-reduced='true']) .hf-video { opacity: 1; }
#habibah-film .hf-shade {
  background: linear-gradient(90deg, #06192bc4 0%, #06192b55 36%, transparent 66%),
    linear-gradient(0deg, #06192b8c, transparent 24%, transparent 78%, #06192b3d);
  pointer-events: none;
}
#habibah-film .hf-header, #habibah-film .hf-footer {
  position: absolute; inset-inline: clamp(25px, 6.5vw, 125px); display: flex; justify-content: space-between; align-items: center;
}
#habibah-film .hf-header { top: max(30px, env(safe-area-inset-top)); direction: ltr; }
#habibah-film .hf-brand { display: block; width: clamp(110px, 12vw, 160px); }
#habibah-film .hf-brand img { width: 100%; height: auto; display: block; }
#habibah-film .hf-year { font-size: 10px; letter-spacing: .14em; }
#habibah-film .hf-copy { position: absolute; inset: 29% auto 20% 7%; width: min(43vw, 680px); }
#habibah-film .hf-beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
#habibah-film .hf-beat:not(:first-child) { opacity: 0; visibility: hidden; }
#habibah-film .hf-eyebrow { font-size: 10px; letter-spacing: .17em; margin: 0 0 24px; }
#habibah-film .hf-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(38px, 5.2vw, 86px); line-height: 1.04; letter-spacing: -.055em; margin: 0; }
#habibah-film .hf-title span { display: block; }
#habibah-film .hf-body { font-size: 11px; line-height: 1.8; margin: 30px 0 0; }
#habibah-film .hf-footer { bottom: max(42px, env(safe-area-inset-bottom)); direction: ltr; font-size: 10px; }
#habibah-film .hf-scroll { display: flex; align-items: center; gap: 14px; }
#habibah-film .hf-arrow { font-size: 24px; }
#habibah-film .hf-continue {
  border: 0; border-bottom: 1px solid #fff8ed80; padding: 12px 0; background: none; color: inherit; font: inherit;
  display: flex; align-items: center; gap: 24px; cursor: pointer;
}
#habibah-film button:focus-visible, #habibah-film a:focus-visible { outline: 1px solid currentColor; outline-offset: 7px; }
#habibah-film .hf-progress { position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: #ffffff25; }
#habibah-film .hf-progress span { display: block; height: 100%; background: #f3c28d; transform: scaleX(0); transform-origin: left; }
#habibah-film[dir='rtl'] .hf-copy { text-align: right; }
#habibah-film[dir='rtl'] .hf-title { font-family: 'Habibah Naskh', serif; font-size: clamp(49px, 6.2vw, 101px); letter-spacing: 0; line-height: 1.3; }
#habibah-film[dir='rtl'] .hf-eyebrow, #habibah-film[dir='rtl'] .hf-body { font-family: 'Habibah Naskh', serif; letter-spacing: 0; font-size: 20px; }
#habibah-film[dir='rtl'] .hf-eyebrow { margin-bottom: 16px; }
#habibah-film[dir='rtl'] .hf-body { margin-top: 15px; }
#habibah-film[dir='rtl'] .hf-year, #habibah-film[dir='rtl'] .hf-footer { font-family: 'Habibah Naskh', serif; font-size: 17px; letter-spacing: 0; }
#habibah-film-replay {
  position: fixed; z-index: 100; left: clamp(25px, 6.5vw, 125px); bottom: clamp(65px, 14vh, 140px);
  color: #0b2a4a; background: #f4ead9d9; border: 1px solid #0b2a4a40; padding: 8px 12px;
  font: 10px 'IBM Plex Mono', monospace; cursor: pointer; border-radius: 2px;
}
html[lang='ar'] #habibah-film-replay { font: 15px 'Habibah Naskh', serif; }
body.habibah-film-active #habibah-controls { color: #fff8ed; text-shadow: 0 1px 6px #06192b; bottom: max(88px, 13vh); }
@media (max-width: 700px) {
  #habibah-film .hf-stage { background: #102e43; }
  #habibah-film .hf-media { inset: 35% 0 23%; display: grid; place-items: center; }
  /* Keep this supplied landscape film intact on phones; no false portrait crop. */
  #habibah-film .hf-video, #habibah-film .hf-poster { object-fit: contain; object-position: center; }
  #habibah-film .hf-shade { background: linear-gradient(180deg, #0a24386b, transparent 37%, transparent 68%, #0a24386b); }
  #habibah-film .hf-header { top: max(24px, env(safe-area-inset-top)); }
  #habibah-film .hf-brand { width: 104px; }
  #habibah-film .hf-year { font-size: 9px; }
  #habibah-film .hf-copy { inset: 16% 25px auto; height: 21%; width: auto; }
  #habibah-film .hf-beat { justify-content: start; }
  #habibah-film .hf-eyebrow { font-size: 8px; margin: 0 0 12px; }
  #habibah-film .hf-title { font-size: clamp(34px, 8.5vw, 54px); }
  #habibah-film .hf-body { font-size: 9px; margin: 16px 0 0; }
  #habibah-film[dir='rtl'] .hf-title { font-size: 47px; line-height: 1.13; }
  #habibah-film[dir='rtl'] .hf-eyebrow { font-size: 16px; margin-bottom: 7px; }
  #habibah-film[dir='rtl'] .hf-body { font-size: 17px; margin-top: 8px; }
  #habibah-film .hf-footer { bottom: max(43px, env(safe-area-inset-bottom)); gap: 20px; font-size: 8px; }
  #habibah-film .hf-scroll { max-width: 48%; gap: 7px; }
  #habibah-film .hf-continue { gap: 10px; }
  #habibah-film[dir='rtl'] .hf-footer { font-size: 15px; }
  body.habibah-film-active #habibah-controls { bottom: 110px; }
  #habibah-film-replay { bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  #habibah-film .hf-video { display: none; }
}