/* Mykish core site pages — E1-28 visual elevation pass, Phase-6 Slice 0/1 elevation.
 * Shares the resort/deal templates' elevated language (DESIGN v1.1 tokens, one teal voltage,
 * one radius + one shadow language, Montserrat 400/600/700). Presentation only — no page
 * structure, copy or routing changed. Big display uses tight tracking; the brand's wide
 * tracking is kept where it reads premium: eyebrows, badges, buttons, footer heads.
 * Tokens: the :root block that used to live here now lives in the single shared source,
 * wp/mu-plugins/mykish-design-tokens/tokens.css (loaded first — see TOKENS_RECONCILIATION.md
 * §8/§11 R11). Do not redeclare :root here. */

.mk-page {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--mk-ink);
	background: var(--mk-white);
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
.mk-container { max-width: var(--mk-container); margin: 0 auto; padding: 0 var(--mk-pad-x); }
@media (min-width: 768px) { .mk-page { --mk-pad-x: 40px; } }
@media (min-width: 1024px) { .mk-page { --mk-pad-x: 80px; } }

/* ---- Header / Nav — quiet sticky glass, hairline, one accent ---- */
.mk-site-header {
	background: rgba(255,255,255,0.82);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--mk-border);
	position: sticky; top: 0; z-index: 50;
}
/* ---- REVIEW-1 / HEADER-SCROLL (2026-07-29): positioned-element scroll-state fixes ----
 * (1) ADMIN-BAR CLIP (the PO's "half-cut from first scroll onward"): DRAFT pages are reviewed
 * logged-in, where WP's fixed #wpadminbar (32px desktop / 46px ≤782px, z-index 99999) sits over
 * the top of anything pinned at viewport top:0. At rest WP's own `html{margin-top:32px
 * !important}` bump seats the header below the bar (landed = fine); from the first scroll the
 * sticky pins to top:0 and the bar covers its top 32px at EVERY depth (measured, see
 * docs/review/review1-hakuraa-pilot.md HEADER-SCROLL §STEP 1). Fix: offset the sticky top by
 * the bar's own responsive heights; ≤600px core makes the bar position:absolute (it scrolls
 * away), so top returns to 0. Logged-out visitors are untouched by all three rules. */
body.admin-bar .mk-site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .mk-site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .mk-site-header { top: 0; }
}
/* (2) HIDE-ON-DOWN / RETURN-ON-UP (reference behaviour, our tokens): the measured reference
 * (resortlife Hakuraa) is BINARY at every scroll position — fully visible at rest, fully absent
 * on any down-scroll, fully back on any up-scroll (transform-only, 0.45s). Ours mirrors that:
 * helpers.php's rAF scroll handler sets data-header-hidden; this transform is the ONLY motion
 * (sticky keeps its layout slot — zero CLS, no per-frame layout reads). -110% clears the
 * hairline border; under an admin bar the offset origin sits behind the opaque bar, so the
 * hidden state is fully absent there too. The off-canvas nav panel is position:absolute
 * anchored to the header, so it travels with the transform — it can never be orphaned open. */
.mk-site-header[data-header-hidden="true"] { transform: translateY(-110%); }
@media (prefers-reduced-motion: no-preference) {
	.mk-site-header { transition: transform 0.28s var(--mk-ease); }
}
/* ---- REVIEW-1 / MINIBAR (2026-07-29): resort mini-bar — second half of the two-part
 * header system (measured reference behaviour: docs/review/review1-hakuraa-pilot.md MINIBAR
 * §STEP 1; markup: helpers.php mykish_render_resort_minibar(), rendered ONLY by the resort
 * template — every resort since C0-UNLOCK; never landings/hubs). Strict binary swap with the main
 * header, driven by the SAME rAF handler (one scroll listener, no per-frame layout reads):
 * shows only while the header is hidden AND y > 600. position:fixed = no layout slot, so
 * both states are zero-CLS; transform-only motion on the shared 0.28s token; the hidden
 * state adds visibility:hidden (delayed until the slide-out ends) so its controls leave the
 * tab order — keyboard focus can never land on an off-screen CTA. z-index 49 keeps it under
 * the returning main header (50) during the crossing transition. Dark-surface register: ink
 * bar, F1 consultant-block CTA treatment (white fill / ink text / pill radius / no shadow /
 * teal hover — the two-register CTA system the polish evidence establishes). */
.mk-minibar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 49;
	background: var(--mk-ink); color: var(--mk-white);
	border-bottom: 1px solid rgba(255,255,255,0.14);
	transform: translateY(-110%); visibility: hidden;
}
.mk-minibar[data-minibar-visible="true"] { transform: translateY(0); visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	.mk-minibar { transition: transform 0.28s var(--mk-ease), visibility 0s linear 0.28s; }
	.mk-minibar[data-minibar-visible="true"] { transition: transform 0.28s var(--mk-ease), visibility 0s; }
}
/* Admin-bar offsets — same responsive regime as the main header above (HEADER-AT-DEPTH law:
 * the logged-in review state is a first-class condition). ≤600px the bar is absolute and
 * scrolls away, so at the depths where the mini-bar can appear the offset must be 0. */
body.admin-bar .mk-minibar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .mk-minibar { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar .mk-minibar { top: 0; }
}
.mk-minibar-inner {
	max-width: var(--mk-container); margin: 0 auto; padding: 10px var(--mk-pad-x);
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
	gap: 12px; min-height: 64px;
}
/* min-width:0 on the identity column is what makes the 390 ellipsis real (flex items
 * default min-width:auto and refuse to shrink — the recurring h-scroll driver). */
.mk-minibar-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-minibar-name {
	font-weight: 700; font-size: 1rem; letter-spacing: -0.005em; color: var(--mk-white);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-minibar-atoll {
	font-weight: 600; font-size: 0.68rem; letter-spacing: var(--mk-track-wide);
	text-transform: uppercase; color: var(--mk-teal);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-minibar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* F1 dark-surface (consultant-block) CTA spec. Specificity note (the recurring defeat
 * class): `.mk-minibar .mk-cta--minibar` (0,2,0) beats `.elementor-kit-6 a` (0,1,1)
 * outright, and the colour/font-size !important below inherit the same hardening the
 * shared .mk-cta base already carries — verified computed, never assumed. */
.mk-minibar .mk-cta--minibar {
	background: var(--mk-white); color: var(--mk-ink) !important;
	min-height: 44px; padding: 10px 20px; border-radius: var(--mk-r-pill);
	box-shadow: none; font-size: 0.75rem !important; letter-spacing: 0.06em; white-space: nowrap;
}
.mk-minibar .mk-cta--minibar:hover { background: var(--mk-teal); color: var(--mk-ink) !important; }
.mk-minibar .mk-cta--minibar:focus-visible { outline: 3px solid var(--mk-white); outline-offset: 2px; }
.mk-minibar .mk-cta--minibar-wa { background: transparent; color: var(--mk-white) !important; border: 1.5px solid rgba(255,255,255,0.55); }
.mk-minibar .mk-cta--minibar-wa:hover { background: var(--mk-teal); border-color: var(--mk-teal); color: var(--mk-ink) !important; }
/* 390: name truncates (ellipsis), BOTH CTAs stay tappable at ≥44px (min-height untouched). */
@media (max-width: 767px) {
	.mk-minibar-inner { gap: 10px; min-height: 60px; padding: 8px 16px; }
	.mk-minibar-name { font-size: 0.88rem; }
	.mk-minibar .mk-cta--minibar { width: auto; padding: 10px 13px; font-size: 0.66rem !important; letter-spacing: 0.04em; }
}
@media (max-width: 360px) {
	.mk-minibar .mk-cta--minibar { padding: 10px 10px; font-size: 0.62rem !important; }
}
/* REVIEW-1 / FX-HEADER (2026-07-29): header-inner is nowrap at every width — it only ever
 * lays out logo + toggle + CTA (narrow, nav taken out of flow below) or logo + nav + CTA
 * (>=1200px, nav back in flow with a tightened gap). This is what guarantees a single row
 * at both mandated widths (1440 and 390); see helpers.php mykish_render_nav() for the
 * hamburger markup/JS this CSS drives. */
.mk-site-header-inner { max-width: var(--mk-container); margin: 0 auto; padding: 14px var(--mk-pad-x); display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; }
/* !important on color/font-size below: confirmed live via CDP matched-styles that the
 * Elementor Global Kit ships `.elementor-kit-6 a { color:#00c2cb; font-size:17px; ... }`
 * sitewide. That selector's specificity (class+tag) beats a lone class like `.mk-logo` or
 * `.mk-cta--nav`, so without this the logo wordmark renders in raw brand teal (not ink) and
 * the nav CTA inherits a 17px font it was never sized for — root cause of the "nav renders
 * teal" report, and it silently regressed the CTA to two lines once the header row was
 * tightened. `.mk-primary-nav a` already wins its fight (tag+class ties the Kit rule, our
 * stylesheet loads later) but is hardened here too so that win never depends on load order.
 * Same mitigation precedent as the Kit h1 rule (TOKENS_RECONCILIATION.md §6 D-K1) — fix in
 * our CSS, never edit the live Kit. */
/* REVIEW-1 / VERIFY2 (2026-07-29): the FX-HEADER comment above only hardened .mk-logo's
 * COLOR. Re-measured live post-deploy: font-size was STILL forced to the Kit's 17px, not
 * the intended 1.25rem (20px) — a comment claiming a fix covered a property it didn't touch.
 * Hardened font-size !important too. */
.mk-logo { order: 1; font-weight: 700; font-size: 1.25rem !important; letter-spacing: 0.02em; color: var(--mk-ink) !important; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.mk-logo span { font-weight: 400; color: var(--mk-teal); }

/* Hamburger toggle — visible only below the inline-nav breakpoint (1200px).
 * !important throughout: confirmed live (CDP matched-styles) that the Elementor Kit ships
 * `.elementor-kit-6 button { background-color:#1a1a1a; padding:16px 40px; ... }` sitewide —
 * class+tag beats our lone `.mk-nav-toggle` class, so without this the toggle rendered as
 * an 80px-wide dark filled pill instead of a 40px icon button, blowing the header row past
 * the 390 viewport (confirmed: caused real horizontal scroll, not just a cosmetic miss). */
.mk-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* REVIEW-1 / HEADER-SCROLL (2026-07-29): display hardened !important BOTH ways. Measured live
 * (CSSOM rule-match audit): hello-elementor reset.css loads AFTER this sheet and its
 * `[type="button"]{display:inline-block}` (0,1,0) ties `.mk-nav-toggle` (0,1,0) — later-in-
 * document won, silently defeating the ≥1200 display:none below, so the hamburger rendered AT
 * 1440 next to the full inline nav (V2-1 single-row regression). Same defeat class as the
 * Elementor-Kit ties hardened elsewhere in this file — never assume a tie resolves our way. */
.mk-nav-toggle { order: 2; flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; padding: 0 !important; border: none !important; background: transparent !important; color: var(--mk-ink) !important; cursor: pointer; border-radius: 0 !important; }
.mk-nav-toggle:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 2px; }
.mk-nav-toggle-bars, .mk-nav-toggle-bars::before, .mk-nav-toggle-bars::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.mk-nav-toggle-bars { position: relative; }
.mk-nav-toggle-bars::before, .mk-nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.mk-nav-toggle-bars::before { top: -7px; }
.mk-nav-toggle-bars::after { top: 7px; }
@media (prefers-reduced-motion: no-preference) {
	.mk-nav-toggle-bars, .mk-nav-toggle-bars::before, .mk-nav-toggle-bars::after { transition: transform var(--mk-dur) var(--mk-ease), opacity var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease); }
}
.mk-site-header[data-nav-open="true"] .mk-nav-toggle-bars { background: transparent; }
.mk-site-header[data-nav-open="true"] .mk-nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.mk-site-header[data-nav-open="true"] .mk-nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

.mk-primary-nav { order: 3; }
.mk-primary-nav ul { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px var(--mk-pad-x) 18px; }
/* REVIEW-1 / VERIFY2 (2026-07-29): the FX-HEADER comment above assumed the tag+class tie
 * with `.elementor-kit-6 a` meant EVERY property here already won by load-order. Re-measured
 * live via CDP: font-size did NOT win (nav links rendered the Kit's forced 17px, not 0.92rem)
 * even though color did. Hardened font-size !important too — do not assume a tie resolves
 * uniformly across properties without measuring each one. */
.mk-primary-nav a { color: var(--mk-ink) !important; text-decoration: none; font-weight: 600; font-size: 0.92rem !important; white-space: nowrap; display: block; padding: 12px 4px; position: relative; transition: color var(--mk-dur) var(--mk-ease); }
.mk-primary-nav a::after { content: ''; position: absolute; left: 4px; right: 100%; bottom: 6px; height: 2px; background: var(--mk-teal); transition: right var(--mk-dur) var(--mk-ease); }
.mk-primary-nav a:hover, .mk-primary-nav a[aria-current="page"] { color: var(--mk-teal-text) !important; }
.mk-primary-nav a:hover::after, .mk-primary-nav a[aria-current="page"]::after { right: 4px; }

/* Below 1200px: nav is an off-canvas panel, out of the header-inner flex flow entirely —
 * this (not flex-wrap) is what keeps the header a single row at 390. */
@media (max-width: 1199px) {
	.mk-primary-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--mk-white); border-bottom: 1px solid var(--mk-border); box-shadow: var(--mk-shadow); max-height: 0; overflow: hidden; }
	.mk-site-header[data-nav-open="true"] .mk-primary-nav { max-height: 80vh; overflow-y: auto; }
	@media (prefers-reduced-motion: no-preference) {
		.mk-primary-nav { transition: max-height var(--mk-dur) var(--mk-ease); }
	}
}

/* >=1200px: nav returns to the header row (container is capped at --mk-container=1200px,
 * so this available width is constant above the breakpoint — verified against logo+CTA
 * widths, see docs/review/review1-fxheader-evidence.md). */
@media (min-width: 1200px) {
	.mk-nav-toggle { display: none !important; } /* !important: see the reset.css tie note above */
	.mk-primary-nav { position: static; max-height: none; overflow: visible; border: 0; box-shadow: none; }
	/* MEASURED 2026-07-30, LEFT AS IS ON PURPOSE: at exactly 1200px the header's own scrollWidth
	 * is 1207 — a 7px document h-scroll, present site-wide (/cruises/, /tours/, /club-med/ and the
	 * already-signed-off /enquire/) and at that ONE width only; 1199 and 1240 are both clean,
	 * because above the breakpoint the leftover viewport absorbs it. Tightening this gap to 15px
	 * reclaims 27px across nine gaps and did NOT move the number, so the nav is not the binding
	 * element and the real cause is still unfound. Reverted rather than ship a change that does
	 * not do what its comment claims. Pre-existing, 7px, one width — recorded for the PO, not
	 * guessed at on the eve of cutover. */
	.mk-primary-nav ul { flex-direction: row; flex-wrap: nowrap; gap: 18px; padding: 4px 0; }
	.mk-primary-nav a { padding: 6px 0; }
	.mk-primary-nav a::after { left: 0; bottom: 0; }
	.mk-primary-nav a:hover::after, .mk-primary-nav a[aria-current="page"]::after { right: 0; }
}
.mk-cta--nav { order: 4; }

/* ---- CTA buttons (A2 law: ENQUIRE NOW enquiry products, one label per context) ---- */
/* REVIEW-1 / VERIFY2 (2026-07-29): the base `.mk-cta` is a LONE class on an <a> — lower
 * specificity than `.elementor-kit-6 a` (class+tag) outright, not even a tie. CDP-confirmed
 * live: every non-nav ENQUIRE NOW button (hero, section, sticky-mobile, specialist-CTA panel)
 * was rendering the Kit's forced 17px instead of the intended 0.9rem (14.4px). font-size
 * hardened !important here so every `.mk-cta*` variant inherits the fix from one place. */
.mk-cta {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--mk-ink); color: var(--mk-white) !important;
	font-weight: 700; font-size: 0.9rem !important; text-transform: uppercase; letter-spacing: var(--mk-track-cta);
	padding: 17px 42px; min-height: 52px; border-radius: var(--mk-r-btn); text-decoration: none;
	border: none; cursor: pointer;
	box-shadow: var(--mk-shadow);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
.mk-cta:hover { background: var(--mk-teal-dark); color: var(--mk-white) !important; transform: translateY(-2px); box-shadow: var(--mk-shadow-lg); }
.mk-cta:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 3px; }
/* font-size !important: see the Elementor Kit note above .mk-logo — .mk-cta--nav's lone
 * class loses a specificity tie to `.elementor-kit-6 a`'s font-size:17px without this,
 * which silently doubled the button to two lines once the header row was tightened. */
.mk-cta--nav { padding: 12px 24px; min-height: 44px; font-size: 0.78rem !important; box-shadow: none; flex: 0 0 auto; white-space: nowrap; }
.mk-cta--secondary { background: transparent; color: var(--mk-teal-text) !important; border: 1.5px solid var(--mk-teal); box-shadow: none; }
.mk-cta--secondary:hover { background: var(--mk-teal); color: var(--mk-ink) !important; transform: translateY(-2px); }

/* ---- REVIEW-1 / V2-1 (2026-07-29): header CTA overflow below the nav breakpoint ----
 * Below 1200px the header row is logo + toggle + CTA. At the pre-fix sizes that row
 * measured 24(pad) + 159(logo) + 12(gap) + 40(toggle) + 12(gap) + 156(CTA) = 403px —
 * fixed-width items, so it overflowed IDENTICALLY at 390 and 320, producing a 13px
 * document-level horizontal scroll on every page (breach of GAP_SPEC G-mob).
 * Fix is COMPACT, never remove: the header CTA stays visible and tappable at every
 * width (min-height 44px is deliberately NOT overridden, so the tap target and the
 * 74px single-row header both hold), the in-page first-fold ENQUIRE remains the
 * primary path, and nav links are untouched. Step sizes derived from the measured
 * widths above and re-measured after deploy at 320/390/1024/1199. */
@media (max-width: 1199px) {
	.mk-cta--nav { padding: 10px 14px; font-size: 0.72rem !important; letter-spacing: 0.04em; }
}
@media (max-width: 430px) {
	.mk-logo { font-size: 1.05rem !important; }
	.mk-cta--nav { padding: 8px 10px; font-size: 0.66rem !important; }
}
@media (max-width: 360px) {
	.mk-logo { font-size: 0.95rem !important; }
	.mk-cta--nav { padding: 8px 9px; font-size: 0.62rem !important; }
}

/* REVIEW-1 / VERIFY2: three more lone-class link surfaces beaten by `.elementor-kit-6 a`
 * (class+tag, 0,1,1) outright — all render raw brand teal #00c2cb (~2.9:1, fails AA for
 * small text) instead of the AA-safe --mk-teal-text (#00787b) without this. */
.mk-thin-line-link { color: var(--mk-teal-text) !important; }
.mk-breadcrumb a { color: var(--mk-grey) !important; }
.mk-contact-channels a { color: var(--mk-ink) !important; }
/* `.mk-footer-col a` and `.mk-prose a` are descendant class+tag selectors that TIE the Kit
 * rule on specificity (fragile, load-order-dependent — the same shape as the pre-fix
 * `.mk-primary-nav a`) — hardened regardless of which way the tie currently resolves. */
.mk-footer-col a { color: #c3c7cf !important; font-size: 0.92rem !important; }
/* `.mk-region-filter button` (Maldives/Scandinavia hub filter pills) ties `.elementor-kit-6
 * button` (class+tag) on specificity — same fragile tie shape. Confirmed the intended
 * pill (white bg / ink text) is the design; hardened so it never depends on enqueue order. */
.mk-region-filter button { background: var(--mk-white) !important; color: var(--mk-ink) !important; font-size: 0.8rem !important; }
.mk-region-filter button.mk-active { background: var(--mk-teal) !important; color: var(--mk-ink) !important; }

/* ---- REVIEW-1 / F7-GOOGLE: agency Google-rating micro-line (Task-802 Part B) ----
 * One static line under the specialist-CTA button — the agency's OWN rating, the only
 * rating mark allowed sitewide (resort star/review marks stay banned). Figures are a
 * build-time capture, refreshed by hand (see mykish_google_rating_line() in helpers.php).
 * The inner link is a class+tag descendant selector — TIES `.elementor-kit-6 a` (0,1,1)
 * on specificity, so color/font-size are hardened !important (same shape as
 * .mk-thin-line-link above). --mk-grey #6b7280 on the white surface = 4.83:1 (AA). */
.mk-google-line { margin: 14px 0 0; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--mk-grey); }
.mk-google-line a {
	color: var(--mk-grey) !important; font-size: 0.8rem !important; text-decoration: none;
	border-bottom: 1px solid rgba(212,168,83,0.65); padding-bottom: 1px;
	transition: color var(--mk-dur) var(--mk-ease), border-bottom-color var(--mk-dur) var(--mk-ease);
}
.mk-google-line a:hover { color: var(--mk-ink) !important; border-bottom-color: var(--mk-gold); }
.mk-google-line a:focus-visible { outline: 2px solid var(--mk-teal-text); outline-offset: 2px; }
/* Dark resort ctapanel variant: matches the .mk-panel-note--on-dark register (left-aligned);
 * rgba(255,255,255,0.78) on the panel ink ≈ 9:1 — AA holds. */
.mk-google-line--on-dark { margin-top: 10px; text-align: left; }
.mk-google-line--on-dark a { color: rgba(255,255,255,0.78) !important; }
.mk-google-line--on-dark a:hover { color: var(--mk-white) !important; }

/* ---- Sections ---- */
.mk-section { padding: var(--mk-section-y) 0; }
.mk-section--alt { background: var(--mk-surface); }
.mk-section-heading { font-weight: 700; font-size: var(--mk-fs-h2); line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight); margin: 0 0 20px; max-width: 22ch; text-wrap: balance; }
.mk-section-eyebrow { font-weight: 700; font-size: var(--mk-fs-eyebrow); letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-teal-text); margin: 0 0 14px; }
.mk-prose { max-width: var(--mk-measure); font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: #2a2c30; }
.mk-prose p { margin: 0 0 1.1em; }
.mk-prose strong { color: var(--mk-ink); }

/* ---- Hero — full-bleed photograph, elegant overlay, bottom-anchored ---- */
.mk-hero {
	position: relative;
	/* E1-31 (D-1 fix): was `min(78vh, 720px)` — no floor, so a momentary near-zero vh (mobile
	 * browser chrome transitions, orientation change) could collapse the hero toward empty.
	 * clamp() guarantees a hard 340px floor. The Maldives hub's own inline min-height:380px
	 * (set per-page in maldives-hub.php) still wins there as before; this is the shared fallback
	 * for Home/Scandinavia and any hub page without its own inline override. */
	min-height: var(--mk-hero-h);
	display: flex; align-items: flex-end;
	padding: 0 0 clamp(48px, 7vw, 88px);
	background: var(--mk-ink) center / cover no-repeat;
	color: var(--mk-white);
	overflow: hidden;
}
/* E1-29: the detector (real pixel-contrast sampling) caught hero titles/sublines still
 * failing contrast on bright daytime photos (Maldives, Dhigufaru) even after the h1-color fix
 * above — the old gradient dropped to near-0 opacity around 30-34%, exactly where this
 * bottom-anchored text block's top edge sits on a short hub hero. Floor raised so there's
 * never a near-transparent gap, still deepening toward the bottom. */
/* HERO OVERLAY KILL — PO ruling 2026-07-30, launch-blocking, global (all 28 resorts AND the
 * landings). Requirement verbatim: "make the background image visible".
 *
 * WHAT WAS HERE: two full-bleed washes over `inset: 0`, the vertical one never dropping below
 * 0.30 anywhere — so the ENTIRE photograph was dimmed by at least 30% at every point, top of
 * frame included, to protect a text block that lives in the bottom-left corner.
 *
 * WHAT IS HERE NOW: one bottom-left-anchored gradient that falls to fully transparent before it
 * reaches the top of the frame or the right edge. It holds the title's AA contrast and nothing
 * else; the rest of the photograph renders at full brightness and saturation.
 *
 * The E1-29/E1-30a findings still stand and are still handled — but by LOCAL means, which is
 * what they always needed: the title keeps its layered text-shadow and the overline keeps its
 * scrim chip. Those are local, the overlay was global, and dimming an entire photograph to fix a
 * corner was the wrong tool. Strength is the measured minimum (>= 4.5:1 on every landing hero at
 * 1440 and 390) — see docs/review/HERO_OVERLAY_KILL.md; re-run the sweep before touching it. */
.mk-hero::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(80% 130% at 0% 74%,
			rgba(16,18,20,0.90) 0%,
			rgba(16,18,20,0.80) 34%,
			rgba(16,18,20,0.66) 58%,
			rgba(16,18,20,0.36) 78%,
			rgba(16,18,20,0) 96%);
}
@media (max-width: 767px) {
	.mk-hero::before {
		background:
			/* The hubs run a short mobile hero (maldives-hub sets its own min-height:380px),
			   so the title block occupies most of the frame and the gradient has to reach
			   most of the way up to hold it. On a hero this short the title block IS the
			   hero — this is still local, it just has less room to be local in. */
			linear-gradient(to top,
				rgba(16,18,20,0.94) 0%,
				rgba(16,18,20,0.88) 38%,
				rgba(16,18,20,0.76) 62%,
				rgba(16,18,20,0.50) 82%,
				rgba(16,18,20,0.16) 94%,
				rgba(16,18,20,0) 100%);
	}
}
.mk-hero-inner { position: relative; z-index: 1; max-width: var(--mk-container); }
/* E1-29: `.mk-page h1.mk-hero-title` (not bare `.mk-hero-title`) is deliberate — the Elementor
 * Global Kit prints `.elementor-kit-6 h1{color:#1a1a1a}` (1 class + 1 element), which ties or
 * beats a plain single-class selector depending on stylesheet print order, silently rendering
 * every hero title in rich black over its own photo. Two classes + the element beats it outright. */
/* E1-30a: layered/darker shadow (was a single soft 0.3-alpha glow) — the new breadcrumb nav
 * above the hero (sec-1-equivalent on core pages) shifts the hero's on-screen position versus
 * pre-E1-30a, which shifted where a bright patch of the background photo could sit under the
 * title; a tight dark shadow plus the soft glow keeps contrast reliable regardless of the exact
 * photo pixels underneath, rather than depending on this one image's luminance at one position. */
.mk-page h1.mk-hero-title { font-weight: 700; font-size: var(--mk-fs-display); line-height: var(--mk-lh-display); letter-spacing: var(--mk-track-display); margin: 0 0 18px; color: var(--mk-white); max-width: 17ch; text-wrap: balance; text-shadow: 0 2px 4px rgba(0,0,0,0.65), 0 1px 30px rgba(0,0,0,0.4); }
/* E1-30a: detector caught a real invisible-text bug on the Maldives hub — 1.0-1.2:1 contrast
 * against this bright aerial drone photo (its inline min-height:380px override shows a brighter
 * crop than the default 720px hero). A text-shadow alone measured not nearly enough (still
 * ~1.1:1) — this photo's local brightness at the caption's position needs a real backdrop, not
 * just a glow. Solid-enough scrim chip behind the line guarantees contrast regardless of the
 * photo underneath; applied to every hero (Home/Scandinavia too) since it's strictly safer. */
.mk-hero-sub {
	display: inline-block; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6;
	margin: 0 0 32px; max-width: 42ch; color: var(--mk-white);
	background: rgba(10,12,14,0.55); padding: 8px 16px; border-radius: 8px;
}
.mk-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
	.mk-hero-inner { animation: mk-rise 0.7s var(--mk-ease-out) both; }
	@keyframes mk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---- Pillar gateway cards (Home) ---- */
.mk-pillars { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
@media (min-width: 768px) { .mk-pillars { grid-template-columns: 1fr 1fr; gap: 28px; } }
.mk-pillar-card { position: relative; border-radius: var(--mk-r-card); overflow: hidden; min-height: clamp(360px, 42vw, 460px); display: flex; align-items: flex-end; background-size: cover; background-position: center; color: var(--mk-white); text-decoration: none; box-shadow: var(--mk-shadow); transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease); }
.mk-pillar-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,20,0) 28%, rgba(16,18,20,0.8) 100%); transition: background var(--mk-dur) var(--mk-ease); }
.mk-pillar-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.mk-pillar-card:hover::before { background: linear-gradient(180deg, rgba(16,18,20,0.05) 20%, rgba(16,18,20,0.86) 100%); }
.mk-pillar-card-body { position: relative; padding: clamp(28px, 4vw, 40px); }
.mk-pillar-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 10px; color: var(--mk-white); }
.mk-pillar-card p { margin: 0 0 20px; font-size: 1rem; color: rgba(255,255,255,0.86); max-width: 34ch; }
.mk-pillar-card .mk-cta--secondary { color: var(--mk-white) !important; border-color: rgba(255,255,255,0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mk-pillar-card .mk-cta--secondary:hover { background: var(--mk-white); color: var(--mk-ink) !important; border-color: var(--mk-white); }

/* ---- Featured strip / resort grid ---- */
.mk-resort-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
@media (min-width: 640px) { .mk-resort-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mk-resort-grid { grid-template-columns: repeat(3, 1fr); } }
.mk-resort-card { display: block; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden; box-shadow: var(--mk-shadow); text-decoration: none; color: var(--mk-ink); transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease); }
.mk-resort-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.mk-resort-card-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform var(--mk-dur) var(--mk-ease); }
.mk-resort-card:hover .mk-resort-card-img { transform: scale(1.04); }
.mk-resort-card-body { padding: 22px 24px 26px; }
.mk-resort-card-body h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: var(--mk-ink); letter-spacing: -0.01em; }
.mk-resort-card-region { color: var(--mk-grey); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 16px; }
.mk-resort-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-chip { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: var(--mk-r-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; background: var(--mk-alt-surface); color: var(--mk-ink); text-transform: uppercase; }
.mk-chip--price-band { background: var(--mk-teal); color: var(--mk-ink); }
/* keep the card image corners flush with the card radius */
.mk-resort-card { isolation: isolate; }

/* ---- Region filter (Maldives hub) ---- */
.mk-region-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 4px; }
.mk-region-filter button { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); padding: 10px 18px; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--mk-ink); transition: background var(--mk-dur) var(--mk-ease), color var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease); }
.mk-region-filter button:hover { border-color: var(--mk-teal); color: var(--mk-teal-text); }
.mk-region-filter button.mk-active { background: var(--mk-teal); color: var(--mk-ink); border-color: var(--mk-teal); }
.mk-region-filter button:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 2px; }

/* ---- Trust strip ---- */
.mk-trust-strip { padding: clamp(36px, 5vw, 56px) 0; background: var(--mk-alt-surface); border: none; }
.mk-trust-strip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 44px; justify-content: center; align-items: center; margin: 0; padding: 0 var(--mk-pad-x); font-weight: 600; font-size: 0.95rem; }
.mk-trust-icon { color: var(--mk-teal-text); font-weight: 700; letter-spacing: 0.08em; margin-right: 8px; }

/* ---- Why-3-columns ---- */
.mk-why-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
@media (min-width: 768px) { .mk-why-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.mk-why-item h3 { font-size: 1.25rem; font-weight: 700; margin: 18px 0 10px; letter-spacing: -0.01em; }
.mk-why-item .mk-prose { font-size: 1rem; }
.mk-why-icon { width: 44px; height: 44px; border-radius: var(--mk-r-pill); background: var(--mk-white); border: 1.5px solid var(--mk-teal); display: flex; align-items: center; justify-content: center; color: var(--mk-teal-text); font-weight: 700; font-size: 1rem; }

/* ---- Contact page ---- */
.mk-contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px) { .mk-contact-grid { grid-template-columns: 1fr 1fr; } }
.mk-contact-channels { list-style: none; padding: 0; margin: 24px 0; }
.mk-contact-channels li { padding: 16px 0; border-bottom: 1px solid var(--mk-border); }
.mk-contact-channels a { color: var(--mk-ink); text-decoration: none; font-weight: 600; transition: color var(--mk-dur) var(--mk-ease); }
.mk-contact-channels a:hover { color: var(--mk-teal-text); }
.mk-form-card { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow); padding: 28px; }

/* ---- PO legal review banner ---- */
.mk-legal-banner { background: #fff7e6; border: 1px solid #f0c36d; color: #7a5b00; padding: 14px 18px; font-size: 0.85rem; font-weight: 600; border-radius: var(--mk-r-btn); margin-bottom: 28px; }

/* ---- Footer ---- */
.mk-site-footer { background: var(--mk-ink); color: var(--mk-white); padding: clamp(56px, 7vw, 88px) 0 28px; }
.mk-site-footer-inner { max-width: var(--mk-container); margin: 0 auto; padding: 0 var(--mk-pad-x); display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .mk-site-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.mk-site-footer .mk-logo { color: var(--mk-white); font-size: 1.35rem; }
.mk-site-footer .mk-logo span { color: var(--mk-teal); }
.mk-footer-tagline { color: #a8adb5; font-size: 0.92rem; line-height: 1.6; margin: 16px 0; max-width: 280px; }
.mk-footer-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mk-footer-badges li { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-gold); border: 1px solid rgba(212,168,83,0.4); border-radius: var(--mk-r-pill); padding: 5px 12px; }

/* REVIEW-1 / F5 (2026-07-29): genuine accreditation marks in the sitewide footer (D4).
 * Both marks are navy artwork, so on the dark footer they sit on white chips with the
 * gold hairline — the same treatment as the resort specialist-CTA credential row, so the
 * two credential surfaces read as one language. Height-capped rather than width-capped:
 * the two files have very different intrinsic ratios (IATA 608x228, CLIA 560x560), and
 * capping height is what makes them optically consistent. `width:auto` + `object-fit`
 * keeps both crisp at 1440 and 390 (the ID-based srcset does the resolution work). */
.mk-footer-badges--marks { align-items: center; gap: 12px; }
.mk-footer-badges--marks li.mk-footer-mark {
	background: var(--mk-white);
	border: 1px solid rgba(212,168,83,0.45);
	border-radius: var(--mk-r-btn);
	padding: 8px 12px;
	display: inline-flex; align-items: center;
}
.mk-footer-mark-img { display: block; height: 30px; width: auto; max-width: 128px; object-fit: contain; }
.mk-footer-col h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 18px; color: #e6e8ec; font-weight: 700; }
.mk-footer-col ul { list-style: none; padding: 0; margin: 0; }
.mk-footer-col li { margin-bottom: 12px; }
.mk-footer-col a { color: #c3c7cf; text-decoration: none; font-size: 0.92rem; transition: color var(--mk-dur) var(--mk-ease); }
.mk-footer-col a:hover { color: var(--mk-teal); }
.mk-footer-fine-print { color: #9096a0; /* E1-29: was #7c828c, measured exactly 4.50:1 on the ink footer — right on
	the AA boundary. Lightened for real headroom (~5.8:1). */ font-size: 0.78rem; margin-top: 18px; line-height: 1.6; }
.mk-site-footer-bottom { max-width: var(--mk-container); margin: 40px auto 0; padding: 26px var(--mk-pad-x) 0; border-top: 1px solid #333; color: #9096a0; /* E1-29: was #7c828c, measured exactly 4.50:1 on the ink footer — right on
	the AA boundary. Lightened for real headroom (~5.8:1). */ font-size: 0.8rem; }

/* ---- E1-30a: chip cluster additions (resort card: band word · transfer · family/adults · region) ---- */
.mk-chip--region { background: transparent; color: var(--mk-grey); border: 1px solid var(--mk-border); }

/* ---- E1-30a: breadcrumb (mirrors mykish-resort-template's .mk-breadcrumb language) ---- */
.mk-breadcrumb.mk-section { padding: 24px 0 0; }
.mk-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 auto; max-width: var(--mk-container); font-size: 0.8rem; color: var(--mk-grey); letter-spacing: 0.02em; }
.mk-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--mk-border); }
.mk-breadcrumb a { color: var(--mk-grey); text-decoration: none; transition: color var(--mk-dur) var(--mk-ease); }
.mk-breadcrumb a:hover { color: var(--mk-teal-text); }

/* ---- E1-30a: FAQ — same clean-disclosure language as the resort template, extended here ---- */
.mk-faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-top: 28px; }
.mk-faq-item { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); padding: 4px 24px; transition: box-shadow var(--mk-dur) var(--mk-ease); }
.mk-faq-item[open] { box-shadow: var(--mk-shadow); }
.mk-faq-item summary { font-weight: 600; cursor: pointer; list-style: none; padding: 20px 0; position: relative; padding-right: 32px; font-size: 1.05rem; letter-spacing: -0.005em; }
.mk-faq-item summary::-webkit-details-marker { display: none; }
.mk-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.5rem; color: var(--mk-teal); transition: transform var(--mk-dur) var(--mk-ease); }
.mk-faq-item[open] summary::after { content: '\2013'; }
.mk-faq-answer { margin: 0 0 20px; font-size: 1rem; line-height: 1.7; color: #3a3c40; }

/* ---- REVIEW-1 S5 (2026-07-28): thin honest ENQUIRE-only lines (Cruises/Tours) — a typographic
 * hero (ink gradient, no background photo) rather than risk a stock/AI/mismatched image standing
 * in for a product line with no real photography yet (GR6). Inert Bokun socket hidden but present
 * in the DOM (D2) — mirrors the resort template's own .mk-bokun-socket rule. ---- */
.mk-hero--thin {
	background: linear-gradient(160deg, #14171a 0%, var(--mk-ink) 55%, #232a2d 100%);
}
.mk-hero--thin .mk-hero-overline {
	display: block; font-size: var(--mk-fs-eyebrow); font-weight: 700; letter-spacing: var(--mk-track-wide);
	text-transform: uppercase; color: var(--mk-teal); margin: 0 0 18px;
}
.mk-bokun-socket { display: none; }

/* Thin honest-line editorial cards (Home — Cruises/Tours, S4) — text-forward, deliberately no
 * photography (see home.php comment). Reads as restraint, not a card-grid pattern (still a large
 * 1-2up editorial block, distinct from .mk-resort-card's abundance-surface grid language). */
.mk-thin-lines { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
@media (min-width: 768px) { .mk-thin-lines { grid-template-columns: 1fr 1fr; gap: 32px; } }
.mk-thin-line-card {
	display: block; padding: clamp(32px, 4vw, 44px); border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-card); text-decoration: none; color: var(--mk-ink);
	background: var(--mk-white); transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mk-thin-line-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.mk-thin-line-card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.mk-thin-line-card p { margin: 0 0 18px; color: #3a3c40; max-width: 40ch; }
.mk-thin-line-link { color: var(--mk-teal-text); font-weight: 700; font-size: 0.85rem; letter-spacing: var(--mk-track-cta); text-transform: uppercase; }

/* ---- REVIEW-1 S4/SC-H2 (2026-07-28): earned-dark register + editorial image/text alternation ---- */
.mk-scandi-earned-dark {
	position: relative; background-size: cover; background-position: center; color: var(--mk-on-dark);
	background-color: var(--mk-ink-canvas);
}
.mk-scandi-earned-dark::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(14,18,20,0.55) 0%, rgba(14,18,20,0.78) 100%);
}
.mk-scandi-earned-dark .mk-container { position: relative; z-index: 1; }
.mk-scandi-earned-dark .mk-section-heading, .mk-scandi-earned-dark .mk-section-eyebrow { color: var(--mk-on-dark); }
.mk-scandi-earned-dark .mk-prose { color: rgba(244,246,247,0.86); }
.mk-scandi-earned-dark .mk-prose strong { color: var(--mk-on-dark); }

.mk-editorial-split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .mk-editorial-split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.mk-editorial-split--reverse { direction: rtl; }
.mk-editorial-split--reverse > * { direction: ltr; }
.mk-editorial-figure { margin: 0; border-radius: var(--mk-r-card); overflow: hidden; box-shadow: var(--mk-shadow); }
.mk-editorial-figure img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mk-editorial-text .mk-section-heading { margin-bottom: 16px; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
	.mk-hero { min-height: var(--mk-hero-h-mobile); }
	.mk-cta { width: 100%; }
	.mk-cta--nav { width: auto; }
	.mk-pillar-card .mk-cta--secondary, .mk-hero-ctas .mk-cta { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-cta, .mk-pillar-card, .mk-resort-card, .mk-resort-card-img, .mk-region-filter button, .mk-hero-inner, .mk-primary-nav a::after { transition: none; animation: none; }
}

/* ==== REVIEW-1 / LANDINGS (2026-07-29) — D1 cruises roster+deal seed, D2 tours roster,
 * D3 Club Med, D4 nav ripple. Appended last on purpose: the desktop nav gap below re-tightens
 * the earlier @media(min-width:1200px) rule (same specificity, later source wins) because the
 * checked-live nav now renders 9 items once /club-med/ exists — measured fit at 1440, no item
 * ever deleted (V2-1). */
@media (min-width: 1200px) {
	.mk-primary-nav ul { gap: 13px; }
}

/* Roster — text lines, never logos (Partner DB honesty law) */
.mk-roster { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
@media (min-width: 900px) { .mk-roster { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.mk-tours .mk-roster { grid-template-columns: 1fr; }
.mk-roster-group h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: var(--mk-track-cta); text-transform: uppercase; color: var(--mk-teal-text); margin: 0 0 14px; }
.mk-roster-bridge { font-size: 0.92rem; color: #3a3c40; margin: 0 0 16px; max-width: 44ch; }
.mk-roster-group ul { list-style: none; margin: 0; padding: 0; }
.mk-roster-group li { padding: 12px 0; border-bottom: 1px solid var(--mk-border); font-size: 0.95rem; line-height: 1.55; color: #3a3c40; }
.mk-roster-group li:last-child { border-bottom: none; }
.mk-roster-brand { font-weight: 700; color: var(--mk-ink); }

/* Curated-intro accreditation mark (CLIA media 793 — pinned source, see helpers.php F5 note).
 * Text block leads at the container's left edge (keeps the eyebrow/heading/prose left rhythm);
 * the round member badge sits as a credential at the row's right, top-aligned. Below 768 it
 * simply follows the heading, left-aligned, same rhythm. */
.mk-intro-mark { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.mk-intro-mark-text { flex: 1 1 420px; min-width: 260px; }
.mk-intro-mark-img { display: block; height: 72px; width: auto; max-width: 170px; object-fit: contain; flex: 0 0 auto; }
.mk-intro-mark .mk-section-heading { margin-bottom: 0; }

/* Latest Deals — the PO-approved supplier seed card (manual REVIEW-BY, no automation) */
.mk-deal-seed { max-width: 720px; background: var(--mk-white); border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow); padding: clamp(24px, 4vw, 40px); }
.mk-deal-ends { display: inline-flex; align-items: center; background: var(--mk-ink); color: var(--mk-white); font-size: 0.72rem; font-weight: 700; letter-spacing: var(--mk-track-cta); text-transform: uppercase; padding: 8px 16px; border-radius: var(--mk-r-pill); margin: 0 0 18px; }
.mk-deal-title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; }
.mk-deal-price { font-size: 1.05rem; margin: 0 0 6px; }
.mk-deal-price strong { font-size: 1.35em; font-weight: 700; }
.mk-deal-price-terms { display: inline-block; font-size: 0.8rem; color: var(--mk-grey); }
.mk-deal-scope { font-size: 0.92rem; color: #3a3c40; margin: 0 0 14px; }
.mk-deal-list { list-style: none; margin: 0 0 16px; padding: 0; }
.mk-deal-list li { padding: 8px 0; border-bottom: 1px solid var(--mk-border); font-size: 0.92rem; color: #3a3c40; }
.mk-deal-list li:last-child { border-bottom: none; }
.mk-deal-fine { font-size: 0.78rem; color: var(--mk-grey); margin: 0 0 20px; }

/* Deals socket — present in markup, invisible while empty (tours / club-med) */
.mk-deals-socket[hidden] { display: none !important; }

/* Club Med — two worlds */
.mk-two-worlds { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
@media (min-width: 768px) { .mk-two-worlds { grid-template-columns: 1fr 1fr; gap: 32px; } }
.mk-world-card { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); box-shadow: var(--mk-shadow); padding: clamp(24px, 3.5vw, 36px); }
.mk-world-card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.mk-world-card p { margin: 0 0 18px; color: #3a3c40; max-width: 48ch; }

/* Home coverage cards — three-up once all three landing pages exist */
@media (min-width: 1024px) { .mk-thin-lines--three { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* T1 (2026-07-30): page-level H1 for light backgrounds. /thank-you/ was borrowing .mk-hero-title,
 * an over-photograph class that carries a text-shadow — off-system on a white ground. */
.mk-page-title {
	margin: 0 0 12px; color: var(--mk-ink); font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1.15; letter-spacing: 0.5px; font-weight: 700; text-shadow: none;
}

/* INSIGHTS-1 (Odoo 847/850), 2026-07-30 — the hub's two filter groups. Reuses .mk-vtab from the
   resort template's village tabs rather than inventing a second control language; each group
   scrolls on its own axis at 390 so a long vocabulary can never push the page sideways. */
.mk-ins-filters { display: grid; gap: 10px; margin: 0 0 28px; }
.mk-ins-filter { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mk-ins-filter::-webkit-scrollbar { display: none; }

/* ============================================================================================
 * CRUISE-A (PO cruise GO, 2026-07-30) — three additions, all reusing the existing language.
 * ========================================================================================== */
/* A2 — the cruise line / OTA / Mykish distinction. Three equal columns; ours carries a single
   teal edge, which is the only signal it gets. No badge, no "recommended" chip: the column
   argues for itself or it doesn't. */
.mk-compare3 { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
@media (min-width: 900px) { .mk-compare3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-compare3-col { padding: 24px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-white); }
.mk-compare3-col h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mk-ink); }
.mk-compare3-col p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #3a3c40; }
.mk-compare3-col--ours { border-color: var(--mk-teal); box-shadow: inset 3px 0 0 var(--mk-teal); }

/* A3 — the best-for tag on a roster line. Quieter than the brand name it follows: it is an
   orientation aid, not a claim, and must never outweigh the partner's own name. */
.mk-roster-tag { display: block; margin-top: 5px; font-style: normal; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.015em; color: var(--mk-teal-text); }

/* A5 — land & sea tiles. Text-only by design: no photograph exists that honestly depicts a
   Mykish-composed combination, and GR6 forbids one that pretends to (a stock cruise shot next to
   a stock igloo would be exactly that). The tiles carry ENQUIRE and no price — a combination we
   compose is price-gate class, unlike the supplier-advertised seed elsewhere on this page. */
.mk-landsea { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 860px) { .mk-landsea { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-landsea-tile { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-white); }
.mk-landsea-tile h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--mk-ink); }
.mk-landsea-tile p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #3a3c40; flex: 1 1 auto; }
.mk-landsea-tile .mk-cta--card { align-self: flex-start; }

/* Ghost CTA — the hero's secondary action. Same geometry as .mk-cta, outline instead of fill,
   so the primary anchor stays the loudest thing in the fold. */
.mk-hero-ctas .mk-cta--ghost { background: transparent; color: var(--mk-white) !important; border: 1.5px solid rgba(255,255,255,0.62); }
.mk-hero-ctas .mk-cta--ghost:hover { background: var(--mk-white); color: var(--mk-ink) !important; border-color: var(--mk-white); }

/* ============================================================================================
 * TOURS-A (PO ruling, 2026-07-31) — spectrum strip, brand cards, region teaser.
 * TEXT NAMES ONLY throughout: logo licensing is pending (Partner DB §F), so nothing here
 * reserves space for a mark that does not exist yet.
 * ========================================================================================== */
.mk-spectrum { list-style: none; counter-reset: sp; display: grid; grid-template-columns: 1fr; gap: 10px; margin: 32px 0 18px; padding: 0; }
@media (min-width: 900px) { .mk-spectrum { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.mk-spectrum li {
	position: relative; padding: 16px 16px 16px 18px; border-radius: var(--mk-r-card);
	background: var(--mk-white); border: 1px solid var(--mk-border);
	/* the left edge deepens across the row — the only thing carrying "youth → luxury" visually,
	   because a literal arrow or a price ramp would both overclaim */
	box-shadow: inset 3px 0 0 0 var(--mk-border);
}
.mk-spectrum li:nth-child(2) { box-shadow: inset 3px 0 0 0 rgba(0,0,0,0.18); }
.mk-spectrum li:nth-child(3) { box-shadow: inset 3px 0 0 0 rgba(0,0,0,0.34); }
.mk-spectrum li:nth-child(4) { box-shadow: inset 3px 0 0 0 rgba(0,0,0,0.55); }
.mk-spectrum li:nth-child(5) { box-shadow: inset 3px 0 0 0 var(--mk-ink); }
.mk-spectrum li b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; color: var(--mk-ink); }
.mk-spectrum li span { display: block; margin-top: 3px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--mk-teal-text); }
.mk-spectrum-note { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #3a3c40; max-width: 74ch; }

.mk-brandgrid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 700px)  { .mk-brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mk-brandgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-brandcard { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); }
.mk-brandcard h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mk-ink); }
.mk-brandcard p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: #3a3c40; flex: 1 1 auto; }
.mk-brandcard-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mk-brandcard-facts li { font-size: 0.85rem; color: var(--mk-ink); }
.mk-brandcard-facts li span { display: inline-block; min-width: 52px; font-size: 0.7rem; font-weight: 700; letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-grey); }
.mk-brandcard .mk-cta--card { align-self: flex-start; }

.mk-regionlist { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 32px 0 22px; }
@media (min-width: 800px) { .mk-regionlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-regionlist h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 700; color: var(--mk-ink); }
.mk-regionlist p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #3a3c40; }

/* ============================================================================================
 * CLUBMED-A (PO ruling, 2026-07-31) — sun/snow tiles, who-it-suits cards, how-it-works steps.
 * TILES ARE TEXT-ONLY BY DESIGN: no Club Med photograph exists in the media library, and GR6
 * forbids a stock beach or ski shot standing in for a named resort. The layout is therefore
 * built to look deliberate WITHOUT media, not to leave an image-shaped hole waiting for one.
 * ========================================================================================== */
.mk-cmgrid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
@media (min-width: 700px)  { .mk-cmgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mk-cmgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mk-cmgrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-cmtile { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); }
.mk-cmtile h4 { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mk-ink); }
.mk-cmtile-region { margin: -4px 0 0; font-size: 0.76rem; font-weight: 700; letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-teal-text); }
.mk-cmtile p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #3a3c40; flex: 1 1 auto; }
.mk-cmtile-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; }
.mk-cmtile-tags li { padding: 3px 10px; border-radius: var(--mk-r-pill); border: 1px solid var(--mk-border); background: var(--mk-surface); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; color: var(--mk-ink); white-space: nowrap; }
.mk-cmtile .mk-cta--card { align-self: flex-start; margin-top: 2px; }

.mk-steplist { counter-reset: st; list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; max-width: 82ch; }
.mk-steplist li { counter-increment: st; position: relative; padding: 0 0 0 44px; font-size: 0.95rem; line-height: 1.6; color: #3a3c40; }
.mk-steplist li::before {
	content: counter(st); position: absolute; left: 0; top: -2px;
	width: 30px; height: 30px; border-radius: var(--mk-r-pill);
	background: var(--mk-white); border: 1.5px solid var(--mk-teal);
	display: flex; align-items: center; justify-content: center;
	font-size: 0.82rem; font-weight: 700; color: var(--mk-teal-text);
}
.mk-steplist li b { color: var(--mk-ink); }