/* ============================================================
   RARE AIR — Custom Typography
   Header style inspired by Legora.com
   Body text style inspired by Apple.com
   ============================================================ */

/* --- Google Fonts: Cormorant Garamond (closest freely available
       match to Legora's "Rhymes Display Light" — elegant, light
       weight serif display face) ----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ── HEADER / HEADING TYPOGRAPHY (Legora-inspired) ──────────
   Legora uses "Rhymes Display Light": a refined, light-weight
   serif display font with tight letter-spacing and generous
   line-height. Cormorant Garamond 300 is the closest freely
   available equivalent.
   ----------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Cormorant Garamond', 'GFS Didot', Georgia, 'Times New Roman', serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-style: normal;
}

/* Preserve the uppercase letter-spacing overrides from theme.css
   but reduce them to feel more editorial like Legora */
h1.uppercase { letter-spacing: 0.12em; margin-right: -0.12em; }
h2.uppercase { letter-spacing: 0.08em; margin-right: -0.08em; }
h3.uppercase { letter-spacing: 0.06em; margin-right: -0.06em; }
h4.uppercase { letter-spacing: 0.04em; margin-right: -0.04em; }
h5.uppercase { letter-spacing: 0.05em; margin-right: -0.05em; }

/* ── BODY / PARAGRAPH TYPOGRAPHY (Apple-inspired) ────────────
   Apple uses "SF Pro Display" / "Helvetica Neue": a clean,
   modern sans-serif at weight 400 with subtle letter-spacing
   and a comfortable line-height for readability.
   ----------------------------------------------------------- */
body {
  font-family: -apple-system, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1d1d1f;
}

/* Paragraphs */
p {
  font-family: -apple-system, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.011em;
  color: #1d1d1f;
}

/* h5 used for service descriptions — keep body-like readability (Apple style) */
h5 {
  font-family: -apple-system, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.011em;
  color: #1d1d1f;
}

/* ── SERVICE CARD BODY TEXT — indented & slightly smaller ────
   Pads the h5 description text and paragraph text away from
   the edges of each image-tile card for a cleaner layout.
   ----------------------------------------------------------- */
.image-tile .title h5 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  font-size: 15px;
}

.image-tile .title p {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

@media all and (max-width: 767px) {
  .image-tile .title h5 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .image-tile .title p {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Image-bg sections — keep white text */
.image-bg h1,
.image-bg h2,
.image-bg h3,
.image-bg h4,
.image-bg h5,
.image-bg h6 {
  color: #ffffff;
}

/* Footer */
footer p,
footer .fade-1-4 {
  font-family: -apple-system, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #6e6e73;
}

/* Footer copyright — smaller on mobile */
@media all and (max-width: 767px) {
  footer p,
  footer .fade-1-4 {
    font-size: 9px !important;
    letter-spacing: 0.05em;
  }
}

/* Smooth scroll helper */
@media all and (max-width: 767px) {
  .cover.fullscreen .slides li {
    height: 100vh;
    padding-top: 160px;
  }
}

/* ── VIDEO TILES — aspect-ratio sizing (matches Altitude) ───
   Uses 16/9 aspect ratio so videos scale naturally with the
   column width, matching the Altitude site exactly.
   ----------------------------------------------------------- */
.image-tile video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ── HEADER LOGO — perfectly centred ────────────────────────
   Overrides any residual padding-top so the logo sits truly
   centred within the full-screen hero section.
   ----------------------------------------------------------- */
.hero-logo-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  text-align: center !important;
}

/* ── MOBILE TYPOGRAPHY — adjusted heading & body sizes ──────
   theme.css scales h1 to 56px on mobile which is too large
   for the intro tagline. These overrides set comfortable sizes
   for small screens.
   ----------------------------------------------------------- */
@media all and (max-width: 767px) {

  /* Intro tagline ("Curating transformative…") — matches Altitude mobile size */
  h1 {
    font-size: 36px !important;
    line-height: 1.12 !important;
  }

  /* Section sub-headings and email footer heading */
  h3 {
    font-size: 30px !important;
  }

  /* Service card headings (Strategic Advisory, etc.) */
  h4 {
    font-size: 22px !important;
  }

  /* Body paragraphs and intro text */
  p,
  body {
    font-size: 17px !important;
    line-height: 1.75;
  }

  /* Service card paragraphs — keep the inset padding */
  .image-tile .title p {
    font-size: 17px !important;
  }
}