/*
 * XIS approved design refinements (approved by N, 24–25 October 2026).
 * Loaded after each page's approved stylesheet; the approved files themselves are never edited.
 * Each rule applies to every page that shares the element. Record: design/refinements/README.md.
 * The fidelity tests apply this same file to the approved HTML, so the reference = approved design + these refinements.
 */

/* R1. Logo strip: label and logos raised 12 px (optically centred); the band keeps its height */
.xis .devs { padding-top: 44px; padding-bottom: 68px; }

/* R2 (revised 25 Oct 2026). Area pages: the space after the opening section matches the space between the sections
 * below it (134 px desktop, 80 px phone; was 224 / 128 approved, then 100 / 60 in 1.3.0) */
.xis .phero + #villas, .xis .phero + #prices { padding-top: clamp(20px, 2.4vw, 36px); }

/* R7. The opening section 20 px closer to the header (header to breadcrumb 108 px desktop, 72 px phone; was 128 / 80) */
.xis .phero { padding-top: clamp(48px, 5.9vw, 84px); }

/* R3. Area pages: tighter space before the reviews */
.xis #fit { padding-bottom: clamp(40px, 5vw, 72px); }

/* R4. "Back to top": the homepage's glowing orange dot on every page */
.xis .ftop .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); margin-right: 9px; vertical-align: 1px; }

/* R5. Reviews: the box fits the longest review plus 20 px above and below (middle option); label gap 34 px.
 * All reviews share one grid cell, so the box is as tall as the longest one, on every screen and after any edit. */
.xis .voices .q { display: grid; height: auto; margin-top: 34px; padding-block: 20px; }
.xis .voices blockquote { position: relative; inset: auto; grid-area: 1 / 1; }

/* R6. Menu dropdown: the orange dot always shown beside each item, 6 px like the section labels */
.xis header .ndmenu a::after { opacity: 1; transform: none; width: 6px; height: 6px; top: 17px; box-shadow: 0 0 8px rgba(246, 88, 0, .5); }

/* R8. Homepage opening: "Pause motion" removed from the control row (N, 27 Oct 2026). Visitors whose device asks for
   reduced motion still get the still version automatically. */
.meter #hpause.hpause { display: none !important; }

/* R9. Homepage "Beyond the UAE" (N, 27 Oct 2026, Map 2): the regional map from Abu Dhabi beside the featured projects,
   then an outlined button. Heading and colours as approved. The map is wider than the text column (1280 px). */
.intl .ixm { display: grid; grid-template-columns: minmax(0, 780fr) minmax(0, 452fr); gap: 48px; align-items: stretch;
  width: min(1280px, calc(100vw - 32px)); margin: clamp(32px, 4vw, 48px) 0 0; margin-inline-start: calc(50% - min(640px, 50vw - 16px)); }
/* (start side, not left: on the Arabic page the section widens from the right, so it stays centred) */
.intl .ixm-map { position: relative; aspect-ratio: 780 / 600; border-radius: 18px; overflow: hidden; background: #0b0f1a; box-shadow: inset 0 0 0 1px rgba(243, 237, 227, .08); }
.intl .ixm-map img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
.intl .ixm-fade { position: absolute; inset: 0; background: radial-gradient(60% 55% at 100% 0%, #0b0f1a 0%, rgba(11, 15, 26, .85) 35%, rgba(11, 15, 26, 0) 100%), radial-gradient(55% 60% at 0% 100%, #0b0f1a 0%, rgba(11, 15, 26, .85) 30%, rgba(11, 15, 26, 0) 100%), radial-gradient(120% 100% at 50% 50%, rgba(11, 15, 26, 0) 62%, rgba(11, 15, 26, .55) 100%); }
.intl .ixm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intl .ixm-dash path { fill: none; stroke: #d9c3a0; stroke-width: 1.3; stroke-dasharray: 3 6; stroke-opacity: .8; vector-effect: non-scaling-stroke; }
.intl .ixm-l { fill: none; stroke: #fff; stroke-width: 6; }
.intl .ixm-o, .intl .ixm-p { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.intl .ixm-o { width: 16px; height: 16px; background: #f65800; box-shadow: 0 0 22px 5px rgba(246, 88, 0, .7); }
.intl .ixm-p { width: 10px; height: 10px; background: #d9c3a0; box-shadow: 0 0 0 4px rgba(217, 195, 160, .18); }
.intl .ixm-n { position: absolute; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #f3ede3; white-space: nowrap; text-shadow: 0 1px 6px #0b0f1a; }
.intl .ixm-cards { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.intl .ixm-card { flex: 1; display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 150px; border-radius: 18px; overflow: hidden; background: #121828; box-shadow: inset 0 0 0 1px rgba(243, 237, 227, .08); text-decoration: none; transition: box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.intl .ixm-card:hover, .intl .ixm-card:focus-visible { box-shadow: inset 0 0 0 1px rgba(217, 195, 160, .45); transform: translateY(-2px); outline: none; }
.intl .ixm-img { position: relative; display: block; background: #0b0f1a; }
.intl .ixm-img img, .intl .ixm-img picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intl .ixm-bd { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px; min-width: 0; text-align: start; }
.intl .ixm-k { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: #8e95a8; }
.intl .ixm-t { font: 350 26px/1.15 var(--f-display); font-variation-settings: 'opsz' 60, 'wdth' 87; color: #f3ede3; }
.intl .ixm-s { font-size: 14px; line-height: 1.6; color: #a9aebc; }
.intl .ixm-pr { font-size: 14px; color: #f3ede3; }
.intl .ixm-pr b, .intl .ixm-pr span { font-weight: 400; color: #d9c3a0; }
.intl .ixm-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243, 237, 227, .38); color: #f3ede3; text-decoration: none; font: 500 13px/1.2 var(--f-body); letter-spacing: .06em; transition: box-shadow .3s; }
.intl .ixm-all:hover, .intl .ixm-all:focus-visible { box-shadow: inset 0 0 0 1px #d9c3a0; outline: none; }
.intl .ixm-all .d { width: 6px; height: 6px; border-radius: 50%; background: #f65800; box-shadow: 0 0 12px #f65800; }
/* the lines draw outward from Abu Dhabi once, when the map comes into view (assets/js set ixm-wait, then ixm-go); without
   that script, or for visitors who ask for reduced motion, the finished map shows at once */
@keyframes ixmDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ixmPin { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes ixmName { from { opacity: 0; } to { opacity: 1; } }
.intl .ixm-map.ixm-wait .ixm-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intl .ixm-map.ixm-wait .ixm-p, .intl .ixm-map.ixm-wait .ixm-n:not(.ixm-on) { opacity: 0; }
.intl .ixm-map.ixm-go .ixm-l { animation: ixmDraw 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.intl .ixm-map.ixm-go .ixm-p { animation: ixmPin .6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.intl .ixm-map.ixm-go .ixm-n:not(.ixm-on) { animation: ixmName .6s ease forwards; }
@media (prefers-reduced-motion: reduce) { .intl .ixm-map .ixm-l { stroke-dasharray: none !important; animation: none !important; } .intl .ixm-map .ixm-p, .intl .ixm-map .ixm-n { opacity: 1 !important; animation: none !important; } }
/* tablets and phones: the map full width, the cards and the button below it */
@media (max-width: 960px) {
  .intl .ixm { grid-template-columns: minmax(0, 1fr); gap: 24px; width: auto; margin-inline-start: 0; }
  .intl .ixm-n { font-size: 8.5px; letter-spacing: .12em; }
  .intl .ixm-o { width: 13px; height: 13px; } .intl .ixm-p { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(217, 195, 160, .18); }
  .intl .ixm-all { align-self: center; }
}
@media (max-width: 520px) {
  .intl .ixm-map { border-radius: 14px; }
  .intl .ixm-n { font-size: 7px; letter-spacing: .08em; }
  .intl .ixm-card { grid-template-columns: 112px minmax(0, 1fr); min-height: 0; border-radius: 14px; }
  .intl .ixm-bd { padding: 16px 16px; gap: 6px; }
  .intl .ixm-t { font-size: 17px; line-height: 1.2; }
  .intl .ixm-k { font-size: 9.5px; letter-spacing: .14em; }
  .intl .ixm-pr { font-size: 13px; }
  .intl .ixm-s { display: none; }
}