/* Project One & Co. — Services v47
   Counter-scrolling split-column service machine inspired by the supplied reference,
   rebuilt for 13 Project One services and the existing P1 visual system. */

:root{--svc-paper:#f3f0e7;--svc-ink:#0b0b0d;--svc-red:#ef3a31;--svc-wine:#4c0710;--svc-line:rgba(244,242,235,.13);--svc-ease:cubic-bezier(.83,0,.17,1)}
html,body{background:var(--svc-ink)}
.services-page{overflow-x:hidden;background:var(--svc-ink);color:var(--svc-paper)}
.services-main{position:relative;z-index:1}

/* ---------- HERO / CLIENT REQUEST INBOX ---------- */
.services-chat-hero{
  position:relative;
  height:250svh;
  overflow:clip;
  color:var(--svc-paper);
  background:#08080a;
}
.services-chat-pin{
  position:sticky;
  top:0;
  width:100%;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#08080a;
}
.services-chat-pin>.services-hero-grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(rgba(244,242,235,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,242,235,.045) 1px,transparent 1px);
  background-size:12.5vw 12.5vw;
  mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 92%,transparent);
}
.services-chat-glow{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 20%,rgba(93,8,18,.58),transparent 28%),
    radial-gradient(circle at 22% 72%,rgba(239,58,49,.07),transparent 26%);
}
.services-chat-meta{
  position:absolute;
  z-index:14;
  top:28px;
  left:clamp(20px,4vw,72px);
  right:clamp(20px,4vw,72px);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(244,242,235,.13);
  color:rgba(244,242,235,.45);
  font-size:8px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  pointer-events:none;
}
.services-chat-world{
  position:absolute;
  inset:0;
  z-index:6;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
}
.services-chat-world::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.13) 58%,rgba(0,0,0,.52));
}
.services-request-bubble{
  position:absolute;
  left:var(--bx);
  top:var(--by);
  z-index:4;
  width:min(var(--bw),36vw);
  transform:rotate(var(--brot));
  transform-origin:center;
  will-change:transform,opacity;
}
.services-request-bubble-inner{
  position:relative;
  padding:13px 16px 14px;
  color:#141417;
  background:#f1efe8;
  border:1px solid rgba(255,255,255,.35);
  border-radius:23px 23px 23px 7px;
  box-shadow:
    0 16px 50px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.7);
  animation:svcBubbleFloat 5.4s ease-in-out infinite;
  animation-delay:var(--float-delay);
}
.request-right .services-request-bubble-inner{
  color:#f7f4ed;
  background:#3c0710;
  border-color:rgba(239,58,49,.24);
  border-radius:23px 23px 7px 23px;
}
.services-request-bubble-inner::after{
  content:"";
  position:absolute;
  left:8px;
  bottom:-5px;
  width:15px;
  height:12px;
  background:inherit;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.request-right .services-request-bubble-inner::after{
  left:auto;
  right:8px;
  transform:scaleX(-1);
}
.services-request-bubble small{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:5px;
  color:rgba(20,20,23,.42);
  font-size:6px;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1;
  text-transform:uppercase;
}
.request-right .services-request-bubble small{color:rgba(247,244,237,.42)}
.services-request-bubble p{
  margin:0;
  font-size:clamp(13px,1.15vw,18px);
  font-weight:650;
  line-height:1.2;
  letter-spacing:-.025em;
}
@keyframes svcBubbleFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(.2deg)}
  45%{transform:translate3d(0,-9px,0) rotate(-.4deg)}
  72%{transform:translate3d(5px,-4px,0) rotate(.5deg)}
}

/* P1 answer. Appears only after the client messages hit the floor. */
.services-reply-wrap{
  position:absolute;
  z-index:11;
  left:50%;
  top:46%;
  width:min(760px,72vw);
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px 14px;
  align-items:end;
  transform:translate(-50%,-50%) scale(.92);
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.services-reply-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(244,242,235,.17);
  border-radius:50%;
  background:#0b0b0d;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.services-reply-avatar img{
  width:25px;
  height:25px;
  filter:brightness(0) invert(1);
}
.services-reply-bubble{
  position:relative;
  min-height:74px;
  display:flex;
  align-items:center;
  padding:18px 24px;
  overflow:hidden;
  color:#111114;
  background:#f3f0e7;
  border:1px solid rgba(255,255,255,.55);
  border-radius:30px 30px 30px 9px;
  box-shadow:0 26px 80px rgba(0,0,0,.33);
}
.services-reply-bubble::after{
  content:"";
  position:absolute;
  left:11px;
  bottom:-1px;
  width:20px;
  height:15px;
  background:#f3f0e7;
  clip-path:polygon(0 0,100% 0,0 100%);
  transform:translateY(7px);
}
.services-typing{
  display:flex;
  gap:6px;
  align-items:center;
  height:22px;
}
.services-typing i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(17,17,20,.36);
  animation:svcTypingDot .9s ease-in-out infinite alternate;
}
.services-typing i:nth-child(2){animation-delay:.15s}
.services-typing i:nth-child(3){animation-delay:.3s}
@keyframes svcTypingDot{to{transform:translateY(-5px);background:var(--svc-red)}}
.services-reply-text{
  margin:0;
  max-width:100%;
  font-size:clamp(30px,4vw,64px);
  font-weight:850;
  line-height:.94;
  letter-spacing:-.055em;
}
.services-type-caret{
  display:none;
  width:2px;
  height:1em;
  margin-left:4px;
  background:var(--svc-red);
  animation:svcCaret .62s steps(1,end) infinite;
}
@keyframes svcCaret{50%{opacity:0}}
.services-reply-wrap>small{
  grid-column:2;
  color:rgba(244,242,235,.39);
  font-size:7px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* The "floor" is real: dropped bubbles remain piled here through the reply. */
.services-chat-floor{
  position:absolute;
  z-index:2;
  left:clamp(20px,4vw,72px);
  right:clamp(20px,4vw,72px);
  bottom:4.8vh;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  color:rgba(244,242,235,.30);
  font-size:7px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  pointer-events:none;
}
.services-chat-floor i{
  height:1px;
  background:linear-gradient(90deg,rgba(244,242,235,.10),rgba(239,58,49,.46),rgba(244,242,235,.10));
}
.services-chat-instruction{
  position:absolute;
  left:50%;
  bottom:22px;
  z-index:15;
  width:max-content;
  margin:0;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(244,242,235,.38);
  font-size:7px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:none;
}
.services-chat-instruction i{
  width:66px;
  height:1px;
  overflow:hidden;
  background:rgba(244,242,235,.12);
}
.services-chat-instruction i::after{
  content:"";
  display:block;
  width:21px;
  height:1px;
  background:var(--svc-red);
  animation:svcScrollLine 1.2s ease-in-out infinite alternate;
}
@keyframes svcScrollLine{to{transform:translateX(45px)}}

/* This line becomes the exact split seam for the service machine below. */
.services-chat-pin>.services-hero-seam{
  position:absolute;
  top:0;
  bottom:0;
  z-index:13;
  left:50%;
  width:1px;
  height:100%;
  background:linear-gradient(transparent,rgba(239,58,49,.78) 16%,rgba(239,58,49,.78) 86%,transparent);
  transform:scaleY(0);
  transform-origin:center;
  pointer-events:none;
}

@media(max-width:1100px){
  .services-request-bubble{width:min(var(--bw),41vw)}
  .services-request-bubble p{font-size:13px}
}
@media(max-width:820px){
  .services-chat-hero{height:205svh}
  .services-chat-meta{top:92px;left:18px;right:18px}
  .services-chat-meta span:last-child{display:none}
  .services-request-bubble{width:min(var(--bw),60vw)}
  .services-request-bubble:nth-of-type(3n){display:none}
  .services-request-bubble p{font-size:12px}
  .services-request-bubble small{font-size:5px}
  .services-request-bubble-inner{padding:11px 13px 12px;border-radius:19px 19px 19px 6px}
  .request-right .services-request-bubble-inner{border-radius:19px 19px 6px 19px}
  .services-reply-wrap{
    top:44%;
    width:calc(100vw - 36px);
    grid-template-columns:38px minmax(0,1fr);
  }
  .services-reply-avatar{width:38px;height:38px}
  .services-reply-avatar img{width:21px;height:21px}
  .services-reply-bubble{min-height:62px;padding:15px 17px;border-radius:24px 24px 24px 8px}
  .services-reply-text{font-size:clamp(25px,8.2vw,46px)}
  .services-chat-floor{left:18px;right:18px;bottom:3.5vh}
  .services-chat-floor span:first-child{display:none}
  .services-chat-instruction span:last-child{display:none}
}

@media(prefers-reduced-motion:reduce){
  .services-request-bubble-inner,
  .services-typing i,
  .services-chat-instruction i::after,
  .services-type-caret{animation:none!important}
}

/* ---------- MACHINE ---------- */
.svc-machine{position:relative;background:#09090b;color:var(--svc-paper)}
.svc-stage{position:relative;height:100svh;overflow:hidden;background:#09090b;outline:none}
.svc-desktop{position:absolute;inset:0;overflow:hidden}
.svc-col{position:absolute;top:0;height:100%;width:calc(50% + 1px);overflow:hidden}
.svc-col.-l{left:0}.svc-col.-r{left:calc(50% - 1px)}
.svc-track{position:absolute;top:0;left:0;width:100%;will-change:transform}
.svc-cell{position:relative;overflow:hidden}
.svc-full{position:absolute;inset:0 auto auto 0;height:100%;width:100vw;display:block;overflow:hidden;background:#0a0a0c}
.svc-col.-r .svc-full{transform:translateX(calc(-50% + 1px))}

/* Full composition. Every half clips this exact 100vw scene. */
.svc-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 75% 22%,rgba(108,9,20,.42),transparent 30%),#0a0a0c}
.svc-scene::before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(rgba(244,242,235,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,235,.038) 1px,transparent 1px);background-size:12.5vw 12.5vw}
.svc-scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 18%,transparent 82%,rgba(0,0,0,.32)),radial-gradient(circle at 50% 52%,rgba(0,0,0,.52),transparent 28%),linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.18))}
.svc-scene-no{position:absolute;left:4vw;top:16vh;z-index:5;font-size:clamp(82px,12vw,190px);font-weight:900;line-height:.7;letter-spacing:-.08em;color:rgba(244,242,235,.04)}
.svc-scene-category{position:absolute;right:4vw;top:18vh;z-index:5;font-size:8px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--svc-red)}
.svc-scene-title{position:absolute;left:50%;top:51%;z-index:8;width:min(76vw,1240px);transform:translate(-50%,-50%);text-align:center;font-size:clamp(58px,8.8vw,136px);font-weight:900;line-height:.78;letter-spacing:-.072em;text-transform:uppercase;text-wrap:balance;pointer-events:none;filter:drop-shadow(0 12px 30px rgba(0,0,0,.38))}
.svc-scene-title span{display:block;width:fit-content;max-width:100%;margin:0 auto;padding:.04em .14em .08em;border:1px solid rgba(244,242,235,.08);background:linear-gradient(180deg,rgba(7,7,10,.76),rgba(7,7,10,.52));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.svc-scene-title span+span{margin-top:-.04em}
.svc-scene-title span:nth-child(2){font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.05em;text-transform:none;background:linear-gradient(180deg,rgba(7,7,10,.66),rgba(7,7,10,.44));padding:.02em .16em .09em}
.svc-scene-tag{position:absolute;left:4vw;bottom:5vh;z-index:9;max-width:42vw;font-size:8px;font-weight:800;letter-spacing:.17em;line-height:1.45;text-transform:uppercase;color:rgba(244,242,235,.62);text-shadow:0 4px 14px rgba(0,0,0,.35)}
.svc-scene-note{position:absolute;right:4vw;bottom:5vh;z-index:9;max-width:31vw;text-align:right;font-size:9px;font-weight:700;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,242,235,.7);text-shadow:0 4px 14px rgba(0,0,0,.35)}
.svc-media{position:absolute;z-index:1;overflow:hidden;border:1px solid rgba(244,242,235,.13);background:#151519;box-shadow:0 35px 100px rgba(0,0,0,.35)}
.svc-media img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.88) contrast(1.03);transform:scale(1.04);transition:transform 1.4s var(--svc-ease),filter .5s ease}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.22));pointer-events:none}
.svc-media-a{left:4vw;top:23vh;width:28vw;height:44vh;transform:rotate(-2deg)}
.svc-media-b{right:4vw;top:50vh;width:28vw;height:30vh;transform:rotate(2deg)}
.svc-full:hover .svc-media img{transform:scale(1);filter:saturate(1.06) contrast(1.02)}
.svc-scene-title span:first-child{position:relative;z-index:2}
.svc-scene-title span:nth-child(2){position:relative;z-index:1}
.svc-scene.layout-b .svc-scene-title,.svc-scene.layout-c .svc-scene-title{width:min(80vw,1260px)}
.svc-scene.layout-b .svc-scene-title span:first-child,.svc-scene.layout-c .svc-scene-title span:first-child{padding-left:.16em;padding-right:.16em}
.svc-scene.layout-c .svc-media-a::before,.svc-scene.layout-c .svc-media-b::before,.svc-scene.layout-b .svc-media-a::before,.svc-scene.layout-b .svc-media-b::before,.svc-scene.layout-a .svc-media-a::before,.svc-scene.layout-a .svc-media-b::before,.svc-scene.layout-d .svc-media-a::before,.svc-scene.layout-d .svc-media-b::before,.svc-scene.layout-wild .svc-media-a::before,.svc-scene.layout-wild .svc-media-b::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.26));pointer-events:none}

/* Four art-direction variants prevent thirteen identical slides. */
.svc-scene.layout-b .svc-media-a{left:6vw;top:50vh;width:25vw;height:29vh;transform:rotate(1deg)}
.svc-scene.layout-b .svc-media-b{right:4vw;top:18vh;width:29vw;height:42vh;transform:rotate(-2.4deg)}
.svc-scene.layout-b .svc-scene-no{left:auto;right:7vw;top:63vh}
.svc-scene.layout-c .svc-media-a{left:3vw;top:17vh;width:32vw;height:27vh;transform:rotate(-1deg)}
.svc-scene.layout-c .svc-media-b{right:4vw;top:60vh;width:34vw;height:24vh;transform:rotate(1deg)}
.svc-scene.layout-c .svc-scene-title{top:51%}
.svc-scene.layout-d .svc-media-a{left:6vw;top:29vh;width:23vw;height:49vh;transform:rotate(-3deg)}
.svc-scene.layout-d .svc-media-b{right:6vw;top:20vh;width:23vw;height:49vh;transform:rotate(3deg)}
.svc-scene.layout-d .svc-scene-title{width:min(68vw,1080px)}
.svc-scene.layout-wild .svc-media-a{left:2vw;top:14vh;width:31vw;height:56vh;transform:rotate(-5deg)}
.svc-scene.layout-wild .svc-media-b{right:2vw;top:28vh;width:32vw;height:54vh;transform:rotate(6deg)}
.svc-scene.layout-wild .svc-scene-title{transform:translate(-50%,-50%) rotate(-1deg)}
.svc-scene.layout-wild .svc-scene-title span:first-child{border-color:rgba(239,58,49,.28);color:var(--svc-red)}
.svc-scene.layout-wild .svc-scene-title span:nth-child(2){color:var(--svc-paper)}

.svc-seam{position:absolute;z-index:40;left:50%;top:0;bottom:0;width:1px;background:rgba(239,58,49,.62);pointer-events:none;box-shadow:0 0 30px rgba(239,58,49,.18)}
.svc-seam i{position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);background:var(--svc-red)}
.svc-stage-overlay{position:absolute;inset:0;z-index:50;pointer-events:none}
.svc-stage-top{position:absolute;top:106px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,235,.62)}
.svc-stage-top>span:first-child{color:var(--svc-red)}
.svc-stage-top b{color:var(--svc-paper)}
.svc-stage-side{position:absolute;right:24px;top:50%;display:flex;gap:28px;transform:translate(50%,-50%) rotate(90deg);transform-origin:center;font-size:7px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,242,235,.3)}
.svc-stage-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(244,242,235,.08)}
.svc-stage-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--svc-red)}
.svc-mobile{display:none}

/* ---------- OUTRO ---------- */
.services-outro{min-height:115svh;padding:90px clamp(20px,4vw,72px) 44px;background:var(--svc-paper);color:#111}
.services-outro-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid rgba(17,17,17,.2);font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.services-outro-copy{min-height:73svh;display:flex;flex-direction:column;justify-content:center}
.services-outro-copy p{margin:0;font-size:clamp(42px,5.5vw,86px);font-family:Georgia,"Times New Roman",serif;font-style:italic;line-height:.92;color:var(--svc-wine)}
.services-outro-copy h2{margin:16px 0 0;font-size:clamp(72px,11.5vw,184px);font-weight:900;line-height:.72;letter-spacing:-.085em;text-transform:uppercase}
.services-outro-copy h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;text-transform:none;color:var(--svc-red)}
.services-outro-actions{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-top:22px;border-top:1px solid rgba(17,17,17,.2)}
.services-outro-actions p{margin:0;max-width:410px;font-size:13px;line-height:1.45;color:rgba(17,17,17,.56)}
.services-outro-actions a{min-width:min(420px,46vw);display:flex;justify-content:space-between;align-items:center;padding:18px;border:1px solid #111;color:#111;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;transition:background .28s ease,color .28s ease}
.services-outro-actions a:hover{background:#111;color:var(--svc-paper)}

@media(max-width:820px){
  
  .svc-stage{display:none}.svc-mobile{display:block;padding:16px;background:#09090b}
  .svc-mobile-card{position:relative;min-height:82svh;margin-bottom:16px;overflow:hidden;border:1px solid rgba(244,242,235,.12);background:#0d0d10}
  .svc-mobile-images{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;opacity:.6}
  .svc-mobile-images figure{margin:0;overflow:hidden}.svc-mobile-images img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) brightness(.54)}
  .svc-mobile-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,10,.96) 0,rgba(8,8,10,.32) 58%,rgba(8,8,10,.18))}
  .svc-mobile-ui{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px}
  .svc-mobile-top{display:flex;justify-content:space-between;font-size:8px;font-weight:800;letter-spacing:.17em;text-transform:uppercase}.svc-mobile-top span:first-child{color:var(--svc-red)}
  .svc-mobile-copy h2{margin:0 0 16px;font-size:clamp(46px,13vw,74px);line-height:.82;letter-spacing:-.065em;text-transform:uppercase}.svc-mobile-copy h2 span{display:block;width:fit-content;max-width:100%;padding:.03em .12em .08em;background:rgba(7,7,10,.58);border:1px solid rgba(244,242,235,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.svc-mobile-copy h2 span:last-child{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;text-transform:none}
  .svc-mobile-copy p{margin:0 0 10px;font-size:8px;font-weight:800;letter-spacing:.14em;line-height:1.45;text-transform:uppercase;color:rgba(244,242,235,.58)}
  .svc-mobile-copy small{font-size:10px;line-height:1.45;color:rgba(244,242,235,.48)}
  .services-outro{min-height:100svh;padding:64px 18px 30px}.services-outro-top{display:grid;gap:8px}.services-outro-copy{min-height:66svh}.services-outro-copy h2{font-size:clamp(58px,17vw,104px)}.services-outro-actions{display:grid}.services-outro-actions a{min-width:0;width:100%}
}

@media(prefers-reduced-motion:reduce){.svc-media img{transition:none!important}.svc-stage{display:none}.svc-mobile{display:block}}


/* =========================================================
   v49 — MORE "CUSTOM EXPERIENCES" ENERGY
   Stronger readable title compositions on selected services.
   ========================================================= */

/* Base: make the title blocks feel intentional, not like safety patches. */
.svc-scene-title span {
  border-color: rgba(244,242,235,.10);
}

.svc-scene-title span:nth-child(2) {
  border-color: rgba(244,242,235,.06);
}

/* Selected services get the bold red headline slab treatment. */
[data-service="social"] .svc-scene-title span:first-child,
[data-service="brand"] .svc-scene-title span:first-child,
[data-service="paid"] .svc-scene-title span:first-child,
[data-service="web"] .svc-scene-title span:first-child,
[data-service="planning"] .svc-scene-title span:first-child,
[data-service="launch"] .svc-scene-title span:first-child,
[data-service="custom"] .svc-scene-title span:first-child,
[data-service="venue"] .svc-scene-title span:first-child {
  color: #ff3b30;
  background: rgba(8,8,10,.84);
  border: 1px solid rgba(255,59,48,.34);
  box-shadow:
    0 20px 50px rgba(0,0,0,.30),
    inset 3px 0 0 #ff3b30;
}

/* Make those first lines a little more monumental but still readable. */
[data-service="social"] .svc-scene-title,
[data-service="brand"] .svc-scene-title,
[data-service="paid"] .svc-scene-title,
[data-service="web"] .svc-scene-title,
[data-service="planning"] .svc-scene-title,
[data-service="launch"] .svc-scene-title,
[data-service="custom"] .svc-scene-title,
[data-service="venue"] .svc-scene-title {
  font-size: clamp(56px,8.4vw,132px);
}

/* Second line becomes the clean editorial release underneath. */
[data-service="social"] .svc-scene-title span:nth-child(2),
[data-service="brand"] .svc-scene-title span:nth-child(2),
[data-service="paid"] .svc-scene-title span:nth-child(2),
[data-service="web"] .svc-scene-title span:nth-child(2),
[data-service="planning"] .svc-scene-title span:nth-child(2),
[data-service="launch"] .svc-scene-title span:nth-child(2),
[data-service="custom"] .svc-scene-title span:nth-child(2),
[data-service="venue"] .svc-scene-title span:nth-child(2) {
  color: var(--svc-paper);
  background: rgba(8,8,10,.58);
  border: 1px solid rgba(244,242,235,.08);
}

/* Alternate services keep the clean white treatment, but with a clearer hierarchy. */
[data-service="content"] .svc-scene-title span:first-child,
[data-service="influencer"] .svc-scene-title span:first-child,
[data-service="digital"] .svc-scene-title span:first-child,
[data-service="corp"] .svc-scene-title span:first-child,
[data-service="live"] .svc-scene-title span:first-child {
  color: var(--svc-paper);
  background: rgba(8,8,10,.77);
  border-color: rgba(244,242,235,.12);
}

[data-service="content"] .svc-scene-title span:nth-child(2),
[data-service="influencer"] .svc-scene-title span:nth-child(2),
[data-service="digital"] .svc-scene-title span:nth-child(2),
[data-service="corp"] .svc-scene-title span:nth-child(2),
[data-service="live"] .svc-scene-title span:nth-child(2) {
  color: rgba(244,242,235,.96);
  background: rgba(8,8,10,.50);
}

/* Individual composition tuning, preserving the intentionally messy art direction. */
[data-service="social"] .svc-scene-title { top: 50%; width: min(78vw,1220px); }
[data-service="brand"] .svc-scene-title { top: 53%; width: min(80vw,1260px); }
[data-service="paid"] .svc-scene-title { top: 54%; width: min(78vw,1220px); }
[data-service="web"] .svc-scene-title { top: 53%; width: min(76vw,1180px); }
[data-service="planning"] .svc-scene-title { top: 54%; width: min(78vw,1220px); }
[data-service="launch"] .svc-scene-title { top: 54%; width: min(80vw,1260px); }
[data-service="custom"] .svc-scene-title { top: 56%; width: min(76vw,1180px); }
[data-service="venue"] .svc-scene-title { top: 54%; width: min(70vw,1060px); }

/* Keep media framing the title rather than cutting through it. */
[data-service="social"] .svc-media-a,
[data-service="brand"] .svc-media-a,
[data-service="paid"] .svc-media-a,
[data-service="web"] .svc-media-a,
[data-service="planning"] .svc-media-a,
[data-service="launch"] .svc-media-a,
[data-service="custom"] .svc-media-a,
[data-service="venue"] .svc-media-a {
  filter: brightness(.90);
}

[data-service="social"] .svc-media-b,
[data-service="brand"] .svc-media-b,
[data-service="paid"] .svc-media-b,
[data-service="web"] .svc-media-b,
[data-service="planning"] .svc-media-b,
[data-service="launch"] .svc-media-b,
[data-service="custom"] .svc-media-b,
[data-service="venue"] .svc-media-b {
  filter: brightness(.88);
}

/* The LIVE SHOWS title is especially long: tighten without shrinking into nothing. */
[data-service="live"] .svc-scene-title {
  width: min(84vw,1340px);
  font-size: clamp(54px,7.7vw,120px);
  line-height: .80;
}

/* Corporate / Entertainment also needs a calmer lockup. */
[data-service="corp"] .svc-scene-title {
  width: min(82vw,1300px);
  font-size: clamp(56px,8vw,126px);
}

/* Mobile: use the same stronger title hierarchy where relevant. */
@media(max-width:820px){
  .svc-mobile-card:nth-child(1) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(3) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(5) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(7) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(8) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(10) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(12) .svc-mobile-copy h2 span:first-child,
  .svc-mobile-card:nth-child(13) .svc-mobile-copy h2 span:first-child{
    color:#ff3b30;
    border-color:rgba(255,59,48,.30);
    box-shadow:inset 3px 0 0 #ff3b30;
  }
}


/* =========================================================
   v52 — Apple-ad style bubble entrance
   ========================================================= */
.services-request-bubble{
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.services-request-bubble-inner{
  will-change: transform, opacity, filter;
}


/* v57 — Services has one page-exclusive soundtrack. */
.services-main~* .music-ipod-screen-list,
body:has(.services-main) .music-ipod-screen-list{grid-template-columns:1fr!important}
.services-single-track{grid-template-columns:1fr!important;max-width:720px;margin-inline:auto}


/* =========================================================
   v68 — MOBILE SERVICES QA
   Mobile-only. Desktop service machine is intentionally untouched.
   ========================================================= */
@media (max-width:820px) {
  /* ---------- CHAT HERO ----------
     Inline desktop positions use vw values that push the right-side iMessage
     bubbles outside a phone viewport. On mobile they keep the scattered feel,
     but are anchored to safe gutters instead of being allowed off-canvas. */
  .services-chat-world{
    overflow:hidden;
  }

  .services-request-bubble{
    width:min(var(--bw),72vw);
    max-width:calc(100vw - 34px);
  }

  .services-request-bubble.request-left{
    left:14px !important;
    right:auto !important;
  }

  .services-request-bubble.request-right{
    left:auto !important;
    right:14px !important;
  }

  /* Preserve the messy inbox instead of forming two perfectly straight rails. */
  .services-request-bubble.request-left:nth-of-type(4n + 1){left:28px !important}
  .services-request-bubble.request-left:nth-of-type(4n + 3){left:8px !important}
  .services-request-bubble.request-right:nth-of-type(4n + 2){right:8px !important}
  .services-request-bubble.request-right:nth-of-type(4n){right:28px !important}

  .services-request-bubble-inner{
    box-sizing:border-box;
  }

  .services-request-bubble p{
    overflow-wrap:normal;
    word-break:normal;
  }

  /* ---------- MOBILE SERVICE CARDS ---------- */
  .svc-mobile{
    padding:14px 12px 18px;
  }

  .svc-mobile-card{
    min-height:78svh;
    margin-bottom:14px;
  }

  .svc-mobile-ui{
    box-sizing:border-box;
    padding:15px 14px 16px;
  }

  .svc-mobile-copy{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .svc-mobile-copy h2{
    width:100%;
    max-width:100%;
    margin:0 0 14px;
    font-size:clamp(34px,10.8vw,52px);
    line-height:.82;
    letter-spacing:-.068em;
  }

  .svc-mobile-copy h2 span{
    box-sizing:border-box;
    width:max-content;
    max-width:100%;
    padding:.035em .10em .075em;
    white-space:normal;
  }

  /* The editorial serif line is where the long single-word titles were being
     cut off (MANAGEMENT / PARTNERSHIPS / DEVELOPMENT / ENTERTAINMENT). */
  .svc-mobile-copy h2 span:last-child{
    max-width:100%;
    font-size:clamp(29px,9.15vw,43px);
    line-height:.88;
    letter-spacing:-.075em;
  }

  /* Keep the red / first line monumental, but do not let multi-word headings
     use desktop-scale type on a 350px content width. */
  .svc-mobile-copy h2 span:first-child{
    font-size:clamp(34px,10.8vw,52px);
    line-height:.82;
  }

  /* Per-title optical tuning. These are MOBILE ONLY and exist specifically
     to keep the intentionally messy lockups fully readable. */
  .svc-mobile-card[data-service="social"] .svc-mobile-copy h2 span:last-child{font-size:clamp(28px,8.8vw,41px)}
  .svc-mobile-card[data-service="brand"] .svc-mobile-copy h2 span:first-child{font-size:clamp(32px,10vw,48px)}
  .svc-mobile-card[data-service="brand"] .svc-mobile-copy h2 span:last-child{font-size:clamp(27px,8.45vw,39px)}
  .svc-mobile-card[data-service="influencer"] .svc-mobile-copy h2 span:first-child{font-size:clamp(31px,9.8vw,46px)}
  .svc-mobile-card[data-service="influencer"] .svc-mobile-copy h2 span:last-child{font-size:clamp(26px,8.15vw,38px)}
  .svc-mobile-card[data-service="web"] .svc-mobile-copy h2 span:first-child{font-size:clamp(31px,9.9vw,47px)}
  .svc-mobile-card[data-service="web"] .svc-mobile-copy h2 span:last-child{font-size:clamp(27px,8.5vw,39px)}
  .svc-mobile-card[data-service="planning"] .svc-mobile-copy h2 span:first-child{font-size:clamp(31px,9.8vw,46px)}
  .svc-mobile-card[data-service="planning"] .svc-mobile-copy h2 span:last-child{font-size:clamp(27px,8.55vw,40px)}
  .svc-mobile-card[data-service="corp"] .svc-mobile-copy h2 span:first-child{font-size:clamp(30px,9.45vw,45px)}
  .svc-mobile-card[data-service="corp"] .svc-mobile-copy h2 span:last-child{font-size:clamp(25px,7.8vw,36px)}
  .svc-mobile-card[data-service="live"] .svc-mobile-copy h2 span:first-child{font-size:clamp(28px,8.8vw,42px)}
  .svc-mobile-card[data-service="live"] .svc-mobile-copy h2 span:last-child{font-size:clamp(27px,8.5vw,39px)}

  .svc-mobile-copy p{
    max-width:100%;
    margin:0 0 9px;
    font-size:7px;
    line-height:1.45;
  }

  .svc-mobile-copy small{
    display:block;
    max-width:95%;
    font-size:9px;
    line-height:1.45;
  }

  /* A small clean floor under the title makes the type read over the collage
     without flattening the entire card into a dark rectangle. */
  .svc-mobile-copy h2{
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.32));
  }
}

@media (max-width:390px) {
  .svc-mobile-copy h2 span:first-child{font-size:clamp(31px,10.2vw,44px)}
  .svc-mobile-copy h2 span:last-child{font-size:clamp(25px,8.45vw,36px)}
  .svc-mobile-card[data-service="corp"] .svc-mobile-copy h2 span:last-child{font-size:clamp(23px,7.45vw,32px)}
  .svc-mobile-card[data-service="influencer"] .svc-mobile-copy h2 span:last-child{font-size:clamp(24px,7.8vw,34px)}
}