/* Client feedback round Oct 2026: fixed region block under the hero, concierge services with her own photos, travel clip instead of the jet render. Loaded last; extends, never rewrites, the earlier layers. */

/* Hero destinations stacked one per line (client feedback): each region reads as its own promise. */
.hero-places{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:4px}
.hero-places li{display:flex;align-items:center;gap:14px;font:500 22px/1.25 var(--serif);color:white}
.hero-places li:before{content:"";width:22px;height:1px;background:var(--gold);flex-shrink:0}
@media(max-width:560px){.hero-places{margin-top:12px;gap:2px}.hero-places li{font-size:19px}}

/* Regions: five equal tiles directly under the hero, always visible instead of sliding. */
.regions{padding:64px max(6%,calc((100% - 1240px)/2)) 24px}
.regions-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:32px}
.regions-head .section-label{margin-bottom:16px}
.regions-head h2{font-size:clamp(2.5rem,3.8vw,3.9rem);line-height:1}
.regions-head h2 em{display:block}
.regions-head>p{font-size:15px;color:var(--muted);max-width:26ch;padding-bottom:6px}
.region-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.region{position:relative;display:block;aspect-ratio:3/4.2;border-radius:var(--radius-image);overflow:hidden;color:white;isolation:isolate;transition:transform .5s var(--ease-premium),box-shadow .5s var(--ease-premium)}
.region>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--ease-premium)}
.region:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(12,38,42,.78) 0,rgba(12,38,42,.25) 45%,rgba(12,38,42,0) 70%)}
.region-body{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 20px;display:grid;gap:6px}
.region h3{font-size:clamp(26px,2.3vw,34px);line-height:1.05}
.region-body>span:not(.region-cta){font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}
.region-cta{display:inline-flex;align-items:center;gap:12px;margin-top:8px;font-size:13px;color:#f0dfac}
.region-cta>span[aria-hidden]{font-size:0;line-height:0}
.region-cta>span[aria-hidden]:after{content:"";display:inline-block;width:22px;height:10px;background:currentColor;-webkit-mask:var(--line-arrow) center/contain no-repeat;mask:var(--line-arrow) center/contain no-repeat;transition:transform .45s var(--ease-premium)}
.region:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(69,117,121,.18)}
.region:hover>img{transform:scale(1.045)}
.region:hover .region-cta>span[aria-hidden]:after{transform:translateX(4px)}
.region:focus-visible{outline:3px solid var(--turquoise);outline-offset:4px}
.region img[src$="region-saudi.jpg"]{object-position:68% center}
.region img[src$="region-doha.jpg"]{object-position:62% center}

/* Concierge services: a calm two-row grid, every service carried by one of the client's photos. */
.concierge .section-heading .text-link{white-space:nowrap}
.concierge-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:56px 28px}
.concierge-item{grid-column:span 2;display:flex;flex-direction:column;gap:22px;--figure-height:330px}
.concierge-hotels{grid-column:span 4;--figure-height:500px}
.concierge-dining{--figure-height:500px}
.concierge-item figure{position:relative;margin:0;height:var(--figure-height);border-radius:var(--radius-image);overflow:hidden;background:var(--cream)}
.concierge-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-premium),opacity .8s var(--ease-premium)}
.concierge-item:hover img{transform:scale(1.03)}
.concierge-item>div{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:baseline}
.concierge-num{font:400 34px/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--gold)}
.concierge-item h3{font-size:30px;line-height:1.1}
.concierge-item p{grid-column:2;margin-top:12px;font-size:15px;color:var(--muted);max-width:48ch}
.concierge-hotels h3{font-size:36px}
/* Exterior first. With a pointer the interior fades in on hover; touch screens have no hover, so they show it as a small inset instead of loading an image nobody can reach. */
.concierge-swap img{position:absolute;inset:0}
@media(hover:hover){
  .concierge-swap img+img{opacity:0}
  .concierge-car:hover .concierge-swap img+img{opacity:1}
}
@media(hover:none){
  .concierge-swap img+img{inset:auto 14px 14px auto;width:38%;height:auto;aspect-ratio:3/2;border-radius:14px;border:2px solid #fff;box-shadow:0 10px 26px rgba(8,26,29,.28)}
}
.concierge-hotels img{object-position:center 62%}
.concierge-dining img{object-position:center 70%}
.concierge-events img{object-position:center 60%}

/* Travel clip: the client's own footage in a phone-shaped frame, beside the line it illustrates. */
.moments{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:8%;align-items:center;margin:24px max(20px,calc((100% - 1400px)/2)) 0;padding:clamp(56px,6vw,96px) clamp(36px,7vw,120px);border-radius:36px;color:white;background:radial-gradient(circle at 78% 40%,rgba(186,158,84,.22),transparent 55%),linear-gradient(150deg,#2c5b60,#173f45);overflow:hidden}
.moments .section-label{color:#e4d6ae}
.moments h2{font-size:clamp(3rem,5.2vw,5.6rem);line-height:.95}
.moments h2 em{display:block;color:#f0dfac}
.moments-copy>p:not(.section-label){margin:30px 0 38px;max-width:40ch;color:#d8e7e5;font-size:17px}
.moments-frame{position:relative;justify-self:center;width:min(340px,100%);margin:0}
.moments-frame:before{content:"";position:absolute;inset:0;border:1px solid rgba(240,223,172,.55);border-radius:30px;transform:translate(18px,18px);pointer-events:none}
.moments-video{position:relative;display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:30px;background:#173f45;box-shadow:0 40px 80px rgba(8,26,29,.45)}

@media(max-width:1100px){
  .region-list{gap:12px}
  .region-body{padding:18px 16px 16px}
  .region-body>span:not(.region-cta){font-size:13px}
  .concierge-item{--figure-height:280px}
  .concierge-hotels,.concierge-dining{--figure-height:420px}
}
@media(max-width:900px){
  .regions{padding:48px 6% 16px}
  .regions-head{flex-direction:column;align-items:flex-start;gap:14px}
  .regions-head>p{max-width:none}
  .region-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .region-list>li:first-child{grid-column:1/-1}
  .region-list>li:first-child .region{aspect-ratio:16/10}
  .region{aspect-ratio:1/1}
  .concierge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px}
  .concierge-item,.concierge-dining{grid-column:span 1}
  .concierge-hotels{grid-column:1/-1}
  .concierge-item{--figure-height:260px}
  .concierge-hotels{--figure-height:380px}
  .concierge-dining{--figure-height:260px}
  .moments{grid-template-columns:1fr;gap:56px;margin-inline:12px;border-radius:26px;padding:64px 40px 72px}
  .moments-frame{width:min(300px,78%)}
}
@media(max-width:560px){
  .regions{padding:40px 24px 8px}
  .region-list{gap:10px}
  .region{aspect-ratio:4/5}
  .region-body{padding:14px 12px 12px;gap:4px}
  .region h3{font-size:24px}
  .region-list>li:first-child h3{font-size:30px}
  .region-body>span:not(.region-cta){display:none}
  .region-list>li:first-child .region-body>span:not(.region-cta){display:block}
  .region-cta{margin-top:2px;font-size:12px}
  .concierge-grid{grid-template-columns:1fr;gap:40px}
  .concierge-item,.concierge-hotels,.concierge-events{grid-column:auto;--figure-height:260px}
  .concierge-item h3,.concierge-hotels h3{font-size:28px}
  .concierge-item>div{column-gap:14px}
  .concierge-num{font-size:28px}
  .moments{padding:48px 24px 60px;gap:48px}
  .moments-copy>p:not(.section-label){font-size:15px}
  .moments-frame:before{transform:translate(12px,12px)}
}