/* ==========================================================================
   PROJECT PAGE — DESIGN SYSTEM
   Loaded last on projects/_page.php so it normalises everything before it.

   Rewritten 2026-08-10 against a straight comparison with Bayut's property
   page. The previous version fixed colour consistency but left the real
   problem: the page was a wall of text. Facts were buried in prose, sections
   ran into each other, and nothing let you find anything without reading it.

   Four rules, applied everywhere:

     1. SECTIONS ARE BLOCKS.   Each one is a visibly separate card with real
                               space around it. You can see where you are.
     2. FACTS ARE SCANNABLE.   Label left, value right, aligned down a column —
                               readable without reading sentences.
     3. ICONS CARRY MEANING.   A marker on every heading so the eye can find a
                               section by shape instead of parsing words.
     4. PROSE IS SECONDARY.    Explanations get smaller, quieter type and sit
                               under the fact, never in place of it.
   ========================================================================== */

:root {
  --ps-bg:            #0b1220;
  --ps-surface:       #111a27;   /* section card */
  --ps-surface-2:     #16202e;   /* row inside a card */
  --ps-border:        rgba(255, 255, 255, .07);
  --ps-border-str:    rgba(255, 255, 255, .12);
  --ps-text:          #f2f5f9;
  --ps-text-2:        #c3cedb;
  --ps-muted:         #8395a8;
  --ps-accent:        #2ea88f;
  --ps-accent-lt:     #5fd8bd;
  --ps-warn:          #e8b339;
  --ps-radius:        10px;
  --ps-radius-lg:     16px;
}

/* ── 1. SECTIONS ARE BLOCKS ─────────────────────────────────────────────── */

.prop-info,
.location-access,
.payment-section,
.info-section,
.transport-section,
#sec-floorplans,
.rc-sec,
.cp-faqs {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  padding: 26px 28px;
  margin: 0 0 22px;
  width: 100%;
}

/* ── 2. HEADINGS WITH AN ICON MARKER ────────────────────────────────────── */

.section-title,
.cp-faqs-title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ps-text);
  margin: 0 0 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--ps-border);
  border-left: 0;
}
.section-title::after { display: none; }   /* kill the old gradient underline */

/* A square accent tile before each heading. Different glyph per section so the
   eye learns the shapes; content comes from the section id, no markup change. */
.section-title::before,
.cp-faqs-title::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(46, 168, 143, .13);
  border: 1px solid rgba(46, 168, 143, .28);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
#sec-payment    .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
#sec-sold       .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E"); }
#sec-verify     .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
#sec-overview   .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 01-1 1H4a1 1 0 01-1-1z'/%3E%3C/svg%3E"); }
#sec-units      .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
#sec-floorplans .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M3 10h8M11 3v18'/%3E%3C/svg%3E"); }
#sec-location   .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.transport-section .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='13' rx='2'/%3E%3Cpath d='M5 10h14M8 20l-1.5 2M16 20l1.5 2'/%3E%3Ccircle cx='8.5' cy='13.5' r='.6'/%3E%3Ccircle cx='15.5' cy='13.5' r='.6'/%3E%3C/svg%3E"); }
.methodology-note .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3v6L4 19a2 2 0 002 2h12a2 2 0 002-2L15 9V3'/%3E%3Cpath d='M8 3h8M7 14h10'/%3E%3C/svg%3E"); }
.ai-vision .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 21s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.op-internal-links .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/%3E%3C/svg%3E"); }
.pa-wrap .section-title::before, .dev-community-section .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 19V9M10 19V4M16 19v-7M22 19H2'/%3E%3C/svg%3E"); }
.explore-more .section-title::before, .gallery .section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5-9 9'/%3E%3C/svg%3E"); }

/* Fallback so a section we have not styled never shows an empty tile. */
.section-title::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3C/svg%3E"); }

.cp-faqs-title::before                 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd8bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 113 2.5V13'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

/* Sub-headings: quieter, no heavy left bar */
.tx-sub, .fp-sub, .pay-handover-h {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ps-text);
  margin: 26px 0 12px;
  padding: 0;
  border-left: 0;
}

/* ── 3. FACT ROWS — the Bayut pattern: label left, value right ──────────── */

.pi-card, .la-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.pi-grid, .la-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px !important;
}

.pi-item, .la-item {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 13px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ps-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pi-label, .la-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ps-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  white-space: nowrap;
}

.pi-value, .la-value {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--ps-text) !important;
  text-align: right;
  line-height: 1.5;
}

/* ── 4. METRIC TILES — fewer words, more contrast ───────────────────────── */

/* These are the headline numbers — the reason the section exists. Sharing a
   surface with the section card made them disappear into it. They now sit on a
   lighter surface, separated by real gaps, each with its own top accent rule so
   the group reads as four distinct facts rather than one grey slab. */
.tx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin: 0 0 26px;
}
.tx-card {
  position: relative;
  background: #1b2736 !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 12px !important;
  padding: 18px 18px 16px !important;
  gap: 7px !important;
  overflow: hidden;
}
.tx-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ps-accent);
  opacity: .9;
}
/* The advertised-vs-paid gap is the finding, not just a number — give it the
   accent treatment so the eye lands there first. */
.tx-card:nth-child(2) { background: #162b2a !important; border-color: rgba(46, 168, 143, .34) !important; }
.tx-card:nth-child(2)::before { background: var(--ps-accent-lt); height: 3px; }

.tx-k {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #7f93a8;
}
.tx-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: #ffffff; line-height: 1.15; }
.tx-n { font-size: 12.5px; line-height: 1.5; color: #92a5b8; }
.tx-up { color: #4ade80; font-weight: 700; }
.tx-down { color: #f87171; font-weight: 700; }

/* ── PAYMENT ROWS ───────────────────────────────────────────────────────── */

.pay-money {
  border: 1px solid var(--ps-border) !important;
  border-radius: var(--ps-radius);
  overflow: hidden;
}
.pay-money-row { padding: 14px 18px; border-bottom: 1px solid var(--ps-border); }
.pay-money-pct { color: var(--ps-accent-lt); font-size: 14px; }
.pay-money-lbl { color: var(--ps-text-2); }
.pay-money-amt { color: var(--ps-text); font-size: 15px; }

/* ── PROSE IS SECONDARY ─────────────────────────────────────────────────── */

.tx-intro, .rc-lede, .fp-lede, .fp-none,
.pay-money-intro, .pay-money-note, .tx-note, .tx-source, .pay-handover-p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ps-muted);
  max-width: 74ch;
}
.tx-source {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--ps-border);
  font-size: 12.5px;
}

/* ── TABLES ─────────────────────────────────────────────────────────────── */

.tx-table { font-size: 14px; }
.tx-table th {
  font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ps-muted); padding: 10px 12px; border-bottom: 1px solid var(--ps-border);
}
.tx-table td { padding: 12px; border-bottom: 1px solid var(--ps-border); color: var(--ps-text-2); }
.tx-table td:first-child { color: var(--ps-text); font-weight: 500; width: auto; }

/* ── CHART ──────────────────────────────────────────────────────────────── */

.tx-bars { height: 150px; gap: 12px; padding: 6px 0 0; }
.tx-bar-fill { background: var(--ps-accent); border-radius: 4px 4px 0 0; max-width: 46px; }
.tx-bar-n, .tx-bar-l { font-size: 12px; color: var(--ps-muted); }

/* ── MOBILE ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .prop-info, .location-access, .payment-section, .info-section,
  .transport-section, #sec-floorplans, .rc-sec, .cp-faqs {
    padding: 20px 17px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  .section-title, .cp-faqs-title {
    font-size: 1.06rem;
    margin-bottom: 16px;
    padding-bottom: 13px;
    gap: 9px;
  }
  .section-title::before, .cp-faqs-title::before { width: 26px; height: 26px; background-size: 14px 14px; }

  .pi-grid, .la-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .pi-item, .la-item { padding: 12px 0 !important; }
  .pi-label, .la-label { font-size: 13px !important; }
  .pi-value, .la-value { font-size: 14px !important; }

  .tx-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tx-v { font-size: 19px; }
  .tx-card { padding: 14px 14px 13px !important; }
  .tx-card:nth-child(2) { grid-column: 1 / -1; }   /* the gap card needs the width */

  .tx-bars { height: 116px; gap: 7px; }
  .tx-sub, .fp-sub, .pay-handover-h { font-size: 15px; margin-top: 22px; }
}


/* ── 5. STOP CONTENT COLLAPSING TO THE LEFT ─────────────────────────────────
   A 74ch measure is right for a paragraph but wrong for a whole section: it
   left half of every card empty and made the page look broken rather than
   readable. Prose keeps its measure; anything structural now fills the card. */

#sec-floorplans .fp-mix,
#sec-floorplans .fp-sizes,
.tx-bars,
.tx-scroll,
.pay-money,
.rc-out,
.rc-watch { max-width: none; width: 100%; }

/* The handover answer is the second-most-searched fact on the page. It was a
   short paragraph adrift in a wide empty card. Make it a proper callout. */
.pay-handover-h { margin-bottom: 10px; }
.pay-handover-p {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #1b2736;
  border: 1px solid rgba(255, 255, 255, .10);
  border-left: 4px solid var(--ps-accent);
}
.pay-handover-p strong {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.01em;
}

/* Floor-plan mix bars were half the width of their own card. */
#sec-floorplans .fp-mix-row { grid-template-columns: 130px 1fr 54px; }
#sec-floorplans .fp-mix-bar { height: 12px; border-radius: 999px; }

@media (max-width: 768px) {
  .pay-handover-p { padding: 14px 15px; }
  .pay-handover-p strong { font-size: 17px; }
  #sec-floorplans .fp-mix-row { grid-template-columns: 88px 1fr 44px; }
}


/* ── LINKS INSIDE FACT ROWS ─────────────────────────────────────────────────
   The area value was already a link to the area page but rendered identically
   to the plain values beside it, so nobody would ever click it. */
.la-value-link,
a.la-value {
  color: var(--ps-accent-lt) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(95, 216, 189, .35);
  transition: .15s;
}
.la-value-link:hover,
a.la-value:hover { color: #8ff0da !important; border-bottom-color: #8ff0da; }


/* ── TONE DOWN THE BROKER CTAs ──────────────────────────────────────────────
   The pink-to-purple gradient buttons ("Speak With Project Advisor", "See if
   this home really fits my lifestyle") are the loudest thing on the page and
   they say the one thing this site claims not to be. They stay — they are a
   real contact route — but they stop shouting over the data. */
.op-mid-commit { display: none !important; }   /* dead widget, belt and braces */

[class*="advisor"] .s-action.primary,
.sm-cta, .sm-cta-btn,
a[href*="contact.php"].panel-btn {
  background: var(--ps-accent) !important;
  background-image: none !important;
  color: #06121c !important;
  border: 1px solid rgba(95, 216, 189, .45) !important;
  box-shadow: none !important;
}

/* The scores panel reads as a wall of near-identical green bars. Give the
   numbers room and let the bar be secondary to the figure. */
.pa-mini-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; }
.pa-mini-bar { grid-column: 1 / -1; height: 7px !important; border-radius: 999px; }
.pa-mini-num { font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; }