/* ============================================================
   AI SEARCH — colour experiment. Service colour (green) themes
   the hero + nav-over-hero + Signal. Loaded after paid-media.css.
   ============================================================ */

:root { --svc: #FE05AF; --svc-ink: #fff; }   /* pink - dark accent, white ink */
/* page bg matches the hero so the iOS browser bars / overscroll aren't brand-blue */
html, body { background: var(--svc); }

/* HERO: service colour. Flexbox bottom-pin done RIGHT this time:
   - section-wrap is a flex column with DEFAULT align-items:stretch -> children
     stay FULL WIDTH (this is the bit I kept breaking with flex-start).
   - only the button opts out of stretching.
   - margin-top:auto on the spec pins it to the bottom, gap auto-sizes (never a
     void, never too far). Big top padding (35vh, inherited) keeps the gap tight. */
.pm-hero { background: var(--svc); padding-bottom: clamp(64px, 9vh, 120px); }
.pm-hero .section-wrap { display: block; }
.pm-hero-cta { display: inline-flex; }
.pm-spec { margin-top: clamp(56px, 8vh, 110px); }

/* "What's included" overline is one of our greys, not the blue overline default */
.pm-tiers .overline { color: var(--n500); }
.pm-hero .overline { color: rgba(255, 255, 255, 0.8); }
.pm-spec { border-top-color: rgba(255, 255, 255, 0.32); }
.pm-spec-row { border-bottom-color: rgba(255, 255, 255, 0.28); }
.pm-spec dt { color: rgba(255, 255, 255, 0.72); }
.pm-spec dd { color: #fff; }
.pm-hero-cta { border-color: #fff; }
/* hovers invert to the service colour, not black/blue */
.pm-hero-cta:hover { color: var(--svc); }
.nav-contact:hover { color: var(--svc); }

/* NARRATIVE (the one blue section) -> white with dark text */
.pm-story { background: #fff; }
.pm-story .story-copy,
.pm-story .story-para,
.pm-story .story-para .w { color: #171818; }

/* grain is tuned for near-black; on the bright colour the overlay/multiply
   blends read way too strong, so dial them down */
.noise-canvas { opacity: 0.07; }
.noise-canvas--mult { opacity: 0.025; }

/* dropdown sheet takes the service colour when the nav is over the hero,
   and its grain is dialed WAY down there (overlay on a bright colour = static) */
.mega--svc .mega-panel { background: var(--svc); }
.mega--svc .mega-noise { opacity: 0.03; }

/* ---- MOBILE: the desktop bottom-pin makes a weird gap on phones, so the hero
   goes back to natural flow with a tighter top, bigger headline + backdrop ---- */
@media (max-width: 768px) {
  .pm-hero { min-height: auto; display: block; padding-top: clamp(200px, 54vw, 300px); padding-bottom: clamp(48px, 11vw, 84px); }
  .pm-hero .section-wrap { display: block; }
  .pm-spec { margin-top: clamp(44px, 11vw, 84px); }
  .pm-hero-title { font-size: clamp(34px, 8.6vw, 54px); }
  .pm-hero-bg { font-size: 26vw; top: clamp(80px, 15vw, 120px); }
}

.pm-hero-bg { font-size: min(14.5vw, 235px); }

/* ---- MOBILE MENU: match hero accent (v2.css hardcodes cobalt). White menu text works on this accent. ---- */
.mobile-menu a.mm-cta { color: var(--svc); }

.pm-hero .cta-reassure { color: rgba(255,255,255,0.85); }   /* light on the pink hero */

/* What's included (pm-cap) has 0 bottom padding by default; add breathing room before the Programs section */
.pm-cap { padding-bottom: clamp(60px, 9vh, 110px); }

/* line-art phase emblems: center the 1080-square emblem in the dark card (was a full-bleed cyan poster) */
.pm-card-art { background-position: center center; transform: none; }
.pm-card.is-active .pm-card-art { transform: none; }