/* home-cinema.css - cinematic homepage hero (owner 2026-10-29).
   Owner rulings: "موافق نفذ"; "بدياه التصميم تماما متل" the prototype at :8097; the four
   feature pills stay pill buttons as in the prototype; the latest-news band goes AFTER the
   hero, not under the menu; the rates band stays under the header; the operations board
   moves to its own band below the hero.

   Only the seven homepages carry body.mt-cinema and .hero--cinema. The approved text of every
   homepage is untouched; this file changes layout and colour only.

   States, set by home-cinema.js (never by markup, so a failed script degrades to the site's
   normal white header - never white text on a white section):
     body.mt-cinema-dark   the prototype header: white type, white logo, solid navy
     body.mt-cinema-top    ...and transparent while the page sits at its top

   Specificity: the site's "meridian" skin styles the hero and the header with selectors up
   to (0,6,1). Rules that must win are prefixed to outrank it; each such prefix says so. */

body.mt-cinema{--mt-top:125px}

/* ======================================================================= hero */
/* the hero is pulled up underneath the header and the rates band (--mt-top, measured) */
.public-site .hero.hero--cinema{position:relative;isolation:isolate;overflow:clip;
  margin-top:calc(-1 * var(--mt-top));min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:var(--mt-top) 1fr auto;padding:0;background:#061b36}
.public-site .hero.hero--cinema::before,
.public-site .hero.hero--cinema::after{display:none}

/* Both photo layers are the SAME frame in the SAME box, so they align pixel for pixel. The
   foreground copy carries an alpha ramp at the waterline; home-cinema.js sizes the box so the
   waterline lands 46px above the headline's baseline whatever the language. */
.hero--cinema .cinema__layer{position:absolute;inset-inline:0;top:var(--cine-top,0px);
  height:var(--cine-h,100%);pointer-events:none;will-change:transform}
.hero--cinema .cinema__layer img{display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%}
.hero--cinema .cinema__layer--bg{z-index:0}
.hero--cinema .cinema__layer--fg{z-index:3}

/* the prototype's legibility wash */
.hero--cinema .cinema__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(6,27,54,.92) 0%,rgba(6,27,54,.55) 34%,rgba(6,27,54,0) 68%),
    linear-gradient(to right,rgba(6,27,54,.80) 0%,rgba(6,27,54,.30) 42%,rgba(6,27,54,0) 72%)}
html[dir=rtl] .hero--cinema .cinema__grade{
  background:
    linear-gradient(to top,rgba(6,27,54,.92) 0%,rgba(6,27,54,.55) 34%,rgba(6,27,54,0) 68%),
    linear-gradient(to left,rgba(6,27,54,.80) 0%,rgba(6,27,54,.30) 42%,rgba(6,27,54,0) 72%)}

.hero--cinema .cinema__top{grid-row:1}

/* As a grid item the live .hero__grid shrank to 590px and centred itself, and kept a
   min-height from the two-column layout: pinned back to the header's 1180px container so the
   copy starts under the logo; the live side paddings (room for the floating buttons) stay. */
.public-site .hero.hero--cinema > .hero__grid{grid-row:2;position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;
  width:100%;max-width:1180px;margin-inline:auto;min-height:0;box-sizing:border-box;
  padding-top:clamp(8px,2.2vh,24px);padding-bottom:clamp(20px,4vh,44px)}

/* Visual order by grid areas, NOT by moving the DOM: the h1 stays second in the markup
   (reading order, SEO) and sits last on screen, where the waterline takes its base. The live
   column was a flex box with justify-content:center; as a grid that centred the TRACK and
   pushed every line 109px off the logo - one full-width track, aligned to the start. */
.public-site .hero.hero--cinema .hero__copy{display:grid;max-width:62ch;min-height:100%;
  grid-template-areas:"eyebrow" "lede" "pills" "actions" "reply" "title";
  grid-template-rows:auto auto auto auto auto 1fr;
  grid-template-columns:minmax(0,1fr);justify-content:start;justify-items:stretch;align-content:stretch;
  will-change:transform,opacity}
.hero--cinema .hero__copy > .eyebrow{grid-area:eyebrow}
.hero--cinema .hero__copy > h1{grid-area:title;align-self:end}
.hero--cinema .hero__copy > .lede{grid-area:lede}
.hero--cinema .hero__copy > .hero-feature-pills{grid-area:pills}
.hero--cinema .hero__copy > .hero__actions{grid-area:actions}
.hero--cinema .hero__copy > .mt-home-reply{grid-area:reply}
.hero--cinema .hero__copy > style{display:none}

/* ---------------------------------------- the copy, at the prototype's exact values */
/* prefix :root .template-home.public-site .hero.hero--cinema.hero--home is (0,6,0): it
   outranks the meridian skin's hero rules (up to (0,5,1)) */
:root .template-home.public-site .hero.hero--cinema.hero--home .eyebrow{display:flex;align-items:center;gap:12px;
  margin:0 0 16px;padding:0;border-radius:0;font-size:.75rem;line-height:normal;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#7cc9f5}
:root .template-home.public-site .hero.hero--cinema.hero--home .eyebrow::before{content:"";position:static;
  display:block;flex:none;width:40px;height:2px;margin:0;border:0;border-radius:0;background:#7cc9f5;transform:none}
:root[dir=rtl] .template-home.public-site .hero.hero--cinema.hero--home .eyebrow{letter-spacing:0;text-transform:none;font-size:.82rem}

:root .template-home.public-site .hero.hero--cinema.hero--home .lede{margin:0;max-width:48ch;
  font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.55;color:rgba(255,255,255,.9);
  text-shadow:0 1px 18px rgba(6,27,54,.55)}
:root .template-home.public-site .hero.hero--cinema.hero--home .lede .brand-name{color:inherit;font-weight:inherit}

/* the four feature pills: glass pill buttons, as in the prototype (owner: "على حالها متل التصميم") */
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills{display:flex;flex-wrap:wrap;
  gap:9px;margin:18px 0 0;padding:0;list-style:none}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills > *{display:inline-block;
  margin:0;padding:8px 15px;border-radius:999px;font-size:.84rem;font-weight:600;line-height:normal;
  color:#eaf4fb;text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills > *::before,
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills > *::after{content:none}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills > a:hover,
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills > a:focus-visible{
  background:rgba(124,201,245,.22);border-color:#7cc9f5;transform:translateY(-2px)}

:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions{display:flex;flex-wrap:wrap;
  gap:12px;margin:22px 0 0}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button{display:inline-flex;
  align-items:center;justify-content:center;gap:9px;padding:15px 26px;min-height:0;border-radius:8px;
  font-size:.96rem;font-weight:700;line-height:1.2;text-decoration:none;border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--primary{
  background:#0074B7;border-color:#0074B7;color:#fff;box-shadow:0 14px 34px rgba(0,116,183,.42)}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--primary:hover,
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--primary:focus-visible{
  background:#006ba9;transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,116,183,.52)}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--secondary{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--secondary:hover,
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--secondary:focus-visible{
  background:rgba(255,255,255,.17);transform:translateY(-2px)}
/* the prototype's magnifier on "Track Shipment", drawn as a CSS mask so the page markup and
   its text stay exactly as approved (img-src allows data:) */
:root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--secondary::before{
  content:"";display:block;flex:none;width:17px;height:17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
:root[dir=rtl] .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button--secondary::before{transform:scaleX(-1)}

:root .template-home.public-site .hero.hero--cinema.hero--home .mt-home-reply{display:flex;align-items:flex-start;
  gap:9px;margin:18px 0 0;font-size:.86rem;line-height:normal;font-weight:600;color:rgba(255,255,255,.76);opacity:1}
:root .template-home.public-site .hero.hero--cinema.hero--home .mt-home-reply svg{width:16px;height:16px;margin-top:2px;flex:none}

/* the statement line - one h1, the full approved sentence; weight and scale do the work.
   font-size 2rem on the h1 itself so 21ch measures what it measured in the prototype. */
:root .template-home.public-site .hero.hero--cinema.hero--home h1{margin:clamp(16px,2.6vh,34px) 0 0;
  max-width:21ch;font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:.94;color:#fff;
  text-wrap:balance;text-shadow:0 2px 34px rgba(6,27,54,.5)}
:root .template-home.public-site .hero.hero--cinema.hero--home h1 .cinema__t1{display:block;
  font-size:clamp(2.3rem,min(5.4vw,7vh),4.7rem)}
:root .template-home.public-site .hero.hero--cinema.hero--home h1 .cinema__t2{display:block;margin-top:.16em;
  font-size:clamp(1.25rem,min(2.5vw,3.3vh),2.1rem);font-weight:600;color:rgba(255,255,255,.86);
  letter-spacing:-.015em;line-height:1.1}
/* Arabic: no tracking - negative letter-spacing breaks the joins between Arabic letters */
:root[dir=rtl] .template-home.public-site .hero.hero--cinema.hero--home h1{letter-spacing:0;line-height:1.14;max-width:19ch}
:root[dir=rtl] .template-home.public-site .hero.hero--cinema.hero--home h1 .cinema__t2{letter-spacing:0;line-height:1.4}

/* the stat cards: one glass bar across the bottom, above the foreground layer; the inline-end
   padding keeps it clear of the floating action buttons */
.hero--cinema .cinema__stats{grid-row:3;position:relative;z-index:4;padding:0 0 26px}
.public-site .hero.hero--cinema .cinema__stats .container{padding-inline-end:24px}
@media (max-width:1299px){.public-site .hero.hero--cinema .cinema__stats .container{padding-inline-end:84px}}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-strip{margin:0;width:100%;max-width:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:0;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);border-radius:8px;overflow:hidden;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* on phones the live card is a two-column grid: inside this bar that left its text a 24px
   column, words broke one per line and the ends were clipped - it stacks everywhere here */
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-card{margin:0;border:0;border-radius:0;
  box-shadow:none;background:rgba(6,27,54,.56);padding:16px 18px;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-card strong{font-size:1.02rem;
  line-height:1.25;font-weight:800;letter-spacing:-.01em;color:#fff}
:root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-card span{font-size:.78rem;
  line-height:1.35;color:rgba(255,255,255,.72)}

/* =========================================== latest-news band, directly below the hero */
/* moved out of the header area (owner); a solid navy band between two navy sections */
body.mt-cinema [data-news-headlines]{position:relative;z-index:5}
body.mt-cinema-dark [data-news-headlines]{background:#0a2440;border-bottom-color:rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.08);box-shadow:none}

/* =========================================== the operations board, one band below */
/* the band carries .hero--home so the board keeps its own styling; .hero--home alone would
   give it the old hero's tall block padding, reset here */
.public-site .hero-board-band.hero--home{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(36px,6vh,64px);min-height:0}
.public-site .hero-board-band > .container{padding-inline-end:96px}
.public-site .hero-board-band .hero-visual-stack{max-width:none}
/* the meridian skin sets min-height:504px for the old 500px column with (0,6,0); at full width
   it only stretched the card rows - (0,7,0), spacing only */
:root .public-site .hero-board-band.hero--home.hero--home-pattern .hero-visual .hero-operations-board{min-height:0}

/* ===================================== header + rates band, the prototype's header look */
body.mt-cinema .site-header,
body.mt-cinema [data-news-strip],
body.mt-cinema [data-news-headlines]{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}

:root body.mt-cinema-dark .site-header{background:rgba(6,27,54,.94);border-bottom-color:transparent;
  box-shadow:0 10px 30px rgba(3,14,30,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root body.mt-cinema-dark.mt-cinema-top .site-header{background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
/* a soft shade under the transparent header keeps white type legible over a bright sky */
:root body.mt-cinema-dark .site-header::before{content:"";position:absolute;inset:0 0 -34px 0;
  pointer-events:none;z-index:-1;background:linear-gradient(to bottom,rgba(6,27,54,.6),rgba(6,27,54,0));
  opacity:0;transition:opacity .3s ease}
:root body.mt-cinema-dark.mt-cinema-top .site-header::before{opacity:1}

:root body.mt-cinema-dark .site-header .brand__logo{filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(6,27,54,.45))}
:root body.mt-cinema-dark .site-header .brand__text strong{color:#fff}
:root body.mt-cinema-dark .site-header .brand__text small{color:rgba(255,255,255,.66)}
:root body.mt-cinema-dark .site-header .main-nav .nav-trigger{color:#fff;border-color:transparent;background:transparent}
:root body.mt-cinema-dark .site-header .main-nav .nav-trigger:hover,
:root body.mt-cinema-dark .site-header .main-nav .nav-trigger:focus-visible,
:root body.mt-cinema-dark .site-header .main-nav .nav-trigger[aria-expanded=true]{background:rgba(255,255,255,.13);color:#fff}
:root body.mt-cinema-dark .site-header .language-switcher-dropdown > summary{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:6px}
:root body.mt-cinema-dark .site-header .mobile-menu > summary{background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.32);border-radius:8px}
/* Track / Contact / Login: plain white links in the prototype, not bordered buttons */
:root body.mt-cinema-dark .site-header .header-actions .button--ghost{background:transparent;color:#fff;
  border-color:transparent;box-shadow:none}
:root body.mt-cinema-dark .site-header .header-actions .button--ghost:hover,
:root body.mt-cinema-dark .site-header .header-actions .button--ghost:focus-visible{background:rgba(255,255,255,.13)}
:root body.mt-cinema-dark .site-header .header-actions .button--primary{background:#0074B7;border-color:#0074B7;
  color:#fff;box-shadow:0 8px 22px rgba(0,116,183,.4)}
:root body.mt-cinema-dark .site-header .header-actions .button--primary:hover{background:#006ba9}

/* the rates band: glass over the photograph at the top, solid navy once scrolled */
:root body.mt-cinema-dark [data-news-strip]{background:rgba(6,27,54,.94);border-bottom-color:rgba(255,255,255,.1);box-shadow:none}
:root body.mt-cinema-dark.mt-cinema-top [data-news-strip]{background:rgba(6,27,54,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.mt-cinema-dark .mt-ticker,
body.mt-cinema-dark .mt-news{color:#fff}
body.mt-cinema-dark .mt-ticker__label,
body.mt-cinema-dark .mt-news__label{color:rgba(255,255,255,.72);background:transparent;border-color:rgba(255,255,255,.14)}
body.mt-cinema-dark .mt-ticker__label-main,
body.mt-cinema-dark .mt-news__label-main{color:#fff}
body.mt-cinema-dark .mt-ticker__label-date::before,
body.mt-cinema-dark .mt-news__label-date::before{color:rgba(255,255,255,.5)}
body.mt-cinema-dark .mt-ticker__viewport::before,
body.mt-cinema-dark .mt-news__viewport::before{background:linear-gradient(90deg,rgba(6,27,54,.55),rgba(6,27,54,0))}
body.mt-cinema-dark .mt-ticker__viewport::after,
body.mt-cinema-dark .mt-news__viewport::after{background:linear-gradient(270deg,rgba(6,27,54,.55),rgba(6,27,54,0))}
body.mt-cinema-dark .mt-ticker__item::before,
body.mt-cinema-dark .mt-news__item::before{background:rgba(255,255,255,.2)}
body.mt-cinema-dark .mt-ticker__price{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
body.mt-cinema-dark .mt-ticker__size,
body.mt-cinema-dark .mt-ticker__ar{color:#7cc9f5}
body.mt-cinema-dark .mt-ticker__item:hover .mt-ticker__route,
body.mt-cinema-dark .mt-news__item:hover{color:#7cc9f5}
body.mt-cinema-dark .mt-news__dot{background:#7cc9f5}


/* ---- header metrics at the prototype's values. Prefix (0,5,1)+ outranks the meridian skin's
   header rules; applies only in the cinema-dark state, so other pages are untouched. ---- */
:root body.mt-cinema-dark.public-site.template-home .site-header .site-header__inner{min-height:78px;padding-block:0;align-items:center}
:root body.mt-cinema-dark.public-site.template-home .site-header .brand__logo{height:50px;width:auto}
:root body.mt-cinema-dark.public-site.template-home .site-header .brand__text strong{font-size:.95rem;font-weight:800;letter-spacing:.02em}
:root body.mt-cinema-dark.public-site.template-home .site-header .brand__text small{font-size:.6rem;font-weight:600;letter-spacing:.14em}
:root[dir=rtl] body.mt-cinema-dark.public-site.template-home .site-header .brand__text strong{letter-spacing:0;font-size:1rem}
:root[dir=rtl] body.mt-cinema-dark.public-site.template-home .site-header .brand__text small{letter-spacing:0;font-size:.76rem}
:root body.mt-cinema-dark.public-site.template-home .site-header .main-nav .nav-trigger{font-size:.92rem;font-weight:600;padding:9px 11px;border:0;border-radius:6px;min-height:0;line-height:normal}
:root body.mt-cinema-dark.public-site.template-home .site-header .header-actions .button--ghost{font-size:.88rem;font-weight:600;padding:9px 10px;border:0;border-radius:6px;min-height:0;line-height:normal}
:root body.mt-cinema-dark.public-site.template-home .site-header .header-actions .button--primary{font-size:.9rem;font-weight:700;padding:10px 18px;border:0;border-radius:8px;min-height:0;line-height:normal}
:root body.mt-cinema-dark.public-site.template-home .site-header .language-switcher-dropdown > summary{font-size:.84rem;font-weight:700;padding:8px 10px;border-radius:6px;min-height:0;line-height:normal}
@media (max-width:1200px){
  :root body.mt-cinema-dark.public-site.template-home .site-header .site-header__inner{min-height:68px}
  :root body.mt-cinema-dark.public-site.template-home .site-header .brand__logo{height:40px}
  :root body.mt-cinema-dark.public-site.template-home .site-header .mobile-menu > summary{font-size:.9rem;font-weight:700;padding:9px 14px;border-radius:8px;min-height:0;line-height:normal}
}


/* ---- the prototype's typeface. The site stack starts with "Helvetica Neue"; the prototype set
   Helvetica, and the difference showed as 1-3px on every label. Arabic keeps Cairo, as the
   prototype did (the site's "Meridian Cairo Arabic" is the same Cairo files). ---- */
:root .template-home.public-site .hero.hero--cinema.hero--home,
:root body.mt-cinema-dark.public-site.template-home .site-header{font-family:Helvetica,Arial,sans-serif}
:root[dir=rtl] .template-home.public-site .hero.hero--cinema.hero--home,
:root[dir=rtl] body.mt-cinema-dark.public-site.template-home .site-header{font-family:"Meridian Cairo Arabic",Cairo,Arial,sans-serif}
:root .template-home.public-site .hero.hero--cinema.hero--home *,
:root body.mt-cinema-dark.public-site.template-home .site-header > .site-header__inner *{font-family:inherit}


/* ---- phones and small tablets: the pills stay hidden, as the live site has them since the owner's
   2026-10-14 ruling (quote and track buttons in the first phone screen). This file's (0,6,0) pill
   rule had overridden the site's @media (max-width:900px) display:none; restored here. ---- */
@media (max-width:900px){
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero-feature-pills{display:none}
}

/* ======================================================================== phone */
@media (max-width:860px){
  .public-site .hero.hero--cinema{min-height:0}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero__copy{max-width:none}
  :root .template-home.public-site .hero.hero--cinema.hero--home h1{margin-top:clamp(28px,6vh,60px)}
  :root .template-home.public-site .hero.hero--cinema.hero--home h1 .cinema__t1{font-size:clamp(2.2rem,10.5vw,3.2rem)}
  :root .template-home.public-site .hero.hero--cinema.hero--home h1 .cinema__t2{font-size:clamp(1.12rem,5vw,1.5rem)}
  :root .template-home.public-site .hero.hero--cinema.hero--home .lede{font-size:1rem}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions{flex-direction:column;align-items:stretch}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero__actions .button{justify-content:center}
  .public-site .hero.hero--cinema .cinema__stats .container{padding-inline-end:inherit}
  .hero--cinema .cinema__stats{padding:26px 0 30px}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-card{padding:12px 13px}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-card strong{font-size:.9rem}
  :root .template-home.public-site .hero.hero--cinema.hero--home .hero-stat-card span{font-size:.72rem}
  .hero--cinema .cinema__grade,
  html[dir=rtl] .hero--cinema .cinema__grade{background:
    linear-gradient(to top,rgba(6,27,54,.88) 0%,rgba(6,27,54,.42) 38%,rgba(6,27,54,.06) 76%,rgba(6,27,54,.34) 100%)}
  .public-site .hero-board-band > .container{padding-inline-end:inherit}
}

@media (prefers-reduced-motion:reduce){
  .hero--cinema .cinema__layer,.public-site .hero.hero--cinema .hero__copy{will-change:auto}
}