/* ============================================================
 * HOME — personality layer (July 2026)
 * Holds the "bright, human, layered" personality elements as they
 * get approved, section by section. Layered over home-v2.css.
 *
 * Brief v3 (locked from Rebecca's annotated inspo, 2026-07-22):
 *  - KEEP the full-width photo hero TILE — do not change its shape.
 *  - Rebecca is building the layered hero graphic in Illustrator and
 *    will supply it. Until then the hero tile is a PLAIN BLUE block
 *    (no photo) — see .hero2--flat below.
 *  - Composition language for supplied artwork: LAYERING
 *    (shape -> photo -> UI on top); GroupEd icon-shape echoes behind
 *    & in front of people; UI/pills over real photos; faint gradient
 *    grounds; big words behind photos; chat bubbles for the parent
 *    app page. Palette stays OURS, used bolder.
 * ============================================================ */

/* ---------- hero: Rebecca's Illustrator graphic (home only) ----------
   Full-bleed 2:1 artwork (navy left kept calm for the white headline +
   CTA; GroupEd mark + person on the right). We drop the photo scrim and
   the floating chips — the artwork is self-contained. Fallback navy
   (#253A7D, sampled from the artwork) fills any crop gap. (.hero2 is
   shared by other pages, so this is scoped to .hero2--graphic.) */
.hero2--graphic .hero2__frame { background: #253A7D; }
.hero2--graphic .hero2__photo {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero2--graphic .hero2__scrim,
.hero2--graphic .hero2__chip {
  display: none;
}
/* mobile/portrait: the 2:1 artwork would crop her face if it filled a
   tall tile, so show it uncropped as a banner at the top, with the
   headline + CTA flowing beneath on the navy frame. */
@media (max-width: 900px) {
  .hero2--graphic .hero2__frame { display: block; min-height: 0; }
  .hero2--graphic .hero2__photo {
    position: relative; inset: auto;
    width: 100%; height: auto;
    object-fit: fill;
  }
  .hero2--graphic .hero2__copy { padding-top: clamp(24px, 5vw, 40px); }
}

/* ---------- "whole school" CTA board: hero-style sky mark behind the
   3 device mockups (same sky #2FB7F1 as the hero graphic) ---------- */
.final2__inner { position: relative; z-index: 1; }   /* copy + montage sit above the mark */
/* clip layer: keeps the oversized corner mark inside the board's rounded
   shape (the board is overflow:visible on desktop for the montage step-out,
   so we can't clip on the board itself) */
.final2__markwrap {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
/* big GroupEd mark tucked into the TOP-RIGHT corner, behind the mockups */
.final2__mark {
  position: absolute;
  top: clamp(-110px, -7vw, -50px);
  right: clamp(-110px, -7vw, -50px);
  width: clamp(360px, 40vw, 620px);
  height: auto;
  display: block;
}
@media (max-width: 1020px) {
  /* montage stacks below the copy here; keep the flourish desktop-only */
  .final2__markwrap { display: none; }
}

/* (Numbers-band brand-shape flourish trial removed 23 July 2026 — Rebecca
   didn't like the ghost icon on "The numbers schools actually feel".) */