/* ==========================================================================
   Miss Pepper AI — Hero scale override
   Reduces every hero's LOGO, HEADLINE and CTA by a single factor so they sit
   comfortably in the viewport. One knob: --mp-hero-scale (0.7 = -30%).
   Loaded after all hero CSS; compound-class selectors guarantee it wins
   regardless of order. Values mirror each hero's own clamp()s, times the knob.
   ========================================================================== */

:root {
  --mp-hero-scale: 0.7; /* -30% on hero logo/headline/CTA */
}

/* --- Hero built-in logo — hidden ------------------------------------ */
/* The sticky top bar now owns the Miss Pepper brand on every page, so each
   hero's own lockup is removed to avoid a duplicate. Loaded after the hero CSS
   so these win. Revert by deleting this block if a hero should show its logo. */
.mp-hero--home .mp-hero__brand,
.mp-silo--ai-marketing .brand,
.mp-silo--creative-strategist .brand,
.mp-silo--marketing-automation .hero__brand,
.mp-silo--thought-leadership .brand,
.mp-silo--website-design .brand-lockup {
  display: none;
}

/* --- Homepage master (.mp-hero--home) -------------------------------- */
.mp-hero.mp-hero--home .mp-hero__logo {
  width: clamp(calc(17.25rem * var(--mp-hero-scale)), calc(23.2vw * var(--mp-hero-scale)), calc(26.25rem * var(--mp-hero-scale)));
}
.mp-hero.mp-hero--home .mp-hero__headline {
  /* Full silo-size H1 — the widened flowing column (hero.css 2026-08-02)
     fits the long lines without the earlier emergency downscale. */
  font-size: clamp(calc(3rem * var(--mp-hero-scale)), calc(5.32vw * var(--mp-hero-scale)), calc(6.1rem * var(--mp-hero-scale)));
}
.mp-hero.mp-hero--home .mp-cta {
  min-width: clamp(calc(17rem * var(--mp-hero-scale)), calc(21vw * var(--mp-hero-scale)), calc(25rem * var(--mp-hero-scale)));
  height: clamp(calc(4.2rem * var(--mp-hero-scale)), calc(5.5vw * var(--mp-hero-scale)), calc(5.55rem * var(--mp-hero-scale)));
  font-size: clamp(calc(1rem * var(--mp-hero-scale)), calc(1.1vw * var(--mp-hero-scale)), calc(1.24rem * var(--mp-hero-scale)));
}
/* Mobile: this 3-class selector outranks hero.css's single-class media rules,
   so the home size has to be restated per breakpoint. Moderate clamp — the
   long flowing lines would run to 6+ rows at the shared 12vw silo size. */
@media (max-width: 760px) {
  .mp-hero.mp-hero--home .mp-hero__headline { font-size: clamp(2rem, 8.6vw, 2.9rem); }
}

/* --- Generic silo heroes (.mp-hero--silo) --------------------------- */
/* Shares hero.css's base clamps (same as the home hero), so mirror those. */
.mp-hero.mp-hero--silo .mp-hero__headline {
  font-size: clamp(calc(3rem * var(--mp-hero-scale)), calc(5.32vw * var(--mp-hero-scale)), calc(6.1rem * var(--mp-hero-scale)));
}
.mp-hero.mp-hero--silo .mp-cta {
  min-width: clamp(calc(17rem * var(--mp-hero-scale)), calc(21vw * var(--mp-hero-scale)), calc(25rem * var(--mp-hero-scale)));
  height: clamp(calc(4.2rem * var(--mp-hero-scale)), calc(5.5vw * var(--mp-hero-scale)), calc(5.55rem * var(--mp-hero-scale)));
  font-size: clamp(calc(1rem * var(--mp-hero-scale)), calc(1.1vw * var(--mp-hero-scale)), calc(1.24rem * var(--mp-hero-scale)));
}

/* --- AI Marketing (hero-6) ------------------------------------------- */
.mp-silo.mp-silo--ai-marketing .brand__logo {
  width: clamp(calc(16.5rem * var(--mp-hero-scale)), calc(20.4vw * var(--mp-hero-scale)), calc(24rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--ai-marketing .hero__headline {
  font-size: clamp(calc(3.6rem * var(--mp-hero-scale)), calc(5.95vw * var(--mp-hero-scale)), calc(6.8rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--ai-marketing .hero__cta {
  min-width: clamp(calc(17rem * var(--mp-hero-scale)), calc(20vw * var(--mp-hero-scale)), calc(21.25rem * var(--mp-hero-scale)));
  height: clamp(calc(4.1rem * var(--mp-hero-scale)), calc(5.05vw * var(--mp-hero-scale)), calc(4.8rem * var(--mp-hero-scale)));
  font-size: clamp(calc(0.98rem * var(--mp-hero-scale)), calc(1.02vw * var(--mp-hero-scale)), calc(1.13rem * var(--mp-hero-scale)));
}

/* --- Marketing Automation (hero-3) ---------------------------------- */
.mp-silo.mp-silo--marketing-automation .hero__logo {
  width: clamp(calc(16rem * var(--mp-hero-scale)), calc(22vw * var(--mp-hero-scale)), calc(23rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--marketing-automation .hero__headline {
  font-size: clamp(calc(4.05rem * var(--mp-hero-scale)), calc(5.05vw * var(--mp-hero-scale)), calc(5.6rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--marketing-automation .hero__cta {
  min-width: clamp(calc(17rem * var(--mp-hero-scale)), calc(21vw * var(--mp-hero-scale)), calc(25rem * var(--mp-hero-scale)));
  height: clamp(calc(4.2rem * var(--mp-hero-scale)), calc(5.5vw * var(--mp-hero-scale)), calc(5.55rem * var(--mp-hero-scale)));
  font-size: clamp(calc(1rem * var(--mp-hero-scale)), calc(1.08vw * var(--mp-hero-scale)), calc(1.15rem * var(--mp-hero-scale)));
}

/* --- Website Design (hero-4) ---------------------------------------- */
.mp-silo.mp-silo--website-design .brand-lockup {
  width: clamp(calc(15.6rem * var(--mp-hero-scale)), calc(20.4vw * var(--mp-hero-scale)), calc(19.8rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--website-design .hero-copy__headline {
  font-size: clamp(calc(2.82rem * var(--mp-hero-scale)), calc(5.05vw * var(--mp-hero-scale)), calc(4.8rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--website-design .hero-copy__cta {
  min-width: min(100%, calc(22rem * var(--mp-hero-scale)));
  min-height: calc(4rem * var(--mp-hero-scale));
  font-size: clamp(calc(0.98rem * var(--mp-hero-scale)), calc(1.04vw * var(--mp-hero-scale)), calc(1.12rem * var(--mp-hero-scale)));
}

/* --- Creative Strategist (hero-2) ----------------------------------- */
.mp-silo.mp-silo--creative-strategist .brand {
  width: clamp(calc(276px * var(--mp-hero-scale)), calc(23.2vw * var(--mp-hero-scale)), calc(420px * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--creative-strategist h1 {
  font-size: clamp(calc(48px * var(--mp-hero-scale)), calc(5.32vw * var(--mp-hero-scale)), calc(98px * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--creative-strategist .cta {
  min-width: clamp(calc(354px * var(--mp-hero-scale)), calc(25vw * var(--mp-hero-scale)), calc(430px * var(--mp-hero-scale)));
  height: clamp(calc(67px * var(--mp-hero-scale)), calc(5.5vw * var(--mp-hero-scale)), calc(89px * var(--mp-hero-scale)));
  font-size: clamp(calc(16px * var(--mp-hero-scale)), calc(1.1vw * var(--mp-hero-scale)), calc(20px * var(--mp-hero-scale)));
}

/* --- Thought Leadership (hero-5) ------------------------------------ */
.mp-silo.mp-silo--thought-leadership .brand {
  width: min(calc(15.8rem * var(--mp-hero-scale)), calc(19vw * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--thought-leadership .hero__headline {
  font-size: clamp(calc(3.15rem * var(--mp-hero-scale)), calc(5.95vw * var(--mp-hero-scale)), calc(5.7rem * var(--mp-hero-scale)));
}
.mp-silo.mp-silo--thought-leadership .hero__cta {
  min-width: clamp(calc(17rem * var(--mp-hero-scale)), calc(21vw * var(--mp-hero-scale)), calc(25rem * var(--mp-hero-scale)));
  height: clamp(calc(4.2rem * var(--mp-hero-scale)), calc(5.5vw * var(--mp-hero-scale)), calc(5.55rem * var(--mp-hero-scale)));
  font-size: clamp(calc(1rem * var(--mp-hero-scale)), calc(1.1vw * var(--mp-hero-scale)), calc(1.24rem * var(--mp-hero-scale)));
}

/* ==========================================================================
   Hero H1 flow + width expansion (2026-08-02, all pillars)
   Mirrors the shared-system fix in hero.css: headline spans flow inline and
   wrap to the column (accent span gets its own line), and each bespoke
   hero's copy column is widened so the H1 fills the space instead of
   stacking as short fixed lines. Loaded after every hero stylesheet, and the
   compound selectors outrank the per-hero span rules.
   ========================================================================== */

.mp-hero .mp-hero__headline span,
.mp-silo.mp-silo--ai-marketing .hero__headline span,
.mp-silo.mp-silo--marketing-automation .hero__headline span,
.mp-silo.mp-silo--thought-leadership .hero__headline span,
.mp-silo.mp-silo--website-design .hero-copy__headline span,
.mp-silo.mp-silo--creative-strategist h1 span {
  display: inline;
  white-space: normal;
  /* The per-span reveal animations use clip-path; Chrome clips a WRAPPED
     inline span to its first line fragment, deleting the wrapped words
     (website-design lost "That"). Flowing headlines therefore render
     instantly with no scan-in. */
  animation: none;
  clip-path: none;
  opacity: 1;
  transform: none;
  filter: none;
}
/* span.accent outranks the flow rule above so accents keep their own line. */
.mp-hero .mp-hero__headline span.mp-accent,
.mp-silo.mp-silo--ai-marketing .hero__headline span.hero__headline-accent,
.mp-silo.mp-silo--marketing-automation .hero__headline span.hero__headline-accent,
.mp-silo.mp-silo--thought-leadership .hero__headline span.hero__headline-accent,
.mp-silo.mp-silo--website-design .hero-copy__headline span.hero-copy__headline--accent {
  display: block;
}

/* Copy-column widths (each mirrors its hero's own selector, widened). */
.mp-silo.mp-silo--ai-marketing .hero__content {
  grid-template-columns: minmax(20rem, 44rem) minmax(26rem, 39rem);
}
.mp-silo.mp-silo--ai-marketing .hero__copy { max-width: min(58rem, 60vw); }
.mp-silo.mp-silo--marketing-automation .hero__content { width: min(56rem, 56vw); }
.mp-silo.mp-silo--website-design .hero__content { width: min(50rem, 52vw); }
.mp-silo.mp-silo--thought-leadership .hero__copy { width: min(52rem, 58vw); }
.mp-silo.mp-silo--creative-strategist .hero-content { width: min(58rem, 60vw); }