/* ==========================================================================
   MODE PROPERTIES — design system
   Navy #012169 (sampled from the logo artwork) + champagne gold.
   Mobile-first. WCAG 2.1 AA in every state. No framework, no builder.
   ========================================================================== */

/* --------------------------------------------------------------- 0. Fonts */
/*
 * SWITZER (Indian Type Foundry, ITF Free Font Licence) — self-hosted variable.
 * Söhne (Klim) is Mode's logo typeface but needs a paid webfont licence.
 * Switzer is the closest free relative: both are Helvetica/Akzidenz-descended
 * neo-grotesques with tight terminals, so if Mode ever licenses Söhne it is a
 * like-for-like swap in this one block and nothing else in the system moves.
 *
 * INSTRUMENT SERIF (SIL OFL) — display only, never below ~28px. It has no text
 * weights, so it is reserved for the hero H1, section H2s and pull-quotes.
 * Deliberately NOT Playfair Display: that is the default serif of every
 * off-the-shelf Dubai real-estate template and reads instantly cheap.
 */
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-variable.woff2") format("woff2-variations"),
       url("../fonts/switzer-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-variable-italic.woff2") format("woff2-variations"),
       url("../fonts/switzer-variable-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand */
  --navy:        #012169;
  --navy-deep:   #010f35;
  --navy-mid:    #052a80;
  --navy-soft:   #eef1f8;

  --gold:        #c9a227;
  --gold-light:  #e3c060;
  --gold-soft:   #f7f1de;
  /* Accessible gold for TEXT on light surfaces — the bright gold fails AA. */
  --gold-text:   #7a5e12;

  --cream:       #f7f6f3;
  --white:       #ffffff;
  --charcoal:    #14161a;

  /* Text */
  --text:        #14161a;
  --text-soft:   #4a4f57;
  --text-mute:   #666d7a;   /* AA on white (5.21) and cream (4.82) */
  --text-invert: #ffffff;
  --text-invert-soft: rgba(255, 255, 255, 0.78);

  /* Lines & surfaces */
  --line:        #e3e5ea;
  --line-strong: #cdd2db;  /* decorative edges only */
  --line-field:  #888f9c;  /* form controls — 3.25:1 on white, WCAG 1.4.11 */
  --line-invert: rgba(255, 255, 255, 0.18);
  --surface:     #ffffff;
  --surface-alt: var(--cream);

  /* Type families */
  --font-sans:  "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* Type scale — fluid, no media queries needed.
     Sized so the hero headline holds two or three lines, not a full screen. 
     */
  --f-display: clamp(2.35rem, 1.5rem + 3.1vw, 4.25rem);
  --f-h1:      clamp(2.1rem, 1.5rem + 2.8vw, 3.75rem);
  --f-h2:      clamp(1.65rem, 1.3rem + 1.8vw, 2.75rem);
  --f-h3:      clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --f-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --f-body:    1.0625rem;
  /*
   * Raised across the board. --f-small carried the project verdict, the
   * highlight ticks, the disclaimer and 24 other places, and --f-micro the spec
   * labels — at 14px and 12px they read as fine print on a site whose whole
   * argument is the advice in that copy. 15px and 13px is still clearly
   * secondary type, just legible enough to be read rather than skipped.
   *
   * One change here moves every one of those places at once, which is the point
   * of having the scale.
   *
   * Raised a second time on 10 Sep: 15px still read as fine print against the
   * headings around it. The whole scale steps up together — micro 13->14, small
   * 15->16, body 16->17 — so the relationships hold and nothing collapses into
   * the size above it.
   */
  --f-small:   1rem;
  --f-micro:   0.875rem;

  /* Spacing */
  --pad:       clamp(20px, 5vw, 40px);   /* page gutter */
  /* Rhythm. A background CHANGE earns full padding; within one background the
     gap should be about a third of that. 128px was separating sections the
     background already separated — doing the same job twice. */
  /* Third pass, ~30% tighter again. At 88px top and bottom the default section
     put 176px of empty ground between two blocks of content on a laptop, and
     the site read as a series of islands rather than a page. */
  --sec-lg:    clamp(52px, 5.6vw, 84px);  /* background-change bands */
  --sec:       clamp(34px, 4.2vw, 60px);  /* default */
  --sec-sm:    clamp(22px, 2.8vw, 38px);  /* strips, spec bars, page headers */
  --gap:       clamp(16px, 2.5vw, 32px);
  /* Three containers. One 1440 container for everything forces every non-grid
     component to choose between "too wide to read" and "half the page empty".
     Grids scale to fill; text does not. */
  --maxw:         1440px;   /* full: header, heroes, homepage bands, archives, card grids */
  --maxw-content: 1240px;   /* article + sticky-rail layouts */
  --maxw-narrow:  880px;    /* single-column reading: FAQ, legal, blog, contact */
  --maxw-text:    78ch;     /* the reading measure itself */

  /* Motion & shape.
     Sharpened from 4/8/16px. Soft radii + pill badges + hover-lifts are
     friendly-SaaS language; luxury reads as near-square geometry. */
  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.5s;

  --shadow:    0 1px 2px rgba(1, 33, 105, 0.04), 0 8px 24px rgba(1, 33, 105, 0.06);
  --shadow-lg: 0 2px 4px rgba(1, 33, 105, 0.06), 0 24px 56px rgba(1, 33, 105, 0.12);

  --header-h: 84px;
}

/* --------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--f-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* horizontal-overflow guard */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/*
 * H1/H2 are the display voice — serif. H3/H4 stay in the grotesque so long
 * lists of card titles keep their density. Serif wants near-zero tracking:
 * the -0.022em that suits a grotesque crushes it.
 */
/*
 * Headings are the sans.
 *
 * Instrument Serif was the display face, but it was never actually rendering:
 * the shipped font files were the wrong subsets, so every heading fell back to
 * Georgia until v3.1.0 fixed them. Seeing the intended serif for the first time,
 * the answer was that it is not the right voice for this brand — the grotesque
 * reads as the modern, precise advisory Mode is selling, where the serif reads
 * editorial. Same family and weight as the h3s throughout.
 *
 * The serif is still loaded and available as var(--font-serif) if a display
 * moment ever wants it.
 */
h1, h2 {
  margin: 0 0 0.4em;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
}
h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: var(--f-h1); }
h2 { font-size: var(--f-h2); }
h3 { font-size: var(--f-h3); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-mid); }

/* Visible focus everywhere — never remove without a replacement. */
:focus-visible {
  outline: 3px solid var(--gold-text);   /* 6.11:1 on white — the bright gold is only 2.42:1 */
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--navy); color: #fff; }

.mp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.mp-skip {
  position: absolute; left: 8px; top: -60px;
  z-index: 200; padding: 12px 20px;
  background: var(--navy); color: #fff;
  border-radius: var(--r); text-decoration: none;
  transition: top 0.2s;
}
.mp-skip:focus { top: 8px; color: #fff; }

/* --------------------------------------------------------------- 3. Layout */
.mp-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.mp-wrap--content { max-width: var(--maxw-content); }
.mp-wrap--narrow  { max-width: var(--maxw-narrow); }

/*
 * Article + sticky rail. At 1440 this resolves to a ~704px main column
 * (≈72–75ch — a correct long-form measure) with the remaining width doing
 * actual work instead of sitting empty.
 */
.mp-article { display: grid; gap: clamp(32px, 5vw, 48px); }
.mp-article__main { display: grid; gap: clamp(28px, 4vw, 48px); min-width: 0; }
.mp-article .mp-prose { max-width: 78ch; min-width: 0; }

.mp-rail { display: grid; gap: 18px; }
.mp-rail__card {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  display: grid; gap: 16px;
}
.mp-rail__card h3 { margin: 0; font-size: 1.0625rem; }
.mp-rail__card ul a,
.mp-rail__card > p > a { display: inline-flex; align-items: center; min-height: 26px; }
.mp-rail__facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.mp-rail__facts .mp-spec { padding: 16px 18px; }

@media (min-width: 1100px) {
  .mp-article {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: clamp(56px, 7vw, 96px);
    align-items: start;
  }
  .mp-article__rail { position: sticky; top: calc(var(--header-h) + 32px); }
  .mp-article .mp-prose { max-width: none; }   /* the column IS the measure */
}
.mp-section { padding-block: var(--sec); }
.mp-section--lg    { padding-block: var(--sec-lg); }
.mp-section--tight { padding-block: var(--sec-sm); }

/* Collapse the shared gap between same-background sections. */
.mp-section:not(.mp-section--alt):not(.mp-section--navy)
  + .mp-section:not(.mp-section--alt):not(.mp-section--navy),
.mp-section--alt + .mp-section--alt,
.mp-section--navy + .mp-section--navy {
  padding-top: calc(var(--sec) * 0.35);
}

.mp-section--alt   { background: var(--surface-alt); }
.mp-section--navy  { background: var(--navy); color: var(--text-invert); }
.mp-section--navy h1, .mp-section--navy h2, .mp-section--navy h3 { color: #fff; }
.mp-section--navy p { color: var(--text-invert-soft); }
.mp-section--navy a { color: #fff; }

.mp-grid { display: grid; gap: var(--gap); }
.mp-grid--2 { grid-template-columns: 1fr; }
.mp-grid--3 { grid-template-columns: 1fr; }
.mp-grid--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 700px) {
  .mp-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
/* 780, not 700: at 700 a two-up card column is 256px of usable text and the
   longest project title needs 278px, so it broke onto a second line. */
@media (min-width: 780px) {
  .mp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .mp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/*
 * Three columns from 1200, not 1000. Measured: at a 1000px viewport a card
 * column is 240px of usable text and the longest project title needs 278px, so
 * every long name broke onto a second line. At 1200 the column is 305px and all
 * twelve fit on one line. Two columns between 1000 and 1200 is the correct
 * answer, not a smaller typeface.
 */
@media (min-width: 1200px) {
  .mp-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------- 4. Section header */
.mp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  /* 12px -> 15px across two passes. At 0.16em tracking in uppercase this reads
     as a real label rather than fine print, and still sits clearly under the h2
     beneath it. Applies to every section label on the site — they should not
     disagree with each other. Third pass: 15px -> 18px. */
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}
.mp-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--gold);
}
.mp-section--navy .mp-eyebrow { color: var(--gold); }

/*
 * Section header.
 *
 * MOBILE FIRST: single column, full width, natural stacking.
 *
 * DESKTOP: an editorial two-column split — eyebrow and heading on the left,
 * intro paragraph on the right, baselines aligned. Previously the whole block
 * was capped at 68ch, which is the right measure for READING a paragraph but
 * wrong for a section header: on a wide container it left the entire right half
 * of every section empty and made each intro break after two or three words.
 * The paragraph still gets a comfortable measure — it just sits beside the
 * heading instead of under it.
 */
/*
 * NO WIDTH CAP ANYWHERE IN A SECTION HEADER — not on the box, not on the
 * paragraph.
 *
 * --maxw-text is 78ch, which resolved to 764px inside a 1360px band. On the
 * heading it broke titles that had room to spare ("Advice built on data,
 * delivered by specialists" needs 847px; "Everything you need to invest in and
 * relocate to Dubai" needs 1027px). Moving it to the paragraph just moved the
 * problem: the Insights intro then stopped at 764px and read as cut off.
 *
 * A section header is one heading and one sentence. It is not long-form, so it
 * does not want a reading measure. Article body copy still has one, on
 * .mp-prose, where multiple paragraphs actually benefit.
 */
.mp-sec-head { margin-bottom: clamp(22px, 3.4vw, 40px); }
.mp-sec-head p { font-size: var(--f-lead); color: var(--text-soft); }
.mp-section--navy .mp-sec-head p { color: var(--text-invert-soft); }

/*
 * STACKED BY DEFAULT.
 *
 * This used to be a two-column editorial split on every section: eyebrow and
 * heading left, intro paragraph in a second column to the right. It read
 * wrong on every page it appeared on. The intro sat level with the BOTTOM of
 * the heading, so it looked like a stray sentence floating beside the title
 * rather than the section's opening line — and squeezing the heading into
 * 1.15fr forced short titles like "What the Dubai market is actually doing"
 * onto two awkward lines when they had the width to sit on one.
 *
 * The split now needs opting into with --split, and nothing does. Headings run
 * the full width of their band and the intro follows underneath, which is what
 * every section on the site was actually asking for.
 */
@media (min-width: 1000px) {
  .mp-sec-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    column-gap: clamp(40px, 6vw, 88px);
    align-items: end;
  }
  .mp-sec-head--split > .mp-eyebrow { grid-column: 1; grid-row: 1; }
  .mp-sec-head--split > h1,
  .mp-sec-head--split > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .mp-sec-head--split > p  { grid-column: 2; grid-row: 2; margin: 0; max-width: 58ch; }

  /* Never split inside the narrow reading container — 800px cannot carry two
     columns, and the intro collapses to ~336px. */
  .mp-wrap--narrow .mp-sec-head { display: block; max-width: none; }

  /* Centred variants stay single-column and centred. */
  .mp-center .mp-sec-head,
  .mp-sec-head--center { display: block; max-width: var(--maxw-text); margin-inline: auto; }
}

/* --------------------------------------------------------------- 4b. Selects */
/*
 * Native selects render with the OS chrome, which looked like a system dialog
 * dropped into the page. Reset the appearance and draw our own chevron.
 */
select {
  appearance: none; -webkit-appearance: none;
  min-height: 48px;
  padding: 12px 42px 12px 14px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23012169' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  color: var(--text);
  font-size: var(--f-small);
  cursor: pointer;
  max-width: 100%;
}

/*
 * iOS zooms the whole page when a form control smaller than 16px takes focus,
 * and the user never zooms back out. Selects were 14px, so every filter and
 * sort control did it. Text inputs were already 16px; this closes the gap.
 */
@media (max-width: 820px) {
  select,
  .mp-field input,
  .mp-field select,
  .mp-field textarea { font-size: 16px; }
}
select:hover { border-color: var(--navy); }

/* --------------------------------------------------------------- 5. Buttons */
.mp-btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;               /* WCAG 2.2 target size, comfortably */
  padding: 13px 28px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  font-size: var(--f-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.2s var(--ease);
}
.mp-btn:hover { --btn-bg: var(--navy-mid); --btn-bd: var(--navy-mid); color: #fff; }

.mp-btn--gold  { --btn-bg: var(--gold); --btn-fg: var(--charcoal); --btn-bd: var(--gold); color: var(--charcoal); }
.mp-btn--gold:hover { --btn-bg: #d8b23c; --btn-bd: #d8b23c; color: var(--charcoal); }

.mp-btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--line-strong); }
.mp-btn--ghost:hover { --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy); color: #fff; }

.mp-section--navy .mp-btn--ghost,
.mp-hero .mp-btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.45); color: #fff; }
.mp-section--navy .mp-btn--ghost:hover,
.mp-hero .mp-btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; color: var(--navy); }

.mp-btn--block { width: 100%; }
.mp-btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

.mp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Centred variant, for a call to action inside body copy rather than in a
   header or card footer. justify-content alone is enough — the row is already
   flex, and the button keeps its own width instead of stretching. */
.mp-btn-row--center { justify-content: center; }

/* Text link with arrow */
.mp-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: var(--f-small);
  color: var(--navy); text-decoration: none;
}
.mp-link { position: relative; padding-bottom: 3px; }
.mp-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.mp-link:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------- 6. Header */
.mp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease);
}
.mp-header.is-stuck { box-shadow: var(--shadow); }

.mp-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--header-h);
}
.mp-logo { display: flex; align-items: center; flex-shrink: 0; }
.mp-logo img, .mp-logo svg { height: 42px; width: auto; }

.mp-nav { display: none; }
.mp-nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mp-nav a {
  display: block; padding: 11px 15px;
  font-size: 1.0625rem; font-weight: 500;
  color: var(--text); text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 0.2s, background 0.2s;
}
.mp-nav a:hover,
.mp-nav .current-menu-item > a { color: var(--navy); background: var(--navy-soft); }

.mp-header__cta { display: none; font-size: 1rem; }

/* Sub-menus */
.mp-nav li { position: relative; }
.mp-nav .sub-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 240px; flex-direction: column; align-items: stretch; gap: 0;
  padding: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.mp-nav li:hover > .sub-menu,
.mp-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

@media (min-width: 1060px) {
  .mp-nav { display: block; }
  .mp-header__cta { display: inline-flex; }
}

/* Burger */
.mp-burger {
  /* Visibility is set below, AFTER the desktop media query — a `display` here
     would win on source order and leave the burger showing on desktop. */
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer;
}
.mp-burger span {
  display: block; width: 20px; height: 2px; background: var(--navy);
  position: relative; transition: background 0.2s;
}
.mp-burger span::before, .mp-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy);
  transition: transform 0.3s var(--ease);
}
.mp-burger span::before { top: -6px; }
.mp-burger span::after  { top: 6px; }
.mp-burger[aria-expanded="true"] span { background: transparent; }
.mp-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.mp-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Burger + drawer are mobile-only. Declared after the base rule so source order
   cannot resurrect them on desktop. */
.mp-burger { display: inline-flex; }
@media (min-width: 1060px) {
  .mp-burger { display: none !important; }
  .mp-drawer { display: none !important; }
}

/* Mobile drawer */
.mp-drawer {
  position: fixed; inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: #fff;
  padding: 24px var(--pad) 48px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0.4s;
}
.mp-drawer.is-open { transform: translateX(0); visibility: visible; }
.mp-drawer ul { list-style: none; margin: 0 0 24px; padding: 0; }
.mp-drawer li + li { border-top: 1px solid var(--line); }
.mp-drawer ul a {
  display: block; padding: 16px 0;
  font-size: 1.0625rem; font-weight: 500;
  color: var(--text); text-decoration: none;
}
/* The CTA is a button, not a nav link — keep its own colours. */
.mp-drawer .mp-btn { color: var(--btn-fg); }
.mp-drawer .sub-menu { margin: 0 0 0 16px; }
.mp-drawer .sub-menu a { font-size: 0.95rem; color: var(--text-soft); padding: 12px 0; }
body.mp-locked { overflow: hidden; }

/* --------------------------------------------------------------- 7. Hero */
.mp-hero {
  position: relative;
  min-height: clamp(560px, 88vh, 860px);
  display: flex; align-items: center;
  background: var(--navy-deep);
  overflow: hidden;
}
/*
 * Let the photograph win. Previously the image sat at 0.55 opacity UNDER a
 * 0.94 gradient, so the picture was never really visible. Now the image is
 * full-strength and the scrim runs only behind the text column — the approach
 * Emaar and Knight Frank use.
 */
.mp-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.mp-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(1,15,53,0.88) 0%, rgba(1,15,53,0.62) 38%, rgba(1,15,53,0.12) 68%, rgba(1,15,53,0.05) 100%),
    linear-gradient(to top, rgba(1,15,53,0.55) 0%, transparent 42%);
}
.mp-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(72px, 12vh, 120px); }
/*
 * FULL WIDTH BY DEFAULT.
 *
 * Every page header — Careers, About, Services, a single project, the projects
 * archive — was clamped to 52rem inside a 1440px wrap, so the heading and its
 * intro sat in a column barely half the band and read as cut off. They now use
 * the width they were given.
 *
 * The home hero is the exception and keeps a measure: its text sits over a
 * photograph behind a scrim that fades out by 68%, so a full-width line would
 * run onto the bright half of the picture and stop being readable.
 */
.mp-hero__content { max-width: none; color: #fff; }
.mp-hero--home .mp-hero__content { max-width: 52rem; }
.mp-hero h1 {
  font-size: var(--f-display);
  font-weight: 400;
  color: #fff;
  line-height: 1.04;
  letter-spacing: -0.01em;
  /* No 22ch cap. It folded "Projects We Have Advised On" after "We" and
     "A new standard for advisors" mid-phrase, on headings with room to spare. */
  margin-bottom: 18px;
}
.mp-hero--home h1 { max-width: 22ch; }
.mp-hero__sub {
  font-size: var(--f-lead);
  color: var(--text-invert-soft);
  /* No measure. 78ch resolved to roughly 740px inside a 1360px band, which is
     what cut the Golden Visa and Buy & Sell straplines in half. The home hero
     keeps its measure below, because that text sits over a photograph. */
  margin-bottom: 32px;
}
.mp-hero--home .mp-hero__sub { max-width: 62rem; }
.mp-hero .mp-eyebrow { color: var(--gold); }

/* Curated entry points (replaces the portal-style search widget) */
.mp-hero__entries {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid; gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 780px) { .mp-hero__entries { grid-template-columns: repeat(3, 1fr); } }

.mp-entry {
  display: block;
  padding: 22px clamp(18px, 2.5vw, 28px);
  background: rgba(1, 15, 53, 0.55);
  backdrop-filter: blur(8px);
  color: #fff; text-decoration: none;
  transition: background 0.35s var(--ease);
}
.mp-entry:hover { background: rgba(1, 33, 105, 0.9); color: #fff; }
.mp-entry strong {
  display: block; font-size: 1.1875rem; font-weight: 600; margin-bottom: 6px;
}
/* Was --f-micro, the smallest type on the page, carrying the thing the card is
   actually claiming — 50+ developers, 100+ communities. Up two steps to 15px,
   with the line-height a longer sub-line now needs. */
.mp-entry span { display: block; font-size: 0.9375rem; line-height: 1.45; color: var(--text-invert-soft); }

/* Hero quick-search */
.mp-quicksearch {
  margin-top: clamp(32px, 5vw, 48px);
  padding: 16px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid; gap: 12px;
}
.mp-quicksearch label { font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); display: block; margin-bottom: 6px; }
.mp-quicksearch select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line-field); border-radius: var(--r);
  color: var(--text);
}
@media (min-width: 860px) {
  .mp-quicksearch { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; }
}

/* --------------------------------------------------------------- 8. Cards */
.mp-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mp-card:hover { border-color: var(--navy); }

.mp-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-soft); }
.mp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.mp-card:hover .mp-card__media img { transform: scale(1.05); }

.mp-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mp-card__title { font-size: 1.1875rem; margin: 0; }
.mp-card__title a { color: var(--navy); text-decoration: none; }
.mp-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole-card click target */
.mp-card__meta { font-size: var(--f-small); color: var(--text-mute); display: flex; align-items: center; gap: 6px; }
/* 15px -> 17px. This is the service-tile body copy, not fine print. */
.mp-card__excerpt { font-size: var(--f-body); color: var(--text-soft); line-height: 1.6; }
.mp-card__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.mp-card__price { font-size: 1.0625rem; font-weight: 600; color: var(--navy); }
.mp-card__price small { display: block; font-size: var(--f-micro); font-weight: 500; color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase; }

/* Badges */
.mp-badge {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 0;
  background: var(--navy-soft); color: var(--navy);
}
.mp-badge--gold  { background: var(--gold-soft); color: var(--gold-text); }
.mp-badge--solid { background: var(--navy); color: #fff; }
.mp-card__badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-card__badges .mp-badge { background: rgba(255,255,255,0.95); color: var(--navy); backdrop-filter: blur(6px); }

/* --------------------------------------------------- 8b. Flagship project */
/*
 * One project treated editorially instead of as a seventh identical card.
 * Hierarchy is what separates an advisory from a portal — and the "Mode
 * verdict" line is the thing no Dubai listings site has: an opinion.
 */
.mp-flagship { display: grid; gap: 0; border: 1px solid var(--line); }
/* 1.25fr, not 1.35fr. The text column was 474px and "Palm Jebel Ali by
   Nakheel" needs 511px to stay on one line. */
@media (min-width: 900px) { .mp-flagship { grid-template-columns: 1.25fr 1fr; } }

.mp-flagship__media { position: relative; min-height: 320px; background: var(--navy-soft); }
.mp-flagship__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .mp-flagship__media { min-height: 520px; } }

.mp-flagship__body {
  padding: clamp(28px, 4vw, 52px);
  display: flex; flex-direction: column; gap: 18px;
  background: var(--surface);
}
.mp-flagship__body h3 {
  /* Sans, like every other heading. This override survived the switch away from
     Instrument Serif and left the homepage lead in a different face to the rest
     of the page. */
  font-family: var(--font-sans); font-weight: 600;
  /*
   * Sized to the COLUMN, not the viewport. The body is roughly (100vw - 80px)
   * / 2.25 minus its own padding, so between 900 and 1400 it narrows faster
   * than a normal 1.7vw heading grows — which is why "Palm Jebel Ali by
   * Nakheel" split after "Ali" at every desktop width below 1440 while looking
   * fine at 1440. The slope below tracks the column: measured against all
   * twelve project names, the longest stays on one line from 900px up.
   */
  font-size: clamp(1.5rem, 3.1vw - 3px, 2.5rem);
  line-height: 1.08; letter-spacing: -0.005em; margin: 0;
}
.mp-flagship__facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px; padding-block: 20px;
  border-block: 1px solid var(--line);
}
.mp-verdict {
  padding: 18px 20px;
  background: var(--gold-soft);
  border-left: 2px solid var(--gold);
}
.mp-verdict__label {
  display: block; margin-bottom: 6px;
  font-size: var(--f-micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-text);
}
.mp-verdict p { margin: 0; font-size: var(--f-body); line-height: 1.65; color: var(--text); }

/* --------------------------------------------------- 8b2. Story + image */
/*
 * A prose column alone in a 1440 container leaves half the page empty. Pair it
 * with an image so the width is doing something, and let the image go
 * full-bleed-ish on its side rather than sitting in a card.
 */
.mp-storysplit { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) {
  .mp-storysplit { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(48px, 6vw, 88px); }
  .mp-storysplit .mp-prose { max-width: none; }
  .mp-storysplit__media { position: sticky; top: calc(var(--header-h) + 32px); }
}
.mp-storysplit__media { margin: 0; }
.mp-storysplit__media img { width: 100%; height: auto; border-radius: var(--r); }
.mp-storysplit__media .mp-placeholder { min-height: 420px; }

/* ------------------------------------------------------- 8c. Process steps */
.mp-steps { counter-reset: mp-step; display: grid; gap: 0; }
@media (min-width: 760px)  { .mp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mp-steps { grid-template-columns: repeat(3, 1fr); } }

.mp-step {
  counter-increment: mp-step;
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px; /* collapse into a single hairline grid */
}
.mp-step::before {
  content: counter(mp-step, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.75rem; line-height: 1;
  color: var(--gold-text);
}
.mp-step h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.mp-step p  { font-size: var(--f-small); color: var(--text-soft); margin: 0; }

.mp-section--navy .mp-step { border-color: var(--line-invert); }
.mp-section--navy .mp-step::before { color: var(--gold); }
.mp-section--navy .mp-step p { color: var(--text-invert-soft); }

/* --------------------------------------------------------- 8d. Advisors */
.mp-advisor { display: flex; flex-direction: column; gap: 14px; }
.mp-advisor__photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--navy-soft);
}
/* In colour. The greyscale was hiding the one thing these photographs are for —
   there are five real faces here now, not placeholder silhouettes. */
.mp-advisor__photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-advisor__name { font-size: 1.0625rem; font-weight: 600; color: var(--navy); margin: 0; }
.mp-advisor__role { font-size: var(--f-small); color: var(--text-mute); margin: 0; }
.mp-advisor__spec {
  font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-text); margin: 0;
}

/* ------------------------------------------------------- 8e. Market data */
.mp-stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .mp-stats { grid-template-columns: repeat(3, 1fr); } }
.mp-stat { padding: clamp(26px, 3.5vw, 40px); background: var(--surface); }
.mp-stat__value {
  display: block;
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1; color: var(--navy); margin-bottom: 12px;
}
.mp-stat__label { display: block; font-size: var(--f-small); color: var(--text); margin-bottom: 10px; }
.mp-stat__source { display: block; font-size: var(--f-micro); color: var(--text-mute); }

/* --------------------------------------------------------------- 9. Counters */
/*
 * Counters. Two things here are deliberate, both because the strip must not
 * assume how MANY counters there are — the set is editable in theme options, and
 * hardcoding six is what put an empty pale cell on the end when one was removed.
 *
 * 1. The container is NAVY, not the line colour. The separators are drawn as a
 *    hairline ring on each counter instead, so a row that does not divide evenly
 *    leaves navy — invisible — rather than a lit block of --line-invert.
 * 2. auto-fit at the wide breakpoint. auto-fit COLLAPSES empty tracks (auto-fill
 *    would keep them), so five counters become five equal columns filling the
 *    width rather than five-sixths of it.
 */
.mp-counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--navy); border: 1px solid var(--line-invert); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 760px) { .mp-counters { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mp-counters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

.mp-counter { padding: clamp(24px, 4vw, 38px) 18px; text-align: center; background: var(--navy); box-shadow: 0 0 0 1px var(--line-invert); }
.mp-counter__value {
  display: block;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mp-counter__label {
  display: block; margin-top: 10px;
  font-size: var(--f-micro); font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-invert-soft);
  line-height: 1.45;
}

/* ------------------------------------------------------------ 10. Partners */
.mp-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); }

/* Partner marquee — continuous, seamless, pauses on hover and on keyboard focus. */
.mp-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mp-marquee__track {
  display: flex; align-items: center;
  width: max-content;
  gap: clamp(40px, 6vw, 88px);
  padding-block: 6px;
  animation: mp-scroll 42s linear infinite;
}
.mp-marquee:hover .mp-marquee__track,
.mp-marquee:focus-within .mp-marquee__track { animation-play-state: paused; }

.mp-marquee .mp-partner { flex: 0 0 auto; }

@keyframes mp-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* the list is duplicated once */
}

@media (prefers-reduced-motion: reduce) {
  .mp-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .mp-marquee { -webkit-mask-image: none; mask-image: none; }
}
.mp-partner {
  display: inline-flex; align-items: center; justify-content: center;
  /* No grayscale. These are developer marks a Dubai buyer recognises on sight —
     Emaar's blue, DAMAC's navy — and desaturating them throws away the only
     reason the strip works. It was also flattening three brand colours into the
     same grey, so the logos read as one undifferentiated row. */
  height: 48px;   /* overridden inline per logo — see mp_partner_logo_height() */
  transition: opacity 0.3s var(--ease);
}
/*
 * Both axes capped, but the WIDTH cap has to be generous or it throttles the
 * wide wordmarks into invisibility. At 148px DAMAC (7.9:1) rendered 19px tall
 * and Omniyat (7.5:1) 20px, against 48px for a square mark like Nakheel — a
 * two-and-a-half-fold mismatch, which is exactly what it looked like.
 *
 * At 300px the same two land at 38px and 40px, roughly doubling, and the whole
 * set now sits in a 38-48px band instead of 19-48. Long wordmarks do get wide,
 * which is correct: that is their shape, and the marquee scrolls.
 *
 * HEIGHT, not max-height. max-height only ever shrinks: DAMAC's source is
 * intrinsically 236x30, under both caps, so it rendered at its natural 30px
 * while everything else filled 48. Browser-measured, not calculated — the
 * arithmetic said 38px and the browser said 30.
 *
 * Source files are trimmed to their ink, so the box the browser scales is the
 * artwork rather than the artwork plus its padding — without that no cap helps.
 */
/* 380, not 300. The cap used to bind on the widest wordmarks, which meant their
   height override did nothing at all — the width decided the size instead. */
.mp-partner img { height: 100%; max-width: 380px; width: auto; object-fit: contain; }
.mp-partner__text { font-weight: 600; letter-spacing: 0.06em; color: var(--text-mute); font-size: var(--f-small); text-transform: uppercase; }

/* ------------------------------------------------------------- 11. Filters */
.mp-filterbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
}
.mp-filterbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mp-filter-toggle { display: inline-flex; }
.mp-result-count { font-size: var(--f-small); color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* Applied-filter chips — removable, per the faceted-search research */
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 6px 8px 6px 14px;
  background: var(--navy-soft); color: var(--navy);
  border: 1px solid transparent; border-radius: 2px;
  font-size: var(--f-small); font-weight: 500;
  text-decoration: none;
}
.mp-chip:hover { border-color: var(--navy); color: var(--navy); }
.mp-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(1, 33, 105, 0.12);
  font-size: 13px; line-height: 1;
}
.mp-chip--clear { background: transparent; color: var(--text-mute); text-decoration: underline; padding-inline: 6px; }

/* Filter panel: drawer on mobile, inline sidebar on desktop */
.mp-filters {
  position: fixed; inset: 0; z-index: 120;
  background: #fff;
  padding: 20px var(--pad) 120px;
  overflow-y: auto;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0.4s;
}
.mp-filters.is-open { transform: translateY(0); visibility: visible; }

/*
 * The panel scrolled and "Apply filters" sat below the fold, so the button you
 * need in order to leave the panel was the one thing you could not see. The
 * list scrolls; the head and the apply row stay put.
 */
.mp-filters {
  display: flex;
  flex-direction: column;
}
.mp-filters__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mp-filters__apply {
  position: sticky; bottom: 0;
  background: var(--bg);
  padding-top: 12px;
  box-shadow: 0 -8px 16px -12px rgba(0,0,0,0.35);
}
.mp-filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.mp-filters__apply {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
}
.mp-fgroup { padding-block: 18px; border-bottom: 1px solid var(--line); }
/* The last group never draws a rule. This was an inline border-bottom:0 on
   whichever group happened to be last, so removing that group left a stray
   line hanging above the Apply button. Tied to position, not to a specific
   group, so it survives the panel being reordered again. */
.mp-fgroup:last-of-type { border-bottom: 0; }
.mp-fgroup > h3 { font-size: var(--f-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; }
.mp-fopt { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 0; cursor: pointer; font-size: var(--f-small); min-height: 40px; }
.mp-fopt input { width: 24px; height: 24px; accent-color: var(--navy); flex-shrink: 0; }
.mp-fopt__count { margin-left: auto; padding-left: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums; font-size: var(--f-micro); flex-shrink: 0; }

.mp-archive-layout { display: grid; gap: var(--gap); }

/*
 * Inside the archive the filter rail takes 248px off the row, so three card
 * columns only have room once the page wrap is at its 1440px ceiling. Below
 * that the grid stays at two and the titles stay on one line.
 */
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .mp-archive-layout .mp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .mp-archive-layout { grid-template-columns: 248px 1fr; align-items: start; }
  .mp-filters {
    position: sticky; top: calc(var(--header-h) + 24px); inset: auto;
    transform: none; visibility: visible;
    padding: 0; overflow: visible;
    background: transparent; z-index: 1;
    max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto;
    /*
     * Room between the options and the scrollbar. With padding:0 above, the
     * radio labels and the count column sat flush against the scrollbar track —
     * the text looked clipped and the thumb overlapped the tap target on the
     * right-hand edge of each row.
     *
     * scrollbar-gutter reserves the track whether or not the panel is currently
     * overflowing, so the option list does not shift sideways by the scrollbar
     * width the moment a filter adds enough rows to make it scroll.
     */
    padding-inline-end: 14px;
    scrollbar-gutter: stable;
  }
  .mp-filters__head, .mp-filters__apply { display: none; }
  .mp-filter-toggle { display: none; }
  .mp-filterbar { position: static; background: none; backdrop-filter: none; border: 0; padding-block: 0; }
}

/* ------------------------------------------------------------ 12. Accordion (FAQ) */
.mp-faq { border-top: 1px solid var(--line); }
.mp-faq__item { border-bottom: 1px solid var(--line); }
.mp-faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 0;
  background: none; border: 0;
  font-size: 1.1875rem;
  font-weight: 600; line-height: 1.4;
  color: var(--navy); text-align: left;
  cursor: pointer;
}
.mp-faq__icon {
  flex-shrink: 0; position: relative;
  width: 22px; height: 22px; margin-top: 2px;
}
.mp-faq__icon::before, .mp-faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px; background: var(--gold-text);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.mp-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.mp-faq__q[aria-expanded="true"] .mp-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }


.mp-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
/*
 * The open state is driven by .is-open on the ITEM, not an adjacent-sibling
 * selector on the button. The button lives inside an <h3> for correct heading
 * semantics, so .mp-faq__a is a sibling of the <h3> — never of the button —
 * and `.mp-faq__q + .mp-faq__a` silently never matches.
 */
.mp-faq__item.is-open .mp-faq__a { grid-template-rows: 1fr; }
.mp-faq__a > div { overflow: hidden; }
.mp-faq__a p { padding-bottom: 28px; color: var(--text-soft); max-width: none; font-size: 1.0625rem; }


/* ------------------------------------------------------------ 12b. Forms */
/*
 * The enquiry forms shipped with markup and no styles at all, so they rendered
 * as raw browser controls. This is the whole component.
 */
.mp-form { display: grid; gap: 22px; }
.mp-form__grid { display: grid; gap: 18px; }
@media (min-width: 620px) { .mp-form__grid { grid-template-columns: repeat(2, 1fr); } }

.mp-field { display: grid; gap: 7px; margin: 0; min-width: 0; }
.mp-field--wide { grid-column: 1 / -1; }

.mp-field > label {
  font-size: var(--f-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.mp-field__opt { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.75; }

.mp-field input,
.mp-field textarea,
.mp-field select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  font-size: 1rem;              /* 16px — stops iOS zooming the page on focus */
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.mp-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; padding-top: 14px; }
.mp-field input::placeholder, .mp-field textarea::placeholder { color: var(--text-mute); }

.mp-field input:hover,
.mp-field textarea:hover,
.mp-field select:hover { border-color: var(--navy); }

.mp-field input:focus,
.mp-field textarea:focus,
.mp-field select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 16%, transparent);
}
.mp-field :focus-visible { outline: 3px solid var(--gold-text); outline-offset: 2px; }

.mp-field [aria-invalid="true"] { border-color: var(--danger, #b3261e); }
.mp-field__err  { font-size: var(--f-small); color: #9b1c14; }
.mp-field__help { font-size: var(--f-micro); color: var(--text-mute); }

.mp-form__foot { display: grid; gap: 12px; justify-items: start; }
.mp-form__foot .mp-btn { min-width: 220px; }
.mp-form__note { font-size: var(--f-micro); color: var(--text-mute); margin: 0; max-width: 52ch; }

.mp-form__error {
  margin: 0;
  padding: 14px 16px;
  background: #fdeceb;
  border: 1px solid #f0b7b2;
  border-radius: var(--r);
  color: #9b1c14;
  font-size: var(--f-small);
}

.mp-form__done {
  padding: clamp(28px, 4vw, 44px);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--r);
}
.mp-form__done h3 { margin: 0 0 8px; }
.mp-form__done p  { margin: 0; color: var(--text-soft); }

/* Honeypot — visually gone, still reachable to a bot. */
.mp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* On a navy section the labels and helper text must invert. */
.mp-section--navy .mp-field > label,
.mp-section--navy .mp-form__note,
.mp-section--navy .mp-field__help { color: var(--text-invert-soft); }
/* A navy .mp-btn on a navy section is invisible — the careers Apply block was
   exactly that. Force the gold CTA there. */
.mp-section--navy .mp-form .mp-btn,
.mp-section--navy .mp-form__foot .mp-btn {
  --btn-bg: var(--gold); --btn-fg: var(--charcoal); --btn-bd: var(--gold);
  color: var(--charcoal);
}
.mp-section--navy .mp-form .mp-btn:hover { --btn-bg: #d8b23c; --btn-bd: #d8b23c; color: var(--charcoal); }

.mp-section--navy .mp-field input,
.mp-section--navy .mp-field textarea,
.mp-section--navy .mp-field select { border-color: rgba(255,255,255,0.35); }

/* ---------------------------------------------------------- 13. Payment plan */
.mp-plan { display: grid; gap: 2px; margin-block: 24px; }
.mp-plan__row {
  display: grid; grid-template-columns: 84px 1fr;
  align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--surface-alt);
  border-left: 3px solid var(--gold);
}
.mp-plan__pct { font-size: 1.25rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.mp-plan__when { font-size: var(--f-small); color: var(--text-soft); }

.mp-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 760px) { .mp-specs { grid-template-columns: repeat(4, 1fr); } }
.mp-spec { padding: 20px 18px; background: var(--surface); }
.mp-spec__k { font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; }
.mp-spec__v { font-size: 1.1875rem; font-weight: 600; color: var(--navy); }

/* ------------------------------------------------------------- 14. Prose */
.mp-prose { max-width: var(--maxw-text); font-size: 1.0625rem; min-width: 0; }
.mp-prose table { table-layout: auto; min-width: 0; }
.mp-grid > * { min-width: 0; }
.mp-prose > * + * { margin-top: 1.15em; }
.mp-prose h2 { margin-top: 1.8em; }
.mp-prose h3 { margin-top: 1.6em; }

/*
 * Inside body copy, headings are the sans.
 *
 * The serif is a DISPLAY face — it earns its keep on a hero or a section title
 * with air around it. Dropped into the middle of an article it competes with
 * the text instead of organising it, which is why "Selling" read badly next to
 * "Where the market is". Same weight and tracking as h3 now, one step larger.
 */
.mp-prose h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

/* The sort control sat hard against the hero above it. */
.mp-sortbar,
.mp-filterbar { padding-top: clamp(20px, 3vw, 34px); }

.mp-prose ul, .mp-prose ol { padding-left: 1.25em; }
.mp-prose li + li { margin-top: 0.45em; }
.mp-prose li::marker { color: var(--gold-text); }
.mp-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
  font-size: var(--f-lead); color: var(--text-soft);
}
.mp-prose table { width: 100%; border-collapse: collapse; font-size: var(--f-small); }
.mp-prose th, .mp-prose td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.mp-prose th { background: var(--surface-alt); font-weight: 600; color: var(--navy); }
.mp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Ticked highlight list */
/*
 * Ticks read as a cramped block when several items wrap to two lines: 12px
 * between rows was less than the space between the two lines WITHIN a row, so
 * the list had no visible grouping. Rows are now separated by more than their
 * own leading, with a hairline rule to hold each item apart on the navy band.
 */
.mp-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.mp-ticks li {
  display: flex; gap: 16px; align-items: flex-start;
  font-size: var(--f-body); line-height: 1.6;
  padding-block: 16px;
  border-top: 1px solid var(--line);
}
.mp-ticks li:first-child { border-top: 0; padding-top: 0; }
.mp-ticks li:last-child { padding-bottom: 0; }
.mp-section--navy .mp-ticks li { border-top-color: rgba(255, 255, 255, 0.14); }
.mp-ticks li::before {
  content: "✓"; flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-soft); color: var(--gold-text);
  border-radius: 50%; font-size: 12px; font-weight: 700;
}

/* ------------------------------------------------------------ 15. Testimonials */
.mp-quote { padding: clamp(28px, 4vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 18px; height: 100%; }
.mp-quote__stars { color: var(--gold); letter-spacing: 3px; font-size: 0.9rem; }
.mp-quote__text { font-size: var(--f-lead); line-height: 1.55; color: var(--text); }
.mp-quote__who { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.mp-quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--navy-soft); }
.mp-quote__name { font-weight: 600; font-size: var(--f-small); color: var(--navy); }
.mp-quote__role { font-size: var(--f-small); color: var(--text-mute); }

/* ------------------------------------------------- 14b. Contact methods */
/*
 * Four ways to reach Mode, as actions rather than a list of text. Call and
 * WhatsApp are the two that convert, so they lead.
 */
.mp-ways { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px)  { .mp-ways { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mp-ways { grid-template-columns: repeat(4, 1fr); } }

.mp-way {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface);
  text-decoration: none; color: var(--text);
  transition: background 0.3s var(--ease);
}
.mp-way:hover { background: var(--navy); color: #fff; }
.mp-way:hover .mp-way__k,
.mp-way:hover .mp-way__v,
.mp-way:hover .mp-way__go { color: #fff; }
.mp-way:hover .mp-way__icon { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }

.mp-way__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--navy-soft); color: var(--navy);
  border: 1px solid transparent; border-radius: 50%;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mp-way__icon svg { width: 19px; height: 19px; fill: currentColor; }
.mp-way__k {
  font-size: var(--f-micro); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-mute); margin-top: 6px;
}
.mp-way__v { font-size: 1.0625rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
.mp-way__go { margin-top: auto; padding-top: 10px; font-size: var(--f-small); color: var(--gold-text); font-weight: 600; }

.mp-respond {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 10px 16px;
  background: var(--gold-soft); border: 1px solid var(--gold);
  font-size: var(--f-small); color: var(--text);
}
.mp-respond strong { color: var(--gold-text); }

/* ------------------------------------------------ 14c. Featured article */
.mp-lead {
  display: grid; gap: 0;
  border: 1px solid var(--line);
  margin-bottom: var(--gap);
  background: var(--surface);
}
@media (min-width: 900px) { .mp-lead { grid-template-columns: 1.2fr 1fr; } }
.mp-lead__media { position: relative; min-height: 260px; background: var(--navy-soft); overflow: hidden; }
.mp-lead__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .mp-lead__media { min-height: 420px; } }
.mp-lead__body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px; }
.mp-lead__body h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.1; letter-spacing: -0.005em; margin: 0;
}
.mp-lead__body h3 a { color: var(--navy); text-decoration: none; }
.mp-lead__meta { font-size: var(--f-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }

/* ------------------------------------------------- 15b. Testimonial slider */
/*
 * Scroll-snap carousel rather than a JS-positioned one: it swipes natively on
 * touch, keeps every quote in the DOM for crawlers and screen readers, and
 * degrades to a plain scrollable row if the JS never loads.
 */
.mp-slider { position: relative; }
.mp-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mp-slider__track::-webkit-scrollbar { display: none; }
.mp-slider__track > * { scroll-snap-align: start; }

@media (min-width: 700px)  { .mp-slider__track { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .mp-slider__track { grid-auto-columns: 31.5%; } }

.mp-slider__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 24px;
}
.mp-slider__dots { display: flex; gap: 8px; }
.mp-slider__dot {
  width: 28px; height: 3px; padding: 10px 0; /* 24px+ hit area, 3px visual */
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.mp-slider__dot::after {
  content: ""; position: absolute; inset: 10px 0;
  background: var(--line-strong);
  transition: background 0.3s var(--ease);
}
.mp-slider__dot[aria-current="true"]::after { background: var(--navy); }
.mp-section--navy .mp-slider__dot::after { background: rgba(255,255,255,0.3); }
.mp-section--navy .mp-slider__dot[aria-current="true"]::after { background: var(--gold); }

.mp-slider__arrows { display: flex; gap: 8px; }
.mp-slider__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; color: var(--navy);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.mp-slider__arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.mp-slider__arrow:disabled { opacity: 0.35; cursor: default; }
.mp-slider__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.mp-slider .mp-quote { height: 100%; }

/* --------------------------------------------------------------- 16. Reels */
.mp-reels { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.mp-reels > * { scroll-snap-align: start; }
@media (min-width: 700px)  { .mp-reels { grid-auto-columns: 38%; } }
@media (min-width: 1000px) { .mp-reels { grid-auto-columns: 23%; } }
.mp-reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-deep); }
.mp-reel video, .mp-reel img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- 17. Footer */
.mp-footer { background: var(--navy-deep); color: var(--text-invert-soft); padding-block: clamp(48px, 7vw, 88px) 0; }
.mp-footer > .mp-wrap { max-width: var(--maxw-content); }
.mp-footer h2, .mp-footer h3 { color: #fff; }
.mp-footer a { color: var(--text-invert-soft); text-decoration: none; }
.mp-footer a:hover { color: #fff; text-decoration: underline; }
.mp-footer__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 760px)  { .mp-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1060px) { .mp-footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } }
.mp-footer__logo img { height: auto; width: auto; max-height: 46px; max-width: 220px; object-fit: contain; margin-bottom: 18px; }
.mp-footer h3 { font-size: var(--f-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.mp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9375rem; }
.mp-footer ul a { display: inline-flex; align-items: center; min-height: 26px; }

.mp-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Contact rows with a leading icon. */
.mp-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 0.9375rem; }
.mp-contact li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.mp-contact svg { width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.mp-contact a { display: inline-flex; align-items: center; min-height: 26px; }
.mp-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-invert); border-radius: 50%;
  color: #fff;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mp-social:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: #fff; }
.mp-social svg { width: 18px; height: 18px; fill: currentColor; }

.mp-footer__bottom {
  margin-top: clamp(40px, 6vw, 64px);
  padding-block: 24px;
  border-top: 1px solid var(--line-invert);
  display: flex; flex-direction: column; gap: 12px;
  font-size: var(--f-small);
}
@media (min-width: 860px) {
  .mp-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.mp-footer__credit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mp-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.mp-footer__legal a { display: inline-flex; align-items: center; min-height: 26px; }

/* ---------------------------------------------------------- 17b. Back to top */
.mp-totop {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(54px + clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom)); /* clears the mobile action bar */
  z-index: 95;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy); border-radius: 50%;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              visibility 0.35s, background 0.3s var(--ease);
}
.mp-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mp-totop:hover { background: var(--navy-mid); border-color: var(--navy-mid); }
.mp-totop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

@media (min-width: 1060px) {
  .mp-totop { bottom: clamp(16px, 3vw, 32px); } /* no action bar on desktop */
}

/* ------------------------------------------------------- 18. Sticky mobile bar */
.mp-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.mp-actionbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 10px;
  background: #fff; color: var(--navy);
  font-size: var(--f-small); font-weight: 600; text-decoration: none;
}
.mp-actionbar a.is-primary { background: var(--navy); color: #fff; }
.mp-actionbar svg { width: 17px; height: 17px; fill: currentColor; }
@media (min-width: 1060px) { .mp-actionbar { display: none; } }
@media (max-width: 1059px) { body { padding-bottom: 54px; } }

/* ---------------------------------------------------------- 18b. Breadcrumbs */
.mp-crumbs { margin-bottom: 18px; font-size: var(--f-micro); }
.mp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-crumbs li { display: flex; align-items: center; gap: 8px; color: var(--text-mute); }
.mp-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.mp-crumbs a { color: var(--text-mute); text-decoration: none; display: inline-flex; align-items: center; min-height: 26px; }
.mp-crumbs a:hover { color: var(--navy); text-decoration: underline; }
.mp-crumbs [aria-current="page"] { color: var(--text-soft); font-weight: 500; }

.mp-hero .mp-crumbs li,
.mp-hero .mp-crumbs a { color: var(--text-invert-soft); }
.mp-hero .mp-crumbs a:hover,
.mp-hero .mp-crumbs [aria-current="page"] { color: #fff; }
.mp-hero .mp-crumbs li + li::before { color: rgba(255, 255, 255, 0.35); }

/* --------------------------------------------------------------- 19. Utility */
.mp-center { text-align: center; }
.mp-center .mp-sec-head { margin-inline: auto; }
.mp-center .mp-eyebrow { justify-content: center; }
.mp-mt { margin-top: clamp(32px, 5vw, 56px); }
.mp-hr { height: 1px; background: var(--line); border: 0; margin-block: var(--sec-sm); }

.mp-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; }
.mp-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none; font-size: var(--f-small);
}
.mp-pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

.mp-empty { padding: clamp(48px, 8vw, 80px) 24px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--text-mute); }

/* Placeholder — used wherever Mode content is still pending, so the layout is
   never broken and it is visually obvious what still needs supplying. */
.mp-placeholder {
  display: grid; place-items: center;
  min-height: 180px; padding: 24px;
  background: repeating-linear-gradient(45deg, var(--navy-soft), var(--navy-soft) 12px, #fff 12px, #fff 24px);
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  color: var(--text-mute); font-size: var(--f-small); text-align: center;
}

/* --------------------------------------------------------------- 20. Motion */
.mp-reveal { opacity: 0; transform: translateY(24px); }
.mp-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mp-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------- 21. Print */
@media print {
  .mp-header, .mp-footer, .mp-actionbar, .mp-filters, .mp-drawer { display: none !important; }
  body { color: #000; }
}


/* ---------------------------------------------------------------------------
   WCAG 2.5.8 Target Size (Minimum) — 24x24 for standalone controls.
   The carousel dots rendered 28x20 and the footer legal links 67x12. Neither is
   a link inside a sentence, so neither qualifies for the inline exemption: they
   are standalone targets and must clear 24px in both axes. The visible dot and
   the type size are unchanged — the target is grown around them.
--------------------------------------------------------------------------- */
.mp-slider__dot {
	min-width: 24px;
	min-height: 24px;
	padding: 6px 4px;
	background-clip: content-box;
}

.mp-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 4px;
}

/*
 * Standalone links that are the whole of their line: the contact card's phone,
 * email and WhatsApp rows, the LinkedIn follow line, the link-in-bio footer, and
 * nav sub-menu items. None sits inside a sentence, so none gets the WCAG 2.5.8
 * inline exemption — they were 15-18px tall and had to clear 24.
 */
.mp-quote ul li a,
.mp-quote p > a,
.mp-bio__foot a,
.mp-drawer .sub-menu a,
.mp-nav .sub-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.mp-nav .sub-menu a,
.mp-drawer .sub-menu a,
.mp-rail__card ul li a,
.mp-footer__grid ul li a {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}


/* Advisory-example note on project pages — informative, not an alert. */
/*
 * Bordered callout — for the one line in a long page that must not be skimmed
 * past. mp-note above is a soft left-rule aside; this is deliberately louder:
 * a full border closes the shape, so the eye reads it as a separate object
 * rather than as a paragraph that happens to be tinted.
 *
 * Gold on gold-soft, with gold-text for the copy — the -text token is the one
 * calibrated to be READ, at 4.5:1 on the tint. --gold itself is a border and
 * accent colour and fails as body text on this background.
 */
.mp-callout {
	position: relative;
	margin: 32px 0;
	padding: 22px 26px;
	border: 1px solid var(--gold);
	border-radius: var(--r-lg);
	background: var(--gold-soft);
}
.mp-callout__label {
	display: block;
	margin-bottom: 8px;
	font-size: var(--f-micro, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.mp-callout p,
.mp-callout > :last-child { margin: 0; }
.mp-callout p {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--navy-deep);
}
/* A hairline of gold along the top edge — enough to read as considered rather
   than as a browser default box, without adding a second colour. */
.mp-callout::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--gold), var(--gold-light));
	border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.mp-note {
	margin: 0;
	padding: 14px 18px;
	border-left: 3px solid var(--gold);
	background: var(--sand-tint, rgba(0,0,0,0.03));
	border-radius: 0 6px 6px 0;
	font-size: var(--f-small);
	color: var(--text-soft);
}




/* ---------------------------------------------------------------------------
   Brand marks in the social row.
   They arrive at wildly different intrinsic sizes and aspect ratios — one had
   no viewBox at all and rendered as a cropped corner, another declared itself
   1.1px wide. Sizing is forced here so the row reads as one set rather than a
   sticker sheet, whatever each file happens to declare.
--------------------------------------------------------------------------- */
.mp-social svg,
.mp-social img,
.mp-socials a svg,
.mp-socials a img,
footer .mp-social a svg,
footer .mp-social a img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	display: block;
	/*
	 * Kill the global img bottom margin. In a centred flex box an 18px margin
	 * below the image shifts it 9px UP — every icon in the footer sat high, and
	 * it read as the artwork being off-centre rather than the CSS.
	 */
	margin: 0;
}

/*
 * DLD regulatory disclaimer.
 * Deliberately quiet but legible — it is a legal statement, not a footnote to
 * be skimmed past, so it clears AA contrast rather than fading into the page.
 */
.mp-disclaimer {
	/*
	 * Full width of the content column, and no clamping of any kind. This is a
	 * regulatory statement — every clause has to be readable, so it is never
	 * truncated, collapsed or hidden behind a "read more".
	 */
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm, 6px);
	background: var(--surface-alt);
	color: var(--text-soft);
	font-size: var(--f-body);
	line-height: 1.7;
}
.mp-disclaimer strong { color: var(--navy); }

/* Heading over the launch-spec bar. */
.mp-specs__h {
	font-size: var(--f-h3);
	margin: 0 0 16px;
}

/* Flagship variant of the launch-spec heading — smaller, it sits inside a card. */
.mp-specs__h--flagship {
	font-size: var(--f-small);
	letter-spacing: 0.02em;
	color: var(--text-soft);
	margin: 14px 0 10px;
	font-weight: 600;
}

/* The archive label above a project title — present, but never competing with it. */
.mp-eyebrow--archive {
	display: block;
	margin-bottom: 10px;
	color: var(--gold);
}

/*
 * Project pages: the description fills the column.
 *
 * .mp-prose caps at a 78ch reading measure, which is right for an article but
 * left the project write-up stopping two-thirds of the way across a 1240px page
 * with nothing beside it — it read as a rendering fault rather than typography.
 * A project page is a spec sheet with prose in it, not an essay, so the column
 * IS the measure here.
 */
.mp-project-body .mp-prose { max-width: none; }

/* Developer credit under a project title. */
.mp-project__dev {
	/*
	 * Deliberately identical to the location line below it — same size, same
	 * weight, same colour. They are one pair of facts about the development, and
	 * bolding one made it read as a label rather than half of a pair.
	 */
	margin: 0 0 4px;
	font-size: var(--f-lead);
	font-weight: 400;
	color: var(--text-invert-soft);
}

/*
 * Developer credit matches the location line beneath it. They are a pair — one
 * says who built it, the other where — so one being visibly smaller read as an
 * afterthought.
 */

/*
 * Card titles reserve two lines.
 *
 * Titles became "<Project> by <Developer>", so some wrap and some do not. Left
 * alone the meta and price lines below them sit at different heights across a
 * row and the grid looks broken. Reserving the space keeps every card aligned
 * whether its title wraps or not.
 */
.mp-card__title {
	/*
	 * One line, always. The width is guaranteed by the grid breakpoints above
	 * rather than by shrinking the type. NOT text-wrap: balance — it evened the
	 * lines and broke "Samana Hills South 2 by Samana" after "Hills", splitting
	 * the project's own name. The old min-height reserved a second line's height
	 * on every card; .mp-card__foot { margin-top: auto } already aligns the price
	 * rows, so it only added a gap.
	 */
	text-wrap: normal;
}

/*
 * Founder band on the About page — portrait on the left, text on the right,
 * both starting at the same top edge so the name sits level with the top of
 * the photograph rather than floating halfway down beside it.
 */
.mp-lead-advisor {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	margin-bottom: clamp(40px, 5vw, 64px);
}
.mp-lead-advisor__photo {
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--navy-soft);
	aspect-ratio: 4 / 5;
	max-width: 380px;
	width: 100%;
}
.mp-lead-advisor__photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-lead-advisor__text { text-align: left; }
.mp-lead-advisor__name {
	font-family: var(--font-sans);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--navy);
	margin: 0 0 6px;
}
.mp-lead-advisor__role {
	font-size: var(--f-lead);
	color: var(--gold-text);
	letter-spacing: 0.04em;
	margin: 0 0 20px;
}
.mp-lead-advisor__bio p {
	font-size: var(--f-lead);
	line-height: 1.7;
	color: var(--text-soft);
	margin: 0 0 1em;
}
.mp-lead-advisor__bio p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	/*
	 * The portrait is capped rather than given a share of the row. At 1fr it
	 * came out 560px wide and, at 4:5, 700px tall — taller than the biography
	 * beside it, which made the photograph the subject and the text the caption.
	 * 380px is the cap because the source file is 409px wide; anything larger
	 * is upscaling.
	 */
	.mp-lead-advisor { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}

/* Names sit centred under their portrait. */
.mp-advisor { text-align: center; }
.mp-advisor__name { margin: 12px 0 2px; font-weight: 600; }

/* The founder leads the team grid. */
@media (min-width: 700px) {
	.mp-advisor--lead { grid-column: span 2; }
	.mp-advisor--lead .mp-advisor__photo { aspect-ratio: 16 / 10; }
	.mp-advisor--lead .mp-advisor__name { font-size: var(--f-lead); }
}

/* Testimonial attribution reads as a person, not a footnote. */
.mp-quote__name { font-size: var(--f-body); font-weight: 600; }

/*
 * The partner strip is a single line of logos. It was carrying the same vertical
 * padding as a full content section, so it read as a large empty white band with
 * a row of marks stranded in the middle of it.
 */
/*
 * Asymmetric on purpose. The label above the logos needs air; the gap BELOW
 * them was 44px of white running straight into the tinted band underneath, and
 * read as a hole in the page rather than as spacing.
 */
/*
 * The AI band runs one notch smaller than the rest of the page. It carries the
 * longest heading on the site and a five-item tick list beside it; at the
 * default h2 and body sizes the two columns fought each other for the fold.
 * Scoped here on purpose — everything else on the page went UP, not down.
 */
.mp-section--ai h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem); }
.mp-section--ai p  { font-size: var(--f-small); }
.mp-section--ai p[style*="--f-small"] { font-size: var(--f-micro); }
.mp-section--ai .mp-ticks li { font-size: var(--f-small); }
.mp-section--ai .mp-eyebrow { font-size: 1rem; }

.mp-section--strip { padding-block: clamp(26px, 3.2vw, 40px) clamp(14px, 1.8vw, 22px); }

/*
 * The disclaimer is the closing note of the section above it, not a band of its
 * own. Its own top padding sat on top of the previous section's bottom padding
 * and pushed it most of a screen clear of the content it refers to.
 */
.mp-section--disclaimer { padding-block: 0 var(--sec-sm); }