/* ============================================================
   LANDING PAGES — service accent theme. Mirrors ad-creative.css /
   pm-theme.css but paints the page in the Landing Pages accent
   (indigo). Loaded last.
   ============================================================ */
:root { --svc: #5B3FD6; --svc-ink: #fff; }   /* dark accent -> white ink on the "What we do" section */
html, body { background: var(--svc); }

.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); }

.pm-tiers .overline { color: var(--n500); }
.pm-hero .overline { color: rgba(255, 255, 255, 0.85); }
.pm-spec { border-top-color: rgba(255, 255, 255, 0.34); }
.pm-spec-row { border-bottom-color: rgba(255, 255, 255, 0.3); }
.pm-spec dt { color: rgba(255, 255, 255, 0.74); }
.pm-spec dd { color: #fff; }
.pm-hero-cta { border-color: #fff; }
.pm-hero-cta:hover { color: var(--svc); }
.nav-contact:hover { color: var(--svc); }

/* the one narrative section flips to white with dark text */
.pm-story { background: #fff; }
.pm-story .story-copy,
.pm-story .story-para,
.pm-story .story-para .w { color: #171818; }

/* grain tuned for the accent */
.noise-canvas { opacity: 0.07; }
.noise-canvas--mult { opacity: 0.025; }
.mega--svc .mega-panel { background: var(--svc); }
.mega--svc .mega-noise { opacity: 0.03; }

@media (max-width: 768px) {
  .pm-hero { min-height: auto; display: block; padding-top: clamp(200px, 54vw, 300px); padding-bottom: clamp(48px, 11vw, 84px); overflow: hidden; }
  .pm-hero .section-wrap { display: block; }
  .pm-spec { margin-top: clamp(44px, 11vw, 84px); }
  .pm-hero-title { font-size: clamp(34px, 8.6vw, 54px); max-width: 100%; }
  .pm-hero-title .word-mask { max-width: 100%; }
  .pm-hero-title .word { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
  .pm-hero-bg { font-size: 15vw; top: clamp(80px, 15vw, 120px); }
}

/* methodology card art: center the illustration in the card */
.pm-card-art { background-position: center center; transform: none; }
.pm-card.is-active .pm-card-art { transform: none; }

/* method head wide enough to keep the title to two lines */
.pm-method-head { max-width: 940px; }
.pm-method-title { max-width: none; }

/* the indigo accent is dark, so the hero (ATF) text stays white.
   service-light.css defaults hero text to dark (#171818) for the light-accent
   pages; this file loads after it, so these win. */
.pm-hero-title, .pm-hero-title .word { color: #fff; }
.pm-hero-cta { color: #fff; }
.pm-hero .overline { color: rgba(255, 255, 255, 0.85); }
.pm-hero .cta-reassure { color: rgba(255, 255, 255, 0.72); }

/* ---- dark accent: nav + dropdown + CTA hover all go WHITE on the indigo ----
   (the page is wired as a light-accent service; these win because this file
   loads last and is only on this page) */
.pm-hero-cta::before { background: #fff; }
.pm-hero-cta:hover { color: var(--svc); }

.nav-bar--light .navlink,
.nav-bar--light .wordmark,
.nav-bar--light .nav-caret { color: #fff !important; }
.nav-bar--light .nav-contact { color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; }
.nav-bar--light .nav-contact:hover { color: var(--svc) !important; border-color: #fff !important; }

body.svc-light .mega--svc .mega-eyebrow { color: rgba(255, 255, 255, 0.6) !important; }
body.svc-light .mega--svc .mega-card-name,
body.svc-light .mega--svc .mega-all { color: #fff !important; }
body.svc-light .mega--svc .mega-card-desc { color: rgba(255, 255, 255, 0.72) !important; }
.mega--svc .mega-card { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.14); }
.mega--svc .mega-card:hover { background: rgba(255, 255, 255, 0.07) !important; }
.mega--svc .mega-art { filter: none !important; opacity: 0.85; }
body.svc-light .mega--svc .mega-dot { background: #fff; opacity: 0.5; }
body.svc-light .mega--svc .mega-card:hover .mega-dot { background: #fff; opacity: 1; }
.mobile-bar.is-light .mobile-logo,
.mobile-bar.is-light .mobile-trigger { color: #fff !important; }
/* the spec sheet's top line (above PROGRAM) — service-light sets it dark via a higher-specificity
   rule. Override the LOADED state only, so it still fades in with the rest (the initial state stays
   transparent from v2.css and the line reveals on load instead of showing immediately). */
body.loaded .pm-hero .pm-spec { border-top-color: rgba(255, 255, 255, 0.34); }