/* =============================================================
   CLIENT MAX AI — GLOBAL HERO COMPONENT (LOCKED)
   Locked by Matt Guilbault, 2026-10-25 16:11 EDT. DO NOT EDIT WITHOUT CONSENT.
   Applies to every service-page hero (.hero > .hero-inner / .hero-split).
   Source of truth: the /setup hero, ported verbatim.

   LOCKED RULES:
   R1  Hero images are FINAL 1200x900 (4:3). Never crop, stretch, zoom,
       replace, or reformat them. object-fit: contain only.
   R2  The image container is truly 4:3: aspect-ratio 4/3, width 100%,
       height auto. The hero height follows the image container.
   R3  Full bleed = the container reaches the hero's top, bottom and
       right edges without margins. No radius, no border, no padding on it.
   R4  Below 901px the columns stack; the image is never forced to fill
       a fixed hero height (no min-height / max-height anywhere).
   R5  Desktop text column: max-width 780px; padding
       84px 56px 72px calc(max(24px, (100% - 1080px) / 2) + 24px).
       Two-column proportions: text 1fr / image 44.5%.
   R6  If R1-R5 conflict at any breakpoint, STOP and report the
       conflicting CSS. Never improvise a resolution.

   This file owns LAYOUT + IMAGE CONTAINER + TEXT PADDING + HERO TYPE.
   Page background gradients stay page-level (they differ per page).
   Per-page image choice lives on the page as one background-image line.
   Aliases: .hero-inner/.hero-split, .hero-copy/.hero-left,
            .hero-art/.hero-media (setup vs service-page markup).
   ============================================================= */

.hero { position: relative; overflow: hidden; padding: 0; }

.hero-inner, .hero-split { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,44.5%); align-items: stretch; }

.hero-copy, .hero-left { max-width: 780px; padding: 84px 56px 72px calc(max(24px, (100% - 1080px) / 2) + 24px); }

/* R2/R3: the image container is the only sizing authority */
.hero-art, .hero-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  background-color: #081826;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  border-radius: 0;
}
.hero-art img, .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* R4: stacked layout — image keeps its own 4:3, no fixed heights */
@media (max-width: 900px) {
  .hero-inner, .hero-split { grid-template-columns: 1fr; }
  .hero-copy, .hero-left { padding: 56px 28px 48px; }
  .hero-art, .hero-media { aspect-ratio: 4 / 3; height: auto; }
}

/* Hero typography — verbatim from the approved /setup hero.
   Button margins apply only where the buttons sit directly in the text
   column (the /setup pattern); pages using .hero-actions are untouched. */
.hero .eyebrow { color: #3FE1F2; }
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); color: #fff; margin: 14px 0 18px; }
.hero h1 em { font-style: italic; font-weight: 500; color: #3FE1F2; }
.hero p.lede { font-size: 17.5px; line-height: 1.65; color: rgba(255,255,255,0.88); max-width: 640px; }
.hero-copy > .btn, .hero-left > .btn { margin-top: 26px; }
.hero-copy > .btn-outline, .hero-left > .btn-outline { margin-top: 26px; margin-left: 14px; color: #fff; border-color: rgba(255,255,255,0.35); }
.hero-copy > .btn-outline:hover, .hero-left > .btn-outline:hover { background: rgba(255,255,255,0.08); color: #fff; }