/* EmirateSetupCostRange — SINGLE SOURCE. tools/build-emirate-setup-cost.py writes this into every emirate page inside the
   "GENERATED emirate-setup-cost" region. The rules are the Dubai cost band moved here verbatim (2026-09-07, owner brief);
   the only additions are .hi for the right-aligned high-end label (it was an inline style) and, since Option A (2026-09-07),
   the scenario photograph slot (.dub-scenario-media) above the card body. Tokens only; both themes. */
.dub-costband { padding:110px 0 100px;background:linear-gradient(180deg, rgba(230,224,210,.014), transparent 60%); }
.dub-costband-head { text-align:left; margin:0 0 52px; max-width:44rem; }   /* left reading edge shared with the range bar, first scenario and CTA (owner, 2026-09-07) */
.dub-costband-head h2 { font-size:clamp(28px,3.2vw,40px); line-height:1.14; letter-spacing:-.02em; font-weight:400; margin:0 0 12px; color:var(--text); }
.dub-costband-head p { font-size:15px; color:var(--muted); line-height:1.55; margin:0; }
.dub-costband-band { position:relative; padding:0 0 42px; margin-bottom:52px; }
.dub-costband-scale { position:relative; height:12px; border-radius:6px; background:linear-gradient(90deg, rgba(138,163,148,.4) 0%, rgba(230,224,210,.35) 50%, rgba(184,148,116,.4) 100%); }
.dub-costband-scale::before, .dub-costband-scale::after { content:""; position:absolute; top:-8px; width:2px; height:28px; background:var(--text); }
.dub-costband-scale::before { left:0; }
.dub-costband-scale::after { right:0; }
.dub-costband-labels { display:flex; justify-content:space-between; margin-top:16px; font-family:var(--mono); font-size:13px; color:var(--text); letter-spacing:-.01em; font-weight:500; }
.dub-costband-labels .hi { text-align:right; }
.dub-costband-labels small { display:block; font-size:10.5px; color:var(--faint); font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-weight:400; margin-bottom:4px; }
.dub-costband-scenarios { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px) { .dub-costband-scenarios { grid-template-columns:1fr; } }
.dub-scenario { display:flex; flex-direction:column; padding:0; border:1px solid var(--line); border-radius:14px; background:rgba(230,224,210,.014); overflow:hidden; }   /* Option A (2026-09-07): image-led card; the photograph clips to the card's top corners */
.dub-scenario-media { margin:0; aspect-ratio:16 / 9; overflow:hidden; background:var(--surface-tinted, var(--bg-2)); }
.dub-scenario-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--dub-scn-pos, center center); }
.dub-scenario-body { padding:22px 24px 26px; display:flex; flex-direction:column; }
.dub-scenario-tier { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mineral); margin:0 0 10px; }
.dub-scenario h4 { font-size:16px; font-weight:500; margin:0 0 6px; color:var(--text); letter-spacing:-.005em; }
.dub-scenario-price { font-size:26px; font-weight:400; color:var(--text); letter-spacing:-.02em; margin:12px 0 12px; font-family:'Inter Tight','Inter',sans-serif; }
.dub-scenario-price sub { font-size:11.5px; color:var(--faint); font-weight:400; letter-spacing:0; margin-left:6px; vertical-align:baseline; }
.dub-scenario ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.dub-scenario ul li { font-size:12.5px; color:var(--muted); line-height:1.5; padding-left:14px; position:relative; }
.dub-scenario ul li::before { content:"·"; position:absolute; left:4px; color:var(--faint); font-weight:700; }
/* the next step after comparing all three scenarios: one text action, right-aligned under the full card set (2026-09-08) */
.dub-costband-cta { display:flex; justify-content:flex-start; margin-top:30px; }   /* closing action, left edge of the grid (2026-09-08) */
.dub-costband-link { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--text); text-decoration:none; }
.dub-costband-link:hover, .dub-costband-link:focus-visible { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.dub-costband-link svg { width:16px; height:16px; flex:none; transition:transform .2s; }
.dub-costband-link:hover svg, .dub-costband-link:focus-visible svg { transform:translateX(4px); }
.dub-costband-link:focus-visible { outline:2px solid var(--focus-ring, var(--mineral)); outline-offset:4px; border-radius:4px; }
@media (max-width:820px) { .dub-costband-cta { margin-top:24px; } }
@media (prefers-reduced-motion: reduce) { .dub-costband-link svg { transition:none; } .dub-costband-link:hover svg { transform:none; } }
    .dub-scenario[data-scenario="1"] .dub-scenario-media img { --dub-scn-pos: center 50%; }
    .dub-scenario[data-scenario="2"] .dub-scenario-media img { --dub-scn-pos: center 50%; }
    .dub-scenario[data-scenario="3"] .dub-scenario-media img { --dub-scn-pos: center 50%; }