/* -- Floating Action Button v2 (glow-pulse, 72/64px, badge) -- */
    /* Badge placeholder (hidden by default, for future AI-chat count) */
/* About page responsive — mobile only, desktop not touched */
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*# sourceURL=global-styles-inline-css */
    
/*# sourceURL=uaeprop-interactions-inline-css */
/* Contact page: ITI phone flag selector dark-mode override */
    /* input.is-invalid highlight */

    /* Contact page responsive — mobile only */
@font-face{ font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); }
@font-face{ font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }
.up-psf-page { font-family:'IBM Plex Sans',sans-serif; }
/* 24.07: was max-width:1440px + margin:0 auto — see the identical fix + rationale on
   .up-md-page in market-data-inline.css (same anti-pattern, both pages share it). */

.up-psf-hero { background:var(--wp--preset--color--bg-dark); color:var(--wp--preset--color--cream); padding:80px max(80px, calc((100% - 1280px) / 2)) 80px; }
.up-psf-hero .up-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; color:rgba(247,237,217,0.65); display:block; margin-bottom:20px; }
.up-psf-hero h1 { font-family:'Fraunces',serif; font-size:clamp(36px,5vw,56px); font-weight:400; line-height:1.1; margin:0 0 20px; color:var(--wp--preset--color--cream); }
.up-psf-hero .up-sub { font-size:17px; line-height:1.65; color:rgba(247,237,217,0.85); max-width:640px; margin:0 0 18px; }
.up-psf-hero .up-data-date { font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(247,237,217,0.55); margin-bottom:6px; display:block; }
.up-psf-hero .up-disclaimer { font-size:13px; color:rgba(247,237,217,0.55); max-width:640px; line-height:1.5; }

.up-psf-stats-band { background:var(--wp--preset--color--bg-light); padding:80px max(80px, calc((100% - 1280px) / 2)); }
.up-psf-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1280px; margin:0 auto; }
.up-psf-stat { border-left:3px solid #d28b5a; padding-left:20px; }
.up-psf-stat-number { font-family:'Fraunces',serif; font-size:36px; font-weight:400; font-variation-settings:"SOFT" 0,"WONK" 1; color:var(--wp--preset--color--bg-dark); line-height:1; display:block; margin-bottom:8px; }
/* 24.07: was JetBrains Mono — canon reserves that font for 11px uppercase kickers only,
   big display numbers use Fraunces everywhere else (matches .up-md-kpi-number sibling page). */
.up-psf-stat-label { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:#d28b5a; }
.up-psf-stat-sub { font-family:'IBM Plex Sans',sans-serif; font-size:13px; color:rgba(45,55,69,0.55); margin-top:4px; display:block; }

.up-psf-section { padding:80px 0; }
.up-psf-section:nth-child(odd) { background:#fff; }
.up-psf-section:nth-child(even) { background:var(--wp--preset--color--bg-light); }
/* .t2-section-inner token (max-width:1280px + padding:0 80px) applied via interactions.css */
.up-psf-section-inner { max-width:1280px; margin:0 auto; padding-left:80px; padding-right:80px;  }
/* .up-psf-section-eyebrow replaced by .t2-kicker token */
.up-psf-section-eyebrow { display:block; margin-bottom:10px; }
/* .up-psf-section-title replaced by .t2-section-title token — font-size now clamp(32px,5vw,64px) */
.up-psf-section-title { color:var(--wp--preset--color--bg-dark); margin:0 0 6px; }

.up-psf-bar-chart { margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.up-psf-bar-row { display:flex; align-items:center; gap:16px; }
.up-psf-bar-name { font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--wp--preset--color--bg-dark); width:180px; flex-shrink:0; }
.up-psf-bar-track { flex:1; background:rgba(45,55,69,0.08); border-radius:3px; height:24px; }
.up-psf-bar-fill { background:#d28b5a; border-radius:3px; height:24px; min-width:2px; }
.up-psf-bar-val { font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:500; color:var(--wp--preset--color--bg-dark); width:100px; text-align:right; flex-shrink:0; }

.up-psf-table-wrap { margin-top:28px; overflow-x:auto; }
.up-psf-table { width:100%; border-collapse:collapse; font-size:14px; }
.up-psf-table th { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#d28b5a; text-align:left; padding:10px 14px; border-bottom:2px solid rgba(45,55,69,0.15); white-space:nowrap; }
.up-psf-table td { padding:12px 14px; border-bottom:1px solid rgba(45,55,69,0.08); color:#2d3745; }
.up-psf-table tr:hover td { background:rgba(210,139,90,0.04); }
.up-psf-table .num { font-family:'IBM Plex Sans',sans-serif; font-size:13px; }
.up-psf-table .badge { display:inline-block; padding:2px 8px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; background:rgba(210,139,90,0.12); color:#d28b5a; }

.up-psf-cta { background:#d28b5a; padding:80px max(80px, calc((100% - 1280px) / 2)); text-align:left; }
.up-psf-cta h2 { font-family:'Fraunces',serif; font-size:32px; font-weight:400; color:#0e0e10; margin:0 0 24px; }
.up-psf-cta-btns { display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; }
/* 30.07: radius reverted 6px→999px pill — this is the same pre-footer copper
   CTA family as FAQ (.faq-cta__btn) and insights (.up-ins-nl-btn), both of which
   already use 999px and were deliberately left untouched during the 30.07 audit.
   The homepage nav header CTA (.up-site-header__cta, "CTA pill") and .up-final-cta__submit
   are also 999px, predating this page and confirmed as the live, actively-maintained
   canon. The 6px value came from TYPOGRAPHY_COLOR_STANDARD_20260618.md's generic
   theme.json "Button" row, which that doc itself flags as a WP/FSE-era recon
   snapshot, not a living Astro canon — it does not describe this CTA family. */
.up-psf-btn-primary { display:inline-block; background:#2d3745; color:#ffffff; font-weight:600; font-family:'IBM Plex Sans',sans-serif; font-size:15px; padding:14px 32px; border-radius:999px; text-decoration:none; }
.up-psf-btn-secondary { display:inline-block; border:1px solid rgba(14,14,16,0.35); color:#0e0e10; font-family:'IBM Plex Sans',sans-serif; font-size:15px; padding:14px 32px; border-radius:999px; text-decoration:none; }

/* ── 17.08: real mobile design pass, not just shrink (MOBILE_DESIGN_CANON_20260817.md) ──
   Two structural reflows, both driven by the canon's guidance for this exact
   page (§ "Data tables (market-data, price-per-sqft...)" names it explicitly):
   1) District table → card-per-row below 768px. 6 columns never fit a phone
      screen readably; column order is fixed (#, District, Emirate, Avg PSF,
      Projects, Min Price) so on-screen labels are hardcoded via nth-child
      ::before — no data-label attributes needed in psf-stats.ts's generator,
      the live-computation logic stays untouched.
   2) Emirate bar chart → 2-row CSS grid (name+value share a top row, the bar
      fills a full-width row below) via named grid-areas. Replaces the old
      fixed-column layout, which squeezed "Ras Al Khaimah"/"Umm Al Quwain"
      into an 88px-wide cell at 480px and forced an ugly mid-word wrap. */
/* 961-1439px tablet tier (25.08 sweep — Class B, missing-tablet-tier bug pattern per
   wiki/synthesis/2026-08-25_uaeprop_tablet_padding_bug_patterns.md): live-verified at
   1024px the rail was stuck at desktop's 80px (no tier existed between this file's base
   rule and its <=768px mobile tier). 48px matches the sitewide tablet-padding canon;
   vertical values reused directly from this file's own <=768px tier below. */
@media (min-width:961px) and (max-width:1439px) {
  .up-psf-hero,.up-psf-stats-band,.up-psf-cta,.up-psf-section-inner { padding-left:48px; padding-right:48px; }
  .up-psf-hero,.up-psf-stats-band,.up-psf-cta { padding-top:56px; padding-bottom:56px; }
  .up-psf-section { padding-top:56px; padding-bottom:56px; }
}
@media (max-width:768px) {
  /* 25.08 (Mikhail-reported, mobile squish): .up-psf-section was listed here
     alongside .up-psf-section-inner, but .up-psf-section-inner is nested
     DIRECTLY inside .up-psf-section (see price-per-sqft-body.html — every
     <section class="up-psf-section"> wraps exactly one <div class="up-psf-
     section-inner">, .up-psf-section has no other direct content) — giving
     both the same side padding doubled it to 40/48px instead of the
     intended single 20/24px layer. Desktop's base rule (line ~38-42) never
     had this bug: only -inner carries padding there. Removed .up-psf-section
     from this list to match. */
  .up-psf-hero,.up-psf-stats-band,.up-psf-cta,.up-psf-section-inner { padding-left:24px; padding-right:24px; }
  /* Compress desktop's 80px section rhythm — canon: ~48-64px on mobile, not
     desktop spacing shrunk down (reads as excessive scrolling on a phone). */
  .up-psf-hero,.up-psf-stats-band,.up-psf-cta { padding-top:56px; padding-bottom:56px; }
  .up-psf-section { padding-top:56px; padding-bottom:56px; }

  .up-psf-stats-grid { grid-template-columns:1fr; gap:20px; }

  .up-psf-bar-chart { gap:20px; }
  .up-psf-bar-row {
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"name val" "track track";
    column-gap:12px; row-gap:8px;
    align-items:center;
  }
  .up-psf-bar-name { grid-area:name; width:auto; font-size:15px; font-weight:500; }
  .up-psf-bar-val { grid-area:val; width:auto; text-align:right; font-size:14px; }
  .up-psf-bar-track { grid-area:track; height:20px; }
  .up-psf-bar-fill { height:20px; }

  .up-psf-table-wrap { overflow-x:visible; margin-top:20px; }
  .up-psf-table, .up-psf-table thead, .up-psf-table tbody,
  .up-psf-table tr, .up-psf-table th, .up-psf-table td { display:block; width:auto; }
  .up-psf-table thead { display:none; }
  .up-psf-table tbody { display:flex; flex-direction:column; gap:12px; }
  /* 19.08 mobile-spacing audit (audit_mobile_spacing.mjs) flags this 16px as a
     PAD mismatch against the 24px page-rail canon — false positive: this
     padding is the CARD's own boundary (border-radius/border/background set
     in this same rule below), explicitly whitelisted at its own smaller scale
     in specs/MOBILE_DESIGN_CANON_20260817.md § Whitelist item 2 ("Intra-card
     padding/gap 16px/14px/12px"). Left unchanged. */
  .up-psf-table tr {
    position:relative;
    background:#fff;
    border:1px solid rgba(45,55,69,0.1);
    border-radius:10px;
    padding:16px 16px 12px;
  }
  /* Same intra-card exception (canon § 2) — 0 left/right so the absolute-
     positioned rank badge and the flex label:value rows below both span
     edge-to-edge of the already-16px-padded card, not a second 24px inset. */
  .up-psf-table td { padding:0; border-bottom:none; }
  .up-psf-table td:nth-child(1) {
    position:absolute; top:14px; right:16px;
    font-family:'JetBrains Mono',monospace; font-size:12px;
  }
  /* padding-right:36px is deliberate reserved space, not a page-rail value —
     it keeps the district-name title clear of the absolute-positioned rank
     number (nth-child(1) above, top:14px;right:16px, up to 2 digits) sharing
     this card header row. Dropping this to the 24px canon side-padding value
     would risk the title running under the rank digit on double-digit ranks.
     Kept as-is. */
  .up-psf-table td:nth-child(2) {
    font-family:'Fraunces',serif; font-size:19px; color:var(--wp--preset--color--bg-dark);
    padding-right:36px; margin-bottom:8px;
  }
  .up-psf-table td:nth-child(3) { margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(45,55,69,0.08); }
  /* Same intra-card exception (canon § 2) — 5px 0 is the vertical rhythm
     between stacked label:value rows inside the card, not page-rail padding. */
  .up-psf-table td:nth-child(4),
  .up-psf-table td:nth-child(5),
  .up-psf-table td:nth-child(6) {
    display:flex; justify-content:space-between; align-items:baseline;
    padding:5px 0; font-size:14px;
  }
  /* 18.08 fix: hardcoded English content strings showed on RU/AR pages too,
     even though the real (hidden) <thead><th> text is already correctly
     localized per language — the mobile card-row layout just never read it.
     Added data-label="<localized th text>" on the 3 numeric <td>s in all 3
     content/price-per-sqft-body*.html files (EN/RU/AR), so attr() picks up
     the right language per page instead of one hardcoded EN string. */
  .up-psf-table td:nth-child(4)::before,
  .up-psf-table td:nth-child(5)::before,
  .up-psf-table td:nth-child(6)::before { content:attr(data-label); }
  .up-psf-table td:nth-child(4)::before,
  .up-psf-table td:nth-child(5)::before,
  .up-psf-table td:nth-child(6)::before {
    font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
    letter-spacing:0.6px; text-transform:uppercase; color:rgba(45,55,69,0.5);
  }
  .up-psf-table tr:hover td { background:none; }

  /* CTA buttons full-width stacked — two side-by-side pills wrap mid-word
     below ~420px; padding already clears the 44px touch-target minimum. */
  .up-psf-cta-btns { flex-direction:column; align-items:stretch; }
  .up-psf-btn-primary,.up-psf-btn-secondary { text-align:center; }
}
@media (max-width:480px) {
  /* 25.08: same .up-psf-section double-padding fix as the 768px block above. */
  .up-psf-hero,.up-psf-stats-band,.up-psf-cta,.up-psf-section-inner { padding-left:20px; padding-right:20px; }
  .up-psf-hero,.up-psf-stats-band,.up-psf-cta { padding-top:48px; padding-bottom:48px; }
  .up-psf-section { padding-top:48px; padding-bottom:48px; }
}
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Outer shell ── */

/* ── Logo (left) ── */

/* ── Nav wrapper — centered via flex grow trick ── */

/* ── Nav item gap: 28px between items (half each side = 14px) ── */

/* ── Top-level links / buttons ── */

/* chevron icon */

/* ── Dropdown panel ── */

/* ── Emirates flyout arrow ── */

/* ── Emirates sub-dropdown (flies right) ── */

/* ── Right side: lang switcher + CTA ── */

/* Language switcher */

/* CTA pill — edits4: enlarged to match removed float-btn (h:56px, 16px, 500) */

/* ── Mobile hamburger ── */

/* ── Mobile menu panel ── */

/* ── Responsive breakpoint ── */
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Top row: brand left + columns right ── */

/* ── Brand block (left ~44%) ── */

/* ── 5 columns (right ~56%) — Wave-G: right-align cols block to rail edge ── */
/* Wave-G: gap handles spacing, no margin-left needed */

/* ── Bottom bar ── */

/* Lang switcher in footer bottom bar */

/* ── Responsive ── */