/* ============================================================================
   MFC INVESTS — Cappuccino palette (owner's chosen swatch, 5 Sep 2026).
   Warm cream paper, soft black, the deeper logo red, chrome as the secondary.
   Loaded AFTER styles.css so these tokens win; styles.css stays untouched
   (remove this one <link> to revert). Radius 0, no shadows, 1px rules.
   Measured: soft-black 14.2:1, body 7.7:1, muted 4.8:1, red 5.74:1 on
   cappuccino / 6.8:1 on card. Red never on soft-black (2.5:1) — dark surfaces
   use warm-white text.
   ============================================================================ */
:root{
  /* Surfaces — warm neutral ramp */
  --paper:#FBF8F3;      /* warm-white raised surfaces / cards */
  --card:#FBF8F3;
  --ground:#EDE4D6;     /* Cappuccino — the page field */
  --panel:#E4DAC9;      /* a warmer band for alternating sections */
  --placeholder:#C9BFB0;
  /* Ink — warm near-black */
  --ink:#1A1714;        /* Soft black */
  --ink-soft:#4A433B;
  --ink-body:#4A433B;
  --ink-muted:#6B6156;
  /* On dark surfaces */
  --on-dark:#F4EFE8;
  --on-dark-mute:#B9AE9B;
  /* Chrome, secondary (surfaces / borders / large text only) */
  --steel:#B9AE9B;
  /* Red — the logo red from the swatch */
  --red:#A8202B;
  --red-deep:#8A1A22;
  --red-hover:#8A1A22;
  --red-on-dark:#E08A82;
  /* Rules — warm hairlines */
  --rule:#D8CCBB;
  --rule-ink:#1A1714;
  --rule-dark:#4A433B;
  /* Geometry — no rounding, no elevation */
  --radius:0; --radius-lg:0; --radius-pill:0;
  --shadow:none; --shadow-lg:none;
  /* Type */
  --font-display:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-accent:'Inter Tight','Inter',system-ui,sans-serif;
  --font-nav:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  /* Warm-shift every grey styles.css uses, so muted text on the cappuccino
     ground stays readable (the cool greys failed at 2.7-3.8:1). */
  --grey-50:#EDE4D6; --grey-200:#DED2C0; --grey-300:#D8CCBB; --grey-400:#8C8378;
  --grey-500:#635A50; --grey-600:#524A42; --grey-700:#3E3832; --grey-800:#2E2A25;
  --champagne:#A8202B;
}

/* Rule 1 + 2: radius 0 and no box-shadow everywhere, no exceptions. */
*,*::before,*::after{border-radius:0!important;box-shadow:none!important}

/* Warm cream page field; body copy warm-dark, headings soft-black. */
body{background:var(--ground);color:var(--ink-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule-ink)}
a{color:var(--red);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--red-deep)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---- Dark surfaces keep LIGHT text ----------------------------------------
   The global ink-heading rule above must never paint a heading dark-on-dark.
   Every dark section/card gets warm-white text and headings. This is what
   fixes the unreadable "Why invest in Cambodia" heading and the off-plan
   cards on dark image bands. */
.hero,.imgsection,.tilesec,.mhero,.mkt,.cpage,.lwu,.dstrip,
.rcard__body,.tile,.mtile,.contactcard,.svccard,.site-footer{ color:var(--on-dark); }
.hero :is(h1,h2,h3,h4,h5,h6),.imgsection :is(h1,h2,h3,h4,h5,h6),
.tilesec :is(h1,h2,h3,h4,h5,h6),.mhero :is(h1,h2,h3,h4,h5,h6),
.mkt :is(h1,h2,h3,h4,h5,h6),.cpage :is(h1,h2,h3,h4,h5,h6),
.lwu :is(h1,h2,h3,h4,h5,h6),.rcard__body :is(h1,h2,h3,h4,h5,h6),
.contactcard :is(h1,h2,h3,h4,h5,h6),.svccard :is(h1,h2,h3,h4,h5,h6),
.site-footer :is(h1,h2,h3,h4,h5,h6){ color:var(--on-dark); }
/* Muted/secondary text on dark surfaces reads as chrome, not dark grey. */
.hero .muted,.imgsection .muted,.tilesec .muted,.mhero .muted,.mkt .muted,
.cpage .muted,.lwu .muted,.rcard__body .muted,.site-footer .muted{ color:var(--on-dark-mute); }

/* ---- Light-dominant layout: general "dark section" becomes a panel band ---- */
.surface-dark{ background: var(--panel); color: var(--ink-body); border-top:1px solid var(--rule); }
.surface-dark :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.surface-dark p,.surface-dark li,.surface-dark dd{ color: var(--ink-body); }
.surface-dark .eyebrow{ color: var(--red); }
.surface-dark .eyebrow--ghost{ color: var(--ink-body); }
.surface-dark .lede{ color: var(--ink-body); }
.surface-dark .card{ background: var(--card); color: var(--ink); border:1px solid var(--rule); }

/* ---- Contrast fixes (whole-site audit, 5 Sep) -----------------------------
   A contrast pass caught text painted unreadable on its background. Root cause
   of most: the dark-surface text rule above bleeding into light cards, and my
   token swap darkening text that sits over photos. Fixes at the source. */

/* 1) Light cards inside dark sections keep INK text — the dark-surface heading
      rule must not reach them. (Fixes the "1/2/3" step headings that came out
      warm-white on white statcards, 1.14:1.) */
.statcard, .statcard p, .statcard :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.statcard p{ color: var(--ink-body); }
.imgsection .statcard :is(h1,h2,h3,h4), .imgsection .card, .imgsection .card :is(h1,h2,h3,h4){ color: var(--ink); }
/* The light "specs" island inside the dark hero stays ink, not on-dark. */
.mhero__specs, .mhero__specs *{ color: var(--ink); }
.mhero__specs small{ color: var(--ink-muted); }

/* 2) Listing/project card overlays: light text over the photo on a real scrim,
      never dark text on a bare image. */
/* Two-class specificity so a card inside a .surface-dark band still wins over
   `.surface-dark p` (which was painting the price <p> dark on the photo). */
.pcard, .pcard .pcard__over, .pcard .pcard__over *, .pcard .pcard__detail, .pcard .pcard__detail *{ color:#fff; }
.pcard__over{ background: linear-gradient(180deg, rgba(20,17,14,0) 0%, rgba(20,17,14,.36) 46%, rgba(20,17,14,.80) 100%); }
.pcard__detail{ background: linear-gradient(180deg, rgba(20,17,14,.12), rgba(20,17,14,.74)); }
.pcard__pill{ background:#fff; color:var(--ink); }

/* 3) Ghost button: ink on light bands (was white-on-cappuccino, 1.38:1);
      stays light only on genuinely dark surfaces. */
.btn-ghost{ color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--on-dark); }
.hero .btn-ghost,.mhero .btn-ghost,.imgsection .btn-ghost,.tilesec .btn-ghost,.mkt .btn-ghost,.cpage .btn-ghost,.site-footer .btn-ghost{ color: var(--on-dark); border-color: rgba(255,255,255,.72); }
.hero .btn-ghost:hover,.mhero .btn-ghost:hover,.imgsection .btn-ghost:hover,.tilesec .btn-ghost:hover{ background: rgba(255,255,255,.12); color:#fff; }

/* 4) Article dates / reading time were near-invisible grey (2.9:1). */
.acard__by, .acard__by span, .acard__read{ color: var(--ink-muted); }
.acard__by time{ color: var(--ink-muted); opacity: 1; }

/* 5) Booking hint on the dark enquiry card, and the ghost eyebrow on a band. */
.bookview__hint{ color: var(--on-dark); }
/* Listing detail: subtitle + feature-grid group heading used pale hardcoded
   greys — pin them to warm ink so they read on the cappuccino ground. */
.lhead__sub{ color: var(--ink-muted); }
.featgrid__gh{ color: var(--ink-body); }
/* Footer links: light on the dark footer (the warm-grey remap darkened them). */
.site-footer a, .footer-disclosure a{ color: var(--on-dark-mute); }
.site-footer a:hover, .footer-disclosure a:hover{ color: var(--on-dark); }
.footer-disclosure, .footer-disclosure p, .site-footer p, .site-footer li{ color: var(--on-dark-mute); }
/* White article cards keep ink headings even when they sit in a dark section. */
.acard, .acard :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.acard__read{ color: var(--ink-muted); }
.acard__cat{ color: var(--red); }
/* A plain (unclassed) prose link on a dark surface uses the lighter on-dark
   red so it reads — card/nav links keep their own styling. */
.hero a:not([class]),.mhero a:not([class]),.imgsection a:not([class]),.tilesec a:not([class]){ color: var(--red-on-dark); }
/* Team roster role sits red on a dark card — use the on-dark red so it reads. */
.roster__role{ color: var(--red-on-dark); }

/* ==== Rich listing card (.rcard) — photo carousel, badges, favourite, specs,
   district median, and an agent contact row. Details live in a body BELOW the
   image so nothing is crowded. Used by the listingCard macro site-wide. ==== */
.rcard{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--rule); overflow:hidden; transition:border-color .12s; }
.rcard:hover{ border-color:var(--ink); }
.rcard__media{ position:relative; aspect-ratio:4/3; background:var(--placeholder); overflow:hidden; }
.rcard__track{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -ms-overflow-style:none; scrollbar-width:none; }
.rcard__track::-webkit-scrollbar{ display:none; }
.rcard__slide{ flex:0 0 100%; scroll-snap-align:start; height:100%; }
.rcard__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.rcard__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:34px; height:34px; display:grid; place-items:center; border:0; background:rgba(255,255,255,.92); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s; }
.rcard:hover .rcard__nav{ opacity:1; }
.rcard__nav[hidden]{ display:none; }
.rcard__nav--prev{ left:8px; } .rcard__nav--next{ right:8px; }
@media (hover:none){ .rcard__nav{ opacity:1; } }
.rcard__count{ position:absolute; top:10px; right:10px; z-index:3; display:inline-flex; align-items:center; gap:5px; background:rgba(20,17,14,.72); color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:600; line-height:1; padding:4px 9px; border-radius:999px; }
.rcard__count::before{ content:""; width:11px; height:9px; border:1.5px solid currentColor; border-radius:2px; flex:none; }
.rcard__dots{ position:absolute; bottom:10px; left:0; right:0; z-index:3; display:flex; gap:5px; justify-content:center; pointer-events:none; }
.rcard__dot{ width:6px; height:6px; background:rgba(255,255,255,.5); }
.rcard__dot.is-on{ background:#fff; }
.rcard__badges{ position:absolute; top:10px; left:10px; z-index:3; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.rcard__badge{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; }
.rcard__badge--feat{ background:var(--ink); color:var(--on-dark); }
.rcard__badge--ready{ background:var(--card); color:var(--ink); border:1px solid var(--rule); }
.rcard__fav{ position:absolute; bottom:10px; right:10px; z-index:4; width:36px; height:36px; display:grid; place-items:center; border:0; background:rgba(255,255,255,.92); color:var(--ink); cursor:pointer; }
.rcard__fav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.rcard__fav[aria-pressed="true"] svg{ fill:var(--red); stroke:var(--red); }
.rcard__body{ position:static; display:flex; flex-direction:column; gap:6px; padding:16px 16px 12px; text-decoration:none; color:var(--ink); }
.rcard__body::after{ content:""; position:absolute; inset:0; z-index:1; }
.rcard__eyebrow{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.rcard__price{ margin:0; font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; }
.rcard__per{ font-size:.82rem; font-weight:500; color:var(--ink-muted); }
.rcard__title{ margin:0; font-family:var(--font-display); font-weight:600; font-size:1.02rem; line-height:1.3; color:var(--ink); }
/* A card is always a light surface — its headings stay ink even when the card
   sits inside a dark section (e.g. .cpage), where the dark-surface rule would
   otherwise paint them light-on-white. */
.rcard :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.rcard__specs{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-muted); }
.rcard__spec{ display:inline-flex; align-items:center; gap:4px; }
.rcard__spec svg{ width:14px; height:14px; }
.rcard__spec--type{ color:var(--red); }
.rcard__loc{ margin:0; font-size:.85rem; color:var(--ink-body); }
.rcard__median{ margin:0; font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); }
.rcard__foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px 14px; border-top:1px solid var(--rule); margin-top:auto; }

/* Commercial listings read as their own category: a cooler greige "panel"
   card instead of the warm cream homes use, with the two uppercase mono lines
   (specs, median) stepped from --ink-muted to --ink-body so they stay clear
   of AA on the deeper ground. The red type chip (Office / Retail / Warehouse)
   is the category tell. Scoped to /commercial/ via .grid--commercial only. */
.grid--commercial .rcard{ background:#E8E4DA; border-color:#CFC6B4; }
.grid--commercial .rcard__foot{ border-top-color:#CFC6B4; }
.grid--commercial .rcard__specs, .grid--commercial .rcard__median{ color:var(--ink-body); }
.rcard__agent{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-body); min-width:0; }
.rcard__avatar{ width:30px; height:30px; flex:none; }
.rcard__avatar polygon{ fill:var(--red); }
/* Book-a-viewing is now an icon, red-filled so it still reads as the primary
   action next to the outline save / account icons. */
.icon-btn--book{ background:var(--red); color:#fff; }
.icon-btn--book:hover{ background:var(--red-deep); }
.icon-btn--book svg{ width:20px; height:20px; }
/* Kiri concierge launcher: the glossy MFC-red speech-bubble mark (house roofline
   + Kiri wordmark), drawn as SVG so its bubble shape and gloss are paths — immune
   to the flat radius/shadow rule. The button is a transparent, floated wrapper. */
.kiri__launch{ background:transparent !important; border:0 !important; padding:0 !important; width:auto !important; height:auto !important; box-shadow:none !important; display:inline-flex !important; align-items:center; justify-content:center; transition:transform .12s ease; }
.kiri__launch::before{ display:none !important; }
.kiri__launch span{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
.kiri__launch svg, .kiri__launch .kiri__mark{ position:relative; width:78px !important; height:78px !important; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
.kiri__launch:hover{ transform:translateY(-2px) scale(1.04); }
.kiri__launch:hover svg, .kiri__launch:hover .kiri__mark{ filter:drop-shadow(0 10px 20px rgba(0,0,0,.36)); }

/* ---- Listing detail gallery (IPS-style single-frame viewer) ---- */
/* The gallery is rendered outside .container (full-bleed), which stretched the
   photo the full width of the viewport. Constrain it to the SAME content width
   as the listing text and centre it, so it is never wider than the listing and
   never touches the screen edges. */
.lgv{ display:flex; flex-direction:column; gap:10px; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); box-sizing:border-box; }
/* A fixed, reduced viewing box; the photo is shown WHOLE inside it (contain),
   never cropped or stretched. Letterbox sits on the dark ground. Arrows + count
   are absolutely placed inside this box. */
.lgv__stage{ position:relative; background:#0f1116; overflow:hidden; aspect-ratio:16/10; max-height:min(62vh,520px); }
.lgv__frame{ display:block; height:100%; }
.lgv__frame[hidden]{ display:none; }
.lgv__frame img, .lgv__frame picture{ display:block; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; user-drag:none; user-select:none; }
.lgv__nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50% !important; border:0; background:rgba(26,23,20,.5); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:3; transition:background .15s ease; }
.lgv__nav:hover{ background:var(--red); }
.lgv__nav svg{ width:22px; height:22px; }
.lgv__nav--prev{ left:14px; } .lgv__nav--next{ right:14px; }
.lgv__count{ position:absolute; left:14px; bottom:14px; z-index:3; background:rgba(26,23,20,.72); color:#fff; font:600 12px/1 var(--font-mono); padding:6px 10px; }
.lgv__thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.lgv__thumb{ flex:0 0 auto; width:96px; height:66px; padding:0; border:2px solid transparent; background:none; cursor:pointer; overflow:hidden; opacity:.6; transition:opacity .15s ease, border-color .15s ease; }
.lgv__thumb img, .lgv__thumb picture{ width:100%; height:100%; object-fit:cover; display:block; }
.lgv__thumb.is-on{ opacity:1; border-color:var(--red); }
.lgv__thumb:hover{ opacity:1; }

/* Off-plan project figures inside the rich card (yields / completion / sizes). */
.rcard__figs{ margin:4px 0 0; display:grid; gap:2px; font-size:.76rem; }
.rcard__figs > div{ display:flex; justify-content:space-between; gap:10px; }
.rcard__figs dt{ margin:0; color:var(--ink-muted); }
.rcard__figs dd{ margin:0; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- Article right rail: off-plan projects under $200k, compact cards ---- */
.article-rail__h{ font:700 12px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 12px; padding-bottom:10px; border-bottom:2px solid var(--red); }
.article-rail__cards{ display:grid; gap:10px; }
.article-rail__all{ display:inline-block; margin-top:12px; font:600 12px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--red); text-decoration:none; }
.article-rail__all:hover{ color:var(--red-deep); }
.mcard{ display:grid; grid-template-columns:80px 1fr; gap:10px; align-items:stretch; background:var(--card); border:1px solid var(--rule); text-decoration:none; color:var(--ink); overflow:hidden; }
.mcard__media img, .mcard__media picture{ width:80px; height:80px; object-fit:cover; display:block; }
.mcard__body{ display:flex; flex-direction:column; justify-content:center; gap:1px; padding:8px 10px 8px 0; min-width:0; }
.mcard__eyebrow{ font:700 9px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.mcard__price{ font:700 15px/1.1 var(--font-mono); color:var(--ink); }
.mcard__name{ font-size:12px; line-height:1.25; color:var(--ink-body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mcard__loc{ font-size:11px; color:var(--ink-muted); margin-top:1px; }
.mcard:hover{ border-color:var(--red); }
@media (min-width:1080px){
  .article-wrap--railed{ display:grid; grid-template-columns:minmax(0,720px) 300px; gap:clamp(28px,3.5vw,56px); justify-content:center; align-items:start; max-width:1140px; margin:0 auto; padding:0 clamp(16px,4vw,32px); }
  .article-wrap--railed > .article{ max-width:none; margin:0; width:auto; }
  .article-rail{ position:sticky; top:88px; }
}
@media (max-width:1079px){
  .article-rail{ max-width:760px; margin:10px auto 0; padding:0 clamp(16px,5vw,24px); }
  .article-rail__cards{ grid-template-columns:1fr 1fr; }
}
.rcard__contact{ display:inline-flex; gap:6px; flex:none; }
.rcard__contact a{ width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--rule); color:var(--ink); }
.rcard__contact a:hover{ border-color:var(--red); color:var(--red); }
.rcard__contact svg{ width:15px; height:15px; }

/* ============================================================================
   LIGHT BACKGROUNDS. The redesign's whole point: get off black. A background is
   never solid black — that's reserved for text, eyebrows, accents, the footer,
   and photo bands. These page/section wrappers were `background: var(--ink)`;
   flip them to the cappuccino ground with ink text.
   ============================================================================ */
.cpage, .mkt, .lwu, .dstrip{ background: var(--ground); color: var(--ink-body); }
.cpage :is(h1,h2,h3,h4,h5,h6), .mkt :is(h1,h2,h3,h4,h5,h6),
.lwu :is(h1,h2,h3,h4,h5,h6), .dstrip :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.cpage .muted, .mkt .muted, .lwu .muted, .dstrip .muted{ color: var(--ink-muted); }
.cpage .eyebrow, .mkt .eyebrow, .lwu .eyebrow{ color: var(--red); }
/* List With Us was a dark panel; relit to the light page its body copy was left
   as faint white (rgba(246,246,246,.78)) and vanished on the tan. Dark text now. */
.lwu__p{ color: var(--ink-body, #4b5563) !important; }
.lwu__title, .lwu__talk{ color: var(--ink, #16181d) !important; }
/* Same dark-era leftovers on the other relit sections: concierge intro claim,
   service cards, and the market lede. Dark text + white cards on the light page. */
.cpage .cpanel__claim, .cpage .svccard__h, .mkt .svccard__h{ color: var(--ink, #16181d) !important; }
.cpage .cpanel__sub, .cpage .svccard__t, .mkt .svccard__t, .mkt .mkt__lede, .cpage .mkt__lede{ color: var(--ink-body, #4b5563) !important; }
.cpage .svccard, .mkt .svccard{ background: #fff; border: 1px solid var(--rule, #e3e5e9); }
/* A hero band carries a background photo, so its own text stays light over the
   image even though the page around it is now light. */
.cband--hero, .cband--hero :is(h1,h2,h3,h4), .cband--hero p, .cband--hero .muted{ color: var(--on-dark); }

/* ============================================================================
   THE "DARK PAGE" THEME, RELIT. rent / buy / projects / about / services /
   guides / contact / interactive-map set body.page-dark--full, which painted
   <main> black (styles.css:288) and turned every run of text light. The whole
   point of the redesign is the opposite: a light cappuccino ground with ink
   text. Repaint the ground and send all that light text back to ink here, in
   one place, so it can't drift out of sync page by page. Photo bands keep their
   own light-on-image text (handled above); the footer stays dark on purpose.
   ============================================================================ */
.page-dark--full main{ background: var(--ground); color: var(--ink-body); }
.page-dark--full :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.page-dark--full .cband--hero :is(h1,h2,h3,h4){ color: var(--on-dark); }   /* except over a photo */
.page-dark--full .eyebrow{ color: var(--red); }
.page-dark--full .breadcrumbs, .page-dark--full .breadcrumbs a, .page-dark--full .breadcrumbs li{ color: var(--ink-muted); }
.page-dark--full .breadcrumbs a:hover{ color: var(--red); }
.page-dark--full .notice{ background: var(--panel); border-color: rgba(26,23,20,.14); color: var(--ink-body); }
.page-dark--full .answer-first{ color: var(--ink-body); }
.page-dark--full .chip{ border-color: rgba(26,23,20,.16); color: var(--ink-body); }
.page-dark--full .chip:hover{ border-color: var(--red); color: var(--red); }
.page-dark--full .chip.is-active{ background: var(--red); border-color: var(--red); color: #fff; }
.page-dark--full .faq details{ border-color: rgba(26,23,20,.14); }
.page-dark--full .faq summary{ color: var(--ink); }
.page-dark--full .faq .faq__a{ color: var(--ink-body); }
.page-dark--full .toc-inline{ color: var(--ink-muted); }
.page-dark--full .key-facts{ background: var(--panel); border-color: rgba(26,23,20,.14); }
.page-dark--full .key-facts dt{ color: var(--ink-muted); }
.page-dark--full .key-facts dd, .page-dark--full .key-facts dd a{ color: var(--ink); }
.page-dark--full .key-facts dd a:hover{ color: var(--red); }
.page-dark--full .form-note, .page-dark--full .form-note a{ color: var(--ink-muted); }
.page-dark--full .form-note a:hover{ color: var(--red); }
.page-dark--full .prose a, .page-dark--full .faq__a a{ color: var(--red); text-underline-offset: 2px; }
.page-dark--full .prose a:hover, .page-dark--full .faq__a a:hover{ color: var(--red-deep); }

/* DARK PHOTO BANDS keep light text. The hero band (.cband), and the off-plan
   "how it works" / "payment" bands (.ophow / .oppay) sit over dark imagery, so
   their headings and ledes stay light — the site relight had darkened them to
   ink, which read as dark-on-dark. The white cards INSIDE these bands (.opstep)
   are unaffected and keep their ink text. */
/* Photo bands keep light text ONLY when a photo is actually behind them. The
   band markup includes the image conditionally, so gate on :has(): with a photo
   the heading/lede stay light; without one (the service pages) they go to ink.
   This is exactly what was reading as light-on-light across /services/*. */
.page-dark--full .cband:has(.cband__media) :is(.cband__title,.cband__lede,.cband__intro,.cband__note){ color:#f6f6f6; }
.page-dark--full .ophow:has(.ophow__bg) :is(.opsec__h,.ophow__askh),
.page-dark--full .oppay:has(.oppay__bg) .opsec__h{ color:#f6f6f6; }
.page-dark--full :is(.cband:has(.cband__media), .ophow:has(.ophow__bg), .oppay:has(.oppay__bg)) .eyebrow{ color: var(--red-on-dark); }
/* The office page's intro band (.ofc) and brief band (.brief) are ALSO dark
   photo bands, so their overlaid copy must stay light — otherwise the relight
   below sinks the title, body, address and service list into the cityscape. */
.page-dark--full .ofc:has(.ofc__bg) :is(.ofc__title,.ofc__p,.ofc__address,.ofc__hours,.ofc__label,.ofc__services,.ofc__services li){ color:#f6f6f6 !important; }
.page-dark--full .ofc:has(.ofc__bg) .ofc__label span{ color:#f6f6f6 !important; }
.page-dark--full .brief:has(.brief__bg) .brief__h{ color:#f6f6f6 !important; }
.page-dark--full :is(.ofc:has(.ofc__bg), .brief:has(.brief__bg)) .eyebrow{ color: var(--red-on-dark) !important; }

/* Service pages sit on the light ground: all .cpage content is ink, and the
   old dark-theme service components (.svccard, .cpanel, .croll) come back to
   ink too. The photo bands above out-rank this via :has(), so they stay light. */
.page-dark--full .cpage :is(p,li,dd,dt,span,summary,label,blockquote,figcaption){ color: var(--ink-body); }
.page-dark--full .cpage :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.page-dark--full .cpage .eyebrow, .page-dark--full .cpanel__kicker{ color: var(--red); }
.page-dark--full .svccard{ background: var(--card); border:1px solid var(--rule); }
.page-dark--full .svccard :is(h1,h2,h3,h4,h5,h6){ color: var(--ink); }
.page-dark--full .svccard__t{ color: var(--ink-body); }
.page-dark--full :is(.croll__count,.svccard__n,.svccard__go){ color: var(--red); }
.page-dark--full .svccard:hover .svccard__n{ color: var(--red-deep); }
/* The services INDEX cards are image TILES with a dark photo scrim, so their
   text must stay WHITE. The three relight rules above are meant for the solid
   cards on the service detail pages; they were turning these tiles' titles and
   body near-black over a dark photo (unreadable). Re-assert the tile treatment
   for any .svccard that carries a photo layer. */
.page-dark--full .svccard:has(.svccard__media){ background: var(--ink); }
.page-dark--full .svccard__media + .svccard__body :is(h1,h2,h3,h4,h5,h6){ color: #fff !important; }
.page-dark--full .svccard__media + .svccard__body .svccard__t{ color: rgba(246,246,246,.85) !important; }
.page-dark--full .ghostbtn{ color: var(--ink); border-color: rgba(26,23,20,.28); }

/* --- Services / concierge relight -------------------------------------------
   These pages were built for a DARK background: the cards (.croll / .cpanel)
   used near-transparent fills with white / champagne text, which all but
   vanished once the page was relit to the light tan. Put them on a light-grey
   page with solid white cards, dark substantial text and defined borders so the
   whole thing reads clearly. Ungated + later in the file, so it wins. */
.cpage{ background:#eef0f2; }
.cpage .cpanel,
.cpage .croll{ background:#fff; border:1px solid #e3e5e9; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.cpage .crolls__h,
.cpage .croll__title{ color:var(--ink,#16181d); }
.cpage .croll__title{ font-weight:800; letter-spacing:-.01em; }
.cpage .cpanel__sub,
.cpage .croll__line{ color:var(--ink-body,#4b5563); }
.cpage :is(.croll__count,.svccard__n,.svccard__go){ color:var(--red); font-weight:700; }
.cpage .croll__icon{ background:#f3f4f6; border:1px solid #e3e5e9; }
.cpage .croll__icon svg{ color:var(--red); }
.cpage .croll__list li{ background:#f3f4f6; border:1px solid #e3e5e9; color:var(--ink-body,#4b5563); }
.cpage .croll:hover{ border-color:var(--red); }
.cpage .croll[open]{ border-color:var(--red); }
.dtile{ background: var(--ink); }
.page-dark--full :is(.team__lede,.mkt__lede,.svc__lede){ color: var(--ink-body); }
/* The interactive map reads brighter now: the photo band gets a light wash and
   the area list sits on a white card with dark text, so it matches the listing
   pages instead of a near-black panel. Overlay + card overrides beat the base
   (dark-assuming) .imap rules in styles.css by specificity and load order. */
.imap__bg::after{ background: rgba(247,248,250,.94); }
.imap__list{ background:#fff; border-color: var(--grey-200,#e6e8ec); box-shadow:0 1px 3px rgba(16,24,40,.06); }
.imap :is(h1,h2,h3,h4,h5,h6),
.page-dark--full .imap :is(h1,h2,h3,h4,h5,h6){ color: var(--ink,#16181d); }
.imap__h{ color: var(--ink,#16181d); }
.imap__areas a,
.page-dark--full .imap__areas a{ color: var(--ink-body,#374151); border-color: rgba(16,24,40,.10); }
.imap__areas a:hover,
.page-dark--full .imap__areas a:hover{ color: var(--ink,#16181d); }
.imap__areas a strong,
.page-dark--full .imap__areas a strong{ color: var(--red); }
.imap__empty, .imap__note,
.page-dark--full .imap__empty, .page-dark--full .imap__note{ color: rgba(16,24,40,.6); }
/* Map layers coloured by source: commercial red, co-broke & auction green,
   off-plan blue — on the active tab and its pins. */
.imap__tab[data-map-tab="homes"].is-on{ background:#157a3e; border-color:#157a3e; color:#fff; }
.imap__tab[data-map-tab="commercial"].is-on{ background:var(--red); border-color:var(--red); color:#fff; }
.imap__tab[data-map-tab="offplan"].is-on{ background:#1f56a6; border-color:#1f56a6; color:#fff; }
#listings-map[data-map-active="homes"] .imap__pin{ background:#157a3e; }
#listings-map[data-map-active="commercial"] .imap__pin{ background:var(--red); }
#listings-map[data-map-active="offplan"] .imap__pin{ background:#1f56a6; }
.imap__n{ opacity:.82; }
.imap__tab.is-on .imap__n{ opacity:1; color:#fff !important; font-weight:700; }

/* Logged-in agents work from proposals, not the client "Save": hide the
   Save/bookmark button in a listing's action bar for them, leaving Proposal,
   Share to client and Print. The bookmark up in the header still opens their
   proposal cart. (Regular visitors keep Save.) */
.is-agent .lacts [data-fav]{ display:none !important; }

/* ---- Enquiry "brief" form (off-plan / guides / office) ----
   It was a dark card; the site relight only half-lit it, which read as broken.
   Make it one clean light card: the dark Call/WhatsApp/Telegram/WeChat bar sits
   flush as the card's header, the form body is light with bordered inputs. */
.brief__h{ color:var(--ink) !important; }
.brief .msgrow{ max-width:640px; margin:0 auto !important; border:0 !important; }
.brief__form{ margin-top:0 !important; background:var(--card) !important; border:1px solid var(--rule); }
.brief__form input{ border:1px solid var(--rule) !important; background:#fff !important; }
.brief__field > label, .brief__field legend{ color:var(--ink-body) !important; }
.brief__field legend span[aria-hidden]{ color:var(--red); }
.page-dark--full .key-facts dt{ color: #5a5147; }
/* Guides district map: zones were cool #6f6f6f with white labels (3.9:1). Warm
   them and darken to a slate that carries white labels at AA, and relight the
   fallback list + captions that sat light on the now-light page. */
.dmap__zone path{ fill: #5f564b; stroke: #2E2A25; }
.page-dark--full .dmap a{ color: var(--ink-body); border-color: rgba(26,23,20,.10); }
.page-dark--full .dmap a:hover{ color: var(--red); }
.page-dark--full :is(.dmapfig__cap, .dmapfig__readout span){ color: var(--ink-muted); }
.page-dark--full :is(.dmapfig__readout, .dmapfig__readout strong){ color: var(--ink); }
.eyebrow--ghost{ color: var(--ink-body); }

/* 6) A red eyebrow on a dark surface fails (2.5:1) — use the lighter on-dark
      red there so it stays a red accent but reads (≈6.8:1 on soft-black). */
.hero .eyebrow,.mhero .eyebrow,.imgsection .eyebrow,.tilesec .eyebrow,.pcard .eyebrow{ color: var(--red-on-dark); }

/* ============================================================================
   PRINT — a compact one-page property sheet for a client handout. Residential
   (listing.njk) and off-plan (project.njk) share the same components, so this
   covers both. "Print" (data-print -> window.print()) produces it; the print
   dialog's "Save as PDF" gives the PDF. Shows: photo, price, location, the key
   facts (size, completion, gross/net yield, title, status), a short summary,
   the features, and MFC contact — nothing else. (Added 6 Sep, by request.)
   ============================================================================ */
@media print {
  .site-header, .fullmenu, .site-footer, .social-rail, .skip-link, .savecard,
  .kiri, .kiri__launch, .breadcrumbs, .lacts, [data-print], [data-enquiry],
  .surface-dark, .section--tight, .lnote, .lref, .toc-inline, .lplan,
  .lgv__nav, .lgv__count, .lgv__thumbs, .lgv__dots,
  .lmap, #listings-map, .leaflet-container, iframe, .map, script { display: none !important; }

  html, body { background:#fff !important; color:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .container { max-width:none !important; width:auto !important; margin:0 !important; padding:0 !important; }

  .lhead::before { content:"MFC INVESTS  ·  Property Information"; display:block;
    font:700 11pt/1 "Inter Tight", Georgia, sans-serif; letter-spacing:.06em; text-transform:uppercase;
    color:#A8202B; border-bottom:2px solid #A8202B; padding-bottom:.18cm; margin-bottom:.3cm; }
  .lhead { padding:0 !important; border:0 !important; background:none !important; }
  .lhead__inner { display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:.6cm !important; padding:0 !important; }
  .lhead__main :is(h1){ font-size:18pt !important; color:#000 !important; margin:0 !important; line-height:1.15 !important; }
  .lhead__loc { font-size:10pt !important; color:#333 !important; margin:.1cm 0 0 !important; }
  .lhead__price { text-align:right !important; }
  .lhead__tag { font-size:8pt !important; color:#666 !important; text-transform:uppercase; margin:0 !important; }
  .lhead__amount { font-size:16pt !important; color:#A8202B !important; font-weight:700; margin:0 !important; }
  .lhead__sub { font-size:9pt !important; color:#333 !important; margin:0 !important; }

  .lgv, .lgv__stage, .lgv__frames { display:block !important; overflow:visible !important; height:auto !important; max-height:none !important; padding:0 !important; margin:.3cm 0 !important; }
  .lgv__frame { display:none !important; }
  .lgv__frame:first-of-type, .lgv__frame[data-gframe="0"] { display:block !important; }
  .lgv img, .lgv picture { display:block !important; width:100% !important; max-height:8cm !important; height:auto !important; object-fit:contain !important; page-break-inside:avoid; border:1px solid #ddd; }
  .lsoon { max-height:8cm !important; overflow:hidden !important; }

  .specstrip { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:.15cm .4cm !important;
    border:1px solid #bbb !important; padding:.28cm .4cm !important; margin:.3cm 0 !important; page-break-inside:avoid; background:#fafafa !important; }
  .specstrip *, .specstrip :is(dt,dd,span,b,strong){ color:#000 !important; }

  .lbody { display:block !important; padding:0 !important; }
  .lbody__main { width:100% !important; }
  .lbody h2 { font-size:11pt !important; color:#000 !important; margin:.35cm 0 .12cm !important; }
  .lede { font-size:10pt !important; color:#000 !important; margin:0 0 .2cm !important; }
  .prose { font-size:9.5pt !important; color:#000 !important; page-break-inside:avoid; }
  .prose > *:nth-child(n+4){ display:none !important; }
  .lbullets { columns:2; column-gap:.6cm; font-size:9pt !important; color:#000 !important; }
  .featgrid { page-break-inside:avoid; font-size:9pt !important; }
  .featgrid * { color:#000 !important; }

  .lcard { position:static !important; box-shadow:none !important; border:1px solid #bbb !important; background:#fff !important;
    color:#000 !important; margin:.3cm 0 0 !important; padding:.3cm !important; page-break-inside:avoid; max-width:none !important; width:auto !important; }
  .lcard * { color:#000 !important; }
  .lcard__qr { display:flex !important; }

  a[href]::after { content:'' !important; }
  @page { size:A4; margin:1.2cm; }
}