/* ============================================================================
   Globex Real Estate — phone & tablet layer (globex-mobile.css)
   Loaded after every page's own styles. The pages are inline-styled, so this
   layer works with attribute selectors (both "a:b" and "a: b" spellings — the
   page runtime rewrites style attributes with spaces) and !important.
   Social Media page has its own phone layout and does not load this file.
   ========================================================================== */

/* ---------- 1. type scale & rhythm: phones (≤640) ---------- */
@media (max-width: 640px) {
  html:root {
    --fs-3xs: 11px !important;
    --fs-2xs: 11.5px !important;
    --fs-xs: 12px !important;
    --fs-sm: 13px !important;
    --fs-base: 15px !important;
    --fs-md: 16px !important;
    --fs-lg: 18px !important;
    --fs-xl: 21px !important;
    --fs-2xl: 24px !important;
    --fs-3xl: clamp(25px, 7vw, 29px) !important;
    --fs-4xl: clamp(30px, 8.6vw, 36px) !important;
    --page-x: 22px !important;
    --sect-y: 60px !important;
  }
  html { scroll-padding-top: 72px; }
  body { -webkit-text-size-adjust: 100%; }
  h1, h2 { line-height: 1.12 !important; }
  h3, h4 { line-height: 1.3 !important; }
  p { line-height: 1.75 !important; }
  html:not([dir="rtl"]) h1, html:not([dir="rtl"]) h2 { letter-spacing: 0.01em !important; }
  /* long tracked eyebrows wrap gracefully */
[style*="letter-spacing:0.32em"], [style*="letter-spacing: 0.32em"], [style*="letter-spacing:0.34em"], [style*="letter-spacing: 0.34em"] { letter-spacing: 0.22em !important; line-height: 1.6 !important; }
[style*="letter-spacing:0.24em"], [style*="letter-spacing: 0.24em"] { letter-spacing: 0.18em !important; }
  /* section numbers + eyebrow rows keep to one line */
section > div > div[style*="gap:14px"], section > div > div[style*="gap: 14px"] { flex-wrap: nowrap !important; }
}

/* ---------- 2. navigation (≤860) ---------- */
@media (max-width: 860px) {
  html nav { padding: 12px var(--page-x) !important; gap: 12px !important; min-height: 60px; }
  html nav > img { height: 32px !important; }
  html nav #gx-burger { width: 42px !important; height: 42px !important; border-color: rgba(224,171,39,0.45) !important; }
  /* the menu is a full-height sheet, not a strip */
  html body [data-navlinks] {
    top: var(--gx-navh, 60px) !important; bottom: 0; max-height: 0;
    background: rgba(0,0,0,0.98) !important; border-bottom: 0 !important;
    padding: 0 var(--page-x) !important; box-sizing: border-box;
    transition: max-height .38s cubic-bezier(.4,0,.2,1), padding .38s ease !important;
    counter-reset: gxnav;
  }
  html.gx-menu-open body [data-navlinks] { max-height: calc(100vh - var(--gx-navh, 60px)) !important; padding: 18px var(--page-x) 32px !important; }
  html.gx-menu-open { overflow: hidden; }
  html body [data-navlinks] a {
    display: flex !important; align-items: baseline; gap: 16px;
    padding: 17px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 20px !important; letter-spacing: 0.14em !important; font-weight: 500 !important;
    color: var(--ink) !important; background-image: none !important;
    opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
  }
  html.gx-menu-open [data-navlinks] a { opacity: 1; transform: none; }
  html.gx-menu-open [data-navlinks] a:nth-child(2) { transition-delay: .04s } html.gx-menu-open [data-navlinks] a:nth-child(3) { transition-delay: .08s }
  html.gx-menu-open [data-navlinks] a:nth-child(4) { transition-delay: .12s } html.gx-menu-open [data-navlinks] a:nth-child(5) { transition-delay: .16s }
  html.gx-menu-open [data-navlinks] a:nth-child(6) { transition-delay: .20s } html.gx-menu-open [data-navlinks] a:nth-child(7) { transition-delay: .24s }
  html body [data-navlinks] a::before { counter-increment: gxnav; content: counter(gxnav, decimal-leading-zero); font-size: 10px; letter-spacing: 0.2em; color: var(--gold); font-weight: 400; min-width: 22px; }
html body [data-navlinks] a[style*="color:var(--gold)"], html body [data-navlinks] a[style*="color: var(--gold)"] { color: var(--gold) !important; }
}

/* ---------- 3. heroes (≤640) ---------- */
@media (max-width: 640px) {
  /* a real hero on a phone: full-bleed picture, copy at the foot, strong scrim */
  [data-hero] { height: auto !important; min-height: 74vh !important; min-height: 74svh !important; padding-bottom: 0 !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; }
  [data-hero]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.92) 100%); }
[data-hero] > [data-parallax], [data-hero] > div[style*="position:relative"], [data-hero] > div[style*="position: relative"] { position: relative; z-index: 2; padding: 0 var(--page-x) 36px var(--page-x) !important; max-width: none !important; width: 100%; box-sizing: border-box; }
  [data-hero] h1 { font-size: var(--fs-4xl) !important; line-height: 1.08 !important; }
  [data-hero] > div > p { font-size: 14.5px !important; line-height: 1.7 !important; margin-top: 16px !important; max-width: none !important; color: var(--ink-soft) !important; }
  /* CTA pairs become full-width stacked buttons */
[data-hero] div[style*="gap:14px"][style*="margin-top:32px"], [data-hero] div[style*="gap:14px"][style*="margin-top: 32px"], [data-hero] div[style*="gap: 14px"][style*="margin-top:32px"], [data-hero] div[style*="gap: 14px"][style*="margin-top: 32px"], [data-hero] div[style*="gap:14px"][style*="margin-top:30px"], [data-hero] div[style*="gap:14px"][style*="margin-top: 30px"], [data-hero] div[style*="gap: 14px"][style*="margin-top:30px"], [data-hero] div[style*="gap: 14px"][style*="margin-top: 30px"], [data-hero] div[style*="gap:12px"][style*="margin-top:28px"], [data-hero] div[style*="gap:12px"][style*="margin-top: 28px"], [data-hero] div[style*="gap: 12px"][style*="margin-top:28px"], [data-hero] div[style*="gap: 12px"][style*="margin-top: 28px"] { flex-direction: column !important; gap: 10px !important; margin-top: 26px !important; }
[data-hero] a[style*="padding:15px 30px"], [data-hero] a[style*="padding: 15px 30px"], [data-hero] a[style*="padding:14px 28px"], [data-hero] a[style*="padding: 14px 28px"], [data-hero] a[style*="padding:16px 32px"], [data-hero] a[style*="padding: 16px 32px"], [data-hero] a[style*="padding:15px 28px"], [data-hero] a[style*="padding: 15px 28px"] {
    display: flex !important; justify-content: center; width: 100%; box-sizing: border-box;
    padding: 16px 20px !important; font-size: 12.5px !important; letter-spacing: 0.14em !important; }
  /* the hero's side blocks (price / status on listing pages) sit under the title */
[data-hero] div[style*="text-align:right"], [data-hero] div[style*="text-align: right"] { text-align: left !important; width: 100%; margin-top: 18px !important; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); }
[data-hero] div[style*="text-align:right"] > div, [data-hero] div[style*="text-align: right"] > div { text-align: left !important; }
  /* privacy / 404 style plain headers keep their padding */
[data-hero][style*="padding:calc"], [data-hero][style*="padding: calc"] { min-height: 0 !important; }
  /* text shadow is no longer needed under the scrim */
  header p, [data-hero] p, header h1, [data-hero] h1 { text-shadow: none !important; }
}
@media (max-width: 640px) and (max-height: 620px) { [data-hero] { min-height: 92svh !important; } }

/* ---------- 4. stat bars (≤640) ---------- */
@media (max-width: 640px) {
  [data-statbar] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; padding: 8px 0 !important; border-top: 1px solid var(--hairline) !important; border-bottom: 1px solid var(--hairline) !important; }
[data-statbar][style*="padding:22px"], [data-statbar][style*="padding: 22px"] { padding: 8px var(--page-x) !important; }
  [data-statbar] > * { padding: 18px 14px 18px 0 !important; border-left: 0 !important; box-sizing: border-box; }
  [data-statbar] > *:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--hairline) !important; }
  [data-statbar] > *:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  [data-statbar] > * > div:first-child { font-size: 24px !important; font-weight: 500 !important; letter-spacing: 0.01em; color: var(--ink); }
  [data-statbar] > * > div + div { font-size: 11px !important; letter-spacing: 0.16em !important; line-height: 1.55 !important; margin-top: 6px !important; }
  html[dir="rtl"] [data-statbar] > * { padding: 18px 0 18px 14px !important; }
  html[dir="rtl"] [data-statbar] > *:nth-child(2n) { padding-right: 16px !important; border-left: 0 !important; border-right: 1px solid var(--hairline) !important; }
}

/* ---------- 5. grids, cards, photo rails (≤640) ---------- */
@media (max-width: 640px) {
  /* everything stacks... */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* ...except 3- and 4-up photo grids, which become a swipe rail (peek of the next card) */
section div[style*="grid-template-columns:1fr 1fr 1fr"]:has(> * img):not([data-gx-gallery]), section div[style*="grid-template-columns: 1fr 1fr 1fr"]:has(> * img):not([data-gx-gallery]), section div[style*="grid-template-columns:repeat(3"]:has(> * img):not([data-gx-gallery]), section div[style*="grid-template-columns: repeat(3"]:has(> * img):not([data-gx-gallery]), section div[style*="grid-template-columns:repeat(4"]:has(> * img):not([data-gx-gallery]), section div[style*="grid-template-columns: repeat(4"]:has(> * img):not([data-gx-gallery]) { 
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 76%;
    gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--page-x)) !important; margin-right: calc(-1 * var(--page-x)) !important;
    padding: 0 var(--page-x) 6px var(--page-x) !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  section div[style*="grid-template-columns"]:has(> * img)::-webkit-scrollbar { display: none; }
  section div[style*="grid-template-columns"]:has(> * img) > * { scroll-snap-align: start; scroll-snap-stop: always; }
  /* 4-up number grids (market pulse) read better as 2×2 */
div[style*="grid-template-columns:repeat(4"]:not(:has(img)), div[style*="grid-template-columns: repeat(4"]:not(:has(img)) { grid-template-columns: 1fr 1fr !important; gap: 22px 18px !important; }
  /* the stacked service tiles keep a compact padding */
div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] > div[style*="padding:28px 24px"], div[style*="grid-template-columns:1fr 1fr 1fr 1fr"] > div[style*="padding: 28px 24px"], div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] > div[style*="padding:28px 24px"], div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"] > div[style*="padding: 28px 24px"] { padding: 22px 20px !important; }
  /* fixed-height image boxes: portrait boxes cap, tall boxes go landscape */
div[style*="height:540px"][style*="overflow:hidden"], div[style*="height:540px"][style*="overflow: hidden"], div[style*="height: 540px"][style*="overflow:hidden"], div[style*="height: 540px"][style*="overflow: hidden"], div[style*="height:560px"][style*="overflow:hidden"], div[style*="height:560px"][style*="overflow: hidden"], div[style*="height: 560px"][style*="overflow:hidden"], div[style*="height: 560px"][style*="overflow: hidden"], div[style*="height:620px"][style*="overflow:hidden"], div[style*="height:620px"][style*="overflow: hidden"], div[style*="height: 620px"][style*="overflow:hidden"], div[style*="height: 620px"][style*="overflow: hidden"], div[style*="height:520px"][style*="overflow:hidden"], div[style*="height:520px"][style*="overflow: hidden"], div[style*="height: 520px"][style*="overflow:hidden"], div[style*="height: 520px"][style*="overflow: hidden"] { height: min(78vw, 360px) !important; }
div[style*="height:460px"][style*="overflow:hidden"], div[style*="height:460px"][style*="overflow: hidden"], div[style*="height: 460px"][style*="overflow:hidden"], div[style*="height: 460px"][style*="overflow: hidden"], div[style*="height:472px"][style*="overflow:hidden"], div[style*="height:472px"][style*="overflow: hidden"], div[style*="height: 472px"][style*="overflow:hidden"], div[style*="height: 472px"][style*="overflow: hidden"], div[style*="height:440px"][style*="overflow:hidden"], div[style*="height:440px"][style*="overflow: hidden"], div[style*="height: 440px"][style*="overflow:hidden"], div[style*="height: 440px"][style*="overflow: hidden"], div[style*="height:430px"][style*="overflow:hidden"], div[style*="height:430px"][style*="overflow: hidden"], div[style*="height: 430px"][style*="overflow:hidden"], div[style*="height: 430px"][style*="overflow: hidden"], div[style*="height:420px"][style*="overflow:hidden"], div[style*="height:420px"][style*="overflow: hidden"], div[style*="height: 420px"][style*="overflow:hidden"], div[style*="height: 420px"][style*="overflow: hidden"] { height: min(96vw, 400px) !important; }
div[style*="height:280px"][style*="overflow:hidden"], div[style*="height:280px"][style*="overflow: hidden"], div[style*="height: 280px"][style*="overflow:hidden"], div[style*="height: 280px"][style*="overflow: hidden"], div[style*="height:250px"][style*="overflow:hidden"], div[style*="height:250px"][style*="overflow: hidden"], div[style*="height: 250px"][style*="overflow:hidden"], div[style*="height: 250px"][style*="overflow: hidden"], div[style*="height:230px"][style*="overflow:hidden"], div[style*="height:230px"][style*="overflow: hidden"], div[style*="height: 230px"][style*="overflow:hidden"], div[style*="height: 230px"][style*="overflow: hidden"] { height: min(62vw, 260px) !important; }
  /* floating caption boxes that hang off an image's corner sit inside the flow */
div[style*="left:-24px"][style*="bottom:-24px"], div[style*="left:-24px"][style*="bottom: -24px"], div[style*="left: -24px"][style*="bottom:-24px"], div[style*="left: -24px"][style*="bottom: -24px"], div[style*="right:-24px"][style*="bottom:-24px"], div[style*="right:-24px"][style*="bottom: -24px"], div[style*="right: -24px"][style*="bottom:-24px"], div[style*="right: -24px"][style*="bottom: -24px"] { position: relative !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: -1px 0 0 0 !important; border-top: 1px solid var(--hairline-gold) !important; }
  /* stacked two-column sections: tighter gap */
  [data-stack] { gap: 26px !important; }
  /* card padding trims a little */
div[style*="padding:32px 34px"], div[style*="padding: 32px 34px"], div[style*="padding:36px 38px"], div[style*="padding: 36px 38px"], div[style*="padding:30px 32px"], div[style*="padding: 30px 32px"] { padding: 22px 20px !important; }
div[style*="padding:40px 44px"], div[style*="padding: 40px 44px"], div[style*="padding:44px 48px"], div[style*="padding: 44px 48px"] { padding: 26px 20px !important; }
  /* flex rows never push past their box */
section div[style*="display:flex"], section div[style*="display: flex"] { max-width: 100%; box-sizing: border-box; min-width: 0; }
div[style*="padding:26px 28px"], div[style*="padding: 26px 28px"], div[style*="padding:24px 26px"], div[style*="padding: 24px 26px"] { padding: 20px 18px !important; }
  /* section header rows (title left, note right) stack cleanly */
section > div[style*="justify-content:space-between"][style*="align-items:flex-end"], section > div[style*="justify-content:space-between"][style*="align-items: flex-end"], section > div[style*="justify-content: space-between"][style*="align-items:flex-end"], section > div[style*="justify-content: space-between"][style*="align-items: flex-end"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px; }
section > div[style*="justify-content:space-between"][style*="align-items:flex-end"] > div[style*="text-align:right"], section > div[style*="justify-content:space-between"][style*="align-items:flex-end"] > div[style*="text-align: right"], section > div[style*="justify-content:space-between"][style*="align-items: flex-end"] > div[style*="text-align:right"], section > div[style*="justify-content:space-between"][style*="align-items: flex-end"] > div[style*="text-align: right"], section > div[style*="justify-content: space-between"][style*="align-items:flex-end"] > div[style*="text-align:right"], section > div[style*="justify-content: space-between"][style*="align-items:flex-end"] > div[style*="text-align: right"], section > div[style*="justify-content: space-between"][style*="align-items: flex-end"] > div[style*="text-align:right"], section > div[style*="justify-content: space-between"][style*="align-items: flex-end"] > div[style*="text-align: right"] { text-align: left !important; }
html[dir="rtl"] section > div[style*="justify-content:space-between"][style*="align-items:flex-end"] > div[style*="text-align:right"], html[dir="rtl"] section > div[style*="justify-content:space-between"][style*="align-items:flex-end"] > div[style*="text-align: right"], html[dir="rtl"] section > div[style*="justify-content:space-between"][style*="align-items: flex-end"] > div[style*="text-align:right"], html[dir="rtl"] section > div[style*="justify-content:space-between"][style*="align-items: flex-end"] > div[style*="text-align: right"], html[dir="rtl"] section > div[style*="justify-content: space-between"][style*="align-items:flex-end"] > div[style*="text-align:right"], html[dir="rtl"] section > div[style*="justify-content: space-between"][style*="align-items:flex-end"] > div[style*="text-align: right"], html[dir="rtl"] section > div[style*="justify-content: space-between"][style*="align-items: flex-end"] > div[style*="text-align:right"], html[dir="rtl"] section > div[style*="justify-content: space-between"][style*="align-items: flex-end"] > div[style*="text-align: right"] { text-align: right !important; }
  /* buttons in body sections: comfortable tap size, wrap side by side */
section a[style*="padding:15px 30px"], section a[style*="padding: 15px 30px"], section a[style*="padding:14px 28px"], section a[style*="padding: 14px 28px"], section a[style*="padding:16px 32px"], section a[style*="padding: 16px 32px"], section a[style*="padding:15px 28px"], section a[style*="padding: 15px 28px"], section a[style*="padding:14px 26px"], section a[style*="padding: 14px 26px"], section a[style*="padding:13px 26px"], section a[style*="padding: 13px 26px"] {
    padding: 14px 22px !important; font-size: 12px !important; letter-spacing: 0.12em !important; display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px; box-sizing: border-box; }
  /* button rows: buttons share the row and never wrap their label; a label that
     cannot fit drops to its own full-width row */
section div[style*="display:flex"] > a[style*="padding:15px 30px"], section div[style*="display:flex"] > a[style*="padding: 15px 30px"], section div[style*="display: flex"] > a[style*="padding:15px 30px"], section div[style*="display: flex"] > a[style*="padding: 15px 30px"], section div[style*="display:flex"] > a[style*="padding:14px 28px"], section div[style*="display:flex"] > a[style*="padding: 14px 28px"], section div[style*="display: flex"] > a[style*="padding:14px 28px"], section div[style*="display: flex"] > a[style*="padding: 14px 28px"], section div[style*="display:flex"] > a[style*="padding:16px 32px"], section div[style*="display:flex"] > a[style*="padding: 16px 32px"], section div[style*="display: flex"] > a[style*="padding:16px 32px"], section div[style*="display: flex"] > a[style*="padding: 16px 32px"], section div[style*="display:flex"] > a[style*="padding:15px 28px"], section div[style*="display:flex"] > a[style*="padding: 15px 28px"], section div[style*="display: flex"] > a[style*="padding:15px 28px"], section div[style*="display: flex"] > a[style*="padding: 15px 28px"], section div[style*="display:flex"] > a[style*="padding:14px 26px"], section div[style*="display:flex"] > a[style*="padding: 14px 26px"], section div[style*="display: flex"] > a[style*="padding:14px 26px"], section div[style*="display: flex"] > a[style*="padding: 14px 26px"], section div[style*="display:flex"] > a[style*="padding:13px 26px"], section div[style*="display:flex"] > a[style*="padding: 13px 26px"], section div[style*="display: flex"] > a[style*="padding:13px 26px"], section div[style*="display: flex"] > a[style*="padding: 13px 26px"] { flex: 1 1 auto; white-space: nowrap; }
  /* "verified on Bayut" strip and similar label + text + button rows stack */
section div[style*="gap:26px"][style*="align-items:center"], section div[style*="gap:26px"][style*="align-items: center"], section div[style*="gap: 26px"][style*="align-items:center"], section div[style*="gap: 26px"][style*="align-items: center"] { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 20px 20px !important; }
section div[style*="gap:26px"][style*="align-items:center"] > a, section div[style*="gap:26px"][style*="align-items: center"] > a, section div[style*="gap: 26px"][style*="align-items:center"] > a, section div[style*="gap: 26px"][style*="align-items: center"] > a { align-self: stretch; text-align: center; padding: 14px 20px !important; }
  /* CTA panels centre on phones */
section[style*="text-align:center"] div[style*="display:flex"], section[style*="text-align:center"] div[style*="display: flex"], section[style*="text-align: center"] div[style*="display:flex"], section[style*="text-align: center"] div[style*="display: flex"] { justify-content: center !important; }
}

/* ---------- 6. forms (≤640) ---------- */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; min-height: 50px; box-sizing: border-box; }
  textarea { min-height: 120px; }
  button[type="submit"], form button { width: 100%; min-height: 52px; font-size: 13px !important; letter-spacing: 0.14em !important; }
  form [style*="grid-template-columns"] { gap: 12px !important; }
}

/* ---------- 7. footer + bottom action bar (≤640) ---------- */
@media (max-width: 640px) {
  footer { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 40px var(--page-x) calc(40px + 74px + env(safe-area-inset-bottom, 0px)) !important; }
  footer > img { height: 36px !important; margin-bottom: 6px; }
  footer > a { margin-left: 0 !important; padding: 8px 0 !important; min-height: 0 !important; font-size: 12px !important; letter-spacing: 0.16em !important; }
  footer > div:last-child { font-size: 11px !important; line-height: 1.7; color: var(--faint) !important; margin-top: 10px; border-top: 1px solid var(--hairline); padding-top: 18px; width: 100%; }
  html[dir="rtl"] footer { align-items: flex-end !important; }
  /* the floating bubble hands over to the bottom bar */
a[aria-label="WhatsApp"][style*="position:fixed"], a[aria-label="WhatsApp"][style*="position: fixed"], a[href*="wa.me"][style*="position:fixed"], a[href*="wa.me"][style*="position: fixed"] { display: none !important; }
  #gx-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 10px var(--page-x) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(0,0,0,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(224,171,39,0.28); transform: translateY(0); transition: transform .3s ease; }
  html.gx-menu-open #gx-bar { transform: translateY(110%); }
  #gx-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-family: inherit; font-weight: 500; font-size: 12.5px; letter-spacing: 0.14em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  #gx-bar a.gx-bar-wa { background: var(--gold); color: #000; }
  #gx-bar a.gx-bar-call { border: 1px solid rgba(224,171,39,0.55); color: var(--gold); background: transparent; }
  #gx-bar svg { width: 17px; height: 17px; flex-shrink: 0; }
}
@media (min-width: 641px) { #gx-bar { display: none !important; } }

/* ---------- 8. odds and ends (≤640) ---------- */
@media (max-width: 640px) {
  /* plot map: the page's own sideways-swipe panel (720px plan, chips shown) stays; it just bleeds edge to edge */
  .gx-plot-panel { margin-left: calc(-1 * var(--page-x)) !important; margin-right: calc(-1 * var(--page-x)) !important; border-left: 0 !important; border-right: 0 !important; padding: 12px 10px 16px 10px !important; }
  /* leaflet / iframes */
  iframe { min-height: 320px; }
  /* timeline rows */
div[style*="border-top:2px solid"], div[style*="border-top: 2px solid"] { padding-top: 18px !important; }
  /* lightbox chrome */
  #gx-lb .gx-lb-top { padding: 12px 56px 8px 16px; }
  /* preloader logo */
  [data-preloader] img { width: 150px !important; }
  /* coverflow components already have phone sizes; give them the full width */
  .gx-aw-info { padding: 0 6px; }
  .gx-aw-body { font-size: 13px !important; }
}

/* ---------- 9. tablets (641–900) ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  html:root { --page-x: 32px !important; --sect-y: 72px !important; }
  /* footer: one wrapped row, not a stack */
  html footer[data-stack] { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 16px 26px !important; }
  html footer[data-stack] > a { margin-left: 0 !important; margin-right: 0 !important; padding: 6px 0 !important; min-height: 0 !important; }
  html footer[data-stack] > div:last-child { width: 100% !important; font-size: 11px !important; color: var(--faint) !important; }
  html[dir="rtl"] footer[data-stack] { padding-left: 96px !important; }
  /* four-up text tiles: two columns */
div[style*="grid-template-columns:1fr 1fr 1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr 1fr 1fr"], div[style*="grid-template-columns:repeat(4"], div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  [data-hero] { min-height: 64vh !important; }
  [data-statbar] { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 22px 24px !important; }
  [data-statbar] > * { border-left: 0 !important; padding-left: 0 !important; }
}