/* =====================================================================
   Site-wide typography — ONE scale for every page, desktop and mobile.
   ---------------------------------------------------------------------
   Each page used to size its own text (14 cloned project stylesheets
   plus home/portfolio/news/careers/about/contact files), so the same
   role rendered at up to 22 different sizes, weights and greys. This
   file is loaded LAST on every page and maps each page's existing
   classes onto six roles:

     role            desktop   mobile   weight   colour
     hero title      40px      28px     500      (on photo — unchanged)
     section title   28px      24px     400      #2c2c2c
     card title      20px      18px     500      #2c2c2c
     eyebrow/label   16px      14px     600      #545454  uppercase, 2px
     body            15px      15px     400      #666     line-height 1.65
     small/caption   14px      13px     400      #666

   Selectors use the doubled-class form (.x.x) and !important on purpose:
   the per-page sheets, project-sections.css and inline style="" attributes
   all set these properties with high specificity, and this layer has to be
   the final word. Text that sits on a photo keeps its own colour.
   ===================================================================== */

/* ---------- Typeface ---------- */
/* Hero titles asked for "MyCustomFont" (ABC Oracle), whose file was never
   shipped, so they rendered in Helvetica on Mac and Arial on Windows. */
body .custom-text.custom-text,
body .vertical-btn.vertical-btn,
body .beyond-maps-link.beyond-maps-link,
body #beyond-floating-icons a,
body #beyond-bottom-bar a {
  font-family: "Inter", sans-serif !important;
}

/* ---------- Hero title (project pages) ---------- */
body .custom-text.custom-text {
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
}

/* ---------- Section label / eyebrow ---------- */
body .mural-subheading.mural-subheading,
body .section-tag.section-tag,
body .interior-exterior-heading.interior-exterior-heading,
body .amenities-main-title.amenities-main-title,
body .section-subtitle.section-subtitle,
body .mural-launch-text.mural-launch-text,
body .news-header.news-header,
body .story-subtitle.story-subtitle,
body .portfolio-section-title.portfolio-section-title,
body .hero-wallpaper-title.hero-wallpaper-title,
body .ap-eyebrow.ap-eyebrow,
body .ap-label.ap-label,
body .media-title.media-title,
body .values-header-text.values-header-text {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* one grey for labels on light backgrounds (the light variant sits on a photo) */
body .mural-subheading.mural-subheading,
body .section-tag.section-tag,
body .interior-exterior-heading.interior-exterior-heading,
body .amenities-main-title.amenities-main-title,
body .section-subtitle.section-subtitle,
body .mural-launch-text.mural-launch-text,
body .news-header.news-header,
body .story-subtitle.story-subtitle,
body .portfolio-section-title.portfolio-section-title,
body .hero-wallpaper-title.hero-wallpaper-title,
body .ap-eyebrow.ap-eyebrow,
body .ap-label.ap-label:not(.ap-label--light),
body .media-title.media-title,
body .values-header-text.values-header-text {
  color: #545454 !important;
}

/* ---------- Section / page title ---------- */
body .mural-main-heading.mural-main-heading,
body .main-title.main-title,
body .interior-exterior-description.interior-exterior-description,
body .amenities-hero-title.amenities-hero-title,
body .contact-title.contact-title,
body .beyond-main-heading.beyond-main-heading,
body .ap-heading.ap-heading,
body .story-title.story-title,
body .news-title.news-title,
body .title-word.title-word,
body h1.h3.h3,
body h1.h2.h2,
body h1.h2.h2 + h4.text-center,
body .hero-wallpaper-text.hero-wallpaper-text {
  font-family: "Inter", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #2c2c2c !important;
}

/* ---------- Card / sub-title ---------- */
body .amenities-carousel-title.amenities-carousel-title,
body .portfolio-project-name.portfolio-project-name,
body .our-portfolio-heading.our-portfolio-heading,
body .card-title.card-title,
body .media-article-title.media-article-title,
body .custom-feature-title.custom-feature-title,
body .section-heading.section-heading,
body .ap-pillar h3,
body .beyond-contact-title.beyond-contact-title,
body .beyond-section-title.beyond-section-title,
body .panel__title.panel__title {
  font-family: "Inter", sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.5px !important;
}

body .amenities-carousel-title.amenities-carousel-title,
body .portfolio-project-name.portfolio-project-name,
body .our-portfolio-heading.our-portfolio-heading,
body .card-title.card-title,
body .media-article-title.media-article-title,
body .custom-feature-title.custom-feature-title,
body .section-heading.section-heading,
body .ap-pillar h3,
body .beyond-contact-title.beyond-contact-title,
body .beyond-section-title.beyond-section-title {
  color: #2c2c2c !important;
}

/* key facts strip values ("City of Arabia - Dubai", "272") */
body .mural-heading.mural-heading {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #2c2c2c !important;
}

/* card taglines under a card title ("MORE TO THE DAY THAN WORK") */
body .our-portfolio-sub-heading.our-portfolio-sub-heading,
body .portfolio-project-tagline.portfolio-project-tagline {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #545454 !important;
}

/* ---------- Body / description ---------- */
body .mural-description.mural-description,
body .mural-project-description.mural-project-description,
body .mural-project-descriptio.mural-project-descriptio,
body .description.description,
body .interior-description.interior-description,
body .section-description.section-description,
body .amenities-subtitle-text.amenities-subtitle-text,
body .amenities-carousel-description.amenities-carousel-description,
body .contact-subtitle.contact-subtitle,
body .our-portfolio-description.our-portfolio-description,
body .portfolio-project-description.portfolio-project-description,
body .card-text.card-text,
body .ap-lead.ap-lead,
body .careers-description-text.careers-description-text,
body .values-description-text.values-description-text,
body .section-content.section-content,
body .list-item.list-item,
body .hero-wallpaper-text-space.hero-wallpaper-text-space,
body .custom-feature-text.custom-feature-text,
body .paragraph.paragraph,
body .font-light.font-light,
body .beyond-office-address.beyond-office-address,
body .beyond-email-link.beyond-email-link,
body .beyond-phone-number.beyond-phone-number,
body .story-footer p,
body .ap-pillar p,
body .ap-vision-text p,
body .ap-heritage-text p,
body .content-section > div:not([class]),
body p.text-center.lh-lg,
body .panel__text.panel__text {
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

/* one grey for body text on light backgrounds (panel__text sits on a photo) */
body .mural-description.mural-description,
body .mural-project-description.mural-project-description,
body .mural-project-descriptio.mural-project-descriptio,
body .description.description,
body .interior-description.interior-description,
body .section-description.section-description,
body .amenities-subtitle-text.amenities-subtitle-text,
body .amenities-carousel-description.amenities-carousel-description,
body .contact-subtitle.contact-subtitle,
body .our-portfolio-description.our-portfolio-description,
body .portfolio-project-description.portfolio-project-description,
body .card-text.card-text,
body .ap-lead.ap-lead,
body .careers-description-text.careers-description-text,
body .values-description-text.values-description-text,
body .section-content.section-content,
body .list-item.list-item,
body .hero-wallpaper-text-space.hero-wallpaper-text-space,
body .custom-feature-text.custom-feature-text,
body .paragraph.paragraph,
body .font-light.font-light,
body .beyond-office-address.beyond-office-address,
body .story-footer p,
body .ap-pillar p,
body .ap-vision-text p,
body .content-section > div:not([class]),
body p.text-center.lh-lg {
  color: #666 !important;
}

/* ---------- Small / caption ---------- */
body .date-text.date-text,
body .media-article-date.media-article-date,
body .last-updated.last-updated,
body .featured-text.featured-text,
body .media-badge-text.media-badge-text,
body .location-name.location-name,
body .mural-info small.text-muted {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ---------- Mobile: same roles, one step down — never larger than desktop ---------- */
@media (max-width: 767px) {
  body .custom-text.custom-text {
    font-size: 28px !important;
  }

  body .mural-main-heading.mural-main-heading,
  body .main-title.main-title,
  body .interior-exterior-description.interior-exterior-description,
  body .amenities-hero-title.amenities-hero-title,
  body .contact-title.contact-title,
  body .beyond-main-heading.beyond-main-heading,
  body .ap-heading.ap-heading,
  body .story-title.story-title,
  body .news-title.news-title,
  body .title-word.title-word,
  body h1.h3.h3,
  body h1.h2.h2,
  body h1.h2.h2 + h4.text-center,
  body .hero-wallpaper-text.hero-wallpaper-text {
    font-size: 24px !important;
  }

  body .amenities-carousel-title.amenities-carousel-title,
  body .portfolio-project-name.portfolio-project-name,
  body .our-portfolio-heading.our-portfolio-heading,
  body .card-title.card-title,
  body .media-article-title.media-article-title,
  body .custom-feature-title.custom-feature-title,
  body .section-heading.section-heading,
  body .ap-pillar h3,
  body .beyond-contact-title.beyond-contact-title,
  body .beyond-section-title.beyond-section-title,
  body .panel__title.panel__title,
  body .mural-heading.mural-heading {
    font-size: 18px !important;
  }

  body .mural-subheading.mural-subheading,
  body .section-tag.section-tag,
  body .interior-exterior-heading.interior-exterior-heading,
  body .amenities-main-title.amenities-main-title,
  body .section-subtitle.section-subtitle,
  body .mural-launch-text.mural-launch-text,
  body .news-header.news-header,
  body .story-subtitle.story-subtitle,
  body .portfolio-section-title.portfolio-section-title,
  body .hero-wallpaper-title.hero-wallpaper-title,
  body .ap-eyebrow.ap-eyebrow,
  body .ap-label.ap-label,
  body .media-title.media-title,
  body .values-header-text.values-header-text {
    font-size: 14px !important;
  }

  body .our-portfolio-sub-heading.our-portfolio-sub-heading,
  body .portfolio-project-tagline.portfolio-project-tagline {
    font-size: 14px !important;
  }

  body .date-text.date-text,
  body .media-article-date.media-article-date,
  body .last-updated.last-updated,
  body .featured-text.featured-text,
  body .media-badge-text.media-badge-text,
  body .location-name.location-name,
  body .mural-info small.text-muted {
    font-size: 13px !important;
  }
}