/* ASAS 360° / V9 — Editorial Typography System
   A purposeful hierarchy: original brand lettering for large English display,
   Manrope for English reading and UI, Changa for Arabic display,
   IBM Plex Sans Arabic for Arabic reading and UI.
   Important: approved ASAS logo image remains untouched.
*/
:root {
  --asas-display: 'Saved By Zero', 'SavedByZero', 'Exo 2', sans-serif;
  --asas-reading: 'Manrope', Arial, sans-serif;
  --asas-display-ar: 'Changa', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --asas-reading-ar: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --font-ui: var(--asas-reading);
  --font-en: var(--asas-reading);
  --font-ar: var(--asas-reading-ar);
}

/* 1. Main titles ONLY are set in original wordmark typeface. */
html[lang="en"] :is(h1, h2, .cinema-copy h1, .portal-top h2, .editorial-copy h2, .why-lead h2, .detail-title h1, .intro-center p) {
  font-family: var(--asas-display) !important;
  font-weight: 400 !important;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: .005em !important;
  text-wrap: balance;
}
html[lang="en"] :is(h1, h2, .cinema-copy h1, .portal-top h2, .editorial-copy h2, .why-lead h2) {
  line-height: 1.23 !important;
}
html[lang="en"] .cinema-copy h1 { font-size: clamp(36px, 4.75vw, 77px) !important; }

/* 2. All ordinary English text uses Manrope, including subsections, navigation,
   captions, buttons, form fields, body text and detailed service descriptions. */
html[lang="en"] body, html[lang="en"] :is(button,input,select,textarea) {
  font-family: var(--asas-reading) !important;
}
html[lang="en"] :is(h3,h4,h5,h6,p,li,dt,dd,small,figcaption,blockquote,label,legend,
  .eyebrow,.cinema-eyebrow,.desktop-nav a,.mobile-nav a,.header-cta,.button,
  .cinema-actions a,.cinema-scroll,.film-scene,.portal-grid>a strong,
  .portal-grid>a span,.footer-title,.footer a,.footer p,.footer small,
  .service-card-bottom h3,.service-card-meta,.back-link,.lang-switch,
  .intro-skip,.graphic-caption,.detail-visual-caption,.why-tile h3,
  .emblem-meta,.cinema-side,.editorial-actions a,.stat span,
  .form-fields label,.form-fields input,.form-fields textarea,.form-fields select) {
  font-family: var(--asas-reading) !important;
  font-synthesis: auto;
}
html[lang="en"] :is(h3,h4,h5,h6,.portal-grid>a strong,.why-tile h3,.footer-title,.desktop-nav a,.mobile-nav a,.header-cta,.cinema-actions a,.button,.service-card-bottom h3) {
  font-weight: 650 !important;
  letter-spacing: -.018em !important;
}
html[lang="en"] :is(.desktop-nav a,.mobile-nav a) {
  font-size: 12px;
  letter-spacing: .01em !important;
}
html[lang="en"] :is(.button,.header-cta,.cinema-actions a) {
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .018em !important;
}
html[lang="en"] :is(.portal-grid>a strong,.why-tile h3) { line-height: 1.45; }
html[lang="en"] :is(p,li,dd) { line-height: 1.82; }
html[lang="en"] .cinema-slide-copy p {font-size: clamp(15px, 1.15vw, 17px);line-height:1.85;}

/* 3. Arabic display maintains geometric character; reading text stays light,
   clean and properly shaped. */
html[lang="ar"] body, html[lang="ar"] :is(button,input,select,textarea) {
  font-family: var(--asas-reading-ar) !important;
}
html[lang="ar"] :is(h1,h2,.cinema-copy h1,.portal-top h2,.editorial-copy h2,.why-lead h2,.detail-title h1,.intro-center p) {
  font-family: var(--asas-display-ar) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
}
html[lang="ar"] :is(h3,h4,h5,h6,p,li,dt,dd,small,figcaption,blockquote,label,legend,
  .eyebrow,.cinema-eyebrow,.desktop-nav a,.mobile-nav a,.header-cta,.button,
  .cinema-actions a,.cinema-scroll,.film-scene,.portal-grid>a strong,
  .portal-grid>a span,.footer-title,.footer a,.footer p,.footer small,
  .service-card-bottom h3,.service-card-meta,.back-link,.lang-switch,
  .intro-skip,.graphic-caption,.detail-visual-caption,.why-tile h3,
  .emblem-meta,.cinema-side,.editorial-actions a,.stat span,
  .form-fields label,.form-fields input,.form-fields textarea,.form-fields select) {
  font-family: var(--asas-reading-ar) !important;
  letter-spacing: 0 !important;
}
html[lang="ar"] :is(h3,h4,h5,h6,.portal-grid>a strong,.why-tile h3,.footer-title,.desktop-nav a,.mobile-nav a,.header-cta,.cinema-actions a,.button,.service-card-bottom h3) {
  font-weight: 600 !important;
}
html[lang="ar"] :is(p,li,dd) { line-height: 2; }
html[lang="ar"] :is(.desktop-nav a,.mobile-nav a) {font-size: 14px;}
html[lang="ar"] :is(.cinema-actions a,.button,.header-cta) {font-size: 14px;}
html[lang="ar"] :is(.portal-grid>a strong,.why-tile h3) {line-height:1.7;}

/* Keep details/eyebrows visibly different from hero display; improve readability. */
:is(.eyebrow,.cinema-eyebrow,.film-scene,.portal-grid>a span,.footer-title) {
  font-weight: 700;
}
html[lang="en"] .cinema-eyebrow {letter-spacing:.115em !important;}

@media (max-width: 1240px) {
  html[lang="en"] .mobile-nav a {font-size: 15px;}
  html[lang="ar"] .mobile-nav a {font-size: 16px;}
}
@media (max-width: 760px) {
  html[lang="en"] .cinema-copy h1 {
    font-size: clamp(31px, 7.6vw, 47px) !important;
    line-height: 1.3 !important;
  }
  html[lang="en"] :is(.cinema-actions a,.button) {font-size:12px;}
  html[lang="en"] .cinema-slide-copy p {font-size: 14px;}
  html[lang="ar"] .cinema-copy h1 {line-height:1.5 !important;}
}
@media (max-width: 390px) {
  html[lang="en"] .cinema-copy h1 {font-size: clamp(29px, 7.6vw, 33px) !important;}
}