/* Services Hub · interactive service directory (v4, 2026-10-23). Replaces the What We Do grid/tiles/vignettes.
   Desktop: editorial list left, one large example "stage" right that follows the active service.
   Touch / ≤900px: compact list; + expands a service with its example, description and related services. */
.sh .sh-dir{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;margin-top:28px;--stage-h:460px}
.sh .sh-dir>*{grid-column:1;min-width:0}
.sh .sh-dir-group{margin-top:34px!important}
.sh .sh-dir-group:first-child{margin-top:0!important}
.sh .sh-dir-group>h3{display:flex;align-items:center;gap:14px;margin:0 0 6px;font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#E84274!important}
.sh .sh-dir-group>h3::after{content:"";flex:1;height:1px;background:#3a3a3f}
.sh .sh-dir-rows{list-style:none;margin:0;padding:0}
.sh .sh-dir-row{border-bottom:1px solid #333338;scroll-margin-top:160px}
.sh .sh-dir-head{display:flex;align-items:center;gap:12px}
.sh .sh-dir-head a{flex:1;display:flex;align-items:baseline;gap:14px;min-height:60px;padding:14px 0;color:#a9a7ad;text-decoration:none;transition:color .18s}
.sh .sh-dir-tag{flex:none;width:11.5em;font-size:10.5px;white-space:nowrap;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#76747b;transition:color .18s}
.sh .sh-dir-name{flex:1;font-size:clamp(20px,1.85vw,26px);line-height:1.15;letter-spacing:-.02em;font-weight:500}
.sh .sh-dir-head .pp-icon{flex:none;align-self:center;opacity:.5;transition:transform .18s,opacity .18s}
.sh .sh-dir-row.is-active .sh-dir-head a,.sh .sh-dir-head a:hover,.sh .sh-dir-head a:focus-visible{color:#fff}
.sh .sh-dir-row.is-active .sh-dir-tag{color:#ff6f9a}
.sh .sh-dir-row.is-active .pp-icon{opacity:1;transform:translate(2px,-2px)}
.sh #creative-digital .sh-dir-tag,.sh #additional-solutions .sh-dir-tag{display:none}
.sh .sh-dir-toggle{display:none}
.sh .sh-dir-copy{display:none;padding:0 0 18px}
.sh .sh-dir-row.is-active .sh-dir-copy{display:block}
@media(min-width:1101px){.sh .sh-dir-copy{padding-left:calc(11.5em * 10.5 / 16 + 14px)}.sh #creative-digital .sh-dir-copy,.sh #additional-solutions .sh-dir-copy{padding-left:0}}
.sh .sh-dir-copy p{margin:0;font-size:16px;line-height:1.55;color:#c9c7c2;max-width:44ch}
.sh .sh-dir-works{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px!important}
.sh .sh-dir-works span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#76747b;margin-right:4px}
.sh .sh-dir-works button{font:inherit;font-size:13px;padding:5px 11px;border-radius:99px;border:1px solid #4a4a50;background:transparent;color:#e4e3e6;cursor:pointer;transition:border-color .18s,color .18s}
.sh .sh-dir-works button:hover{border-color:#E84274;color:#fff}
.sh .sh-dir-works button:focus-visible{outline:2px solid #E84274;outline-offset:2px}
.sh .sh-dir-note{margin:18px 0 0;font-size:12.5px;color:#76747b}

/* the stage (desktop): every visual sits in the right column; only the active one shows */
.sh .sh-dir-panel{display:contents}
.sh .sh-dir-visual{margin:0;position:absolute;top:var(--stage-y,0px);right:0;left:calc((100% - 56px) * .5 + 56px);height:var(--stage-h);border-radius:22px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .25s var(--ease,ease),top .35s var(--ease,ease),visibility 0s .25s}
.sh .sh-dir-row.is-active .sh-dir-visual{opacity:1;visibility:visible;transition:opacity .25s var(--ease,ease),top .35s var(--ease,ease)}
.sh .dx-example{position:absolute;left:16px;top:14px;z-index:5;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(23,23,27,.78);color:#fff}

/* ---------- scenes ---------- */
.sh .dx{position:absolute;inset:0;display:grid;place-items:center;color:#17171b;font-size:14px;line-height:1.3}
.sh .dx img{display:block;width:100%;height:100%;object-fit:cover}
.sh .dx s{display:block;height:7px;width:var(--w);border-radius:4px;background:#ddd6cb;margin:6px 0;text-decoration:none}
.sh .dx-ava{display:inline-block;width:26px;height:26px;border-radius:50%;background:#E84274;box-shadow:0 0 0 2px #fff}
.sh .dx-stars{color:#F59700;font-size:22px;letter-spacing:3px}
/* search */
.sh .dx-search{background:#fbe1e8}
.sh .dx-search .dx-card{width:min(82%,420px);background:#fff;border-radius:18px;padding:16px;box-shadow:0 30px 60px -30px rgba(120,20,60,.45)}
.sh .dx-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:99px;background:#f4f2ed;color:#55555a;margin-bottom:10px}
.sh .dx-bar u{width:12px;height:12px;border:2px solid #8f8d93;border-radius:50%;text-decoration:none}
.sh .dx-res{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.sh .dx-res>span{flex:1;display:grid}
.sh .dx-res small{color:#6e6c66;font-size:12.5px}
.sh .dx-res em{font-style:normal;font-weight:700;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ddd6cb;color:#fff;font-size:12px;flex:none}
.sh .dx-res.is-top{background:#fff7f9;box-shadow:inset 0 0 0 2px #E84274}
.sh .dx-res.is-top em{background:#E84274}
.sh .dx-res i{font-style:normal;font-size:12px;font-weight:700;color:#1d7a46}
.sh .dx-pin{position:absolute;right:12%;top:16%;width:46px;height:46px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#E84274;box-shadow:0 14px 24px -10px rgba(120,20,60,.6)}
.sh .dx-pin::after{content:"";position:absolute;inset:14px;border-radius:50%;background:#fff}
/* social */
.sh .dx-social{background:#ffe2b8}
.sh .dx-phone{position:relative;z-index:2;width:220px;height:390px;border-radius:30px;background:#fff;border:8px solid #17171b;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px -28px rgba(80,40,0,.55)}
.sh .dx-phone.is-back{position:absolute;z-index:1;width:190px;height:330px;transform:translate(130px,20px) rotate(7deg);opacity:.95}
.sh .dx-post-head{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;font-size:13px}
.sh .dx-post-img{flex:1;min-height:0}
.sh .dx-post-foot{display:flex;align-items:center;gap:10px;padding:10px 12px 14px}
.sh .dx-post-foot s{flex:1}
.sh .dx-heart{color:#E84274;font-size:22px}
.sh .dx-save{font-size:16px;color:#17171b}
/* paid */
.sh .dx-paid{background:#f4efe6}
.sh .dx-ad{width:min(78%,400px);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(23,23,27,.5)}
.sh .dx-ad-img{height:190px!important}
.sh .dx-ad-body{display:grid;gap:8px;padding:16px 18px 18px}
.sh .dx-sponsored{font-size:12px;color:#6e6c66}
.sh .dx-ad-body b{font-size:20px;letter-spacing:-.01em}
.sh .dx-cta{justify-self:start;margin-top:4px;padding:9px 16px;border-radius:99px;background:#F26B3A;color:#fff;font-weight:700;font-size:13px}
/* creators */
.sh .dx-creators{background:#e4dfff}
.sh .dx-reel{position:relative;z-index:2;width:230px;height:400px;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(40,20,120,.55)}
.sh .dx-reel.is-small{position:absolute;z-index:1;width:170px;height:300px;transform:translate(-150px,30px) rotate(-6deg);opacity:.9}
.sh .dx-play{position:absolute;left:50%;top:44%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:16px}
.sh .dx-reel-foot{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:30px 14px 14px;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);color:#fff}
.sh .dx-reel-foot .dx-ava{grid-row:1/span 2;background:#6C5CFF}
.sh .dx-reel-foot small{opacity:.8}
/* reviews */
.sh .dx-reviews{background:#fff1b8}
.sh .dx-review{width:min(80%,420px);background:#fff;border-radius:18px;padding:24px;box-shadow:0 30px 60px -30px rgba(120,90,0,.45);display:grid;gap:12px}
.sh .dx-review p{margin:0;font-size:19px;line-height:1.35;letter-spacing:-.01em;color:#17171b}
.sh .dx-reply{display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:#f4f2ed;font-size:13px}
.sh .dx-reply b{color:#1d7a46}
/* plan */
.sh .dx-plan{background:#e7efe9}
.sh .dx-board{width:min(84%,440px);background:#fff;border-radius:18px;padding:20px;box-shadow:0 30px 60px -30px rgba(20,60,40,.4)}
.sh .dx-board-k{display:block;margin-bottom:12px;font-size:16px}
.sh .dx-weeks{display:grid;grid-template-columns:repeat(4,1fr);font-size:12px;color:#6e6c66;border-bottom:1px solid #ebe6dd;padding-bottom:8px;margin-bottom:10px}
.sh .dx-lane{position:relative;height:34px;margin:6px 0}
.sh .dx-lane i{position:absolute;top:0;bottom:0;left:calc(var(--s) * 25%);width:calc((var(--e) - var(--s)) * 25% - 6px);border-radius:8px;background:#F59700;color:#17171b;font-style:normal;font-size:12px;font-weight:700;display:flex;align-items:center;padding:0 10px;white-space:nowrap}
.sh .dx-lane i.is-pink{background:#E84274;color:#fff}
.sh .dx-lane i.is-orange{background:#6C5CFF;color:#fff}
.sh .dx-lane i.is-ink{background:#17171b;color:#fff}
.sh .dx-lane i{white-space:normal;line-height:1.1;padding-inline:4px}
/* creative: real concept work, full bleed */
.sh .dx-shot{display:block;background:#2b2b2e}
.sh .dx-shot--brand img{object-position:0 30%;transform:scale(1.35);transform-origin:0 35%}
.sh .dx-shot--web{display:flex;flex-direction:column;background:#fff}
.sh .dx-chrome{display:flex;gap:6px;align-items:center;height:28px;padding:0 14px;background:#ece8e1}
.sh .dx-chrome i{width:9px;height:9px;border-radius:50%;background:#c9c3b9}
.sh .dx-shot--web img{flex:1;min-height:0;object-position:0 0}
/* sms */
.sh .dx-sms{background:#fbe1e8}
.sh .dx-phone.is-sms{padding:20px 14px;gap:10px;justify-content:center;background:#fbfaf7}
.sh .dx-sms-k{text-align:center;font-size:13px;color:#6e6c66;margin-bottom:6px}
.sh .dx-msg{align-self:flex-start;max-width:82%;padding:10px 13px;border-radius:16px 16px 16px 5px;background:#ebe6dd;font-size:13.5px}
.sh .dx-msg.is-me{align-self:flex-end;border-radius:16px 16px 5px 16px;background:#E84274;color:#fff}
/* press */
.sh .dx-press{background:#e9e4da}
.sh .dx-paper{width:min(82%,430px);background:#fffdf7;padding:20px 22px 24px;box-shadow:0 30px 60px -30px rgba(23,23,27,.45);transform:rotate(-1.5deg)}
.sh .dx-mast{display:block;font-size:22px;letter-spacing:-.02em;border-bottom:3px double #17171b;padding-bottom:8px;margin-bottom:14px}
.sh .dx-story{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:start}
.sh .dx-story-img{height:110px!important;border-radius:4px}
.sh .dx-story b{display:block;font-size:17px;line-height:1.2;margin-bottom:6px}

/* ---------- touch / narrow: compact list with + to expand ---------- */
@media(max-width:1100px){
  .sh .sh-dir{display:block}
  .sh .sh-dir-head a{color:#fff;min-height:56px}
  .sh .sh-dir-tag{width:auto;order:-1;display:block;font-size:10.5px;color:#ff6f9a}
  .sh .sh-dir-head a{flex-direction:column;align-items:flex-start;gap:2px}
  .sh .sh-dir-head .pp-icon{display:none}
  .sh .sh-dir-toggle{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #4a4a50;background:transparent;color:#fff;cursor:pointer}
  .sh .sh-dir-toggle::before{content:"+";font-size:20px;line-height:1;transition:transform .2s}
  .sh .sh-dir-toggle[aria-expanded=true]::before{transform:rotate(45deg)}
  .sh .sh-dir-panel{display:none;padding-bottom:18px}
  .sh .sh-dir-row.is-open .sh-dir-panel{display:block}
  .sh .sh-dir-row .sh-dir-copy{display:block;padding:14px 0 0}
  .sh .sh-dir-visual{position:relative;top:auto;left:auto;right:auto;height:300px;opacity:1;visibility:visible;border-radius:16px}
  .sh .dx-phone{transform:scale(.72)}.sh .dx-phone.is-back{display:none}
  .sh .dx-reel{transform:scale(.7)}.sh .dx-reel.is-small{display:none}
  /* Keep the approved calendar label readable inside narrow week columns. */
  .sh .dx-board{width:92%;padding:12px}
  .sh .dx-lane i{white-space:normal;line-height:1.1;padding-inline:4px;overflow-wrap:normal}
}
/* Same stage coordinates/timing without animating layout on every frame. */
@media(min-width:1101px){
  .sh .sh-dir-visual{top:0;transform:translateY(var(--stage-y,0px));transition:opacity .25s var(--ease,ease),transform .35s var(--ease,ease),visibility 0s .25s}
  .sh .sh-dir-row.is-active .sh-dir-visual{transition:opacity .25s var(--ease,ease),transform .35s var(--ease,ease)}
}
@media(prefers-reduced-motion:reduce){.sh .sh-dir-visual,.sh .sh-dir-head a,.sh .sh-dir-head .pp-icon{transition:none}}

.sh .sh-dir [data-pp-icon="arrow-down"]{display:none}