/* Approved coastal homepage. Presentation only; existing copy, routes and controls stay intact. */
body[data-route="home"] {
  --hm-page:#F2F5F7; --hm-cream:#FFFFFF; --hm-navy:#0868D9;
  --hm-navy-hover:#0756B2; --hm-focus:#0868D9; --hm-text:#102B43;
  --hm-text-2:#475569; --hm-line:#DCE7F1;
}
body[data-route="home"] .hero.hx .hx-photo { height:100%; background-position:center 65%; }
body[data-route="home"] .hero.hx .hx-photo::before,
:root[dir="rtl"] body[data-route="home"] .hero.hx .hx-photo::before {
  background:linear-gradient(180deg,rgba(3,27,46,.88),rgba(5,39,64,.66) 46%,rgba(5,39,64,.1) 82%);
}
body[data-route="home"] .hero.hx { padding-bottom:24px; }
body[data-route="home"] .hero.hx h1 { font-size:clamp(36px,4.1vw,64px); line-height:1.15; }
:root[lang="ar"] body[data-route="home"] .hero.hx h1 {
  font-family:"Cairo","Noto Sans Arabic",sans-serif; font-weight:700;
  font-size:clamp(32px,3.5vw,54px); line-height:1.45;
}
body[data-route="home"] .hx-ai-label b { font-family:"Inter",var(--body); color:#ECD095; font-weight:700; letter-spacing:0; }
:root[lang="ar"] body[data-route="home"] .hx-ai-label b { font-family:"Cairo","Noto Sans Arabic",sans-serif; }
/* the assistant's button is the hero's blue primary; "Request your stay" is the outlined secondary beside the copy */
body[data-route="home"] .hx-ai-cta {
  color:#fff; background:#0868D9; border:1px solid rgba(255,255,255,.35);
  border-radius:12px; min-height:48px; box-shadow:0 8px 24px rgba(0,42,93,.15);
}
body[data-route="home"] .hx-ai-cta:hover { background:#0756B2; }
body[data-route="home"] .hero.hx .hx-request .hx-req-btn {
  color:#fff; background:rgba(3,27,46,.18); border:1.5px solid rgba(255,255,255,.85);
  border-radius:12px; min-height:48px; padding:0 20px; box-shadow:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body[data-route="home"] .hero.hx .hx-request:hover .hx-req-btn { background:rgba(255,255,255,.16); border-color:#fff; }
body[data-route="home"] .hx-ai-cta svg { color:#fff; }
body[data-route="home"] .hx-ai-shortcut { min-height:44px; }
body[data-route="home"] .hero.hx .hx-search.sb {
  --sb-navy:#102B43; --sb-navy-2:#163A59; --sb-blue:#0868D9;
  background:linear-gradient(110deg,rgba(93,172,208,.58),rgba(54,109,145,.64) 60%,rgba(217,227,228,.62));
  border:1px solid rgba(255,255,255,.58); border-radius:20px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 12px 32px rgba(3,28,48,.18);
}
body[data-route="home"] .hero.hx .sb-tab,
body[data-route="home"] .hero.hx .sb-tab.is-soon .sb-tab-label,
body[data-route="home"] .hero.hx .sb-tab.is-soon .sb-tab-sub,
body[data-route="home"] .hero.hx .sb-tab.is-soon .sb-tab-icon { color:#fff; text-shadow:0 1px 3px rgba(0,24,45,.6); }
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"],
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"] .sb-tab-icon { color:#fff; }
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"] { background:rgba(0,70,160,.3); border-radius:12px 12px 0 0; }
body[data-route="home"] .hero.hx .sb-tab[aria-selected="true"]::after { background:#79C8FF; }
body[data-route="home"] .hero.hx .sb-tab+.sb-tab::before { background:rgba(255,255,255,.22); }
body[data-route="home"] .hero.hx .sb-panels { margin:0 10px 10px; padding:12px; border:1px solid rgba(255,255,255,.45); border-radius:16px; background:rgba(255,255,255,.24); }
body[data-route="home"] .hero.hx .sb-seg { background:rgba(255,255,255,.97); border-color:rgba(255,255,255,.8); }
body[data-route="home"] .hero.hx .sb-search { background:#0868D9; }
body[data-route="home"] .hero.hx .sb-search:hover { background:#0756B2; }
/* Computers: a compact two-column hero under the header (a grid, no absolute positions). The copy on the start side,
   the assistant (its text, then the face) on the end side, both centred in a content area of at least 460px that grows
   when a translation or larger text needs more room. The search card follows in normal flow over the foot of the photo. */
@media (min-width:961px) {
  body[data-route="home"] .hero.hx .hx-photo { height:calc(100% - 70px); }
  body[data-route="home"] .hero.hx .hx-inner {
    height:auto; min-height:calc(460px + 84px); box-sizing:border-box;
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:clamp(24px,3.5vw,64px);
    padding:84px clamp(24px,4.4vw,72px) 28px;
  }
  body[data-route="home"] .hero.hx .hx-copy { position:static; grid-column:1; grid-row:1; width:auto; max-width:640px; }
  :root[lang="ar"] body[data-route="home"] .hero.hx .hx-copy { width:auto; }
  body[data-route="home"] .hero.hx p.lede { max-width:34em; font-size:clamp(17px,1.35vw,21px); line-height:1.55; margin-top:14px; }
  :root[lang="ar"] body[data-route="home"] .hero.hx p.lede { line-height:1.7; }
  body[data-route="home"] .hero.hx .hx-actions { margin-top:18px; }
  body[data-route="home"] .hx-ai { position:static; grid-column:2; grid-row:1; --fw:clamp(196px,17vw,260px); }
  body[data-route="home"] .hx-ai-box { gap:clamp(16px,2vw,28px); align-items:center; }
  body[data-route="home"] .hx-ai-text { max-width:300px; }
  body[data-route="home"] .hx-ai .aif-face,
  body[data-route="home"] .hx-ai .aif-static { width:var(--fw); height:auto; }
  body[data-route="home"] .hx-ai-label b { font-size:clamp(24px,2vw,32px); line-height:1.25; }
  body[data-route="home"] #heroAssistant h2 { margin:6px 0 14px; font-size:17px; line-height:1.5; font-weight:500; }
  body[data-route="home"] .hx-ai-cta { gap:10px; min-height:52px; padding:0 22px; font-size:16px; }
  body[data-route="home"] .hx-ai-cta svg { width:18px; height:18px; }
  body[data-route="home"] .hero.hx>.wrap:last-child { padding-inline:clamp(16px,3vw,48px); }
  body[data-route="home"] .hero.hx .sb-tab { min-height:64px; gap:10px; }
  body[data-route="home"] .hero.hx .sb-tab-label { font-size:16px; }
  body[data-route="home"] .hero.hx .sb-bar { height:62px; gap:10px; }
  body[data-route="home"] .hero.hx .sb-search { height:62px; font-size:18px; }
}
/* the widest screens: the content keeps a comfortable measure instead of running to the edges */
@media (min-width:1600px) {
  body[data-route="home"] .hero.hx .hx-inner { padding-inline:max(72px,calc((100vw - 1560px) / 2)); }
  body[data-route="home"] .hero.hx>.wrap:last-child { max-width:1600px; margin-inline:auto; }
}
@media (max-width:960px) {
  body[data-route="home"] .hero.hx .hx-inner { padding-block:20px 16px; }
  body[data-route="home"] .hero.hx h1 { font-size:36px; }
  :root[lang="ar"] body[data-route="home"] .hero.hx h1 { font-size:30px; }
  body[data-route="home"] .hx-ai { --fw:100px; margin-top:16px; }
  body[data-route="home"] .hx-ai-label b { font-size:21px; }
  body[data-route="home"] .hero.hx .sb-panels { margin:0 6px 6px; padding:10px; }
}
@media (prefers-reduced-transparency:reduce) {
  body[data-route="home"] .hero.hx .hx-search.sb { background:#315E7A; }
}

/* Keep feature visibility and compact-screen controls accessible. */
body[data-route="home"] .hx-ai[hidden] { display:none!important; }
body[data-route="home"] .hero.hx .sb-search { min-height:48px; font-weight:700; }
@media (max-width:600px) {
  body[data-route="home"] .hero.hx p.lede { font-size:16px; line-height:1.7; }
  body[data-route="home"] .hero.hx .hx-search.sb { border-radius:16px; }
  body[data-route="home"] .hero.hx .sb-seg { min-height:56px; }
  body[data-route="home"] .hero.hx .sb-search { font-size:17px; }
  body[data-route="home"] .hx-ai-box { gap:16px; }
}

/* The headline and the resale card's title in the reference's clean bold sans (Inter / Cairo, both already loaded). */
body[data-route="home"] .hero.hx h1 { font-family:"Inter",var(--display); font-weight:700; letter-spacing:-.02em; }
@media (min-width:961px) { body[data-route="home"] .hero.hx h1 { font-size:clamp(40px,3.8vw,60px); line-height:1.12; } }

/* Contrast (WCAG AA): over the brightest part of the sea the glass alone left the white tab labels near 2.5:1, so the
   tab row gets a light navy tint inside the same glass; every label then measures 4.5:1 or more. */
body[data-route="home"] .hero.hx .hx-search.sb .sb-nav { background:rgba(3,27,46,.38); border-radius:19px 19px 0 0; }
@media (max-width:600px) { body[data-route="home"] .hero.hx .hx-search.sb .sb-nav { border-radius:15px 15px 0 0; } }