@import url('mp-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@800;900&display=swap');
@import url('mp-creative-ads.css');
/* ============================================================
   MEDIAPATH — capability page upgrade layer (KINETIC direction)
   Shared aesthetic linked from every capabilities/*.html:
   1) kinetic marquee strip   2) ghost section titles
   3) Kinetic override — colossal uppercase headings, heavier
      weights, darker ground — to match the homepage.
   Design tokens come from mp-tokens.css (imported above); a
   page :root carries intentional overrides only.
   ============================================================ */

/* KINETIC MARQUEE STRIP */
.kinetic-strip{overflow:hidden;padding:18px 0;background:var(--void);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.kinetic__track{display:flex;gap:clamp(32px,4.5vw,64px);align-items:center;width:max-content;
  animation:ks-scroll 34s linear infinite;}
.kinetic__track .ks-word{font-family:var(--font-display);font-size:clamp(22px,3.2vw,46px);font-weight:800;
  letter-spacing:-0.04em;line-height:1;white-space:nowrap;text-transform:uppercase;
  background:var(--iri);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:respan 22s linear infinite;padding:.14em .08em;margin:-.14em -.08em;}
.kinetic__track .ks-sep{color:var(--accent);font-size:clamp(14px,1.8vw,24px);flex:none;opacity:.7;}
@keyframes ks-scroll{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.kinetic__track{animation:none;}}

/* GHOST SECTION TITLES */
.sec.has-ghost{overflow:hidden;}
.sec.has-ghost::before{content:attr(data-ghost);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:clamp(80px,20vw,260px);font-weight:900;
  letter-spacing:-0.05em;color:rgba(255,255,255,0.04);pointer-events:none;z-index:0;white-space:nowrap;line-height:1;}
.band-paper.has-ghost::before{color:rgba(10,10,10,0.05);}
.sec.has-ghost>.wrap{position:relative;z-index:1;}

/* ============ KINETIC DIRECTION OVERRIDE ============ */
/* darker ground to match the homepage */
body{background:#070708;}
.band-dark{background:#070708;}

/* colossal, uppercase, heavy display headings */
.hero h1{font-weight:900;text-transform:uppercase;letter-spacing:-0.055em;
  font-size:var(--fs-hero);line-height:0.88;}
.head h2,.cta h2,.what h2,.divider__cap p{font-weight:800;text-transform:uppercase;letter-spacing:-0.045em;line-height:0.9;}
.head h2{font-size:clamp(30px,3.8vw,54px);}
.cta h2{font-size:clamp(36px,5vw,72px);letter-spacing:-0.05em;line-height:0.86;}

/* keep serif italic + the dot accents natural (never uppercase serif) */
.acc,.serif,.dot{text-transform:none;}

/* eyebrows → kinetic peach uppercase */
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--accent);}
.eyebrow::before{background:var(--accent);height:2px;width:34px;}

/* card / sub headings get a touch heavier + uppercase for rhythm */
.diff h3,.get h3{text-transform:uppercase;font-weight:700;letter-spacing:-0.02em;}

/* big benchmark numbers heavier */
.num-tile__big{font-weight:900;letter-spacing:-0.055em;font-variant-numeric:tabular-nums;}
.stage__n,.pfrow__n{font-variant-numeric:tabular-nums;}

/* softened word-values (Named / Pre-bid / Traceable…) sit on a quieter scale —
   at numeral size a nine-letter word overflows its quarter-column. The box keeps
   the numeral cap height ≥481px so labels stay level across mixed bands
   (partners 70+/15 + words, connected-tv stats + words). */
.num-tile__big.num-tile__big--word{font-size:clamp(30px,3.2vw,52px);letter-spacing:-0.035em;}
@media(min-width:481px){
  /* +.28em absorbs this tile's own gradient paint-padding (border-box) so its
     label lines up with the numeral tiles' labels */
  .num-tile__big.num-tile__big--word{display:flex;align-items:flex-end;min-height:calc(clamp(52px,6vw,92px)*.9 + .28em);}
}

/* hero tag a hair tighter under the bigger headline */
.hero__tag{max-width:44ch;}

/* real showcase units — immersive full-bleed spotlight on capability pages */
.spot{position:relative;overflow:hidden;padding-block:clamp(72px,11vh,150px);}
.spot__ghost{position:absolute;left:-1.5vw;top:-.10em;z-index:0;font-family:var(--font-display);font-weight:900;
  font-size:clamp(120px,27vw,460px);line-height:.8;letter-spacing:-.04em;color:#fff;opacity:.04;white-space:nowrap;pointer-events:none;}
.spot>.wrap{position:relative;z-index:2;}
.spot__head{max-width:640px;}
.spot__head .lede{margin-top:18px;max-width:52ch;}
.capads.spot__strip{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,4vh,52px) clamp(24px,3vw,48px);
  margin-top:clamp(40px,6vh,76px);
  padding-inline:var(--gutter);}
.spot__strip .adtile{flex:none;transition:transform .5s var(--ease);}
.spot__strip .adtile:hover{transform:scale(1.02);z-index:5;}
/* Device-crop sizing: the tile is the device. --un = held dimension (px number);
   --dw/--dh/--dcy come from the crop-* class (see mp-creative-ads.css). The iframe
   zooms past the unit's stage chrome so only the device shows. */
.adtile.cv-std {--un:525;height:calc(var(--un) * 1px);width:calc(var(--un) * 1px * var(--dw,392) / var(--dh,800));}
.adtile.cv-w760{--un:600;width:calc(var(--un) * 1px);height:calc(var(--un) * 1px * var(--dh,516) / var(--dw,1000));}
.adtile.cv-w880{--un:600;width:calc(var(--un) * 1px);height:calc(var(--un) * 1px * var(--dh,525) / var(--dw,848));}
.adtile.cv-std  iframe{width:560px;height:980px;transform:translate(-50%,-50%) scale(calc(var(--un) / var(--dh,800))) translate(0px, calc((var(--ch2,490) - var(--dcy,474)) * 1px));}
.adtile.cv-w760 iframe{width:1100px;height:640px;transform:translate(-50%,-50%) scale(calc(var(--un) / var(--dw,1000))) translate(0px, calc((var(--ch2,320) - var(--dcy,325)) * 1px));}
.adtile.cv-w880 iframe{width:1100px;height:640px;transform:translate(-50%,-50%) scale(calc(var(--un) / var(--dw,848))) translate(0px, calc((var(--ch2,320) - var(--dcy,337.5)) * 1px));}
@media(max-width:680px){
  .adtile.cv-std {--un:364;}
  .adtile.cv-w760{--un:380;}
  .adtile.cv-w880{--un:380;}
  .capads.spot__strip{gap:14px;padding-left:var(--gutter);}
}
@media(max-width:520px){
  .adtile.cv-w760{--un:320;}
  .adtile.cv-w880{--un:320;}
}

/* ── global footer (canonical; pages may override with their own .foot block) ── */
.foot{background:var(--void);padding:clamp(56px,8vh,96px) 0 48px;border-top:1px solid var(--line-soft);}
.foot__top{display:flex;justify-content:space-between;gap:clamp(28px,3vw,44px);flex-wrap:nowrap;align-items:flex-start;}
.foot__mark{height:34px;}
/* brand column — the lockup alone left a 24px mark adrift in a huge cell (user 2026-06-12):
   bigger mark + the positioning line + a contact line give the column real weight.
   Fixed basis + flexing cols keep the row side-by-side; wraps under 900px. */
.foot__brand{flex:0 0 clamp(220px,23vw,300px);max-width:300px;}
.foot__brand p{margin:20px 0 0;font-size:14.5px;font-weight:300;color:var(--ink-mut);line-height:1.55;text-wrap:pretty;}
.foot__mail{display:inline-block;margin-top:12px;font-size:14px;font-weight:500;color:var(--accent);}
.foot__mail:hover{text-decoration:underline;text-underline-offset:3px;}
@media(max-width:900px){.foot__top{flex-wrap:wrap;}.foot__brand{flex:0 0 100%;max-width:34ch;}}
.foot__cols{display:flex;flex:1;min-width:0;justify-content:flex-end;gap:clamp(24px,3.6vw,56px);flex-wrap:wrap;}
.foot__col h4{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 13px;}
.foot__col a{display:block;font-size:14px;font-weight:300;color:var(--ink-mut);padding:12px 0;transition:color .2s;}
.foot__col a:hover{color:var(--accent);}
.foot__base{margin-top:clamp(36px,5vh,64px);padding-top:22px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:300;color:var(--ink-faint);}

/* HERO with a live showcase unit (split: headline left, live creative right) */
.hero.hero--split{text-align:left;}
.hero--split .hero__grid{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4.5vw,68px);align-items:center;}
.hero--split .hero__inner{max-width:none;margin:0;padding:0;}
.hero.hero--split h1{font-size:clamp(34px,4.4vw,72px);line-height:0.92;}
.hero--split .hero__tag{font-size:clamp(17px,1.5vw,21px);max-width:40ch;}
.hero--split .crumb,.hero--split .eyebrow.center,.hero--split .hero__cta{justify-content:flex-start;}
.hero--split .hero__tag{margin-left:0;margin-right:0;}
.hero__ad{display:flex;justify-content:center;align-items:center;}
.hero__ad .adtile{flex:none;}
/* desktop: cap landscape units so the headline keeps its room */
@media(min-width:881px){
  .hero__ad .adtile.cv-w760,.hero__ad .adtile.cv-w880{--un:468;}
}
@media(max-width:880px){
  .hero.hero--split{text-align:center;}
  .hero--split .hero__grid{grid-template-columns:1fr;gap:clamp(26px,5vh,42px);justify-items:center;}
  .hero--split .crumb,.hero--split .eyebrow.center,.hero--split .hero__cta{justify-content:center;}
  .hero--split .hero__tag{margin-left:auto;margin-right:auto;}
}

/* ── .afact — the deliverable (pathwave): one premium dark report cover, assembled live.
   Greek bars only — no invented figures (content-integrity rules). ── */
.afactsec{padding-top:clamp(70px,10vh,130px);padding-bottom:clamp(70px,10vh,130px);}
.afact{text-align:center;}
.afact .eyebrow{justify-content:center;margin-bottom:16px;}
.afact h2{margin-bottom:18px;}
.afact__cap{margin-top:clamp(20px,3vh,30px);font-family:var(--font-mono,ui-monospace,monospace);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}


/* ============ RELATED TILES ============
   Colorful ptile-style cards for related/adjacent sections (user 2026-06-11:
   the black related cards on capability pages adopt the performance-strip
   gradient styling). Per-tile gradient via --tg, group name as the tag. */
.relts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
@media(max-width:560px){.relts{grid-template-columns:1fr 1fr;gap:10px;}}
.relt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(230px,24vw,320px);
  padding:clamp(16px,1.8vw,24px);border-radius:18px;overflow:hidden;color:#fff;
  background:var(--tg,linear-gradient(160deg,#7C3FE6,#E6177E));
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);}
.relt:hover{transform:translateY(-6px);box-shadow:0 26px 60px -26px rgba(0,0,0,.85);}
.relt__tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:8px;}
.relt h3{font-size:clamp(15.5px,1.45vw,22px);overflow-wrap:break-word;font-weight:800;letter-spacing:-0.02em;line-height:1.04;text-transform:uppercase;color:#fff;margin:0;text-wrap:balance;}
.relt__arr{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,12,.32);color:#fff;transition:transform .35s var(--ease);}
.relt__arr svg{width:14px;height:14px;}
.relt:hover .relt__arr{transform:translateX(3px);}

/* touch devices have no hover — drop the hover-to-play coaching line */
@media (hover:none){ .hovnote{display:none;} }