@charset "UTF-8";
/* =====================================================================
   MyvanCMS — MPDI design system          public/assets/mpdi.css
   ---------------------------------------------------------------------
   Owner: Chul (Fame Guild). Loaded LAST in app/Views/layouts/public.php so it
   wins every equal-specificity tie against palace.css / pages.css / hero-v2.css.

   WHAT THIS FILE IS
     The single stylesheet for the Myvan Properties and Development Inc. (MPDI)
     rebrand described in scratchpad/mpdi-homepage-spec.txt:
       - tokens (maroon #440101, ink #18181B, muted #71717A, bg #F9F9F9)
       - Poppins everywhere
       - GLOBAL zero border-radius (the one exception is .mpdi-round)
       - the .mpdi-* component vocabulary the home page markup uses
       - restyles of retained Palace hooks (header, footer talk band, buttons)

   HOW TO READ IT
     Each block is headed by the spec section it implements. Class names follow
     analysis-gap.json cssClassContract exactly; do not rename without telling
     Yerin (PHP) and Taegyu (JS), who emit/toggle them.

   STATE HOOKS EXPECTED FROM OTHERS
     body.has-hero-overlay            home page (existing)
     .site-header.is-stuck            myvan.js, scrollY > 10 (existing)
     body.mpdi-bar-visible            mpdi-home.js while .mpdi-sticky-bar.is-visible
     .mpdi-sticky-bar.is-visible      mpdi-home.js after the hero scrolls out
     .mpdi-dd--open                   mpdi-home.js custom dropdown open
     .mpdi-dd__value.is-placeholder   mpdi-home.js: nothing selected yet
     select[data-mpdi-dd].is-enhanced mpdi-home.js: native select visually hidden once the
                                      listbox is mounted (or wrap it in .mpdi-dd-mounted)
     .mpdi-dd__item.is-focused        mpdi-home.js keyboard cursor inside the listbox
     .mpdi-pick__card.is-open         mpdi-home.js tap-to-expand ([aria-expanded="true"] also works)
     .mpdi-pick.no-motion             mpdi-home.js under prefers-reduced-motion
     .mpdi-map__pin.is-active         mpdi-home.js hover/focus highlight (.is-hot alias)
     .hero-v2.mpdi-hero               Yerin adds .mpdi-hero next to .hero-v2 (+ .has-video when a video/iframe exists)
     .brand__logo--dark / --light     Yerin (optional): two <img> in .brand; light one shows over the video
     #myvanConsent (.d-none)          cookie_consent.php (existing) — drives the mobile FAB stack
     .mv-chat / #myvanChat            chat_widget.php (existing) — chat.css loads AFTER this file,
                                      hence the .mv-chat .mv-chat__* selectors in section 18

   OPTIONAL SUB-PARTS (styled here, not in the contract; emit if useful)
     .mpdi-section--alt / --dark, .mpdi-section__head--center
     .mpdi-h2--sentence, .mpdi-eyebrow--arrow, .mpdi-lead, .mpdi-btn--block, .mpdi-btn__label
     .hero-v2__module > .hero-v2__panel + .hero-v2__aside, .hero-v2__title, .hero-v2__lead
     .mpdi-dd__value, .mpdi-dd__chevron, .mpdi-dd__group-label
     .mpdi-sticky-bar__field
     .mpdi-props__title, .mpdi-props__cta
     .mpdi-featured__body, .mpdi-featured__title, .mpdi-featured__loc
     .mpdi-about__body, __intro, __blocks, __label, __list, __cta, __badge-num, __badge-label
     .mpdi-tour__poster, .mpdi-tour__poster-name
     .mpdi-agents__meta, .mpdi-agents__cta
     .mpdi-articles__body, .mpdi-articles__cat
     .mpdi-qc__inner, .mpdi-qc__head, .mpdi-qc__hint
     .mpdi-map-wrap (+ --light), .mpdi-map__dot, .mpdi-map__ring
   ===================================================================== */


/* =====================================================================
   0. TOKENS  (spec: Global Brand & Design Tokens; DECISIONS.md palette)
   ===================================================================== */
:root{
  /* MPDI brand */
  --mp-brand:#440101;
  --mp-brand-dark:#2E0000;
  --mp-brand-soft:#F5EDED;        /* tint for hover washes / soft chips */
  --mp-brand-overlay:rgba(68,1,1,.45);
  --mp-ink:#18181B;
  --mp-body:#3F3F46;              /* running copy: 10.4:1 on #fff */
  --mp-muted:#71717A;             /* 4.83:1 on #fff, 4.59:1 on --mp-bg */
  --mp-line:#E4E4E7;
  --mp-bg:#F9F9F9;
  --mp-white:#FFFFFF;
  --mp-on-dark:rgba(255,255,255,.78);   /* ~#C9C9CB on ink: 11:1 */

  /* type */
  --mp-font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mp-fs-xs:.75rem;      /* 12  dates, badges */
  --mp-fs-sm:.875rem;     /* 14  buttons, meta, excerpts */
  --mp-fs-base:1rem;      /* 16  body */
  --mp-fs-md:1.125rem;    /* 18  card titles, agent names */
  --mp-fs-lg:1.375rem;    /* 22  h3 in props cards */
  --mp-fs-h2:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);   /* 28 - 40 */
  --mp-fs-h1:clamp(2rem,1rem + 3.6vw,4.25rem);        /* 32 - 68 */
  --mp-lh-tight:1.15;
  --mp-lh-body:1.7;
  --mp-track-btn:.04em;
  --mp-track-label:.08em;

  /* spacing scale (4-based) */
  --mp-s1:4px;  --mp-s2:8px;  --mp-s3:12px; --mp-s4:16px; --mp-s5:24px;
  --mp-s6:32px; --mp-s7:48px; --mp-s8:64px; --mp-s9:88px;
  --mp-section-y:var(--mp-s9);
  --mp-gap:var(--mp-s5);

  /* motion */
  --mp-ease:cubic-bezier(.2,.7,.2,1);
  --mp-dur:.22s;

  /* layers */
  --mp-z-header:1001;
  --mp-z-sticky:1002;
  --mp-z-dd:1045;                 /* above #myvanConsent (.fixed-bottom 1030) and the FAB, below the dialog */
  --mp-z-fab:1040;
  --mp-z-dialog:1050;

  /* ---- retarget the Palace + hero-v2 + page-hero tokens so every inner page
          re-themes without touching palace.css ------------------------ */
  --pl-brand:var(--mp-brand);
  --pl-brand-dark:var(--mp-brand-dark);
  --pl-brand-soft:var(--mp-brand-soft);
  --pl-ink:var(--mp-ink);
  --pl-body:var(--mp-body);
  --pl-panel:var(--mp-bg);
  --pl-line:var(--mp-line);
  --pl-navy:var(--mp-ink);
  --pl-navy-2:#101012;
  --pl-sky:#F4F4F5;
  --hero-navy:var(--mp-brand);
  --hero-scrim-left:rgba(46,4,4,.78);
  --hero-scrim-mid:rgba(68,1,1,.55);
  --hero-scrim-right:var(--mp-brand-overlay);
  --ph-navy:#2E0404;
  --ph-scrim-left:rgba(46,4,4,.86);
  --ph-scrim-mid:rgba(46,4,4,.70);
  --ph-scrim-right:rgba(46,4,4,.48);

  /* Bootstrap 5.3 */
  --bs-body-font-family:var(--mp-font);
  --bs-body-color:var(--mp-body);
  --bs-primary:#440101;
  --bs-primary-rgb:68,1,1;
  --bs-link-color:#440101;
  --bs-link-color-rgb:68,1,1;
  --bs-link-hover-color:#18181B;
  --bs-link-hover-color-rgb:24,24,27;
  --bs-border-radius:0;
  --bs-border-radius-sm:0;
  --bs-border-radius-lg:0;
  --bs-border-radius-xl:0;
  --bs-border-radius-xxl:0;
  --bs-border-radius-2xl:0;
  --bs-border-radius-pill:0;
}


/* =====================================================================
   1. GLOBAL RESETS  (spec: Strict Branding rules 1-2)
   ===================================================================== */

/* 1a. Sharp edges. Every element, every pseudo, including Bootstrap .btn /
       .form-select / .card / .dropdown-menu / .badge, the chat FAB, scroll-top
       and footer social squares. !important is deliberate: this is a brand law,
       and third-party CSS (Bootstrap, Pannellum, Leaflet) sets radii we do not
       control. Only .mpdi-round survives (agent headshots). */
*,*::before,*::after{border-radius:0 !important}
.mpdi-round,
.mpdi-round img,
.mpdi-round::before,
.mpdi-round::after{border-radius:50% !important}

/* 1b. Poppins. Body inherits via the token; these are the places palace.css,
       pages.css and browsers set an explicit family that would not inherit. */
body,
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.btn,button,input,select,textarea,optgroup,option,
.leaflet-container,
.talk-band__title,
.hero-v2 h1,
.proj-hero__name,
.mv-chat{font-family:var(--mp-font)}

body{color:var(--mp-body);line-height:var(--mp-lh-body)}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--mp-ink);letter-spacing:0}

/* pages.css uses Playfair italic for the project-page display name */
.proj-hero__name{font-style:normal;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}

/* Palace's "//" eyebrow prefix has no place in the MPDI language. */
.eyebrow::before{content:none}
.eyebrow{color:var(--mp-brand);letter-spacing:var(--mp-track-label)}

/* Focus ring, one style everywhere (keyboard only). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mp-brand);
  outline-offset:3px;
}
.mpdi-section--dark :where(a,button,[tabindex]):focus-visible,
.mpdi-sticky-bar :where(a,button,select):focus-visible,
.talk-band :where(a,button):focus-visible,
body.has-hero-overlay .site-header:not(.is-stuck) :where(a,button):focus-visible{
  outline-color:#fff;
}

/* Selection colour in brand */
::selection{background:var(--mp-brand);color:#fff}


/* =====================================================================
   2. BUTTON SYSTEM  (spec: Button Typography — bold, uppercase, sharp)
   ===================================================================== */
.mpdi-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;
  padding:0 var(--mp-s6);
  font-family:var(--mp-font);
  font-weight:700;font-size:var(--mp-fs-sm);line-height:1.2;
  text-transform:uppercase;letter-spacing:var(--mp-track-btn);
  text-decoration:none;white-space:nowrap;
  border:2px solid transparent;
  cursor:pointer;
  transition:background-color var(--mp-dur) var(--mp-ease),color var(--mp-dur) var(--mp-ease),border-color var(--mp-dur) var(--mp-ease);
}
.mpdi-btn i,.mpdi-btn svg{font-size:1.1em;line-height:1;flex:0 0 auto}
.mpdi-btn:hover,.mpdi-btn:focus-visible{text-decoration:none}

.mpdi-btn--primary{background:var(--mp-brand);color:#fff;border-color:var(--mp-brand)}
.mpdi-btn--primary:hover,.mpdi-btn--primary:focus-visible{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}

/* on the ink-coloured dark band the ink hover state would vanish into the
   background: invert to white / maroon there instead. */
.mpdi-section--dark .mpdi-btn--primary:hover,
.mpdi-section--dark .mpdi-btn--primary:focus-visible,
.mpdi-section--dark .mpdi-btn--chat:hover,
.mpdi-section--dark .mpdi-btn--chat:focus-visible{background:#fff;border-color:#fff;color:var(--mp-brand)}

.mpdi-btn--light{background:#fff;color:var(--mp-brand);border-color:#fff}
.mpdi-btn--light:hover,.mpdi-btn--light:focus-visible{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}

.mpdi-btn--outline{background:transparent;color:var(--mp-brand);border-color:var(--mp-brand)}
.mpdi-btn--outline:hover,.mpdi-btn--outline:focus-visible{background:var(--mp-brand);color:#fff}
/* ghost-on-dark: the same outline modifier automatically inverts inside a dark
   or maroon container, so Yerin never needs a second class. */
.mpdi-section--dark .mpdi-btn--outline,
.mpdi-sticky-bar .mpdi-btn--outline,
.talk-band .mpdi-btn--outline,
.mpdi-hero .mpdi-btn--outline{color:#fff;border-color:#fff}
.mpdi-section--dark .mpdi-btn--outline:hover,
.mpdi-sticky-bar .mpdi-btn--outline:hover,
.talk-band .mpdi-btn--outline:hover,
.mpdi-hero .mpdi-btn--outline:hover,
.mpdi-section--dark .mpdi-btn--outline:focus-visible,
.mpdi-sticky-bar .mpdi-btn--outline:focus-visible,
.talk-band .mpdi-btn--outline:focus-visible,
.mpdi-hero .mpdi-btn--outline:focus-visible{background:#fff;color:var(--mp-brand)}

/* Messenger CTA: primary-coloured with the icon leading. Always target=_blank. */
.mpdi-btn--chat{background:var(--mp-brand);color:#fff;border-color:var(--mp-brand)}
.mpdi-btn--chat:hover,.mpdi-btn--chat:focus-visible{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}
.mpdi-btn--chat i{font-size:1.15em}

/* Icon-only square (agent card shortcut, sticky-bar mobile). 44px tap target. */
.mpdi-btn--icon{
  width:44px;height:44px;min-height:44px;padding:0;gap:0;
  font-size:1.125rem;
}
.mpdi-btn--icon i{font-size:inherit}

.mpdi-btn--block{width:100%}
.mpdi-btn[disabled],.mpdi-btn[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* Legacy Palace / Bootstrap buttons pulled onto the same rules so inner pages
   comply without a markup pass. */
.btn{
  font-family:var(--mp-font);
  font-weight:700;font-size:var(--mp-fs-sm);
  text-transform:uppercase;letter-spacing:var(--mp-track-btn);
  padding:.8rem 1.6rem;
  transition:background-color var(--mp-dur) var(--mp-ease),color var(--mp-dur) var(--mp-ease),border-color var(--mp-dur) var(--mp-ease);
}
.btn-sm{padding:.5rem 1rem;font-size:var(--mp-fs-xs)}
.btn-pl{background:var(--mp-brand);color:#fff}
.btn-pl:hover,.btn-pl:focus-visible{background:var(--mp-ink);color:#fff}
.btn-pl-soft{background:transparent;color:var(--mp-brand);box-shadow:inset 0 0 0 2px var(--mp-brand)}
.btn-pl-soft:hover,.btn-pl-soft:focus-visible{background:var(--mp-brand);color:#fff}
.talk-band__btn,.filter-go,.search-go,.search-band button,.jobsearch__btn{
  font-family:var(--mp-font);font-weight:700;text-transform:uppercase;letter-spacing:var(--mp-track-btn);
}
.icon-btn:hover{background:var(--mp-brand)}


/* =====================================================================
   3. TYPOGRAPHY SCALE  (spec: section headers, tags, taglines, arrows)
   ===================================================================== */
.mpdi-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 var(--mp-s3);
  color:var(--mp-muted);
  font-size:.8125rem;font-weight:600;line-height:1.3;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}
.mpdi-eyebrow::before{content:none}          /* never inherit Palace's // */
.mpdi-eyebrow--arrow{color:var(--mp-brand)}
.mpdi-eyebrow--arrow .mpdi-arrow{width:28px;height:12px}
a.mpdi-eyebrow{text-decoration:none}
a.mpdi-eyebrow:hover{color:var(--mp-ink)}
a.mpdi-eyebrow:hover .mpdi-arrow{transform:translateX(4px)}

/* Inline long arrow (same path as .talk-band__arrow). Yerin emits:
   <span class="mpdi-arrow" aria-hidden="true"><svg viewBox="0 0 92 26" ...></svg></span> */
.mpdi-arrow{
  display:inline-block;flex:0 0 auto;
  width:28px;height:12px;
  color:currentColor;vertical-align:middle;
  transition:transform var(--mp-dur) var(--mp-ease);
}
.mpdi-arrow svg{display:block;width:100%;height:100%}

.mpdi-h2{
  margin:0;
  color:var(--mp-ink);
  font-size:var(--mp-fs-h2);font-weight:800;line-height:var(--mp-lh-tight);
  text-transform:uppercase;letter-spacing:-.01em;
  max-width:24ch;
}
.mpdi-h2--sentence{text-transform:none;letter-spacing:0}
.mpdi-section--dark .mpdi-h2,
.mpdi-section--dark h2,
.mpdi-section--dark h3{color:#fff}
.mpdi-section--dark .mpdi-eyebrow{color:var(--mp-on-dark)}
.mpdi-section--dark p{color:var(--mp-on-dark)}

.mpdi-tag{
  display:inline-block;
  margin:0 0 var(--mp-s2);
  color:var(--mp-brand);
  font-size:var(--mp-fs-xs);font-weight:700;line-height:1.3;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}

.mpdi-lead{font-size:var(--mp-fs-md);line-height:1.65;color:var(--mp-body);max-width:60ch}

/* Generic status modifier reused on native options, listbox items, badges */
.is-upcoming{font-style:italic;color:var(--mp-muted)}


/* =====================================================================
   4. HEADER  (spec: Section 1 Navigation Bar — logo | links | CHAT WITH US)
   ===================================================================== */
.site-header{
  padding:12px 0;
  transition:box-shadow .3s ease,background-color .3s ease,transform .25s var(--mp-ease);
}
.site-header .brand img{height:48px;width:auto}

/* Kill the segmented pill for good — on every page and in every state. */
.nav-pill-wrap,
body.has-hero-overlay .nav-pill-wrap,
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap{
  background:transparent;
  border:0;
  padding:0;
  gap:var(--mp-s1);
  backdrop-filter:none;
}
.nav-pill-wrap .nav-link,
body.has-hero-overlay .nav-pill-wrap .nav-link{
  position:relative;
  padding:.7rem .95rem;
  color:var(--mp-ink);
  font-weight:600;font-size:.8125rem;line-height:1.2;
  text-transform:uppercase;letter-spacing:var(--mp-track-btn);
  background:transparent;
  box-shadow:none;
}
/* active state = 2px underline, not a filled shape */
.nav-pill-wrap .nav-link::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.3rem;
  height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--mp-dur) var(--mp-ease);
}
.nav-pill-wrap .nav-link:hover::after,
.nav-pill-wrap .nav-link.active::after,
.nav-pill-wrap .nav-link.show::after{transform:scaleX(1)}
.nav-pill-wrap .nav-link:hover,
.nav-pill-wrap .nav-link.active,
.nav-pill-wrap .nav-link.show{color:var(--mp-brand);background:transparent;box-shadow:none}
.nav-pill-wrap .nav-link.active{font-weight:700}

/* over-video (transparent) state: white type, light logo */
body.has-hero-overlay .site-header:not(.is-stuck) .nav-pill-wrap .nav-link{color:rgba(255,255,255,.88)}
body.has-hero-overlay .site-header:not(.is-stuck) .nav-pill-wrap .nav-link:hover,
body.has-hero-overlay .site-header:not(.is-stuck) .nav-pill-wrap .nav-link.active,
body.has-hero-overlay .site-header:not(.is-stuck) .nav-pill-wrap .nav-link.show{color:#fff;background:transparent}
body.has-hero-overlay .site-header:not(.is-stuck) .nav-pill-wrap .nav-link.active::after{background:#fff}

/* white (stuck / inner-page) state */
body.has-hero-overlay .site-header.is-stuck{background:#fff;box-shadow:0 4px 24px rgba(24,24,27,.08);padding:8px 0}
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap .nav-link{color:var(--mp-ink)}
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap .nav-link:hover,
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap .nav-link.active{color:var(--mp-brand);background:transparent}
body.has-hero-overlay .site-header.is-stuck .nav-pill-wrap .nav-link.active::after{background:var(--mp-brand)}

/* Light-logo swap hook. Yerin may emit TWO images inside .brand:
     <img class="brand__logo brand__logo--dark"  src="assets/myvan-logo.png">
     <img class="brand__logo brand__logo--light" src="assets/img/myvan-logo-light.png">
   The light one shows only over the video; the dark one everywhere else. When
   only the single legacy <img> exists, hero-v2.css's filter:invert still applies. */
.site-header .brand__logo--light{display:none}
body.has-hero-overlay .site-header:not(.is-stuck) .brand__logo--light{display:block}
body.has-hero-overlay .site-header:not(.is-stuck) .brand__logo--dark{display:none}
body.has-hero-overlay .site-header .brand .brand__logo{filter:none}

/* Header CTA (CHAT WITH US) — either .mpdi-btn or the legacy .btn.btn-pl */
.header-cta .btn,.header-cta .mpdi-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--mp-s5);line-height:1.2}
body.has-hero-overlay .site-header:not(.is-stuck) .header-cta .btn-pl{background:#fff;color:var(--mp-brand)}
body.has-hero-overlay .site-header:not(.is-stuck) .header-cta .btn-pl:hover{background:var(--mp-brand);color:#fff}
body.has-hero-overlay .site-header:not(.is-stuck) .header-cta .mpdi-btn--primary{background:#fff;border-color:#fff;color:var(--mp-brand)}
body.has-hero-overlay .site-header:not(.is-stuck) .header-cta .mpdi-btn--primary:hover{background:var(--mp-brand);border-color:var(--mp-brand);color:#fff}

/* Nav dropdown (kept for any page that still has children) */
.nav-pill-wrap .dropdown-menu{border:1px solid var(--mp-line);padding:var(--mp-s2);margin-top:.5rem;box-shadow:0 16px 40px rgba(24,24,27,.14)}
.nav-pill-wrap .dropdown-item{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:var(--mp-track-btn)}
.nav-pill-wrap .dropdown-item.active{background:var(--mp-brand)}

/* mobile collapse backdrop over the video is maroon (hero-v2.css uses --hero-navy) */
@media (max-width:991.98px){
  body.has-hero-overlay .navbar-collapse{background:var(--mp-brand-dark);padding:var(--mp-s4) var(--mp-s5)}
  body.has-hero-overlay .site-header.is-stuck .navbar-collapse{background:#fff;border:1px solid var(--mp-line)}
  /* the collapse's CTA (a.mpdi-btn.mpdi-btn--primary.mpdi-btn--chat.d-lg-none) would be
     maroon-on-dark-maroon over the video: invert it like the desktop header CTA. */
  body.has-hero-overlay .site-header:not(.is-stuck) .navbar-collapse .mpdi-btn--primary,
  body.has-hero-overlay .site-header:not(.is-stuck) .navbar-collapse .mpdi-btn--chat{background:#fff;border-color:#fff;color:var(--mp-brand)}
  body.has-hero-overlay .site-header:not(.is-stuck) .navbar-collapse .mpdi-btn--primary:hover,
  body.has-hero-overlay .site-header:not(.is-stuck) .navbar-collapse .mpdi-btn--chat:hover,
  body.has-hero-overlay .site-header:not(.is-stuck) .navbar-collapse .mpdi-btn--primary:focus-visible,
  body.has-hero-overlay .site-header:not(.is-stuck) .navbar-collapse .mpdi-btn--chat:focus-visible{background:var(--mp-brand);border-color:var(--mp-brand);color:#fff}
  .nav-pill-wrap .nav-link{padding:.85rem .5rem}
  .nav-pill-wrap .nav-link::after{left:.5rem;right:.5rem}
  .navbar-collapse .btn,.navbar-collapse .mpdi-btn{width:100%}
}
@media (min-width:992px) and (max-width:1199.98px){
  .nav-pill-wrap .nav-link{padding:.7rem .7rem;letter-spacing:.02em;font-size:.78rem}
}


/* =====================================================================
   5. HERO  (spec: Section 1 — video + maroon overlay + floating sharp search)
   Scoped to .hero-v2.mpdi-hero so hero-v2.css keeps working for anything else.
   ===================================================================== */
.mpdi-hero{background:var(--mp-brand-dark);min-height:min(900px,100svh)}
.mpdi-hero .hero-v2__inner{padding:140px 0 100px}

/* video element (self-hosted) — cover fill under the scrim */
.mpdi-hero .hero-v2__video{z-index:0;pointer-events:none}
.mpdi-hero .hero-v2__video-el{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
/* the scrim layer sits above any video and is the ONLY tint */
.mpdi-hero .hero-v2__image{z-index:1;pointer-events:none}
.mpdi-hero.has-video .hero-v2__image{background-image:none !important}
/* Spec tint rgba(68,1,1,.45) as a flat layer + a left-side darkening so the
   white H1 keeps >= 4.5:1 wherever the footage is bright. */
.mpdi-hero .hero-v2__image::after,
.mpdi-hero.has-video .hero-v2__image::after{
  background:
    linear-gradient(90deg,rgba(24,0,0,.55) 0%,rgba(24,0,0,.30) 45%,rgba(24,0,0,.10) 100%),
    var(--mp-brand-overlay);
}

/* legacy + mpdi hero alike: the eyebrow rule was brand-on-brand (invisible) once the scrim went maroon */
.mpdi-hero .hero-v2__eyebrow,
.hero-v2.has-video .hero-v2__eyebrow{color:#fff;letter-spacing:var(--mp-track-label)}
.mpdi-hero .hero-v2__eyebrow::after,
.hero-v2.has-video .hero-v2__eyebrow::after{background:#fff;opacity:.7}
body.has-hero-overlay .hero-v2__eyebrow{color:#fff}
body.has-hero-overlay .hero-v2__eyebrow::after{background:#fff;opacity:.7}

.mpdi-hero .hero-v2__title,
.mpdi-hero h1{
  color:#fff;
  font-size:var(--mp-fs-h1);line-height:1.08;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;
  margin:0 0 var(--mp-s5);max-width:16ch;
}
.mpdi-hero h1 .hero-v2__accent,
.mpdi-hero.has-video h1 .hero-v2__accent{color:#fff}   /* no second hue on the headline; outranks hero-video.css #E08A8F */
.mpdi-hero .hero-v2__lead{color:rgba(255,255,255,.86);font-size:var(--mp-fs-md);line-height:1.65;max-width:56ch;margin:0 0 var(--mp-s6)}

/* search module layout: search box + optional map aside */
.mpdi-hero .hero-v2__module{display:flex;align-items:flex-end;gap:var(--mp-s6)}
.mpdi-hero .hero-v2__module > .hero-v2__panel{flex:1 1 auto;min-width:0}

/* tabs: ALL | HOUSING | CONDOMINIUM */
.mpdi-hero .hero-v2__tabs{display:flex;gap:2px;margin:0}
.mpdi-hero .hero-v2__tabs .tab-btn{
  min-height:48px;padding:0 var(--mp-s5);
  background:rgba(255,255,255,.14);color:#fff;
  font-family:var(--mp-font);font-weight:700;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:var(--mp-track-btn);
  border:0;
  backdrop-filter:blur(4px);
  transition:background-color var(--mp-dur) var(--mp-ease),color var(--mp-dur) var(--mp-ease);
}
.mpdi-hero .hero-v2__tabs .tab-btn:hover{background:rgba(255,255,255,.26);color:#fff}
.mpdi-hero .hero-v2__tabs .tab-btn.active-btn{background:#fff;color:var(--mp-brand);box-shadow:inset 0 3px 0 var(--mp-brand)}
.mpdi-hero .hero-v2__tabs .tab-btn:focus-visible{outline-offset:-3px}

/* the floating sharp box */
.mpdi-hero .hero-v2__search{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;
  align-items:end;
  gap:0 var(--mp-s5);
  padding:var(--mp-s5);
  background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  max-width:1180px;
}
/* if Yerin nests a Bootstrap .row inside, let it own the columns */
.mpdi-hero .hero-v2__search > .row{grid-column:1 / -1}
.mpdi-hero .hero-v2__field{position:relative;min-width:0}
.mpdi-hero .hero-v2__search label{
  display:block;margin:0 0 var(--mp-s1);
  color:var(--mp-ink);
  font-size:var(--mp-fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}
.mpdi-hero .hero-v2__search .form-select,
.mpdi-hero .hero-v2__search .hero-v2__loc,
.mpdi-hero .hero-v2__search .hero-v2__type,
.mpdi-hero .hero-v2__search .mpdi-dd{
  width:100%;min-height:48px;
  padding:0 2.4rem 0 var(--mp-s3);
  border:1px solid var(--mp-line);
  background-color:#fff;
  color:var(--mp-ink);
  font-family:var(--mp-font);font-size:.9375rem;font-weight:500;
  box-shadow:none;
}
.mpdi-hero .hero-v2__search .form-select,
.mpdi-hero .hero-v2__search .hero-v2__loc,
.mpdi-hero .hero-v2__search .hero-v2__type{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2318181B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:12px 8px;
}
.mpdi-hero .hero-v2__search .form-select:focus,
.mpdi-hero .hero-v2__search .mpdi-dd:focus-visible{border-color:var(--mp-brand);outline:2px solid var(--mp-brand);outline-offset:0}
/* the hairline between fields belonged to the Palace look */
.mpdi-hero .hero-v2__search .hero-v2__field + .hero-v2__field{border-left:0;padding-left:0}

/* native <optgroup>/<option> fallback: Chrome + Firefox honour these */
.hero-v2__group,.hero-v2__search optgroup{font-weight:700;font-style:normal;color:var(--mp-ink)}
.hero-v2__opt,.hero-v2__search option{font-weight:400;color:var(--mp-ink);padding:6px 10px}
.hero-v2__opt.is-upcoming,.hero-v2__search option.is-upcoming{font-style:italic;color:var(--mp-muted)}

/* SEARCH NOW + CHAT WITH US, side by side, chat on the far right */
.mpdi-hero .hero-v2__actions{display:flex;gap:var(--mp-s3);align-items:stretch}
.mpdi-hero .hero-v2__go,
.mpdi-hero .hero-v2__chat{min-height:48px;padding:0 var(--mp-s5);white-space:nowrap}
.mpdi-hero .hero-v2__go{background:var(--mp-brand);color:#fff;border:2px solid var(--mp-brand);font-weight:700;font-size:var(--mp-fs-sm);text-transform:uppercase;letter-spacing:var(--mp-track-btn)}
.mpdi-hero .hero-v2__go:hover,.mpdi-hero .hero-v2__go:focus-visible{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}

/* map aside: desktop only, to the right of the search box */
.hero-v2__aside{display:none}
@media (min-width:1200px){
  .hero-v2__aside{display:block;flex:0 0 300px;width:300px;align-self:stretch}
  /* hero-v2.css:162 indents the container 72px to clear the rotated contact
     rail; Build B removed that rail, so the headline goes back to the grid. */
  .mpdi-hero .hero-v2__inner .pl-container{padding-left:var(--mp-s5)}
  /* the social rail is absolute at right:26px (38px wide); keep the map panel
     clear of it instead of letting the two overlap by ~15px at 1440. */
  .mpdi-hero .hero-v2__module{padding-right:56px}
}

/* PAUSE / PLAY for the background loop (WCAG 2.2.2). Yerin emits
   <button class="mpdi-hero__pause mpdi-btn mpdi-btn--icon" data-hero-pause> only
   when a video renders; Taegyu toggles .is-paused + aria-pressed. Ghost square,
   bottom-left, above the scrim; hidden wherever the loop itself is hidden. */
.mpdi-hero__pause{
  position:absolute;left:var(--mp-s5);bottom:var(--mp-s5);z-index:3;
  width:44px;height:44px;min-height:44px;
  background:rgba(24,0,0,.45);color:#fff;
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
  font-size:1.125rem;
}
.mpdi-hero__pause:hover,.mpdi-hero__pause:focus-visible{background:#fff;color:var(--mp-brand);border-color:#fff}
.mpdi-hero__pause.is-paused .bi-pause-fill::before{content:"\F4F4"}   /* bootstrap-icons play-fill */
.mpdi-hero:not(.has-video) .mpdi-hero__pause{display:none}
@media (max-width:767.98px),(prefers-reduced-motion:reduce){
  .mpdi-hero__pause{display:none}
}

/* side rails inherit the palette */
.mpdi-hero .hero-v2__rail .dot{background:#fff}
.mpdi-hero .hero-v2__social a:hover{background:#fff;border-color:#fff;color:var(--mp-brand)}

@media (max-width:1199.98px){
  .mpdi-hero .hero-v2__inner{padding:130px 0 80px}
}
@media (max-width:991.98px){
  .mpdi-hero{min-height:auto}
  .mpdi-hero .hero-v2__image::after,
  .mpdi-hero.has-video .hero-v2__image::after{background:linear-gradient(rgba(24,0,0,.35),rgba(24,0,0,.35)),var(--mp-brand-overlay)}
  .mpdi-hero .hero-v2__search{grid-template-columns:1fr 1fr;gap:var(--mp-s4);padding:var(--mp-s4)}
  .mpdi-hero .hero-v2__actions{grid-column:1 / -1}
  .mpdi-hero .hero-v2__actions > *{flex:1 1 0}
  .mpdi-hero .hero-v2__inner{padding:120px 0 64px}
}
@media (max-width:767.98px){
  /* autoplaying footage is dropped; poster stays (hero-video.css does the iframe) */
  .mpdi-hero .hero-v2__video-el{display:none}
  .mpdi-hero .hero-v2__tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mpdi-hero .hero-v2__tabs::-webkit-scrollbar{display:none}
  .mpdi-hero .hero-v2__tabs .tab-btn{flex:1 0 auto;padding:0 var(--mp-s4);min-height:44px}
}
@media (max-width:575.98px){
  .mpdi-hero .hero-v2__inner{padding:110px 0 var(--mp-s7)}
  .mpdi-hero h1,.mpdi-hero .hero-v2__title{font-size:2rem;line-height:1.15;max-width:none}
  .mpdi-hero .hero-v2__search{grid-template-columns:1fr}
  .mpdi-hero .hero-v2__actions{flex-direction:column}
  .mpdi-hero .hero-v2__go,.mpdi-hero .hero-v2__chat{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .mpdi-hero .hero-v2__video-el{display:none}
}


/* =====================================================================
   6. CUSTOM GROUPED DROPDOWN  (spec: Section 1 Location Dropdown hierarchy;
      Taegyu's mpdi-home.js builds it over the native select)
   ===================================================================== */
.mpdi-dd{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:var(--mp-s3);
  width:100%;min-height:48px;
  padding:0 var(--mp-s3);
  background:#fff;color:var(--mp-ink);
  border:1px solid var(--mp-line);
  font-family:var(--mp-font);font-size:.9375rem;font-weight:500;line-height:1.3;
  text-align:left;cursor:pointer;
}
.mpdi-dd__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpdi-dd__value.is-placeholder{color:var(--mp-muted)}
.mpdi-dd__value.is-upcoming{font-style:italic;color:var(--mp-muted)}
.mpdi-dd__chevron{
  flex:0 0 12px;width:12px;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2318181B' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--mp-dur) var(--mp-ease);
}
.mpdi-dd--open{border-color:var(--mp-brand)}
/* hero-v2.css makes .hero-v2__inner a stacking context (position:relative;
   z-index:2), so the panel's own z-index cannot climb past the fixed cookie
   bar (.fixed-bottom, 1030). Lift the context only while a listbox is open. */
.mpdi-hero .hero-v2__inner:has(.mpdi-dd--open){z-index:1035}
.mpdi-dd--open .mpdi-dd__chevron{transform:rotate(180deg)}
.mpdi-dd:hover{border-color:var(--mp-ink)}

.mpdi-dd__panel{
  position:absolute;left:0;right:0;top:calc(100% + 4px);
  z-index:var(--mp-z-dd);
  max-height:60vh;overflow-y:auto;
  background:#fff;
  border:1px solid var(--mp-line);
  box-shadow:0 20px 50px rgba(24,24,27,.18);
  padding:var(--mp-s1) 0;
  margin:0;list-style:none;
}
.mpdi-dd__panel[hidden]{display:none}
.mpdi-dd__group{padding:0;margin:0;list-style:none}
.mpdi-dd__group + .mpdi-dd__group{border-top:1px solid var(--mp-line)}
.mpdi-dd__group-label,
.mpdi-dd__group > [role="presentation"]{
  position:sticky;top:0;z-index:1;
  padding:var(--mp-s2) var(--mp-s4) var(--mp-s1);
  background:#fff;
  color:var(--mp-ink);
  font-size:var(--mp-fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}
.mpdi-dd__item{
  position:relative;
  display:flex;align-items:center;gap:var(--mp-s2);
  padding:10px var(--mp-s4) 10px 22px;
  color:var(--mp-ink);
  font-size:.9375rem;line-height:1.35;
  cursor:pointer;
}
.mpdi-dd__item:hover,
.mpdi-dd__item.is-focused,
.mpdi-dd__item:focus-visible{background:var(--mp-bg);outline:none}
.mpdi-dd__item[aria-selected="true"]{font-weight:600;background:var(--mp-brand-soft)}
.mpdi-dd__item[aria-selected="true"]::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mp-brand);
}
.mpdi-dd__item.is-upcoming{font-style:italic;color:var(--mp-muted)}
.mpdi-dd__item.is-upcoming::after{content:"(Upcoming)";font-size:var(--mp-fs-xs);margin-left:auto;white-space:nowrap}
.mpdi-dd__item.is-upcoming[data-label-has-upcoming]::after{content:none}
.mpdi-dd__item[aria-disabled="true"]{opacity:.5;cursor:default}
/* Taegyu's wrapper: <div class="mpdi-dd-wrap"> <button class="mpdi-dd"> + <div class="mpdi-dd__panel"> */
.mpdi-dd-wrap{position:relative;min-width:0}
/* "All projects in <City>" row that heads each group: brand-coloured, semibold,
   hairline under it so the project rows read as its children. */
.mpdi-dd__item--city{
  color:var(--mp-brand);font-weight:600;
  padding-left:var(--mp-s4);
  border-bottom:1px solid var(--mp-line);
  margin-bottom:2px;
}
.mpdi-dd__item--city::before{content:"→";display:inline-block;width:1em;font-weight:400;opacity:.7}
.mpdi-dd__item--city:hover,.mpdi-dd__item--city.is-focused{background:var(--mp-brand-soft)}
/* when the enhancement mounts, the native select is kept for forms but hidden */
.mpdi-dd-mounted > .form-select,
select[data-mpdi-dd].is-enhanced{
  position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}


/* =====================================================================
   7. STICKY MICRO-HEADER  (spec: UX suggestion 1 — maroon bar after the hero)
   ===================================================================== */
.mpdi-sticky-bar{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--mp-z-sticky);
  background:var(--mp-brand);color:#fff;
  transform:translateY(-100%);
  visibility:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  transition:transform .25s var(--mp-ease),visibility 0s linear .25s;
}
.mpdi-sticky-bar.is-visible{transform:none;visibility:visible;transition-delay:0s}

.mpdi-sticky-bar__inner{
  display:flex;align-items:center;gap:var(--mp-s3);
  min-height:64px;
}
.mpdi-sticky-bar__brand{display:inline-flex;align-items:center;flex:0 0 auto;margin-right:var(--mp-s2)}
.mpdi-sticky-bar__brand img{height:36px;width:auto;display:block;filter:none}

.mpdi-sticky-bar__form{
  display:flex;align-items:center;gap:var(--mp-s2);
  flex:1 1 auto;min-width:0;
  margin:0;
}
.mpdi-sticky-bar__form .hero-v2__field,
.mpdi-sticky-bar__form .mpdi-sticky-bar__field{position:relative;flex:1 1 0;min-width:0;max-width:340px}
.mpdi-sticky-bar__form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* visually hidden */
.mpdi-sticky-bar__form .form-select,
.mpdi-sticky-bar__form .hero-v2__loc,
.mpdi-sticky-bar__form .hero-v2__type,
.mpdi-sticky-bar__form .mpdi-dd{
  min-height:40px;height:40px;
  padding:0 2.2rem 0 var(--mp-s3);
  border:0;background-color:#fff;color:var(--mp-ink);
  font-family:var(--mp-font);font-size:var(--mp-fs-sm);font-weight:500;
  box-shadow:none;
}
.mpdi-sticky-bar__form .form-select,
.mpdi-sticky-bar__form .hero-v2__loc,
.mpdi-sticky-bar__form .hero-v2__type{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2318181B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:12px 8px;
}
.mpdi-sticky-bar__form .mpdi-btn{min-height:40px;padding:0 var(--mp-s4)}
.mpdi-sticky-bar__form .mpdi-dd__panel{max-height:50vh}

.mpdi-sticky-bar__chat{flex:0 0 auto;margin-left:auto;min-height:40px;padding:0 var(--mp-s4)}
.mpdi-sticky-bar__search-icon{display:none}

/* Only one fixed element may occupy the top: the stuck white header is
   translated off-screen while the bar is visible. myvan.js keeps toggling
   .is-stuck; this rule simply hides the result. */
body.mpdi-bar-visible .site-header.is-stuck{transform:translateY(-110%);pointer-events:none;box-shadow:none}
body.mpdi-bar-visible .scroll-top{opacity:0;visibility:hidden}

@media (max-width:767.98px){
  .mpdi-sticky-bar__inner{min-height:56px;gap:var(--mp-s2)}
  .mpdi-sticky-bar__brand img{height:30px}
  .mpdi-sticky-bar__form{display:none}
  .mpdi-sticky-bar__search-icon{display:inline-flex;margin-left:auto;background:#fff;color:var(--mp-brand);border-color:#fff}
  .mpdi-sticky-bar__search-icon:hover{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}
  .mpdi-sticky-bar__chat{margin-left:0;width:44px;height:44px;min-height:44px;padding:0}
  .mpdi-sticky-bar__chat .mpdi-btn__label,
  .mpdi-sticky-bar__chat span:not(.visually-hidden){display:none}
  .mpdi-sticky-bar__chat i{font-size:1.125rem;margin:0}
}
@media (prefers-reduced-motion:reduce){
  .mpdi-sticky-bar,.site-header{transition:none}
}


/* =====================================================================
   8. SECTION SHELL  (all home bands)
   ===================================================================== */
.mpdi-section{padding:var(--mp-section-y) 0;background:#fff}
.mpdi-section--alt{background:var(--mp-bg)}
.mpdi-section--dark{background:var(--mp-ink);color:var(--mp-on-dark)}
.mpdi-section + .mpdi-section.mpdi-section--alt,
.mpdi-section--alt + .mpdi-section{border-top:0}

/* Section wrappers (contract names). Each carries its own default surface so
   the page alternates white / light / white / dark / light / white even if
   Yerin omits the --alt modifier; --alt / --dark still win when present. */
.mpdi-props{background:#fff}
.mpdi-featured{background:var(--mp-bg)}
.mpdi-about{background:#fff}
.mpdi-tour{background:var(--mp-ink)}
.mpdi-agents{background:var(--mp-bg)}
.mpdi-articles{background:#fff}
.mpdi-section--alt{background:var(--mp-bg)}
.mpdi-section--dark{background:var(--mp-ink)}
.mpdi-featured .mpdi-featured__card,
.mpdi-agents .mpdi-agents__card{border-color:transparent}
.mpdi-articles .mpdi-articles__card{border-color:var(--mp-line)}

.mpdi-section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--mp-s5);
  margin-bottom:var(--mp-s7);
}
.mpdi-section__head > div{min-width:0}
.mpdi-section__head .mpdi-btn{flex:0 0 auto}
.mpdi-section__head--center{flex-direction:column;align-items:center;text-align:center}
.mpdi-section__head--center .mpdi-h2{max-width:none}

/* generic 2/3-column grids */
.mpdi-props__grid,
.mpdi-featured__grid,
.mpdi-agents__grid,
.mpdi-articles__grid,
.mpdi-tour__rail{display:grid;gap:var(--mp-gap)}
.mpdi-props__grid{grid-template-columns:repeat(3,minmax(0,1fr))}   /* three type filter cards */
.mpdi-featured__grid,
.mpdi-agents__grid,
.mpdi-articles__grid,
.mpdi-tour__rail{grid-template-columns:repeat(3,minmax(0,1fr))}

/* card media boxes never reflow: aspect-ratio + object-fit */
.mpdi-props__media,
.mpdi-featured__media,
.mpdi-articles__media,
.mpdi-about__media,
.mpdi-tour__poster{position:relative;display:block;overflow:hidden;background:#F4F4F5}
.mpdi-props__media img,
.mpdi-featured__media img,
.mpdi-articles__media img,
.mpdi-about__media img,
.mpdi-tour__poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--mp-ease)}

@media (max-width:991.98px){
  :root{--mp-section-y:72px}
  .mpdi-featured__grid,.mpdi-agents__grid,.mpdi-articles__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 3 cards in 2 columns (768-991 only) leaves an orphan: the odd last card spans
   the row and lays out horizontally (media left, body right) so the row reads
   as a deliberate feature, not a leftover. Below 768 the grids are 1 column
   and the cards must stay stacked, hence the lower bound. */
@media (min-width:768px) and (max-width:991.98px){
  .mpdi-featured__card:last-child:nth-child(odd),
  .mpdi-articles__card:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row}
  .mpdi-featured__card:last-child:nth-child(odd) .mpdi-featured__media,
  .mpdi-articles__card:last-child:nth-child(odd) .mpdi-articles__media{flex:0 0 46%;aspect-ratio:auto;min-height:220px}
  .mpdi-featured__card:last-child:nth-child(odd) .mpdi-featured__body,
  .mpdi-articles__card:last-child:nth-child(odd) .mpdi-articles__body{justify-content:center}
  .mpdi-agents__card:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:767.98px){
  :root{--mp-section-y:56px;--mp-gap:16px}
  .mpdi-section__head{flex-direction:column;align-items:flex-start;gap:var(--mp-s4);margin-bottom:var(--mp-s6)}
  .mpdi-section__head .mpdi-btn{width:100%}
  .mpdi-props__grid,.mpdi-featured__grid,.mpdi-agents__grid,.mpdi-articles__grid,.mpdi-tour__rail{grid-template-columns:1fr}
}


/* =====================================================================
   9. SECTION 2 — PROPERTIES (2 large image cards)
   ===================================================================== */
.mpdi-props__card{
  position:relative;display:block;
  color:#fff;text-decoration:none;
  overflow:hidden;
  background:var(--mp-ink);
}
.mpdi-props__media{aspect-ratio:4/3}
.mpdi-props__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,24,27,0) 40%,rgba(24,24,27,.55) 70%,rgba(24,24,27,.9) 100%);
  transition:background var(--mp-dur) var(--mp-ease);
}
.mpdi-props__body{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--mp-s6) var(--mp-s6) var(--mp-s6);
  z-index:1;
}
.mpdi-props__body .mpdi-tag{
  display:inline-block;margin-bottom:var(--mp-s3);
  padding:6px 10px;
  background:var(--mp-brand);color:#fff;
}
.mpdi-props__title{
  margin:0;
  color:#fff;
  font-size:var(--mp-fs-lg);font-weight:700;line-height:1.25;
  text-transform:none;letter-spacing:0;
}
.mpdi-props__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:var(--mp-s3);
  color:#fff;font-size:var(--mp-fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--mp-track-label);
  opacity:.85;
}
.mpdi-props__card:hover .mpdi-props__media img,
.mpdi-props__card:focus-visible .mpdi-props__media img{transform:scale(1.04)}
.mpdi-props__card:hover .mpdi-props__media::after{
  background:linear-gradient(180deg,rgba(68,1,1,.15) 0%,rgba(68,1,1,.55) 60%,rgba(46,4,4,.95) 100%);
}
.mpdi-props__card:hover .mpdi-props__cta .mpdi-arrow{transform:translateX(4px)}
.mpdi-props__card:focus-visible{outline-offset:-4px;outline-color:#fff}
/* a type with no published project yet has no photo: brand field + its icon */
.mpdi-props__media--empty{display:grid;place-items:center;background:linear-gradient(160deg,var(--mp-brand) 0%,var(--mp-brand-dark) 100%)}
.mpdi-props__media--empty .bi{font-size:4rem;color:rgba(255,255,255,.35)}
.mpdi-props__media--empty::after{background:linear-gradient(180deg,rgba(24,24,27,0) 55%,rgba(24,24,27,.55) 100%)}
@media (min-width:576px) and (max-width:991.98px){
  /* tablets keep the three cards side by side, portrait, instead of stacking */
  .mpdi-props__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mpdi-props__media{aspect-ratio:3/4}
  .mpdi-props__body{padding:var(--mp-s4)}
  .mpdi-props__title{font-size:var(--mp-fs-md)}
}
@media (max-width:575.98px){
  .mpdi-props__media{aspect-ratio:4/3}
  .mpdi-props__body{padding:var(--mp-s5)}
  .mpdi-props__title{font-size:var(--mp-fs-md)}
}


/* =====================================================================
   10. SECTION 3 — FEATURED PROJECTS (3-up) + status badge
   ===================================================================== */
.mpdi-featured__card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--mp-line);
  color:inherit;text-decoration:none;
  transition:border-color var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur) var(--mp-ease),transform var(--mp-dur) var(--mp-ease);
}
.mpdi-section--alt .mpdi-featured__card{border-color:transparent}
.mpdi-featured__media{aspect-ratio:16/10}
.mpdi-featured__body{padding:var(--mp-s5);display:flex;flex-direction:column;gap:var(--mp-s1)}
.mpdi-featured__title{
  margin:0;
  color:var(--mp-ink);
  font-size:var(--mp-fs-md);font-weight:700;line-height:1.3;
  text-transform:none;letter-spacing:0;
}
.mpdi-featured__title a{color:inherit;text-decoration:none}
.mpdi-featured__loc{margin:0;color:var(--mp-muted);font-size:var(--mp-fs-sm)}
.mpdi-featured__card:hover,
.mpdi-featured__card:focus-within{border-color:var(--mp-brand);box-shadow:0 18px 40px rgba(24,24,27,.10);transform:translateY(-4px)}
.mpdi-featured__card:hover .mpdi-featured__media img{transform:scale(1.04)}
.mpdi-featured__card:hover .mpdi-featured__title{color:var(--mp-brand)}
/* the whole card is clickable when Yerin uses a stretched link */
.mpdi-featured__card .stretched-link::after{z-index:2}
.mpdi-featured__cta{display:flex;justify-content:center;margin-top:var(--mp-s7)}

/* square status badge — top-left of the media */
.mpdi-badge{
  position:absolute;top:var(--mp-s3);left:var(--mp-s3);z-index:2;
  display:inline-block;
  padding:5px 10px;
  background:var(--mp-ink);color:#fff;
  font-size:.6875rem;font-weight:700;line-height:1.2;
  text-transform:uppercase;letter-spacing:.06em;
}
.mpdi-badge.is-upcoming{background:var(--mp-muted);color:#fff;font-style:italic}   /* white on #71717A = 4.83:1 */
.mpdi-badge.is-brand{background:var(--mp-brand)}

/* /properties listing badge (pages.css .badge-status) gains the same status */
.badge-status.is-upcoming{font-style:italic;color:var(--mp-muted)}
.badge-status.is-upcoming::before{background:var(--mp-muted)}
.badge-status,.badge-type,.badge-featured{font-family:var(--mp-font);font-weight:700;font-size:var(--mp-fs-xs);text-transform:uppercase;letter-spacing:.05em}

@media (max-width:767.98px){
  .mpdi-featured__cta{margin-top:var(--mp-s6)}
  .mpdi-featured__cta .mpdi-btn{width:100%}
}


/* =====================================================================
   11. SECTION 4 — ABOUT THE COMPANY (split + 30+ badge) and PICK cards
   ===================================================================== */
.mpdi-about__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:var(--mp-s8);
  align-items:start;
}
.mpdi-about__media{aspect-ratio:4/5;position:sticky;top:96px}
.mpdi-about__badge{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;
  padding:var(--mp-s5) var(--mp-s6);
  background:var(--mp-brand);color:#fff;
  max-width:min(70%,280px);
}
.mpdi-about__badge-num{
  font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.02em;
}
.mpdi-about__badge-label{
  margin-top:var(--mp-s1);
  font-size:var(--mp-fs-xs);font-weight:600;line-height:1.35;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
  color:rgba(255,255,255,.9);
}

.mpdi-about__body .mpdi-h2{margin-bottom:var(--mp-s5)}
.mpdi-about__intro{font-size:var(--mp-fs-md);line-height:1.65;color:var(--mp-body);margin:0 0 var(--mp-s6)}
.mpdi-about__blocks{display:grid;gap:var(--mp-s5)}
.mpdi-about__block{
  padding-left:var(--mp-s4);
  border-left:3px solid var(--mp-brand);
}
.mpdi-about__label{
  margin:0 0 var(--mp-s2);
  color:var(--mp-brand);
  font-size:var(--mp-fs-sm);font-weight:800;line-height:1.3;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}
.mpdi-about__block p{margin:0;color:var(--mp-body);font-size:var(--mp-fs-base);line-height:var(--mp-lh-body)}
.mpdi-about__block p + p{margin-top:var(--mp-s2)}
.mpdi-about__list{
  margin:0;padding:0;list-style:none;
  counter-reset:mpdi-mission;
  display:grid;gap:var(--mp-s2);
}
.mpdi-about__list li{
  position:relative;
  padding-left:2rem;
  color:var(--mp-body);line-height:var(--mp-lh-body);
  counter-increment:mpdi-mission;
}
.mpdi-about__list li::before{
  content:counter(mpdi-mission);
  position:absolute;left:0;top:.2em;
  width:1.375rem;height:1.375rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mp-brand);color:#fff;
  font-size:var(--mp-fs-xs);font-weight:700;line-height:1;
}
.mpdi-about__cta{margin-top:var(--mp-s6)}

/* PICK — 4 dark cards, expand on hover / open / focus */
.mpdi-pick{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:var(--mp-s8);
  background:var(--mp-ink);
}
.mpdi-pick__card{
  position:relative;
  display:flex;flex-direction:column;
  min-height:180px;
  padding:var(--mp-s5);
  background:var(--mp-ink);color:#fff;
  border-left:1px solid rgba(255,255,255,.10);
  cursor:default;
  transition:background-color .25s var(--mp-ease),transform .25s var(--mp-ease);
}
.mpdi-pick__card:first-child{border-left:0}
.mpdi-pick__card[tabindex]{cursor:pointer}
.mpdi-pick__letter{
  display:block;
  font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.02em;
  color:rgba(255,255,255,.22);           /* decorative: the title repeats the letter */
  margin-bottom:var(--mp-s3);
  transition:color .25s var(--mp-ease);
}
.mpdi-pick__title{
  margin:0;
  color:#fff;
  font-size:var(--mp-fs-sm);font-weight:700;line-height:1.3;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}
.mpdi-pick__text{
  margin:0;
  color:rgba(255,255,255,.88);
  font-size:.9375rem;line-height:1.65;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s var(--mp-ease),opacity .25s var(--mp-ease),margin-top .3s var(--mp-ease);
}
.mpdi-pick__text:empty{display:none}     /* a card with nothing to say does not expand */
.mpdi-pick__card.is-open,
.mpdi-pick__card:focus-visible,
.mpdi-pick__card[aria-expanded="true"]{background:var(--mp-brand);transform:translateY(-4px);outline-color:#fff;outline-offset:-4px}
.mpdi-pick__card.is-open .mpdi-pick__letter,
.mpdi-pick__card:focus-visible .mpdi-pick__letter,
.mpdi-pick__card[aria-expanded="true"] .mpdi-pick__letter{color:rgba(255,255,255,.35)}
.mpdi-pick__card.is-open .mpdi-pick__text,
.mpdi-pick__card:focus-visible .mpdi-pick__text,
.mpdi-pick__card[aria-expanded="true"] .mpdi-pick__text{max-height:260px;opacity:1;margin-top:var(--mp-s3)}
@media (hover:hover) and (pointer:fine){
  .mpdi-pick__card:hover{background:var(--mp-brand);transform:translateY(-4px)}
  .mpdi-pick__card:hover .mpdi-pick__letter{color:rgba(255,255,255,.35)}
  .mpdi-pick__card:hover .mpdi-pick__text{max-height:260px;opacity:1;margin-top:var(--mp-s3)}
}
/* reduced motion: no lift, no reveal animation — text is simply always visible */
.mpdi-pick.no-motion .mpdi-pick__card,
.mpdi-pick.no-motion .mpdi-pick__text,
.mpdi-pick.no-motion .mpdi-pick__letter{transition:none}
.mpdi-pick.no-motion .mpdi-pick__card:hover,
.mpdi-pick.no-motion .mpdi-pick__card.is-open{transform:none}
.mpdi-pick.no-motion .mpdi-pick__text{max-height:none;opacity:1;margin-top:var(--mp-s3)}
@media (prefers-reduced-motion:reduce){
  .mpdi-pick__card,.mpdi-pick__text,.mpdi-pick__letter{transition:none}
  .mpdi-pick__card:hover,.mpdi-pick__card.is-open,.mpdi-pick__card:focus-visible{transform:none}
  .mpdi-pick__text{max-height:none;opacity:1;margin-top:var(--mp-s3)}
}

@media (max-width:991.98px){
  .mpdi-about__grid{grid-template-columns:1fr;gap:var(--mp-s6)}
  .mpdi-about__media{position:static;aspect-ratio:16/10;max-height:440px}
  .mpdi-pick{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--mp-s7)}
  .mpdi-pick__card{border-left:0;border-top:1px solid rgba(255,255,255,.10)}
  .mpdi-pick__card:nth-child(odd){border-right:1px solid rgba(255,255,255,.10)}
  .mpdi-pick__card:nth-child(-n+2){border-top:0}
}
@media (max-width:575.98px){
  .mpdi-about__media{aspect-ratio:4/3}
  .mpdi-about__badge{padding:var(--mp-s4) var(--mp-s5)}
  .mpdi-about__badge-num{font-size:2.25rem}
  .mpdi-pick{grid-template-columns:1fr}
  .mpdi-pick__card{min-height:0;border-right:0 !important}
  .mpdi-pick__card:nth-child(2){border-top:1px solid rgba(255,255,255,.10)}
  .mpdi-pick__letter{font-size:2.25rem}
}


/* =====================================================================
   12. SECTION 5 — 360 VIRTUAL TOUR PANORAMIC (dark band, 21:9 stage)
   ===================================================================== */
.mpdi-tour .mpdi-section__head{margin-bottom:var(--mp-s6)}
.mpdi-tour__stage{
  position:relative;
  width:100%;
  aspect-ratio:21/9;
  overflow:hidden;
  background:#000;
}
.mpdi-tour__stage .tour{position:absolute;inset:0;margin:0}
.mpdi-tour__stage .tour__frame{position:absolute;inset:0;aspect-ratio:auto;background:#000}
.mpdi-tour__stage .tour__scrim{background:linear-gradient(180deg,rgba(24,0,0,.25) 0%,rgba(24,0,0,.55) 100%)}
.mpdi-tour__stage .tour__badge{
  font-family:var(--mp-font);font-weight:700;text-transform:uppercase;letter-spacing:var(--mp-track-btn);
  background:var(--mp-brand);padding:.8rem 1.4rem;font-size:.9375rem;
}
.mpdi-tour__stage .tour__play:hover .tour__badge,
.mpdi-tour__stage .tour__play:focus-visible .tour__badge{background:#fff;color:var(--mp-brand);transform:none}
.mpdi-tour__stage .tour__cta{font-weight:600;letter-spacing:.02em}
.mpdi-tour__stage .tour__stage,
.mpdi-tour__stage .tour__stage iframe,
.mpdi-tour__stage .pnlm-container{width:100%;height:100%}
.tour__stage .pnlm-container{height:100%}
.mpdi-tour__stage .tour__caption{
  position:absolute;left:0;bottom:0;z-index:3;
  margin:0;padding:var(--mp-s2) var(--mp-s4);
  background:rgba(24,24,27,.82);color:#fff;
  font-size:.8125rem;
  max-width:60%;
}
.mpdi-tour__stage .tour__fallback{background:rgba(24,24,27,.92)}

/* rail of other tours */
.mpdi-tour__rail{margin-top:var(--mp-gap)}
.mpdi-tour__poster{
  aspect-ratio:16/9;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
}
.mpdi-tour__poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,24,27,0) 45%,rgba(24,24,27,.85) 100%);
}
.mpdi-tour__poster-name{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:var(--mp-s3) var(--mp-s4);
  font-size:var(--mp-fs-sm);font-weight:700;line-height:1.3;
}
.mpdi-tour__poster:hover img,.mpdi-tour__poster:focus-visible img{transform:scale(1.04)}
.mpdi-tour__poster:hover{border-color:#fff}
.mpdi-tour__cta{display:flex;justify-content:center;margin-top:var(--mp-s7)}

/* tour.css leftovers on inner pages */
.tour__frame,.tour-teaser__media{border-radius:0}
.tour__badge,.tour-teaser__badge,.project-card__360,.utype-360{font-family:var(--mp-font);text-transform:uppercase;letter-spacing:.04em}

@media (max-width:767.98px){
  .mpdi-tour__stage{aspect-ratio:16/9}
  .mpdi-tour__stage .tour__caption{max-width:100%;font-size:var(--mp-fs-xs)}
  .mpdi-tour__cta .mpdi-btn{width:100%}
}


/* =====================================================================
   13. SECTION 6 — MEET OUR SALES AGENTS (3-col, circle headshot, chat corner)
   ===================================================================== */
.mpdi-agents__card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:var(--mp-s7) var(--mp-s5) var(--mp-s6);
  background:#fff;
  border:1px solid var(--mp-line);
  text-align:center;
  transition:border-color var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur) var(--mp-ease);
}
.mpdi-agents__card:hover,.mpdi-agents__card:focus-within{border-color:var(--mp-brand);box-shadow:0 18px 40px rgba(24,24,27,.08)}
.mpdi-agents__chat{
  position:absolute;top:0;right:0;
  width:44px;height:44px;min-height:44px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--mp-brand);color:#fff;border:0;
  font-size:1.125rem;cursor:pointer;
  transition:background-color var(--mp-dur) var(--mp-ease);
}
.mpdi-agents__chat:hover,.mpdi-agents__chat:focus-visible{background:var(--mp-ink);color:#fff}
.mpdi-agents__avatar{
  width:140px;height:140px;
  margin:0 auto var(--mp-s5);
  overflow:hidden;
  background:#F4F4F5;
  box-shadow:0 0 0 4px #fff,0 0 0 6px var(--mp-line);
  transition:box-shadow var(--mp-dur) var(--mp-ease);
}
.mpdi-agents__card:hover .mpdi-agents__avatar{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--mp-brand)}
.mpdi-agents__avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.mpdi-agents__name{
  margin:0 0 var(--mp-s1);
  color:var(--mp-ink);
  font-size:var(--mp-fs-md);font-weight:700;line-height:1.3;
  text-transform:none;letter-spacing:0;
}
.mpdi-agents__role{margin:0;color:var(--mp-muted);font-size:var(--mp-fs-sm);font-weight:400;line-height:1.4}
.mpdi-agents__meta{margin:var(--mp-s3) 0 0;color:var(--mp-body);font-size:var(--mp-fs-sm)}
.mpdi-agents__cta{margin-top:var(--mp-s4)}
@media (max-width:575.98px){
  .mpdi-agents__card{padding:var(--mp-s6) var(--mp-s4) var(--mp-s5)}
  .mpdi-agents__avatar{width:120px;height:120px}
}


/* =====================================================================
   14. SECTION 7 — FEATURED ARTICLES (16:9 thumb, italic excerpt, date right)
   ===================================================================== */
.mpdi-articles__card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--mp-line);
  transition:border-color var(--mp-dur) var(--mp-ease),box-shadow var(--mp-dur) var(--mp-ease),transform var(--mp-dur) var(--mp-ease);
}
.mpdi-section--alt .mpdi-articles__card{border-color:transparent}
.mpdi-articles__card:hover,.mpdi-articles__card:focus-within{border-color:var(--mp-brand);box-shadow:0 18px 40px rgba(24,24,27,.10);transform:translateY(-4px)}
.mpdi-articles__media{aspect-ratio:16/9}
.mpdi-articles__card:hover .mpdi-articles__media img{transform:scale(1.04)}
.mpdi-articles__body{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--mp-s5)}
.mpdi-articles__cat{margin-bottom:var(--mp-s2)}
.mpdi-articles__title{
  margin:0 0 var(--mp-s2);
  color:var(--mp-ink);
  font-size:var(--mp-fs-base);font-weight:700;line-height:1.4;
  text-transform:none;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mpdi-articles__title a{color:inherit;text-decoration:none}
.mpdi-articles__title a:hover{color:var(--mp-brand)}
.mpdi-articles__excerpt{
  margin:0 0 var(--mp-s4);
  color:var(--mp-body);
  font-size:var(--mp-fs-sm);font-style:italic;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mpdi-articles__date{
  display:block;
  margin-top:auto;
  text-align:right;
  color:var(--mp-muted);            /* "lighter" than body but still 4.83:1 */
  font-size:var(--mp-fs-xs);font-weight:500;letter-spacing:.02em;
}

/* /articles listing (blog-card.css) — same language */
.blog-card{border-color:var(--mp-line);box-shadow:none}
.blog-card__cat{font-family:var(--mp-font)}
.blog-card p{font-style:italic}
.blog-card a:focus-visible{border-radius:0}
@media (max-width:575.98px){
  .mpdi-articles__excerpt{-webkit-line-clamp:4}
}


/* =====================================================================
   15. FOOTER + LET'S TALK BAND  (spec: Section 7 Pre-Footer Banner)
   ===================================================================== */
.talk-band{
  background:var(--mp-brand);
  padding:var(--mp-s7) 56px;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.06);
}
.talk-band__title{
  font-family:var(--mp-font);
  font-size:clamp(1.75rem,1rem + 2.4vw,3rem);
  font-weight:800;line-height:1.05;
  text-transform:uppercase;letter-spacing:-.01em;
  color:#fff;
}
.talk-band__arrow{color:#fff}
.talk-band__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--mp-s6);
  background:#fff;color:var(--mp-brand);
  border:2px solid #fff;
  font-size:var(--mp-fs-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--mp-track-btn);
  transition:background-color var(--mp-dur) var(--mp-ease),color var(--mp-dur) var(--mp-ease),border-color var(--mp-dur) var(--mp-ease);
}
.talk-band__btn:hover,.talk-band__btn:focus-visible{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff;transform:none;box-shadow:none}

.footer{background:var(--mp-ink)}
.footer::after{display:none}                       /* remote themeim watermark */
.footer,.footer p,.footer a{color:var(--mp-on-dark)}
.footer a:hover{color:#fff}
.footer h5{color:#fff;font-size:var(--mp-fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:var(--mp-track-label);margin-bottom:var(--mp-s4)}
.footer .brand img{height:56px}
.footer .brand img.brand__logo--light{filter:none}
.footer-links{gap:var(--mp-s3)}
.footer-links a{font-size:var(--mp-fs-sm)}
.footer .fc-ico{background:var(--mp-brand);color:#fff}
.footer .subscribe{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.footer .subscribe .form-control{font-family:var(--mp-font)}
.footer .subscribe button{background:var(--mp-brand)}
.footer .subscribe button:hover{background:#fff;color:var(--mp-brand)}
.footer-bar{background:#101012;border:1px solid rgba(255,255,255,.06);font-size:var(--mp-fs-sm)}
.soc{background:rgba(255,255,255,.08);color:#fff;width:40px;height:40px;flex-basis:40px}
.soc:hover,.soc:focus-visible{background:#fff;color:var(--mp-brand)}

@media (max-width:1199.98px){.talk-band{padding:var(--mp-s6) 40px}}
@media (max-width:991.98px){.talk-band{padding:var(--mp-s6)}}
@media (max-width:575.98px){
  .talk-band{padding:var(--mp-s5)}
  .talk-band__btn{width:100%}
}


/* =====================================================================
   16. QUICK-CONNECT DIALOG  (spec: UX suggestion 4 — agent Messenger modal)
   ===================================================================== */
.mpdi-qc{
  position:fixed;inset:0;margin:auto;
  z-index:var(--mp-z-dialog);
  width:calc(100% - 32px);max-width:520px;
  max-height:calc(100dvh - 32px);
  padding:0;border:0;
  background:#fff;color:var(--mp-body);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
  overflow:auto;
}
.mpdi-qc::backdrop{background:rgba(17,17,17,.6);backdrop-filter:blur(2px)}
.mpdi-qc:not([open]){display:none}
.mpdi-qc__inner{padding:var(--mp-s6)}
.mpdi-qc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mp-s4);margin-bottom:var(--mp-s4)}
.mpdi-qc__title{
  margin:0;
  color:var(--mp-ink);
  font-size:var(--mp-fs-lg);font-weight:800;line-height:1.2;
  text-transform:uppercase;letter-spacing:-.01em;
}
.mpdi-qc__close{
  flex:0 0 auto;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--mp-ink);border:1px solid var(--mp-line);
  font-size:1rem;cursor:pointer;
}
.mpdi-qc__close:hover{background:var(--mp-ink);color:#fff;border-color:var(--mp-ink)}
.mpdi-qc__agent{
  display:flex;align-items:center;gap:var(--mp-s3);
  margin:0 0 var(--mp-s4);
  color:var(--mp-ink);font-size:var(--mp-fs-sm);
}
.mpdi-qc__agent strong{font-weight:700}
.mpdi-qc__agent .mpdi-round{width:44px;height:44px;flex:0 0 44px;overflow:hidden;background:#F4F4F5}
.mpdi-qc__agent .mpdi-round img{width:100%;height:100%;object-fit:cover}
.mpdi-qc label{
  display:block;margin:0 0 var(--mp-s1);
  color:var(--mp-ink);font-size:var(--mp-fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--mp-track-label);
}
.mpdi-qc__project,
.mpdi-qc__message{
  width:100%;
  padding:10px var(--mp-s3);
  border:1px solid var(--mp-line);
  background:#fff;color:var(--mp-ink);
  font-family:var(--mp-font);font-size:.9375rem;line-height:1.5;
}
.mpdi-qc__project{min-height:44px;margin-bottom:var(--mp-s4)}
.mpdi-qc__message{min-height:120px;resize:vertical;background:var(--mp-bg)}
.mpdi-qc__message[readonly]{color:var(--mp-body)}
.mpdi-qc__project:focus,.mpdi-qc__message:focus{border-color:var(--mp-brand);outline:2px solid var(--mp-brand);outline-offset:0}
.mpdi-qc__hint{margin:var(--mp-s2) 0 0;color:var(--mp-muted);font-size:var(--mp-fs-xs);line-height:1.5}
.mpdi-qc__actions{display:flex;gap:var(--mp-s3);margin-top:var(--mp-s5)}
.mpdi-qc__actions > *{flex:1 1 0}
.mpdi-qc__copy{min-height:48px}                 /* .mpdi-btn.mpdi-btn--outline: COPY MESSAGE */
.mpdi-qc__open{min-height:48px}                 /* .mpdi-btn.mpdi-btn--chat: OPEN MESSENGER (target=_blank) */
.mpdi-qc__open[aria-disabled="true"]{opacity:.55;pointer-events:none}
.mpdi-qc__status{
  display:block;min-height:1.25rem;margin:var(--mp-s3) 0 0;
  color:var(--mp-brand);font-size:var(--mp-fs-sm);font-weight:600;
}
.mpdi-qc__status:empty{margin:0;min-height:0}
.mpdi-qc__status.is-error{color:#B3261E}       /* 5.9:1 on #fff */
@media (max-width:479.98px){
  .mpdi-qc__inner{padding:var(--mp-s5)}
  .mpdi-qc__actions{flex-direction:column}
}
@media (prefers-reduced-motion:no-preference){
  .mpdi-qc[open]{animation:mpdi-qc-in .2s var(--mp-ease)}
  @keyframes mpdi-qc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}


/* =====================================================================
   17. MINI CEBU MAP  (spec: UX suggestion 2 — pins highlight per city)
   The SVG in assets/img/cebu-outline.svg is inlined by partials/cebu_map.php.
   ===================================================================== */
.mpdi-map-wrap{
  display:flex;flex-direction:column;align-items:center;
  padding:var(--mp-s4);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  color:#fff;
  height:100%;
}
.mpdi-map{display:block;width:auto;height:100%;max-height:360px;flex:1 1 auto;overflow:visible}
.mpdi-map__outline{fill:rgba(255,255,255,.92);stroke:var(--mp-brand);stroke-width:1.5;transition:fill var(--mp-dur) var(--mp-ease)}
.mpdi-map__pin{cursor:pointer;outline:none}
.mpdi-map__pin .mpdi-map__dot,
.mpdi-map__pin > circle:not(.mpdi-map__ring){
  fill:var(--mp-muted);stroke:#fff;stroke-width:1.5;r:5;
  transition:fill var(--mp-dur) var(--mp-ease),r var(--mp-dur) var(--mp-ease);
}
.mpdi-map__ring{fill:none;stroke:var(--mp-brand);stroke-width:1.5;opacity:0;r:5}
.mpdi-map__label{
  font-family:var(--mp-font);font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  fill:var(--mp-ink);
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;
  opacity:0;pointer-events:none;
  transition:opacity var(--mp-dur) var(--mp-ease);
}
.mpdi-map__pin.is-active .mpdi-map__dot,
.mpdi-map__pin.is-hot .mpdi-map__dot,
.mpdi-map__pin:hover .mpdi-map__dot,
.mpdi-map__pin:focus-visible .mpdi-map__dot,
.mpdi-map__pin.is-active > circle:not(.mpdi-map__ring),
.mpdi-map__pin.is-hot > circle:not(.mpdi-map__ring),
.mpdi-map__pin:hover > circle:not(.mpdi-map__ring),
.mpdi-map__pin:focus-visible > circle:not(.mpdi-map__ring){fill:var(--mp-brand);r:7}
.mpdi-map__pin.is-active .mpdi-map__label,
.mpdi-map__pin.is-hot .mpdi-map__label,
.mpdi-map__pin:hover .mpdi-map__label,
.mpdi-map__pin:focus-visible .mpdi-map__label{opacity:1}
.mpdi-map__pin.is-active .mpdi-map__ring,
.mpdi-map__pin.is-hot .mpdi-map__ring,
.mpdi-map__pin:focus-visible .mpdi-map__ring{opacity:1;animation:mpdi-pulse 1.4s ease-out infinite}
@keyframes mpdi-pulse{
  0%{r:6;opacity:.9}
  100%{r:16;opacity:0}
}
/* the map inside a light container (e.g. reused on /properties) */
.mpdi-map-wrap--light{background:var(--mp-bg);border-color:var(--mp-line);color:var(--mp-ink);backdrop-filter:none}
@media (prefers-reduced-motion:reduce){
  .mpdi-map__ring{animation:none !important;opacity:0 !important}
  .mpdi-map__pin .mpdi-map__dot,.mpdi-map__label,.mpdi-map__outline{transition:none}
}


/* =====================================================================
   18. FLOATING STACK  (spec: MOBILE OPTIMIZED — cookie bar / chat FAB /
       scroll-top must never overlap; everything square)
   ===================================================================== */
.scroll-top{
  width:44px;height:44px;
  right:var(--mp-s5);bottom:var(--mp-s5);
  background:#fff;color:var(--mp-brand);
  border:1px solid var(--mp-brand);
  box-shadow:0 10px 30px rgba(24,24,27,.14);
}
.scroll-top:hover{background:var(--mp-brand);color:#fff}

/* chat.css is linked from the widget partial in <body>, i.e. AFTER this file,
   so these are written as .mv-chat .x (0,2,0) to outrank its .x (0,1,0). */
.mv-chat .mv-chat__launch{
  right:var(--mp-s5);bottom:calc(var(--mp-s5) + 44px + var(--mp-s3));   /* stacked above scroll-top */
  width:52px;height:52px;
  box-shadow:0 10px 30px rgba(24,24,27,.22);
}
.mv-chat .mv-chat__launch:hover{transform:none;background:var(--mp-ink)}
.mv-chat .mv-chat__panel{bottom:calc(var(--mp-s5) + 44px + var(--mp-s3) + 52px + var(--mp-s3))}
.mv-chat .mv-chat__badge{border-color:#fff}
.mv-chat .mv-chat__launch:focus-visible,.mv-chat .mv-chat__x:focus-visible,.mv-chat .mv-chat__send:focus-visible,.mv-chat .mv-chat__submit:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--mp-brand)}
.mv-chat .mv-chat__submit,.mv-chat .mv-chat__send{font-family:var(--mp-font);font-weight:700;text-transform:uppercase;letter-spacing:var(--mp-track-btn)}
.mv-chat__title{font-weight:700;letter-spacing:var(--mp-track-btn)}

/* Cookie consent (#myvanConsent is Bootstrap .fixed-bottom, z-index 1030) */
#myvanConsent{font-family:var(--mp-font);background:var(--mp-ink) !important;border-top-color:rgba(255,255,255,.12) !important}
#myvanConsent .btn{min-height:40px}
#myvanConsent .btn-outline-light:hover{color:var(--mp-ink)}

@media (max-width:767.98px){
  .scroll-top{right:var(--mp-s4);bottom:var(--mp-s4)}
  .mv-chat .mv-chat__launch{right:var(--mp-s4);bottom:calc(var(--mp-s4) + 44px + var(--mp-s3));width:48px;height:48px}
  .mv-chat .mv-chat__panel{bottom:0}

  /* While the cookie bar is on screen: it reserves a 72px column on the right
     for the FAB, the FAB drops into that column, and scroll-top is withheld
     (there is nothing to scroll back to at first paint anyway). The bar is
     REMOVED from the DOM on Accept/Decline, so these rules release themselves. */
  #myvanConsent{padding-right:72px !important}
  #myvanConsent .container{padding-left:var(--mp-s4);padding-right:0}
  #myvanConsent .small{font-size:.8125rem;line-height:1.5}
  #myvanConsent .btn{flex:1 1 0;min-height:44px}
  body:has(#myvanConsent:not(.d-none)) .mv-chat .mv-chat__launch{bottom:var(--mp-s3);right:var(--mp-s3);z-index:1041}
  body:has(#myvanConsent:not(.d-none)) .scroll-top{opacity:0 !important;visibility:hidden !important}
}


/* =====================================================================
   19. INNER-PAGE ALIGNMENT  (retained Palace/pages.css components that
       should read as MPDI without a markup pass)
   ===================================================================== */
.prop-card,.project-card,.team-card,.service-card,.contact-card,.filter-card,.blog-card{box-shadow:none;border:1px solid var(--mp-line)}
.prop-card:hover,.project-card:hover,.service-card:hover{box-shadow:0 18px 40px rgba(24,24,27,.10);border-color:var(--mp-brand)}
.pager a,.pager span{font-weight:700}
.crumb,.crumb a{font-size:var(--mp-fs-sm)}
.page-hero__eyebrow{letter-spacing:var(--mp-track-label)}
.search-band{box-shadow:none}
.project-card__loc,.prop-loc{font-weight:600;font-size:var(--mp-fs-sm)}
.leaflet-tooltip{font-family:var(--mp-font)}


/* =====================================================================
   20. PRINT
   ===================================================================== */
@media print{
  .mpdi-sticky-bar,.scroll-top,#myvanChat,#myvanConsent,.hero-v2__video,.hero-v2__rail,.hero-v2__social,
  .mpdi-qc,.mpdi-tour__cta,.mpdi-featured__cta,.hero-v2__actions,.header-cta,.mpdi-agents__chat{display:none !important}
  .site-header{position:static !important;background:#fff !important;box-shadow:none}
  .mpdi-hero{min-height:0;background:#fff}
  .mpdi-hero .hero-v2__image::after{background:none}
  .mpdi-hero h1,.mpdi-hero .hero-v2__title,.mpdi-hero .hero-v2__lead,.mpdi-hero .hero-v2__eyebrow{color:#000}
  .mpdi-section{padding:24px 0;background:#fff !important;color:#000}
  .mpdi-section--dark .mpdi-h2,.mpdi-section--dark p,.mpdi-pick__card,.mpdi-pick__title,.mpdi-pick__text{color:#000;background:#fff !important}
  .mpdi-pick__text{max-height:none;opacity:1}
  .mpdi-props__card,.mpdi-featured__card,.mpdi-agents__card,.mpdi-articles__card,.mpdi-pick__card{break-inside:avoid;border:1px solid #999}
  .talk-band,.footer{background:#fff !important;color:#000 !important;box-shadow:none}
  .talk-band__title,.footer,.footer p,.footer a,.footer h5{color:#000 !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75rem;color:#555}
  .mpdi-btn::after,.talk-band__btn::after{content:none}
}

/* =====================================================================
   PRICING OFF (Settings > Pricing, prices_enabled() false): the amount slot
   on project cards and unit-type cards becomes a lead-funnel link.
   ===================================================================== */
.price-ask{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:1rem;color:var(--mp-brand);text-decoration:none;line-height:1.3}
.price-ask:hover,.price-ask:focus-visible{color:var(--mp-brand-dark);text-decoration:underline}
.project-card__from .price-ask{font-size:1.05rem}
.utype-card__price .price-ask{display:flex;font-size:1rem}