/* Fixed star overlay: no reserved space or content shift. */
@media(min-width:1025px) and (hover:hover) and (pointer:fine){
  .has-star-journey>main{overflow:clip}
  .has-star-journey .hero h1{font-size:clamp(72px,8.3vw,142px)}
  .has-star-journey .hero-actions{flex-wrap:wrap;gap:16px 24px}
  .has-star-journey .footer-contact a{overflow-wrap:anywhere}
  .has-star-journey .hero-art.star-traveller{width:512px!important;height:512px!important;z-index:5;will-change:transform;pointer-events:auto!important;contain:layout style paint}
  .has-star-journey .hero-art.star-traveller canvas{pointer-events:auto!important}
  .has-star-journey .hero-art.star-traveller.star-docked,.has-star-journey .hero-art.star-traveller.star-docked canvas{pointer-events:none!important}
  .has-star-journey .hero-art.star-traveller>img{display:block;opacity:1;transition:none}
  .has-star-journey .hero-art.star-traveller.webgl-ready>img{opacity:0}
  .has-star-journey .hero-art.star-traveller canvas{transition:none}
  html[data-motion=off] body.has-star-journey .hero-art.star-traveller{display:block;transform:var(--star-transform)!important}
}
@media(min-width:1025px) and (max-width:1400px) and (hover:hover) and (pointer:fine){
 .has-star-journey .footer-top{grid-template-columns:1fr 1.2fr}
 .has-star-journey .footer-contact{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
 .has-star-journey .footer-contact .footer-heading{grid-column:1/-1}
}
@media(min-width:1025px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){body.has-star-journey .hero-art.star-traveller{display:block;transform:var(--star-transform)!important}}

.connection-studio{--studio-scroll:0;--signal-light:50%;position:relative}
.connection-heading,.touchpoint-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.connection-heading .section-title,.touchpoint-heading .section-title{font-size:clamp(44px,5.5vw,84px);line-height:1.03}
.connection-heading>p,.touchpoint-heading>p{max-width:320px;font-size:16px;line-height:1.7;color:#a6b5cf}
.signal-tabs{display:flex;gap:30px;border-bottom:1px solid #5479ad40;margin-bottom:25px}
.signal-tabs button{position:relative;border:0;background:none;color:#8c9bb3;padding:16px 0 20px;font-size:clamp(18px,2vw,25px);letter-spacing:-.04em;transition:color .3s}
.signal-tabs button::after{content:'';position:absolute;height:2px;left:0;right:0;bottom:-1px;background:#92bdfb;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 14px #5f9cf0}
.signal-tabs button[aria-selected=true]{color:#e4efff}
.signal-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.signal-frame{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.85fr);border:1px solid #3555826b;min-height:460px;overflow:hidden;background:#07101b;border-radius:3px}
.signal-stage{position:relative;min-height:480px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at var(--signal-light) 100%,#336ac37d,transparent 70%),#09172c}
.signal-grid{position:absolute;inset:0;background-image:linear-gradient(#85b7ff0d 1px,transparent 1px),linear-gradient(90deg,#85b7ff0d 1px,transparent 1px);background-size:45px 45px;mask-image:linear-gradient(transparent,#000 40%);transform:perspective(400px) rotateX(12deg) scale(1.2);transform-origin:bottom}
.signal-scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#c4deff0c 50%,transparent 65%);transform:translateX(calc((var(--studio-scroll) - .5)*80%))}
.signal-art{position:absolute;inset:0;display:none;place-items:center;overflow:hidden}
[data-mode=voice] .signal-voice,[data-mode=creative] .signal-creative,[data-mode=flow] .signal-flow{display:grid}
.signal-word{position:absolute;left:8%;top:12%;font-family:Instrument,Georgia,serif;font-size:clamp(95px,11vw,180px);line-height:.9;letter-spacing:-.05em;color:#d9eaff;z-index:2;translate:0 calc(var(--studio-scroll)*-15px)}
.signal-wave{position:absolute;inset:35% 8% 9%;display:flex;align-items:center;justify-content:center;gap:clamp(3px,.65vw,9px);z-index:1;rotate:calc((var(--studio-scroll) - .5)*-6deg)}
.signal-wave i{display:block;flex:1;max-width:9px;height:var(--level);min-height:8px;border-radius:10px;background:linear-gradient(#c7e0ff,#4d90f0 55%,#2663b3);transform-origin:center;box-shadow:0 0 22px #4e99ff30;animation:voice-wave 2.7s ease-in-out infinite alternate;animation-delay:calc(var(--bar)*-.13s);animation-play-state:paused}
.signal-halo{position:absolute;width:75%;aspect-ratio:1;bottom:-65%;border-radius:50%;background:#3479d9;filter:blur(60px);opacity:.22}
.signal-copy{display:flex;align-items:center;padding:clamp(28px,4vw,60px);border-left:1px solid #44659140;background:radial-gradient(ellipse at 0 0,#14315c38,transparent 65%)}
.signal-panel h3{font-size:clamp(32px,3.2vw,50px);line-height:1.08;letter-spacing:-.055em;color:#e3ecfa}
.signal-panel h3 em{color:#8dbafb}
.signal-panel p{margin-top:26px;font-size:15px;line-height:1.75;color:#a3b3cd;max-width:340px}
.signal-panel .line-link{margin-top:36px;font-size:13px;gap:20px;color:#c8deff}
.signal-panel[hidden]{display:none}
.signal-panel{animation:signal-copy-in .5s both}
.creative-disc{position:absolute;width:70%;aspect-ratio:1;right:-8%;bottom:-20%;rotate:calc(25deg + var(--studio-scroll)*65deg);animation:creative-turn 20s linear infinite;animation-play-state:paused}
.creative-disc i{position:absolute;inset:0;border:22px solid #6fa6f596;border-radius:50%;transform:scaleX(.36) rotate(0);mix-blend-mode:screen}
.creative-disc i:nth-child(2){rotate:30deg}.creative-disc i:nth-child(3){rotate:60deg}.creative-disc i:nth-child(4){rotate:90deg}.creative-disc i:nth-child(5){rotate:120deg}.creative-disc i:nth-child(6){rotate:150deg}
.creative-type{position:absolute;left:9%;bottom:5%;font-size:140px;letter-spacing:-.09em;font-weight:600;color:#9ac8ff3b;line-height:1}
.flow-circuit{position:absolute;inset:0;width:100%;height:100%;padding-top:60px;overflow:visible}
.flow-track{stroke:#527aab;stroke-width:2;opacity:.45}
.flow-current{stroke:#9eccff;stroke-width:3;stroke-dasharray:.08 .18;animation:flow-current 5s linear infinite;animation-play-state:paused}
.flow-nodes circle{fill:#0d2547;stroke:#8ebdf3;stroke-width:2}
.signal-flow .signal-word{font-size:clamp(90px,10vw,160px);top:7%}
.connection-studio.is-in-view .signal-wave i,.connection-studio.is-in-view .creative-disc,.connection-studio.is-in-view .flow-current{animation-play-state:running}

.touchpoint-story{--assembly:1;position:relative;height:155svh;min-height:1080px;background:radial-gradient(ellipse at 48% 55%,#1d47843d,transparent 65%),#050c16;isolation:isolate}
.touchpoint-sticky{position:sticky;top:0;height:100svh;min-height:730px;display:flex;flex-direction:column;justify-content:center;padding-block:40px;overflow:hidden}
.touchpoint-heading{margin-bottom:40px;position:relative;z-index:2}
.touchpoint-heading .section-title{font-size:clamp(43px,5vw,78px)}
.touchpoint-composition{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:22px;align-items:center;perspective:1400px;margin-inline:15px}
.touchpoint-card{position:relative;min-width:0;background:#0c1829;border:1px solid #5d83b63b;box-shadow:0 16px 70px #0004;transform-origin:center 65%;will-change:transform}
.touchpoint-brand{transform:translate3d(calc((1 - var(--assembly))*-50px),calc((1 - var(--assembly))*60px),0) rotate(calc((1 - var(--assembly))*-12deg))}
.touchpoint-web{z-index:1;transform:translate3d(0,calc((1 - var(--assembly))*-32px),0) rotateX(calc((1 - var(--assembly))*12deg))}
.touchpoint-campaign{transform:translate3d(calc((1 - var(--assembly))*50px),calc((1 - var(--assembly))*65px),0) rotate(calc((1 - var(--assembly))*12deg))}
.touchpoint-art{position:relative;height:clamp(235px,26vh,340px);overflow:hidden;isolation:isolate}
.brand-poster{background:#75a7ef;color:#0c2a53;padding:25px}
.brand-poster>span{position:relative;display:block;font-size:clamp(40px,6.2vw,94px);letter-spacing:-.085em;font-weight:650;line-height:.86;z-index:1}
.brand-poster>span em{font-size:1.08em;letter-spacing:-.045em}
.poster-rings{position:absolute;inset:35% -25% -60% 0;rotate:calc(-30deg + var(--assembly)*35deg)}
.poster-rings i{position:absolute;inset:0;border:1px solid #10376670;border-radius:50%;scale:1 .6}
.poster-rings i:nth-child(2){inset:9%}.poster-rings i:nth-child(3){inset:18%}.poster-rings i:nth-child(4){inset:27%}.poster-rings i:nth-child(5){inset:36%}
.browser-poster{background:linear-gradient(130deg,#19365d,#081323)}
.browser-top{height:34px;border-bottom:1px solid #7295c22b;display:flex;align-items:center;gap:5px;padding:0 14px;background:#0b192c}
.browser-top i{width:4px;height:4px;border-radius:50%;background:#789cc7}.browser-top b{height:9px;background:#3c5c8338;margin:auto;width:38%;border-radius:4px}
.browser-copy{position:absolute;top:27%;left:10%;font-size:clamp(36px,4.8vw,74px);letter-spacing:-.07em;line-height:.98;color:#cfe4ff;z-index:1}
.browser-copy em{color:#7faeed}
.browser-sculpture{position:absolute;width:60%;aspect-ratio:1;right:-15%;bottom:-6%;rotate:calc(var(--assembly)*-25deg)}
.browser-sculpture i{position:absolute;inset:0;border:12px solid #7aabed96;border-radius:50%;transform:scaleX(.35)}
.browser-sculpture i:nth-child(2){rotate:35deg}.browser-sculpture i:nth-child(3){rotate:70deg}.browser-sculpture i:nth-child(4){rotate:105deg}.browser-sculpture i:nth-child(5){rotate:140deg}
.browser-rule{position:absolute;left:10%;bottom:12%;height:2px;width:25%;background:#82aeec}
.campaign-poster{background:linear-gradient(150deg,#244978,#071322);padding:24px}
.campaign-type{position:relative;z-index:1;font-size:clamp(33px,4.7vw,74px);font-weight:650;line-height:.85;letter-spacing:-.06em}
.campaign-type span{display:block;color:transparent;-webkit-text-stroke:1px #a5ccffab}.campaign-type em{font-size:1.4em;line-height:.92;color:#d6e8ff;letter-spacing:-.055em}
.campaign-stripe{position:absolute;width:250%;height:60px;bottom:-6%;left:-60%;border:1px solid #8bbcf4;box-shadow:0 0 25px #7caff726;rotate:calc(-35deg + var(--assembly)*10deg);background:linear-gradient(90deg,#75aaff66,transparent)}
.touchpoint-card>a{position:relative;display:block;padding:21px 23px;border-top:1px solid #46648c3b;transition:background .3s}
.touchpoint-card>a:hover{background:#193255}.touchpoint-card>a:focus-visible{outline-offset:-4px}
.touchpoint-card h3{font-size:clamp(24px,2.7vw,38px);letter-spacing:-.055em;color:#e0edff}
.touchpoint-card>a>span{display:block;color:#91a7c6;font-size:13px;margin-top:7px}
.touchpoint-card>a>svg{position:absolute;right:18px;top:22px;width:20px;height:20px;color:#9ac4ff}
.touchpoint-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:36px}
.touchpoint-bottom>p{font-size:13px;max-width:340px;color:#859bb9;line-height:1.6}
.touchpoint-bottom .line-link{color:#bbd4f6;font-size:13px}
@keyframes voice-wave{from{scale:1 .25}to{scale:1 1}}
@keyframes creative-turn{to{transform:rotate(360deg)}}
@keyframes flow-current{to{stroke-dashoffset:-1}}
@keyframes signal-copy-in{from{opacity:.4;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:1100px){.signal-frame{grid-template-columns:1.1fr 1fr}.signal-copy{padding:28px}.signal-stage{min-height:450px}.touchpoint-composition{gap:12px;margin-inline:0}.touchpoint-card>a{padding:20px 16px}.touchpoint-card>a>svg{right:12px;width:17px}.touchpoint-heading>p{max-width:280px}}
@media(max-width:800px){
 .connection-heading,.touchpoint-heading{display:block;margin-bottom:30px}
 .connection-heading>p,.touchpoint-heading>p{margin-top:25px;max-width:480px;font-size:15px}
 .signal-frame{grid-template-columns:1fr}.signal-stage{min-height:370px}.signal-copy{border-left:0;border-top:1px solid #44659140;padding:32px}
 .signal-panel h3{font-size:40px}.signal-panel p{max-width:520px}.signal-panel .line-link{margin-top:25px}
 .signal-word{font-size:150px;top:10%}.signal-flow .signal-word{font-size:140px}.signal-wave{inset:35% 8% 7%;gap:7px}
 .creative-disc{width:60%;bottom:-55%;right:0}.creative-type{font-size:120px}
 .touchpoint-story{height:auto;min-height:0;padding-block:75px}.touchpoint-sticky{position:relative;height:auto;min-height:0;overflow:visible;padding-block:0}
 .touchpoint-composition{grid-template-columns:1fr;gap:28px;max-width:540px;margin-inline:auto}
 .touchpoint-card{transform:none;will-change:auto}.touchpoint-art{height:330px}.touchpoint-card>a{padding:23px}.touchpoint-card h3{font-size:34px}
 .brand-poster>span{font-size:100px}.browser-copy{font-size:85px}.campaign-type{font-size:75px}
 .touchpoint-bottom{display:block;margin-top:35px}.touchpoint-bottom .line-link{margin-top:18px}
}
@media(max-width:480px){.signal-tabs{gap:24px}.signal-tabs button{font-size:19px}.signal-stage{min-height:300px}.signal-word{font-size:120px}.signal-flow .signal-word{font-size:115px}.signal-wave{gap:4px}.signal-copy{padding:28px}.signal-panel h3{font-size:35px}.creative-disc{width:78%;bottom:-65%}.creative-type{font-size:100px}.touchpoint-art{height:290px}.brand-poster>span{font-size:92px}.browser-copy{font-size:72px}.campaign-type{font-size:68px}}
@media(min-width:801px) and (max-height:780px){.touchpoint-story{height:auto;min-height:0;padding-block:90px}.touchpoint-sticky{position:relative;height:auto;min-height:0;overflow:visible}.touchpoint-art{height:240px}}
html[data-motion=off] .touchpoint-story{height:auto;min-height:0;padding-block:90px;--assembly:1!important}
html[data-motion=off] .touchpoint-sticky{position:relative;height:auto;min-height:0;overflow:visible}
html[data-motion=off] .signal-wave i,html[data-motion=off] .creative-disc,html[data-motion=off] .flow-current{animation-play-state:paused!important}
html[data-motion=off] .signal-panel{animation:none}
html[data-motion=off] .connection-studio{--studio-scroll:.5!important}
@media(prefers-reduced-motion:reduce){
 .touchpoint-story{height:auto;min-height:0;padding-block:90px;--assembly:1!important}.touchpoint-sticky{position:relative;height:auto;min-height:0;overflow:visible}
 .connection-studio{--studio-scroll:.5!important}.signal-wave i,.creative-disc,.flow-current{animation-play-state:paused!important}.signal-panel{animation:none}.signal-tabs button::after{transition:none}
}
@media print{.touchpoint-story,.touchpoint-sticky{height:auto;min-height:0;position:relative}.touchpoint-card{transform:none}.signal-art{animation:none}}

