/* Studio depth studies: the existing door mark, real product surfaces and people.
   Geometry is expressed in CSS pixels; color and motion derive from the shared system. */
:root {
  --depth-sky:color-mix(in srgb,var(--studio-blue) 9%,var(--studio-white));
  --depth-edge:color-mix(in srgb,var(--studio-blue) 35%,var(--studio-white));
  --depth-shadow:0 36px 65px -25px rgb(10 25 55 / .38),0 4px 8px rgb(10 25 55 / .12);
}
.hero {overflow:hidden;min-height:0;position:relative;background:linear-gradient(180deg,var(--studio-white) 35%,var(--depth-sky));}
.hero-center {padding:44px 0 0;display:block;position:relative;text-align:center;}
.hero .eyebrow {display:none;}
.hero h1 {margin:10px 0 0;font-size:clamp(62px,8.5vw,132px);position:relative;z-index:2;}
.hero h1 .hero-second {font-size:.74em;letter-spacing:-.065em;margin-top:10px;}
.hero-stage {position:relative;height:440px;text-align:left;}
.hero-description {position:absolute;left:1%;top:85px;width:295px;align-items:flex-start;gap:28px;z-index:3;}
.hero-description p {font-size:17px;color:var(--studio-muted);line-height:1.55;}
.hero-actions {align-items:flex-start;flex-direction:column;gap:7px;}
.hero-actions .button {white-space:nowrap;}
.hero-actions .text-link {font-size:12px;gap:16px;}
.hero-bottom {position:relative;z-index:3;justify-content:center;padding-top:10px;padding-bottom:22px;border-color:color-mix(in srgb,var(--studio-blue) 12%,transparent);}
.spatial-scene {position:absolute;right:-2%;top:0;width:72%;height:440px;perspective:1200px;}
.scene-orbit {height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--scene-y,0deg)) rotateY(var(--scene-x,0deg));transition:transform var(--duration-stage) var(--ease-reveal);}
.scene-floor {position:absolute;left:15%;right:5%;height:100px;bottom:8px;background:radial-gradient(ellipse,rgb(24 59 125 / .20),transparent 66%);transform:rotate(-8deg);}
.portal-sculpture {position:absolute;left:45%;top:15px;width:178px;height:356px;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-28deg) rotateZ(13deg);z-index:3;}
.portal-layer {position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.portal-back {fill:var(--studio-blue);transform:translateZ(-28px);filter:drop-shadow(10px 26px 20px rgb(15 43 99 / .25));}
.portal-mid {fill:var(--depth-edge);transform:translateZ(-14px);}
.portal-front {transform:translateZ(0);filter:drop-shadow(1px 0 0 var(--depth-edge));}
.portal-side {position:absolute;left:0;top:0;width:28px;height:100%;background:linear-gradient(90deg,var(--studio-blue),var(--depth-edge));transform:rotateY(90deg);transform-origin:left;}
.scene-screen {position:absolute;border:4px solid var(--studio-ink);border-radius:12px;overflow:hidden;box-shadow:var(--depth-shadow);background:var(--studio-ink);}
.scene-screen img {display:block;width:100%;height:auto;}
.scene-screen .browser-bar {height:20px;}
.scene-screen .browser-bar span {font-size:8px;left:40%;}
.scene-screen-club {width:410px;left:3%;top:50px;transform:rotateY(22deg) rotateX(9deg) rotateZ(-9deg);z-index:1;}
.scene-screen-fan {width:350px;right:0;top:201px;transform:translateZ(50px) rotateY(-21deg) rotateX(12deg) rotateZ(9deg);z-index:4;}
.scene-label {position:absolute;left:8%;bottom:20px;font-size:10px;letter-spacing:.05em;display:flex;align-items:center;gap:8px;color:var(--studio-muted);}
.scene-label span {width:6px;height:6px;border-radius:100%;background:var(--studio-blue);}
.scene-screen-club {animation:surface-in var(--duration-reveal-long) var(--ease-reveal) both;}
.portal-sculpture {animation:sculpture-in var(--duration-reveal-long) var(--ease-reveal) var(--duration-fast) both;}
.scene-screen-fan {animation:surface-in var(--duration-reveal-long) var(--ease-reveal) var(--duration-base) both;}
@keyframes surface-in {from {opacity:0;translate:0 42px;}to {opacity:1;translate:0 0;}}
@keyframes sculpture-in {from {opacity:0;translate:0 60px;}to {opacity:1;translate:0 0;}}
.intro-band {margin-top:0;}
.featured-project {min-height:560px;perspective:1400px;}
.featured-screen {transform:translate(10px,10px) rotateY(-16deg) rotateX(6deg) rotateZ(-3deg);box-shadow:var(--depth-shadow);border-width:5px;}
.depth-project {margin:28px var(--studio-gutter) 0;padding:60px 0 60px 48px;min-height:610px;border-radius:var(--studio-radius);overflow:hidden;display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;position:relative;gap:20px;}
.depth-project-copy {position:relative;z-index:3;}
.depth-project h3 {font-size:clamp(42px,4.7vw,72px);line-height:.98;margin:42px 0 24px;letter-spacing:-.06em;}
.depth-project-copy>p {font-size:16px;line-height:1.55;max-width:340px;margin-bottom:28px;}
.project-detail {display:block;margin-top:46px;font-size:9px;letter-spacing:.08em;opacity:.6;}
.fan-project {background:var(--depth-sky);}
.fan-project .project-tag {color:var(--studio-muted);}
.fan-project .depth-project-copy>p {color:color-mix(in srgb,var(--studio-muted) 88%,var(--studio-ink));}
.fan-scene {border:0;background:transparent;min-width:0;width:100%;height:450px;position:relative;padding:0;perspective:1100px;color:var(--studio-muted);}
.fan-window {position:absolute;left:0;top:34px;width:860px;border:6px solid var(--studio-ink);border-radius:14px;overflow:hidden;transform:rotateY(-22deg) rotateX(9deg) rotateZ(-4deg);box-shadow:var(--depth-shadow);transition:transform var(--duration-reveal) var(--ease-reveal);}
.fan-window img {width:100%;height:auto;}
.fan-scene:hover .fan-window {transform:rotateY(-17deg) rotateX(5deg) rotateZ(-3deg) translateY(-8px);}
.fan-label {display:none;}
.codix-project {background:var(--studio-ink);color:var(--studio-white);min-height:620px;}
.codix-project .depth-project-copy>p {color:var(--meridian-fg-2);}
.codix-scene {min-width:0;width:100%;height:500px;background:none;border:0;padding:0;position:relative;perspective:1000px;text-align:left;color:var(--studio-white);}
.codix-chat {position:absolute;left:10%;top:5%;width:260px;height:420px;overflow:hidden;background:var(--club-graphite);border:5px solid color-mix(in srgb,var(--studio-white) 20%,var(--studio-ink));border-radius:22px;transform:rotateY(17deg) rotateZ(-9deg);box-shadow:var(--depth-shadow);}
.codix-chat>img {width:100%;height:auto;}
.codix-chat-head {height:60px;display:flex;align-items:center;gap:9px;padding:8px;background:var(--club-graphite);position:relative;z-index:1;font-size:13px;}
.codix-avatar {width:30px;height:30px;border-radius:50%;background:var(--club-acid);color:var(--studio-ink);display:grid;place-items:center;}
.codix-chat-head small {font-size:8px;color:var(--meridian-fg-2);display:block;}
.codix-chat-head>span:last-child {margin-left:auto;}
.codix-output {position:absolute;right:2%;top:20%;width:340px;aspect-ratio:1;overflow:hidden;border:1px solid color-mix(in srgb,var(--club-acid) 40%,transparent);border-radius:18px;transform:translateZ(40px) rotateY(-18deg) rotateZ(8deg);box-shadow:var(--depth-shadow);transition:transform var(--duration-reveal) var(--ease-reveal);background:var(--studio-ink);}
.codix-output img {position:absolute;width:156.25%;max-width:none;height:auto;left:-5.15%;top:-89.2%;}
.codix-scene:hover .codix-output {transform:translateZ(40px) rotateY(-12deg) rotateZ(5deg) translateY(-8px);}
.codix-caption {position:absolute;bottom:8px;left:14%;color:var(--meridian-fg-2);font-size:9px;letter-spacing:.08em;}
.sales-strip {display:flex;align-items:center;justify-content:space-between;padding-top:50px;gap:35px;}
.sales-strip h3 {font-size:27px;margin:15px 0 12px;}
.sales-strip p {font-size:14px;max-width:560px;color:var(--studio-muted);}
.sales-strip button {background:none;border:0;white-space:nowrap;}
.team-section {display:block;}
.team-intro {display:grid;grid-template-columns:1fr 1fr;gap:22px 80px;align-items:end;}
.team-intro .eyebrow {grid-column:1/-1;}
.team-intro h2 {margin:0;font-size:clamp(40px,5.4vw,80px);}
.team-intro>p:not(.eyebrow) {max-width:430px;margin:0 0 4px;}
.team-stamp {display:none;}
.people-list {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:60px;align-items:start;}
.people-list article {display:block;padding:0;border:0;}
.people-list article:nth-child(even) {margin-top:65px;}
.people-list article>img {width:100%;height:auto;aspect-ratio:4/4.7;object-fit:cover;border-radius:18px;margin-bottom:22px;filter:grayscale(1);}
.people-list article:first-child img {object-position:center;}
.people-list article>.anton-portrait {object-position:50% 22%;}
.people-list article>.kirill-portrait {object-position:50% 32%;}
.people-list article>.azamat-portrait {object-position:center;}
.people-list h3 {font-size:25px;}
.people-list p {font-size:13px;margin-top:12px;line-height:1.5;}
.people-list article>.arrow {display:none;}
.club-section {grid-template-columns:1.1fr 1fr;gap:7%;}
.club-visual {min-height:490px;padding:28px;justify-content:space-between;background:var(--studio-ink);perspective:1100px;}
.club-video-frame {margin:40px -3px;width:100%;border:3px solid var(--club-graphite);border-radius:10px;overflow:hidden;transform:rotateY(0);box-shadow:var(--depth-shadow);background:var(--studio-ink);}
.club-tour {width:100%;height:auto;aspect-ratio:1430/716;display:block;object-fit:contain;background:var(--studio-ink);}
.club-visual img {width:100%;height:auto;max-width:100%;margin:0;transform:none;}
.club-visual-bottom {display:flex;flex-direction:column;gap:8px;line-height:1.6;}
.case-details-list {padding-left:22px;font-size:15px;line-height:1.6;color:var(--studio-muted);}
.case-details-list li {margin-top:12px;}
#case-dialog[data-project="art"] .case-image {width:330px;max-width:100%;height:auto;margin:24px auto;}
#case-dialog[data-project="buyer"] .case-image {height:auto;}
@media (min-width:1500px) {
 .hero-stage {height:490px;}
 .spatial-scene {height:460px;top:10px;right:0;max-width:1050px;}
 .portal-sculpture {width:210px;height:420px;}
 .scene-screen-club {width:480px;}
 .scene-screen-fan {width:420px;}
 .hero-description {top:120px;width:330px;}
}
@media (max-width:1100px) and (min-width:768px) {
 .hero h1 {font-size:8.6vw;}
 .hero-stage {height:400px;}
 .hero-description {width:250px;top:55px;}
 .hero-description p {font-size:15px;}
 .spatial-scene {right:-12%;width:77%;transform:scale(.83);transform-origin:top center;}
 .scene-screen-club {left:0;width:340px;}
 .scene-screen-fan {width:300px;right:-4%;}
 .depth-project {padding:36px 0 36px 30px;min-height:540px;grid-template-columns:.9fr 1.1fr;}
 .depth-project h3 {font-size:43px;}
 .depth-project-copy>p {font-size:14px;}
 .fan-window {width:690px;}
 .codix-scene {transform:scale(.85);transform-origin:left center;width:118%;}
 .codix-output {width:285px;right:-8%;}
 .codix-chat {left:0;width:240px;}
 .club-section {gap:4%;}
 .club-visual {min-height:420px;padding:20px;}
 .club-copy h2 {font-size:44px;}
 .people-list {grid-template-columns:repeat(2,minmax(0,1fr));}
 .people-list article:nth-child(even) {margin-top:45px;}
 .people-list article:last-child {grid-column:1/-1;width:calc(50% - 12px);justify-self:center;margin-top:12px;}
}
@media (max-width:767px) {
 .hero-center {padding-top:35px;}
 .hero h1 {font-size:clamp(34px,9.6vw,68px);letter-spacing:-.065em;line-height:1.02;}
 .hero h1>span:first-child {white-space:normal;}
 .hero h1 .hero-second {font-size:.83em;line-height:1.08;margin-top:8px;}
 .hero-stage {height:auto;padding-top:325px;padding-bottom:22px;}
 .spatial-scene {top:0;right:50%;margin-right:-230px;width:460px;height:330px;transform:scale(.85);transform-origin:top center;}
 .portal-sculpture {width:136px;height:272px;left:37%;top:22px;}
 .scene-screen-club {width:248px;left:-1%;top:50px;border-width:3px;}
 .scene-screen-fan {width:215px;right:-1%;top:175px;border-width:3px;}
 .scene-screen .browser-bar {height:14px;}
 .scene-screen .browser-bar span {font-size:6px;}
 .scene-label {left:17%;bottom:-15px;font-size:9px;}
 .hero-description {position:relative;left:auto;top:auto;width:100%;max-width:420px;margin:auto;text-align:center;align-items:center;gap:22px;}
 .hero-description p {font-size:15px;max-width:330px;line-height:1.5;}
 .hero-actions {align-items:center;gap:7px;}
 .hero-actions .button {font-size:14px;min-height:52px;}
 .hero-bottom {display:none;}
 .hero-bottom p {display:none;}
 .hero-coordinate {display:block;font-size:8px;}
 .featured-project {min-height:0;padding-bottom:55px;}
 .featured-screen {transform:rotateY(-10deg) rotateX(4deg) rotateZ(-3deg);}
 .depth-project {margin:18px 14px 0;padding:30px 22px 0;grid-template-columns:minmax(0,1fr);gap:0;min-height:0;border-radius:24px;}
 .depth-project h3 {font-size:46px;margin:32px 0 20px;}
 .depth-project-copy>p {font-size:15px;max-width:400px;}
 .depth-project .project-tag {font-size:9px;}
 .project-detail {margin-top:27px;font-size:8px;}
 .fan-scene {height:300px;margin-top:25px;}
 .fan-window {width:530px;top:20px;left:-5px;transform:rotateY(-19deg) rotateX(8deg) rotateZ(-4deg);border-width:4px;}
 .fan-label {display:none;}
 .codix-scene {height:390px;width:350px;margin-left:calc((100% - 350px) / 2);margin-top:15px;}
 .codix-chat {width:200px;height:320px;left:0;top:20px;}
 .codix-chat-head {height:48px;font-size:10px;}
 .codix-chat-head small {font-size:7px;}
 .codix-output {width:240px;right:-4px;top:100px;border-radius:13px;}
 .codix-caption {bottom:15px;left:8%;font-size:8px;}
 .sales-strip {align-items:flex-start;flex-direction:column;gap:8px;padding-top:40px;}
 .sales-strip h3 {font-size:28px;}
 .sales-strip .eyebrow {font-size:9px;}
 .team-intro {display:block;}
 .team-intro h2 {margin:24px 0;font-size:43px;}
 .team-intro>p:not(.eyebrow) {font-size:15px;}
 .people-list {gap:14px;margin-top:35px;grid-template-columns:1fr 1fr;}
 .people-list article:nth-child(2),.people-list article:nth-child(4) {margin-top:45px;}
 .people-list article:last-child {grid-column:1/-1;width:calc(50% - 7px);justify-self:center;margin-top:12px;}
 .people-list article>img {aspect-ratio:4/5;border-radius:12px;margin-bottom:15px;}
 .people-list h3 {font-size:18px;line-height:1.12;}
 .people-list p {font-size:11px;margin-top:8px;}
 .club-section {grid-template-columns:minmax(0,1fr);gap:40px;}
 .club-visual {min-height:340px;padding:23px;}
 .club-video-frame {margin:30px 0;}
 .club-copy h2 {font-size:48px;}
}
@media (max-width:360px) {
 .spatial-scene {transform:scale(.72);}
 .hero-stage {padding-top:275px;}
 .hero-coordinate {display:none;}
 .depth-project h3 {font-size:39px;}
 .codix-scene {transform:scale(.87);transform-origin:left top;margin-left:-14px;height:335px;}
 .people-list h3 {font-size:16px;}
 .team-intro h2 {font-size:37px;}
}
@media (prefers-reduced-motion:reduce) {
 .scene-orbit {transform:none!important;transition:none;}
 .scene-screen,.portal-sculpture {animation:none;}
 .fan-window,.codix-output {transition:none;}
 .fan-scene:hover .fan-window {transform:rotateY(-22deg) rotateX(9deg) rotateZ(-4deg);}
 .codix-scene:hover .codix-output {transform:translateZ(40px) rotateY(-18deg) rotateZ(8deg);}
}

/* The workshop pairs the actual event footage with its take-home material bot. */
.workshop-project {background:var(--studio-blue);color:var(--studio-white);min-height:670px;}
.workshop-project .project-tag {color:var(--studio-white);opacity:1;}
.workshop-project .depth-project-copy>p {opacity:1;}
.workshop-source {display:inline-flex;align-items:center;min-height:44px;font-size:12px;margin-top:12px;text-decoration:underline;text-underline-offset:5px;}
.workshop-project :is(button,a):focus-visible {outline-color:var(--studio-white);}
.workshop-scene {height:550px;width:100%;min-width:0;border:0;background:none;padding:0;position:relative;perspective:1300px;color:var(--studio-white);}
.workshop-album {width:330px;aspect-ratio:482/640;position:absolute;left:0;top:30px;border-radius:18px;overflow:hidden;box-shadow:var(--depth-shadow);transform:rotateY(14deg) rotateZ(-7deg);}
.workshop-album>img {position:absolute;max-width:none;width:262.65%;height:auto;left:-6.22%;top:-44.38%;}
.workshop-album>span {position:absolute;bottom:0;left:0;right:0;padding:40px 20px 20px;background:linear-gradient(transparent,rgb(0 0 0 / .7));text-align:left;font-size:9px;letter-spacing:.06em;}
.workshop-album b {font-size:18px;font-weight:500;letter-spacing:-.02em;display:block;margin-top:4px;}
.workshop-bot {position:absolute;width:285px;right:6%;top:70px;max-height:445px;border:5px solid var(--studio-ink);border-radius:20px;overflow:hidden;box-shadow:var(--depth-shadow);transform:translateZ(40px) rotateY(-14deg) rotateZ(8deg);background:var(--studio-ink);}
.workshop-bot>img {width:100%;height:auto;}
#case-dialog[data-project="workshop"] .case-image {width:360px;height:auto;margin:24px auto;max-width:100%;}
@media (max-width:1100px) and (min-width:768px) {
 .workshop-scene {transform:scale(.85);transform-origin:left center;width:118%;}
 .workshop-album {width:260px;left:-10px;top:45px;}
 .workshop-bot {width:230px;right:-6%;top:120px;}
}
@media (max-width:767px) {
 .workshop-project {min-height:0;}
 .workshop-source {width:max-content;max-width:100%;padding:9px 0;}
 .workshop-scene {width:350px;height:390px;margin-left:calc((100% - 350px) / 2);margin-top:10px;}
 .workshop-album {width:230px;left:0;top:25px;border-radius:12px;}
 .workshop-album b {font-size:14px;}
 .workshop-bot {width:180px;right:0;top:55px;max-height:295px;border-radius:14px;}
}
@media (max-width:360px) {
 .workshop-scene {transform:scale(.87);transform-origin:left top;margin-left:-14px;height:340px;}
}