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

:root { --svc: #10B981; --svc-ink: #fff; }   /* green - 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 full-screen menu: base v2.css hardcodes cobalt (--blue); match the
   page's hero colour like the desktop mega does (white menu text already matches the hero) */
.mobile-menu a.mm-cta { color: var(--svc); }   /* button label was cobalt; match the hero */

/* ---- 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 .cta-reassure { color: rgba(255,255,255,0.85); }   /* light on the green hero */
.chip-sm { display: none; }
@media (max-width: 600px) { .chip-lg { display: none; } .chip-sm { display: inline; } }

/* ---- RESULTS: case-study line chart (authored fresh; component had no CSS) ---- */
/* base .results has a negative margin-top to tuck under the Signal pin; here it
   follows Capabilities + a seam, so that negative margin clipped the section above */
.results { margin-top: 0; background: #ffffff; color: #171818; padding: clamp(56px,8vh,110px) 0; }
.rz-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.rz-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(28px,4vh,48px); }
.rz-over { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; color: var(--n500); display: block; margin-bottom: 16px; }
.rz-h { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(28px,3.4vw,50px); line-height: 1.0; letter-spacing: -0.01em; color: #171818; margin: 0; max-width: 17ch; }
.rz-h s { text-decoration-thickness: 2px; color: var(--n400); }
.rz-tabs { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid rgba(0,0,0,0.14); }
.rz-tab { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--n500); background: transparent; border: 0; border-left: 1px solid rgba(0,0,0,0.12); padding: 11px 16px; cursor: url("cursors/hand.png") 6 1, pointer; transition: color .18s, background .18s; }
.rz-tab:first-child { border-left: 0; }
.rz-tab:hover { color: #171818; }
.rz-tab.on { color: #fff; background: #171818; }
.rz-chart { position: relative; border: 1px solid rgba(0,0,0,0.14); background: #fbfbf9; overflow: hidden; }
.rz-chart canvas { display: block; width: 100%; height: clamp(320px,42vw,480px); }
.rz-foot { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(0,0,0,0.14); border-top: 0; }
.rz-stat { padding: clamp(16px,2vw,24px) clamp(16px,2vw,26px); border-left: 1px solid rgba(0,0,0,0.12); min-height: clamp(56px,6vw,72px); }
.rz-stat:first-child { border-left: 0; }
.rz-stat .k { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; color: var(--n500); }
.rz-stat .v { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(26px,3vw,40px); color: #171818; line-height: 1; margin-top: 8px; white-space: nowrap; }
@media (max-width: 760px) {
  .rz-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .rz-tabs { width: 100%; }
  .rz-tab { flex: 1 1 auto; text-align: center; }
  .rz-foot { grid-template-columns: 1fr 1fr; }
  .rz-stat:nth-child(3) { border-left: 0; }
  .rz-stat:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,0.12); }
}

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