/* ==========================================================================
   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 {
  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)));
}

/* --- 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)));
}