/* The home page, after the approved design (2026-10-30): the seaside photo across the whole hero with the header over
   it (the white-and-gold wordmark), the serif headline on the left, the AlameinGo Assistant and its blue-and-gold face
   on the right with the face looking towards the page, and a cream search card over the foot of the photo on a cream
   page. Left and right are logical, so Arabic mirrors (the face too). Loaded after the other style sheets; everything
   here is scoped to the home page.
   Type (2026-10-30 mockup): the headline is Newsreader 300 and the assistant title Newsreader 600 (Google Fonts, OFL);
   Arabic uses Noto Naskh Arabic 400 / 600 with them. Everything else stays in the sans-serif (Inter / Cairo).
   Colours are Moataz's home-page values (not sampled from the mockup); the photo keeps its own colours. */
.logo img.logo-mark.logo-mark-light,.logo-mark-light{display:none}

body[data-route="home"]{--hm-on-photo:#FFFFFF;--hm-cream:#FFF8EA;--hm-navy:#123D57;--hm-navy-hover:#0D3046;--hm-text:#172B4D;
  --hm-text-2:#596579;--hm-gold:#C9A45D;--hm-line:#E5E7EB;--hm-focus:#17658A;--hm-page:#F6F1E7;
  --hm-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --hm-serif-ar:"Noto Naskh Arabic","Newsreader","Amiri","Times New Roman",serif}
/* one keyboard focus ring for the home page: the focus blue with a thin white edge, so it reads on the photo too */
body[data-route="home"] [data-view="home"] :is(a,button,input,select,summary,[tabindex]):focus-visible,
body[data-route="home"] header.top :is(a,button):focus-visible{outline:3px solid var(--hm-focus);outline-offset:2px;box-shadow:0 0 0 5px #fff}
body[data-route="home"] [data-view="home"]{background:var(--hm-page)}

/* ---- the header over the photo (computers; phones keep the white header bar) ---- */
@media (min-width:961px){
  body[data-route="home"] header.top:not(.is-scrolled) .logo{align-self:center;background:none;box-shadow:none;padding:0;margin:0;width:auto;min-height:0;border-radius:0}
  body[data-route="home"] header.top:not(.is-scrolled) .logo img.logo-mark:not(.logo-mark-light){display:none}
  body[data-route="home"] header.top:not(.is-scrolled) .logo img.logo-mark.logo-mark-light{display:block;filter:drop-shadow(0 1px 6px rgba(3,22,48,.35))}
  body[data-route="home"] header.top:not(.is-scrolled) .logo .logo-tag{display:none}
  body[data-route="home"] header.top:not(.is-scrolled) .navlinks a{color:#fff;text-shadow:0 1px 8px rgba(3,22,48,.45)}
  body[data-route="home"] header.top:not(.is-scrolled) .nav .btn-ink{border-color:rgba(255,255,255,.75);border-width:1px}
}

/* ---- the hero: the photo, the headline and the assistant ---- */
.hero.hx .hx-photo{background:#2F79C0 url('/img/home/hero-sea-1536.webp') center top/cover no-repeat;
  background-image:image-set(url('/img/home/hero-sea-1536.webp') 1x,url('/img/home/hero-sea-2304.webp') 2x)}
@media (min-width:1537px){.hero.hx .hx-photo{background-image:url('/img/home/hero-sea-2304.webp')}}
@media (max-width:640px){.hero.hx .hx-photo{background-image:url('/img/home/hero-sea-1024.webp');background-image:image-set(url('/img/home/hero-sea-1024.webp') 1x,url('/img/home/hero-sea-2304.webp') 2x)}}
.hero.hx .hx-photo{-webkit-mask-image:none;mask-image:none}
.hero.hx .hx-photo::after,.hero.hx::after{display:none}
/* a light shade only where the white type sits: under the header and behind the headline */
.hero.hx .hx-photo::before{display:block;content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,26,58,.32) 0,rgba(4,26,58,0) 16%),
    radial-gradient(48% 42% at 18% 32%,rgba(4,26,58,.32),rgba(4,26,58,0) 100%),
    radial-gradient(30% 36% at 70% 30%,rgba(4,26,58,.36),rgba(4,26,58,0) 100%)}
:root[dir="rtl"] .hero.hx .hx-photo::before{background:linear-gradient(180deg,rgba(4,26,58,.32) 0,rgba(4,26,58,0) 16%),
    radial-gradient(48% 42% at 82% 32%,rgba(4,26,58,.32),rgba(4,26,58,0) 100%),
    radial-gradient(30% 36% at 30% 30%,rgba(4,26,58,.36),rgba(4,26,58,0) 100%)}
.hero.hx .hero-eyebrow,.hero.hx .hx-script,#homeSearchCta{display:none}
.hero.hx h1,.hero.hx h1 .hx-accent{color:var(--hm-on-photo);-webkit-text-fill-color:var(--hm-on-photo);background:none;font-family:var(--hm-serif);font-weight:300;font-optical-sizing:auto;letter-spacing:-.012em}
:root[lang="ar"] .hero.hx h1,:root[lang="ar"] .hero.hx h1 .hx-accent{font-family:var(--hm-serif-ar);font-weight:400;letter-spacing:0}
.hero.hx h1{text-shadow:0 2px 18px rgba(3,22,48,.35)}
.hero.hx h1 .hx-accent{display:block}
.hero.hx p.lede{color:var(--hm-on-photo);font-weight:400;text-shadow:0 1px 10px rgba(3,22,48,.45)}
.hero.hx h1,.hero.hx p.lede{text-wrap:balance}

/* The request: the same button ("A stay to your taste" · "Request your stay"), now a quiet cream link under the line */
.hero.hx .hx-request.hx-badge{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 12px;cursor:pointer;color:#fff;font-family:"Inter",var(--body)}
:root[lang="ar"] .hero.hx .hx-request.hx-badge{font-family:"Noto Sans Arabic","Cairo",var(--body)}
.hero.hx .hx-request .hx-req-title{font-family:inherit;font-size:15px;font-weight:600;text-shadow:0 1px 8px rgba(3,22,48,.5)}
.hero.hx .hx-request .hx-req-text{display:none}
.hero.hx .hx-request .hx-req-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;background:var(--hm-cream);color:var(--hm-text);font-size:14px;font-weight:600;box-shadow:0 6px 18px rgba(3,22,48,.22)}
.hero.hx .hx-request:hover .hx-req-btn{background:#fff}
.hero.hx .hx-request:focus-visible{outline:3px solid var(--hm-focus);outline-offset:4px;box-shadow:0 0 0 7px #fff;border-radius:999px}

/* The assistant: title, line and button, then the face */
.hx-ai{color:#fff;font-family:"Inter",var(--body);text-align:start}
:root[lang="ar"] .hx-ai{font-family:"Noto Sans Arabic","Cairo",var(--body)}
.hx-ai-box{display:flex;align-items:center}
.hx-ai-face{flex:none;order:2}
.hx-ai-text{order:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hx-ai .aif-face,.hx-ai .aif-static{width:var(--fw);height:auto;aspect-ratio:232/317}
/* the face looks towards the page: to the left in English, to the right in Arabic */
:root[dir="rtl"] .hx-ai .aif-face,:root[dir="rtl"] .hx-ai .aif-static{transform:scaleX(-1)}
.hx-ai-label{margin:0}
.hx-ai-label b{display:block;font-family:var(--hm-serif);font-weight:600;font-optical-sizing:auto;letter-spacing:-.005em;color:var(--hm-on-photo);text-shadow:0 1px 10px rgba(3,22,48,.45)}
:root[lang="ar"] .hx-ai-label b{font-family:var(--hm-serif-ar);font-weight:600;letter-spacing:0}
.hx-ai-label small{display:none}
#heroAssistant h2{margin:0;font-family:inherit;font-weight:400;color:#F2F6FA;letter-spacing:0;text-shadow:0 1px 8px rgba(3,22,48,.5)}
.hx-ai-cta{appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--hm-cream);color:var(--hm-text);font:inherit;font-weight:600;line-height:1.2;cursor:pointer;box-shadow:0 10px 26px rgba(3,22,48,.25);transition:transform .18s ease,box-shadow .18s ease}
.hx-ai-cta svg{flex:none;color:var(--hm-gold);fill:currentColor;stroke:none}
.hx-ai-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(3,22,48,.32);background:#fff}
.hx-ai-cta-m{display:none}
.hx-ai-cta:focus-visible,.hx-ai-shortcut:focus-visible{outline:3px solid var(--hm-focus);outline-offset:3px;box-shadow:0 0 0 6px #fff}
/* the three shortcuts: a quiet line of text links under the button */
.hx-ai-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:10px 0 0;padding:0;border:0;background:none}
.hx-ai-shortcut{appearance:none;display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border:0;border-radius:999px;background:none;color:#fff;font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;text-shadow:0 1px 8px rgba(3,22,48,.6)}
.hx-ai-shortcut:first-child{padding-inline-start:4px}
.hx-ai-shortcut+.hx-ai-shortcut::before{content:'·';margin-inline-end:8px;margin-inline-start:-8px;opacity:.8}
.hx-ai-shortcut:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.hx-ai-cta{transition:none}.hx-ai-cta:hover{transform:none}}

/* ---- computers: the design's proportions, scaled with the window. The hero is about 22% shorter than before
   (39.6vw instead of 50.9vw) and never taller than the window less the search card, so the whole card (tabs, fields
   and Search) is on screen at 1280×800, 1366×768, 1440×900 and 1920×1080. On a short window or when zoomed in it
   stops at 470px and the page simply scrolls. ---- */
@media (min-width:961px){
  .hero.hx{--hx-h:max(470px,min(39.6vw,calc(100vh - 196px)))}
  body[data-route="home"] header.top:not(.is-scrolled) .logo img.logo-mark.logo-mark-light{width:clamp(190px,16vw,290px);height:auto}
  body[data-route="home"] header.top:not(.is-scrolled) .wrap{padding-top:1.3vw;padding-inline:3.6vw 2.1vw}
  .hero.hx{padding:0;min-height:0}
  /* the photo runs a little under the card; anchored low so the towers, beach and pool stay in view */
  .hero.hx .hx-photo{inset:0 0 auto;height:calc(var(--hx-h) + 64px);background-position:center 78%}
  .hero.hx .hx-inner{position:relative;height:var(--hx-h);max-width:none;padding:0;margin:0}
  .hero.hx .hx-copy{position:absolute;inset-inline-start:3.8vw;top:calc(var(--hx-h) * .225);width:46vw;max-width:none;margin:0;padding:0}
  .hero.hx h1{margin:0;font-size:clamp(46px,5.3vw,104px);line-height:1.04}
  .hero.hx p.lede{max-width:36vw;margin:1.1vw 0 0;font-size:clamp(17px,1.8vw,32px);line-height:1.28}
  .hero.hx .hx-actions{margin:1.4vw 0 0}
  .hx-ai{--fw:clamp(130px,12.4vw,260px);position:absolute;z-index:3;inset-inline-end:2.1vw;top:calc(var(--hx-h) * .16);width:auto;display:block;pointer-events:auto}
  .hx-ai-box{gap:2vw}
  .hx-ai-label b{font-size:clamp(22px,2.15vw,40px);line-height:1.15}
  #heroAssistant h2{margin:.35vw 0 1.15vw;font-size:clamp(13px,1.07vw,19px);line-height:1.4}
  .hx-ai-cta{gap:.9vw;min-height:clamp(42px,3.5vw,62px);padding:0 1.7vw;font-size:clamp(14px,1.1vw,19px)}
  .hx-ai-cta svg{width:clamp(16px,1.3vw,24px);height:clamp(16px,1.3vw,24px)}
  /* the search card over the foot of the photo, the full width of the page less the photo's margin */
  [data-view="home"] .hero.hx>.wrap:last-child{max-width:none;padding-inline:2vw;margin:0}
  .hero.hx .sb-slot{max-width:none;width:100%;margin:0;top:0}
}
/* Arabic headlines are wider: a little smaller type */
@media (min-width:961px){
  :root[lang="ar"] .hero.hx .hx-copy{width:47vw}
  :root[lang="ar"] .hero.hx h1{font-size:clamp(40px,4.3vw,84px);line-height:1.35}
}

/* ---- the search card: cream, the tabs in one line with a navy underline, white fields, a navy Search ---- */
body[data-route="home"] .hero.hx .hx-search.sb{--sb-navy:var(--hm-navy);--sb-navy-2:var(--hm-navy-hover);--sb-blue:var(--hm-navy);--sb-tint:transparent;--sb-line:var(--hm-line);--sb-box-line:var(--hm-line);--sb-soft:rgba(18,61,87,.04);
  background:var(--hm-cream);border-radius:18px;box-shadow:0 18px 44px rgba(9,30,62,.18),0 2px 6px rgba(9,30,62,.06)}
body[data-route="home"] .hero.hx .sb-tabs{gap:0;padding:6px 1.8vw 0}
body[data-route="home"] .hero.hx .sb-tab{flex-direction:row;gap:14px;min-height:66px;border-radius:0;color:var(--hm-text);font-weight:500}
body[data-route="home"] .hero.hx .sb-tab+.sb-tab::before{content:'';position:absolute;inset-inline-start:0;top:30%;bottom:30%;width:1px;background:var(--hm-line)}
body[data-route="home"] .hero.hx .sb-tab-text{align-items:flex-start}
body[data-route="home"] .hero.hx .sb-tab-label{font-size:17px}
body[data-route="home"] .hero.hx .sb-tab[data-sb-tab="rentals"] .sb-tab-sub{display:none}
body[data-route="home"] .hero.hx .sb-tab.is-soon .sb-tab-label{color:var(--hm-text-2)}
body[data-route="home"] .hero.hx .sb-tab.is-soon .sb-tab-sub{color:var(--hm-text-2);font-size:10.5px;letter-spacing:.09em}
body[data-route="home"] .hero.hx .sb-tab.is-soon .sb-tab-icon{color:var(--hm-text-2)}
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"]{background:transparent;color:var(--hm-navy);font-weight:600}
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"] .sb-tab-icon{color:var(--hm-navy)}
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"]::after{inset-inline:18%;height:4px;bottom:-1px;border-radius:2px;background:var(--hm-navy)}
body[data-route="home"] .hero.hx .sb-panels{padding:14px 1.8vw 18px}
body[data-route="home"] .hero.hx .sb-bar{height:66px;gap:16px}
body[data-route="home"] .hero.hx .sb-seg{background:#fff;border-color:var(--hm-line);border-radius:10px}
body[data-route="home"] .hero.hx .sb-search{height:66px;min-width:17vw;border-radius:10px;font-size:20px;background:var(--hm-navy);color:#fff}
body[data-route="home"] .hero.hx .sb-search:hover{background:var(--hm-navy-hover)}
body[data-route="home"] .hero.hx .sb-search .sb-ico{width:24px;height:24px}
@media (min-width:1280px){
  body[data-route="home"] .hero.hx .sb-form-stays .sb-value,body[data-route="home"] .hero.hx .sb-form-stays .sb-select,body[data-route="home"] .hero.hx .sb-form-stays .sb-input{font-size:17px}
  body[data-route="home"] .hero.hx .sb-form-stays .sb-label{font-size:13px}
  body[data-route="home"] .hero.hx .sb-seg-btn,body[data-route="home"] .hero.hx .sb-seg:not(.sb-pop-wrap){padding-inline:20px;gap:14px}
}

/* ---- phones and tablets: the photo behind the headline, the assistant row (face beside "Talk to the assistant")
   and the request, then the card ---- */
@media (max-width:960px){
  .hero.hx .hx-photo{inset:0 0 auto;height:calc(100% - 120px);background-position:58% top}
  .hero.hx .hx-photo::before{background:linear-gradient(180deg,rgba(4,26,58,.42) 0,rgba(4,26,58,.26) 30%,rgba(4,26,58,.22) 50%,rgba(4,26,58,.06) 66%,rgba(4,26,58,.28) 100%)}
  .hero.hx .hx-inner{display:flex;flex-direction:column;padding-block:20px 22px}
  .hero.hx .hx-copy{order:0}
  .hero.hx h1{font-size:clamp(34px,9.4vw,52px);line-height:1.08}
  :root[lang="ar"] .hero.hx h1{font-size:min(2.3rem,8vw);line-height:1.4}
  .hero.hx p.lede{margin-top:12px;font-size:16.5px;line-height:1.4}
  .hero.hx .hx-actions{margin-top:14px}
  .hx-ai{--fw:104px;order:1;position:relative;inset:auto;top:auto;width:auto;display:block;margin:18px 0 0}
  .hx-ai-box{gap:14px;justify-content:flex-start}
  /* phones: the face first (it looks towards the button beside it) */
  .hx-ai-face{order:0}
  :root[dir="ltr"] .hx-ai .aif-face,:root[dir="ltr"] .hx-ai .aif-static{transform:scaleX(-1)}
  :root[dir="rtl"] .hx-ai .aif-face,:root[dir="rtl"] .hx-ai .aif-static{transform:none}
  .hx-ai-label b{font-size:19px;line-height:1.25}
  #heroAssistant h2{display:none}
  .hx-ai-cta{gap:8px;min-height:46px;margin-top:10px;padding:0 18px;font-size:15px}
  .hx-ai-cta svg{width:16px;height:16px}
  .hx-ai-cta-d{display:none}
  .hx-ai-cta-m{display:inline}
  .hx-ai-shortcuts{display:none}
  body[data-route="home"] .hero.hx .sb-tabs{padding:8px 8px 0}
  body[data-route="home"] .hero.hx .sb-tab{flex-direction:column;gap:4px;min-height:70px}
  body[data-route="home"] .hero.hx .sb-tab+.sb-tab::before{display:none}
  body[data-route="home"] .hero.hx .sb-tab-text{align-items:center}
  body[data-route="home"] .hero.hx .sb-tab-label{font-size:13.5px}
  body[data-route="home"] .hero.hx .sb-panels{padding:14px 14px 16px}
  body[data-route="home"] .hero.hx .sb-bar{height:auto;gap:10px}
  body[data-route="home"] .hero.hx .sb-search{height:56px;min-width:0;font-size:17px}
}
@media (max-width:374px){
  .hx-ai{--fw:88px}
  .hx-ai-cta{padding:0 14px;font-size:14.5px}
}