/* #thinking: the homepage, the partner piece, the carousel and the whitepaper. */
/* ---------- 4. thought leadership ---------- */
.js .tpf{visibility:hidden}
.pc-h i{background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-size:100% 100%;background-position:0 0}
.tpc .fview{background:#fff}
.tpc-st{position:absolute;inset:0}
.tps{position:absolute;inset:0;overflow:hidden;background:#fff}
.tps.pre{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:26px clamp(58px,6vw,84px) 62px}
.tps .exi{flex:1;min-height:0;position:relative;background:var(--soft)}
.tps .exi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tps .ext{flex:none;padding-top:18px}
.tps .who{display:block;font:500 14px var(--sans);color:var(--grey)}
.tps .who b{color:var(--red);font-weight:650}
.tps h3{margin:8px 0 0;font:700 clamp(21px,2vw,30px)/1.2 var(--disp);letter-spacing:-.01em;max-width:28em}
.tps .go{display:inline-block;margin-top:12px;font:600 15px var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tps.pre:hover .go{color:var(--red)}
.tpc-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 14px 10px 22px;border-top:1px solid var(--line);background:#FAF9F6}
.tpc-bar .lab{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 15px/1.2 var(--sans);color:var(--ink)}
.tpc-ctl{flex:none;display:flex;align-items:center;gap:10px;font:500 14px/1 var(--sans);color:var(--grey);font-variant-numeric:tabular-nums}
.tpc-ctl .segs{display:flex;gap:4px;margin-right:4px}
.tpc-ctl .segs i{display:block;width:clamp(12px,1.5vw,22px);height:3px;border-radius:2px;background:var(--line2);transition:background .3s}
.tpc-ctl .segs i.on{background:var(--red)}
.tpc-ctl .cn2{min-width:3.4em;margin-right:4px;white-space:nowrap}
.tpc-ctl .cn2 b{color:var(--ink);font-weight:650}
.tpc-b{all:unset;box-sizing:border-box;flex:none;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .18s var(--e),box-shadow .18s var(--e)}
.tpc-b:hover{color:var(--red);box-shadow:0 0 0 1px var(--red)}
.tpc-b:focus-visible,.tpc-go:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.tpc:not(.used) .tpc-b.prev{display:none}
.tpc-go{all:unset;box-sizing:border-box;flex:none;display:flex;align-items:center;height:42px;padding:0 13px 0 20px;border-radius:21px;background:var(--ink);color:#fff;font:600 14.5px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:padding .45s var(--e),color .18s var(--e),background .18s var(--e),box-shadow .3s var(--e)}
.tpc-go .t{display:block;max-width:360px;overflow:hidden;margin-right:12px;transition:max-width .45s var(--e),margin .45s var(--e),opacity .3s}
.tpc-go svg{flex:none}
.tpc-go:hover{background:var(--red)}
.tpc.used .tpc-go{padding:0;width:42px;justify-content:center;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line2)}
.tpc.used .tpc-go .t{max-width:0;margin-right:0;opacity:0}
.tpc.used .tpc-go:hover{color:var(--red);box-shadow:0 0 0 1px var(--red)}
#thinking .specs{margin-top:16px}
#thinking .specs li{padding:10px 0}
#thinking .grp{margin-bottom:12px}
@media (min-width:960px) and (max-height:730px){#thinking .lede{font-size:15.5px;line-height:1.5}}
@media (max-width:959px){
  #thinking .sc-stage{height:min(150vw,640px);margin-bottom:70px}
  .tps.pre{padding:18px 20px 22px}
  .tpc-bar{padding:8px 10px 8px 16px}
  .tpc-ctl .segs,.tpc-go .t{display:none}
  .tpc-go{padding:0;width:42px;justify-content:center}
}

/* thought leadership. The first screen is the homepage with the client's piece on it; the whitepaper is the page itself in a frame */
.tph .fview{background:#fff}
.hml-yours{cursor:pointer}
.hml-yours:focus-visible{outline:4px solid var(--ink);outline-offset:6px}
.hml-yours:hover .hml-click{background:var(--red)}
.wpf2 .fview{background:#fff}
#thinking .wp-rd{margin:16px 0 0}
#thinking .wp-rd .tl{font-size:15px}
#thinking.t-intro .grp-h{visibility:hidden}
@media (max-width:959px){
  .hml-click{transform:translate(-50%,-50%) scale(1.5)}
}

/* touch: the carousel's swipe is the script's, so the browser keeps only the vertical pan; the buttons are 44x44; the whitepaper link has a 44 tall hit area that takes no room */
@media (pointer:coarse){
  .tpc{touch-action:pan-y}
  .tpc-b{width:44px;height:44px}
  .tpc-go{height:44px;border-radius:22px}
  .tpc.used .tpc-go{width:44px}
  #thinking .wp-rd .tl{display:inline-block;padding:13px 0;margin:-13px 0}
}
@media (pointer:coarse) and (max-width:959px){.tpc-go{width:44px}}