/*
Theme Name: Mas Property 2027
Theme URI: https://masproperty.com
Author: Mas Property
Description: The Mas Property 2027 website: a luxury editorial design over live Meklara data, built on the Meklara Luxe architecture.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masproperty-2027
Tags: full-site-editing, block-patterns, real-estate, editorial
*/

/*
 * Block themes take their design tokens from theme.json. This file carries only
 * what theme.json cannot express: the handful of components the Meklara plugin
 * renders server-side, and the editorial details that make the site feel like a
 * brokerage rather than a plugin demo.
 *
 * ⛔ The plugin must never depend on a class defined here. These are styles for
 * markup the plugin emits, not behaviour the plugin needs.
 */

/* ── The navigation overlay ──────────────────────────────────────────────── */
/*
 * ⛔ THIS LIVES IN THE THEME, NOT THE PLUGIN.
 * It paints WordPress's own navigation block, which is the THEME's furniture.
 * The plugin must adapt to whatever theme a brokerage installs (Patrick,
 * 2026-09-22), so it may style its own sections and nothing else. When the
 * Meklara plugin runs on Kadence or Twenty Twenty-Five, that theme's menu stays
 * that theme's menu.
 */
/*
 * The menu is part of the site, not a browser artefact. Ink, not white; the
 * display face at a size worth tapping; and it arrives rather than appearing.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mk-charcoal) !important;
	color: #fff;
	padding: clamp(1.5rem, 6vw, 3rem) var(--mk-gutter);
	animation: mk-menu-in 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--mk-display);
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	padding-block: 0.35rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: var(--mk-max); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.05rem; font-family: var(--mk-body); color: rgba(255,255,255,.75); }
@keyframes mk-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}
/*
 * The Mas Property site map puts 81 links in the menu. Open, the drawer was
 * seven phone screens long, so there each section folds: its name is still a
 * link to its page, and the chevron beside it (a button assets/site.js adds,
 * .mk-sub-toggle) opens and closes its list.
 */
/* Parent items were black on ink: core's two-class .wp-block-navigation-item__content
   rule outranked the white above. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { color: #fff; }
.mk-sub-toggle { display: none; }
/* Name and chevron on one centred line, the list below at full width. The
   name carries a chevron-wide margin on its left so it stays on the centre. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	display: flex;
	/* Core stacks drawer items in a column; a section's row runs across. */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content { order: 0; margin-left: 44px; width: auto; flex: 0 1 auto; }
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .has-child > .mk-sub-toggle {
	display: grid;
	order: 1;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.mk-sub-toggle svg { transition: transform 200ms ease; }
.mk-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	display: none !important;
	order: 2;
	flex-basis: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .has-child.mk-sub-open > .wp-block-navigation__submenu-container { display: flex !important; }

/* A finger-sized control, whatever the viewport. */
@media (max-width: 900px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}

/* ── This theme's own voice ──────────────────────────────────────────────── */
/*
 * The Meklara plugin asks the ACTIVE THEME for its typography, palette and
 * measures before falling back to its own. That is what lets the connector sit
 * on Kadence or Twenty Twenty-Five without repainting them — and it means this
 * theme must state its voice, rather than relying on the plugin to carry it.
 */
:root {
	/* Mas Property's brand faces, self-hosted in assets/fonts: Bw Vivant for
	   display, Gotham for text. Inter stays behind Gotham to draw the few
	   characters Gotham lacks (€, ², →). Georgia remains in theme.json as an
	   alternative heading face ("serif"). */
	--meklara-display: "Bw Vivant", Georgia, "Times New Roman", serif;
	--meklara-body: "Gotham", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Measured from the Mas Property build, 2026-09-22. */
	--meklara-ink: #182F3F;        /* navy text */
	--meklara-canvas: #FAF8F4;     /* ivory paper band */
	--meklara-paper: #ffffff;
	--meklara-graphite: #0D1B24;   /* ink navy band */
	--meklara-muted: #6A7783;
	--meklara-rule: #E6E0D6;
	--meklara-accent: #A88A5C;     /* champagne */
	--meklara-charcoal: #0D1B24;
	
	
	
}

/* ═══════════════════════════════════════════════════════════════════════════
 * THE MAS PROPERTY DESIGN SYSTEM — tokens
 *
 * One scale for type, one ladder for space, one set of ratios for photographs,
 * one restrained palette. Every component reads from here; no component is
 * allowed to invent a size. That is the whole point: a future page generated by
 * Meklara composes these primitives and needs nobody to redesign the site.
 *
 * Read with docs/implementation/maswp.md. The grammar is drawn from the
 * reference builds; the values are ours.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
	/* ── Type. Fluid, so there are no breakpoint stacks for text. ───────── */
	--mas-face-display: var(--meklara-display);
	--mas-face-text: var(--meklara-body);

	--mas-type-display-xl: clamp(2.9rem, 7vw, 5.6rem);
	--mas-type-display-l: clamp(2.3rem, 4.6vw, 3.8rem);
	--mas-type-display-m: clamp(1.8rem, 3vw, 2.6rem);
	--mas-type-title: clamp(1.1rem, 1.6vw, 1.35rem);
	--mas-type-body-l: clamp(1.02rem, 1.2vw, 1.15rem);
	--mas-type-body: 1rem;
	--mas-type-meta: 0.85rem;
	--mas-type-label: 0.625rem;          /* 10px, the micro-label */

	--mas-leading-display: 1.04;
	--mas-leading-heading: 1.14;
	--mas-leading-text: 1.7;
	--mas-tracking-display: -0.022em;
	--mas-tracking-label: 0.22em;

	/* ── Space. One ladder; sections use the three band steps. ─────────── */
	--mas-sp-1: 0.25rem;
	--mas-sp-2: 0.5rem;
	--mas-sp-3: 0.75rem;
	--mas-sp-4: 1rem;
	--mas-sp-5: 1.5rem;
	--mas-sp-6: 2rem;
	--mas-sp-7: 3rem;
	--mas-band-tight: clamp(3rem, 6vw, 4.5rem);
	--mas-band: clamp(4.5rem, 9vw, 7.5rem);
	--mas-band-loose: clamp(5.5rem, 12vw, 10rem);

	/* ── Measure. Reading stays narrow; pictures take the width. ───────── */
	--mas-read: 68ch;
	--mas-wide: 1600px;
	--mas-gutter: clamp(1.25rem, 4vw, 3rem);

	/* ── Colour. Restrained: two grounds, one ink, one accent. ─────────── */
	--mas-ink: #0D1B24;
	--mas-ink-soft: #182F3F;
	--mas-text: #16232C;
	--mas-muted: #6A7783;
	--mas-rule: #E6E0D6;
	--mas-paper: #FFFFFF;
	--mas-paper-warm: #FAF8F4;
	--mas-sand: #E1D5CC;
	--mas-accent: #A88A5C;              /* champagne, for hairlines and focus */
	--mas-on-ink: rgba(255, 255, 255, 0.92);
	--mas-on-ink-muted: rgba(255, 255, 255, 0.64);

	/* ── Photographs. A ratio per kind, so cards cannot vary in height. ── */
	--mas-ratio-property: 3 / 2;
	--mas-ratio-development: 4 / 3;
	--mas-ratio-editorial: 16 / 10;
	--mas-ratio-portrait: 4 / 5;
	--mas-ratio-thumb: 1 / 1;

	/* ── Motion. Two curves and three durations, used everywhere. ──────── */
	--mas-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mas-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--mas-quick: 180ms;
	--mas-calm: 300ms;
	--mas-slow: 900ms;

	/* One shadow in the whole system, for the thing that floats on a photograph. */
	--mas-lift: 0 18px 50px rgba(13, 27, 36, 0.18);
}

/* The plugin's own bridge reads these, so its components inherit the system. */
:root {
	--meklara-max: var(--mas-wide);
	--meklara-read: var(--mas-read);
	--meklara-sect: var(--mas-band);
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
/*
 * A band is the unit of the page: full width, one ground, one idea, one rhythm.
 * Three grounds and three rhythms is the whole vocabulary — enough for pacing
 * (large / quiet / dense / quiet / large) and few enough that a page cannot
 * become a wall of boxes.
 */
.mk-band { padding-block: var(--mas-band); }
.mk-band--tight { padding-block: var(--mas-band-tight); }
.mk-band--loose { padding-block: var(--mas-band-loose); }
.mk-band--ink,
.mk-market.alignfull,
.mk-close.alignfull {
	background: var(--mas-ink);
	color: var(--mas-on-ink);
	padding-block: var(--mas-band-tight);
}
.mk-band--paper { background: var(--mas-paper-warm); padding-block: var(--mas-band); }
.mk-band--white { background: var(--mas-paper); padding-block: var(--mas-band); }
.mk-band--sand { background: var(--mas-sand); }

/*
 * ⛔ BANDS MEET. WordPress puts one block gap between every top-level group, so
 * each full-width band was separated from the next by a 24px strip of paper —
 * invisible between two paper bands, and a bright line across the page between
 * a photograph and an ink band. Every band carries its own vertical padding, so
 * the gap between them is not spacing, it is a seam.
 */
main > .wp-block-group.alignfull + .wp-block-group.alignfull,
main > .wp-block-group.alignfull + .wp-block-group,
main > .wp-block-group + .wp-block-group.alignfull { margin-top: 0; }

/* A heading that only assistive technology reads. An archive that jumps from
   its h1 straight to the h3 on a card leaves a hole in the ladder. */
.mk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── The story page ──────────────────────────────────────────────────────
 * ⛔ NOT .mk-story: the connector already owns that class for a development
 * story card, and it is a two-column grid. Reusing the name laid this page's
 * sections out side by side, 800px off the screen.
 * ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 * A brokerage's own page about itself. Its prose is the tenant's and is not
 * touched here; what this does is give it a measure a person can read, let its
 * photographs take the width, and set its principles side by side.
 * ───────────────────────────────────────────────────────────────────────── */
.mk-about-open { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mk-about-open .mk-h1 { margin: 0.35rem 0 0; }
.mk-about-body > * + * { margin-top: 1.25rem; }
/* Photographs escape the reading column to the page's wide measure. */
.mk-about-body .mk-about-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	width: min(var(--mas-wide, 1600px), 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter)));
	max-width: none;
	margin-inline: calc(50% - min(var(--mas-wide, 1600px), 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter))) / 2);
	margin-block: clamp(2.5rem, 5vw, 4rem);
}
.mk-about-body .mk-about-pair figure { margin: 0; }
.mk-about-body .mk-about-pair img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* The principles, in the tenant's own words, read across rather than down. */
.mk-about-body .mk-principles {
	display: grid;
	/* The blocks arrive as heading, paragraph, heading, paragraph… Filling by
	   column keeps each heading above its own text; filling by row put the
	   first heading over the second one's prose. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	width: min(1200px, 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter)));
	max-width: none;
	margin-inline: calc(50% - min(1200px, 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter))) / 2);
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
	padding-block: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--mas-rule);
	border-bottom: 1px solid var(--mas-rule);
}
.mk-about-body .mk-principles > * { margin: 0; }
.mk-about-body .mk-principles h2, .mk-about-body .mk-principles h3 {
	font-size: var(--mas-type-h4, 1.15rem); line-height: 1.2; margin: 0 0 0.5rem;
}
.mk-about-body .mk-principles p { font-size: 0.95rem; line-height: 1.6; }
.mk-about-close { margin-top: clamp(3rem, 6vw, 5rem); }

/* A lede is a sentence to read, not a band to fill. On the wide templates it
   was running the full 1344px, which is roughly 170 characters a line. */
/* !important because WordPress's constrained layout centres every child with
   margin-left/right: auto !important; a narrower lede would otherwise drift
   304px to the right of the h1 above it. */
.wp-block-post-content > .mk-lede { max-width: 46rem; margin-inline: 0 !important; }
@media (max-width: 860px) {
	.mk-about-body .mk-about-pair, .mk-about-body .mk-principles { grid-template-columns: minmax(0, 1fr); }
	.mk-about-body .mk-principles { grid-auto-flow: row; grid-template-rows: none; gap: 0.35rem 0; }
	.mk-about-body .mk-principles > h2, .mk-about-body .mk-principles > h3,
	.mk-about-body .mk-principles > h4, .mk-about-body .mk-principles > h5 { margin-top: 1.5rem; }
}

/* ── The micro-label ─────────────────────────────────────────────────────── */
/* It opens a band and names a card. One size, one tracking, everywhere. */
.mk-eyebrow {
	font-family: var(--mas-face-text);
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	color: var(--mas-muted);
}
.mk-band--ink .mk-eyebrow, .mk-market .mk-eyebrow, .mk-eyebrow--light { color: var(--mas-on-ink-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Square, micro-label, three variants. Geometry moves only on press. */
.mk-button, .wp-block-button__link, .mk-more--button {
	border-radius: 0;
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	padding: var(--mas-sp-4) var(--mas-sp-5);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--mas-calm) var(--mas-ease-out), border-color var(--mas-calm) var(--mas-ease-out), color var(--mas-calm) var(--mas-ease-out);
}
.mk-button:active, .wp-block-button__link:active { transform: scale(0.985); }

/* ── Headings ────────────────────────────────────────────────────────────── */
.mk-hero-heading.meklara-hero-heading {
	font-family: var(--mas-face-display);
	font-weight: 400;
	font-size: var(--mas-type-display-xl);
	line-height: var(--mas-leading-display);
	letter-spacing: var(--mas-tracking-display);
}
.mk-h2, .mk-market-heading, .mk-explore-heading, .mk-close-heading, .mk-team-heading,
.mk-locations-heading, .mk-devstrip-heading {
	font-family: var(--mas-face-display);
	font-weight: 400;
	font-size: var(--mas-type-display-m);
	line-height: var(--mas-leading-heading);
	letter-spacing: -0.008em;
}
.mk-sect-head .mk-h2 { font-size: var(--mas-type-display-l); }

/* ── Controls ────────────────────────────────────────────────────────────── */
/*
 * Patrick, 2026-09-22: "all dropdowns, boxes etc can be different but not
 * standard like we have now."
 *
 * A native <select> paints itself: system chrome, a system chevron, a system
 * focus ring, and a rounded rectangle nobody chose. Underneath it is still a
 * native select — which is what makes it work with a keyboard, with VoiceOver
 * and with the iOS wheel — but everything you can see is ours: the label above
 * it as a micro-label, the value set in the reading face, one hairline between
 * cells, and a chevron we draw.
 */
.meklara-field,
.mk-herobar .meklara-field {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding: 0.9rem 1.15rem;
	background: #fff;
	border: 0;
	border-right: 1px solid var(--meklara-rule);
	border-radius: 0;
}
.meklara-field:last-of-type { border-right: 0; }
.meklara-field > span,
.meklara-field > label,
.mk-herobar .meklara-field-label {
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--meklara-ink) 55%, transparent);
}
.meklara-field select,
.meklara-field input,
.meklara-input,
.mk-herobar select,
.mk-herobar input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 1.6rem 0 0;
	margin: 0;
	width: 100%;
	font-family: var(--meklara-body);
	font-size: max(16px, 1rem);
	line-height: 1.3;
	color: var(--meklara-ink);
	box-shadow: none;
	cursor: pointer;
}
/* Our chevron, not the system's: a 1px stroke, sized to the type, never a glyph. */
.meklara-field:has(select)::after {
	content: "";
	position: absolute;
	right: 1.15rem;
	bottom: 1.35rem;
	width: 9px;
	height: 9px;
	border-right: 1px solid color-mix(in srgb, var(--meklara-ink) 55%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--meklara-ink) 55%, transparent);
	transform: rotate(45deg) translateY(-2px);
	pointer-events: none;
}
/* Focus is a line under the cell, in the accent — never a browser halo. */
.meklara-field select:focus-visible,
.meklara-field input:focus-visible,
.meklara-input:focus-visible {
	outline: none;
	box-shadow: 0 2px 0 0 var(--meklara-accent);
}
.meklara-field:focus-within { background: #fff; }

/*
 * THE BAR FLOATS. Patrick, 2026-09-22: "could this search bar be like floating
 * on top, looking more modern, slim… so that it sits 2 cm above and we see
 * little of the image also below".
 *
 * It was white, square and welded to the bottom edge of the photograph, which
 * is the one detail that makes a hero look like a template. Now it is lifted
 * off the edge (the connector owns that offset), narrower than the page,
 * rounded, and on glass so the photograph carries on behind it.
 *
 * ⛔ THE CELLS MUST BE TRANSPARENT. A white cell background inside a
 * translucent bar puts the opaque slab back one level down, and the glass does
 * nothing at all.
 */
.mk-herobar {
	background: rgba(255, 255, 255, 0.94);
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px -26px rgba(8, 18, 26, 0.6), 0 2px 8px -4px rgba(8, 18, 26, 0.25);
}
@supports (backdrop-filter: blur(8px)) {
	.mk-herobar { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px) saturate(1.25); }
}
/* Slimmer, and see-through: 60px of bar instead of 71, with the hairline
   between cells drawn short so it reads as a divider and not as a frame. */
.mk-herobar .meklara-field {
	background: transparent;
	border-right: 0;
	padding: 0.6rem 1.1rem 0.65rem;
	gap: 0.1rem;
}
.mk-herobar .meklara-field:focus-within { background: rgba(255, 255, 255, 0.55); }
.mk-herobar-submit.mk-button,
.mk-button--primary,
.meklara-button--primary {
	background: var(--mas-ink);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	padding-inline: 2rem;
	transition: background-color var(--mas-calm) var(--mas-ease-out);
}
.mk-herobar-submit.mk-button:hover,
.mk-button--primary:hover { background: #16303f; }
.mk-herobar-submit.mk-button:active { transform: scale(0.985); }

/* Every other box: square, hairline, no system rounding. */
.meklara-card, .mk-dev-card, .mk-person-media, .meklara-panel, .meklara-box,
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea {
	border-radius: 0;
}
textarea, input[type="text"], input[type="email"], input[type="search"], input[type="tel"] {
	border: 1px solid var(--meklara-rule);
	background: #fff;
	padding: 0.95rem 1.1rem;
	font-size: max(16px, 1rem);
}
textarea:focus-visible, input:focus-visible { outline: none; border-color: var(--meklara-accent); }

/*
 * A page that opens on a photograph opens ON the photograph.
 *
 * The hero began 24px down the page, so a strip of warm paper sat above it and
 * the white wordmark straddled the seam (Patrick's iPhone, 2026-09-22). The
 * header is fixed and transparent over a hero; the hero itself must start at
 * the very top, and nothing above it may reserve space.
 */
body.mk-has-hero .mk-page,
body.mk-has-hero main.mk-page { padding-top: 0; margin-top: 0; }
body.mk-has-hero .mk-page > *:first-child { margin-top: 0; }
body.mk-has-hero .mk-hero.meklara-hero-panel { margin-top: 0; }

/*
 * The wordmark over a photograph is a mark, not a paragraph: theirs sits in a
 * hairline box at the top-left corner. Ours keeps the display face but takes
 * the same scale and the same corner, so the header reads as part of the
 * picture rather than as a strip laid over it.
 */
.mk-header--over:not(.is-scrolled) .mk-wordmark a {
	font-size: 1.15rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
}
@media (max-width: 900px) {
	.mk-header { padding-block: 0.85rem; }
	.mk-header--over:not(.is-scrolled) .mk-wordmark a { font-size: 1.05rem; }
}

/* ── The property card, their shape ──────────────────────────────────────── */
.meklara-card { background: transparent; border: 0; }
.meklara-card-link { text-decoration: none; color: inherit; display: grid; gap: 0.75rem; }
.meklara-card-frame { aspect-ratio: var(--mas-ratio-editorial); overflow: hidden; background: var(--mas-paper-warm); }
.meklara-card-place { font-size: var(--mas-type-label); font-weight: 600; letter-spacing: var(--mas-tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--meklara-ink) 55%, transparent); }
.meklara-card-title { font-family: var(--meklara-display); font-weight: 400; font-size: var(--mas-type-title); line-height: 1.2; margin: 0.1rem 0 0; }
.meklara-card-price { font-size: var(--mas-type-body); font-weight: 500; }
/* The meta row: hairline-separated facts, the way a listing sheet sets them. */
.meklara-card-facts { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: var(--mas-type-meta); color: color-mix(in srgb, var(--meklara-ink) 68%, transparent); }
.meklara-card-facts > span + span { padding-left: 0.75rem; border-left: 1px solid var(--meklara-rule); }

/* ── The numbered standard ───────────────────────────────────────────────── */
.mk-numbered { display: grid; gap: 0; }
.mk-numbered-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 2rem);
	padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
	border-top: 1px solid var(--meklara-rule);
}
.mk-numbered-item:last-child { border-bottom: 1px solid var(--meklara-rule); }
.mk-numbered-figure {
	grid-row: span 2;
	margin: 0;
	font-family: var(--meklara-display);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1;
	color: color-mix(in srgb, var(--meklara-ink) 38%, transparent);
}
.mk-numbered-title { margin: 0 0 0.3rem; font-size: var(--mas-type-label); font-weight: 600; letter-spacing: var(--mas-tracking-label); text-transform: uppercase; }
.mk-numbered-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: color-mix(in srgb, var(--meklara-ink) 72%, transparent); }
.mk-standard { align-items: start; gap: clamp(2rem, 5vw, 5rem); }

/* A band's own heading block: label, then the line. */
.mk-sect-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mk-sect-head .mk-h2 { margin: 0; font-family: var(--meklara-display); font-weight: 400; font-size: var(--mas-type-display-l); line-height: 1.14; }

/* ── The header ──────────────────────────────────────────────────────────── */
/*
 * Light over a photograph, paper once you scroll, condensed while you read, and
 * out of the way when you scroll down — one gesture up brings it back. The
 * height is a token so the hero and the drawer can both reason about it.
 */
:root { --mas-header-h: 88px; --mas-header-h-condensed: 56px; }
@media (max-width: 900px) { :root { --mas-header-h: 68px; --mas-header-h-condensed: 52px; } }

.mk-header {
	/*
	 * FIXED, NOT STICKY. Sticky depends on every ancestor's overflow, and in a
	 * block theme the header sits inside a group: measured on /properties/ it
	 * scrolled away at -457px while the home page behaved. Fixed is the same
	 * behaviour everywhere, and the page reserves the height below.
	 */
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	min-height: var(--mas-header-h);
	padding-block: 0;
	background: var(--mas-paper-warm);
	border-bottom: 1px solid transparent;
	transition:
		min-height 420ms var(--mas-ease),
		transform 320ms var(--mas-ease),
		background-color var(--mas-calm) var(--mas-ease-out),
		border-color var(--mas-calm) var(--mas-ease-out),
		color var(--mas-calm) var(--mas-ease-out);
}
.mk-header.is-scrolled { min-height: var(--mas-header-h-condensed); border-bottom-color: var(--mas-rule); }
/* Scrolling down: gone. Scrolling up: back, at the condensed height. */
.mk-header.is-away { transform: translateY(-101%); }

/* A page without a hero reserves the header's height; a hero page runs under it. */
body:not(.mk-has-hero) { padding-top: var(--mas-header-h); }

/* Over a hero the header is the photograph's own furniture until you scroll. */
.mk-header--over:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
}
.mk-header--over:not(.is-scrolled) .mk-wordmark a,
.mk-header--over:not(.is-scrolled) .mk-nav a,
.mk-header--over:not(.is-scrolled) .mk-header-link { color: #fff; }
/* A hairline of shade under the type, so white stays legible over a pale photograph. */
.mk-header--over:not(.is-scrolled)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--mas-header-h) * 1.8);
	background: linear-gradient(to bottom, rgba(10, 21, 28, 0.42), rgba(10, 21, 28, 0));
	pointer-events: none;
	z-index: -1;
}

.mk-header .mk-wordmark a {
	font-family: var(--mas-face-display);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 500;
	letter-spacing: 0.005em;
	text-decoration: none;
}
.mk-nav a {
	font-family: var(--mas-face-text);
	font-size: var(--mas-type-meta);
	letter-spacing: 0.01em;
	text-decoration: none;
}
/* The one call to action in the header is a button, not another link. */
.mk-header-actions .mk-header-link {
	display: inline-flex;
	align-items: center;
	/* 44px, measured: it was 40 — four pixels short of what a thumb reliably hits. */
	min-height: 44px;
	padding: 0 var(--mas-sp-4);
	border: 1px solid currentColor;
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--mas-calm) var(--mas-ease-out), color var(--mas-calm) var(--mas-ease-out);
}
.mk-header-actions .mk-header-link:hover { background: var(--mas-ink); border-color: var(--mas-ink); color: #fff; }
.mk-header--over:not(.is-scrolled) .mk-header-actions .mk-header-link:hover { background: #fff; border-color: #fff; color: var(--mas-ink); }
/* The second action stays quiet: one button per header. */
.mk-header-actions .mk-header-link--quiet {
	border-color: transparent;
	padding-inline: var(--mas-sp-2);
	font-size: var(--mas-type-meta);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}
.mk-header-actions .mk-header-link--quiet:hover { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 0.35em; }
@media (max-width: 900px) {
	.mk-header-actions .mk-header-link--quiet { display: none; }
}

/* ── The tablet gap ──────────────────────────────────────────────────────── */
/*
 * MEASURED at 768: the desktop navigation overran its own row by 12–22px
 * because it only collapses at the block editor's "mobile" breakpoint. A
 * brokerage's visitors are on tablets too. The drawer takes over below 1200:
 * the Mas Property site map puts its top-level items in the row, which stops
 * fitting well above 1024.
 */
@media (max-width: 1200px) {
	.mk-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.mk-header .wp-block-navigation__responsive-container-open { display: flex; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Measured: 35×15 links. The words stay the same size; the hit area grows. */
.mk-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.mk-footer-list li { margin: 0; }
.mk-footer-label {
	font-family: var(--mas-face-text);
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	color: var(--mas-muted);
	margin: 0 0 var(--mas-sp-2);
}
/* The legal row is small print, and small print may be small — but still tappable. */
.mk-footer-legal a { min-height: 44px; }




/* ═══════════════════════════════════════════════════════════════════════════
 * MAS PROPERTY 2027
 *
 * Set to the MAS Property reference screens: quiet, editorial, architectural.
 * A 1240px measure; Bw Vivant for display in regular weight, Gotham for text;
 * navy bands between ivory and white; photographs square-cut with their
 * labels on the picture; hairlines, no shadows, no rounding; navigation and
 * labels in small, widely tracked capitals. Motion is short and stops for
 * reduced motion.
 *
 * mk27-* classes belong to the 2027 sections (patterns/mas-*.php). Meklara
 * blocks are restyled through their own classes; nothing they do is rebuilt.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
	--mk27-ink: #0E1A24;          /* the navy of the bands */
	--mk27-black: #060809;        /* the footer */
	--mk27-ivory: #F7F6F3;
	--mk27-white: #FFFFFF;
	--mk27-text: #1B2A36;
	--mk27-muted: #7C868E;
	--mk27-rule: #E4E0DA;
	--mk27-on-ink: rgba(255, 255, 255, 0.9);
	--mk27-on-ink-muted: rgba(255, 255, 255, 0.58);
	--mk27-on-ink-line: rgba(255, 255, 255, 0.14);
	--mk27-max: 1240px;
	--mk27-gutter: var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 3rem));
	--mk27-track: 0.24em;         /* the tracking of every small capital */
	--mas-ivory: var(--mk27-ivory);
	--mas-rule: var(--mk27-rule);
}
body { background: var(--mk27-ivory); color: var(--mk27-text); }

/* ── Type ────────────────────────────────────────────────────────────────── */
.mk27-h2,
.mk-devstrip-heading,
.mk27-contact .mk-close-heading {
	font-family: var(--mas-face-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 2.3vw, 2.35rem);
	line-height: 1.12;
	letter-spacing: -0.005em;
	text-transform: none;
	color: var(--mk27-ink);
	margin: 0;
}
.mk27-eyebrow,
.mk-devstrip .mk-eyebrow {
	font-family: var(--mas-face-text);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--mk27-muted);
	margin: 0 0 1.1rem;
}
.mk27-text { font-size: 0.8125rem; line-height: 1.75; color: var(--mk27-muted); max-width: 34ch; margin: 0; }
.mk27-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	font-family: var(--mas-face-text);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: var(--mk27-track);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mk27-ink);
}
.mk27-more a span { transition: transform 240ms var(--mas-ease); }
.mk27-more a:hover span { transform: translateX(4px); }
/* Underlined, as the reference; the line sits under the words and the tap
   area stays 44px tall around them. */
.mk27-more--underline a { min-height: 44px; padding: 0; background: linear-gradient(currentColor, currentColor) left calc(50% + 0.75em) / 100% 1px no-repeat; }
/* One outlined button, used on the navy bands. */
.mk27-button,
.mk-devstrip .mk-button--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: var(--mas-face-text);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: var(--mk27-track);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 240ms var(--mas-ease-out), color 240ms var(--mas-ease-out);
}
.mk27-button:hover,
.mk-devstrip .mk-button--ghost:hover { background: #fff; border-color: #fff; color: var(--mk27-ink); }
.mk27-placeholder { margin: 0; font-size: 0.5625rem; font-weight: 500; letter-spacing: var(--mk27-track); text-transform: uppercase; color: var(--mk27-on-ink-muted); }

/* ── Bands ───────────────────────────────────────────────────────────────── */
.mk27-band--ink { background: var(--mk27-ink); color: var(--mk27-on-ink); }
.mk27-band--ink .mk27-h2 { color: #fff; }
.mk27-band--ivory { background: var(--mk27-ivory); }
.mk27-band--white { background: var(--mk27-white); }
main.mk27-home > .alignfull + .alignfull,
main.mk27-home > * + * { margin-block-start: 0; }
/* Every 2027 band keeps the 1240px measure itself, whatever layout width an
   editor gives the group around it. */
.mk27-locations-grid, .mk27-head, .mk27-featured .meklara-collection, .mk27-standard-grid { max-width: var(--mk27-max); margin-inline: auto !important; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.mk-header > .mk-header-row { width: 100%; max-width: 1440px; margin-inline: auto; }
/* The mark: MAS over PROPERTY inside a hairline square. */
.mk-logo { margin: 0; }
.mk-logo a,
.mk-header .mk-logo a,
.mk-header--over:not(.is-scrolled) .mk-logo a {
	display: inline-grid;
	place-content: center;
	justify-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid currentColor;
	line-height: 1;
	font-size: 1rem;
	color: inherit;
	text-decoration: none;
}
.mk-logo-mas { font-family: var(--mas-face-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.01em; }
.mk-logo-property { font-family: var(--mas-face-text); font-size: 0.25rem; letter-spacing: 0.3em; margin-top: 0.2rem; margin-right: -0.3em; }
@media (max-width: 1200px) { .mk-logo a, .mk-header .mk-logo a { width: 46px; height: 46px; } }
.mk-nav .wp-block-navigation__container { gap: 2.4rem; }
.mk-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--mas-face-text);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: var(--mk27-track);
	text-transform: uppercase;
}
/* The reference menu has no chevrons; the panel opens on hover and focus. */
@media (min-width: 1201px) {
	.mk-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle { margin-left: 0.3rem; opacity: 0.6; }
	.mk-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle svg { width: 8px; height: 8px; }
}
.mk-header-actions { gap: 2rem; }
.mk-lang { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.2em; }
.mk-lang-chev { opacity: 0.7; }
@media (max-width: 1200px) { .mk-lang { display: none; } }
.mk-header-actions .mk-header-link--solid,
.mk-header--over:not(.is-scrolled) .mk-header-actions .mk-header-link--solid {
	min-height: 40px;
	padding: 0 1.25rem;
	background: #fff;
	border: 1px solid #fff;
	color: var(--mk27-ink);
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: 0.2em;
}
.mk-header-actions .mk-header-link--solid:hover,
.mk-header--over:not(.is-scrolled) .mk-header-actions .mk-header-link--solid:hover { background: transparent; color: #fff; }
/* Once the header takes paper, the button takes ink. */
.mk-header.is-scrolled .mk-header-actions .mk-header-link--solid,
.mk-header:not(.mk-header--over) .mk-header-actions .mk-header-link--solid { background: var(--mk27-ink); border-color: var(--mk27-ink); color: #fff; }
.mk-header.is-scrolled .mk-header-actions .mk-header-link--solid:hover,
.mk-header:not(.mk-header--over) .mk-header-actions .mk-header-link--solid:hover { background: transparent; color: var(--mk27-ink); }
@media (max-width: 900px) {
	.mk-header-actions .mk-header-link--solid,
	.mk-header--over:not(.is-scrolled) .mk-header-actions .mk-header-link--solid { min-height: 44px; }
}

/* The mega menus: Properties, Markets and Insights open as one wide panel
   under the header, their groups set out in columns. Desktop only; the drawer
   below 1200px keeps its folding sections. */
@media (min-width: 1201px) {
	/* The panel measures from the fixed header, so everything between them,
	   including the drawer's wrappers that WordPress keeps on desktop, stays
	   out of positioning. */
	.mk-header .mk-nav,
	.mk-header .mk-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
	.mk-header .mk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.mk-header .mk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.mk-header .mk-nav .wp-block-navigation__container,
	/* li only: WordPress also puts the submenu's class on its panel <ul>,
	   and a static panel sits inside the menu row and widens every item. */
	.mk-header .mk-nav li.mk-mega { position: static; }
	.mk-header .mk-nav .mk-mega > .wp-block-navigation__submenu-container {
		left: 0 !important;
		right: 0;
		top: 100%;
		width: auto !important;
		min-width: 0 !important;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
		align-items: start;
		gap: 1.75rem 3rem;
		padding: 2.5rem max(var(--mas-gutter), calc((100% - var(--mk27-max)) / 2)) 3rem;
		background: var(--mas-ivory);
		color: var(--mas-ink);
		border: 0;
		border-top: 1px solid var(--mas-rule);
		border-bottom: 1px solid var(--mas-rule);
		box-shadow: 0 30px 60px -40px rgba(8, 18, 26, 0.35);
	}
	/* A bridge over the gap between the menu item and the panel, so the
	   pointer can cross it without the panel closing. */
	.mk-header .mk-nav .mk-mega > .wp-block-navigation__submenu-container::before {
		content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px;
	}
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.35rem 0;
		font-family: var(--mas-face-text);
		font-size: 0.875rem;
		letter-spacing: 0;
		text-transform: none;
		color: var(--mas-ink);
		min-height: 0;
	}
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 0.3em; }
	/* A group inside the panel is a column: its name a micro-label, its
	   links listed beneath it, always open. */
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child { display: block; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
		display: block;
		margin-bottom: 0.6rem;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid var(--mas-rule);
		font-size: 0.6875rem;
		font-weight: 500;
		letter-spacing: var(--mas-tracking-label);
		text-transform: uppercase;
	}
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-submenu__toggle { display: none; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		visibility: visible;
		opacity: 1;
		width: auto;
		height: auto;
		min-width: 0;
		overflow: visible;
		display: block;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		columns: 1;
	}
	/* A long group (Madrid, Costa del Sol) runs in two columns and spans two. */
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child:has(> .wp-block-navigation__submenu-container > :nth-child(9)) { grid-column: span 2; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container:has(> :nth-child(9)) { columns: 2; column-gap: 2.5rem; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > li { break-inside: avoid; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* About 640px on a laptop, not the full screen: the first band shows below it. */
.mk27-home .mk-hero.meklara-hero-panel {
	min-height: clamp(560px, 60vh, 700px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.mk27-home .mk-hero.has-image::after {
	background: linear-gradient(to bottom, rgba(6, 12, 18, 0.5) 0%, rgba(6, 12, 18, 0.34) 30%, rgba(6, 12, 18, 0.34) 70%, rgba(6, 12, 18, 0.5) 100%);
}
.mk27-home .mk-hero-inner {
	max-width: calc(var(--mk27-max) + 2 * var(--mk27-gutter));
	padding: calc(var(--mas-header-h) + 3rem) var(--mk27-gutter) 2.25rem;
	gap: 0;
}
.mk27-home .mk-hero-copy { max-width: 48rem; padding-left: clamp(0rem, 2.5vw, 2rem); }
.mk27-home .mk-hero .mk-eyebrow,
.mk27-home .mk-hero-cta { display: none; }
.mk27-home .mk-hero-heading.meklara-hero-heading {
	font-family: var(--mas-face-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 4.3vw, 3.85rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	text-transform: none;
	max-width: none;
	margin: 0 0 1.5rem;
}
.mk27-home .mk-hero-lede.meklara-hero-lede {
	font-family: var(--mas-face-text);
	font-weight: 300;
	font-size: 0.8125rem;
	line-height: 1.65;
	text-transform: none;
	max-width: 42ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
}
.mk27-home .mk-hero-credit.meklara-hero-credit { font-size: 0.5rem; letter-spacing: 0.2em; opacity: 0.6; }
/* The search: one long white bar, hairline divisions, a navy button. */
.mk27-home .mk-hero-bar {
	max-width: calc(var(--mk27-max) + 2 * var(--mk27-gutter));
	margin: 0 auto 4rem;
	padding: 0 var(--mk27-gutter);
}
.mk27-home .mk-herobar,
.mk27-home .mk-herobar.mk-herobar {
	max-width: 61rem;
	margin-left: clamp(0rem, 2.5vw, 2rem);
	background: #fff;
	border-radius: 0;
	backdrop-filter: none;
	box-shadow: none;
}
@supports (backdrop-filter: blur(8px)) {
	.mk27-home .mk-herobar.mk-herobar { background: #fff; backdrop-filter: none; }
}
.mk27-home .mk-herobar .meklara-field { padding: 0.55rem 1.1rem 0.6rem; gap: 0.15rem; background: transparent; }
.mk27-home .mk-herobar .meklara-field + .meklara-field::before,
.mk27-home .mk-herobar-fields + .mk-herobar-submit::before { top: 0; bottom: 0; background: var(--mk27-rule); }
.mk27-home .mk-herobar .meklara-field-label { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.22em; color: var(--mk27-muted); }
.mk27-home .mk-herobar select {
	font-family: var(--mas-face-text);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mk27-ink);
}
.mk27-home .mk-herobar .mk-herobar-submit.mk-button {
	min-width: 7.5rem;
	padding-inline: 1.5rem;
	background: var(--mk27-ink);
	border: 1px solid var(--mk27-ink);
	border-radius: 0;
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 500;
	letter-spacing: var(--mk27-track);
	text-transform: uppercase;
}
.mk27-home .mk-herobar .mk-herobar-submit.mk-button:hover { background: #172a38; }
.mk27-home .mk-herobar .mk-herobar-submit.mk-button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ── Locations ───────────────────────────────────────────────────────────── */
.mk27-locations { padding-block: 2.75rem; }
.mk27-locations-grid { display: grid; grid-template-columns: 12.75rem minmax(0, 1fr); align-items: start; }
.mk27-locations-grid > * { margin: 0 !important; }
.mk27-locations-heading { font-size: clamp(1.6rem, 2vw, 2rem); color: #fff; padding-top: 0.1rem; }
/* Three to a row, as the reference: a third market fills the space, a fourth
   starts the next row, and no card ever changes shape. */
.mk27-markets-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mk27-markets-row > * { margin: 0 !important; }
.mk27-market { position: relative; overflow: hidden; margin: 0; background: #0a141c; color: #fff; }
.mk27-market-media { margin: 0; aspect-ratio: 34 / 33; overflow: hidden; }
.mk27-market-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1400ms var(--mas-ease-out); }
@media (hover: hover) { .mk27-market:hover .mk27-market-media img { transform: scale(1.03); } }
.mk27-market-media--empty { display: grid; place-items: center; background: linear-gradient(170deg, #1a2a37, #0a141c); }
.mk27-market-body {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 0.2rem;
	padding: 3rem 1rem 0.6rem;
	background: linear-gradient(to top, rgba(6, 12, 18, 0.78) 0%, rgba(6, 12, 18, 0.3) 60%, rgba(6, 12, 18, 0) 100%);
}
.mk27-market-body > * { margin: 0; }
.mk27-market-name { font-family: var(--mas-face-text); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.mk27-market-name a { color: #fff; text-decoration: none; }
.mk27-market-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mk27-market-name a:focus-visible { outline: none; }
.mk27-market-name a:focus-visible::after { outline: 2px solid #fff; outline-offset: -6px; }
.mk27-market-country { font-size: 0.625rem; color: var(--mk27-on-ink-muted); }
.mk27-market-go { position: relative; z-index: 2; margin-top: 0.35rem !important; }
.mk27-market-go a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.5rem; font-weight: 500; letter-spacing: var(--mk27-track); text-transform: uppercase; color: var(--mk27-on-ink-muted); text-decoration: none; }
.mk27-market-go a:hover { color: #fff; }

/* ── Featured properties: photographs on ivory, no card ──────────────────── */
.mk27-featured { padding-block: 3.75rem 4.25rem; }
.mk27-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2.4rem; }
.mk27-head > * { margin: 0; }
.mk27-featured .meklara-collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 1.25rem; }
.mk27-featured .meklara-card { background: transparent; border: 0; }
.mk27-featured .meklara-card-link { display: flex; flex-direction: column; gap: 0; color: var(--mk27-ink); }
.mk27-featured .meklara-card-frame { aspect-ratio: 3 / 2; background: var(--mk27-rule); }
.mk27-featured .meklara-card-image { transition: transform 1400ms var(--mas-ease-out); }
@media (hover: hover) { .mk27-featured .meklara-card-link:hover .meklara-card-image { transform: scale(1.03); } }
.mk27-featured .meklara-card-body { display: flex; flex-direction: column; gap: 0; padding: 1.25rem 0 0; }
.mk27-featured .meklara-card-place { order: 1; font-size: 0.5rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mk27-ink); }
.mk27-featured .meklara-card-title { order: 2; margin: 0.5rem 0 0; font-family: var(--mas-face-display); font-weight: 400; font-size: 1rem; line-height: 1.35; }
.mk27-featured .meklara-card-facts { order: 3; margin-top: 1.1rem; gap: 0.9rem; font-size: 0.625rem; color: var(--mk27-muted); }
.mk27-featured .meklara-card-facts > span + span { padding-left: 0; border-left: 0; }
.mk27-featured .meklara-card-price { order: 4; margin-top: 0.4rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; }
@media (hover: hover) { .mk27-featured .meklara-card-link:hover .meklara-card-title { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; } }

/* ── New developments: the Meklara strip, set to the reference ───────────── */
.mk-devstrip { background: var(--mk27-ink); }
.mk-devstrip-inner {
	max-width: calc(var(--mk27-max) + 2 * var(--mk27-gutter));
	padding: 2.75rem var(--mk27-gutter);
}
@media (min-width: 1025px) {
	.mk-devstrip-inner { grid-template-columns: 16.25rem minmax(0, 1fr); align-items: start; gap: 0; }
}
.mk-devstrip-copy { padding-top: 0.25rem; padding-right: 2rem; }
.mk-devstrip-heading { color: #fff; margin: 0 0 1.4rem; max-width: 11ch; }
.mk-devstrip-text { font-size: 0.6875rem; line-height: 1.75; color: var(--mk27-on-ink-muted); margin: 0 0 2rem; max-width: 30ch; }
.mk-devstrip-tiles { gap: 6px; }
.mk-devtile-media { aspect-ratio: 19 / 33; }
.mk-devtile-body { gap: 0.3rem; padding: 3rem 1rem 1.25rem; background: linear-gradient(to top, rgba(6, 12, 18, 0.82) 0%, rgba(6, 12, 18, 0.32) 60%, rgba(6, 12, 18, 0) 100%); }
.mk-devtile-place { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.22em; color: var(--mk27-on-ink-muted); }
.mk-devtile-name { font-family: var(--mas-face-display); font-weight: 400; font-size: 1rem; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.mk-devtile-from { margin-top: 0.3rem; font-size: 0.625rem; font-weight: 500; color: #fff; }

/* ── The MAS Standard ────────────────────────────────────────────────────── */
.mk27-standard { padding-block: clamp(4.5rem, 7vw, 7rem); }
.mk27-standard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.mk27-standard-grid > * { margin: 0 !important; }
.mk27-standard-copy > * { margin: 0; }
.mk27-standard .mk27-h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
.mk27-rule.wp-block-separator { width: 50px; max-width: 50px; margin: 1.6rem 0 1.75rem !important; border: 0; border-top: 1px solid var(--mk27-ink); opacity: 1; background: none; }
.mk27-standard .mk27-text { margin-bottom: 1.5rem; }
.mk27-steps { display: grid; }
.mk27-steps > * { margin: 0 !important; }
.mk27-step { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; padding: 1.9rem 0; border-bottom: 1px solid var(--mk27-rule); }
.mk27-step:first-child { padding-top: 0; }
.mk27-step:last-child { border-bottom: 0; }
.mk27-step > * { margin: 0; }
.mk27-step-figure { font-family: var(--mas-face-display); font-weight: 400; font-size: clamp(2.25rem, 3vw, 2.75rem); line-height: 1; color: var(--mk27-ink); }
.mk27-step-body { padding-left: 1.6rem; border-left: 1px solid var(--mk27-rule); }
.mk27-step-body > * { margin: 0; }
.mk27-step-title.wp-block-heading { font-family: var(--mas-face-text); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk27-ink); }
.mk27-step-text { margin-top: 0.6rem !important; font-size: 0.6875rem; line-height: 1.7; color: var(--mk27-muted); max-width: 32ch; }

/* ── The closing line: Meklara's call to action, kept minimal ────────────── */
.mk27-contact .mk-close,
.mk27-contact .mk-close.mk-close--dark {
	margin-top: 0;
	padding: clamp(2.5rem, 4vw, 3.25rem) var(--mk27-gutter);
	background: var(--mk27-ivory);
	color: var(--mk27-ink);
	border-top: 1px solid var(--mk27-rule);
}
.mk27-contact .mk-close-inner { max-width: var(--mk27-max); grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 1.25rem 3rem; }
.mk27-contact .mk-close-heading,
.mk27-contact .mk-close--dark .mk-close-heading { font-size: clamp(1.4rem, 1.9vw, 1.75rem); color: var(--mk27-ink); max-width: none; }
.mk27-contact .mk-close-text,
.mk27-contact .mk-close--dark .mk-close-text { font-size: 0.75rem; line-height: 1.7; color: var(--mk27-muted); max-width: 48ch; }
.mk27-contact .mk-close p:last-child { margin: 0; }
.mk27-contact .mk-close .mk-more {
	display: inline-flex; align-items: center; gap: 0.7rem;
	padding: 0.75rem 0 0.35rem;
	box-shadow: inset 0 -1px 0 currentColor;
	color: var(--mk27-ink);
	font-size: 0.5625rem; font-weight: 500; letter-spacing: var(--mk27-track); text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
@media (max-width: 900px) { .mk27-contact .mk-close-inner { grid-template-columns: minmax(0, 1fr); } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.mk27-footer { background: var(--mk27-black); color: var(--mk27-on-ink-muted); padding-block: clamp(3.5rem, 6vw, 5rem) 2.25rem; }
.mk27-footer > * { margin-block: 0; }
.mk27-footer a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(255, 255, 255, 0.6); font-size: 0.6875rem; text-decoration: none; }
.mk27-footer a:hover { color: #fff; }
.mk27-footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.4fr) auto; gap: 2.5rem; align-items: start; padding-bottom: 3rem; }
.mk27-footer-top > * { margin: 0 !important; }
.mk27-footer-brand > * { margin: 0; }
.mk27-footer-wordmark a { min-height: 0; font-family: var(--mas-face-display); font-size: 1.4rem; color: #fff; }
.mk27-footer-note { margin-top: 1.4rem !important; font-size: 0.6875rem; line-height: 1.7; max-width: 30ch; }
.mk27-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.mk27-footer-cols > * { margin: 0 !important; }
.mk27-footer .mk-footer-label { margin: 0 0 0.9rem; font-size: 0.5rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.mk27-footer .mk-footer-list { list-style: none; margin: 0; padding: 0; }
.mk27-footer .mk-footer-list li { margin: 0; }
/* Social icons: hairline circles. A link without an address renders nothing,
   so the row appears by itself once the addresses are filled in. */
.mk27-footer-social { gap: 0.6rem !important; margin: 0 !important; }
.mk27-footer-social .wp-social-link { background: transparent !important; color: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; }
.mk27-footer-social .wp-social-link a { min-height: 0; padding: 0.55rem; }
.mk27-footer-social .wp-social-link svg { width: 14px; height: 14px; }
.mk27-footer-contact { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding: 1.75rem 0; border-top: 1px solid var(--mk27-on-ink-line); font-size: 0.6875rem; }
.mk27-footer-contact > * { margin: 0 !important; }
.mk27-footer-contact span + span { margin-left: 1.25rem; }
.mk27-footer-reach { display: flex; gap: 1.5rem; }
.mk27-footer-reach a { color: #fff; font-weight: 500; }
.mk27-footer-legal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; font-size: 0.5625rem; }
.mk27-footer-legal > * { margin: 0 !important; }
.mk27-footer-markets { letter-spacing: 0.3em; text-transform: uppercase; }
.mk27-footer-policies { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 1.25rem; }
.mk27-footer-policies a { font-size: 0.5625rem; letter-spacing: 0.1em; min-height: 44px; }
.mk27-footer .mk-footer-demo { opacity: 0.7; }
@media (max-width: 1024px) {
	.mk27-footer-top { grid-template-columns: minmax(0, 1fr); }
	.mk27-footer-legal { grid-template-columns: minmax(0, 1fr); }
	.mk27-footer-policies { justify-content: flex-start; }
}
@media (max-width: 781px) {
	.mk27-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk27-footer a { min-height: 44px; }
	.mk27-footer-contact span + span { margin-left: 0; display: block; }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.mk27-locations-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.mk27-featured .meklara-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-devstrip-copy { padding-right: 0; }
}
@media (max-width: 900px) {
	.mk27-standard-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 781px) {
	.mk27-home .mk-hero.meklara-hero-panel { min-height: 100svh; justify-content: flex-end; }
	.mk27-home .mk-hero-copy, .mk27-home .mk-herobar, .mk27-home .mk-herobar.mk-herobar { padding-left: 0; margin-left: 0; }
	.mk27-home .mk-hero-bar { margin-bottom: 2rem; }
	.mk27-home .mk-herobar .mk-herobar-submit.mk-button { min-width: 0; min-height: 48px; }
	.mk27-home .mk-herobar .meklara-field { padding: 0.75rem 1rem; }
	/* Markets swipe sideways: large photographs, the next card at the edge. */
	.mk27-markets-row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--mk27-gutter));
		padding-inline: var(--mk27-gutter);
		scroll-padding-inline: var(--mk27-gutter);
	}
	.mk27-markets-row::-webkit-scrollbar { display: none; }
	.mk27-market { scroll-snap-align: start; }
	.mk27-market-media { aspect-ratio: 4 / 5; }
	.mk27-featured .meklara-collection { grid-template-columns: minmax(0, 1fr); }
	.mk27-step { grid-template-columns: 4.5rem minmax(0, 1fr); }
	.mk27-step-body { padding-left: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mk27-market-media img, .mk27-featured .meklara-card-image, .mk27-more a span { transition: none; }
}

/* ── Reference details ───────────────────────────────────────────────────── */
/* Georgia has no light weight and needs no tightening; keep it regular and
   at its own spacing everywhere a 2027 heading appears. */
.mk27-h2, .mk-devstrip-heading, .mk27-contact .mk-close-heading,
.mk27-home .mk-hero-heading.meklara-hero-heading, .mk27-step-figure,
.mk27-featured .meklara-card-title, .mk-devtile-name, .mk27-footer-wordmark a, .mk-logo-mas {
	font-weight: 400;
	letter-spacing: 0;
}
.mk27-featured .mk27-h2, .mk-devstrip-heading { font-size: clamp(1.75rem, 2.1vw, 2.15rem); line-height: 1.1; }
.mk27-home .mk-hero-heading.meklara-hero-heading { line-height: 1.02; }
.mk27-step-title.wp-block-heading, .mk27-market-name { font-weight: 600; }
.mk27-eyebrow, .mk-devstrip .mk-eyebrow { font-weight: 500; }

/* The menu shows words only. The submenu button stays for keyboards and
   screen readers, out of sight until it takes focus. */
@media (min-width: 1201px) {
	.mk-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle:not(:focus-visible) {
		position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
}

/* The search bar as the reference draws it: one line per field, the field's
   name in small capitals where nothing is chosen yet, the choice itself once
   there is one. The name stays the field's label for assistive technology. */
.mk27-home .mk-herobar-fields { grid-template-columns: 1.45fr 1.2fr 1fr 1fr; }
.mk27-home .mk-herobar .meklara-field {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 2rem 0 1.1rem;
}
.mk27-home .mk-herobar .meklara-field-label {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--mk27-ink);
	pointer-events: none;
	transition: opacity 160ms ease;
}
.mk27-home .mk-herobar select {
	width: 100%;
	min-height: 44px;
	padding: 0;
	background-image: none;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	cursor: pointer;
}
.mk27-home .mk-herobar option { color: var(--mk27-ink); }
.mk27-home .mk-herobar .meklara-field:has(option[value=""]:checked) select { color: transparent; }
.mk27-home .mk-herobar .meklara-field:not(:has(option[value=""]:checked)) .meklara-field-label { opacity: 0; }
/* One small chevron at the right of every field. */
.mk27-home .mk-herobar .meklara-field::after {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	bottom: auto;
	width: 5px;
	height: 5px;
	border-right: 1px solid var(--mk27-ink);
	border-bottom: 1px solid var(--mk27-ink);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.mk27-home .mk-herobar .mk-herobar-submit.mk-button { min-height: 44px; }
/* The reference hero carries no photo credit line. */
.mk27-home .mk-hero-credit { display: none; }
@media (max-width: 781px) {
	.mk27-home .mk-herobar-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk27-home .mk-herobar .meklara-field { min-height: 52px; }
}

/* ── The logo ────────────────────────────────────────────────────────────── */
/* Mas Property's own mark (assets/logo/mas-property-logo-white.png): the
   lettering is cut from it and drawn as a mask, so it takes the header's
   colour, white over a photograph and ink on paper. The frame is drawn here
   as a 1px line: at 54px the file's own frame would be half a pixel. */
.mk-header .mk-logo a,
.mk-header--over:not(.is-scrolled) .mk-logo a { border: 1px solid currentColor; }
.mk-logo-mark {
	display: block;
	width: 33px;   /* the lettering's share of the 54px frame in the original */
	height: 18px;
	background: currentColor;
	-webkit-mask: url("assets/logo/mas-property-lettering-white.png") center / contain no-repeat;
	mask: url("assets/logo/mas-property-lettering-white.png") center / contain no-repeat;
}
@media (max-width: 1200px) { .mk-logo-mark { width: 28px; height: 16px; } }

/* ── The WordPress toolbar ───────────────────────────────────────────────── */
/* Logged-in editors see WordPress's black toolbar across the top. The header
   is fixed, so it moves down by the toolbar's height instead of sliding under
   it; on a phone the toolbar is pinned too, or it would scroll away and leave
   a gap above the header. Visitors never see the toolbar. */
body.admin-bar .mk-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .mk-header { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar #wpadminbar { position: fixed; }
}


/* ── Readability ─────────────────────────────────────────────────────────── */
/* The reference sets its small capitals at 8-9px. Here nothing a visitor has
   to read is smaller than 11px, reading text is 13-16px, and the grey on
   light grounds is dark enough for small text (#5E6973 on ivory, 5.4:1). The
   proportions of every section stay as they were. */
:root { --mk27-muted: #5E6973; }
/* Menu, language, header button */
.mk-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 0.6875rem; letter-spacing: 0.2em; }
.mk-lang { font-size: 0.6875rem; }
.mk-header-actions .mk-header-link--solid,
.mk-header--over:not(.is-scrolled) .mk-header-actions .mk-header-link--solid { font-size: 0.6875rem; letter-spacing: 0.16em; min-height: 44px; }
@media (min-width: 1201px) {
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 0.9375rem; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content { font-size: 0.6875rem; }
}
/* Labels, links and buttons in small capitals */
.mk27-eyebrow, .mk-devstrip .mk-eyebrow { font-size: 0.6875rem; letter-spacing: 0.24em; }
.mk27-more a, .mk27-button, .mk-devstrip .mk-button--ghost { font-size: 0.6875rem; letter-spacing: 0.2em; }
.mk27-placeholder { font-size: 0.6875rem; }
/* Reading text */
.mk27-text { font-size: 0.9375rem; line-height: 1.7; }
.mk27-home .mk-hero-lede.meklara-hero-lede { font-size: 1rem; line-height: 1.6; max-width: 44ch; }
.mk-devstrip-text { font-size: 0.875rem; line-height: 1.7; }
/* The search bar */
.mk27-home .mk-herobar .meklara-field-label,
.mk27-home .mk-herobar select { font-size: 0.6875rem; letter-spacing: 0.14em; }
.mk27-home .mk-herobar .mk-herobar-submit.mk-button { font-size: 0.6875rem; letter-spacing: 0.18em; min-width: 9.5rem; }
/* Market cards */
.mk27-market-name { font-size: 0.875rem; }
.mk27-market-country { font-size: 0.8125rem; }
.mk27-market-go a { font-size: 0.6875rem; letter-spacing: 0.18em; }
/* Property cards */
.mk27-featured .meklara-card-place { font-size: 0.6875rem; letter-spacing: 0.18em; }
.mk27-featured .meklara-card-title { font-size: 1.125rem; line-height: 1.35; }
.mk27-featured .meklara-card-facts { font-size: 0.8125rem; }
.mk27-featured .meklara-card-price { font-size: 0.9375rem; }
/* Development cards */
.mk-devtile-place { font-size: 0.6875rem; letter-spacing: 0.16em; }
.mk-devtile-name { font-size: 1.125rem; }
.mk-devtile-from { font-size: 0.8125rem; }
/* The MAS Standard */
.mk27-step-title.wp-block-heading { font-size: 0.875rem; }
.mk27-step-text { font-size: 0.875rem; max-width: 36ch; }
/* Footer */
.mk27-footer a { font-size: 0.8125rem; }
.mk27-footer .mk-footer-label { font-size: 0.6875rem; letter-spacing: 0.24em; }
.mk27-footer-note, .mk27-footer-contact { font-size: 0.8125rem; }
.mk27-footer-legal, .mk27-footer-policies a { font-size: 0.75rem; }

/* ── The header below 1200px ─────────────────────────────────────────────── */
/* Logo on the left, everything else on the right: on a tablet, Contact us
   then the menu button; on a phone, the menu button alone (Contact is in the
   menu and the footer). The mark shrinks to a 44px square so it sits inside
   the header rather than filling it. */
@media (max-width: 1200px) {
	.mk-header-row { gap: 0.75rem; }
	.mk-header-row > .mk-logo { order: 1; margin-right: auto; }
	.mk-header-row > .mk-header-actions { order: 2; }
	.mk-header-row > .mk-nav { order: 3; flex: 0 0 auto; }
	.mk-header .mk-logo a,
	.mk-header--over:not(.is-scrolled) .mk-logo a { width: 46px; height: 46px; }
	.mk-logo-mark { width: 28px; height: 16px; }
}
@media (max-width: 600px) {
	.mk-header-row > .mk-header-actions { display: none; }
	.mk-header .mk-logo a,
	.mk-header--over:not(.is-scrolled) .mk-logo a { width: 44px; height: 44px; }
	.mk-logo-mark { width: 26px; height: 15px; }
}

/* ── The full-screen menu ────────────────────────────────────────────────── */
/* The header's small capitals are for the bar; inside the open drawer the
   sections are set in the display serif at a size worth tapping, their
   links beneath in the text face. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-family: var(--mas-face-display);
	font-size: 1.75rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--mas-face-text);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

/* ── Footer with the full secondary site map ─────────────────────────────── */
/* Six columns (Properties, Markets, Company, Guides, Services, Contact) set
   under the brand line rather than beside it, so no column is squeezed. */
.mk27-footer-top { grid-template-columns: minmax(0, 1fr) auto; }
.mk27-footer-brand { grid-column: 1; grid-row: 1; }
.mk27-footer-social { grid-column: 2; grid-row: 1; align-self: start; }
.mk27-footer-cols { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem 1.75rem; margin-top: 1rem !important; }
.mk27-footer .mk-footer-list a { line-height: 1.4; }
@media (max-width: 1100px) { .mk27-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mk27-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Mega panels with the full site map ──────────────────────────────────── */
/* Markets now lists every area and neighbourhood (nine groups), so the panel
   sets them in narrower single columns with tighter lines, and never grows
   past the screen: if a small laptop cannot hold it, it scrolls inside. */
@media (min-width: 1201px) {
	.mk-header .mk-nav li.mk-mega > .wp-block-navigation__submenu-container {
		grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
		gap: 1.5rem 2rem;
		padding-top: 2rem;
		padding-bottom: 2.25rem;
		max-height: calc(100vh - var(--mas-header-h) - 32px);
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child:has(> .wp-block-navigation__submenu-container > :nth-child(9)) { grid-column: auto; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container:has(> :nth-child(9)) { columns: 1; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.2rem 0;
		font-size: 0.875rem;
		line-height: 1.35;
	}
}
@media (min-width: 1201px) {
	.mk-header .mk-nav li.mk-mega > .wp-block-navigation__submenu-container { gap: 1.25rem 2rem; padding-top: 1.6rem; padding-bottom: 1.75rem; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content { margin-bottom: 0.45rem; padding-bottom: 0.45rem; }
	.mk-header .mk-nav .mk-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.15rem 0; line-height: 1.3; }
}

/* ── New developments as a scroll panel ──────────────────────────────────── */
/* The strip shows up to twelve developments in one row that scrolls sideways
   at every size, with snap points for touch and trackpads. On a laptop about
   three and a half tiles show, so the row reads as more to come; the arrows
   under "View all developments" move it for a mouse (assets/site.js). */
@media (min-width: 1025px) {
	.mk-devstrip-tiles {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: calc((100% - 3 * 6px) / 3.5);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}
	.mk-devstrip-tiles::-webkit-scrollbar { display: none; }
}
.mk-devtile { scroll-snap-align: start; }
.mk27-rail-controls { display: flex; gap: 0.5rem; margin-top: 2rem; }
.mk27-rail-controls[hidden] { display: none; }
.mk27-rail-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color 240ms var(--mas-ease-out), color 240ms var(--mas-ease-out), opacity 240ms ease;
}
.mk27-rail-btn:hover:not(:disabled) { background: #fff; color: var(--mk27-ink); }
.mk27-rail-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mk27-rail-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 1024px) { .mk27-rail-controls { display: none; } }
/* The developments copy, easier to read. */
.mk-devstrip-text { font-size: 0.9375rem; line-height: 1.7; color: rgba(255, 255, 255, 0.72); max-width: 30ch; }

/* The Madrid photograph: keep the Metropolis dome in the card's crop. */
.mk27-market-media--madrid img { object-position: 22% 55%; }

/* ── Readability across the whole site ───────────────────────────────────── */
/* Measured on every page type (properties, a property, developments, a
   development, an area guide, a property type, about, insights, an article,
   contact, 404): these labels were drawn at 9.9-10.9px by the luxe and
   Meklara styles. On this theme nothing a visitor reads is under 11px. */
.mk-eyebrow,
.meklara-field-label,
.meklara-card-place,
.mk-button,
.wp-block-button__link,
.mk-devcat-tab,
.mk-devcat-count-line,
.mk-pill,
.mk-mag-cat-count,
.mk-destination-count,
.meklara-source-demo,
.mk-provenance-summary > span,
.meklara-count,
.meklara-filters-open,
.meklara-search-title {
	font-size: max(0.6875rem, 11px) !important;
}
.mk-eyebrow { letter-spacing: 0.22em; color: var(--mk27-muted); }
/* Filters and sort: finger- and mouse-sized at every width, not only on
   touch screens. */
.meklara-search select,
.meklara-search input[type="text"],
.meklara-sort select,
.meklara-sort .meklara-button,
.meklara-sort button { min-height: 44px; }
/* Archive titles come from the data ("villa"); set them as titles. */
.mk27-archive-title::first-letter { text-transform: uppercase; }
.mk27-archive-title { font-family: var(--mas-face-display); font-weight: 400; letter-spacing: 0; }
/* Development names in the catalogue are links inside headings; give them a
   44px tap area without changing how they read. */
.mk-dev-card-title a,
.mk-cat-title a,
.mk-mag-title a { display: inline-flex; align-items: center; min-height: 44px; }