/* Scroll scenes share the page's single aurora. All motion stays local. */
.button.button-action { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #ffeaf3b3; background: linear-gradient(125deg,#fff0f5,#f0c7dc 48%,#e9afc8); color: #27101e; box-shadow: inset 0 1px 0 #fff,0 0 0 4px #e9afc80a,0 8px 30px #e9afc823,0 0 45px #c5639720; transition: box-shadow .3s,border-color .3s,translate .25s,transform .25s; }
.button.button-action::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 35%; z-index: -1; background: linear-gradient(90deg,transparent,#fff9,transparent); transform: skewX(-18deg); transition: left .65s ease; pointer-events: none; }
.button.button-action:hover, .button.button-action:focus-visible { border-color: #fff7fa; background: linear-gradient(125deg,#fff7fa,#f8d8e9 48%,#f0bdd5); box-shadow: inset 0 1px 0 #fff,0 0 0 5px #e9afc814,0 10px 36px #e9afc83b,0 0 55px #c5639730; }
.button.button-action:hover::before, .button.button-action:focus-visible::before { left: 120%; }
.button.button-action:focus-visible { outline: 2px solid #fff0f6; outline-offset: 6px; }
.button.button-join { min-height: 58px; max-width: 100%; min-width: 0; padding: 17px 24px; gap: 24px; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: left; white-space: normal; }
.button.button-join > span { min-width: 0; }
.button.button-join .icon { width: 22px; height: 22px; }
.button.button-join--compact { min-height: 52px; padding: 14px 20px; gap: 18px; font-size: 13px; }
.button.button-join--compact .icon { width: 19px; height: 19px; }
.process-intro > .button-join { margin-top: 22px; }
.partner-content .button-join { margin-top: 18px; }

.connection-scene { --bridge-draw: 1; position: relative; height: 355px; margin-top: 65px; border-block: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.connection-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at calc(50% + var(--pointer-x,0) * 14%) 50%, #8b3b6924, transparent 58%); }
.connection-heading { position: absolute; top: 23px; inset-inline: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; letter-spacing: 1.6px; }
.connection-lines { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.connection-mobile-lines { display: none; }
.connection-guide { stroke: #e9afc81f; stroke-width: 1; }
.connection-current { stroke: var(--pink); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--bridge-draw)); opacity: .7; filter: drop-shadow(0 0 4px #e9afc855); }
.connection-orbit { stroke: #e9afc821; stroke-width: .6; stroke-dasharray: 3 8; transform-origin: 500px 160px; transform: rotate(var(--bridge-orbit,0deg)); }
.connection-orbit.outer { opacity: .4; stroke-dasharray: none; transform: scale(var(--bridge-ring,1)); }
.connection-side { position: absolute; top: 50%; width: 30%; margin-top: -82px; display: flex; flex-direction: column; gap: 11px; transition: translate .45s, color .45s; }
.connection-side--walker { left: 3%; transform: translateX(calc(-1 * var(--bridge-gap,0px))) rotate(calc(-1 * var(--bridge-turn,0deg))); }
.connection-side--brand { right: 3%; text-align: right; align-items: flex-end; transform: translateX(var(--bridge-gap,0px)) rotate(var(--bridge-turn,0deg)); }
.connection-symbol { font-size: 25px; color: var(--pink); line-height: 1; }
.connection-side strong { font-family: var(--display); font-size: clamp(33px,3.4vw,52px); font-weight: 500; line-height: .98; letter-spacing: -.04em; }
.connection-side > span:last-child { font-size: 7px; color: var(--muted); letter-spacing: 1.3px; }
.connection-hub { position: absolute; left: 50%; top: 50%; width: 164px; aspect-ratio: 1; margin: -82px; display: grid; place-items: center; border: 1px solid #e9afc860; border-radius: 50%; background: url('/assets/reference-full.png') 50% 65% / auto 185%; box-shadow: 0 0 65px #b6568a14, inset 0 0 35px #09060c99; transform: scale(var(--bridge-scale,1)); }
.connection-hub > span { font-family: 'Manrope',sans-serif; font-weight: 650; font-size: 28px; letter-spacing: -1.5px; }
.connection-hub sup { font-size: 17px; }
.connection-hub i { position: absolute; inset: -10px; border: 1px solid #e9afc825; border-radius: 50%; transition: inset .6s, border-color .6s; }
.connection-caption { position: absolute; bottom: 22px; width: 100%; text-align: center; font-family: var(--display); font-size: 17px; letter-spacing: -.3px; color: var(--body); }
@media (hover:hover) and (pointer:fine) {
  .connection-side:hover { translate: 0 -8px; color: var(--pink); }
  .connection-hub:hover i { inset: -20px; border-color: #e9afc86b; }
  .connection-hub:hover { box-shadow: 0 0 90px #b6568a3b, inset 0 0 35px #09060c99; }
}

.creative-lab .campaign-display { transform: translate3d(0,var(--lab-rise,0px),var(--lab-depth,0px)) rotateX(calc(-3deg + var(--tilt-x,0deg) + var(--lab-pitch,0deg))) rotateY(calc(-14deg + var(--tilt-y,0deg))) rotateZ(7deg); transition: transform .2s ease-out; }
.creative-lab .preview-orbit { transform: rotateX(52deg) rotateZ(var(--lab-orbit,-35deg)); }
.creative-lab .lab-ghost { transform: translateX(var(--lab-word-shift,0px)); }

.earning-scene { --route-progress: 1; margin: 24px 0 0; width: 100%; max-width: 420px; border-block: 1px solid #e9afc82b; background: radial-gradient(ellipse at 45% 45%,#451b3035,transparent 75%); }
.earning-scene-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; }
.earning-scene-top > span:first-child { display: flex; gap: 7px; align-items: center; color: var(--rose); font-size: 6px; letter-spacing: .7px; }
.earning-scene-top i { width: 4px; height: 4px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px #e9afc866; }
.route-state { font-size: 9px; color: var(--body); }
.earning-map { width: 100%; height: auto; display: block; margin-block: 5px 2px; }
.map-blocks { fill: #dccbd506; stroke: #e9afc820; stroke-width: .6; }
.map-blocks .map-details { stroke: #e9afc816; fill: none; }
.map-street { stroke: #e9afc817; stroke-width: 13; }
.map-cross-street { stroke: #e9afc80d; stroke-width: 10; }
.earning-path { stroke: var(--pink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--route-progress)); filter: drop-shadow(0 0 4px #e9afc84d); }
.route-stops { fill: var(--black); stroke: var(--rose); stroke-width: 1.5; }
.route-marker { fill: var(--pink); }
.route-marker .route-marker-halo { fill: #e9afc81a; stroke: #e9afc85c; stroke-width: .8; }
.route-marker .route-marker-core { fill: var(--black); }
.earning-scene figcaption { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; color: var(--body); font-size: 10px; }
.earning-scene figcaption b { color: var(--pink); padding-inline: 4px; font-weight: 400; }
.earning-scene figcaption small { font-size: 5px; letter-spacing: .8px; color: var(--muted); align-self: center; }
.process-intro .section-title { font-size: clamp(40px,3.8vw,60px); }
.process-intro .section-description { max-width: 490px; }
.process-intro .deposit-note { margin-top: 18px; font-size: 11px; }
.process-intro .line-link { margin-top: 16px; }

.city-scene { --city-accent: #e9afc8; --city-tilt: 55deg; --city-turn: -30deg; --city-draw: 1; position: relative; margin: 34px 0 0; width: 100%; max-width: 480px; }
.city-scene[data-light=wine] { --city-accent: #cf8eac; }
.city-scene[data-light=pearl] { --city-accent: #f4dacb; }
.city-scene-heading { display: flex; align-items: center; justify-content: space-between; color: var(--rose); font-size: 7px; letter-spacing: 1.4px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.city-scene-heading .icon { width: 14px; height: 14px; }
.city-stage { height: 345px; position: relative; perspective: 900px; isolation: isolate; overflow: clip; }
.city-aura { position: absolute; inset: 15% -10% 0; background: radial-gradient(ellipse at 50% 60%,#b6568a22,transparent 65%); pointer-events: none; }
.city-space { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--pointer-x,0) * 7deg)) rotateX(calc(var(--pointer-y,0) * -5deg)); transition: transform .35s ease-out; }
.city-plane { position: absolute; width: 360px; height: 320px; top: 28px; left: calc(50% - 180px); transform-style: preserve-3d; transform: rotateX(var(--city-tilt)) rotateZ(var(--city-turn)); }
.city-ground { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 18px #0008); }
.city-blocks { fill: #451b303b; stroke: #e9afc847; stroke-width: .7; }
.city-roads { stroke: #e9afc81c; stroke-width: 1; stroke-dasharray: 4 5; }
.city-route { stroke: var(--city-accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--city-draw)); filter: drop-shadow(0 0 5px #e9afc866); }
.city-pin { position: absolute; width: 1px; height: 1px; transform-style: preserve-3d; }
.city-pin::before { content: ''; position: absolute; width: 24px; height: 24px; border: 1px solid var(--city-accent); background: #e9afc81a; border-radius: 50%; left: -12px; top: -12px; box-shadow: 0 0 18px #e9afc833; }
.city-pin--one { left: 28%; top: 31%; --sign-show: var(--city-sign-one,1); }
.city-pin--two { left: 66%; top: 31%; --sign-show: var(--city-sign-two,1); }
.city-pin--three { left: 66%; top: 87%; --sign-show: var(--city-sign-three,1); }
.city-billboard { position: absolute; width: 82px; height: 110px; left: -41px; bottom: 0; transform-origin: 50% 100%; transform-style: preserve-3d; transform: rotateZ(calc(-1 * var(--city-turn))) rotateX(calc(-1 * var(--city-tilt))) translateY(calc((1 - var(--sign-show)) * 40px)) scale(calc(.65 + var(--sign-show) * .35)); opacity: var(--sign-show); }
.city-face { position: absolute; inset: 0 0 10px; padding: 10px; border: 1px solid #e9afc87a; border-radius: 12px; background: url('/assets/reference-full.png') 45% 70% / auto 155% #1a0b17; box-shadow: 5px 5px 0 -1px #1b101b,5px 5px 0 0 #e9afc83b,0 12px 20px #0008; display: flex; flex-direction: column; transition: box-shadow .4s, translate .4s; }
.city-face small { color: #f4dce8aa; font-size: 4px; letter-spacing: 1px; }
.city-face strong { font-family: var(--display); font-size: 15px; line-height: 1; font-weight: 500; color: var(--city-accent); letter-spacing: -.4px; margin-top: 15px; overflow-wrap: anywhere; }
.city-face > span { color: var(--city-accent); font-size: 18px; align-self: flex-end; margin-top: auto; line-height: 1; }
.city-billboard > i { position: absolute; height: 11px; width: 3px; bottom: 0; left: 39px; background: var(--city-accent); opacity: .6; }
.city-location { position: absolute; top: 19px; left: 0; transform: translateX(-50%); font-size: 8px; letter-spacing: 1.5px; color: var(--rose); white-space: nowrap; }
.city-scene figcaption { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: -8px; }
.city-story { font-family: var(--display); font-size: 20px; letter-spacing: -.5px; color: var(--body); }
.city-scene figcaption small { color: var(--muted); font-size: 5px; letter-spacing: .8px; text-align: right; }
.city-scene[data-audience="1"] .city-pin--two .city-face { border-color: #fff0f4; box-shadow: 5px 5px 0 -1px #1b101b,5px 5px 0 #e9afc855,0 0 35px #e9afc833; }
.city-scene[data-audience="2"] .city-pin--three .city-face { border-color: #fff0f4; box-shadow: 5px 5px 0 -1px #1b101b,5px 5px 0 #e9afc855,0 0 35px #e9afc833; }
@media (hover:hover) and (pointer:fine) {
  .city-face:hover { translate: 0 -9px; box-shadow: 5px 8px 0 -1px #1b101b,5px 8px 0 #e9afc86b,0 10px 35px #e9afc83b; }
}
.partner-row { position: relative; isolation: isolate; }
.partner-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at var(--pointer-u,50%) var(--pointer-v,0%),#e9afc813,transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.partner-row:hover::before, .partner-row:focus-within::before { opacity: 1; }
.partner-row[open] .partner-content { animation: partner-unfold .45s cubic-bezier(.2,.7,.2,1); }
@keyframes partner-unfold { from { opacity: .3; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.contact { isolation: isolate; }
.contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--pointer-u,35%) var(--pointer-v,50%),#8b3b6938,transparent 58%); opacity: .3; transition: opacity .6s; pointer-events: none; }
.contact > .shell { position: relative; }
.contact:focus-within::before { opacity: 1; }
.contact-form .form-row > label:focus-within, .contact-form > label:focus-within { color: var(--pink); }
.contact .contact-spark { transform: rotate(var(--contact-turn,0deg)) scale(var(--contact-scale,1)); }
.footer-wordmark { background: linear-gradient(105deg,#e9afc8 10%,#fff3f8 35%,#735367 50%,#fff3f8 65%,#e9afc8 90%); background-size: 220% 100%; background-position: var(--footer-light,0%) 50%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-wordmark::after { content: ''; position: absolute; top: 12%; bottom: 10%; left: var(--footer-scan,0%); width: 1px; background: linear-gradient(transparent,#e9afc866,transparent); opacity: var(--footer-scan-opacity,0); pointer-events: none; }

@media (max-width:1000px), (max-height:799px) {
  .process-intro { position: relative; top: auto; }
}
@media (max-width:900px) {
  .connection-hub { width: 136px; margin: -68px; }
  .connection-hub > span { font-size: 24px; }
  .city-stage { height: 300px; }
  .city-plane { scale: .84; }
  .city-story { font-size: 17px; }
  .earning-scene-top > span:first-child { font-size: 5px; letter-spacing: .3px; }
  .route-state { font-size: 8px; }
}
@media (max-width:600px) {
  .connection-scene { height: 295px; margin-top: 42px; }
  .connection-heading { font-size: 6px; letter-spacing: 1px; top: 18px; }
  .connection-lines { width: 165%; left: -32.5%; }
  .connection-lines > path { display: none; }
  .connection-mobile-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .connection-hub { width: 94px; margin: -47px; top: 47%; }
  .connection-hub > span { font-size: 17px; letter-spacing: -.9px; }
  .connection-hub sup { font-size: 10px; }
  .connection-side { margin-top: -66px; top: 47%; width: 30%; gap: 12px; }
  .connection-side--walker { left: 0; }
  .connection-side--brand { right: 0; }
  .connection-side strong { font-size: clamp(23px,6.4vw,35px); }
  .connection-symbol { font-size: 21px; }
  .connection-side > span:last-child { font-size: 5px; letter-spacing: .4px; max-width: 84px; line-height: 1.8; }
  .connection-caption { font-size: 15px; bottom: 24px; }
  .earning-scene { margin-top: 24px; max-width: none; }
  .earning-scene-top > span:first-child { font-size: 6px; letter-spacing: .5px; }
  .route-state { font-size: 9px; }
  .earning-scene figcaption { font-size: 10px; }
  .earning-scene figcaption small { font-size: 5px; }
  .process-intro .section-title { font-size: 44px; }
  .process-intro .deposit-note { font-size: 12px; margin-top: 23px; }
  .process-intro .line-link { margin-top: 21px; }
  .city-scene { margin-top: 30px; }
  .city-stage { height: 300px; }
  .city-plane { scale: .84; }
  .city-scene figcaption { margin-top: -14px; }
  .city-story { font-size: 19px; }
}
@media (max-width:370px) {
  .contact .contact-spark { right: 4px; }
  .city-plane { scale: .72; }
  .city-stage { height: 275px; }
  .city-scene figcaption small { max-width: 76px; line-height: 1.7; }
  .earning-scene-top > span:first-child { font-size: 5px; }
  .earning-scene figcaption { font-size: 9px; }
}
@media (prefers-reduced-motion:reduce) {
  .connection-side, .connection-hub i, .city-space, .city-face { transition: none; }
  .connection-side:hover, .city-face:hover { translate: none; }
  .creative-lab .campaign-display { transition: none; }
  .partner-row[open] .partner-content { animation: none; }
  .contact::before { transition: none; }
}
@media print {
  .connection-scene, .city-scene, .earning-scene { break-inside: avoid; }
}