/* ============================================================
   AD CREATIVE — service accent theme. Mirrors pm-theme.css but
   paints the page in the creative accent (orange). Loaded last.
   ============================================================ */
:root { --svc: #FD9905; }
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 down on the bright 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 (was bottom-anchored and sat too low) */
.pm-card-art { background-position: center center; transform: none; }
.pm-card.is-active .pm-card-art { transform: none; }

/* method title: keep it to two lines (one sentence per line, not three).
   The head container caps at 60ch which is too narrow for the title at 72px,
   so widen the head (the intro keeps its own narrower cap) and let the title fill it. */
.pm-method-head { max-width: 940px; }
.pm-method-title { max-width: none; }

/* ── TOOLKIT marquee: full-colour logos on white chips, inside the dark capabilities section ── */
/* padding-bottom (not margin) so the gap stays inside the dark section - a bottom
   margin collapses through .pm-cap (zero bottom padding) and exposes the orange body bg */
.toolkit-strip { margin-top: clamp(44px,6vh,80px); padding-bottom: clamp(30px,5vh,68px); }
.toolkit-label { display: block; padding: 0 clamp(20px,5vw,64px); }
.marquee { margin-top: clamp(22px,3vh,38px); overflow: hidden; }
.marquee-track { display: flex; align-items: center; gap: clamp(38px,4.6vw,76px); width: max-content;
  animation: toolkit-scroll 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: none; }
.tool-chip { display: flex; align-items: center; justify-content: center; height: 44px; }
.tool-logo { height: 38px; width: auto; max-width: 150px; object-fit: contain; display: block; }
/* mono logos ship white-filled (built for a dark section); on the light accent bg, darken them to ink */
.tool-logo--white { filter: brightness(0); }
/* black/mono brands are whitened directly in their SVG fill (no CSS filter -
   a filtered layer clipped at the marquee edge painted a blue compositing artifact) */
.tool-wordmark { display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 28px; line-height: 1; color: var(--svc-ink, #171818); padding: 0 4px; text-align: center; }
.tool-cap { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--svc-ink, #171818) 62%, transparent); white-space: nowrap; }
@keyframes toolkit-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask: none; mask: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 30px; width: auto; }
  .tool[aria-hidden="true"] { display: none; }
}

/* v2.css gives ALL .marquee elements a BLUE (var(--blue)) edge-fade for the blue
   social-proof marquee. Our toolkit reuses .marquee, so recolour the fade to the
   accent surface (var(--svc)) so logos fade into the coloured section, not into black. */
.toolkit-strip .marquee::before { background: linear-gradient(to right, var(--svc) 18%, color-mix(in srgb, var(--svc) 0%, transparent) 100%); }
.toolkit-strip .marquee::after  { background: linear-gradient(to left,  var(--svc) 18%, color-mix(in srgb, var(--svc) 0%, transparent) 100%); }