/* ==========================================================================
   SITEWIDE HERO BANNER PARITY

   The homepage banner is the reference composition. At 1041px and above the
   HOME HERO PARITY CONTRACT in styles.css already locks every interior hero to
   the homepage stage height. Below 1041px both stylesheets release that height
   and then diverge on type scale, action size, and proof rhythm, which is why
   phone and tablet banners stopped matching the homepage. The photographic
   finish diverges at every width: READABLE 4K INTERIOR HERO SYSTEM in
   styles.css - mirrored in hero-future.css, hero-future-bright-20260808.css,
   and a page-owned no-mask style block on 27 pages - deliberately excludes the
   homepage and gives interior banners a heavier scrim, a different image
   filter, and harder text shadows.

   This sheet closes both gaps. It loads after styles.css, homepage.css, and
   readable-card-sections.css, so it is the last word on hero presentation.
   The filename predates the finish work; the sheet now governs hero parity at
   every width.

   Three invariants:
   1. One stage height per viewport width, shared by every page including the
      homepage, expressed as min-height so no banner can ever clip its content.
   2. One reading scale - eyebrow, H1, description, action rail - taken from
      the homepage and applied to every interior hero.
   3. One photographic finish - scrim, image filter, copy shadow, copy colour -
      taken from the homepage and applied to every interior hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared stage height

   Applied as min-height to every hero, the homepage included, so shorter
   interior pages grow up to the shared stage and center their copy in it while
   the homepage keeps its full composition and can never be cropped. The
   previous revision of this sheet used a fixed height with overflow hidden,
   which cropped the homepage wherever the band value fell below its natural
   height.

   Tablet (701px - 1040px) reuses the stage formula both stylesheets already
   apply from 1041px up, so the desktop contract simply continues down through
   the tablet range instead of being released at 1040px.

   Phone (up to 700px) cannot be viewport-derived: the homepage stacks an
   operations card, two paragraphs, two actions, and a six-item capability strip,
   which is taller than any phone viewport. Those bands carry measured homepage
   heights, each band holding the value for its narrow edge, where the copy wraps
   most and the banner is tallest.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  :root {
    --lifa-hero-stage: clamp(700px, calc(100svh - 130px), 790px);
  }
}

/* 700px is the phone breakpoint on both stylesheets: the homepage H1 drops from
   3.15rem to 2.35rem and its capability strip collapses from a four-column grid
   to a wrapped row, so the stage steps down here before growing again. */
@media (max-width: 700px) {
  :root {
    --lifa-hero-stage: 680px;
  }
}

@media (max-width: 650px) {
  :root {
    --lifa-hero-stage: 820px;
  }
}

@media (max-width: 520px) {
  :root {
    --lifa-hero-stage: 940px;
  }
}

@media (max-width: 430px) {
  :root {
    --lifa-hero-stage: 1025px;
  }
}

/* At 420px the homepage operations card stacks to a single column, which is the
   largest single step in the ladder. */
@media (max-width: 375px) {
  :root {
    --lifa-hero-stage: 1132px;
  }
}

@media (max-width: 340px) {
  :root {
    --lifa-hero-stage: 1200px;
  }
}

@media (max-width: 1040px) {
  html body.home-page .home-hero,
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) {
    box-sizing: border-box;
    height: auto !important;
    min-height: var(--lifa-hero-stage) !important;
    max-height: none !important;
  }

  /* The stage is taller than the copy on most interior pages, so the content
     column is centered in it exactly as the homepage centers its own.

     padding-inline is reset because the interior contract in styles.css only
     normalises padding-block. The founder banner reserves its desktop portrait
     column with padding-right: min(52vw, 820px), which would otherwise survive
     into the phone layout and squeeze the copy into a half-width gutter. */
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content-wrapper {
    align-self: stretch !important;
    align-items: center !important;
    padding-inline: 0 !important;
  }

  /* The founder hero splits into a portrait column on desktop. Release the
     split below the tablet breakpoint so it shares the sitewide stage. */
  body.founder-profile-page .founder-hero.hero .hero-slider {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.founder-profile-page .founder-hero.hero .hero-slider picture,
  body.founder-profile-page .founder-hero.hero .founder-hero-media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.founder-profile-page .founder-hero.hero::before {
    background:
      linear-gradient(180deg, rgba(3, 10, 19, .58) 0%, rgba(4, 13, 24, .78) 42%, rgba(4, 13, 24, .96) 100%),
      linear-gradient(90deg, rgba(3, 10, 19, .9), rgba(4, 13, 24, .46)) !important;
  }
}

/* --------------------------------------------------------------------------
   2. Tablet reading scale (701px - 1040px)

   Homepage values at this band: eyebrow slot 18px below, H1 3.15rem/.94 with
   16px below, description 1.08rem/1.55, action rail 18px below.
   -------------------------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 1040px) {
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content .eyebrow {
    margin-bottom: 18px !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content h1 {
    margin-bottom: 16px !important;
    font-size: 3.15rem !important;
    line-height: .94 !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content > p {
    line-height: 1.55 !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-actions {
    margin-top: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   3. Phone reading scale (up to 700px)

   Homepage values: eyebrow slot 18px below, H1 2.35rem/.97 with 18px below,
   description 1rem/1.48, action rail 16px below, buttons 50px tall at
   .875rem with 13px/28px padding.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content .eyebrow {
    margin-bottom: 18px !important;
    padding: 8px 11px !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content h1 {
    margin-bottom: 18px !important;
    font-size: 2.35rem !important;
    line-height: .97 !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-actions {
    margin-top: 16px !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-actions > .btn {
    min-height: 50px !important;
    padding: 13px 28px !important;
    font-size: .875rem !important;
  }
}

@media (max-width: 520px) {
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-actions > .btn {
    padding: 13px 8px !important;
    font-size: .66rem !important;
  }
}

@media (max-width: 420px) {
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content h1 {
    font-size: 2.15rem !important;
  }
}

@media (max-width: 390px) {
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content h1 {
    font-size: 2.12rem !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .hero-content > p {
    font-size: .96rem !important;
  }
}

/* --------------------------------------------------------------------------
   4. Proof strip

   The homepage strip carries six short capability labels; interior strips
   carry two or three supporting sentences. The bullet, weight, colour, and
   tracking are aligned to the homepage; the column count and reading size stay
   suited to sentence-length copy.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) :is(.blog-hero-list, .hero-credentials) li {
    letter-spacing: .04em !important;
    line-height: 1.4 !important;
  }

  html body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) :is(.blog-hero-list, .hero-credentials) li::before {
    opacity: .7 !important;
  }
}

/* --------------------------------------------------------------------------
   5. Photographic finish - every width

   Interior banners carried a heavier scrim, a brighter image filter, and a
   harder copy shadow than the homepage, so the same photograph read as a
   different component from page to page. These declarations restate the
   homepage's own values.

   Scope is deliberately limited to the scrim and the image filter. The interior
   copy shadows are heavier than the homepage's and the interior proof strip is
   brighter, but those are a legibility layer tuned to the regenerated 4K
   photography, which is brighter than the homepage set. Lightening the scrim and
   the shadows together would compound into a contrast loss across 273 pages, and
   the shadow difference is not what reads as "a different banner". The scrim is.

   The selectors are deliberately over-specified. The interior finish is declared
   with !important in four places at up to (0,5,2) specificity - styles.css,
   hero-future.css, hero-future-bright-20260808.css, and a page-owned style block
   on 27 pages - and hero-future-bright loads before this sheet while the page
   style block loads after it. Doubling :not(.home-page) and prefixing html clears
   all four without editing 27 page heads.
   -------------------------------------------------------------------------- */
html body:not(.home-page):not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero)::before {
  background:
    linear-gradient(90deg, rgba(3, 11, 21, .92) 0%, rgba(5, 16, 29, .8) 34%, rgba(5, 16, 29, .32) 62%, rgba(5, 16, 29, .06) 100%),
    linear-gradient(0deg, rgba(4, 13, 25, .45) 0%, transparent 42%) !important;
  backdrop-filter: blur(.5px) !important;
}

html body:not(.home-page):not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) :is(.hero-slide, .hero-media, picture > img) {
  filter: saturate(1.015) contrast(1.025) brightness(.985) !important;
}

@media (max-width: 700px) {
  html body:not(.home-page):not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero)::before {
    background:
      linear-gradient(180deg, rgba(3, 11, 21, .52) 0%, rgba(5, 16, 29, .72) 38%, rgba(5, 16, 29, .9) 100%),
      linear-gradient(90deg, rgba(3, 11, 21, .72), rgba(5, 16, 29, .42)) !important;
  }
}

/* --------------------------------------------------------------------------
   6. Carousel slide deferral

   Every hero slide is position: absolute; inset: 0 inside a hero that sits in
   the opening viewport, and the inactive ones are hidden with opacity: 0.
   loading="lazy" only defers images the browser considers off-screen, and
   opacity: 0 does not make an element unrendered - so not one slide was ever
   deferred. Every page downloaded its whole slide set on arrival: 1,242 slide
   images sitewide, 20 of them on the homepage against a 6.8MB directory, and
   two 3840x2160 webp frames of 500-750KB each on fifteen pages.

   The deferral logic was already written. All three carousels - main.js
   showInteriorSlide, main.js setHeroStage, and hero-future.js showSlide - end
   each step with `upcoming.loading = "eager"`, promoting the next frame one at
   a time. The promotion had no effect, because the attribute it changed was
   not gated on anything.

   This rule gates it. A lazy slide that is not the active one is not rendered,
   so the browser genuinely defers it. The instant the existing JS promotes a
   slide to eager the selector stops matching, the slide renders, and the image
   loads - roughly three seconds before it is needed. loading never returns to
   lazy, so a promoted slide is never hidden again and the opacity cross-fade
   keeps both outgoing and incoming frames rendered throughout.

   Why this cannot hide a visible slide: `loading="eager"` is present on all 293
   active slides in the markup and `loading="lazy"` on none of them, so the LCP
   frame is excluded twice over - once by the attribute, once by :not(.active).
   Slide 1's <link rel="preload" as="image"> is untouched. If main.js never runs
   the hero still paints its first frame correctly and simply does not rotate.

   No markup and no JavaScript changed. Same slides, same order, same rotation,
   same appearance - the bytes move from "all at once on arrival" to "one frame
   ahead of the viewer".
   -------------------------------------------------------------------------- */
.hero-slide[loading="lazy"]:not(.active) {
  display: none;
}

/* Keep Mohamed Lifa visible when founder-led 16:9 banners crop to portrait mobile heroes. */
@media (max-width: 700px) {
  body:not(.home-page) :is(.hero:not(.home-hero), .tool-page-hero) .page-founder-hero-media {
    object-position: var(--page-founder-position-mobile, 76% 50%);
  }
}