:root{--gold:#d4b06a;--gold2:#ecd29a;--white:#fbf8f2}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{min-height:100vh;min-height:100svh;background:#14110c;color:var(--white);font-family:'Montserrat',system-ui,sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.bg{position:fixed;inset:0;z-index:-2;background:#2a2016 url('bg-960.jpg') center 60%/cover no-repeat;background-image:image-set(url('bg-960.webp') type('image/webp'),url('bg-960.jpg') type('image/jpeg'));animation:zoom 22s ease-out both}
@media (min-width:761px){.bg{background-image:url('bg.jpg');background-image:image-set(url('bg.webp') type('image/webp'),url('bg.jpg') type('image/jpeg'))}}
.shade{position:fixed;inset:0;z-index:-1;background:
 radial-gradient(ellipse 60% 70% at 50% 46%,rgba(10,8,5,.62) 0%,rgba(10,8,5,.38) 50%,rgba(10,8,5,.12) 80%),
 linear-gradient(180deg,rgba(8,6,4,.45) 0%,rgba(8,6,4,.08) 35%,rgba(8,6,4,.18) 62%,rgba(8,6,4,.78) 100%)}
.wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 20px 7vh;gap:clamp(22px,4.2vh,46px);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.logo{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(78px,11vw,150px);line-height:.9;letter-spacing:.08em;margin-right:-.08em}
.group{font-family:'Montserrat',sans-serif;font-weight:400;font-size:clamp(15px,1.7vw,22px);letter-spacing:.62em;margin:6px -.62em 0 0}
.since{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font-size:clamp(10px,.9vw,12px);letter-spacing:.45em;color:var(--gold2)}
.since span:nth-child(2){margin-right:-.45em}
.rule{display:block;width:clamp(36px,5vw,70px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.since .rule:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.pillars{display:flex;align-items:stretch;justify-content:center}
.pillar{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px clamp(24px,4vw,58px);min-width:clamp(150px,15vw,220px)}
.pillar+.pillar{border-left:1px solid rgba(251,248,242,.38)}
.pillar svg{width:clamp(40px,3.6vw,52px);height:clamp(40px,3.6vw,52px);fill:none;stroke:var(--gold2);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.pillar span{font-size:clamp(11px,.95vw,13.5px);font-weight:400;letter-spacing:.28em;margin-right:-.28em}
.cities{font-size:clamp(10.5px,.9vw,13px);letter-spacing:.32em;font-weight:400;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.cities i{font-style:normal;color:var(--gold)}
.soon{display:flex;flex-direction:column;align-items:center}
.gold-line{display:block;width:56px;height:1px;background:var(--gold);margin-bottom:22px}
.soon h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(34px,4.6vw,64px);letter-spacing:.2em;margin-right:-.2em;line-height:1}
.tagline{margin-top:20px;font-size:clamp(10.5px,.95vw,13px);letter-spacing:.34em;line-height:2.1;font-weight:400;color:#f3ead8}
.fade{opacity:0;transform:translateY(14px);animation:fadeUp 1.3s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.2s}.d2{animation-delay:.6s}.d3{animation-delay:.95s}.d4{animation-delay:1.3s}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fade,.bg{animation:none;opacity:1;transform:none}}
@media (max-width:760px){
 .wrap{justify-content:flex-start;padding-top:9vh;gap:30px}
 .shade{background:linear-gradient(180deg,rgba(8,6,4,.62) 0%,rgba(8,6,4,.5) 45%,rgba(8,6,4,.62) 75%,rgba(8,6,4,.85) 100%)}
 .pillars{flex-direction:column;align-items:center;gap:0}
 .pillar{padding:16px 0;min-width:0;width:220px;gap:12px}
 .pillar+.pillar{border-left:0;border-top:1px solid rgba(251,248,242,.3)}
 .cities{max-width:330px;letter-spacing:.26em}
}
/* v1.1 legibility tweaks */
.pillar svg{width:clamp(44px,3.9vw,58px);height:clamp(44px,3.9vw,58px)}
.pillar span,.cities,.tagline{font-size:clamp(11px,1vw,14.5px)}
.since{font-size:clamp(10.5px,.95vw,13px)}
@media (min-width:761px){.shade{background:
 radial-gradient(ellipse 52% 62% at 50% 48%,rgba(10,8,5,.66) 0%,rgba(10,8,5,.42) 55%,rgba(10,8,5,.1) 85%),
 linear-gradient(180deg,rgba(8,6,4,.45) 0%,rgba(8,6,4,.08) 35%,rgba(8,6,4,.2) 62%,rgba(8,6,4,.8) 100%)}}
@media (max-width:760px){.cities i:nth-of-type(3){flex-basis:100%;height:0;overflow:hidden;visibility:hidden}}
