/* This stylesheet is intentionally loaded after all legacy theme files. */
/* A temporary all-sans type treatment, using the site's already bundled
   Cyrillic font. Keep heading hierarchy through size and weight, not serifs. */
:root { --font-heading: var(--font-sans); }
h1, h2, h3, h4, h5, h6,
.about-centre__card strong,
.about-life-banner h1 em {
  font-family: var(--font-sans) !important;
  letter-spacing: -.025em !important;
}

/* A dark, translucent film keeps the white hero navigation readable on every
   slide without turning it into the solid interior header. */
body.home .site-header:not(.is-scrolled) .nav,
body.page-template-about .site-header:not(.is-scrolled) .nav {
  background: rgba(9, 34, 27, .64) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}
body.home .site-header:not(.is-scrolled) .header-contact-bar,
body.page-template-about .site-header:not(.is-scrolled) .header-contact-bar {
  background: rgba(9, 34, 27, .68) !important;
}

@media (max-width: 760px) {
  .home .hero { min-height: 640px !important; }
  .home .hero-copy { min-height: 640px !important; padding: 120px 0 22px !important; }
  .home .hero-glass { min-height: 500px !important; padding: 28px 18px 20px !important; }
}

/* The image sequence is decorative, so its player UI stays out of the layout. */
.about-life-banner__controls { display: none !important; }

/* Desktop keeps the original tall centre-page banner. It preserves the full
   photograph composition and leaves the text card enough room to breathe.
   Phone-specific compaction stays below in its media query. */
@media (min-width: 901px) {
  body.page-template-about .about-life-banner__glass {
    width: min(710px, calc(100% - 76px)) !important;
    padding: 52px !important;
  }

  body.page-template-about .about-life-banner h1 {
    font-size: clamp(50px, 4vw, 60px) !important;
    line-height: 1.02 !important;
  }
}

/* Each slide has a different subject cluster. Keep it inside the crop instead
   of applying one generic center-right position to all twelve images. */
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(1) { object-position: 70% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(2) { object-position: 76% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(3) { object-position: 72% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(4) { object-position: 74% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(5) { object-position: 72% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(6) { object-position: 71% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(7) { object-position: 70% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(8) { object-position: 65% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(9) { object-position: 76% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(10) { object-position: 73% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(11) { object-position: 72% center !important; }
body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(12) { object-position: 73% center !important; }

/* Interior pages no longer reserve a second header-height-sized gap before
   the breadcrumb. The hero pages intentionally keep their overlay layout. */
body:not(.home):not(.page-template-about) main .crumbs {
  padding-top: 26px !important;
}

/* The interior main already reserves space for the fixed header.  The FAQ
   hero must not reserve that space a second time. */
body.page-template-faq .faq-page__hero {
  padding-top: 0 !important;
}

/* At scroll the utility line leaves the viewport. Keep the navigation itself
   fixed and readable, while recovering the vertical space on desktop. */
@media (min-width: 761px) {
  body .site-header.is-compact .header-contact-bar,
  body:not(.home) .site-header.is-scrolled.is-compact .header-contact-bar {
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body .site-header.is-compact .nav {
    min-height: 72px !important;
    margin-top: 0 !important;
    padding-block: 10px !important;
  }
}

/* On small screens the card follows its content instead of preserving a blank top half. */
@media (max-width: 900px) {
  body.page-template-about .about-life-banner {
    min-height: 520px !important;
  }

  body.page-template-about .about-life-banner__glass {
    top: 144px !important;
    right: 20px !important;
    bottom: auto !important;
    left: 20px !important;
    min-height: 0 !important;
    padding: 48px 32px 46px !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  /* Keep all blog sections reachable without placing ten rows before the
     first article. The selected section stays visible at the leading edge. */
  .blog-reference-page .blog-reference-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 4px 0 12px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .blog-reference-page .blog-reference-nav a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .blog-reference-page .blog-reference-nav a.is-active { order: -1; }
  .blog-reference-page .blog-reference-nav b { display: none; }

  body:not(.home):not(.page-template-about) main .crumbs {
    padding-top: 18px !important;
  }

  /* Mobile shows only about 40% of the source width. These focal points keep
     faces and the main action in frame for every slide. */
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(1) { object-position: 73% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(2) { object-position: 78% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(3) { object-position: 75% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(4) { object-position: 77% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(5) { object-position: 75% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(6) { object-position: 73% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(7) { object-position: 73% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(8) { object-position: 66% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(9) { object-position: 78% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(10) { object-position: 75% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(11) { object-position: 75% center !important; }
  body.page-template-about .about-life-banner__media .about-life-banner__frame:nth-child(12) { object-position: 76% center !important; }

  body.page-template-about .about-life-banner__glass {
    top: 116px !important;
    right: 12px !important;
    left: 12px !important;
    padding: 34px 20px 38px !important;
  }

  body,
  button,
  input,
  select,
  textarea {
    letter-spacing: .012em;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -.025em !important;
  }

  .eyebrow,
  .site-header a,
  .site-header button,
  .site-footer b,
  .button {
    letter-spacing: .025em !important;
  }
}