:root {
  --navy: #1d1b4b;
  --violet: #4a4fa1;
  --cream: #f4f0e1;
  --cyan: #71c9eb;
  --ink: #10132c;
  --ease: cubic-bezier(.22, 1, .36, 1);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--cream);
  background: #080b20;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #b9dfff; outline-offset: 5px; }
::selection { background: #a5b7ee; color: #121437; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: -70px; left: 20px; background: var(--cream); color: var(--ink); padding: 14px; }
.skip-link:focus { top: 12px; }
.mono, .eyebrow, .site-header, .site-menu, .world-hud, .panel-kicker, .portal-index { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }

/* Permanent controls above the moving environment. */
.site-header { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; height: 84px; padding: 0 clamp(20px, 3.5vw, 60px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e3e3ff34; background: linear-gradient(#0a0d25e8,#0a0d2520); font-size: 12px; }
.logo { display: flex; align-items: center; gap: 9px; font-family: Arial, Helvetica, sans-serif; font-size: 21px; font-weight: 800; letter-spacing: .08em; }
.logo svg { width: 27px; height: 27px; fill: currentColor; }
.chapter-position { color: #c9cce8; }
.menu-button { display: flex; align-items: center; gap: 13px; color: white; border: 1px solid #ffffff6a; background: #12173755; padding: 12px 16px; border-radius: 50px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.menu-button i { width: 19px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.site-menu { position: fixed; z-index: 38; inset: 0; padding: 110px clamp(23px,8vw,140px) 34px; display: flex; flex-direction: column; justify-content: space-between; background: #171944; opacity: 0; visibility: hidden; transform: translateY(-25px); transition: opacity .35s, visibility .35s, transform .35s; }
.site-menu.open { opacity: 1; visibility: visible; transform: none; }
.menu-top { display: flex; justify-content: space-between; color: #a6add4; font-size: 12px; }
.menu-top button { background: none; border: 0; color: white; font: inherit; text-transform: uppercase; }
.menu-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 7vw; max-width: 1200px; }
.menu-links a { display: flex; align-items: baseline; gap: 15px; padding: 8px 0; border-bottom: 1px solid #ffffff5e; font-family: Arial, Helvetica, sans-serif; font-size: clamp(27px,4.8vw,72px); font-weight: 750; letter-spacing: -.06em; line-height: 1; transition: color .2s, transform .25s; }
.menu-links a:hover { color: #bbcbff; transform: translateX(8px); }
.menu-links span { color: #aab3df; font: 12px ui-monospace,Consolas,monospace; letter-spacing: 0; }
.site-menu p { color: #a6add4; font-size: 12px; }
.transition { display: none; }
#app { height: 100svh; overflow: hidden; outline: none; }

/* One continuous place. Camera movement translates the entire world. */
.experience { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #0b0d27; isolation: isolate; touch-action: pan-y pinch-zoom; }
.experience:before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 60% 50%,#4650a4 0,#1b245c 35%,#0a0c27 82%); }
.atmosphere { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#05071fbb,transparent 50%),url('afsana-studio.webp') center / cover no-repeat; opacity: .35; transform: scale(1.08) translateX(var(--parallax,0px)); transition: transform .2s; }
.particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .65; }
.floor { position: absolute; left: -30%; bottom: -39%; width: 160%; height: 72%; pointer-events: none; background: repeating-linear-gradient(90deg,transparent 0 6.95%,#a0adfa25 7% 7.03%,transparent 7.08% 14%),repeating-linear-gradient(0deg,transparent 0 10%,#a0adfa18 10.2% 10.3%,transparent 10.5% 20%); transform: perspective(540px) rotateX(74deg); transform-origin: center; mask-image: linear-gradient(0deg,black 30%,transparent 94%); }
.world { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.world:before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg,transparent,#b4b5f555 10%,#b4b5f555 90%,transparent); pointer-events: none; }
.world:after { content: ''; position: absolute; left: 0; right: 0; bottom: 10%; height: 2px; background: linear-gradient(90deg,#8088d400,#8088d488,#8088d400); pointer-events: none; }
.world-item { position: absolute; top: 50%; transform: translateY(-50%); opacity: .22; filter: blur(3px); transition: opacity .65s,filter .65s,transform .65s; }
.world-item.in-view { opacity: 1; filter: none; transform: translateY(-50%); }
.eyebrow { color: #c3c7eb; font-size: 11px; line-height: 1.4; }
.eyebrow:before { content: '— '; color: var(--cyan); }
.world-title { font-size: clamp(60px,8.5vw,145px); font-weight: 800; letter-spacing: -.085em; line-height: .86; text-transform: uppercase; margin: 25px 0; }
.world-title span { display: block; }
.world-copy { font-size: clamp(17px,1.5vw,24px); line-height: 1.34; max-width: 520px; color: #e1e2f3; }
.world-button { display: inline-flex; align-items: center; gap: 14px; padding: 13px 17px; border: 1px solid #e5e3f3a8; background: #f4f0e115; color: white; border-radius: 50px; font-size: 13px; font-weight: 700; margin-top: 25px; transition: background .25s,transform .25s; }
.world-button:hover { background: #f4f0e140; transform: translateY(-3px); }
.world-button b { font-size: 20px; font-weight: 400; }

/* Arrival and the story are part of the same world. */
.arrival { width: min(84vw,1120px); min-height: 600px; display: flex; align-items: center; }
.arrival .world-title { font-size: clamp(80px,12vw,205px); }
.arrival .world-title .outline { color: transparent; -webkit-text-stroke: 1px #f4f0e1; }
.arrival .world-copy { max-width: 470px; }
.arrival-mark { position: absolute; z-index: -1; right: 0; top: 2%; width: min(43vw,570px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#e5e4ffdf 0,#7499ff70 3%,#5667f93a 20%,transparent 65%); transform: translate(var(--drift-x,0px),var(--drift-y,0px)); transition: transform .3s; }
.story { width: min(82vw,1040px); min-height: 600px; padding: 65px 5vw; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg,#f4f0e1 0,#f1f0eb 73%,#d7dced 100%); color: #1d1b4b; box-shadow: 25px 45px 90px #05071e70; border-radius: 6px; }
.story:after { content: ''; position: absolute; right: 0; top: 0; width: 34%; height: 100%; background: var(--story-image,none) center / cover; opacity: .18; mix-blend-mode: multiply; pointer-events: none; }
.story .eyebrow { color: #4a4fa1; }
.story .world-title { font-size: clamp(58px,7vw,118px); }
.story .world-copy { color: #303454; max-width: 560px; }
.story-meaning { font-size: clamp(28px,3vw,45px); font-weight: 700; letter-spacing: -.05em; margin: 10px 0; }
.story-divider { height: 1px; background: #858bad; margin: 28px 0 10px; width: 60%; }

/* The studio is a spatial gallery of responsive doors. */
.studio-gateway { width: min(60vw,750px); text-align: center; }
.studio-gateway .world-title { font-size: clamp(75px,9vw,150px); }
.studio-gateway .world-copy { margin: auto; }
.studio-gateway .eyebrow:before { content: ''; }
.gateway-ring { position: absolute; width: min(45vw,540px); aspect-ratio: 1; border: 1px solid #dddfff66; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateX(65deg); pointer-events: none; box-shadow: 0 0 80px #7081dc5b; }
.studio-door { --accent: #7987d9; width: min(33vw,480px); min-height: min(65vh,620px); padding: 26px; border: 1px solid #d7dcff8c; background: linear-gradient(160deg,#747bca40,#0c113bb0 53%),linear-gradient(115deg,#353f91,#141737); box-shadow: 25px 35px 80px #05071fb0; display: flex; flex-direction: column; justify-content: space-between; position: absolute; cursor: pointer; isolation: isolate; transform: perspective(900px) rotateY(var(--tilt,0deg)) translateY(var(--float,0px)); transition: border-color .3s,box-shadow .4s,transform .35s; overflow: hidden; }
.studio-door:before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 75% 25%,var(--accent),transparent 49%); opacity: .62; }
.studio-door:after { content: ''; position: absolute; width: 65%; aspect-ratio: 1; border: 1px solid #ffffff65; border-radius: 50%; right: -28%; top: 10%; transform: rotate(30deg) scaleX(1.4); opacity: .45; }
.studio-door:hover,.studio-door:focus-visible,.studio-door.near { border-color: #fff; box-shadow: 0 30px 100px #02031eea,0 0 60px color-mix(in srgb,var(--accent),transparent 55%); }
.studio-door:hover { transform: perspective(900px) rotateY(0deg) translateY(-15px); }
.studio-door .portal-index { color: #d7d9f2; font-size: 12px; }
.door-heading { font-size: clamp(33px,4vw,66px); font-weight: 800; line-height: .94; letter-spacing: -.07em; text-transform: uppercase; max-width: 430px; }
.door-prompt { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .13em; font-family: ui-monospace,Consolas,monospace; text-transform: uppercase; }
.door-prompt b { font-size: 27px; font-weight: 300; }
.door-progress { position: absolute; left: 0; bottom: 0; width: 0; height: 5px; background: #f4f0e1; }
.studio-door.dwelling .door-progress { width: 100%; transition: width 1.05s linear; }
.studio-door[data-slug="branding"] .door-art { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,#10143ef2,#17194444),url('assets/afsana-campaign.jpeg') 25% center / cover; opacity: .72; }
.studio-door[data-slug="creative"] .door-art { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,#10143ed9,#17194444),url('afsana-studio.webp') 76% center / cover; opacity: .75; }
.studio-door[data-slug="technology"] .door-art { position: absolute; z-index: -1; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 24px,#b7ecff25 25px 26px,transparent 27px 48px); }
.studio-door[data-slug="digital"] .door-art { position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(circle at 70% 20%,transparent 0 28px,#a6e8ff4d 29px 30px,transparent 31px 55px); }
.studio-door[data-slug="events"] .door-art { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 65% 0,#ced0ff88,transparent 60%); }
.studio-door[data-slug="talent"] .door-art { position: absolute; z-index: -1; inset: 0; background: linear-gradient(130deg,transparent 40%,#ffdff552 42% 44%,transparent 46%); }

.method-space { width: min(92vw,1150px); }
.method-space .world-title { font-size: clamp(68px,7vw,120px); }
.method-nodes { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #d6d8f064; border-left: 1px solid #d6d8f064; margin-top: 35px; }
.method-node { min-height: 143px; padding: 17px; text-align: left; color: white; background: #f4f0e10b; border: 0; border-right: 1px solid #d6d8f064; border-bottom: 1px solid #d6d8f064; display: flex; flex-direction: column; justify-content: space-between; transition: background .3s,transform .3s; }
.method-node:hover,.method-node:focus-visible { background: #7982cf88; transform: translateY(-5px); }
.method-node strong { font-size: clamp(22px,2.3vw,38px); letter-spacing: -.06em; text-transform: uppercase; }
.method-node span:last-child { color: #d7d8ec; font-size: 13px; line-height: 1.3; }
.future { width: min(90vw,1100px); }
.future .world-title { font-size: clamp(73px,9vw,155px); }
.future .world-title span:last-child { color: #aabaff; }
.future .world-copy { max-width: 600px; }
.future-actions { display: flex; flex-wrap: wrap; gap: 15px; }

/* Spatial navigation stays visible while travelling. */
.world-hud { position: fixed; z-index: 20; inset: auto clamp(20px,3.5vw,60px) 22px; display: grid; grid-template-columns: 1fr minmax(200px,420px) 1fr; align-items: end; gap: 20px; pointer-events: none; font-size: 10px; }
.world-hud > * { pointer-events: auto; }
.travel-hint { color: #c9ceef; line-height: 1.6; max-width: 230px; }
.travel-hint b { display: block; color: white; font-size: 13px; margin-top: 4px; }
.timeline { display: flex; justify-content: space-between; gap: 7px; position: relative; padding-top: 13px; }
.timeline:before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: #ffffff52; }
.timeline:after { content: ''; position: absolute; left: 0; top: 2px; height: 2px; width: var(--progress,0%); background: #d1d8ff; }
.timeline button { border: 0; background: none; color: #bec4df; padding: 7px 0; font: inherit; letter-spacing: inherit; text-transform: uppercase; white-space: nowrap; }
.timeline button.active { color: white; }
.timeline button:before { content: ''; display: block; position: absolute; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.nav-arrows { display: flex; justify-content: end; gap: 8px; }
.nav-arrows button { width: 42px; height: 42px; border: 1px solid #ffffff94; border-radius: 50%; background: #20265f8c; color: white; font-size: 22px; }
.nav-arrows button:hover { background: #4a4fa1; }
.edge-zone { position: fixed; z-index: 12; top: 90px; bottom: 88px; width: 13vw; pointer-events: none; opacity: 0; transition: opacity .3s; display: flex; align-items: center; font-size: 64px; font-weight: 200; color: #d9e4ff; }
.edge-zone.left { left: 0; justify-content: flex-start; padding-left: 15px; background: linear-gradient(90deg,#4d62cc44,transparent); }
.edge-zone.right { right: 0; justify-content: flex-end; padding-right: 15px; background: linear-gradient(270deg,#4d62cc44,transparent); }
.edge-zone.active { opacity: 1; }

/* Objects open within the same environment. */
.detail-scrim { position: fixed; z-index: 23; inset: 0; background: #060820a6; opacity: 0; visibility: hidden; transition: opacity .45s,visibility .45s; }
.detail-scrim.open { opacity: 1; visibility: visible; }
.detail-panel { position: fixed; z-index: 24; top: 0; right: 0; height: 100svh; width: min(790px,63vw); overflow-y: auto; background: #f4f0e1; color: var(--ink); box-shadow: -40px 0 100px #0009; transform: translateX(103%); transition: transform .65s var(--ease); }
.detail-panel.open { transform: translateX(0); }
.panel-close { position: sticky; z-index: 2; top: 17px; float: right; margin: 18px 25px 0 0; border: 1px solid #343459; border-radius: 40px; padding: 9px 14px; background: #f4f0e1ee; color: #1d1b4b; font-size: 12px; }
.panel-art { min-height: 32vh; background: radial-gradient(circle at 60% 40%,var(--accent,#7778c8),#171944 75%); color: white; display: flex; align-items: end; padding: 25px clamp(25px,4vw,62px); position: relative; isolation: isolate; overflow: hidden; }
.panel-art:before { content: ''; width: 48vmin; height: 48vmin; border: 1px solid #fff8; border-radius: 50%; position: absolute; z-index: -1; right: -8%; top: -15%; transform: scaleX(1.45); }
.panel-art.branding { background: linear-gradient(0deg,#1b1d54b8,#1b1d5430),url('assets/afsana-campaign.jpeg') center / cover; }
.panel-art.creative { background: linear-gradient(0deg,#1b1d54b8,#1b1d5430),url('afsana-studio.webp') 75% center / cover; }
.panel-art h2 { font-size: clamp(48px,5.7vw,95px); text-transform: uppercase; line-height: .86; letter-spacing: -.075em; margin: 0; max-width: 620px; }
.panel-content { padding: clamp(30px,4vw,65px); }
.panel-kicker { color: #4a4fa1; font-size: 11px; }
.panel-tagline { font-size: clamp(26px,2.8vw,46px); font-weight: 700; line-height: 1.12; letter-spacing: -.05em; margin: 25px 0; }
.panel-content p { font-size: 17px; line-height: 1.5; max-width: 630px; }
.panel-content h3 { text-transform: uppercase; letter-spacing: .08em; font: 12px ui-monospace,Consolas,monospace; border-top: 1px solid #9a9eba; padding-top: 17px; margin-top: 36px; }
.panel-content ul { padding-left: 19px; display: grid; grid-template-columns: repeat(2,1fr); column-gap: 30px; line-height: 1.6; font-size: 15px; }
.panel-content li { margin: 4px 0; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.panel-actions button,.panel-actions a { border: 1px solid #41487b; color: #1d1b4b; background: none; border-radius: 40px; padding: 13px 18px; font-size: 14px; font-weight: 700; }
.panel-actions .primary { background: #4a4fa1; color: white; }
.package-tabs { display: flex; overflow-x: auto; gap: 8px; margin: 22px 0; }
.package-tabs button { flex: none; border: 1px solid #7377a9; background: none; border-radius: 40px; padding: 10px 13px; font-size: 12px; }
.package-tabs button[aria-selected="true"] { background: #4a4fa1; color: white; }
.tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.tier { border-top: 1px solid #9fa4bd; padding-top: 13px; }
.tier strong { font-size: 17px; }
.tier .price { display: block; color: #4a4fa1; font-size: 26px; letter-spacing: -.06em; font-weight: 800; margin: 8px 0; }
.tier ul { display: block; font-size: 13px; padding-left: 16px; }
.panel-note { font-size: 13px!important; color: #525777; }

@media(max-width:800px) {
  .site-header { height: 70px; padding: 0 20px; }
  .chapter-position { display: none; }
  .menu-button span { display: none; }
  .site-menu { padding: 90px 24px 24px; }
  .menu-links { grid-template-columns: 1fr; }
  .menu-links a { font-size: clamp(27px,7vw,48px); }
  .world-item { filter: none; }
  .arrival { width: 86vw; }
  .arrival .world-title { font-size: clamp(68px,14vw,115px); }
  .story { width: 86vw; min-height: 520px; padding: 35px; }
  .story .world-title { font-size: clamp(54px,10vw,90px); }
  .studio-gateway { width: 75vw; }
  .studio-door { width: 46vw; min-height: 49vh; }
  .door-heading { font-size: clamp(30px,5vw,51px); }
  .method-space { width: 85vw; }
  .method-nodes { grid-template-columns: repeat(2,1fr); }
  .future { width: 86vw; }
  .detail-panel { width: min(700px,86vw); }
  .world-hud { grid-template-columns: 1fr auto; }
  .timeline { display: none; }
  .travel-hint { max-width: 300px; }
}
@media(max-width:530px) {
  .site-header { height: 64px; }
  .logo { font-size: 18px; }
  .world-item { top: 48%; }
  .arrival { min-height: 500px; width: 85vw; }
  .arrival .world-title { font-size: 17vw; }
  .arrival-mark { width: 68vw; right: -14%; }
  .story { width: 88vw; min-height: 560px; padding: 30px; }
  .story .world-title { font-size: 13vw; }
  .story .world-copy { font-size: 16px; }
  .studio-gateway { width: 80vw; }
  .studio-gateway .world-title { font-size: 15vw; }
  .studio-door { width: 72vw; min-height: 55vh; padding: 22px; }
  .door-heading { font-size: 10vw; }
  .method-space .world-title { font-size: 14vw; }
  .method-nodes { grid-template-columns: 1fr 1fr; }
  .method-node { min-height: 120px; padding: 11px; }
  .method-node strong { font-size: 20px; }
  .method-node span:last-child { font-size: 11px; }
  .future .world-title { font-size: 15vw; }
  .world-hud { left: 16px; right: 16px; bottom: 16px; }
  .travel-hint { font-size: 9px; }
  .travel-hint b { font-size: 11px; }
  .nav-arrows button { width: 40px; height: 40px; }
  .detail-panel { width: 100%; }
  .panel-art { min-height: 29vh; }
  .panel-art h2 { font-size: 13vw; }
  .panel-content ul { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; }
  .edge-zone { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation-duration: .01ms!important; transition-duration: .01ms!important; scroll-behavior: auto!important; }
}

/* Vertical flight: the world follows a curved route while the camera banks gently. */
.experience { touch-action: pan-x pinch-zoom; }
.camera-shell { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.world { height: auto; }
.world:before,.world:after { display: none; }
.flight-path { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.flight-path path { fill: none; stroke: #bbc6ff; stroke-width: 3; stroke-opacity: .3; stroke-dasharray: 5 19; filter: drop-shadow(0 0 12px #8c9aff); }
.world-item,.studio-door { z-index: 1; }
.atmosphere { transform: scale(1.08) translateY(var(--parallax-y,0px)); }
.floor { left: -20%; right: -20%; top: 0; bottom: 0; width: 140%; height: 100%; background: repeating-linear-gradient(90deg,transparent 0 7%,#a0adfa13 7.05% 7.1%,transparent 7.15% 14%),radial-gradient(ellipse at 50% 50%,transparent 20%,#070a26b0 80%); transform: perspective(700px) rotateY(7deg); mask-image: radial-gradient(ellipse at center,black,transparent 80%); }
.edge-zone { left: 0; right: 0; width: 100%; height: 12vh; top: auto; bottom: auto; justify-content: center; padding: 0; font-size: 45px; }
.edge-zone.top { top: 84px; background: linear-gradient(#4d62cc3f,transparent); align-items: flex-start; padding-top: 8px; }
.edge-zone.bottom { bottom: 82px; background: linear-gradient(transparent,#4d62cc3f); align-items: flex-end; padding-bottom: 8px; }
.world-hud { display: flex; justify-content: space-between; align-items: end; }
.timeline { position: fixed; top: 34%; right: clamp(20px,3.5vw,60px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 0; }
.timeline:before { left: auto; right: 3px; top: 0; bottom: 0; width: 2px; height: auto; }
.timeline:after { left: auto; right: 3px; top: 0; width: 2px; height: var(--progress,0%); }
.timeline button { position: relative; padding: 8px 23px 8px 0; text-align: right; }
.timeline button:before { top: calc(50% - 4px); right: -1px; }
@media(max-width:800px) { .timeline { display: none; } }
@media(max-width:530px) { .edge-zone { display: none; } .arrival,.story,.method-space,.future { max-width: 88vw; } }

/* The continuous world gathers depth and changes character as it winds upward. */
.world-item { transform: translateY(-50%) scale(.91); transition: opacity .75s,filter .75s,transform 1s var(--ease); }
.world-item.in-view { transform: translateY(-50%) scale(1); }
.flight-path path { stroke: #cfdaff; stroke-width: 2; stroke-opacity: .5; stroke-dasharray: 3 13; filter: drop-shadow(0 0 14px #b0baff); }
.arrival { isolation: isolate; }
.arrival > div:nth-child(2) { position: relative; z-index: 2; }
.arrival .world-title { font-size: clamp(72px,10vw,168px); }
.arrival .world-title span:nth-child(2) { color: #b9c9ff; }
.arrival-photo { position: absolute; right: -3%; top: 50%; width: min(42vw,540px); height: min(78vh,770px); overflow: hidden; border-radius: 46% 46% 3px 3px; transform: translateY(-50%) perspective(950px) rotateY(-12deg) rotateZ(3deg); box-shadow: 40px 45px 100px #03051fa8; opacity: .78; z-index: 0; }
.arrival-photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#171d5c82,transparent 48%),linear-gradient(0deg,#171d5ca8,transparent 65%); }
.arrival-photo img { width: 100%; height: 100%; object-fit: cover; }
.arrival-photo span { position: absolute; z-index: 1; bottom: 18px; right: 18px; color: white; font: 10px ui-monospace,Consolas,monospace; letter-spacing: .12em; }
.arrival .world-copy { position: relative; z-index: 3; text-shadow: 0 2px 15px #0b0d27; }
.arrival-mark { z-index: 1; right: 20%; }
.studio-gateway .world-title span:last-child { color: #bac9ff; }
.studio-door { backdrop-filter: blur(12px); }
.studio-door .door-art { position: absolute; inset: 0; z-index: -1; opacity: .43; background-size: cover!important; background-position: center!important; filter: saturate(.85); transition: transform .8s var(--ease),opacity .6s; }
.studio-door:hover .door-art,.studio-door:focus-visible .door-art { transform: scale(1.15); opacity: .7; }
.studio-door[data-slug] .door-art { background: linear-gradient(0deg,#090c2bf2,#17194422),var(--door-image,none) center / cover; }
.studio-door .door-word { position: absolute; left: 0; top: 35%; width: 100%; color: #ffffff18; text-align: center; font-size: clamp(70px,9vw,155px); font-weight: 900; letter-spacing: -.09em; line-height: 1; transform: rotate(-90deg) scale(.9); pointer-events: none; }
.studio-door .door-heading { position: relative; margin-top: auto; text-shadow: 0 2px 18px #090c36bd; }
.door-line { position: relative; margin: 12px 0 26px; font-size: clamp(15px,1.3vw,18px); line-height: 1.3; max-width: 310px; color: #e0e9ff; }
.door-prompt { position: relative; border-top: 1px solid #ffffff89; padding-top: 14px; }
.door-progress { z-index: 2; }

/* Each service is a destination inside the journey, with a shared navigation language. */
.detail-scrim { z-index: 49; }
.detail-panel { z-index: 50; }
.detail-panel.scene-mode { width: 100vw; left: 0; right: 0; background: #0b0d27; color: var(--cream); transform: translateY(105%) scale(.96); transform-origin: center; transition: transform .78s var(--ease); }
.detail-panel.scene-mode.open { transform: translateY(0) scale(1); }
.scene-mode .panel-close { position: fixed; float: none; top: 19px; left: clamp(18px,4vw,68px); margin: 0; padding: 11px 17px; background: #101433df; color: white; border: 1px solid #ffffff75; z-index: 8; backdrop-filter: blur(12px); font-size: 13px; }
.scene-mode .panel-close span { display: inline-block; margin-left: 15px; font-size: 19px; vertical-align: -2px; }
.scene-hero { position: relative; height: 100svh; min-height: 570px; overflow: hidden; isolation: isolate; background: #121538; }
.scene-hero:before { content: ''; position: absolute; z-index: 2; inset: 0; background: radial-gradient(circle at 72% 36%,color-mix(in srgb,var(--accent),transparent 82%),transparent 43%); pointer-events: none; }
.scene-hero:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#070922eb 0%,#0b0d2899 42%,#0b0d2812 100%),linear-gradient(0deg,#070922 0%,transparent 42%); z-index: 1; pointer-events: none; }
.scene-photo { display: block; position: absolute; width: 108%; height: 112%; left: -4%; top: -6%; object-fit: cover; object-position: center; transform: scale(1.04) translate3d(var(--scene-x,0px),var(--scene-y,0px),0) translateY(var(--scene-scroll,0px)); filter: saturate(.8) contrast(1.08); }
.scene-hero[data-scene="digital"] .scene-photo { object-position: center 35%; }
.scene-hero[data-scene="events"] .scene-photo { object-position: center 66%; }
.scene-grid { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,#ffffff15 1px,transparent 1px) 0 0/25% 100%; mask-image: linear-gradient(90deg,black,transparent 80%); pointer-events: none; }
.scene-large-word { position: absolute; z-index: 2; right: -2vw; top: 16%; writing-mode: vertical-rl; font-size: clamp(115px,23vw,430px); font-weight: 900; line-height: .73; letter-spacing: -.11em; color: #ffffff18; text-transform: uppercase; pointer-events: none; transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0); }
.scene-hero-content { position: absolute; z-index: 3; left: clamp(26px,7vw,130px); right: 23%; bottom: clamp(52px,9vh,105px); }
.scene-index { font: 12px ui-monospace,Consolas,monospace; letter-spacing: .16em; color: var(--accent,#a9c6ff); text-transform: uppercase; }
.scene-declaration { margin-top: 29px; color: #e0e6ff; font-size: clamp(21px,2.8vw,38px); line-height: 1.17; font-weight: 500; }
.scene-hero h2 { margin: 16px 0 18px; max-width: 1050px; font-size: clamp(78px,10vw,170px); font-weight: 850; letter-spacing: -.09em; line-height: .82; text-transform: uppercase; text-wrap: balance; }
.scene-hero-content > p { max-width: 650px; font-size: clamp(18px,1.7vw,25px); line-height: 1.3; color: #f0effc; }
.scene-down { display: flex; align-items: center; gap: 18px; margin-top: 42px; font: 12px ui-monospace,Consolas,monospace; text-transform: uppercase; letter-spacing: .12em; }
.scene-down b { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #fff9; border-radius: 50%; font-size: 19px; }
.scene-image-note { position: absolute; z-index: 3; right: 3vw; bottom: 26px; font: 11px ui-monospace,Consolas,monospace; color: #f7f7ffc2; letter-spacing: .04em; }
.scene-information { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: clamp(75px,10vw,165px) clamp(26px,8vw,145px) 80px; background: radial-gradient(circle at 80% 12%,#4a4fa131,transparent 55%),#111432; }
.scene-statement p { margin: 32px 0 0; font-size: clamp(34px,4vw,70px); line-height: 1.05; letter-spacing: -.06em; font-weight: 700; }
.scene-capabilities { padding-top: 15px; }
.scene-capabilities ul { list-style: none; margin: 26px 0; padding: 0; }
.scene-capabilities li { display: flex; gap: 24px; padding: 22px 0; border-top: 1px solid #e2e5ff57; font-size: clamp(17px,1.65vw,24px); line-height: 1.24; }
.scene-capabilities li span { flex: none; font: 12px ui-monospace,Consolas,monospace; color: #adbbf5; margin-top: 5px; }
.scene-next { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-top: 55px; border-top: 1px solid #e3e7ff61; }
.scene-next p { font-size: clamp(22px,2vw,33px); line-height: 1.13; max-width: 500px; margin: 15px 0 0; }
.scene-next .panel-actions { margin: 0; justify-content: flex-end; }
.scene-next .panel-actions button { color: white; border-color: #d8deff9c; }
.scene-next .panel-actions .primary { background: #eef0ff; color: #191b4b; border-color: #eef0ff; }
.scene-next .panel-actions button:hover { background: #4a4fa1; color: white; }

/* A small interactive study makes the first service a live demonstration. */
.identity-lab { background: #ececfa; color: #1d1b4b; padding: clamp(65px,9vw,140px) clamp(25px,8vw,145px); }
.identity-lab-heading { display: grid; grid-template-columns: 1fr 1.2fr; column-gap: 6vw; align-items: end; margin-bottom: 40px; }
.identity-lab-heading .scene-index { grid-column: 1/-1; color: #5059a6; }
.identity-lab h3 { font-size: clamp(42px,6.5vw,100px); line-height: .92; letter-spacing: -.075em; margin: 27px 0 0; text-transform: uppercase; }
.identity-lab-heading p { font-size: clamp(18px,2vw,28px); max-width: 440px; line-height: 1.23; margin: 0; }
.identity-stage { position: relative; height: clamp(360px,44vw,640px); overflow: hidden; background: #1d1b4b; box-shadow: 22px 25px 60px #1d1b4b42; }
.identity-before,.identity-after { position: absolute; inset: 0; padding: clamp(24px,3vw,50px); display: flex; flex-direction: column; justify-content: space-between; }
.identity-before { color: white; background: linear-gradient(90deg,#1d1b4be8,#1d1b4b22),url('assets/stock-brand.webp') center / cover; }
.identity-after { color: #1d1b4b; background: #f3f0e6 url('assets/afsana-mark-pattern.jpeg') right center / 33% auto no-repeat; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.identity-before span,.identity-after span,.identity-before i,.identity-after i { font: normal 12px ui-monospace,Consolas,monospace; letter-spacing: .14em; }
.identity-before strong,.identity-after strong { font-size: clamp(44px,7vw,124px); line-height: .87; letter-spacing: -.08em; text-transform: uppercase; }
.identity-before strong { font-weight: 400; font-style: italic; }
.identity-after strong { font-weight: 900; }
.identity-cut { position: absolute; left: var(--reveal); top: 0; bottom: 0; width: 3px; background: #ffffff; box-shadow: 0 0 25px #1d1b4b; pointer-events: none; }
.identity-cut:after { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: white; color: #1d1b4b; font-size: 24px; box-shadow: 0 8px 22px #0a0c3a55; }
.identity-control { margin-top: 32px; }
.identity-control label { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; }
.identity-control label b { text-transform: uppercase; }
.identity-control input { width: 100%; margin: 22px 0 8px; accent-color: #4a4fa1; cursor: ew-resize; }
.identity-scale { display: flex; justify-content: space-between; color: #52598f; font: 12px ui-monospace,Consolas,monospace; letter-spacing: .12em; }

@media(max-width:800px) {
  .arrival-photo { right: -8%; width: 50vw; opacity: .45; }
  .scene-hero-content { right: 8%; }
  .scene-hero h2 { font-size: clamp(70px,11vw,115px); }
  .scene-information { gap: 50px; }
  .scene-next { display: block; }
  .scene-next .panel-actions { justify-content: flex-start; margin-top: 25px; }
  .identity-lab-heading { grid-template-columns: 1fr; }
  .identity-lab-heading p { margin-top: 23px; }
}
@media(max-width:530px) {
  .arrival .world-title { font-size: 16.2vw; }
  .arrival-photo { width: 75vw; height: 75vh; right: -11%; opacity: .35; }
  .arrival .world-copy { max-width: 83vw; }
  .studio-door .door-word { font-size: 28vw; }
  .door-line { font-size: 15px; }
  .scene-mode .panel-close { top: 13px; left: 16px; padding: 10px 14px; }
  .scene-hero { min-height: 620px; }
  .scene-hero:after { background: linear-gradient(0deg,#070922 0%,#0b0d28aa 65%,#0b0d2830 100%); }
  .scene-photo { width: 140%; height: 100%; left: -20%; top: 0; }
  .scene-hero-content { left: 25px; right: 23px; bottom: 60px; }
  .scene-declaration { font-size: 22px; margin-top: 24px; }
  .scene-hero h2 { font-size: 15vw; line-height: .88; margin: 18px 0; }
  .scene-hero-content > p { font-size: 18px; }
  .scene-large-word { font-size: 35vw; right: 2vw; top: 17%; }
  .scene-down { margin-top: 27px; }
  .scene-image-note { right: 18px; bottom: 15px; font-size: 9px; }
  .scene-information { display: block; padding: 75px 25px 80px; }
  .scene-statement p { font-size: 37px; }
  .scene-capabilities { padding-top: 66px; }
  .scene-next { margin-top: 45px; }
  .scene-next .panel-actions { display: flex; flex-direction: column; align-items: stretch; }
  .scene-next .panel-actions button { text-align: center; }
  .identity-lab { padding: 70px 25px; }
  .identity-lab h3 { font-size: 13vw; }
  .identity-stage { height: 370px; }
  .identity-before,.identity-after { padding: 22px; }
  .identity-before strong,.identity-after strong { font-size: 11vw; }
  .identity-after { background-size: 65% auto; }
}
@media(prefers-reduced-motion:reduce) {
  .scene-photo,.scene-large-word { transform: none!important; }
  .detail-panel.scene-mode { transition-duration: .01ms; }
}

/* Brand foundation unfolds as editorial places along the same flight. */
.site-menu { overflow-y: auto; }
.about-space { width: min(89vw,1140px); min-height: min(78vh,750px); padding: clamp(45px,6vw,105px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #121635; box-shadow: 28px 40px 95px #05071fc9; }
.about-image { position: absolute; inset: 0 0 0 46%; z-index: -1; overflow: hidden; }
.about-image:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#121635 2%,#12163570 42%,transparent 100%),linear-gradient(0deg,#12163599,transparent 60%); }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; filter: saturate(.7); }
.about-image span { position: absolute; z-index: 1; bottom: 18px; right: 20px; font: 10px ui-monospace,Consolas,monospace; letter-spacing: .1em; color: #fff; }
.about-text { max-width: 700px; position: relative; z-index: 1; }
.about-space .world-title { font-size: clamp(57px,6.5vw,105px); }
.about-space .world-title span:nth-child(2) { color: #bcc8ff; }
.about-space .world-copy { max-width: 560px; }
.about-principle { border-left: 2px solid #a9b9ff; margin: 28px 0 0; padding: 6px 0 6px 20px; color: #cbd5ff; font-size: clamp(17px,1.7vw,25px); font-weight: 700; }

.mission-space { width: min(86vw,1080px); min-height: min(77vh,760px); padding: clamp(50px,6vw,100px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 95% 15%,#7b85d25c,transparent 40%),linear-gradient(135deg,#1e2256,#0d102f); border: 1px solid #adb9ee64; box-shadow: 35px 35px 110px #0205199c; }
.mission-number { position: absolute; top: -12%; right: -4%; z-index: -1; color: #c7d3ff1c; font-size: clamp(290px,35vw,550px); font-weight: 900; letter-spacing: -.13em; line-height: 1; }
.mission-space .world-title { font-size: clamp(63px,7vw,115px); max-width: 860px; }
.mission-space .world-title span:last-child { color: #b6c7ff; }
.mission-quote { font-size: clamp(22px,2.25vw,34px); line-height: 1.18; max-width: 900px; margin: 25px 0 0; letter-spacing: -.025em; }
.mission-foot { display: flex; align-items: end; justify-content: space-between; gap: 22px; border-top: 1px solid #d7dcff66; padding-top: 18px; margin-top: 34px; }
.mission-foot span { color: #b9c8fa; font: 11px ui-monospace,Consolas,monospace; letter-spacing: .15em; }
.mission-foot .world-button { margin: 0; }

.values-space { width: min(91vw,1220px); min-height: min(77vh,800px); padding: clamp(50px,5vw,80px); display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 4vw; background: linear-gradient(135deg,#f2f0e9,#e8eafa 80%); color: #1d1b4b; box-shadow: 30px 45px 100px #030625b0; border-radius: 3px; }
.values-space .eyebrow { color: #48518c; }
.values-space .world-title { font-size: clamp(58px,6vw,93px); }
.values-intro { color: #41456b; font-size: clamp(18px,1.6vw,23px); line-height: 1.35; max-width: 440px; }
.value-focus { min-height: 170px; margin-top: 30px; border-top: 1px solid #727aac8e; padding-top: 20px; }
.value-focus-index { display: block; font: 12px ui-monospace,Consolas,monospace; color: #51599d; letter-spacing: .13em; margin-bottom: 14px; }
.value-focus-name { display: block; font-size: clamp(35px,3.8vw,62px); line-height: 1; letter-spacing: -.06em; text-transform: uppercase; }
.value-focus-copy { margin: 13px 0 0; font-size: clamp(18px,1.7vw,25px); line-height: 1.25; }
.values-orbit { height: 450px; position: relative; border: 1px solid #8b94c48a; border-radius: 50%; transform: rotate(-15deg); }
.values-orbit:after { content: ''; position: absolute; inset: 22%; border: 1px dashed #929acd9e; border-radius: 50%; pointer-events: none; }
.value-node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; border: 1px solid #505c9bb8; border-radius: 100px; padding: 13px 17px; background: #f4f1e7; color: #1d1b4b; box-shadow: 0 8px 30px #1d1b4b1c; font-size: clamp(14px,1.1vw,17px); font-weight: 700; transform: rotate(15deg); transition: transform .3s,background .3s,color .3s,box-shadow .3s; white-space: nowrap; }
.value-node span { font: 11px ui-monospace,Consolas,monospace; color: #6972ac; }
.value-node.active,.value-node:hover,.value-node:focus-visible { background: #303570; color: white; box-shadow: 0 15px 40px #1d1b4b4c; transform: rotate(15deg) scale(1.08); }
.value-node.active span,.value-node:hover span,.value-node:focus-visible span { color: #cdd3ff; }
.value-node:nth-child(1) { left: 2%; top: 6%; }
.value-node:nth-child(2) { left: 49%; top: -5%; }
.value-node:nth-child(3) { right: -8%; top: 29%; }
.value-node:nth-child(4) { right: 0; bottom: 7%; }
.value-node:nth-child(5) { left: 32%; bottom: -5%; }
.value-node:nth-child(6) { left: -8%; bottom: 22%; }

.vision-space { width: min(88vw,1120px); min-height: min(76vh,780px); padding: clamp(55px,6vw,105px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; overflow: hidden; background: linear-gradient(115deg,#0e1431ee,#171f56bb 72%),var(--vision-image,none) center / cover; border: 1px solid #c3ccf355; box-shadow: 32px 36px 95px #050720ba; }
.vision-glow { position: absolute; z-index: -1; right: -16%; top: -35%; width: 80%; aspect-ratio: 1; border: 1px solid #a9baff55; border-radius: 50%; box-shadow: 0 0 120px #a0bcff5b,inset 0 0 130px #7383ef3f; }
.vision-space .world-title { font-size: clamp(58px,6.6vw,105px); max-width: 1040px; }
.vision-space .world-title span:last-child { color: #b6c9ff; }
.vision-quote { font-size: clamp(21px,2.15vw,33px); line-height: 1.2; max-width: 880px; letter-spacing: -.025em; margin: 20px 0 0; }
.vision-signoff { border-top: 1px solid #c7d0f76e; padding-top: 22px; margin-top: 45px; color: #c8d3ff; font: 12px ui-monospace,Consolas,monospace; letter-spacing: .13em; }
.future-motto { margin-top: 33px; color: #b5c4ff; font-size: clamp(20px,2vw,30px); font-weight: 700; }

@media(max-width:800px) {
  .about-space { width: 88vw; min-height: 620px; }
  .about-image { inset: 0 0 0 35%; opacity: .55; }
  .mission-space { width: 88vw; min-height: 620px; }
  .values-space { width: 88vw; min-height: 650px; grid-template-columns: 1fr; gap: 0; }
  .values-orbit { height: auto; border: 0; border-radius: 0; transform: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-top: 15px; }
  .values-orbit:after { display: none; }
  .value-node,.value-node.active,.value-node:hover,.value-node:focus-visible { position: static; transform: none; justify-content: center; text-align: center; white-space: normal; }
  .value-focus { min-height: 125px; }
  .vision-space { width: 88vw; min-height: 620px; }
}
@media(max-width:530px) {
  .site-menu { justify-content: flex-start; gap: 24px; }
  .menu-links { gap: 3px; }
  .menu-links a { font-size: 25px; padding: 6px 0; }
  .site-menu p { margin-top: auto; }
  .about-space { padding: 31px; min-height: 570px; }
  .about-image { inset: 0; opacity: .27; }
  .about-image:after { background: linear-gradient(90deg,#121635d9,#12163585); }
  .about-space .world-title { font-size: 12vw; }
  .about-space .world-copy { font-size: 16px; }
  .about-principle { font-size: 17px; margin-top: 19px; }
  .mission-space { padding: 32px; min-height: 590px; }
  .mission-space .world-title { font-size: 11vw; }
  .mission-quote { font-size: 21px; line-height: 1.22; }
  .mission-foot { align-items: start; flex-direction: column; }
  .values-space { padding: 30px 24px; min-height: 620px; }
  .values-space .world-title { font-size: 11vw; }
  .values-intro { font-size: 17px; }
  .value-focus { min-height: 155px; }
  .value-focus-name { font-size: 38px; }
  .value-focus-copy { font-size: 19px; }
  .values-orbit { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .value-node { padding: 11px 7px; min-height: 46px; font-size: 13px; }
  .value-node span { font-size: 10px; }
  .vision-space { min-height: 620px; padding: 35px; }
  .vision-space .world-title { font-size: 10.7vw; }
  .vision-quote { font-size: 20px; }
  .vision-signoff { font-size: 10px; line-height: 1.5; }
}

.arrival-photo picture,.about-image picture { display: contents; }
.world-item.is-distant,.studio-door.is-distant { visibility: hidden; }
@media(max-width:800px) {
  .studio-door { backdrop-filter: none; }
  .flight-path path { filter: drop-shadow(0 0 8px #b0baff); }
}

/* User supplied AFSANA imagery */
.gateway-mark { position: absolute; z-index: -1; width: min(52vw,620px); height: 100%; object-fit: contain; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .2; filter: drop-shadow(0 0 28px #7587ff); pointer-events: none; }
.studio-door .door-illustration { position: absolute; z-index: -1; pointer-events: none; object-fit: contain; filter: drop-shadow(0 16px 30px #020619b8); opacity: .92; transition: transform .6s,opacity .4s; }
.studio-door .camera-hand { width: 75%; height: 78%; right: -5%; top: 7%; }
.studio-door .camera-rig { width: 58%; height: 90%; right: 0; top: 3%; }
.studio-door:hover .door-illustration,.studio-door:focus-visible .door-illustration { transform: scale(1.06) translateY(-5px); opacity: 1; }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; filter: saturate(.72); }
.about-image span { z-index: 1; }
.vision-space { background-image: linear-gradient(115deg,#0e1431ed,#171f5699 72%),var(--vision-image,none); background-position: center; background-size: cover; }
.scene-hero[data-scene="technology"] { background: #080d21 url('assets/technology-vision.jpg') center / cover; }
.scene-hero[data-scene="technology"] .scene-photo { opacity: .12; }
@media (max-width: 800px) {
  .gateway-mark { width: 88vw; opacity: .15; }
  .studio-door .camera-hand { width: 82%; height: 66%; right: -8%; top: 12%; }
  .about-image img { object-position: center 65%; }
}
.scene-hero[data-scene="creative"] { background: #07152b url('assets/creative-camera-studio.png') center / cover; }
.scene-hero[data-scene="creative"] .scene-photo { opacity: .1; }

/* Talent & Influencers: replace the clipped cutout with a complete photo treatment. */
.studio-door { color: #fff; }
.scene-hero[data-scene="talent"] .scene-hero-content { right: 36%; max-width: 780px; }
.scene-hero[data-scene="talent"] h2 { font-size: clamp(70px,8.5vw,142px); }
.scene-hero[data-scene="talent"] .scene-image-note { left: auto; right: 3vw; }
@media (max-width: 800px) {
  .scene-hero[data-scene="talent"] .scene-hero-content { right: 24%; max-width: 680px; }
  .scene-hero[data-scene="talent"] h2 { font-size: clamp(64px,9vw,112px); }
}
@media (max-width: 530px) {
  .scene-hero[data-scene="talent"] .scene-hero-content { left: 25px; right: 20px; bottom: 62px; }
  .scene-hero[data-scene="talent"] h2 { max-width: 95%; font-size: clamp(48px,12.5vw,70px); line-height: .9; }
  .scene-hero[data-scene="talent"] .scene-declaration,
  .scene-hero[data-scene="talent"] .scene-hero-content > p,
  .scene-hero[data-scene="talent"] .scene-down { text-shadow: 0 2px 16px #05071fe0; }
  .scene-hero[data-scene="talent"] .scene-image-note { right: 16px; bottom: 17px; font-size: 9px; }
}