/* An original, live shop-window composition. The three surfaces share one stage. */
.hero{background:#edf0f5;min-height:770px}
.hero-copy{max-width:58%;padding-top:clamp(90px,10vh,140px)}
.hero-copy h1{font-size:clamp(62px,6.9vw,112px)}
.hero-copy>p{max-width:400px}
.hero-actions{flex-wrap:wrap}
.hero-index{color:#545c6a}
.hero-bottom{align-items:center}
.hero-credits>span{max-width:300px;line-height:1.4}
.atelier{position:absolute;inset:35px -1% 90px 49%;z-index:2;isolation:isolate;--scene-scale:1;--tilt-x:0deg;--tilt-y:0deg;--scroll-offset:0px}
.atelier-halo{position:absolute;inset:4% -13% -2% -18%;border-radius:50%;background:radial-gradient(ellipse,#d6e3d588 0%,#dae5d863 27%,#edf0f500 69%);transition:background 1.5s}
.atelier[data-active="1"] .atelier-halo{background:radial-gradient(ellipse,#edd5f3b3 0%,#e3dbe78a 27%,#edf0f500 69%)}
.atelier[data-active="2"] .atelier-halo{background:radial-gradient(ellipse,#c6d1f8b3 0%,#d6dff073 27%,#edf0f500 69%)}
.atelier-orbit{position:absolute;width:86%;height:76%;left:4%;top:10%;border:1px solid #9caac426;border-radius:50%;transform:rotate(-27deg)}
.atelier-orbit::after{content:'';position:absolute;width:10px;height:10px;background:#2345f5;border:3px solid #edf0f5;border-radius:50%;left:4%;top:26%;box-shadow:0 0 0 1px #2345f533}
.atelier-stage{position:absolute;inset:10% 0 17%;perspective:1600px;perspective-origin:50% 45%;pointer-events:none}
.atelier-rig{position:absolute;top:50%;left:50%;width:540px;height:370px;transform-style:preserve-3d;transform:translate(-50%,-50%) translateY(var(--scroll-offset)) scale(var(--scene-scale)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .5s ease-out}
.concept{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.2,.75,.2,1),opacity 1s;backface-visibility:hidden;will-change:transform}
.concept[data-slot="front"]{transform:translate3d(-10px,12px,70px) rotateX(6deg) rotateY(-13deg) rotateZ(-7deg);opacity:1;z-index:3}
.concept[data-slot="next"]{transform:translate3d(78px,-173px,-220px) rotateX(7deg) rotateY(-20deg) rotateZ(10deg) scale(.79);opacity:.8;z-index:1}
.concept[data-slot="back"]{transform:translate3d(88px,196px,-270px) rotateX(10deg) rotateY(-18deg) rotateZ(8deg) scale(.75);opacity:.7;z-index:0}
.concept-surface{position:absolute;inset:0;background:var(--concept-bg);color:var(--concept-ink);border-radius:13px;overflow:hidden;border:1px solid #ffffffb3;box-shadow:1px 1px 0 #ffffffe6,2px 3px 0 #a4adb933,3px 5px 0 #fff,4px 6px 0 #a4adb97a,10px 24px 35px #1c254b24,25px 55px 65px #17284815}
.concept-moka{--concept-bg:#e2ebd2;--concept-ink:#304231;--concept-accent:#334933}
.concept-petale{--concept-bg:#f0dff0;--concept-ink:#593559;--concept-accent:#71486c}
.concept-forme{--concept-bg:#f5f1e9;--concept-ink:#2345c8;--concept-accent:#2345f5}
.concept-bar{height:26px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#ffffffc9;padding:0 13px;font:500 8px/1 var(--sans);letter-spacing:.02em;color:#677079}
.concept-dots{letter-spacing:2px;font-size:6px;color:#bfc4ca}
.concept-nav{display:flex;justify-content:space-between;align-items:center;margin:18px 25px;position:relative;z-index:2}
.concept-nav>strong{font:800 27px/1 var(--display);letter-spacing:-.08em}
.concept-nav>strong>span{font:500 10px/1 var(--sans);vertical-align:top;letter-spacing:0;margin-left:3px}
.concept-nav>span{font-size:7px;letter-spacing:.02em}
.concept-copy{position:relative;z-index:2;margin:29px 27px 0;width:260px}
.concept-kicker{display:block;font-size:7px;letter-spacing:.16em;font-weight:650;margin-bottom:13px}
.concept-title{display:block;font:750 47px/.98 var(--display);letter-spacing:-.075em}
.concept-petale .concept-title{font-family:Georgia,serif;font-weight:400;font-size:46px;letter-spacing:-.045em;line-height:1.01;font-style:italic}
.concept-petale .concept-nav>strong{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em}
.concept-cta{display:inline-flex;align-items:center;gap:28px;margin-top:18px;padding:8px 12px;background:var(--concept-accent);color:white;font-size:8px;border-radius:3px}
.concept-cta b{font-weight:400;font-size:13px}
.concept-footer{position:absolute;bottom:14px;left:27px;font-size:6px;font-weight:600;letter-spacing:.12em}
.concept-disc{position:absolute;width:290px;height:290px;right:-20px;top:76px;border:1px solid currentColor;border-radius:50%;opacity:.1}
.concept-object{position:absolute;width:355px;height:355px;top:21px;right:-43px;transform:translateZ(65px);pointer-events:none}
.concept-object>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(6px 18px 13px #24251e24);animation:product-float 6s ease-in-out infinite;animation-play-state:paused}
.concept-petale .concept-object{width:370px;height:390px;right:-37px;top:-10px;transform:translateZ(75px) rotate(12deg)}
.concept-forme .concept-object{width:345px;height:355px;right:-31px;top:25px;transform:translateZ(65px) rotate(7deg)}
.concept-sticker{position:absolute;right:5px;bottom:3px;transform:translateZ(98px) rotate(10deg);display:grid;place-content:center;width:80px;height:80px;border-radius:50%;background:#f8eed0;color:#4f4435;box-shadow:0 6px 15px #24251815;font:600 11px/1.15 var(--sans);text-align:center;letter-spacing:-.025em}
.concept-petale .concept-sticker{background:#faf1b7;color:#694954;transform:translateZ(98px) rotate(-8deg)}
.concept-forme .concept-sticker{background:#f75b3e;color:white;transform:translateZ(98px) rotate(8deg)}
.atelier.is-running .concept[data-slot="front"] .concept-object>img{animation-play-state:running}
.brand-wordmark{display:flex;flex-direction:column;gap:5px}.brand-studio{font:650 12px/1 var(--sans);letter-spacing:.18em}.header .brand{flex-shrink:0}
.contact-email{display:inline-block;margin-top:22px;font-size:clamp(16px,1.6vw,22px);font-weight:500;text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}.brief-result>a{display:inline-flex;padding:11px 16px;border-radius:4px;background:white;color:var(--blue);font-size:14px;font-weight:600}
button.project-live{background:transparent;border:0;border-bottom:1px solid #b8b8b8;padding:0 0 4px;font-size:14px;text-align:left}.privacy-dialog a{text-decoration:underline;overflow-wrap:anywhere}
@media(max-width:440px){.header{gap:12px}.header .brand{font-size:30px}.nav-contact{max-width:155px;line-height:1.35;gap:8px}.nav-contact>span{flex-shrink:0}}
@keyframes product-float{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-13px) rotate(1deg)}}
.atelier-label{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap;color:#555f6f;font-size:12px;letter-spacing:-.01em}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #2345f50a}
.atelier-controls{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #ffffffc7;border-radius:50px;background:#ffffff8c;box-shadow:0 8px 22px #1b295209;backdrop-filter:blur(14px)}
.atelier-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:41px;min-width:98px;padding:9px 14px;border:0;border-radius:24px;color:#6b7280;background:transparent;white-space:nowrap;font:500 12px/1.2 var(--sans);transition:background .2s,color .2s,box-shadow .2s}
.atelier-controls button:hover{color:var(--ink);background:#fff6}
.atelier-controls button[aria-pressed="true"]{background:#fff;color:#222936;box-shadow:0 2px 8px #1b295213}
.scene-swatch{width:9px;height:9px;border-radius:50%;display:block;flex-shrink:0}
.swatch-moka{background:#a5be86}.swatch-petale{background:#c694c5}.swatch-forme{background:#3151e3}
@media(min-width:1650px){.atelier{inset:30px 1% 100px 49%}.atelier-stage{inset:7% 0 19%}.hero-copy{padding-top:120px}}
@media(max-width:1100px) and (min-width:761px){.hero-copy h1{font-size:clamp(59px,7vw,76px)}.hero-copy{padding-top:105px;max-width:59%}.hero-copy>p{max-width:320px}.atelier{left:48%;right:-3%}.atelier-stage{inset:12% 0 25%}.atelier-label{bottom:20%;font-size:10px}.atelier-controls{bottom:10%}.atelier-controls button{min-width:82px;font-size:11px;padding:8px 10px}.hero-credits>span{display:none}}
@media(max-width:760px){
  .hero{height:auto;min-height:0;padding-bottom:85px;overflow:hidden}
  .hero-topline{font-size:9px;max-width:100%;line-height:1.5}
  .hero-copy{padding-top:40px;max-width:100%}
  .hero-copy h1{font-size:clamp(53px,11.7vw,85px)}
  .hero-copy>p{max-width:360px;font-size:16px}
  .atelier{position:relative;inset:auto;height:520px;width:calc(100% + 48px);margin:15px -24px -5px}
  .atelier-stage{inset:10% 0 20%;perspective:1200px}
  .atelier-halo{inset:0 -12% 0}
  .atelier-orbit{height:75%;top:5%;left:4%;width:92%}
  .atelier-label{bottom:12%;font-size:11px}
  .atelier-controls{bottom:0%}
  .atelier-controls button{min-width:87px;font-size:12px;padding:9px 12px}
  .hero-bottom{align-items:flex-start;flex-direction:row;gap:15px;bottom:23px;font-size:8px;letter-spacing:.03em}
  .hero-bottom>span{max-width:200px;line-height:1.7}
  .hero-credits>span{display:none}
  .hero-credits button{font-size:11px;min-height:35px}
}
@media(max-width:440px){.atelier{height:430px;margin-top:10px}.atelier-label{bottom:13%}.atelier-stage{inset:8% 0 23%}.hero-copy h1{font-size:clamp(47px,11.8vw,56px)}}
@media(prefers-reduced-motion:reduce){
  .atelier-rig,.concept,.atelier-halo{transition:none!important}
  .concept-object>img{animation:none!important}
}

.project-featured .featured-media{aspect-ratio:960/546;background:#f7f1e5;cursor:default}
.featured-media>video{display:block;width:100%;height:100%;object-fit:contain}
.featured-media .project-top{right:auto;pointer-events:none}
.featured-expand{position:absolute;top:22px;right:23px;border:0;box-shadow:0 3px 14px #0000000d}
.featured-media .featured-toggle{border:0;min-height:44px;cursor:pointer;z-index:2}
.featured-toggle [data-featured-text]{font-size:12px}
.featured-expand:hover,.featured-toggle:hover{background:#fff;box-shadow:0 3px 18px #00000018}
@media(max-width:760px){
  .featured-expand{top:15px;right:15px}
  .featured-media .featured-toggle{bottom:12px;left:15px;min-height:40px;padding:7px 11px;gap:6px}
  .featured-toggle [data-featured-text]{font-size:11px}
}