/* Shared presentation layer. Content and navigation are always available without motion. */
:root{--cinema-ease:cubic-bezier(.16,1,.3,1)}
/* The original small d is the mark. Pointer depth stays subtle and bounded. */
.hero-sculpture{width:100%;height:100%;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 91%,transparent);transform:perspective(1100px) rotateX(var(--mark-y,0deg)) rotateY(var(--mark-x,0deg));transition:transform 1.1s var(--cinema-ease)}
.hero-sculpture>img{width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(180deg,transparent,#000 3%,#000 94%,transparent);animation:none!important}
.has-js:not(.motion-off) .mark-visible .hero-sculpture>img{animation:mark-breathe 12s ease-in-out infinite!important}
.hero-art .art-label{bottom:22px;right:15%;font-size:7px}
@keyframes mark-breathe{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.motion-off .hero-sculpture{transform:none!important}
@media(prefers-reduced-motion:reduce){.hero-sculpture{transform:none!important}.hero-sculpture>img{animation:none!important}}
.studio-header:after{content:"";height:2px;position:absolute;bottom:-1px;left:0;width:100%;background:var(--blue);transform:scaleX(var(--reading-progress,0));transform-origin:left}
.brand-film{background:#141c22;color:#fff;position:relative;isolation:isolate}
.film-stage{position:relative;min-height:650px;height:calc(100svh - 90px);overflow:hidden}
.film-kicker{position:absolute;top:35px;left:5.5%;z-index:5;font-size:9px;letter-spacing:.13em;color:#fff}
.film-grid{position:absolute;inset:0;background:linear-gradient(#c4daff0b 1px,transparent 1px),linear-gradient(90deg,#c4daff0b 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse,#000,transparent 80%)}
.film-word{position:absolute;inset:0;display:grid;place-items:center;font-size:30vw;font-weight:600;letter-spacing:-.08em;line-height:1;opacity:0}
.film-portal{position:absolute;inset:0;overflow:hidden}
.film-worlds{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr}
.film-world{position:relative;overflow:hidden}
.film-world>img{width:100%;height:100%;object-fit:cover}
.film-sol>img{object-position:60% center}
.film-bryck{background:#ffb99b}
.film-bryck>img{object-fit:cover;mix-blend-mode:multiply;object-position:55% center}
.film-worlds:after{content:"";position:absolute;inset:0;background:linear-gradient(#08142255,transparent 20%,#08142240 45%,#081422e8)}
.film-world>span{position:absolute;top:20%;left:12%;color:#fff;font:400 60px/.9 Newsreader,Georgia,serif;letter-spacing:-.055em;text-shadow:0 1px 20px #0004;z-index:1}
.film-world>span>span{display:block;font:400 9px/2.6 Manrope,sans-serif;letter-spacing:.15em;text-align:center}
.film-bryck>span{font:800 65px/.9 "Bricolage Grotesque",sans-serif;color:#371538;text-shadow:none}
.film-bryck>span>span{font-size:7px;letter-spacing:.04em}
.film-message{position:absolute;bottom:100px;left:5.5%;right:5.5%;z-index:3;display:flex;align-items:end;justify-content:space-between;gap:35px}
.film-message h2{font:600 clamp(60px,7.8vw,140px)/.96 Manrope,sans-serif;letter-spacing:-.065em}
.film-message h2 em{font:400 1.2em/.8 Newsreader,Georgia,serif;letter-spacing:-.055em}
.film-message>p{font-size:12px;line-height:1.8;max-width:300px;padding-bottom:5px}
.film-track{position:absolute;bottom:30px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid #ffffff50;z-index:4;font-size:8px;letter-spacing:.1em}
.film-track>i{position:absolute;height:2px;background:#fff;top:-1px;left:0;width:100%;transform:scaleX(var(--film-progress,1));transform-origin:left}
.has-js:not(.motion-off) .brand-film{height:220svh}
.has-js:not(.motion-off) .film-stage{position:sticky;top:90px}
.has-js:not(.motion-off) .film-word{opacity:var(--word-opacity,1);transform:scale(var(--word-scale,1))}
.has-js:not(.motion-off) .film-portal{clip-path:inset(var(--portal-y,34%) var(--portal-x,40%) round var(--portal-radius,200px));will-change:clip-path}
.has-js:not(.motion-off) .film-worlds{transform:scale(var(--world-scale,1.3))}
.has-js:not(.motion-off) .film-message{opacity:var(--message-opacity,0);transform:translateY(var(--message-y,30px))}
.has-js:not(.motion-off) .film-world>span{opacity:var(--message-opacity,0)}
/* Hotel: a slowly opening window into the landscape. */
.horizon-sequence{background:#f0eee6;padding:1px 0;position:relative}
.horizon-sequence .sol-quote{margin:0;max-height:none;min-height:620px;height:100svh}
.horizon-sequence .sol-quote:after{background:linear-gradient(#11261c20,#11261c78)}
.horizon-ring{display:block;position:absolute;width:170px;height:170px;left:calc(50% - 85px);top:calc(50% - 85px);border:1px solid #ffffff38;border-radius:50%;pointer-events:none;transform:scale(2.5)}
.horizon-ring:after{content:"";position:absolute;inset:12px;border:1px solid #ffffff25;border-radius:50%}
.has-js:not(.motion-off) .horizon-sequence{height:180svh}
.has-js:not(.motion-off) .horizon-sequence .sol-quote{position:sticky;top:0;clip-path:inset(var(--horizon-y,12%) var(--horizon-x,22%) round var(--horizon-radius,280px) var(--horizon-radius,280px) 2px 2px)}
.has-js:not(.motion-off) .horizon-sequence .sol-quote>img{transform:scale(var(--horizon-scale,1.23))}
.has-js:not(.motion-off) .horizon-sequence .sol-quote>div{opacity:var(--horizon-copy,0);transform:translateY(var(--horizon-shift,30px))}
.has-js:not(.motion-off) .sol-hero-copy{transform:translateY(var(--hero-drift,0px));opacity:var(--hero-opacity,1)}
/* Soda: an orbital product stage, tactile depth and a coordinated flavour change. */
.flavour-orbits{position:absolute;inset:5% 0;pointer-events:none;display:grid;place-items:center;transform:rotate(-18deg)}
.flavour-orbits>i{position:absolute;width:98%;height:68%;border:1px solid #37153835;border-radius:50%}
.flavour-orbits>i:nth-child(2){transform:rotate(60deg)}
.flavour-orbits>i:nth-child(3){transform:rotate(120deg)}
.flavour-orbits:before,.flavour-orbits:after{content:"✳";position:absolute;right:0;top:20%;font-size:50px;line-height:1;color:var(--plum)}
.flavour-orbits:after{right:auto;left:2%;top:auto;bottom:8%;font-size:30px}
.flavour-visual{isolation:isolate;perspective:1000px}
.flavour-visual>img{transform:rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg));transition:transform .6s var(--cinema-ease);will-change:transform}
.flavour-section{position:relative;isolation:isolate;transition:background .7s}
.flavour-splash{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-product{transform:translate3d(var(--product-x,0px),var(--product-y,0px),0);transition:transform .8s var(--cinema-ease)}
.has-js:not(.motion-off) .flavour-stamp{animation:stamp-turn 26s linear infinite}
.has-js:not(.motion-off) .burst{transform:rotate(var(--burst-turn,0deg));transition:transform .2s linear}
@keyframes stamp-turn{to{transform:rotate(375deg)}}
.cart-dialog[open]{animation:bag-enter .55s var(--cinema-ease) both}
@keyframes bag-enter{from{transform:translateX(100%);opacity:.5}to{transform:translateX(0);opacity:1}}
#stay-result[open]{animation:stay-enter .6s var(--cinema-ease) both}
@keyframes stay-enter{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Hover is an enhancement for a precise pointer; the system cursor stays intact. */
@media(hover:hover) and (pointer:fine){
 .showcase{perspective:1200px}
 .showcase-open .circle-icon{transition:transform .6s var(--cinema-ease),background .3s}
 .showcase-open:hover .circle-icon{transform:translate(var(--magnet-x,0px),var(--magnet-y,0px)) rotate(45deg)}
 .product-visual{transform:perspective(1000px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,3deg));transition:transform .6s var(--cinema-ease)}
 .product-visual:hover{transform:perspective(1000px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) translateY(-5px)}
 .service{position:relative;isolation:isolate}
 .service:before{content:"";position:absolute;inset:0 -30px;background:radial-gradient(ellipse at var(--light-x,50%) 50%,#c9e9b012,transparent 70%);opacity:0;transition:opacity .5s;z-index:-1}
 .service:hover:before{opacity:1}
}
@media(max-width:1100px){.film-message{display:block}.film-message>p{margin-top:28px}.film-world>span{top:18%}}
@media(max-width:760px){
 .film-stage{height:calc(100svh - 74px);min-height:570px}
 .has-js:not(.motion-off) .brand-film{height:195svh}
 .has-js:not(.motion-off) .film-stage{top:74px}
 .film-kicker{top:27px;font-size:7px;left:6%;right:6%;max-width:240px}
 .film-word{font-size:42vw}
 .film-message{left:6%;right:6%;bottom:91px}
 .film-message h2{font-size:clamp(42px,11vw,77px);line-height:1.02}
 .film-message>p{font-size:10px;margin-top:24px}
 .film-track{left:6%;right:6%;bottom:25px;font-size:6px;padding-top:15px}
 .film-world>span{font-size:41px;top:19%;left:16%}
 .film-world>span>span{font-size:6px}
 .film-bryck>span{font-size:40px;left:10%;top:32%}
 .film-bryck>span>span{font-size:5px}
 .film-bryck>img{object-position:52% 50%}
 .horizon-sequence .sol-quote{min-height:620px}
 .has-js:not(.motion-off) .horizon-sequence{height:160svh}
 .horizon-sequence .quote-text{font-size:clamp(46px,12vw,76px)}
 .horizon-sequence .sol-quote>div{padding:25px}
 .horizon-ring{width:125px;height:125px;left:calc(50% - 62px);top:calc(50% - 62px)}
 .flavour-orbits{inset:10% 0}
 .flavour-orbits:before{font-size:38px}
 .flavour-orbits:after{font-size:24px}
}
@media(max-height:650px){
 .has-js:not(.motion-off) .brand-film,.has-js:not(.motion-off) .horizon-sequence{height:auto}
 .has-js:not(.motion-off) .film-stage,.has-js:not(.motion-off) .horizon-sequence .sol-quote{position:relative;top:0}
 .has-js:not(.motion-off) .film-portal,.has-js:not(.motion-off) .horizon-sequence .sol-quote{clip-path:none}
 .has-js:not(.motion-off) .film-message,.has-js:not(.motion-off) .film-world>span,.has-js:not(.motion-off) .horizon-sequence .sol-quote>div{opacity:1;transform:none}
 .has-js:not(.motion-off) .film-word{opacity:0}
}
.motion-off .film-portal,.motion-off .horizon-sequence .sol-quote{clip-path:none}
.motion-off .flavour-visual>img,.motion-off .hero-product,.motion-off .product-visual,.motion-off .showcase-open .circle-icon{transform:none!important}
@media(prefers-reduced-motion:reduce){
 .brand-film,.horizon-sequence{height:auto!important}.film-stage,.horizon-sequence .sol-quote{position:relative!important;top:0!important}
 .film-portal,.horizon-sequence .sol-quote{clip-path:none!important}.film-message,.film-world>span,.horizon-sequence .sol-quote>div{opacity:1!important;transform:none!important}
 .film-word{opacity:0!important}.film-worlds,.sol-hero-copy,.horizon-sequence .sol-quote>img,.hero-product,.flavour-visual>img,.product-visual{transform:none!important}
}
/* Matching images carry the visitor from the portfolio into each concept in supporting browsers. */
#sol-house .showcase-bg,.sol-hero-img{view-transition-name:sol-landscape}
#bryck .bryck-preview-image,.hero-product>img{view-transition-name:bryck-cans}
::view-transition-group(sol-landscape),::view-transition-group(bryck-cans){animation-duration:.8s;animation-timing-function:cubic-bezier(.22,.8,.22,1)}
.film-bryck>span{color:#fff;text-shadow:0 2px 22px #25112e77}
.flavour-visual>img{mask-image:radial-gradient(ellipse 66% 62% at 50% 50%,#000 57%,transparent 90%)}
@media(max-width:760px){.hero-art{top:280px;right:-4%;height:295px}.hero-art .art-label{bottom:-2px;right:10%;font-size:6px}.film-bryck>span{top:19%}}
@media(max-width:370px){.hero-art{top:245px;height:285px}}
html.motion-off::view-transition-group(*),html.motion-off::view-transition-old(*),html.motion-off::view-transition-new(*){animation:none!important}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* The hotel rituals share a quiet, changing editorial image. */
.ritual-image{position:relative;margin:0;overflow:hidden}
.ritual-scene-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:0 0 16px;border-bottom:1px solid var(--line);margin-bottom:18px;font:400 9px/1.5 Manrope,sans-serif;letter-spacing:.12em}
.ritual-scene-top>span:first-child{font:400 33px/1 Newsreader,Georgia,serif;letter-spacing:-.04em}
.ritual-list details[open] summary>span:first-child{color:var(--ink);font-weight:800}
.ritual-image[aria-busy=true] .ritual-scene-top{opacity:.6}
@media(max-width:760px){.ritual-scene-top{font-size:8px;margin-bottom:14px}.ritual-scene-top>span:first-child{font-size:29px}}