/* ==========================================================================
   Home hero: "city showcase" (V2.1)
   A full-bleed stage that cross-fades the five city photographs, an editorial headline,
   a live city caption with progress bars, and four photographic destination cards.
   ========================================================================== */
.hx{--hx-gx:clamp(20px,5.6vw,96px);--hx-ease:cubic-bezier(.22,.61,.36,1);--hx-red:#FF4D6A;
  position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0b0d0c;
  display:grid;grid-template-rows:auto 1fr auto auto;min-height:100vh;min-height:max(100svh,600px)}

/* ---- stage: the five cities ---- */
.hxStage{position:absolute;inset:-3%;z-index:-3;translate:var(--px,0px) var(--py,0px);transition:translate .9s var(--hx-ease)}
.hxSlide{position:absolute;inset:0;opacity:0;will-change:opacity;transition:opacity 1.7s ease}
.hxSlide.on{opacity:1}
.hxSlide img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform;transition:transform 11s cubic-bezier(.2,.55,.25,1)}
.hx-ready .hxSlide.on img{transform:scale(1)}
.hxScrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,6,.9) 0%,rgba(5,6,6,.74) 40%,rgba(5,6,6,.3) 74%,rgba(5,6,6,.1) 100%),
    linear-gradient(0deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.55) 26%,rgba(5,6,6,0) 54%),
    linear-gradient(180deg,rgba(5,6,6,.66) 0%,rgba(5,6,6,.2) 18%,rgba(5,6,6,0) 30%)}
.hx:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 18% 62%,rgba(195,27,55,.16),transparent 70%)}

/* ---- navigation ---- */
.hxNav{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(14px,2.6vh,26px) var(--hx-gx) 0;min-height:88px}
.hxLinks{display:flex;gap:clamp(18px,2.4vw,40px)}
.hxLinks.r{justify-content:flex-end}
.hxLinks a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none;font:500 11px/1 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hxLinks a:after{content:"";position:absolute;left:0;right:100%;bottom:9px;height:1px;background:#fff;transition:right .35s var(--hx-ease)}
.hxLinks a:hover:after,.hxLinks a:focus-visible:after{right:0}
.hxLogo{display:block;line-height:0}.hxLogo img{display:block;height:clamp(46px,5.6vh,62px);width:auto}

/* ---- headline ---- */
.hxCopy,.hxDock{will-change:transform,opacity}
.hxCopy{align-self:center;padding:clamp(18px,3vh,40px) var(--hx-gx);max-width:min(880px,100%);box-sizing:border-box}
.hxKicker{display:flex;align-items:center;gap:16px;margin:0 0 clamp(14px,2.6vh,26px);font:500 11px/1.3 Inter,Arial,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:#fff}
.hxKicker:before{content:"";width:46px;height:2px;background:var(--hx-red);flex:0 0 auto}
.hxTitle{margin:0;font-family:"Antonio","Oswald","Arial Narrow",Impact,sans-serif;font-weight:500;text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff;background:none;text-shadow:0 4px 50px rgba(0,0,0,.45)}
.hxLine{display:block;overflow:hidden;padding-bottom:.06em}
.hxLine>span{display:block}
.hxLine.a{font-size:clamp(17px,min(2.2vw,3.6vh),34px);letter-spacing:.46em;line-height:1.2;margin-bottom:clamp(6px,1.4vh,14px)}
.hxLine.b{font-size:clamp(60px,min(10.6vw,15.4vh),176px);letter-spacing:.02em;line-height:.9}
@media(min-width:861px){.hxLine.b .w{display:block}}
.hxTitle i{font-style:normal;color:var(--hx-red);-webkit-text-fill-color:var(--hx-red)}
.hxIntro{max-width:600px;margin:clamp(16px,3vh,32px) 0 0;font:500 clamp(19px,min(1.85vw,3.2vh),29px)/1.42 "Cormorant Garamond",Georgia,serif;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hxIntro em{font-style:normal;color:#FFC2CC}

/* ---- city caption and controls ---- */
.hxCity{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 var(--hx-gx) clamp(12px,2vh,20px)}
.hxCap{display:flex;align-items:baseline;gap:18px;min-width:0}
.hxCount{font:500 12px/1 Inter,Arial,sans-serif;letter-spacing:.2em;color:rgba(255,255,255,.75);white-space:nowrap}.hxCount b{font-weight:500;color:#fff}
.hxCityLink{display:flex;align-items:baseline;gap:16px;color:#fff;text-decoration:none;min-width:0}
.hxCityName{font:500 clamp(26px,2.5vw,38px)/1 "Antonio","Oswald",sans-serif;letter-spacing:.06em;text-transform:uppercase;transition:opacity .5s ease,transform .6s var(--hx-ease)}
.hxCityTag{font:500 10.5px/1 Inter,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap;transition:opacity .5s ease .05s,transform .6s var(--hx-ease) .05s}
.hxCityGo{font:500 10.5px/1 Inter,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#FFC2CC;white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s}
.hxCityLink:hover .hxCityGo,.hxCityLink:focus-visible .hxCityGo{border-color:#FFC2CC}
.hx-swap .hxCityName,.hx-swap .hxCityTag{opacity:0;transform:translateY(8px)}
.hxCtl{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hxBars{display:flex;gap:8px}
.hxBars button{position:relative;width:clamp(34px,4.2vw,64px);height:26px;padding:0;border:0;background:none;cursor:pointer}
.hxBars button:before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:rgba(255,255,255,.35)}
.hxBars i{position:absolute;left:0;right:0;top:12px;height:2px;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.hxBars button.on i{animation:hxFill var(--hx-dur,7.5s) linear forwards}
.hx-paused .hxBars button.on i{animation-play-state:paused}
.hx-static .hxBars button.on i{animation:none;transform:scaleX(1)}
.hxBars button:hover:before{background:rgba(255,255,255,.7)}
@keyframes hxFill{to{transform:scaleX(1)}}
.hxPause{position:relative;width:34px;height:34px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(10,12,11,.4);cursor:pointer;transition:background .3s,border-color .3s}
.hxPause i{position:absolute;left:50%;top:50%;width:10px;height:12px;margin:-6px 0 0 -5px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.hxPause[aria-pressed="true"] i{width:0;height:0;margin:-6px 0 0 -4px;border-left:10px solid #fff;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.hxPause:hover{background:#C31B37;border-color:#C31B37}

/* ---- the four destination cards ---- */
.hxDock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);padding:0 var(--hx-gx) clamp(18px,3.4vh,38px)}
.hxCard{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:clamp(104px,17vh,172px);padding:clamp(14px,1.5vw,22px);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;
  box-shadow:0 26px 44px -26px rgba(0,0,0,.8);will-change:transform,opacity;transition:transform .6s var(--hx-ease),opacity .5s ease}
.hxCard img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transform:scale(1.04);will-change:transform;transition:transform 1.1s var(--hx-ease)}
.hxCard .dim{position:absolute;inset:0;z-index:-2;background:rgba(5,6,6,.3);transition:opacity .7s ease}
.hxCard:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,rgba(5,6,6,.94) 0%,rgba(5,6,6,.74) 46%,rgba(5,6,6,.14) 100%);transition:opacity .5s}
.hxCard:after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(255,255,255,.22),transparent 62%);transition:opacity .4s}
.hxCard .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#C31B37,#FF4D6A);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--hx-ease)}
.hxCard .go{position:absolute;right:clamp(10px,1.1vw,16px);top:clamp(10px,1.1vw,16px);width:34px;height:34px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;font:300 15px/1 Inter,sans-serif;background:rgba(10,12,11,.3);transition:background .35s,border-color .35s,transform .5s var(--hx-ease)}
.hxCard b{font:500 clamp(28px,2.7vw,46px)/.95 "Antonio","Oswald",sans-serif;letter-spacing:.05em;text-transform:uppercase}
.hxCard span.sub{display:block;margin-top:8px;font:500 10px/1.35 Inter,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.hxCard:hover,.hxCard:focus-visible{transform:translateY(-8px)}
.hxCard:hover img,.hxCard:focus-visible img{transform:scale(1.12)}
.hxCard:hover .dim,.hxCard:focus-visible .dim{opacity:0}
.hxCard:hover:after{opacity:1}
.hxCard:hover .bar,.hxCard:focus-visible .bar{transform:none}
.hxCard:hover .go,.hxCard:focus-visible .go{background:#C31B37;border-color:#C31B37;transform:rotate(45deg)}
.hxDock:hover .hxCard:not(:hover){opacity:.62}

/* ---- entrance (only when scripting is available) ---- */
.hx-js .hxNav{opacity:0;transform:translateY(-14px)}
.hx-js .hxKicker{opacity:0;transform:translateX(-18px)}
.hx-js .hxLine>span{transform:translateY(112%)}
.hx-js .hxIntro{opacity:0;transform:translateY(20px)}
.hx-js .hxCity{opacity:0}
.hx-js .hxCard{opacity:0;transform:translateY(40px)}
.hx-js .hxStage{opacity:0}
.hx-ready .hxStage{opacity:1;transition:opacity 1.6s ease,translate .9s var(--hx-ease)}
.hx-ready .hxNav{opacity:1;transform:none;transition:opacity 1s ease .15s,transform 1.1s var(--hx-ease) .15s}
.hx-ready .hxKicker{opacity:1;transform:none;transition:opacity .9s ease .5s,transform 1s var(--hx-ease) .5s}
.hx-ready .hxLine>span{transform:none;transition:transform 1.25s var(--hx-ease) .65s}
.hx-ready .hxLine.b>span{transition-delay:.82s}
.hx-ready .hxIntro{opacity:1;transform:none;transition:opacity 1s ease 1.2s,transform 1.1s var(--hx-ease) 1.2s}
.hx-ready .hxCity{opacity:1;transition:opacity 1s ease 1.5s}
.hx-ready .hxCard{opacity:1;transform:none;transition:opacity .9s ease calc(1.3s + var(--i) * .12s),transform 1.1s var(--hx-ease) calc(1.3s + var(--i) * .12s)}
.hx-ready .hxCard:hover,.hx-ready .hxCard:focus-visible{transform:translateY(-8px);transition-delay:0s}
.hx-ready .hxDock:hover .hxCard:not(:hover){opacity:.62;transition-delay:0s}

/* ---- tablets ---- */
@media(max-width:1000px){
  .hxCityTag{display:none}
  .hxCard span.sub{display:none}
  .hxCard b{font-size:clamp(24px,4vw,34px)}
}
/* ---- phones ---- */
@media(max-width:860px){
  .hx{min-height:100vh;min-height:100svh}
  .hxScrim{background:linear-gradient(180deg,rgba(5,6,6,.64) 0%,rgba(5,6,6,.7) 20%,rgba(5,6,6,.66) 58%,rgba(5,6,6,.54) 70%,rgba(5,6,6,.92) 100%)}
  .hxNav{grid-template-columns:1fr auto;grid-template-rows:auto auto;min-height:0;padding-top:12px}
  .hxLinks{gap:16px}.hxLinks a{font-size:9px;letter-spacing:.12em;min-height:40px}
  .hxLinks.r{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:20px}
  .hxLogo img{height:44px}
  .hxCopy{padding-top:clamp(30px,6vh,60px)}
  .hxKicker{font-size:9.5px;letter-spacing:.3em}.hxKicker:before{width:30px}
  .hxLine.a{font-size:15px;letter-spacing:.34em}
  .hxLine.b{font-size:clamp(52px,16.4vw,92px)}
  .hxIntro{font-size:19px}
  .hxCity{flex-wrap:wrap;gap:12px;align-items:center}
  .hxCityGo{display:none}
  .hxCount{display:none}
  .hxDock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hxCard{height:clamp(84px,12vh,104px)}
  .hxCard b{font-size:30px}
  .hxStage{inset:-1%}
}
@media(max-width:380px){.hxLinks.r{gap:14px}.hxLine.b{font-size:50px}}
/* ---- short windows ---- */
@media(max-height:720px) and (min-width:861px){
  .hxCard{height:clamp(88px,15vh,120px)}
  .hxLine.b{font-size:clamp(54px,min(9vw,14.6vh),130px)}
  .hxIntro{font-size:clamp(18px,2.6vh,24px)}
}
/* ---- reduced motion: a still, complete composition ---- */
@media(prefers-reduced-motion:reduce){
  .hxSlide img{transform:none!important}
  .hx-js .hxNav,.hx-js .hxKicker,.hx-js .hxIntro,.hx-js .hxCity,.hx-js .hxCard,.hx-js .hxStage{opacity:1;transform:none}
  .hx-js .hxLine>span{transform:none}
}