/**
 * RMH brand skin (D1), specs/11 §7. Shipped 2026-10 by web session 11 from the 10-03 preview
 * (marketing/reports/2026-10-03/brand-refresh/, whose README is the before/after record and the kit-colour contract).
 * Loads AFTER rmh-ui.css (07's file), which maps 4 kit tans to #80655A and draws the focus ring; this file builds on both.
 * Fonts follow RMH's brand book (Firmalt; rmh-website/.claude/skills/rmh-branding): titles in Petit Serif capitals, text in
 * Centra Nº1. Both are paid desktop licences with no web rights, so the web uses the closest free look-alikes (Jules 10-03):
 * Marcellus (titles, capitals) + DM Sans (text; variable 400-700, opsz 14). Self-hosted latin woff2, SIL OFL 1.1 (see the
 * *-OFL.txt files), 37 KB together. No preload: the LCP is a photo. Swapping in the real fonts later = these two @font-face.
 * Specificity: variables first. Where Elementor's per-widget rules (0,3,0 to 0,4,0) set a literal, `:not(#_)` adds one
 * id's weight instead of !important. The !important lines answer existing !important rules only (critical-lcp-fix in the
 * child theme's performance.php forces system-ui on body and `font-family: inherit` on .elementor-heading-title; two
 * Boostly buttons; reduced motion).
 * Scope: body.rmh-brand, which mu-plugins/rmh-brand.php adds only when the skin is on (front end only).
 * Sizes are px: this theme sets html{font-size:10px}, so 1rem = 10px here (the preview's rem clamps came out small).
 */
@font-face {
	font-family: "Marcellus";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("marcellus-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("dm-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans italic (variable, latin; Google's file, OFL, the same one Elementor self-hosted). Fetched only on pages that
   render italics (estate, corporate captions, blog posts): since 10-04 the skin drops Elementor's DM Sans stylesheet
   (2 files, 75 KB on every page; perf/02 measure), so this keeps real italics. */
@font-face {
	font-family: "DM Sans";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("dm-sans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Local fonts scaled to the web fonts' width and vertical metrics (fontTools, 10-03), so the swap barely reflows:
   Georgia → Marcellus (capitals), Arial → DM Sans 400 */
@font-face {
	font-family: "Marcellus Fallback";
	src: local("Georgia");
	size-adjust: 94.99%;
	ascent-override: 102.55%;
	descent-override: 29.45%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "DM Sans Fallback";
	src: local("Arial");
	size-adjust: 105.81%;
	ascent-override: 93.75%;
	descent-override: 29.30%;
	line-gap-override: 0%;
}

/* 1. Tokens, and the 27 kit colours collapsed onto them (post-191364.css, read 2026-10-03) */
body.rmh-brand {
	--rmh-ink: #231F20;
	--rmh-ink-soft: #625A55;   /* secondary text: ink's second weight (7.0:1) */
	--rmh-taupe-deep: #80655A; /* links + actions (5.35:1) */
	--rmh-taupe: #9D8070;      /* logo + decoration only, never text */
	--rmh-sand: #DED5CC;       /* hairlines */
	--rmh-cream: #F7F3EE;      /* one block per page */
	--rmh-white: #FFFFFF;
	--rmh-gold: #D79800;       /* rating stars only */
	--rmh-serif: "Marcellus", "Marcellus Fallback", Georgia, serif; /* titles in sentence case; capitals on short labels (10-04) */
	--rmh-sans: "DM Sans", "DM Sans Fallback", "Helvetica Neue", Arial, sans-serif;
	--rmh-space-1: 24px;
	--rmh-space-2: 40px;
	--rmh-space-3: 64px;
	--rmh-space-4: 96px;
	--rmh-pill: 999px;

	--e-global-color-primary: var(--rmh-ink);        /* #9D8070 (rmh-ui: #80655A) - buttons, titles, nav */
	--e-global-color-accent: var(--rmh-ink);         /* #9D8070 (rmh-ui: #80655A) - button fills */
	--e-global-color-secondary: var(--rmh-ink);      /* #000000 */
	--e-global-color-text: var(--rmh-ink);           /* #191919 */
	--e-global-color-e0b5a4d: var(--rmh-ink);        /* #231F20 */
	--e-global-color-f88f5a6: var(--rmh-ink);        /* #231F20 */
	--e-global-color-d11c881: var(--rmh-taupe-deep); /* #9D8070 - borders, small fills */
	--e-global-color-b2ee6a6: var(--rmh-taupe-deep); /* #988070 - text, accordion icons */
	--e-global-color-5a676c5: var(--rmh-taupe-deep); /* #BFA48A - eyebrow text (2.3:1 before) */
	--e-global-color-c578a34: var(--rmh-taupe-deep); /* #BFA48A */
	--e-global-color-6622387: var(--rmh-taupe);      /* #BEA389 - band fills (decoration); white text 3.65, ink 4.47 */
	--e-global-color-a6f3878: var(--rmh-taupe);      /* #BEA389 */
	--e-global-color-f2925d0: var(--rmh-taupe-deep); /* #D79800 - was the active nav item (2.4:1) */
	--e-global-color-69b9506: var(--rmh-gold);       /* #D79800 - stars */
	--e-global-color-047e947: var(--rmh-ink-soft);   /* #5A5A5A */
	--e-global-color-82ee91b: var(--rmh-ink-soft);   /* #625A55 */
	--e-global-color-fb25643: var(--rmh-sand);       /* #B4A596 */
	--e-global-color-c23f3d4: var(--rmh-sand);       /* #C9B9A8 */
	--e-global-color-2085741: var(--rmh-sand);       /* #DED5CC */
	--e-global-color-9f8b7bd: var(--rmh-sand);       /* #A3A3A3 - borders, dividers */
	--e-global-color-19a2908: var(--rmh-cream);      /* #F7F3EE */
	--e-global-color-43624b3: var(--rmh-cream);      /* #F6F3EF */
	--e-global-color-541d5f5: var(--rmh-cream);      /* #F5F5F5 */
	--e-global-color-616fab6: var(--rmh-cream);      /* #FAFAFA */
	--e-global-color-2abc135: var(--rmh-white);
	--e-global-color-b0e72b5: var(--rmh-white);
	--e-global-color-b0b996a: rgba(35, 31, 32, .15); /* #00000026 - shadows */
	--rmh-focus-ring: var(--rmh-ink);                /* rmh-ui.css draws the ring; ink on white reads better */

	/* 2. Kit typography (every style was "Lato"): display styles to the title serif, everything else to DM Sans; the
	   uppercase styles become as-typed (titles are sentence case since 10-04; labels get capitals from the label rules below) */
	--e-global-typography-text-font-family: var(--rmh-sans);
	--e-global-typography-secondary-font-family: var(--rmh-sans);
	--e-global-typography-accent-font-family: var(--rmh-sans);
	--e-global-typography-2a2a36c-font-family: var(--rmh-sans);
	--e-global-typography-38876eb-font-family: var(--rmh-sans);
	--e-global-typography-39cc623-font-family: var(--rmh-sans);
	--e-global-typography-42599fa-font-family: var(--rmh-sans);
	--e-global-typography-646ab02-font-family: var(--rmh-sans);
	--e-global-typography-6fb0f76-font-family: var(--rmh-sans);
	--e-global-typography-6fe98b5-font-family: var(--rmh-sans);
	--e-global-typography-9fec795-font-family: var(--rmh-sans);
	--e-global-typography-a96cd52-font-family: var(--rmh-sans);
	--e-global-typography-dbd5cfd-font-family: var(--rmh-sans);
	--e-global-typography-ea9ed07-font-family: var(--rmh-sans);
	--e-global-typography-primary-font-family: var(--rmh-serif);
	--e-global-typography-primary-font-weight: 400;
	--e-global-typography-primary-font-size: clamp(26px, 20px + 1vw, 34px);
	--e-global-typography-text-font-size: clamp(17px, 14px + .35vw, 19px);
	--e-global-typography-text-line-height: 1.65em;
	--e-global-typography-accent-font-weight: 700;
	--e-global-typography-363027e-font-family: var(--rmh-serif);
	--e-global-typography-363027e-font-size: clamp(34px, 24px + 2vw, 52px);
	--e-global-typography-363027e-font-weight: 400;
	--e-global-typography-0dddfe7-font-family: var(--rmh-serif);
	--e-global-typography-0dddfe7-font-size: clamp(30px, 22px + 1.5vw, 44px);
	--e-global-typography-0dddfe7-font-weight: 400;
	--e-global-typography-3973106-font-family: var(--rmh-serif);
	--e-global-typography-3973106-font-size: clamp(24px, 18px + .8vw, 30px);
	--e-global-typography-a5b20d7-font-size: 22px;
	--e-global-typography-39cc623-font-size: 15px;
	--e-global-typography-39cc623-font-weight: 700;
	--e-global-typography-ea9ed07-font-size: 16px;
	--e-global-typography-ea9ed07-font-weight: 700;
	--e-global-typography-6fe98b5-font-size: 15px;
	--e-global-typography-6fe98b5-font-weight: 400;
	--e-global-typography-42599fa-font-weight: 700;
	--e-global-typography-dbd5cfd-font-size: 13px;
	--e-global-typography-363027e-text-transform: none;
	--e-global-typography-0dddfe7-text-transform: none;
	--e-global-typography-a5b20d7-text-transform: none;
	--e-global-typography-39cc623-text-transform: none;
	--e-global-typography-ea9ed07-text-transform: none;
	--e-global-typography-3973106-text-transform: none;
	--e-global-typography-6fe98b5-text-transform: none;
	--e-global-typography-42599fa-text-transform: none;
	--e-global-typography-dbd5cfd-text-transform: none;
	--e-global-typography-363027e-letter-spacing: 0;
	--e-global-typography-39cc623-letter-spacing: .01em;
	--e-global-typography-ea9ed07-letter-spacing: 0;
	--e-global-typography-6fe98b5-letter-spacing: 0;
	--e-global-typography-42599fa-letter-spacing: .02em;
	--e-global-typography-dbd5cfd-letter-spacing: .04em;

	color: var(--rmh-ink);
	font-weight: 400;
}

/* 3. Body: DM Sans (critical-lcp-fix forces system-ui with !important) */
html body.rmh-brand { font-family: var(--rmh-sans) !important; }

/* Not inside the offer sheet (#rmh-offer, popup session), RMH's own inquiry form (.rmh-iform, session 07) or the consent
   banner (.rmh-cc, session 03): all three carry their own designed CSS. Every rule that could reach them ends in
   :where(:not(...)), which adds no specificity. (10-04: the h2 size rule reached the banner title, 24 px on a 22 px line.) */
/* 4. Headings, per the brand book's hierarchy: titles (h1, h2, the slider caption, tile titles) in the title serif and
   sentence case (since 10-04; capitals stay on short labels); subtitles (h3-h6) in DM Sans Medium as typed; labels in small tracked capitals. Not the consent banner (03's). */
html body.rmh-brand :is(h1, h2, .elementor-carousel-image-overlay, .elementor-cta__title):not(.rmh-cc__title):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	font-family: var(--rmh-serif) !important;
}
html body.rmh-brand :is(h3, h4, h5, h6):not(.rmh-cc__title):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	font-family: var(--rmh-sans) !important;
}
body.rmh-brand :is(h1, h2, .elementor-carousel-image-overlay, .elementor-cta__title):not(.rmh-cc__title):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	text-transform: none; letter-spacing: -.005em; font-weight: 400; line-height: 1.15; text-wrap: balance;
}
/* Titles are written in sentence case (Jules 10-04, specs/11 §13 b). Short labels keep the capitals: tile titles (place
   names) and listing card names. */
body.rmh-brand :is(.elementor-cta__title, .item-wrap h2.title):not(#_):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	text-transform: uppercase; letter-spacing: .05em;
}
body.rmh-brand :is(h3, h4, h5, h6):not(.rmh-cc__title):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.25; text-wrap: balance;
} /* colour stays the widget's: some sit on photos */
body.rmh-brand h1:not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) { font-size: clamp(28px, 20px + 2vw, 48px); }
body.rmh-brand h2:not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) { font-size: clamp(24px, 18px + 1.4vw, 40px); }
/* Labels / kicker lines (p/div/span heading widgets, e.g. "Welcome to Riviera Maya Haciendas"): small tracked capitals */
body.rmh-brand :is(p, div, span).elementor-heading-title:not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	font-family: var(--rmh-sans); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; line-height: 1.5;
}
/* A heading widget used as a label next to share icons stays a small DM Sans label */
body.rmh-brand .elementor-widget-heading:has(+ .elementor-widget-share-buttons) .elementor-heading-title:not(#_),
body.rmh-brand .elementor-widget-heading:has(+ .elementor-widget-social-icons) .elementor-heading-title:not(#_) {
	font-family: var(--rmh-sans) !important; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
/* Headings typed inside text blocks (weddings, blog, FAQs) are subtitles, often questions: DM Sans Medium, as typed */
html body.rmh-brand :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content) :is(h2, h3, h4, h5, h6):not(#_) {
	font-family: var(--rmh-sans) !important; text-transform: none; letter-spacing: 0; font-weight: 600;
}
body.rmh-brand :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content) :is(h2, h3):not(#_) { font-size: clamp(21px, 17px + .5vw, 25px); margin: 1.4em 0 .4em; }
body.rmh-brand :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content) :is(h4, h5, h6):not(#_) { font-size: 17px; }
/* Listing card names are titles too, smaller */
body.rmh-brand .item-wrap h2.title:not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) { font-size: 19px; letter-spacing: .03em; }
/* The home slider caption sits on a photo: keep it white */
body.rmh-brand .elementor-carousel-image-overlay:not(#_) { font-size: clamp(30px, 20px + 2.4vw, 54px); }

/* 5. Body copy: left-aligned, a readable measure, no justify */
body.rmh-brand :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .elementor-tab-content, .property-description, .entry-content) :is(p, li) {
	text-align: start;
	font-weight: 400;
}
/* Blog posts: the article body at the text size (the post template prints it at 16 px) */
body.rmh-brand .elementor-widget-theme-post-content :is(p, li) { font-size: var(--e-global-typography-text-font-size); line-height: 1.7; }
/* A readable measure for plain paragraphs (classed ones, e.g. the estate hero kicker, keep their place) */
body.rmh-brand :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .entry-content) > :is(p, ul, ol):not([class]),
body.rmh-brand .elementor-widget-theme-post-content .elementor-widget-container > :is(p, ul, ol, h2, h3, h4):not([class]),
body.rmh-brand .elementor-widget-text-editor .elementor-widget-container > :is(p, ul, ol):not([class]) {
	max-width: 70ch;
	margin-inline: auto;
}
body.rmh-brand :is(.elementor-widget-text-editor, .elementor-tab-content, .entry-content) a:not(.elementor-button):not(.btn) {
	color: var(--rmh-taupe-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 6. Navigation: DM Sans, as typed (Title Case in the menu), ink; taupe-deep hover/active */
body.rmh-brand .elementor-nav-menu :is(.elementor-item, .elementor-sub-item):not(#_) {
	font-family: var(--rmh-sans); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400; color: var(--rmh-ink);
}
body.rmh-brand .elementor-nav-menu :is(.elementor-item:hover, .elementor-item-active, .elementor-item.highlighted):not(#_) { color: var(--rmh-taupe-deep); }

/* 7. Buttons: one primary (ink pill, 48 px, white) and one hairline secondary. Labels keep the case they were typed in. */
body.rmh-brand :is(.elementor-button, .btn-primary, .btn-secondary, .elementor-cta__button, .top_gallery_v1_button,
	.elementor-field-type-submit button, input[type="submit"]):not(.rmh-cc__btn):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border-radius: var(--rmh-pill);
	background-color: var(--rmh-ink); border: 1px solid var(--rmh-ink); color: var(--rmh-white);
	font: 600 16px/1.2 var(--rmh-sans); text-transform: none; letter-spacing: 0;
	box-shadow: none; transition: transform .15s ease, opacity .15s ease;
}
body.rmh-brand :is(.elementor-button, .btn-primary, .btn-secondary, .elementor-cta__button, .top_gallery_v1_button):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)):hover { background-color: #000; color: var(--rmh-white); }
body.rmh-brand :is(.elementor-button, .btn-primary, .btn-secondary, .btn):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)):active { transform: scale(.98); }
body.rmh-brand .elementor-button :is(.elementor-button-text, .elementor-button-content-wrapper) { color: inherit; }
/* Secondary: hairline. Boostly's outlined buttons + the compare panel's close. */
body.rmh-brand :is(.btn-primary-outlined, .btn-secondary-outlined, .btn-grey-outlined):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	min-height: 48px; border-radius: var(--rmh-pill); background: var(--rmh-white); border: 1px solid var(--rmh-ink);
	color: var(--rmh-ink); font: 600 16px/1.2 var(--rmh-sans); text-transform: none; letter-spacing: 0;
}
/* Two Boostly buttons carry !important rules of their own (the home search: page CSS `background … !important`;
   the booking box: Customizer font-size), so these two answer in kind. */
html body.rmh-brand .search-button button { background: var(--rmh-ink) !important; border-radius: var(--rmh-pill) !important; }
html body.rmh-brand .block-body-sidebar .btn-primary { font-size: 16px !important; }
/* The booking box's own label: an inline Boostly rule pins it at 12px with !important (1,2,1); two ids answer it */
html body.rmh-brand .block-body-sidebar button#request_for_enquiry:not(#_) { font-size: 16px !important; }
/* Header CONTACT: same pill, 44 px so the header stays <= 56 / 72 px */
body.rmh-brand .elementor-location-header .elementor-button:not(#_) { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* 8. Spacing: one scale. Spacer widgets (up to 209 px today) are capped; widget gaps on the scale. */
body.rmh-brand .elementor-widget-spacer .elementor-spacer-inner { height: min(var(--spacer-size, 0px), var(--rmh-space-2)); }
@media (min-width: 1024px) {
	body.rmh-brand .elementor-widget-spacer .elementor-spacer-inner { height: min(var(--spacer-size, 0px), var(--rmh-space-3)); }
}
/* The ~150 px bands are stacked per-element paddings (column 50 + section 10 + section 50 + column 50 on home). CSS
   can't take min(existing, scale) of a per-element value, and a blanket column padding added space where there was
   none (tested 10-03), so the bands are left to the template/Elementor pass. */

/* 9. Hairlines: card + panel borders in sand, one radius family (12 px cards, 6 px fields, pills for actions) */
body.rmh-brand :is(.item-wrap, .listing-card, .sidebar-booking-module, .elementor-accordion-item, .e-n-accordion-item):not(#_) { border-color: var(--rmh-sand); }
body.rmh-brand :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea, .bootstrap-select > .btn):not(#_):where(:not(#rmh-offer, #rmh-offer *, .rmh-iform, .rmh-iform *, .rmh-cc, .rmh-cc *)) {
	border-color: #A39B95; border-radius: 6px; color: var(--rmh-ink);
}

/* Tabs on listing pages: tan text (#9D8070, 3.6:1) to ink-soft; the open tab in ink */
body.rmh-brand .elementor-tab-title:not(#_) { color: var(--rmh-ink-soft); }
body.rmh-brand .elementor-tab-desktop-title:not(#_) { white-space: nowrap; padding-inline: 14px; }
body.rmh-brand .elementor-tab-title.elementor-active:not(#_) { color: var(--rmh-ink); }
/* Grey/tan text literals axe flags (Boostly + post widgets): to ink-soft / taupe-deep. The review badge steps darker. */
body.rmh-brand :is(.title-head-left address, .elementor-post-date, .elementor-post__excerpt p, .item-address):not(#_) { color: var(--rmh-ink-soft); }
body.rmh-brand .readingtime:not(#_) { color: var(--rmh-taupe-deep); }
body.rmh-brand .rating .label-success:not(#_) { background-color: #2E7D32; }
/* Template tell: the favourites heart (Boostly accounts; RMH has no guest login) */
body.rmh-brand .add_fav_icon:not(#_) { display: none; }

/* 10. Motion: transform/opacity only; none under reduced motion (Elementor entrance animations included) */
@media (prefers-reduced-motion: reduce) {
	body.rmh-brand :is(.animated, .elementor-invisible) { animation: none !important; visibility: visible !important; opacity: 1 !important; }
	body.rmh-brand * { transition-duration: 0s !important; scroll-behavior: auto !important; }
}

/* 11. Focus: rmh-ui.css draws the outline (ink via the variable above); a white halo keeps it visible on photos */
body.rmh-brand :is(a, button, input, select, textarea, summary):focus-visible { box-shadow: 0 0 0 4px var(--rmh-white); }

/* 12. Card meta lines (Elementor post-info: the address on destination cards): DM Sans in ink-soft (#949CA5 was 2.77:1),
   one line with an ellipsis, so a long address can't make one card taller than its row */
body.rmh-brand .elementor-post-info__item:not(#_) { color: var(--rmh-ink-soft); font-family: var(--rmh-sans); }
body.rmh-brand .elementor-post-info__item--type-custom:not(#_) {
	display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the inline list is wider than the card (Elementor's negative item margins), so cap it and its item to the card */
body.rmh-brand .elementor-post-info:not(#_) { max-width: 100%; overflow: hidden; }
body.rmh-brand .elementor-post-info > li:not(#_) { max-width: 100%; min-width: 0; }

/* 13. Per-page literals the tokens can't reach (ids are Elementor element ids on prod, read 2026-10-03) */
/* Estate landing header "Inquire about the estate" (page 219715, nested menu item #get_quote): tan fill, 3.64:1 → the primary pill */
body.rmh-brand #get_quote:not(#_) > a,
body.rmh-brand #get_quote:not(#_) .e-n-menu-title-container {
	background-color: var(--rmh-ink); border-radius: var(--rmh-pill); text-transform: none; letter-spacing: 0;
}
/* Corporate (219374): the subtitle on the ink band reads in sand, not taupe-deep (3.05:1); the "Why groups come back"
   band takes the deep taupe with white text (5.35:1) instead of mixing white headings and ink body on mid taupe */
body.rmh-brand .elementor-element-d5eaeeb { --e-global-color-5a676c5: var(--rmh-sand); --e-global-color-c578a34: var(--rmh-sand); }
body.rmh-brand .elementor-element-d5eaeeb :is(p, span):not(#_) { color: var(--rmh-sand); }
body.rmh-brand .elementor-element-052d61f:not(#_) { background-color: var(--rmh-taupe-deep); }
body.rmh-brand .elementor-element-052d61f :is(p, li, h2, h3):not(#_) { color: var(--rmh-white); }
/* Links hand-coloured #9D8070 in a text block (weddings, inline style="color: #9d8070", 3.64:1): to taupe-deep. Inline
   styles only yield to !important. Post dates (#949CA5 <time>, 2.77:1): ink-soft. */
html body.rmh-brand a[style*="#9d8070" i] { color: var(--rmh-taupe-deep) !important; }
body.rmh-brand time:not(#_) { color: var(--rmh-ink-soft); }
/* Top menu: one colour. A Customizer block pins two items (menu-item-202275 Destinations, 196631 RMH Events) to taupe with
   !important, which reads as a bug next to ink items; hover and the current page keep taupe-deep. */
html body.rmh-brand .elementor-nav-menu--main .menu-item > a.elementor-item:not(#_) { color: var(--rmh-ink) !important; }
html body.rmh-brand .elementor-nav-menu--main .menu-item > a.elementor-item:is(:hover, :focus-visible, .elementor-item-active, .highlighted):not(#_) { color: var(--rmh-taupe-deep) !important; }
/* The phone sheet's submit is typed lowercase in the Boostly template ("enquire now"); the old CSS shouted it in caps. Until
   07's B1 labels replace it (body.rmh-b1), show it capitalised. */
body.rmh-brand:not(.rmh-b1) #request_for_reservation_mobile:not(#_) { text-transform: capitalize; }

/* 14. Interaction fixes Jules found 10-03 (measured on prod with the skin previewed) */
/* Menu items that only open a submenu ("Destinations", "RMH Events") have no href, so the cursor stayed an arrow */
body.rmh-brand .elementor-nav-menu :is(a, .sub-arrow) { cursor: pointer; }
/* Cards: only 29-62% of a listing card was clickable (gaps between the title, address, amenities and price links).
   The title link's overlay now covers the whole card (wrappers in between made static); the photo keeps its own link
   and slider controls on top. Three card types: Boostly .item-wrap (finder, collections), Jet destination cards, and
   Elementor loop items (.e-loop-item: home carousels, related houses). Same URL, same click target. */
body.rmh-brand .item-wrap .media-body h2.title a::after,
body.rmh-brand :is(.jet-listing-grid__item, .e-loop-item) :is(h2, h3).elementor-heading-title a::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
}
body.rmh-brand :is(.jet-listing-grid__item, .e-loop-item) { position: relative; }
body.rmh-brand .item-wrap { position: relative; }
body.rmh-brand .item-wrap .media-body:not(#_) { position: static; }
body.rmh-brand .item-wrap .media-left { z-index: 2; }
body.rmh-brand :is(.jet-listing-grid__item, .e-loop-item) :is(.elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-element):not(#_) { position: static; }
body.rmh-brand :is(.jet-listing-grid__item, .e-loop-item) :is(img, .elementor-widget-image a) { position: relative; z-index: 2; }
body.rmh-brand :is(.jet-listing-grid__item, .e-loop-item) .item-media-price { pointer-events: none; } /* sits above the overlay; let the click through */
/* Phone booking bar: the price wrapped to 2-3 lines below 400px. One line for "From USD $X", "/per night" under it. */
body.rmh-brand .overlay-booking-price:not(#_) { white-space: nowrap; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
body.rmh-brand .overlay-booking-price::before { font-size: 13px; font-weight: 400; }
body.rmh-brand .overlay-booking-price span:not(#_) { display: block; font-size: 12px; font-weight: 400; color: var(--rmh-ink-soft); }
body.rmh-brand .overlay-booking-btn .pull-left { min-width: 0; flex: 1 1 auto; }
body.rmh-brand .overlay-booking-btn .trigger-overlay:not(#_) { font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 400px) {
	body.rmh-brand .overlay-booking-btn:not(#_) { padding-inline: 12px; }
	body.rmh-brand .overlay-booking-btn .trigger-overlay:not(#_) { padding-inline: 16px; }
}

/* 15. Phone ergonomics (ui-qa sweep 10-04: tools/ui-qa/qa.mjs). Rules, written down in brand/web-design-system.md:
   tap targets ≥ 44 px, text ≥ 12 px, content buttons full width on phones (natural width from 768 px). */
body.rmh-brand .rating .label:not(#_) { font-size: 12px; padding: 3px 6px; }
body.rmh-brand .jet-table__head-cell:not(#_) { font-size: 12px; }
@media (max-width: 767px) {
	body.rmh-brand .elementor-menu-toggle:not(#_) { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
	/* the footer template (193176) also renders outside .elementor-location-footer on the search-type pages */
	body.rmh-brand :is(.elementor-location-footer, .elementor-193176) :is(.elementor-icon-list-item > a, .elementor-nav-menu a):not(#_) { min-height: 44px; display: flex; align-items: center; }
	/* carousel dots keep their 8 px look; the tap area around each grows to 44 px */
	body.rmh-brand .swiper-pagination-bullet:not(#_) { position: relative; }
	body.rmh-brand .swiper-pagination-bullet::after { content: ""; position: absolute; inset: -18px -10px; }
	/* one rule for buttons in page content: full width on phones, so long labels stay on one line and every CTA lands
	   under the thumb; header/footer buttons and Boostly's own buttons keep their size */
	body.rmh-brand .elementor-widget-button:not(:is(.elementor-location-header, .elementor-location-footer, .elementor-193171, .elementor-193176) *):not(#_) { width: 100%; max-width: 100%; }
	body.rmh-brand .elementor-widget-button:not(:is(.elementor-location-header, .elementor-location-footer, .elementor-193171, .elementor-193176) *) .elementor-button:not(#_) { width: 100%; }
	body.rmh-brand .elementor-widget-button:not(:is(.elementor-location-header, .elementor-location-footer, .elementor-193171, .elementor-193176) *) > .elementor-widget-container:not(#_) { margin-inline: 0; }
}

/* 16. FAQs: one design for every FAQ on the site (Jules 10-04). Elementor toggles (7 pages/templates), accordions (9) and
   nested accordions (10) take the look of the landing system's FAQ component (rmh-landing/components/faq.php): hairline
   rows in sand, the question in DM Sans 600 ink, a taupe-deep plus on the right that turns into a cross when open, the
   answer in ink-soft. Interim, until a page moves to [rmh_component name="faq"]. Not accordions that aren't questions:
   the listing page's tabs (#tabsProperties) and the numbered process cards on /corporate-retreats-riviera-maya/ (page
   217810 + its template 211510). */
body.rmh-brand :is(.elementor-toggle, .elementor-accordion, .e-n-accordion):not(#_):where(:not(#tabsProperties, #tabsProperties *, .elementor-217810 *, .elementor-211510 *)) {
	display: block; gap: 0; border: 0; border-bottom: 1px solid var(--rmh-sand); text-align: left;
}
body.rmh-brand :is(.elementor-toggle-item, .elementor-accordion-item, .e-n-accordion-item):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) {
	margin: 0; border: 0; border-top: 1px solid var(--rmh-sand); border-radius: 0; background: none; box-shadow: none;
}
body.rmh-brand :is(.elementor-toggle .elementor-tab-title, .elementor-accordion .elementor-tab-title, .e-n-accordion-item-title):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) {
	position: relative; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 20px 44px 20px 0; border: 0;
	background: none; cursor: pointer; font: 600 17px/1.4 var(--rmh-sans); letter-spacing: 0; text-transform: none; color: var(--rmh-ink);
}
body.rmh-brand :is(.elementor-toggle-title, .elementor-accordion-title, .e-n-accordion-item-title-header, .e-n-accordion-item-title-text):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) {
	font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; text-decoration: none;
}
body.rmh-brand :is(.elementor-toggle-icon, .elementor-accordion-icon, .e-n-accordion-item-title-icon):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) { display: none; }
body.rmh-brand :is(.elementor-toggle .elementor-tab-title, .elementor-accordion .elementor-tab-title, .e-n-accordion-item-title):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *))::after {
	content: "+"; position: absolute; right: 4px; top: 50%; margin-top: -13px; font: 400 26px/1 var(--rmh-sans); color: var(--rmh-taupe-deep);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
body.rmh-brand :is(.elementor-tab-title.elementor-active, .e-n-accordion-item[open] > .e-n-accordion-item-title):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *))::after { transform: rotate(45deg); }
body.rmh-brand :is(.elementor-toggle .elementor-tab-title, .elementor-accordion .elementor-tab-title, .e-n-accordion-item-title):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)):hover { color: var(--rmh-taupe-deep); }
body.rmh-brand :is(.elementor-toggle .elementor-tab-title, .elementor-accordion .elementor-tab-title, .e-n-accordion-item-title):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)):focus-visible {
	outline: 2px solid var(--rmh-ink); outline-offset: 4px; box-shadow: 0 0 0 6px var(--rmh-white);
}
body.rmh-brand :is(.elementor-toggle .elementor-tab-content, .elementor-accordion .elementor-tab-content, .e-n-accordion-item > [role="region"]):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) {
	padding: 0 44px 22px 0; border: 0; background: none; font-size: 16px; line-height: 1.65; color: var(--rmh-ink-soft);
}
body.rmh-brand :is(.elementor-toggle .elementor-tab-content, .elementor-accordion .elementor-tab-content, .e-n-accordion-item > [role="region"]) :is(p, li, .elementor-widget-text-editor):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) {
	font-size: 16px; line-height: 1.65; color: var(--rmh-ink-soft);
}
body.rmh-brand :is(.elementor-toggle .elementor-tab-content, .elementor-accordion .elementor-tab-content, .e-n-accordion-item > [role="region"]) a:not(.elementor-button):not(#_):where(:not(#tabsProperties *, .elementor-217810 *, .elementor-211510 *)) { color: var(--rmh-taupe-deep); }
@media (prefers-reduced-motion: reduce) {
	body.rmh-brand :is(.elementor-tab-title, .e-n-accordion-item-title)::after { transition: none; }
}