
.character-hero{position:relative;isolation:isolate;height:100svh;min-height:760px;padding:0;overflow:hidden;background:#0b1118;color:var(--paper)}
.world{position:absolute;inset:0;z-index:-2;background-image:url('cinematic-scene.jpg');background-size:cover;background-position:center;filter:brightness(.84);transition:filter .6s ease,transform 1.1s ease;pointer-events:none}
.world-planning{width:100%;opacity:1}
.world-guiding{display:block;mask-image:linear-gradient(to right,transparent 44%,#000 56%);-webkit-mask-image:linear-gradient(to right,transparent 44%,#000 56%);transform-origin:85% 50%}
.character-hero[data-service-active="-1"] .world-planning{filter:brightness(.95)}
.character-hero[data-service-active="-1"] .world-guiding{filter:brightness(.80)}
.character-hero[data-service-active="1"] .world-planning{filter:brightness(.80)}
.character-hero[data-service-active="1"] .world-guiding{filter:brightness(.95);transform:scale(1.015)}
.character-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(#060c1680,transparent 25%,transparent 72%,#0b0e1133);pointer-events:none;z-index:-1}
.character-hero figure{position:absolute;margin:0;bottom:0;left:50%;transform:translateX(-50%);width:max(1400px,112vw);aspect-ratio:16/9;z-index:2;pointer-events:none}
.character-hero figure img,.character-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.character-hero canvas{opacity:0}.character-hero canvas.ready{opacity:1}
.choice-grid{position:relative;height:100%;display:flex;direction:ltr;justify-content:space-between;align-items:center;padding:70px 6vw 150px;gap:32%}
.service-choice{--side:#c9e9ff;position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;direction:rtl;text-align:right;width:clamp(220px,23vw,320px);max-width:28vw;padding:20px 0;color:var(--paper);text-decoration:none;transition:opacity .45s;text-shadow:0 2px 20px #02080c;}
.choice-guiding{--side:#ffe2c7;align-items:flex-end}
.service-choice h1,.service-choice h2{position:relative;font-size:clamp(36px,4.2vw,64px);font-weight:400;line-height:1.12;margin:0;letter-spacing:-.025em;color:var(--side)}
.service-choice p{font-size:18px;line-height:1.55;margin:18px 0 24px;color:#f3f0e8;max-width:260px;min-height:56px;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;visibility:hidden}
.character-hero[data-service-active="-1"] .choice-planning p,.character-hero[data-service-active="1"] .choice-guiding p{opacity:1;transform:none;visibility:visible}
.choice-cta{position:relative;display:flex;align-items:center;gap:24px;padding:9px 0;font-size:18px;color:var(--side);min-height:44px;direction:rtl}
.choice-cta:after{content:"";position:absolute;bottom:0;right:0;width:42px;height:1px;background:currentColor;opacity:.6;transition:width .45s ease}
.choice-cta span{display:inline-block;font-size:24px;transition:transform .45s ease}
.service-choice:hover .choice-cta:after,.service-choice:focus-visible .choice-cta:after{width:100%}
.service-choice:hover .choice-cta span,.service-choice:focus-visible .choice-cta span{transform:translateX(4px)}
.service-choice:focus-visible{outline:1px solid var(--side);outline-offset:12px;border-radius:2px}
.character-hero[data-service-active="-1"] .choice-guiding,.character-hero[data-service-active="1"] .choice-planning{opacity:.78}
.environment-route{position:absolute;left:2%;top:24%;width:42%;height:72%;z-index:0;fill:none;stroke:#a3dcfa;stroke-width:1.3;pointer-events:none;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 4px #55bdff80)}
.route-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.25,.1,.25,1)}
.route-stops{fill:#d9f4ff;stroke:#78caff;stroke-width:2;opacity:0;transition:opacity .5s .4s}
.character-hero[data-service-active="-1"] .environment-route{opacity:.7}
.character-hero[data-service-active="-1"] .route-draw{stroke-dashoffset:0}
.character-hero[data-service-active="-1"] .route-stops{opacity:1}
.hero-sound{position:absolute;bottom:20px;left:24px;z-index:4;border:0;background:#07111a88;color:#d8d9d9;font:inherit;font-size:12px;padding:8px 10px;border-radius:3px;min-height:36px;cursor:pointer}
.hero-sound:focus-visible{outline:1px solid #fff;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.character-hero,.character-hero a{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23f3f0e8' stroke-width='1'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%23f3f0e8'/%3E%3C/svg%3E") 11 11,auto}.character-hero[data-service-active="-1"],.character-hero[data-service-active="-1"] a{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%239edaff'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%239edaff'/%3E%3C/svg%3E") 11 11,auto}.character-hero[data-service-active="1"],.character-hero[data-service-active="1"] a{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%23ffcd9d'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%23ffcd9d'/%3E%3C/svg%3E") 11 11,auto}}
@media(max-width:820px){.character-hero{height:auto;min-height:100svh;padding:90px 20px 26px;display:flex;flex-direction:column}.character-hero figure{position:relative;left:auto;transform:none;align-self:center;width:760px;max-width:none;height:auto;aspect-ratio:16/9;bottom:auto;margin-top:-60px;margin-bottom:-8px;flex-shrink:0;order:0}.choice-grid{height:auto;padding:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px;order:1;z-index:3}.service-choice{width:auto;max-width:none;padding:0}.service-choice h1,.service-choice h2{font-size:30px}.service-choice p{font-size:16px;min-height:75px;margin:14px 0;opacity:1;transform:none;visibility:visible}.choice-cta{font-size:16px;gap:16px;margin-top:auto}.world{background-size:auto 100%;background-position:center}.environment-route,.hero-sound{display:none}}
@media(hover:none),(pointer:coarse){.service-choice p{opacity:1;visibility:visible;transform:none}.environment-route,.hero-sound{display:none}.world{transition:none}.character-hero[data-service-active] .world-guiding{transform:none}.character-hero,.character-hero a{cursor:auto}}
@media(max-width:400px){.character-hero{padding-inline:14px}.service-choice h1,.service-choice h2{font-size:28px}.character-hero figure{width:720px;margin-top:-45px}}
@media(prefers-reduced-motion:reduce){.service-choice,.service-choice p,.world,.choice-cta:after,.choice-cta span,.environment-route,.route-draw,.route-stops{transition:none!important}.character-hero[data-service-active] .world-guiding,.choice-cta span{transform:none!important}.route-draw{stroke-dashoffset:0}}
.character-hero figure img{mask:none;-webkit-mask:none}.character-hero figure.animated img{visibility:hidden}
