/* Home page */
.hero{position:relative;background:#0e0f1d}
.hero-pin{position:relative;height:100vh;height:100svh;overflow:hidden;color:var(--white)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#heroIdle{z-index:2}
.hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,24,.42) 0%,rgba(10,10,24,0) 28%,rgba(10,10,24,0) 62%,rgba(10,10,24,.45) 100%)}
.wordmark{position:absolute;left:var(--gutter);right:var(--gutter);top:22vh;z-index:4;will-change:transform,opacity}
.wordmark h1{font-weight:200;font-size:clamp(58px,12.6vw,214px);line-height:.86;letter-spacing:-.035em;text-shadow:0 4px 60px rgba(0,0,0,.25)}
.wordmark .tourism{display:flex;justify-content:space-between;max-width:min(45vw,760px);margin-top:clamp(10px,1.6vw,24px);font-weight:300;font-size:clamp(16px,2.4vw,40px);letter-spacing:.02em}
.hero-side{position:absolute;right:var(--gutter);bottom:clamp(64px,11vh,120px);z-index:4;max-width:min(420px,80vw);text-align:right;will-change:transform,opacity}
.hero-side h2{font-weight:400;font-size:clamp(22px,2.4vw,34px);line-height:1.15;letter-spacing:-.01em}
.hero-side p{font-family:'Caveat Brush',cursive;font-size:clamp(22px,2vw,30px);color:#ffe7a3;margin-top:6px}
.hero-meta{position:absolute;left:var(--gutter);bottom:clamp(64px,11vh,120px);z-index:4;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.8);max-width:280px}
.hero-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;display:grid;justify-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.hero-cue i{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,0),#fff);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(28px);opacity:0}}
.hero-intro{position:absolute;inset:auto 0 18vh 0;z-index:4;text-align:center;padding:0 var(--gutter);opacity:0}
.hero-intro p{font-weight:300;font-size:clamp(26px,3.6vw,56px);line-height:1.12;letter-spacing:-.015em;max-width:20ch;margin:0 auto;text-shadow:0 2px 40px rgba(0,0,0,.25)}

/* about collage */
.about{position:relative;background:var(--cream)}
.about-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.collage img{position:absolute;object-fit:cover;border-radius:18px;will-change:transform;box-shadow:0 30px 60px -40px rgba(27,29,58,.5)}
.collage .c1{left:4vw;top:12vh;width:22vw;height:17vw}
.collage .c2{left:6vw;bottom:9vh;width:15vw;height:20vw}
.collage .c3{right:5vw;top:9vh;width:19vw;height:25vw}
.collage .c4{right:17vw;bottom:6vh;width:17vw;height:12vw}
.collage .c5{left:30vw;top:5vh;width:11vw;height:8vw}
.about-copy{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 22vw;z-index:2}
.about-copy .h-1{font-weight:400}
.about-copy .eyebrow{margin-bottom:22px}
.about-copy .link-arrow{margin-top:30px}

/* services over the cloud sea */
.services{position:relative;overflow:hidden;color:var(--white);background:#2a3550}
.services .bg{position:absolute;inset:-12% 0;background:url(../media/cloudsea.jpg) center/cover;will-change:transform}
.services .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,36,.55),rgba(14,16,36,.25) 45%,rgba(14,16,36,.6))}
.services .wrap{position:relative}
.services .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.services .head .h-1{max-width:16ch}
/* destinations: marquee, a card that grows to full screen, then pinned slides */
.dest{position:relative;background:var(--cream)}
.dest-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.marquee{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;white-space:nowrap;font-weight:300;font-size:clamp(64px,10vw,170px);letter-spacing:-.03em;color:var(--ink);line-height:1}
.marquee span{display:inline-block;padding-right:.5em}
.marquee em{font-style:normal;color:var(--sun-deep)}
.dest-card{position:absolute;z-index:2;left:50%;top:50%;width:30vw;height:40vh;transform:translate(-50%,-50%);border-radius:28px;overflow:hidden;background:#111}
.slide{position:absolute;inset:0;overflow:hidden}
.slide canvas,.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slide img{will-change:transform}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 35%,rgba(0,0,0,.5));pointer-events:none}
.dest-ui{position:absolute;inset:0;z-index:3;color:var(--white);pointer-events:none;opacity:0}
.dest-ui .titles{position:absolute;left:var(--gutter);width:min(92vw,1400px);bottom:clamp(90px,15vh,150px);height:1.1em;overflow:hidden;font-weight:300;font-size:clamp(48px,7.6vw,128px);letter-spacing:-.03em;line-height:1.1}
.dest-ui .titles h3{position:absolute;left:0;top:0;font-weight:inherit;white-space:nowrap}
.dest-ui .scroll-hint{position:absolute;right:var(--gutter);bottom:clamp(90px,15vh,150px);font-weight:300;font-size:clamp(24px,3vw,48px);opacity:.75}
.dest-ui .descs{position:absolute;left:var(--gutter);bottom:clamp(36px,6vh,64px);height:3.4em;width:min(560px,80vw);font-size:15.5px;line-height:1.6;overflow:hidden}
.dest-ui .descs p{position:absolute;inset:0;opacity:0}
.dest-ui .count{position:absolute;right:var(--gutter);bottom:clamp(40px,6.5vh,70px);font-size:13px;font-weight:600;letter-spacing:.2em}
.dest-ui .go{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);pointer-events:auto}

/* statement */
.statement .h-display{max-width:22ch}

/* reach / globe */
.reach .grid-2{align-items:center}
.globe-wrap{position:relative;aspect-ratio:1;max-width:620px;width:100%;margin-left:auto}
#globe{width:100%;height:100%;overflow:visible}
#globe .ocean{fill:#ece4d4}
#globe .grat{fill:none;stroke:rgba(27,29,58,.08);stroke-width:.6}
#globe .land{fill:#d8ccb4;stroke:#f7f2e8;stroke-width:.5}
#globe .land.on{fill:var(--ink)}
#globe .arc{fill:none;stroke:var(--sun-deep);stroke-width:1.6;stroke-linecap:round}
#globe .dot{fill:var(--sun)} #globe .home{fill:var(--ink)}
#globe .ring{fill:none;stroke:var(--sun-deep);stroke-width:1.2}
#globe text{font:600 11px Montserrat,sans-serif;letter-spacing:.1em;fill:var(--ink);text-transform:uppercase}
.cta-band{text-align:center}
.cta-band .h-display{margin:18px auto 0;max-width:16ch}
.cta-band .lead{margin:22px auto 0}
.cta-band .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}

@media (max-width:900px){
  .wordmark{top:18vh}
  .hero-side{left:var(--gutter);text-align:left;bottom:120px}
  .hero-meta{display:none}
  .collage .c1{width:40vw;height:30vw;left:4vw;top:8vh}.collage .c2{display:none}.collage .c3{width:34vw;height:44vw;top:6vh}.collage .c4{width:38vw;height:28vw;bottom:5vh;right:6vw}.collage .c5{display:none}
  .about-copy{padding:0 7vw}
  
  .dest-card{width:70vw;height:46vh}
  .dest-ui .go{top:auto;bottom:clamp(140px,24vh,220px)}
}