*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:#121212;background:#fff;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{border:none;background:none;cursor:pointer;font-family:inherit}
input,textarea{font-family:inherit}

.hero{position:relative;width:100%;height:100vh;overflow:hidden;background:#EC008C;transition:background-color 1.2s cubic-bezier(0.4,0,0.2,1);}
.hero.to-white{background:#fff;}
.hero-opening{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;}
.typewriter-stage{position:absolute;top:0;left:0;width:100%;height:100%;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.typewriter-line{font-size:clamp(24px,5vw,64px);font-weight:500;letter-spacing:2px;line-height:1.4;white-space:nowrap;overflow:hidden;min-height:1.4em;}
.typewriter-line .cursor{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:4px;vertical-align:text-bottom;animation:blink 0.8s step-end infinite;}
.typewriter-line .cursor.done{animation:none;opacity:0;}
.typewriter-line.black{color:#121212;}
.typewriter-line.white{color:#fff;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.diamond-stage{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;align-items:center;justify-content:center;background:#E17427;opacity:0;pointer-events:none;transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1);}
.diamond-stage.active{opacity:1;}
.diamond-stage.fadeout{opacity:0;}
.diamond-svg{width:80px;height:80px;transform:scale(1) rotate(0deg);opacity:1;}
.diamond-svg.animate{animation:diamondExpand 1.6s cubic-bezier(0.65,0,0.35,1) forwards;}
@keyframes diamondExpand{0%{transform:scale(1) rotate(0deg);opacity:1;}50%{opacity:1;}100%{transform:scale(45) rotate(90deg);opacity:0;}}
.hero-image-wrap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.hero-image{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);}
.hero-image.show{animation:imageReveal 2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;}
@keyframes imageReveal{0%{opacity:0;transform:scale(1.08);}100%{opacity:1;transform:scale(1);}}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.1) 30%,rgba(0,0,0,0.1) 70%,rgba(0,0,0,0.45) 100%);z-index:5;opacity:0;}
.hero-overlay.show{animation:fadeIn 1.5s ease 0.5s forwards;}
.hero-logo-stage{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;}
.hero-logo-stage.show{animation:fadeSlideUp 1.5s cubic-bezier(0.22,1,0.36,1) 0.6s forwards;}
.hero-logo-img{width:480px;height:auto;margin-bottom:48px;filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));}
.hero-slogan{font-size:28px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.9);    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));}
.hero-scroll-hint{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:15;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;}
.hero-scroll-hint.show{animation:fadeIn 1s ease 1s forwards;}
.hero-desc{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);z-index:1;font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,0.9);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,0.5);white-space:nowrap;opacity:0;pointer-events:none;}
.hero-desc.show{animation:fadeIn 1.2s ease 1s forwards;}
.hero-desc-mobile{display:none;}
.hero-scroll-icon{width:32px;height:32px;animation:bounceDown 2s ease-in-out infinite;filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));}
@keyframes bounceDown{0%,100%{transform:translateY(0);}50%{transform:translateY(12px);}}
.hero-side-deco{position:absolute;left:32px;bottom:80px;z-index:10;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.6);opacity:0;}
.hero-side-deco.show{animation:fadeIn 1.2s ease 1s forwards;}
.hero-corner-label{position:absolute;right:32px;bottom:32px;z-index:10;font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.5);opacity:0;}
.hero-corner-label.show{animation:fadeIn 1.2s ease 1s forwards;}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(25px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.hero-skip .hero-image,.hero-skip .hero-overlay,.hero-skip .hero-logo-stage,.hero-skip .hero-scroll-hint,.hero-skip .hero-desc,.hero-skip .hero-desc-mobile,.hero-skip .hero-side-deco,.hero-skip .hero-corner-label{opacity:1;animation:none;transition:none;}
.hero-skip .hero-image{transform:scale(1);}
.hero-skip .hero-logo-stage{transform:translateY(0);}
.hero-skip .hero-opening{display:none;}

/* Pre-paint hero skip: first frame is already the stage1 zoomed crop; transform mirrors initStages() for a pixel-identical GSAP handover */
.hero-skip-early .hero-opening{display:none;}
.hero-skip-early .hero-logo-stage,.hero-skip-early .hero-scroll-hint,.hero-skip-early .hero-side-deco,.hero-skip-early .hero-corner-label{opacity:1;transform:none;animation:none;transition:none;}
.hero-skip-early .hero-desc,.hero-skip-early .hero-desc-mobile{opacity:1;animation:none;transition:none;}
/* opacity 全端生效：skip 时首帧就要盖住 .hero 粉底（手机端主 JS 加载前
   .hero-stage 默认 opacity:0，否则会闪一下粉色）；放大裁切几何仅桌面端，
   手机端 stage 是静止全屏图，无需变换 */
.hero-skip-early .hero-stage{opacity:1;}
@media(min-width:768px){
    .hero-skip-early .hero-stage-img-main{transform:translateY(-47.62vh) scale(3.1746);transform-origin:right top;right:0;width:42%;}
}
@media(max-width:768px){.hero-logo-img{width:280px;}.hero-slogan{font-size:18px;}.hero-scroll-icon{width:24px;height:24px;}.hero-desc{font-size:9px;bottom:96px;}}

/* Hero scroll stages: hidden by default, revealed by JS after the opening completes */
.hero-stage,.hero-slogan-stage{opacity:0;}
.stage3-bg,.hero-detail{visibility:hidden;}
.hero-stage{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;}
.hero-stage-img{position:absolute;top:0;right:0;height:100%;width:42%;display:block;object-fit:cover;object-position:center;transform-origin:right top;will-change:transform,clip-path;}
.hero-stage-img-alt{z-index:1;}
.hero-stage-img-main{z-index:2;}
.hero-slogan-stage{position:absolute;top:0;left:0;width:100%;height:100%;z-index:6;display:flex;flex-direction:column;justify-content:center;padding-left:8%;color:#fff;pointer-events:none;will-change:transform;}
.hero-slogan-label{font-size:12px;letter-spacing:.35em;font-weight:500;color:rgba(255,255,255,.75);margin-bottom:28px;text-transform:uppercase;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));}
.hero-slogan-line{font-size:clamp(40px,5.2vw,92px);line-height:1.08;font-weight:500;letter-spacing:-.01em;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));}
/* stage3 left block: white base + webp below, 3x3 text grid above; animated via top, never transform/opacity (they would trap the children's z-index) */
/* z-index swapped with .hero-stage (2 < 3): full-width base under the image strip; on ultrawide the webp covers the full screen with the mp4 strip on top */
.stage3-bg{position:absolute;top:0;left:0;height:100%;z-index:2;background-color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;width:100%;will-change:transform;}
.hero-detail{position:absolute;top:0;left:0;width:58%;height:100%;z-index:4;display:flex;align-items:center;justify-content:center;padding:12% 8%;color:#121212;pointer-events:none;}
/* minmax(0,1fr) forces truly equal columns; the brandmark keeps its intrinsic size */
.hero-detail-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,1fr);column-gap:12px;row-gap: 48px;width:100%;height:100%;}
.hero-detail-title{grid-row:2;grid-column:2 / 6;align-self:end;font-size:clamp(19px,1.7vw,29px);line-height:1.35;font-weight:500;letter-spacing:.005em;color:#121212;}
.hero-detail-title .text-pink{color:#EC008C;}
.hero-detail-brandmark{grid-row:1;grid-column:1;align-self:center;justify-self:start;display:block;width:auto;height:auto;max-width:none;}
.hero-detail-desc{grid-row:3;grid-column:2 / 5;align-self:start;font-size:clamp(13px,.95vw,16px);line-height:1.75;font-weight:300;color:#121212;}
/* ===== Mobile (<=768px): static presentation, no scroll choreography ===== */
.hero-mobile-content{display:none;}
@media(max-width:768px){
    
    /* 初始隐藏：开屏打字机期间露出 .hero 的粉色底，与桌面端一致；
       开屏结束（.hero-opened）或跳过客（.hero-skip）再淡入 */
    .hero-stage{display:block;opacity:0;transition:opacity .9s ease;}
    .hero-opened .hero-stage,.hero-skip .hero-stage{opacity:1;}
    .hero-stage::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.45) 100%);}
    .hero-stage-img-main{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;}
    .hero-stage-img-alt{display:none;} 
    
    .hero-slogan-stage,.hero-detail,.stage3-bg{display:none;}
    
    .hero-mobile-content{display:flex;flex-direction:column;background:#fff;}
    .hero-mobile-brand{order:1;background-color:#fff;background-position:center;background-size:cover;background-repeat:no-repeat;padding:96px 32px 104px;}
    .hero-mobile-video{order:2;width:100%;height:auto;display:block;background:#121212;}
    .hero-mobile-brandmark{display:block;width:auto;height:auto;max-width:62%;margin-bottom:32px;}
    .hero-mobile-title{font-size:clamp(20px,5.6vw,26px);line-height:1.35;font-weight:500;letter-spacing:.005em;color:#121212;margin-bottom:24px;}
    .hero-mobile-title .text-pink{color:#EC008C;}
    .hero-mobile-desc{font-size:14px;line-height:1.75;font-weight:300;color:#121212;}
    .hero-desc-mobile{display:block;position:absolute;bottom:96px;left:50%;transform:translateX(-50%);z-index:15;font-family:'Helvetica Neue',Arial,sans-serif;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,0.9);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,0.5);white-space:nowrap;opacity:0;pointer-events:none;}
    .hero-desc-mobile.show{animation:fadeIn 1.2s ease 1s forwards;}
}

html.scroll-locked,body.scroll-locked{overflow:hidden!important;height:100%!important;touch-action:none;}
html.scroll-locked{position:fixed;width:100%;}

/* ===== Orb hero background ===== */

.brand-statement{position:relative;width:100%;aspect-ratio:16/9;display:flex;align-items:center;padding:0 32px;overflow:hidden;background:#fff}
.brand-media-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.brand-fallback-bg{position:absolute;inset:0;background:#fff;z-index:0}
.brand-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.brand-statement-inner{position:relative;z-index:10;width:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;text-align:left;opacity:0;transform:translateY(40px);transition:all 1s ease}
.brand-statement.is-visible .brand-statement-inner{opacity:1;transform:translateY(0)}
.brand-statement-title-wrap{grid-column:1;grid-row:1;position:relative;width:100%;display:flex;justify-content:center;align-items:center;padding:16px 0}
.frame-line{position:absolute;background:#EC008C}
.frame-line-top,.frame-line-bottom{left:0;width:100%;height:0;background:none}
.frame-line-top{top:16px;border-top:1px solid #EC008C}
.frame-line-bottom{bottom:16px;border-bottom:1px solid #EC008C}
.frame-center{position:relative;display:inline-block;padding:36px 138px}
.frame-line-left,.frame-line-right{top:-60px;bottom:-60px;width:0;background:none}
.frame-line-left{left:0;border-left:1px solid #EC008C}
.frame-line-right{right:0;border-right:1px solid #EC008C}
.frame-diamond{position:absolute;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.frame-diamond img{width:100%;height:100%}
.frame-diamond-tl{top:0.5px;left:0.5px;transform:translate(-50%,-50%)}
.frame-diamond-tr{top:0.5px;right:0.5px;transform:translate(50%,-50%)}
.frame-diamond-bl{bottom:0.5px;left:0.5px;transform:translate(-50%,50%)}
.frame-diamond-br{bottom:0.5px;right:0.5px;transform:translate(50%,50%)}
.brand-statement-title{position:relative;z-index:1;font-size:32px;font-weight:500;color:#121212;line-height:1.15;text-align:center;margin:0}

@media(max-width:767px){
    .frame-center{position:relative;display:inline-block;padding:36px}
    .brand-statement{aspect-ratio:auto;display:flex;flex-direction:column-reverse;align-items:stretch;padding:0}
    .brand-media-bg{position:relative;width:100%;overflow:hidden}
    .brand-video-bg{position:relative;width:250%;height:auto;margin-left:-150%;display:block}
    .brand-statement-inner{grid-template-columns:1fr;background:#fff;padding:80px 0px}
    .brand-statement-title-wrap{justify-self:center}
    
}

.brand-statement-desc{
    grid-column:1;
    grid-row:2;
    align-self:center;
    justify-self:center;
    text-align:center;
    max-width:420px;
    margin-top:120px
}

.brand-statement-desc .brand-statement-lead{
    font-size:14px;
    font-weight:600;
    color:#121212;
    line-height:1.6;
    margin-bottom:20px
}

.brand-statement-desc p{
    font-size:14px;
    color:#414042;
    line-height:1.6;
    margin-bottom:16px
}
.brand-statement-desc p:last-child{
    margin-bottom:0
}
.brand-statement-subtitle{
    font-size:20px;
    font-weight:400;
    color:#EC008C;
    line-height:1.4;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:24px
}
@media(min-width:768px){
    .brand-statement-desc .brand-statement-lead{font-size:14px}
    .brand-statement-desc p{font-size:14px}
    .brand-statement-subtitle{font-size:22px}
}
@media(max-width:767px){
    .brand-statement-desc{
        grid-column:1;
        grid-row:2;
        margin-top:60px;
        padding:0px 32px;
        max-width:none
    }
}

.history-transition{position:relative;height:250vh;background:#fff}
.history-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.history-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.history-layer--history{z-index:2}
.history-layer--future{z-index:1}
.history-inner{width:80%;margin:0 auto}
.history-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:1024px){.history-grid{grid-template-columns:1fr 1fr;gap:64px}}
.history-text{display:flex;flex-direction:column;justify-content:center}
.history-title{font-size:36px;font-weight:700;color:#121212;line-height:1.1;letter-spacing:-.08em}
@media(min-width:768px){.history-title{font-size:48px}}
@media(min-width:1024px){.history-title{font-size:60px}}
.history-title--future{color:#EC008C}
.history-desc{margin-top:32px;font-size:14px;color:#414042;line-height:1.75;max-width:480px}
@media(min-width:768px){.history-desc{font-size:16px}}
.history-images{position:relative;height:420px}
@media(min-width:768px){.history-images{height:520px}}
@media(min-width:1024px){.history-images{height:560px}}
.history-img{position:absolute}
.history-img-1{top:0;left:0;width:58%;aspect-ratio:4/5;background:#c8c3b8;z-index:10}
.history-img-2{top:42%;right:0;width:62%;aspect-ratio:16/10;background:#d4cfc8;z-index:20}
.history-img-3{bottom:0;left:18%;width:38%;aspect-ratio:3/4;background:#b8b3a8;z-index:30}
.history-grid-future{grid-template-columns:1fr}
@media(min-width:1024px){.history-grid-future{grid-template-columns:1fr 1fr;gap:80px}}
.history-placeholder{width:100%;max-width:480px;aspect-ratio:3/4;background:#c8c3b8;background-size:cover}

.marquee-section{width:100%;background:#121212;overflow:hidden;padding:20px 0}
.marquee-track{display:flex;align-items:center;white-space:nowrap;animation:marquee-scroll 30s linear infinite}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-item{flex-shrink:0;margin:0 32px;font-size:18px;letter-spacing:.2em;font-weight:500;}

.overview{position:relative;width:100%;padding:128px 32px 48px 32px;background:#fff;overflow:hidden}
.overview-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.overview-inner{position:relative;z-index:10;width:80%;margin:0 auto;opacity:0;transform:translateY(32px);transition:all 1s .2s ease}
@media(min-width:768px){.overview{padding:90px 32px} .overview-inner{width:80%;}}
@media(min-width:1024px){.overview{padding:200px 80px} .overview-inner{width:60%;}}
.overview.is-visible .overview-inner{opacity:1;transform:translateY(0)}
.overview-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:1024px){.overview-grid{grid-template-columns:1fr 2fr;gap:64px}}
.overview-brandmark{display:flex;justify-content:flex-start}
.overview-brandmark-ph{width:119px;}
.overview-brandmark-ph img {width: 100%;height: auto;display: block;}
@media(min-width:768px){.overview-brandmark-ph{width:119px;}}
.overview-lead{font-size:20px;font-weight:500;color:#121212;line-height:1.6}
@media(min-width:768px){.overview-lead{font-size:24px}}
@media(min-width:1024px){.overview-lead{font-size:32px}}
.overview-body{margin-top:40px; max-width: 520px;}
.overview-body p{font-size:14px;color:#414042;line-height: 1.6;}
@media(min-width:768px){.overview-body p{font-size:14px}}
/* Initial light grey; GSAP restores the target colours on scroll */
.overview-lead {
    color: #c8c6c1;
    text-transform: uppercase;
}

.reveal-word {
    display: inline-block;
    will-change: color;
}

.cgi-gallery{position:relative;width:100%;height:100vh;min-height:500px;background:#f0eeeb;overflow:hidden}
.cgi-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;z-index:0}
.cgi-slide.is-active{opacity:1;z-index:10}
.cgi-slide-inner{width:100%;height:100%}
.cgi-slide-inner img{width:100%;height:100%;object-fit:cover;display:block}
.cgi-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:12px}
.cgi-dot{border:none;padding:0;cursor:pointer;transition:all .5s ease}
.cgi-dot.is-active{width:32px;height:8px;background:#fff}
.cgi-dot:not(.is-active){width:8px;height:8px;background:rgba(255,255,255,.5)}
.cgi-dot:not(.is-active):hover{background:rgba(255,255,255,.8)}
@media(max-width:767px){
    .cgi-gallery{height:auto;min-height:auto}
    .cgi-slide{position:absolute;inset:0;opacity:0}
    .cgi-slide.is-active{position:relative;opacity:1;z-index:10}
    .cgi-slide-inner{height:auto}
    .cgi-slide-inner img{width:100%;height:auto;display:block}
    .cgi-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:0}
}

.architecture{width:100%;padding:0 32px 160px;background:#fff}
@media(min-width:768px){.architecture{padding:0 32px 208px}}
@media(min-width:1024px){.architecture{padding:0 80px 256px}}
.architecture-inner{width:100%;max-width:720px;margin:0 auto;opacity:0;transform:translateY(40px);transition:all 1s ease}
.architecture.is-visible .architecture-inner{opacity:1;transform:translateY(0)}
.architecture-text{text-align:center;margin-bottom:64px}
.architecture-diamond{margin-bottom:24px;color:#121212;font-size:10px}
.architecture-title{font-size:32px;font-weight:700;color:#121212;line-height:1.15;letter-spacing:-.08em}
@media(min-width:768px){.architecture-title{font-size:44px}}
@media(min-width:1024px){.architecture-title{font-size:52px}}
.architecture-desc{margin-top:32px;font-size:14px;color:#414042;line-height:1.75;max-width:480px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.architecture-desc{font-size:16px}}
.architecture-image{display:flex;justify-content:center}
.architecture-ph{width:100%;max-width:420px;aspect-ratio:3/4;background:#d4d0c8}

.interior{position:relative;width:100%;padding:128px 32px;background:#fff;overflow:hidden}
@media(min-width:768px){.interior{padding:176px 32px}}
@media(min-width:1024px){.interior{padding:224px 80px}}

/* 88% on mobile so the 60% desktop column does not cramp */
.interior-inner{position:relative;width:88%;margin:0 auto;display:grid;grid-template-columns:1fr;gap:48px;align-items:center;opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease}
@media(min-width:768px){.interior-inner{width:60%}}
@media(min-width:1024px){.interior-inner{grid-template-columns:1fr 1fr;gap:80px}}

.interior.is-visible .interior-inner{opacity:1;transform:translateY(0)}

.interior-image{display:flex;justify-content:center;align-self:stretch;overflow:hidden;width:100%}
.interior-ph{width:100%;height:100%;aspect-ratio:3/4}
.interior-ph img{width:100%;height:100%;object-fit:cover;display:block}

.interior-text{text-align:center}
@media(min-width:1024px){.interior-text{text-align:left}}
.interior-accent{margin-bottom:24px}
.interior-diamond{display:inline-block;height:88px;width:auto;animation:diamond-step 6s ease-in-out infinite;transform-origin:center center}
@keyframes diamond-step{0%{transform:rotate(0deg)}10%{transform:rotate(90deg)}25%{transform:rotate(90deg)}35%{transform:rotate(180deg)}50%{transform:rotate(180deg)}60%{transform:rotate(270deg)}75%{transform:rotate(270deg)}85%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@media(max-width:767px){.interior-diamond{height:60px}}

.interior-title{font-size:32px;font-weight:500;color:#121212;line-height:1.15;letter-spacing:.08em;margin-bottom:32px}
@media(min-width:768px){.interior-title{font-size:44px}}
@media(min-width:1024px){.interior-title{font-size:42px}}

.interior-desc{font-size:14px;color:#414042;line-height:1.6;max-width:420px;margin:0 auto 40px}
@media(min-width:1024px){.interior-desc{margin:0 0 40px}}
@media(min-width:768px){.interior-desc{font-size:14px}}

.interior-brands{display:flex;align-items:center;justify-content:center;gap:20px;font-size:11px;color:rgba(65,64,66,.5);letter-spacing:.15em;text-transform:uppercase;flex-wrap:wrap}
@media(min-width:1024px){.interior-brands{justify-content:flex-start}}
.interior-dot{font-size:6px;color:rgba(18,18,18,.25);line-height:1}

.carousel-section{width:100%;background:#fff}
.carousel-wrap{width:100%;transition:all 1s ease;opacity:0}
.carousel-section.is-visible .carousel-wrap{opacity:1}
.carousel-stage{position:relative;width:100%;height:100vh;overflow:hidden}
/* Scroll-driven: slides stack in DOM order (later covers earlier) and slide in from the right via JS transforms; .is-active is the no-JS fallback */
.carousel-slide{position:absolute;inset:0;opacity:0;overflow:hidden;will-change:transform}
.carousel-slide.is-active{opacity:1}
/* 8% side bleed so spring overshoot and parallax drift never expose edges */
.carousel-slide-bg{position:absolute;top:0;width:100%;height:100%;background:#d4cfc8;background-size:cover;background-position:center;will-change:transform}
.carousel-slide-overlay{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.carousel-slide-content{position:absolute;bottom:0;left:0;right:0;padding:32px 32px 112px}
@media(min-width:768px){.carousel-slide-content{padding:64px 64px 112px}}
@media(min-width:1024px){.carousel-slide-content{padding:80px 80px 112px}}
.carousel-slide-title{color:#fff;font-size:24px;font-weight:700;letter-spacing:-.08em;will-change:transform,opacity}
@media(min-width:768px){.carousel-slide-title{font-size:36px}}
@media(min-width:1024px){.carousel-slide-title{font-size:48px}}
.carousel-slide-subtitle{color:rgba(255,255,255,.7);font-size:14px;margin-top:8px;will-change:transform,opacity}
@media(min-width:768px){.carousel-slide-subtitle{font-size:16px}}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:20;transition:background .3s;cursor:pointer;border:none}
.carousel-nav:hover{background:rgba(255,255,255,.8)}
.carousel-nav-prev{left:24px}
.carousel-nav-next{right:24px}
.carousel-nav svg{width:20px;height:20px;color:#121212}

.carousel-wrap{position:relative;}
.carousel-bar{position:absolute;bottom:0;left:0;width:100%;z-index:21;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;}
.carousel-current{color:#fff;font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.carousel-progress{flex:1;margin:0 24px;height:1px;background:rgba(255,255,255,.25);position:relative}
.carousel-progress-fill{position:absolute;top:0;left:0;height:100%;background:#EC008C;transition:width .5s}
.carousel-total{color:rgba(255,255,255,.6);font-size:14px;font-variant-numeric:tabular-nums;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
/* Mobile: no scroll panes — the four slides become a full-width scroll-snap swipe strip; title/subtitle sit below the image */
@media(max-width:767px){
    /* Light grey background + bottom space to separate from the surrounding white sections */
    .carousel-section{background:#fafaf8;padding-bottom:40px;}
    .carousel-stage{height:auto;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .carousel-stage::-webkit-scrollbar{display:none;}
    /* scroll-snap-stop:always forces one slide per swipe */
    .carousel-slide{position:relative;inset:auto;opacity:1;transform:none!important;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;}
    .carousel-slide-bg{position:relative;top:auto;width:100%;height:75vw;transform:none!important;}
    .carousel-slide-overlay{display:none;}
    .carousel-slide-content{position:static;padding:20px 24px 0;}
    .carousel-slide-title{font-size:24px;color:#121212;font-weight:500;letter-spacing:.01em;}
    .carousel-slide-subtitle{font-size:13px;color:#414042;letter-spacing:.02em;}
    .carousel-nav,.carousel-bar{display:none;}
}

.home-future{position:relative;width:100%;background:#E17427;overflow:hidden}
.home-future-mask{position:absolute;top:0;left:0;right:0;height:300px;background:#fff;z-index:0}
@media(min-width:768px){.home-future-mask{height:480px}}
.home-future-inner{position:relative;z-index:10;width:100%;padding:96px 0 80px}
@media(min-width:768px){.home-future-inner{padding:240px 0 112px}}
.home-future-row1{width:60%;margin:0 auto;display:flex;align-items:start;opacity:0;transform:translateY(40px);transition:all 1s ease}
.home-future.is-visible .home-future-row1{opacity:1;transform:translateY(0)}
.home-future-imga{width:260px;flex-shrink:0}
@media(min-width:768px){.home-future-imga{width:320px}}
@media(min-width:1024px){.home-future-imga{width:360px}}
.home-future-imga-inner{width:100%;height: 100%;aspect-ratio:3/4;overflow: hidden;}
.home-future-imga-inner img { width: 100%;height: 100%;object-fit: cover;display: block;}
.home-future-title{flex:1;text-align:right;padding-top:24px;padding-left:32px}
@media(min-width:768px){.home-future-title{padding-top:48px}}
@media(min-width:1024px){.home-future-title{padding-top:80px}}
.home-future-title h2{font-size:16px;font-weight:500;color:#121212;line-height:1.4;}
@media(min-width:768px){.home-future-title h2{font-size:20px}}
@media(min-width:1024px){.home-future-title h2{font-size:42px}}
.home-future-carousel-wrap{position:relative;width:80%;margin:32px auto 0;z-index:10}
@media(min-width:768px){.home-future-carousel-wrap{margin-top:96px}}
.home-future-carousel{position:relative;width:100%;aspect-ratio:16/9;max-height:100vh;overflow:hidden;opacity:0;transform:translateY(40px);transition:all 1s .4s ease}
.home-future.is-visible .home-future-carousel{opacity:1;transform:translateY(0)}
.home-future-carousel-slide{position:absolute;inset:0;transition:opacity .7s ease;opacity:0;z-index:0}
.home-future-carousel-slide.is-active{opacity:1;z-index:10}
.home-future-carousel-slide-inner{width:100%;height:100%;background:#d4d0c8}
.home-future-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:12px}
.home-future-dot{border:none;padding:0;cursor:pointer;transition:all .5s ease}
.home-future-dot.is-active{width:32px;height:3px;background:#fff}
.home-future-dot:not(.is-active){width:3px;height:3px;background:rgba(255,255,255,.5)}
.home-future-dot:not(.is-active):hover{background:rgba(255,255,255,.8)}

/* ===== Intelligence section ===== */
/* Calibrated for a 1905px viewport; inner positions use percentages of the fixed-ratio canvas */

.intelligence { position: relative; background: #FFFFFF; overflow: hidden; }

.intelligence-container {
    position: relative;
    width: 80%;
    max-width: none;
    margin: 0 auto;
    padding: 120px 0;
}

/* --- Fixed-ratio drawing sheet --- */
.intelligence-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1524 / 1000;
    
}

.intelligence-title {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.intelligence-title.visible { opacity: 1; }
.intelligence-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #EC008C;
    margin-bottom: 20px;
    display: block;
}
.intelligence-heading {
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #121212;
    margin-bottom: 26px;
}
.intelligence-heading em {
    font-style: normal;
    font-weight: 500;
    color: #EC008C;
}
.intelligence-subtitle {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #999;
}

.intelligence-visual {
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: translateY(16px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.intelligence-visual.visible {
    opacity: 1;
    transform: translateY(0);
    animation: subtle-float 4s ease-in-out infinite 1.5s;
}
.intelligence-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1px;
    filter: contrast(105%) saturate(85%);
}
.intelligence-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,60,140,0.07) 0%, rgba(0,0,0,0) 60%);
    pointer-events: none;
    border-radius: 1px;
}

/* P1 image */
.p1-visual {
    left: 2.62%;
    top: 6%;
    width: 23.62%;
    aspect-ratio: 3 / 4;
}

/* P2 image: anchored by top so the zoom cannot break it */
.p2-visual {
    right: 2.62%;
    top: 46%;
    width: 23.62%;
    aspect-ratio: 3 / 4;
}

.corner-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.corner-marks::before,
.corner-marks::after,
.corner-marks span::before,
.corner-marks span::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: #c0c0c0;
    border-style: solid;
    border-width: 0;
}
.corner-marks::before      { top: -7px; left: -7px; border-top-width: 1px; border-left-width: 1px; }
.corner-marks::after       { top: -7px; right: -7px; border-top-width: 1px; border-right-width: 1px; }
.corner-marks span::before { bottom: -7px; left: -7px; border-bottom-width: 1px; border-left-width: 1px; }
.corner-marks span::after  { bottom: -7px; right: -7px; border-bottom-width: 1px; border-right-width: 1px; }

.annotation-group {
    position: absolute;
    z-index: 6;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}
.annotation-group.active {
    opacity: 1;
    transform: translateY(0);
}
.annotation-group svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: visible;
}
.anno-line {
    fill: none;
    stroke: #EC008C;
    stroke-width: 1;
}
.anno-node {
    
}
.anno-card-bg {
    fill: rgba(255,255,255,0.96);
    stroke: #e0e0e0;
    stroke-width: 1;
}
.anno-card-accent {
    stroke: #EC008C;
    stroke-width: 2;
}
.annotation-text {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 20px;
}
.anno-num {
    font-size: 10px;
    font-weight: 600;
    color: #E17427;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
}
.annotation-text h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #121212;
    line-height: 1.3;
}
.annotation-text p {
    font-size: 11.5px;
    line-height: 1.6;
    color: #777;
    font-weight: 400;
}

/* --- Part 1 annotation positions --- */
/* width & aspect-ratio must match the SVG viewBox ratio exactly */
.p1-g1 {
    left: 27.56%;
    top: 14%;
    width: 17.06%;
    aspect-ratio: 260 / 160;
}
.p1-g1 .annotation-text {
    left: 46.15%;
    top: -6.25%;
    width: 84.62%;
    height: 68.75%;
}

.p1-g2 {
    left: 5.25%;
    top: 58%;
    width: 26.25%;
    aspect-ratio: 400 / 240;
}
.p1-g2 .annotation-text {
    left: 50%;
    top: 33.33%;
    width: 55%;
    height: 45.83%;
}

.p1-g3 {
    left: 27.56%;
    top: 28%;
    width: 17.06%;
    aspect-ratio: 260 / 240;
}
.p1-g3 .annotation-text {
    left: 46.15%;
    top: -41.67%;
    width: 84.62%;
    height: 45.83%;
}

/* --- Part 2 annotation positions --- */
.p2-g1 {
    left: 65.62%;
    top: 68%;
    width: 18.37%;
    aspect-ratio: 280 / 200;
}
.p2-g1 .annotation-text {
    left: -78.57%;
    top: 10%;
    width: 78.57%;
    height: 55%;
}

.p2-g2 {
    left: 78%;
    top: 36%;
    width: 17.06%;
    aspect-ratio: 260 / 320;
}
.p2-g2 .annotation-text {
    left: -88.46%;
    top: -37.5%;
    width: 76.92%;
    height: 31.25%;
}

@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 1024px) {
    .intelligence-container {
        padding: 80px 30px;
    }
    .intelligence-canvas {
        aspect-ratio: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .intelligence-title {
        position: relative;
        top: auto; left: auto;
        transform: none;
        margin-bottom: 40px;
        pointer-events: auto;
    }
    .intelligence-visual {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 100% !important;
        max-width: 400px;
        aspect-ratio: 3 / 4;
        animation: none;
    }
    .intelligence-visual img {
        width: 100%;
        height: auto;
    }
    .annotation-group {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        opacity: 1 !important;
        transform: none !important;
        margin-top: 20px;
    }
    .annotation-group svg { display: none; }
    .annotation-text {
        position: relative;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px 18px;
        border: 1px solid #e5e5e5;
        background: rgba(255,255,255,0.96);
    }
    .annotation-text::before {
        content: '';
        display: block;
        width: 24px;
        height: 2px;
        background: #EC008C;
        margin-bottom: 10px;
    }
}
@media (max-width: 640px) {
    .intelligence-container { padding: 60px 20px; }
    .intelligence-heading { font-size: 32px; }
}

/* ===== Location section ===== */
.location{width:100%;background:#fff;overflow:hidden;padding:0 0}
@media(min-width:768px){.location{padding:0 0}}
.location-headline-wrap{width:100%;background:rgba(236,0,140,.6);display:flex;align-items:center;gap:4vw;padding:28px 4vw;border-bottom:1px solid rgba(0,0,0,.25)}
@media(min-width:768px){.location-headline-wrap{gap:2vw;padding:28px 2vw}}
.headline-star{width:12px;height:12px;flex-shrink:0;display:block}
@media(min-width:768px){.headline-star{width:12px;height:12px}}
.location-headline{font-size:clamp(22px,4.5vw,52px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;text-align:left;margin:0}
@media(max-width:767px){
    .location-headline{font-size:clamp(16px,5.2vw,22px)}
    .headline-black,
    .headline-white{display:block}
}
.headline-black{color:#000}
.headline-white{color:#fff}
.marquee-row{width:100%;overflow:hidden;position:relative;padding:28px 0;border-bottom:1px solid rgba(0,0,0,.25)}
.items-row-right{background:rgba(236,0,140,.8)}
.items-row-left{background:#EC008C}
.marquee-track{display:flex;width:max-content;will-change:transform}
.items-row-right .marquee-track{animation:scroll-right 35s linear infinite}
.items-row-left .marquee-track{animation:scroll-left 35s linear infinite}
.marquee-cell{display:flex;align-items:center;gap:10px;padding:0 12px;white-space:nowrap;flex-shrink:0}
.marquee-divider{display:flex;align-items:center;padding:0 12px;flex-shrink:0}
.marquee-icon{width:28px;height:28px;flex-shrink:0;display:block}
.marquee-label{font-size:clamp(13px,3.8vw,16px);font-weight:500;color:#fff;letter-spacing:.1em;text-transform:uppercase}
@media(min-width:768px){
    .marquee-cell{padding:0 56px;gap:16px}
    .marquee-divider{padding:0 56px}
    .marquee-icon{width:44px;height:44px}
    .marquee-label{font-size:clamp(18px,3vw,32px)}
}
.marquee-star{width:12px;height:12px;display:block}
@media(min-width:768px){.marquee-star{width:12px;height:12px}}
@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

.map-section{width:100%;background:#121212}
.map-tabs{display:flex;justify-content:center;gap:60px;padding-top:64px;padding-bottom:32px}
@media(min-width:768px){.map-tabs{padding-top:96px}}
.map-tab{font-size:24px;letter-spacing:.25em;text-transform:uppercase;padding-bottom:8px;border-bottom:2px solid transparent;color:rgba(255,255,255,.3);transition:all .3s;background:none;cursor:pointer}
.map-tab:hover{color:rgba(255,255,255,.6)}
.map-tab.is-active{color:#fff;border-bottom-color:#fff}
.map-panel{display:none}
.map-panel.is-active{display:block}
.map-area{padding:0 24px 60px}
@media(min-width:768px){.map-area{padding:0 32px 96px}}
@media(min-width:1024px){.map-area{padding:0 80px 96px}}
.map-viewport{position:relative;width:100%;height:70vh;min-height:400px;max-height:800px;overflow:hidden;border-radius:6px;background:#1a1a1a;touch-action:none;cursor:grab}
.map-viewport:active{cursor:grabbing}
.map-layer{position:absolute;top:0;left:0;width:300%;transform-origin:center center;will-change:transform}
.map-layer img{width:100%;height:auto;display:block}
@media(min-width:769px){
.map-viewport{height:auto;min-height:0;max-height:none;overflow:visible;cursor:default;touch-action:auto}
.map-viewport:active{cursor:default}
.map-layer{position:relative;width:100%;transform:none!important}
}
.map-hotspot{position:absolute;width:32px;height:32px;transform:translate(-50%,-50%);cursor:pointer;z-index:2;border-radius:50%}
.map-hotspot-main{width:64px;height:64px;cursor:default;z-index:3}
.map-title-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);background:#fff;color:#121212;padding:7px 14px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:all .22s ease;pointer-events:none;z-index:50}
.map-title-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#fff}
.map-hotspot:hover .map-title-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.map-title-tip.dir-down{bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px)}
.map-title-tip.dir-down::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fff}
.map-hotspot:hover .map-title-tip.dir-down{transform:translateX(-50%) translateY(0)}
.map-title-tip.dir-left{bottom:auto;top:50%;right:calc(100% + 10px);left:auto;transform:translateY(-50%) translateX(4px)}
.map-title-tip.dir-left::after{top:50%;left:100%;right:auto;bottom:auto;transform:translateY(-50%);border:5px solid transparent;border-left-color:#fff;border-top-color:transparent;border-bottom-color:transparent}
.map-hotspot:hover .map-title-tip.dir-left{transform:translateY(-50%) translateX(0)}
.map-title-tip.dir-right{bottom:auto;top:50%;left:calc(100% + 10px);transform:translateY(-50%) translateX(-4px)}
.map-title-tip.dir-right::after{top:50%;right:100%;left:auto;bottom:auto;transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-top-color:transparent;border-bottom-color:transparent}
.map-hotspot:hover .map-title-tip.dir-right{transform:translateY(-50%) translateX(0)}
.map-card-tip{position:absolute;width:240px;background:#fff;border-radius:6px;box-shadow:0 16px 48px rgba(0,0,0,.25);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;overflow:hidden;z-index:100}
.map-card-img{width:100%;height:130px;background:linear-gradient(135deg,#EC008C 0%,#E17427 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;position:relative}
.map-card-img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0}
.map-card-body{padding:16px 18px 18px}
.map-card-body h4{font-size:12px;letter-spacing:1.2px;color:#121212;margin-bottom:6px;font-weight:600;text-transform:uppercase}
.map-card-body p{font-size:13px;color:#414042;line-height:1.5;margin:0}
.map-card-meta{font-size:11px;color:#EC008C;margin-top:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.map-hotspot:hover .map-card-tip,.map-hotspot.active .map-card-tip{opacity:1;visibility:visible;pointer-events:auto}
.map-card-tip.dir-up{bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px) scale(.96)}
.map-card-tip.dir-up::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:#fff}
.map-hotspot:hover .map-card-tip.dir-up,.map-hotspot.active .map-card-tip.dir-up{transform:translateX(-50%) translateY(0) scale(1)}
.map-card-tip.dir-down{top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px) scale(.96)}
.map-card-tip.dir-down::after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:8px solid transparent;border-bottom-color:#fff}
.map-hotspot:hover .map-card-tip.dir-down,.map-hotspot.active .map-card-tip.dir-down{transform:translateX(-50%) translateY(0) scale(1)}
.map-card-tip.dir-left{right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(6px) scale(.96)}
.map-card-tip.dir-left::after{content:'';position:absolute;top:50%;left:100%;transform:translateY(-50%);border:8px solid transparent;border-left-color:#fff}
.map-hotspot:hover .map-card-tip.dir-left,.map-hotspot.active .map-card-tip.dir-left{transform:translateY(-50%) translateX(0) scale(1)}
.map-card-tip.dir-right{left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-6px) scale(.96)}
.map-card-tip.dir-right::after{content:'';position:absolute;top:50%;right:100%;transform:translateY(-50%);border:8px solid transparent;border-right-color:#fff}
.map-hotspot:hover .map-card-tip.dir-right,.map-hotspot.active .map-card-tip.dir-right{transform:translateY(-50%) translateX(0) scale(1)}
.map-legend{margin-top:48px;display:grid;gap:24px 16px}
.map-panel[data-panel=area] .map-legend{grid-template-columns:repeat(6,1fr)}
.map-panel[data-panel=location] .map-legend{grid-template-columns:repeat(8,1fr)}
.map-legend-col{}
.map-legend-heading{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#fff;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.map-legend-icon{width:14px;height:14px;flex-shrink:0;display:block}
.map-legend-item{font-size:11px;color:#999;line-height:2;letter-spacing:.3px}
.map-legend-item span{color:#666;margin-right:6px;font-weight:500}
.map-legend-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:1200px){
.map-panel[data-panel=area] .map-legend{grid-template-columns:repeat(3,1fr)}
.map-panel[data-panel=location] .map-legend{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
.map-area{padding:0 16px 40px}
.map-viewport{height:60vh;min-height:320px;border-radius:4px}
.map-panel[data-panel=area] .map-legend{grid-template-columns:repeat(2,1fr)}
.map-panel[data-panel=location] .map-legend{grid-template-columns:repeat(2,1fr)}
.map-legend-heading{font-size:9px;letter-spacing:1px;gap: 12px}
.map-legend-item{font-size:10px}
.map-card-tip{width:200px}
.map-card-img{height:110px}
.map-card-body{padding:14px}
.map-hotspot{width:40px;height:40px}
.map-hotspot-main{width:56px;height:56px}
}
@media(max-width:480px){
.map-panel[data-panel=area] .map-legend{grid-template-columns:1fr}
.map-panel[data-panel=location] .map-legend{grid-template-columns:1fr}
.map-legend-subgrid{grid-template-columns:1fr}
}

/* ===== ENDING ===== */
.ending{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#fff;
    scroll-margin-top:90px;
}

.ending-image-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
}

.ending-image{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.ending::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.22) 0%,
        rgba(0,0,0,0) 32%,
        rgba(0,0,0,0) 58%,
        rgba(0,0,0,.38) 100%
    );
}

.ending-content{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,430px);
    grid-template-rows:auto 1fr auto;
    column-gap:clamp(32px,4vw,64px);
    /* 90px top padding clears the fixed header */
    padding:calc(90px + 24px) 4vw 24px;
}

.ending-title{
    grid-column:1 / -1;
    grid-row:1;
    align-self:start;
    font-size:clamp(52px,6.5vw,112px);
    font-weight:500;
    line-height:.95;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.ending-subtitle{
    grid-column:1;
    grid-row:3;
    align-self:end;
    font-size:clamp(44px,5.6vw,96px);
    font-weight:500;
    line-height:.95;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.ending-body{
    grid-column:2;
    grid-row:3;
    align-self:end;
    justify-self:end;
    width:100%;
    max-width:430px;
    font-size:clamp(13px,.9vw,16px);
    font-weight:400;
    line-height:1.5;
    letter-spacing:.01em;
    color:rgba(255,255,255,.92);
    text-shadow:0 1px 10px rgba(0,0,0,.45);
}

.ending-body p{
    margin-bottom:8px;
}

.ending-body p:last-child{
    margin-bottom:0;
}

@media(max-width:1023px){
    .ending-content{
        grid-template-columns:minmax(0,1fr) minmax(280px,360px);
        column-gap:32px;
        padding:calc(90px + 24px) 32px 40px;
    }

    .ending-title{
        font-size:clamp(46px,6.2vw,72px);
    }

    .ending-subtitle{
        font-size:clamp(38px,5.2vw,64px);
    }
}

@media(max-width:767px){
    .ending-content{
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr auto auto;
        padding:calc(90px + 24px) 24px 36px;
    }

    .ending-title{
        grid-column:1;
        font-size:clamp(42px,11vw,64px);
    }

    .ending-subtitle{
        grid-column:1;
        grid-row:3;
        font-size:clamp(38px,10vw,60px);
        margin-bottom:20px;
    }

    .ending-body{
        grid-column:1;
        grid-row:4;
        justify-self:start;
        max-width:520px;
        font-size:13px;
    }
}

.enquiry{width:100%;background:#121212;position:relative;scroll-margin-top:90px}
/* Horizontal padding matches the ending section */
.enquiry-content{width:100%;padding:96px 24px 24px}
@media(min-width:768px){.enquiry-content{padding:128px 4vw 48px}}

/* Section head: pink star + title, mirroring the explore title */
.enquiry-head{display:flex;align-items:center;gap:24px;margin-bottom:56px}
@media(min-width:768px){.enquiry-head{gap:40px;margin-bottom:80px}}
.enquiry-star{width:36px;height:36px;flex-shrink:0;display:block}
@media(min-width:768px){.enquiry-star{width:56px;height:56px}}
.enquiry-title{margin:0;padding:0;font-size:clamp(44px, 5.6vw, 96px);line-height:1.02;font-weight:500;letter-spacing:-.02em;text-transform:uppercase;color:rgba(255,255,255,.9)}

/* ===== BRAND LOGO (standalone section) ===== */
.brandlogo{width:100%;background:#121212;display:flex;align-items:flex-end;padding:48px 0 0}
@media(max-width:767px){.brandlogo{padding:20px 0 0}}
.brandlogo-logo{display:block;height:clamp(120px,22vh,240px);width:auto;max-width:85%}

.enquiry-grid{display:grid;grid-template-columns:1fr;gap:64px}
@media(min-width:1024px){.enquiry-grid{grid-template-columns:1fr 1fr;gap:80px;padding: 0 96px}}
.enquiry-info{opacity:0;transform:translateY(40px);transition:all 1s .2s ease}
.enquiry.is-visible .enquiry-info{opacity:1;transform:translateY(0)}
.enquiry-desc{font-size:14px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:48px;max-width:480px}
@media(min-width:768px){.enquiry-desc{font-size:16px}}
.enquiry-contact{margin-bottom:48px}
.enquiry-contact-item{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px}
.enquiry-contact-icon{width:16px;height:16px;color:#EC008C;flex-shrink:0;margin-top:2px}
a.enquiry-contact-item{transition:color .3s}
a.enquiry-contact-item:hover{color:#EC008C}
.enquiry-contact-text{font-size:14px;color:rgba(255,255,255,.9)}
.enquiry-contact-title{display:block;font-size:14px;font-weight:500;color:#fff}
.enquiry-contact-detail{display:block;font-size:14px;color:rgba(255,255,255,.7)}

/* --- Sales Advice entry --- */
.enquiry-sales-advice{
    display:flex;
    align-items:center;        
    gap:18px;                  
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08);
    padding:20px 22px;
    margin:48px 0px;
    text-decoration:none;
    transition:all .35s ease;
    max-width:480px;
}
.enquiry-sales-advice:hover{
    background:rgba(236,0,140,.04);
    border-color:rgba(236,0,140,.25);
    transform:translateX(6px);
}
.enquiry-sales-advice-icon{
    width:32px;
    height:32px;
    color:#EC008C;
    flex-shrink:0;
    transition:transform .35s ease, color .3s ease;
}
.enquiry-sales-advice:hover .enquiry-sales-advice-icon{
    transform:scale(1.1);
    color:#ff2da6;
}
.enquiry-sales-advice-content{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;                    
}
.enquiry-sales-advice-label{
    font-size:12px;
    color:#EC008C;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.enquiry-sales-advice-text{
    font-size:14px;
    color:rgba(255,255,255,.85);
    font-weight:400;
    transition:color .3s;
}
.enquiry-sales-advice:hover .enquiry-sales-advice-text{
    color:#fff;
}

.enquiry-arrow{
    width:18px;
    height:18px;
    color:rgba(255,255,255,.9);   
    transition:transform .3s ease, color .3s ease;
    flex-shrink:0;
}
.enquiry-sales-advice:hover .enquiry-arrow{
    transform:translateX(5px);     
    color:#EC008C;                 
}

.enquiry-social{display:flex;align-items:center;gap:16px}
.enquiry-social-logo{height:128px;width:auto;margin-right:24px;display:block}
.enquiry-social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:opacity .3s;opacity: 0.8;}
.enquiry-social-link img{width:24px;height:24px}
.enquiry-social-link:hover{opacity:1}
.enquiry-form-wrap{opacity:0;transform:translateY(40px);transition:all 1s .4s ease}
.enquiry.is-visible .enquiry-form-wrap{opacity:1;transform:translateY(0)}
.enquiry-form{display:flex;flex-direction:column;gap:20px}
.enquiry-form-row{display:grid;grid-template-columns:1fr;gap:20px}
.enquiry-form-row-full{grid-template-columns:1fr}
@media(min-width:640px){.enquiry-form-row{grid-template-columns:1fr 1fr}}
.enquiry-field{display:flex;flex-direction:column;gap:8px}
.enquiry-field-label{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.15em;text-transform:uppercase}
.enquiry-field-input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:14px 16px;color:#fff;font-size:14px;transition:border-color .3s;border-radius:0}
.enquiry-field-input:focus{outline:none;border-color:rgba(236,0,140,.4)}
.enquiry-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:14px 16px;color:#fff;font-size:14px;transition:border-color .3s;resize:none;border-radius:0}
.enquiry-textarea:focus{outline:none;border-color:rgba(236,0,140,.4)}
.enquiry-submit{background:#EC008C;color:#fff;padding:16px 48px;font-size:13px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;transition:background-color .3s;align-self:flex-start;cursor:pointer;border-radius:0;border:none}
.enquiry-submit:hover{background:#d4007d}
.enquiry-success{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:300px}
.enquiry-success.is-visible{display:flex}
.enquiry-success-icon{width:56px;height:56px;background:rgba(236,0,140,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.enquiry-success-icon svg{width:24px;height:24px;color:#EC008C}
.enquiry-success-title{color:#fff;font-size:24px;font-weight:500;margin-bottom:12px}
.enquiry-success-text{color:rgba(255,255,255,.5);font-size:14px;line-height:1.6;max-width:400px;text-align:center}

.site-footer {background: #121212;}
.site-footer-bar{border-top:1px solid rgba(255,255,255,.06);padding:24px 32px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}
@media(min-width:768px){.site-footer-bar{flex-direction:row}}
.site-footer-copy{font-size:12px;color:rgba(255,255,255,.25)}
.site-footer-links{display:flex;gap:32px}
.site-footer-links a,.site-footer-links span{font-size:12px;color:rgba(255,255,255,.25);transition:color .3s}
.site-footer-links a:hover{color:rgba(255,255,255,.5)}

/* Transition section */
.transition{position:relative;width:100%;padding: 90px 0 45px;background:#fff;overflow:hidden}
.transition-inner{width:88%;margin:0 auto;text-align:center;position:relative;z-index:2}

.transition-eyebrow,.transition-title-wrap,.transition-desc{opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94),transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);will-change:transform,opacity}
.transition.is-visible .transition-eyebrow,.transition.is-visible .transition-title-wrap,.transition.is-visible .transition-desc{opacity:1;transform:translateY(0)}

.transition-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:#121212;margin-bottom:20px;display:block}
.transition-title-wrap{position:relative;display:inline-block;margin-bottom:40px;cursor:default}
.transition-title{font-size:clamp(32px,8vw,56px);font-weight:500;line-height:1.08;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.transition-title span{display:block}
.transition-title-base{color:#EC008C}
.transition-title-spotlight{position:absolute;top:0;left:0;width:100%;height:100%;color:#E17427;clip-path:circle(0px at 50% 50%);will-change:clip-path;transition:clip-path .15s ease-out;pointer-events:none}
.transition-inner:hover .transition-title-spotlight{clip-path:circle(120px at var(--mouse-x,50%) var(--mouse-y,50%))}

.transition-desc{font-size:13px;font-weight:400;line-height:1.8;letter-spacing:.03em;color:#414042;max-width:600px;margin:0 auto;white-space:pre-line}
.transition-desc+.transition-desc{margin-top:24px}

/* Responsive */
@media(min-width:768px){
    .transition{padding: 90px 0 45px;}
    .transition-inner{width:80%}
    .transition-title{font-size:clamp(40px,5.5vw,72px)}
    .transition-desc{font-size:14px}
}
@media(min-width:1024px){
    .transition{padding: 0px 0 20px;}
    .transition-inner{width:80%}
    .transition-title{font-size:clamp(40px,5.5vw,80px)}
    .transition-desc{font-size:16px}
}

/* Nightlife section */
.nightlife{position:relative;width:100%;padding-bottom:90px;background:#fff;overflow:hidden}
.nightlife-inner{width:100%;margin:0 auto;text-align:center;position:relative;z-index:2}
/* Split-tone banner background */
.nightlife-banner{width:100%;position:relative;background:linear-gradient(to bottom,#f2f2f2 50%,#E17427 50%);padding:60px 0;opacity:1;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94) .4s,transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94) .4s;will-change:transform,opacity}
.nightlife.is-visible .nightlife-banner{opacity:1;transform:translateY(0)}
.nightlife-banner-inner{width:88%;margin:0 auto;position:relative;z-index:2}
.nightlife-banner-img{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#f5f5f5}
.nightlife-banner-img img{width:100%;height:100%;object-fit:cover;display:block}
.nightlife-banner-text{display:flex;justify-content:space-between;align-items:flex-end;margin-top:24px;gap:24px}
.nightlife-banner-title{font-size:14px;font-weight:600;color:#121212;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;text-align:left;max-width:55%}
.nightlife-banner-desc{font-size:13px;font-weight:400;color:#414042;line-height:1.6;letter-spacing:.01em;text-align:right;max-width:320px}

@media(min-width:768px){
    .nightlife{padding-bottom:90px}
    .nightlife-inner{width:100%}
    .nightlife-banner-inner{width:88%}
    .nightlife-banner-title{font-size:16px}
    .nightlife-banner-desc{font-size:14px;max-width:400px}
}
@media(min-width:1024px){
    .nightlife{padding-bottom:180px}
    .nightlife-inner{width:80%}
    .nightlife-banner-inner{width:94%}
    .nightlife-banner-title{font-size:20px}
    .nightlife-banner-desc{font-size:15px}
}

/* ===== SECTION: LANDING ===== */
.section-landing {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 120px 0;
    overflow: hidden;
}

.section-landing-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.section-landing-container {
    width: 60%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

/* Title */
.section-landing-title {
    font-size: clamp(14px, 2.8vw, 28px);
    font-weight: 400;
    color: #121212;
    letter-spacing: 0.012em;
    line-height: 1.18;
    text-transform: uppercase;
    margin: 48px 56px;
}

/* Pink keyword accent */
.title-accent {
    color: #EC008C;
}

/* Decorative line */
.section-landing-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    margin: 48px 0;          
}

.divider-icon {
    width: 20px;
    height: 20px;
    background-color: #121212;                    
    mask-image: url('../images/section-landing/icon-start.svg');
    -webkit-mask-image: url('../images/section-landing/icon-start.svg');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* End icon mirrored horizontally */
.divider-icon-end {
    transform: scaleX(-1);
}

.divider-line {
    width: 100%;
    height: 1px;
    background-color: #121212;  
    margin: -8px;                  
}

/* Subtitle */
.section-landing-subtitle {
    font-size: clamp(15px, 1.8vw, 20px);
    font-weight: 400;
    color: #414042;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 32px;
}

/* Body text */
.section-landing-body {
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 400;
    color: #414042;
    line-height: 1.85;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
}

.section-landing-body:last-of-type {
    margin-bottom: 0;
}

.section-landing-body strong {
    font-weight: 500;
    color: #EC008C;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .section-landing {
        padding: 32px 0;
    }

    .section-landing-container {
        width: 88%;
    }

    .section-landing-title {
        letter-spacing: 0.1em;
        margin-bottom: 48px;
    }
    
    .section-landing-divider {
        margin: 48px 0;
    }
    
    .divider-line {
        width: 280px;              
    }
    
    .divider-icon {
        width: 16px;
        height: 16px;
    }

    .section-landing-subtitle {
        margin-bottom: 32px;
    }

    .section-landing-body {
        max-width: 100%;
        margin-bottom: 20px;
    }
}
/* ===== Word-by-word colour reveal ===== */

#landing .js-reveal-text,
#overview .js-reveal-text {
    color: #c8c6c1; 
}

.reveal-word {
    display: inline-block;
    will-change: color;
}

.living{padding: 80px 0 0;position:relative;width:100%;background:#fff}
@media(min-width:768px){.living{padding: 80px 0 0}}
@media(min-width:1024px){.living{padding: 180px 0 0}}

/* Scroll container: provides 400vh of scroll distance */
.living-scroll{position:relative;width:100%;height:400vh}

/* Sticky full-screen container (title on top, body below) */
.living-sticky {
    position: sticky;
    top: 80px;
    width: 90%;
    height: 95vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    z-index: 2;
    overflow: hidden;
}
@media(min-width:1024px){.living-sticky{
    width: 90%;
    height: 90vh;}}

.living-header{position:relative;width:100%;padding:24px 32px 48px 32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-align: center;}
@media(min-width:768px){.living-header{padding:32px 32px 32px 32px}}
@media(min-width:1024px){.living-header{padding:40px 80px 40px 80px}}

.living-header-inner{position:relative;padding:24px 32px;opacity:0;transform:translateY(32px);transition:all 1s .2s ease}
.living.is-visible .living-header-inner{opacity:1;transform:translateY(0)}
@media(min-width:768px){.living-header-inner{padding:32px 48px}}

.living-header-corner{position:absolute;width:20px;height:20px;border-color:#d1d5db}
@media(min-width:768px){.living-header-corner{width:20px;height:20px}}
.living-header-corner--tl{top:0;left:0;border-top:2px solid #E17427;border-left:2px solid #E17427;border-top-left-radius:20px}
.living-header-corner--tr{top:0;right:0;border-top:2px solid #E17427;border-right:2px solid #E17427;border-top-right-radius:20px}
.living-header-corner--bl{bottom:0;left:0;border-bottom:2px solid #E17427;border-left:2px solid #E17427;border-bottom-left-radius:20px}
.living-header-corner--br{bottom:0;right:0;border-bottom:2px solid #E17427;border-right:2px solid #E17427;border-bottom-right-radius:20px}

.living-eyebrow {
    font-size:11px;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:#121212;margin-bottom:20px;display:block
}
@media(min-width:768px) {
    .living-eyebrow {
        margin-bottom: 16px;
    }
}

.living-title{font-size:32px;font-weight:500;color:#EC008C;line-height:1.08;text-align:center;letter-spacing:-0.02em;text-transform:uppercase}
@media(min-width:768px){.living-title{font-size:40px}}
@media(min-width:1024px){.living-title{font-size:52px}}

.living-desc {
font-size:16px;font-weight:400;line-height:1.75;letter-spacing:.03em;color:#121212;max-width:1200px;margin:0 auto;white-space:pre-line;
}
@media(min-width:768px) {
    .living-desc {
        font-size: 24px;
        line-height: 1.75;
    }
}

/* Body fills the remaining sticky space, split into media + content */
.living-body{flex:1;display:flex;flex-direction:column;min-height:0}
@media(min-width:768px){.living-body{flex-direction:row}}

/* Media: top on mobile, right on desktop */
.living-media{width:100%;height:55%;padding:0 16px 16px 16px;order:1}
@media(min-width:768px){.living-media{width:50%;height:100%;padding:16px 32px;order:2;display:flex;align-items:center}}
@media(min-width:1024px){.living-media{padding:16px 48px}}
.living-media-frame{position:relative;width:100%;height:100%;overflow:hidden;}

.living-image{position:absolute;inset:0}
.living-image img{width:100%;height:100%;object-fit:cover;display:block}
.living-image-fallback{position:absolute;inset:0}
.living-image-fallback--1{background:#5eead4}
.living-image-fallback--2{background:#7dd3fc}
.living-image-fallback--3{background:#fcd34d}
.living-image-fallback--4{background:#6ee7b7}

/* Content: bottom on mobile, left on desktop */
.living-content{width:100%;flex:1;order:2;display:flex;align-items:center;justify-content:center;padding:0 16px 16px 16px}
@media(min-width:768px){.living-content{width:50%;height:100%;order:1;padding:16px 32px;justify-content:flex-start}}
@media(min-width:1024px){.living-content{padding:16px 48px 16px 80px}}
.living-content-inner{display:flex;align-items:center;width:100%;max-width:32rem}
@media(min-width:768px){.living-content-inner{max-width:none}}

.living-track{position:relative;width:2px;background:#e5e7eb;margin-right:24px;flex-shrink:0;align-self:center;height:128px}
@media(min-width:768px){.living-track{margin-right:40px;height:480px}}
.living-track-icon{position:absolute;left:-8px;top:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.living-track-icon img{width:100%;height:100%;display:block}

.living-panels{position:relative;flex:1;height:128px}
@media(min-width:768px){.living-panels{height:480px}}
.living-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end}
.living-panel-title{font-size:24px;font-weight:400;color:#111827;margin-bottom:10px;letter-spacing:-0.02em}
@media(min-width:768px){.living-panel-title{font-size:32px;margin-bottom:14px}}
.living-panel-text{font-size:14px;color:#414042;line-height:1.75;font-weight:300}
@media(min-width:768px){.living-panel-text{font-size:14px;max-width:28rem}}
@media(min-width:1024px){.living-panel-text{font-size:16px}}

/* ===== Announcement modal ===== */
.announcement-overlay{position:fixed;inset:0;z-index:9999;background:rgba(18,18,18,0.35);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
.announcement-overlay.active{opacity:1;visibility:visible}
.announcement-modal{position:relative;width:80%;max-width:720px;background:#EC008C;border-radius:4px;overflow:hidden;transform:translateY(30px) scale(0.96);transition:transform .6s cubic-bezier(.22,1,.36,1);box-shadow:0 25px 80px rgba(0,0,0,0.25)}
.announcement-overlay.active .announcement-modal{transform:translateY(0) scale(1)}
.announcement-title{text-align:center;padding:28px 24px 20px;color:#fff;font-size:13px;font-weight:500;letter-spacing:3.5px;text-transform:uppercase;background:#EC008C;border-bottom:1px solid rgba(255,255,255,0.25)}
.announcement-close{position:absolute;top:16px;right:16px;z-index:10;width:40px;height:40px;border:none;background:rgba(255,255,255,0.3);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s ease,transform .3s ease}
.announcement-close:hover{background:#fff;transform:rotate(90deg)}
.announcement-close:hover svg{stroke:#EC008C}
.announcement-close svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;transition:stroke .3s ease}
.announcement-body{padding:12px;background:#fff}

/* Image: full display, original ratio, no crop */
.announcement-image-wrap{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.announcement-image-wrap img{
    max-width:100%;
    max-height:85vh;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}

@media(max-width:768px){
    .announcement-modal{width:92%;max-width:none}
    .announcement-image-wrap img{max-height:65vh}
    .announcement-title{padding:22px 16px 16px;font-size:12px;letter-spacing:2.5px}
    .announcement-close{top:12px;right:12px;width:36px;height:36px}
}

.life{width:100%;position:relative;background:#ffffff;padding:20px 0;opacity:0;transform:translateY(40px);transition:opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94) .4s,transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94) .4s;will-change:transform,opacity}
.life.is-visible{opacity:1;transform:translateY(0);padding-bottom: 100px;}
.life-inner{width:98%;margin:0 auto;position:relative;z-index:2}

.life-grid{display:flex;gap:4px;width:100%;height:680px}
.life-card{position:relative;flex:1;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(0.25,0.46,0.45,0.94);color:#fff}

/* Background image layer */
.life-card-media{position:absolute;inset:0;z-index:0}
.life-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}

/* Theme-colour overlay */
.life-card::after{content:"";position:absolute;inset:0;z-index:1;transition:opacity .6s ease}
.life-card--magenta::after{background:rgba(236,0,140,.8)}
.life-card--black::after{background:rgba(18,18,18,.8)}
.life-card--orange::after{background:rgba(225,116,39,.8)}
.life-card--grey::after{background:rgba(65,64,66,.8)}

/* Bottom gradient for text readability on hover */
.life-card::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 82%);opacity:0;transition:opacity .6s ease}

/* Accordion expand: overlay fades, background scales up */
.life-grid:hover .life-card{flex:.5}
.life-grid:hover .life-card:hover{flex:2.5}
.life-card:hover::after{opacity:.06}
.life-card:hover::before{opacity:1}
.life-card:hover .life-card-media img{transform:scale(1.08)}

.life-corner{position:absolute;width:10px;height:10px;z-index:4;opacity:.85;transition:opacity .3s}
.life-corner img{width:100%;height:100%;display:block}
.life-corner--tl{top:16px;left:16px}
.life-corner--tr{top:16px;right:16px}
.life-corner--bl{bottom:16px;left:16px}
.life-corner--br{bottom:16px;right:16px}
.life-card:hover .life-corner{opacity:1}

/* Title strictly centred by default */
.life-card-title{position:absolute;top:50%;left:0;right:0;text-align:center;transform:translateY(-50%);font-size:28px;font-weight:500;white-space:nowrap;z-index:3;padding:0 24px;transition:all .6s cubic-bezier(0.25,0.46,0.45,0.94);will-change:top,transform,text-align,padding,font-size,writing-mode,letter-spacing}

/* Collapsed: title vertical and shrunk so it always fits */
.life-grid:hover .life-card:not(:hover) .life-card-title{font-size:15px;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.06em;left:50%;right:auto;transform:translate(-50%,-50%);padding:0}

/* Hover: title horizontal, moved to the bottom-left */
.life-card:hover .life-card-title{top:auto;bottom:40px;left:48px;right:auto;transform:translateY(0);text-align:left;padding:0;font-size:28px;writing-mode:horizontal-tb;letter-spacing:normal}

/* Desc hidden by default */
.life-card-desc{position:absolute;bottom:40px;right:48px;max-width:300px;font-size:14px;font-weight:400;line-height:1.6;text-align:right;opacity:0;transform:translateY(16px);z-index:3;transition:all .6s cubic-bezier(0.25,0.46,0.45,0.94);will-change:opacity,transform}

/* Hover: desc slides in */
.life-card:hover .life-card-desc{opacity:.92;transform:translateY(0)}
/* ===== Mobile (<=768px) ===== */
@media(max-width:768px){
.life{padding:0}
.life-grid{flex-direction:column;height:auto;gap:4px}

/* Collapsed: label bar showing the title only */
.life-card{
  flex:none !important;
  height:72px;
  border-radius:6px;
  cursor:pointer;
  transition:height .5s cubic-bezier(.25,.46,.45,.94);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
  /* Pseudo-elements must not intercept clicks */
  pointer-events:auto;
}

/* Expanded: image visible, content sinks to the bottom */
.life-card.is-open{
  height:420px;
  align-items:flex-start;
  justify-content:flex-end;
  padding:32px 24px;
}

.life-card::after{opacity:.85;transition:opacity .5s ease}
.life-card.is-open::after{opacity:.15}

.life-card::before{opacity:0}
.life-card.is-open::before{opacity:1}

.life-corner{width:8px;height:8px}
.life-corner--tl{top:10px;left:10px}
.life-corner--tr{top:10px;right:10px}
.life-corner--bl{bottom:10px;left:10px}
.life-corner--br{bottom:10px;right:10px}

/* Title centred when collapsed */
.life-card-title,
.life-grid:hover .life-card:not(:hover) .life-card-title,
.life-card:hover .life-card-title{
  position:static;
  transform:none;
  text-align:center;
  font-size:16px;
  writing-mode:horizontal-tb;
  letter-spacing:normal;
  padding:0;
  line-height:1.3;
  top:auto;bottom:auto;left:auto;right:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  margin:0;
}

/* Expanded: left-aligned natural flow */
.life-card.is-open .life-card-title{
  font-size:22px;
  text-align:left;
  margin-bottom:8px;
}

/* Desc hidden when collapsed */
.life-card-desc,
.life-card:hover .life-card-desc{
  position:static;
  max-width:none;
  font-size:13px;
  line-height:1.6;
  text-align:left;
  opacity:0;
  transform:translateY(8px);
  transition:all .5s cubic-bezier(.25,.46,.45,.94);
  max-height:0;
  overflow:hidden;
  margin:0;
}

/* Expanded: desc slides in below the title */
.life-card.is-open .life-card-desc{
  opacity:.92;
  transform:translateY(0);
  max-height:200px;
}

/* Image */
.life-card-media img{transform:none !important}
.life-card.is-open .life-card-media img{transform:scale(1.05) !important}
}

/* ===== Lobby walkthrough (exterior -> push into the entrance -> interior) ===== */
.lobby{position:relative;width:100%;height:100vh;overflow:hidden;}
.lobby-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform,opacity;backface-visibility:hidden;}
.lobby-img-int{z-index:1;}
.lobby-img-ext{z-index:2;transform-origin:50% 75%;} /* Desktop zoom origin locked on the entrance doorway */
.lobby-caption{position:absolute;left:0;bottom:48px;width:100%;z-index:3;text-align:center;pointer-events:none;color:#fff;}
.lobby-caption-label{font-size:12px;letter-spacing:.35em;font-weight:500;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:10px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
.lobby-caption-title{font-size:clamp(22px,2.6vw,38px);font-weight:500;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
/* Mobile: no push-in — the two images become a full-width scroll-snap swipe strip */
@media(max-width:767px){
    .lobby{height:auto;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:row;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    .lobby::-webkit-scrollbar{display:none;}
    .lobby-img{position:relative;top:auto;left:auto;width:auto;height:auto;object-fit:contain;transform:none!important;flex:0 0 100%;scroll-snap-align:center;}
    .lobby-img-ext{order:1;}
    .lobby-img-int{order:2;}
    .lobby-caption{display:none;}
}

/* ===== Interior expand (cropped frame zooms out into the full pano) ===== */
/* Expansion overlay: grows from the interior-ph box to the full pano */
.interior-expand{position:absolute;z-index:5;overflow:hidden;pointer-events:none;}
.interior-expand img{position:absolute;display:block;max-width:none;}
/* End-state text groups: diamond+title top-left, desc+brands bottom-right */
.interior-end{position:absolute;z-index:6;opacity:0;pointer-events:none;}
.interior-end-top{display:flex;align-items:center;gap:24px;}
.interior-end-top .interior-diamond{flex-shrink:0;}
.interior-end-top .interior-title{margin-bottom:0;}
.interior-end-bottom{display:flex;align-items:flex-start;gap:48px;}
.interior-end-bottom .interior-desc{margin:0;text-align:left;}
.interior-brands-end{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;flex-wrap:nowrap;}
.interior-brands-end span::before{content:'\25C6';font-size:6px;color:rgba(18,18,18,.25);margin-right:10px;vertical-align:middle;}
@media(max-width:767px){.interior-end{display:none;}}

/* ===== EXPLORE ===== */
.explore{position:relative;width:100%;background:#121212;color:#f2f2f0;padding:64px 0 0;overflow:hidden}
@media(min-width:768px){.explore{padding:90px 0 0}}
@media(min-width:1024px){.explore{padding:120px 0 0}}
.explore-inner{opacity:0;transform:translateY(40px);transition:all 1s ease}
.explore.is-visible .explore-inner{opacity:1;transform:translateY(0)}
.explore-head{display:flex;align-items:center;gap:24px;padding:0 24px 48px}
@media(min-width:768px){.explore-head{gap:40px;padding:0 32px 48px}}
@media(min-width:1024px){.explore-head{padding:0 80px 96px}}
.explore-star{width:36px;height:36px;flex-shrink:0;display:block}
@media(min-width:768px){.explore-star{width:56px;height:56px}}
.explore-title{font-size:clamp(40px,4.6vw,72px);line-height:1.02;font-weight:500;letter-spacing:-.02em}
.explore-title span{display:block;color:rgba(242,242,240,.55)}
.explore-list{border-top:1px solid rgba(255,255,255,.14)}
.exp-row{position:relative;display:grid;grid-template-columns:64px minmax(220px,340px) 1fr;align-items:center;gap:24px;min-height:190px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.14);overflow:hidden;isolation:isolate;transition:min-height .8s cubic-bezier(.65,.05,0,1)}
@media(min-width:768px){.exp-row{padding:0 32px}}
@media(min-width:1024px){.exp-row{grid-template-columns:80px minmax(220px,340px) 1fr;gap:48px;padding:0 80px}}
@media(min-width:769px){.exp-row:hover{min-height:min(46vh,480px)}}
.exp-row-media{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity .8s cubic-bezier(.65,.05,0,1)}
.exp-row-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);filter:grayscale(15%) brightness(.75);transition:transform 1.4s cubic-bezier(.65,.05,0,1)}
.exp-row-media::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,.15) 45%,rgba(18,18,18,.35) 100%)}
.exp-row:hover .exp-row-media,.exp-row.is-active .exp-row-media{opacity:1}
.exp-row:hover .exp-row-media img,.exp-row.is-active .exp-row-media img{transform:scale(1.02)}
.exp-row-star{width:18px;height:18px;display:block;transition:transform .6s cubic-bezier(.65,.05,0,1)}
.exp-row:hover .exp-row-star,.exp-row.is-active .exp-row-star{transform:rotate(90deg)}
.exp-row-desc{font-size:15px;line-height:1.5;font-weight:400;max-width:340px}
@media(min-width:1024px){.exp-row-desc{font-size:16px}}
.exp-row-word{justify-self:end;text-align:right;font-size:clamp(22px, 4.5vw, 52px);;font-weight:500;letter-spacing:-.03em;line-height:1;position:relative;padding-bottom:.08em}
.exp-row-word::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;background:#f2f2f0;transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.65,.05,0,1)}
.exp-row:hover .exp-row-word::after,.exp-row.is-active .exp-row-word::after{transform:scaleX(1)}
.explore-foot{padding:48px 24px 64px}
@media(min-width:768px){.explore-foot{padding:48px 32px 64px}}
@media(min-width:1024px){.explore-foot{padding:96px 80px 110px}}
.explore-foot-text{font-size:clamp(20px,2vw,32px);line-height:1.3;font-weight:500;letter-spacing:.04em;text-transform:uppercase;max-width:1200px}
/* Night panorama shown complete: natural aspect ratio, no crop */
.explore-foot-media{margin-top:32px;width:100%;overflow:hidden}
@media(min-width:768px){.explore-foot-media{margin-top:48px}}
.explore-foot-media img{width:100%;height:auto;display:block;}
@media(max-width:768px){
    .exp-row{grid-template-columns:40px 1fr;row-gap:20px;padding:28px 24px;min-height:0}
    .exp-row-star{width:20px;height:20px}
    .exp-row-desc{grid-column:1/-1;max-width:100%}
    /* The word spans the full row so long titles (e.g. Connectivity) are never clipped */
    .exp-row-word{grid-column:1/-1;justify-self:end;text-align:right;font-size:clamp(24px,7vw,40px)}
    .exp-row.is-active{min-height:60vw}
}

/* ===== MAX-WIDTH BLEED LIMIT =====
   WP-style container cap: full-screen media frames stop growing at 2560px;
   below that every rule no-ops and mobile is unaffected. Stage 2
   (viewport aspect >= 21:9): the frame narrows to 100vh x 1.97 so the
   16:9 render loses at most ~10% top/bottom instead of being pillarboxed
   into a small box. Images and text share --bleed-frame, so edges always align. */
/* --hero-frame uses 100% (element basis), not 100vw: the Windows scrollbar
   makes them differ by ~15px, and img1 (JS, offsetWidth basis) must match
   img2 (CSS) pixel-perfectly or a vertical seam shows at the strip's edge */
:root{--bleed-max:2560px;--bleed-frame:var(--bleed-max);--hero-frame:min(100%, var(--bleed-frame))}
@media (min-width: 768px) and (min-aspect-ratio: 21/9){
    :root{--bleed-frame:min(var(--bleed-max), calc(100vh * 1.97))}
}

/* Lobby: frame capped and centred; clip-path keeps the scale-3.2 push-in inside the frame */
.lobby{clip-path:inset(0 max(0px, calc((100% - var(--bleed-frame)) / 2)))}

/* Carousel: stage capped and centred; the progress bar follows the same width */
.carousel-stage{max-width:var(--bleed-frame);margin:0 auto}
.carousel-bar{left:0;right:0;max-width:var(--bleed-frame);margin:0 auto}

/* Ending: image and dim gradient share the frame */
.ending-image-wrap{max-width:var(--bleed-frame);margin:0 auto}
.ending::after{max-width:var(--bleed-frame);margin:0 auto}

/* Explore: night image capped and centred */
.explore-foot-media{max-width:var(--bleed-frame);margin-left:auto;margin-right:auto}

/* Intelligence: container capped like the other sections */
.intelligence-container{max-width:var(--bleed-frame)}

/* Interior: collapsed grid capped at 1536px (= 60% of a 2560 viewport) */
.interior-inner{max-width:1536px}

/* Desktop alignment rules (<768px handled by the mobile styles) */
@media (min-width: 768px){
    /* Lobby image: cover computed inside min(frame,100vw) x 100vh; negative-margin
   centring avoids transform, which would fight GSAP's scale */
    .lobby-img{left:50%;right:auto;max-width:var(--bleed-frame);margin-left:calc(min(100vw, var(--bleed-frame)) / -2)}

    /* Ending text: same frame width; padding capped by clamp */
    .ending-content{max-width:var(--bleed-frame);margin:0 auto;padding-left:clamp(32px,4vw,80px);padding-right:clamp(32px,4vw,80px)}

    /* Enquiry: same width and padding as ending for edge alignment */
    .enquiry-content{margin:0 auto;padding-left:clamp(32px,4vw,80px);padding-right:clamp(32px,4vw,80px)}

    /* Explore foot text aligns with the capped image */
    .explore-foot-text{margin-left:max(0px, calc((100% - var(--bleed-frame)) / 2))}
}

/* Ending: 128px bottom gap while the cap triggers (>2560px or >= 21:9);
   margin, not padding, so the section stays a clean 100vh */
@media (min-width: 2561px), (min-width: 768px) and (min-aspect-ratio: 21/9){
    .ending{margin-bottom:128px}
}

/* ===== HERO ULTRAWIDE FRAME (pairs with JS initStages) =====
   stage1: unchanged, JS anchors the initial geometry to the viewport so the
   entry zoom stays full-bleed; stage2: the strip lands on the frame's right
   edge with the pink field outside; stage3: webp covers the full width while
   detail + mp4 stay inside the frame, proportional to the 1920 composition. */
@media (min-width: 769px){
    /* 42% strip (img2 resting spot / img1 tween end): anchored to the frame's right edge */
    .hero-stage-img{right:max(0px, calc((100% - var(--hero-frame)) / 2));width:calc(var(--hero-frame) * .42);}

    /* stage3 text block: anchored to the frame's left edge */
    .hero-detail{left:max(0px, calc((100% - var(--hero-frame)) / 2));width:calc(var(--hero-frame) * .58);padding:calc(var(--hero-frame) * .12) calc(var(--hero-frame) * .08);}

    /* Slogan indent = frame left edge + 8% of frame width (entry path uncropped) */
    .hero-slogan-stage{padding-left:calc(max(0px, (100% - var(--hero-frame)) / 2) + var(--hero-frame) * .08);}
}

/* ===== MOBILE BREATHING ROOM ===== */

/* Enquiry mobile: form above contact info (entrance delays swapped) */
@media(max-width:1023px){
    .enquiry-form-wrap{order:-1;transition-delay:.2s;}
    .enquiry-info{transition-delay:.4s;}
}

/* Interior mobile: panorama hint badge, injected by JS (<=767px only) */
.interior-ph{position:relative;}
/* Icon-only frosted glass circle pinned to the initial image's bottom-right */
.interior-pano-hint{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:rgba(255,255,255,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#414042;pointer-events:none;}
.interior-pano-hint svg{width:16px;height:16px;flex-shrink:0;}
@media(min-width:768px){.interior-pano-hint{display:none;}}

/* Interior mobile panorama viewer: 50vh tall, horizontal drag */
body.pano-lock{overflow:hidden;}
.pano-viewer{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;}
.pano-viewer.is-open{opacity:1;visibility:visible;}
.pano-viewer-backdrop{position:absolute;inset:0;background:rgba(18,18,18,.75);}
.pano-viewer-frame{position:relative;width:100%;z-index:2;}
.pano-viewer-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pano-viewer-scroll::-webkit-scrollbar{display:none;}
.pano-viewer-scroll img{display:block;height:50vh;width:auto;max-width:none;}
.pano-viewer-close{position:absolute;top:-60px;right:20px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* Line scrollbar: thin track + white thumb following the drag */
.pano-viewer-track{position:absolute;left:50%;bottom:-48px;transform:translateX(-50%);width:120px;height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;}
.pano-viewer-fill{display:block;height:100%;width:0;background:rgba(255,255,255,.85);border-radius:2px;}

/* Maps mobile: tooltips re-parented to body as fixed floating cards so the
   pannable viewport's overflow:hidden cannot clip them */
/* absolute（页面坐标）而不是 fixed：浮层随页面一起滚动，不会钉在屏幕上；
   JS 在打开时把 getBoundingClientRect 视口坐标加上 scrollX/scrollY 换算成页面坐标 */
.map-tip-floating{position:absolute!important;left:0;top:0;right:auto!important;bottom:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:2000;animation:mapTipIn .25s ease;}
@keyframes mapTipIn{from{opacity:0;}to{opacity:1;}}
.map-tip-floating::after{display:none!important;}
@media(max-width:768px){.map-card-tip.map-tip-floating{width:min(76vw,260px);}}

/* Maps mobile: legend columns collapsed by default, heading toggles */
@media(max-width:768px){
    /* Icon + title left-aligned; expand + on the right */
    .map-legend-heading{cursor:pointer;justify-content:flex-start;margin-bottom:0;-webkit-tap-highlight-color:transparent;}
    .map-legend-heading::after{content:'+';font-size:14px;font-weight:400;color:rgba(255,255,255,.4);margin-left:auto;transition:transform .3s ease;}
    .map-legend-col.is-open .map-legend-heading{margin-bottom:14px;}
    .map-legend-col.is-open .map-legend-heading::after{transform:rotate(45deg);}
    .map-legend-col .map-legend-item,.map-legend-col .map-legend-subgrid{display:none;}
    .map-legend-col.is-open .map-legend-item{display:block;}
    .map-legend-col.is-open .map-legend-subgrid{display:grid;}
}

/* Swipe indicators (JS-injected): dots for lobby; numbered 01-04 bar with pink fill for carousel */
.swipe-dots{display:flex;justify-content:center;gap:8px;margin:20px 0 5px;}
.swipe-dots i{width:6px;height:6px;border-radius:50%;background:rgba(18,18,18,.15);transition:background .3s ease,transform .3s ease;}
.swipe-dots i.is-on{background:#EC008C;transform:scale(1.25);}
.swipe-nums{display:flex;align-items:center;justify-content:space-between;margin:32px 24px 0;}
.swipe-nums .swipe-cur{color:#121212;font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;}
.swipe-nums .swipe-rail{flex:1;margin:0 24px;height:1px;background:rgba(18,18,18,.1);position:relative;}
.swipe-nums .swipe-fill{position:absolute;top:0;left:0;height:100%;width:0;background:#EC008C;transition:width .3s ease;}
.swipe-nums .swipe-total{color:rgba(65,64,66,.4);font-size:14px;font-variant-numeric:tabular-nums;}
@media(min-width:768px){.swipe-dots,.swipe-nums{display:none;}}