/* ===========================================================================
   HOME — page-specific hero + full-bleed microscopy background.
   Ported verbatim from the approved static index.html. Shared chrome
   (login-bar / brand / nav / footer) lives in base.css; only the home hero
   and the composite page background live here.

   The static index scales its 1800px artboard via html{font-size:min(16px,
   100vw/112.5)} (already set in base.css). index used --content-inset:14.44%;
   base.css exposes the same value as --inset. The hero padding below uses the
   static index's own values so the headline lands at the PSD position.
   =========================================================================== */

/* Full-bleed composite background on the page wrapper — the native 1800x2260
   PSD composite (respects the SCREEN blend, no seam), mapped 1:1 over the page.
   background-color is the site green (var(--green), matches .footer's own
   background) so any rendered height beyond the fixed-height composite is
   filled with green instead of black before the footer starts. */
.home .page,
.page.is-home {
  background-image: url('../../img/home-bg-psd.jpg?v=2'); /* mesmo asset do protótipo — grain idêntico */
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: var(--green);
}

/* ===== Hero ===== */
.hero {
  min-height: 91rem;              /* fill the tall dark band like the PSD (header+hero+footer ~= 2260) */
  padding: 26.6rem 6% 6rem 20.5%; /* headline top ~= 891px, left ~= 370px (PSD bbox) */
}
.hero__headline {
  margin: 0;
  font-weight: 300;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 4.32vw, 4.858rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #fff;
  max-width: 53.6rem;            /* PSD headline width 858px */
}
.hero__headline-accent {
  color: #4EB9AD;
  display: block;
  font-weight: 400;              /* spec: Medium(500) -> nearest real weight 400 */
}
.hero__body {
  margin: 6.1rem 0 0;            /* PSD gap headline(bottom 1050) -> body(top 1148) = 98px */
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.125rem, 1.755vw, 1.974rem);
  line-height: 1.187;
  letter-spacing: 0.01em;
  color: #fff;
  max-width: 62.6rem;           /* PSD body width 1002px */
}
.hero__body p { margin: 0 0 2.3rem; }  /* blank-line paragraph gap ~= 37.5px */
.hero__body p:last-child { margin-bottom: 0; }
.hero__strong { font-weight: 700; font-style: italic; }

/* ===== Responsive (home hero only; chrome responsive is in base.css) ===== */
@media (max-width: 48rem) {
  /* on mobile the composite can't map 1:1 -> let it cover the (shorter) page */
  .home .page,
  /* mobile QA 03/09 v2: keep the artwork (client loves it) but frame it — the
     cyan/red cell shows WHOLE at the top of the hero, headline below it (cover
     was slicing it at the edge; hiding it was wrong). 200% of 375px shows the
     cell at ~271x487px, offset below the opaque header. */
  .page.is-home {
    background-image: url('../../img/home-bg-psd.jpg?v=2');
    background-size: 200% auto;
    background-position: left -0.5rem top 15.5rem;
    background-repeat: no-repeat;
    background-color: #000;
  }
  .hero { min-height: auto; padding: max(32rem, 112vw) 6% 3.5rem; background: none; }  /* cell bottom ≈ 1.07×vw + offset: on 600–768px the fixed 32rem let the headline overlap the cell */
  .hero__headline { max-width: 100%; }
  .hero__body { max-width: 100%; }
  /* the design's manual line breaks are for the 1800px layout — let the text
     reflow naturally on narrow screens. */
  .hero__br { display: none; }
}

/* Intro preloader styling lives in assets/css/intro-overlay.css (ported verbatim from
   the approved intro.html splash) — loaded globally on the front page, not here. */