/* HOME-V2 — draft alternate front page (/home-v2/) only.
 *
 * DELIBERATELY ITS OWN FILE. The current Home is the launch fallback and must be byte-identical
 * after this build, so nothing here touches style.css. Every selector is namespaced `mkv-`
 * (Mykish home-V2) and cannot collide with the shared `mk-` chrome. Rollback = delete the map
 * entry in mykish-core-pages.php; this file then never loads.
 *
 * Tokens only — no hardcoded colour, spacing, radius, type size or easing that has a token in
 * mykish-design-tokens/tokens.css. Enqueued with filemtime() versioning (ASSET-VERSION law).
 */

/* ============================================================ §1 HERO — 5+1 STATE SWITCHER ==
 *
 * ZERO CLS BY CONSTRUCTION, not by measurement. The stage and the six layers all occupy grid
 * cell 1/1, so the stage's box is fixed by `min-height` and is identical in every state. The six
 * positioning lines do the same thing inside .mkv-lines, so that box is as tall as the TALLEST
 * line and never resizes when a shorter one is shown. A state change therefore mutates opacity
 * and visibility and nothing else — no property in the switch can invalidate layout.
 */
.mkv-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	min-height: var(--mk-hero-h);
	padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 56px);
	background: var(--mk-ink-canvas);   /* the floor behind the layers; never seen through a photo */
	color: var(--mk-white);
	overflow: hidden;
}
@media (max-width: 767px) {
	.mkv-hero { min-height: var(--mk-hero-h-mobile); }
}

.mkv-hero-stage { position: absolute; inset: 0; display: grid; }
.mkv-hero-layer {
	grid-area: 1 / 1;
	position: relative;          /* containing block for the local gradient below */
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 520ms var(--mk-ease-out), visibility 0s linear 520ms;
	will-change: opacity;
}
.mkv-hero-layer[data-active="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 520ms var(--mk-ease-out), visibility 0s;
}

/* BRIGHT-HERO LAW — and the one ruling this hero needed that the ratified recipe could not give.
 *
 * WHAT THE FIRST BUILD DID: the exact bottom-left radial from HERO_OVERLAY_KILL.md, reused
 * verbatim. MEASURED RESULT: the title's TOP line failed on both widths — 2.92:1 on desktop for
 * H1 variant (b), and 1.71:1 on mobile. Not a tuning miss; a structural one. That gradient was
 * ratified for a hero whose text block is a short caption in the bottom-left corner. This hero's
 * block is a title + a five-line subline + a switching line + two CTAs + six pills, so it is
 * roughly two-thirds of the frame, and its top edge sits far above where any bottom-anchored
 * gradient can still be called local.
 *
 * THE WRONG FIX would have been to stretch the gradient up until it covered the block. That is a
 * full-bleed dim wearing a gradient's clothes, and it is the exact defect the overlay-kill ruling
 * exists to prevent.
 *
 * THE FIX TAKEN: move the contrast job off the photograph entirely and onto a scrim panel that
 * covers the TYPE AND NOTHING ELSE (.mkv-hero-panel below). This is the most local treatment
 * available — it is the site's own established pattern for exactly this problem, already shipping
 * as the `.mk-hero-sub` scrim chip and as the resort template's glass booking panel — and it has
 * two properties this switcher specifically needs:
 *   1. contrast becomes INDEPENDENT of the photograph, so all six states pass by construction
 *      rather than six separate images each having to be lucky;
 *   2. the photograph outside the panel can then be left BRIGHTER than the ratified recipe left
 *      it, which is what "make the background image visible" actually asked for.
 * So the gradient below is deliberately much weaker than the ratified one — it only seats the
 * panel against the frame edge; it is no longer holding a contrast floor on its own. The probe
 * samples the untouched top-right quadrant on every state to prove the photograph stayed bright.
 */
.mkv-hero-layer::after {
	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) {
	.mkv-hero-layer::after {
		background:
			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%);
	}
}

/* THE FOUR TYPOGRAPHIC STATES (cruises · tours · Club Med · other destinations).
 * There is no honest photograph for these lines yet — see the GR6 note in home-v2.php. Rather
 * than borrow a Maldives frame to stand behind the word "Cruises", they render as a calm ink
 * field with a single soft light source: restrained, obviously deliberate, and holding contrast
 * far above the floor without any dimming of anything. When licensed imagery lands (A2 video-
 * ready sockets, Sprint 1) these states simply gain a background-image and this rule stops
 * applying to them. */
.mkv-hero-layer--type {
	background-color: var(--mk-ink-canvas);
	background-image:
		radial-gradient(120% 90% at 78% 8%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 62%),
		linear-gradient(152deg, #161c1f 0%, #0e1214 46%, #0a0d0f 100%);
}
/* The type states do not need the photo gradient — the field is already deep — but the rule is
 * harmless and keeps every state visually identical in structure, so it is left in place rather
 * than special-cased. */

/* Two properties here are load-bearing, and both took a measurement to find rather than a look.
 *
 * `min-width: 0` — a grid item's default `min-width: auto` refuses to shrink below its MIN-CONTENT
 * width, and the pill labels are non-wrapping button text. At 390 that made the hero's content box
 * 603px wide and hung the whole panel off the right edge, clipped by the hero's own
 * overflow:hidden. Document h-scroll stayed 0 throughout — which is exactly why an element-level
 * width check was needed: the page passed the scroll test while visibly broken. `.mkv-pill` is
 * also allowed to wrap, so a long label costs a second line instead of forcing the layout wide.
 *
 * `width: 100%` — `.mk-container` carries `margin: 0 auto` from the shared sheet, and per the Grid
 * spec an inline auto margin DISABLES stretch alignment on a grid item. So instead of filling the
 * 1440px track and capping at its 1200px max-width, the container shrink-wrapped its contents:
 * 760px panel + 2x80px padding = exactly the 920px measured, then centred, putting the hero's
 * content edge 140px to the right of every other section's on the page. Nothing about the panel's
 * own margins could fix that — the panel was already flush against a container that was itself in
 * the wrong place, which is why the first check (panel-vs-container) read a clean 0 while the
 * hero was still visibly misaligned. `width: 100%` restores the intended fill-then-cap behaviour,
 * and the probe now measures the hero's content edge against a normal section's every run. */
.mkv-hero-inner { position: relative; z-index: 1; width: 100%; max-width: var(--mk-container); min-width: 0; }

/* THE HERO PANEL — RATIFIED GLASS RECIPE. GLASS-PANEL LAW (CLAUDE.md, PO 2026-07-31).
 *
 * WHAT WAS HERE AND WHY IT WAS WRONG: a near-solid fill, rgba(10,12,14,0.86)->0.90. It held
 * contrast beautifully — 14.7:1 — and it was an ink slab. The photograph behind it was dead. That
 * is the exact defect the resort panel's own history records: 0.72 of near-black is
 * arithmetically translucent and visually a wall, and a harness passed it for four rounds while
 * the PO kept saying so. Mine was denser still.
 *
 * The root cause was not the alpha, it was the inheritance: the glass recipe had been ratified as
 * a FIX to one template, so a new template built a new panel and inherited nothing. It is now a
 * standing LAW in CLAUDE.md, which is what stops the next surface repeating this.
 *
 * THE RECIPE IS NOT A TUNING SURFACE. Alpha, blur and the top-edge highlight are copied from
 * `.mk-panel-inner` and must stay identical. If a state needs more contrast the levers are, in
 * order: the type halo below, then the hero's own local bright-hero gradient above. NEVER this
 * fill — re-darkening it is what produced the slab. */
.mkv-hero-panel {
	max-width: 760px;
	min-width: 0;
	margin-left: 0;
	margin-right: auto;
	padding: clamp(24px, 2.6vw, 40px);
	border-radius: var(--mk-r-card);
	border: 1px solid rgba(255,255,255,0.14);
	background: linear-gradient(180deg, rgba(26,26,26,0.28) 0%, rgba(26,26,26,0.08) 100%);
	backdrop-filter: blur(2px) saturate(1.15);
	-webkit-backdrop-filter: blur(2px) saturate(1.15);
	color: var(--mk-white);
	/* 1px top-edge highlight, the way a real pane catches light; inset so the other three edges
	   keep the quieter hairline. */
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.18), var(--mk-shadow-lg);
}
/* No-backdrop-filter browsers only. Without the blur this gradient over a busy photograph is
   unreadable, so that branch alone goes near-opaque. Modern Chrome/Safari never see it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mkv-hero-panel { background: linear-gradient(180deg, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.86) 100%); }
}

/* THE HALO LADDER — the ONLY legibility lever on this panel, per the law.
 * Ordered by how much gradient is left underneath each element: the title sits highest in the
 * frame where the local gradient has given up most of its ink, so it carries the heaviest halo;
 * the pills sit lowest on the darkest part and need the least. Same construction as the resort
 * panel's ladder, re-weighted for this panel's own layout rather than copied blind. */
.mkv-hero-panel .mkv-hero-title {
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.90), 0 0 18px rgba(0,0,0,0.78), 0 0 34px rgba(0,0,0,0.52);
}
.mkv-hero-panel .mkv-hero-sub,
.mkv-hero-panel .mkv-line {
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.88), 0 0 14px rgba(0,0,0,0.74), 0 0 28px rgba(0,0,0,0.46);
}
.mkv-hero-panel .mkv-cta--ghost,
.mkv-hero-panel .mkv-pill[aria-selected="false"] {
	text-shadow: 0 1px 2px rgba(0,0,0,0.88), 0 0 5px rgba(0,0,0,0.84), 0 0 12px rgba(0,0,0,0.66);
}

.mk-page h1.mkv-hero-title { max-width: 20ch; }
/* The shared sheet gives .mk-hero-sub its own dark chip, which is the right call on a bare photo
 * and the wrong one inside a panel — it renders as a box in a box. Neutralised here only. */
/* The shared sheet gives .mk-hero-sub a dark scrim chip. On the glass panel that chip is a
 * second fill over the photograph — precisely the thing the law forbids — so it is removed and
 * the sub's contrast comes from its halo above instead. */
.mkv-hero-sub { max-width: 54ch; background: none; padding: 0; border-radius: 0; }

/* The switching positioning line. */
.mkv-lines { display: grid; margin: 0 0 var(--mk-space-md); }
.mkv-line {
	grid-area: 1 / 1;
	margin: 0;
	max-width: 52ch;
	font-size: var(--mk-fs-body);
	line-height: var(--mk-lh-body);
	color: var(--mk-white);
	opacity: 0;
	visibility: hidden;                 /* out of the a11y tree AND the tab order when inactive */
	transform: translateY(6px);
	transition: opacity 420ms var(--mk-ease-out), transform 420ms var(--mk-ease-out), visibility 0s linear 420ms;
}
.mkv-line[data-active="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 420ms var(--mk-ease-out), transform 420ms var(--mk-ease-out), visibility 0s;
}
.mkv-line:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 6px; }

.mkv-hero-ctas { margin-bottom: clamp(20px, 2.4vw, 30px); }
/* PRIMARY CTA, INVERTED ON THE DARK PANEL. A8 pairs the primary CTA as ink fill / white text,
 * which is correct on a white page — and disappears on a dark hero: in the first render the ghost
 * secondary was visibly MORE prominent than the primary, which inverts the intended hierarchy.
 * This is the same ink/white pair, just the way round the ground requires; the ghost CTA on this
 * site already flips for exactly this reason. Scoped to this hero only. FLAGGED FOR THE PO — a
 * CTA treatment is a design call, and the verdict is not a build lane's to give. */
/* CTA HIERARCHY — PO-locked 2026-07-31. PRIMARY is a solid white fill with ink text; SECONDARY is
 * a QUIET outline. On the first build the two read at nearly equal weight and the eye went to the
 * wrong one, which on an enquiry-led page is not a cosmetic problem: the primary is the only route
 * into the funnel. The gap is now deliberate and large — a filled shape against an unfilled one,
 * caps against sentence case, full-strength ink against a 0.42-alpha hairline.
 *
 * `:not(.mk-cta--ghost)` is load-bearing. Without it this rule also matched the SECONDARY button
 * (which carries both classes), and at equal specificity the later stylesheet won — so the ghost
 * CTA rendered ink-on-transparent against the dark panel and was effectively invisible. Caught by
 * looking at the screenshot; the markup, contrast floors and geometry were all green while the
 * button was unreadable, which is why `ctaContrast` is now a measured number in the probe. */
.mkv-hero-ctas .mk-cta:not(.mk-cta--ghost) {
	background: var(--mk-white); color: var(--mk-ink) !important; border-color: var(--mk-white);
	font-weight: 700;
}
.mkv-hero-ctas .mk-cta:not(.mk-cta--ghost):hover { background: var(--mk-alt-surface); border-color: var(--mk-alt-surface); }
/* QUIET secondary: hairline border, no fill, sentence case, slightly softer ink. Still comfortably
 * over AA on its own (measured, both widths) — quiet is not the same as low-contrast. */
.mkv-cta--ghost {
	background: transparent !important;
	color: rgba(255,255,255,0.92) !important;
	border-color: rgba(255,255,255,0.42) !important;
	border-width: 1px !important;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.01em;
}
.mkv-cta--ghost:hover { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.75) !important; color: var(--mk-white) !important; }
.mkv-cta--ghost:focus-visible { outline: 2px solid var(--mk-white); outline-offset: 3px; }

/* ===================================================================== §5 MEET RAHUL ==
 * A REAL two-column band: copy left, portrait filling the right column. The previous version
 * reserved a right column and had nothing to put in it, so the section rendered as a white hole
 * beside a paragraph — the PO's "structural" defect, and correctly named: no amount of padding
 * would have fixed a column with nothing in it.
 *
 * The portrait's own aspect (1792:2390 = 0.75) IS the column's aspect-ratio, so the image is shown
 * WHOLE — no crop, therefore no crop-focus to get wrong, and no squashing. object-fit/-position are
 * set anyway as a safety net for any future case where a neighbour constrains the height. */
.mkv-guide-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}
@media (min-width: 860px) {
	/* Copy takes the larger share; the portrait is a companion, not the subject. */
	.mkv-guide-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
	/* No photo: ONE centred column at a comfortable measure — never a reserved empty half. */
	.mkv-guide-inner--nophoto { grid-template-columns: minmax(0, 1fr); }
}
.mkv-guide-media {
	max-width: 380px; width: 100%; justify-self: end;
	aspect-ratio: 1792 / 2390;   /* the portrait's own ratio — shown whole, never cropped */
	border-radius: var(--mk-r-card); overflow: hidden;
	background: var(--mk-alt-surface); box-shadow: var(--mk-shadow);
}
@media (max-width: 859px) {
	/* One column: the portrait sits under the copy, centred and smaller — a face, not a poster. */
	.mkv-guide-media { justify-self: center; max-width: 250px; }
}
.mkv-guide-photo {
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 22%;
}
.mkv-guide-body { max-width: var(--mk-measure); }
.mkv-guide-line {
	margin: 0 0 18px; font-size: var(--mk-fs-lead); line-height: var(--mk-lh-body); color: var(--mk-ink);
}
.mkv-guide-body .mk-section-heading { position: relative; padding-bottom: 14px; }
.mkv-guide-body .mk-section-heading::after {
	content: ''; position: absolute; left: 0; bottom: 0;
	width: 40px; height: 2px; background: var(--mk-gold);
}
.mkv-guide-link { margin: 0; font-weight: 600; }
.mkv-guide-link a { color: var(--mk-teal-text); }
/* ==================================================== §2 A SPECIALIST AGENCY, NOT A BOOKING SITE == */
.mkv-lede { max-width: var(--mk-measure); margin-bottom: var(--mk-space-lg); }
.mkv-cols { display: grid; grid-template-columns: 1fr; gap: var(--mk-space-lg); }
@media (min-width: 860px) { .mkv-cols { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.mkv-col { border-top: 2px solid var(--mk-teal); padding-top: 18px; }
.mkv-col h3 {
	font-size: var(--mk-fs-h3); font-weight: 700; letter-spacing: var(--mk-track-tight);
	line-height: var(--mk-lh-heading); margin: 0 0 10px; color: var(--mk-ink);
}
.mkv-col p { margin: 0; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-grey); }

/* ================================================================ §3 SIGNATURE SPECIALISMS == */
.mkv-signature { display: grid; grid-template-columns: 1fr; gap: var(--mk-space-lg); }
@media (min-width: 900px) { .mkv-signature { grid-template-columns: 1fr 1fr; gap: 32px; } }
.mkv-sig-card {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden;
	background: var(--mk-white); box-shadow: var(--mk-shadow);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease);
}
.mkv-sig-card:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow-lg); }
.mkv-sig-card:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }
.mkv-sig-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mk-alt-surface); }
.mkv-sig-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mkv-sig-body { display: block; padding: clamp(24px, 3vw, 34px); }
.mkv-sig-kicker {
	display: block; font-size: var(--mk-fs-eyebrow); font-weight: 700;
	letter-spacing: var(--mk-track-wide); text-transform: uppercase;
	color: var(--mk-teal-text); margin-bottom: 12px;
}
.mkv-sig-title {
	display: block; font-size: var(--mk-fs-h3); font-weight: 700;
	letter-spacing: var(--mk-track-tight); line-height: var(--mk-lh-heading);
	color: var(--mk-ink); margin-bottom: 12px;
}
.mkv-sig-copy {
	display: block; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body);
	color: var(--mk-grey); margin-bottom: 18px;
}
.mkv-sig-link { display: block; font-weight: 600; color: var(--mk-teal-text); }
.mkv-sig-card:hover .mkv-sig-link { text-decoration: underline; }

/* ========================================================================= §4 FOUR SHELVES == */
.mkv-shelves { display: grid; grid-template-columns: 1fr; gap: var(--mk-space-md); }
@media (min-width: 700px)  { .mkv-shelves { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .mkv-shelves { grid-template-columns: repeat(4, 1fr); } }
.mkv-shelf {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: var(--mk-white); border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-card); padding: clamp(22px, 2.4vw, 30px);
	transition: transform var(--mk-dur) var(--mk-ease), box-shadow var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease);
}
.mkv-shelf:hover { transform: translateY(-4px); box-shadow: var(--mk-shadow); border-color: var(--mk-teal); }
.mkv-shelf:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }
.mkv-shelf h3 {
	font-size: var(--mk-fs-h3); font-weight: 700; letter-spacing: var(--mk-track-tight);
	line-height: var(--mk-lh-heading); margin: 0 0 12px; color: var(--mk-ink);
}
.mkv-shelf p { margin: 0 0 18px; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-grey); }
.mkv-shelf-link { margin-top: auto; font-weight: 600; color: var(--mk-teal-text); }
.mkv-shelf:hover .mkv-shelf-link { text-decoration: underline; }

/* ============================================================ §5 GOOGLE REVIEWS TRUST BLOCK == */
.mkv-reviews-head {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: space-between; gap: var(--mk-space-md);
	margin-bottom: var(--mk-space-lg);
}
.mkv-reviews-head .mk-section-heading { margin-bottom: 0; }
.mkv-google-badge {
	display: flex; align-items: center; gap: 16px; text-decoration: none;
	background: var(--mk-alt-surface); border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-card); padding: 14px 22px;
}
.mkv-google-badge:hover { border-color: var(--mk-teal); }
.mkv-google-badge:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }
.mkv-google-score {
	font-size: 2.25rem; font-weight: 700; line-height: 1;
	letter-spacing: var(--mk-track-display); color: var(--mk-ink);
}
.mkv-google-meta { font-size: var(--mk-fs-small); line-height: 1.5; color: var(--mk-grey); }
.mkv-google-meta span { color: var(--mk-teal-text); font-weight: 600; }

/* TWO-UP, NOT FOUR-UP. Four cards across a 1200px container gives each quote about 28 characters
 * a line, and the first render turned 40-word reviews into 12-line ribbons. These are sentences
 * people are meant to read, not labels — two up gives roughly 55 characters a line, which is
 * inside the comfortable measure. The shelf cards below stay four-up because their copy was
 * shortened to fit; a review quote is verbatim and cannot be shortened to suit a grid. */
.mkv-review-grid { display: grid; grid-template-columns: 1fr; gap: var(--mk-space-md); }
@media (min-width: 700px) { .mkv-review-grid { grid-template-columns: 1fr 1fr; } }
.mkv-review {
	margin: 0; display: flex; flex-direction: column;
	background: var(--mk-white); border: 1px solid var(--mk-border);
	border-radius: var(--mk-r-card); padding: clamp(22px, 2.4vw, 28px);
}
/* A hairline gold rule instead of a decorative quote glyph — the accent is used once, small, and
 * carries no rating semantics of its own. */
.mkv-review::before {
	content: ''; display: block; width: 32px; height: 2px;
	background: var(--mk-gold); margin-bottom: 18px;
}
.mkv-review blockquote {
	margin: 0 0 18px; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-ink);
}
.mkv-review figcaption {
	margin-top: auto; font-size: var(--mk-fs-small); font-weight: 600; color: var(--mk-ink);
}
.mkv-review figcaption span { display: block; font-weight: 400; color: var(--mk-grey); margin-top: 3px; }

/* ================================================================= §6 HOW IT WORKS TEASER == */
.mkv-steps { display: grid; grid-template-columns: 1fr; gap: var(--mk-space-lg); }
@media (min-width: 860px) { .mkv-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.mkv-step h3 {
	font-size: var(--mk-fs-h3); font-weight: 700; letter-spacing: var(--mk-track-tight);
	line-height: var(--mk-lh-heading); margin: 0 0 10px; color: var(--mk-ink);
}
.mkv-step p { margin: 0; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-grey); }
.mkv-step-n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: var(--mk-r-pill);
	background: var(--mk-ink); color: var(--mk-white);
	font-size: var(--mk-fs-small); font-weight: 700; margin-bottom: 16px;
}

/* The compact 8-dot strip — story 858's second render. Decoration only: the eight step names are
 * carried by the role="img" label AND by the visually-hidden ordered list below it, so the
 * information never depends on being able to see or count the dots. */
.mkv-journey-head {
	margin: var(--mk-space-lg) 0 0; padding-top: var(--mk-space-lg);
	border-top: 1px solid var(--mk-border);
	font-size: var(--mk-fs-small); color: var(--mk-grey);
}
.mkv-journey {
	display: flex; align-items: center; gap: 10px;
	margin-top: 14px;
}
.mkv-dot {
	width: 9px; height: 9px; border-radius: var(--mk-r-pill);
	background: var(--mk-border); flex: 0 0 auto; position: relative;
}
.mkv-dot--first { background: var(--mk-teal); }
.mkv-dot + .mkv-dot::before {
	content: ''; position: absolute; right: 100%; top: 50%;
	width: 10px; height: 1px; background: var(--mk-border);
}
.mkv-journey-labels {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mkv-more { margin: var(--mk-space-md) 0 0; font-weight: 600; }
.mkv-more a { color: var(--mk-teal-text); }

/* ===================================================================== §8 CONFIDENCE STRIP == */
.mkv-confidence { background: var(--mk-alt-surface); padding: 26px 0; }
.mkv-confidence-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 12px 32px;
	font-size: var(--mk-fs-small); color: var(--mk-ink);
}
.mkv-confidence-list li { display: flex; align-items: center; gap: 8px; }
.mkv-confidence-list span {
	font-weight: 700; letter-spacing: var(--mk-track-wide);
	color: var(--mk-teal-text);
}

/* =================================================== DENSITY PASS — THE BAND SYSTEM ==
 * Derived from the measured deltas in docs/design/DENSITY_ANATOMY.md. The reference puts 174px of
 * padding on its HERO and 0/0 on every other band: its air lives INSIDE the imagery. We were
 * putting 140px top AND bottom on every band, so ~280px of dead space sat between every pair of
 * text blocks on a page where most bands had no image to justify the room.
 *
 * So padding is no longer uniform. It is a property of what the band CONTAINS:
 *   --feature / --dark  photography or colour fills the band -> 0-40px
 *   --split             half imagery, half prose            -> moderate
 *   text-only sections  keep real padding, tightened         -> 88px (was 140)
 *
 * THRESHOLDS ARE A TASTE PROXY from ONE reference, not a standard (PO, recorded in the doc).
 */
.mkv-band { position: relative; }

/* ---- text bands: contained measure, tightened padding -------------------------------
 * S3 CONSTRAINT (PO): full-bleed applies to PHOTOGRAPHIC bands only. Prose never goes to 1440.
 * These sections keep the 1200px container and a readable measure; only the padding moves. */
.mk-home-v2 .mk-section { padding: clamp(56px, 6vw, 88px) 0; }

/* ---- §2 SPLIT: prose left at a readable measure, photography bleeding right ---------- */
.mkv-band--split { overflow: hidden; }
.mkv-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.mkv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); align-items: center; }
}
.mkv-split-copy {
	/* Contained and centred against the site's own container edge, so the copy still lines up with
	   every other text band even though the section itself is full width. */
	max-width: calc(var(--mk-container) * 0.58);
	margin-left: auto;
	padding: clamp(56px, 6vw, 88px) var(--mk-pad-x) clamp(56px, 6vw, 88px) 0;
	box-sizing: content-box;
}
@media (max-width: 899px) {
	.mkv-split-copy { max-width: none; margin: 0; padding: clamp(48px, 8vw, 72px) var(--mk-pad-x); }
}
.mkv-split-media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: stretch; }
.mkv-split-media img {
	display: block; width: 100%; height: 100%; object-fit: cover; min-height: 320px;
}
@media (max-width: 899px) {
	.mkv-split-media { grid-template-columns: 1fr 1fr; }
	.mkv-split-media img { min-height: 210px; }
}
.mkv-lede { max-width: 52ch; margin: 0 0 var(--mk-space-lg); font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-grey); }

/* ---- §3 FEATURE: full-bleed photograph, copy on the ratified glass panel -------------
 * GLASS-PANEL LAW (CLAUDE.md): this is a panel over photography, so the recipe below is copied
 * from `.mk-panel-inner` and is NOT a tuning surface. Legibility comes from the halos, never from
 * a darker fill. Padding 0 — the photograph is the band's mass. */
.mkv-band--feature { padding: 0; overflow: hidden; background: var(--mk-ink-canvas); }
.mkv-feature-media { position: absolute; inset: 0; }
.mkv-feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* One bottom-anchored LOCAL gradient to seat the panel — never a full-bleed dim (bright-hero law). */
.mkv-band--feature::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(75% 110% at 0% 80%, rgba(16,18,20,0.72) 0%, rgba(16,18,20,0.42) 42%, rgba(16,18,20,0.12) 72%, rgba(16,18,20,0) 94%);
}
.mkv-band--right::after {
	background: radial-gradient(75% 110% at 100% 80%, rgba(16,18,20,0.72) 0%, rgba(16,18,20,0.42) 42%, rgba(16,18,20,0.12) 72%, rgba(16,18,20,0) 94%);
}
.mkv-feature-inner {
	position: relative; z-index: 1;
	min-height: clamp(420px, 56vw, 620px);
	display: flex; align-items: center;
	padding: clamp(40px, 5vw, 72px) var(--mk-pad-x);
}
.mkv-band--right .mkv-feature-inner { justify-content: flex-end; }
.mkv-feature-panel {
	max-width: 560px; min-width: 0;
	padding: clamp(22px, 2.4vw, 34px);
	border-radius: var(--mk-r-card);
	border: 1px solid rgba(255,255,255,0.14);
	background: linear-gradient(180deg, rgba(26,26,26,0.28) 0%, rgba(26,26,26,0.08) 100%);
	backdrop-filter: blur(2px) saturate(1.15);
	-webkit-backdrop-filter: blur(2px) saturate(1.15);
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.18), var(--mk-shadow-lg);
	color: var(--mk-white);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mkv-feature-panel { background: linear-gradient(180deg, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.86) 100%); }
}
/* The halo ladder — the ONLY legibility lever on a glass panel. */
.mkv-feature-kicker, .mkv-feature-title, .mkv-feature-copy, .mkv-feature-link {
	text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.88), 0 0 14px rgba(0,0,0,0.74), 0 0 28px rgba(0,0,0,0.46);
}
.mk-page p.mkv-feature-kicker {
	margin: 0 0 10px; font-size: var(--mk-fs-eyebrow); font-weight: 700;
	letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-white);
}
/* `.mk-page h2.mkv-feature-title`, not `.mkv-feature-title` — the Elementor Global Kit prints
 * `.elementor-kit-6 h2 { color: #1a1a1a }` (one class + one element), which OUTRANKS a plain
 * single-class rule. Measured consequence in the first density render: both feature headings and
 * the dark-band heading painted near-black on near-black photography — visibly the worst thing on
 * the page, and invisible to every check because the contrast instrument only measured the HERO.
 * Third time this exact trap has bitten in this build (h1 colour, pill font-size, now h2 colour);
 * it is recorded in style.css as well. */
.mk-page h2.mkv-feature-title {
	margin: 0 0 14px; font-size: var(--mk-fs-h2); font-weight: 700;
	letter-spacing: var(--mk-track-tight); line-height: var(--mk-lh-heading); color: var(--mk-white);
}
.mk-page p.mkv-feature-copy { margin: 0 0 18px; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: var(--mk-white); }
.mk-page a.mkv-feature-link { font-weight: 700; color: var(--mk-white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
.mk-page a.mkv-feature-link:hover { border-bottom-color: var(--mk-white); }

/* ---- dark bands: colour instead of white, so the page never empties ------------------
 * The reference's own language includes large flat coloured bands; this is that lever, and it
 * needs no assets. Used by §4 (shelves) and §6 (reviews). */
.mkv-band--dark {
	background: var(--mk-ink-canvas);
	color: var(--mk-on-dark);
	padding: clamp(56px, 6vw, 88px) 0;
}
.mkv-eyebrow--on-dark { color: var(--mk-teal); }
.mk-page h2.mkv-dark-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 var(--mk-space-lg);
	max-width: 22ch; text-wrap: balance; color: var(--mk-on-dark);
}

/* ---- §4 MOSAIC: one large tile + three smaller, typographic ---------------------------
 * The four category heroes are licensed but post-cutover (Odoo 860), so these are composed
 * typographic tiles — not empty outlined boxes. `.mkv-tile-media` is the socket: give a tile an
 * attachment id and the photograph slots in behind the same type, no other change. */
.mkv-mosaic { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px)  { .mkv-mosaic { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
	.mkv-mosaic { grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(168px, auto); }
	/* asymmetric: the lead tile takes two rows on the left, the other three stack beside it */
	.mkv-tile--lead { grid-row: span 2; }
}
.mkv-tile {
	position: relative; display: flex; align-items: flex-end; overflow: hidden;
	min-height: 168px; padding: clamp(20px, 2.2vw, 30px);
	border-radius: var(--mk-r-card); text-decoration: none;
	background: linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
	border: 1px solid rgba(255,255,255,0.16);
	transition: transform var(--mk-dur) var(--mk-ease), border-color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
.mkv-tile:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.42); background: linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.07) 100%); }
.mkv-tile:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }
.mkv-tile--lead { min-height: 320px; }
.mkv-tile-media { position: absolute; inset: 0; }
.mkv-tile-media img { width: 100%; height: 100%; object-fit: cover; }

/* SCRIM — added 2026-08-03 with the four photographs.
 *
 * These tiles were designed as TYPOGRAPHIC cards on a dark band: white title, white line at 0.78
 * alpha, over a flat ink field. That contract breaks the moment a photograph goes behind them —
 * 2914 is an aerial of a snowfield and 2598 has a bright dawn sky, and white-on-white is not a
 * contrast ratio, it is an invisible tile. So filling the socket was never "one integer": the
 * legibility contract had to be re-made at the same time.
 *
 * GLASS-PANEL LAW: legibility is carried by a LOCAL gradient under the type, never by darkening a
 * panel fill. This is the "hero's own local bright-hero gradient underneath" branch the law
 * permits. It sits INSIDE .mkv-tile-media, so it renders only where there is a photograph — a
 * typographic tile is completely unaffected and still shows the ink field it was designed for.
 *
 * The ramp is weighted to the bottom because `align-items: flex-end` puts every tile's type there,
 * and it reaches zero before the top so the photograph stays alive in its upper half rather than
 * sitting under a wash — the shape-retention test, not the alpha number.
 *
 * G-2 CORRECTION, same day: the first ramp was bottom-weighted like a hero, and the RENDER showed
 * why that is wrong here. On the three small tiles the body (title + line + link) is ~130px inside
 * a 185px tile, so the type occupies nearly the whole frame and the title sat in the ramp's
 * transparent zone — "Guided journeys…" over Rome's dawn sky and the Club Med line over snow were
 * both washed out. The machine pass was green (scrim present, images loaded) and the page was still
 * wrong, which is precisely the D-2 leak ADR-007 G-2 exists to catch.
 *
 * The fix is NOT a flat darker wash. The type is left-aligned and reaches ~60% across, so the scrim
 * is LEFT-weighted as well as bottom-weighted: two layered gradients that protect the corner the
 * words actually occupy and leave the far side of the photograph open. */
.mkv-tile-media::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(to right,
			rgba(26,26,26,0.72) 0%,
			rgba(26,26,26,0.48) 42%,
			rgba(26,26,26,0.10) 78%,
			rgba(26,26,26,0)    100%),
		linear-gradient(to top,
			rgba(26,26,26,0.55) 0%,
			rgba(26,26,26,0.34) 45%,
			rgba(26,26,26,0.14) 75%,
			rgba(26,26,26,0)    100%);
}
/* The lead tile is ~2x the height, so the same percentage stops would push the ramp far higher up
 * the frame than the type needs. Pulled in proportionally. */
/* The lead tile is ~2x the height and its body sits genuinely at the bottom, so it keeps the
 * bottom-weighted ramp — verified correct in the render — with only a light left assist. */
.mkv-tile--lead .mkv-tile-media::after {
	background:
		linear-gradient(to right,
			rgba(26,26,26,0.42) 0%,
			rgba(26,26,26,0.16) 55%,
			rgba(26,26,26,0)    92%),
		linear-gradient(to top,
			rgba(26,26,26,0.80) 0%,
			rgba(26,26,26,0.55) 20%,
			rgba(26,26,26,0.18) 44%,
			rgba(26,26,26,0)    72%);
}
/* Type gets its own halo as well — the law's first lever, and it is what carries the line if a
 * future frame is brighter than these four. */
.mkv-tile-media ~ .mkv-tile-body .mkv-tile-title { text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 18px rgba(0,0,0,0.45); }
.mkv-tile-media ~ .mkv-tile-body .mkv-tile-line  { text-shadow: 0 1px 3px rgba(0,0,0,0.70), 0 0 14px rgba(0,0,0,0.40); color: #fff; }
.mkv-tile-body { position: relative; z-index: 1; display: block; }
.mkv-tile-title {
	display: block; font-weight: 700; letter-spacing: var(--mk-track-tight);
	font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; color: var(--mk-white); margin-bottom: 10px;
}
.mkv-tile--lead .mkv-tile-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.mkv-tile-line { display: block; font-size: var(--mk-fs-small); line-height: 1.55; color: rgba(255,255,255,0.78); margin-bottom: 14px; max-width: 34ch; }
.mkv-tile-link { display: block; font-size: var(--mk-fs-small); font-weight: 700; letter-spacing: var(--mk-track-cta); text-transform: uppercase; color: var(--mk-teal); }

/* ---- §6 reviews, now on the dark band ------------------------------------------------ */
.mkv-band--dark .mkv-review {
	background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14);
}
.mkv-band--dark .mkv-review blockquote { color: var(--mk-on-dark); font-size: var(--mk-fs-small); line-height: 1.6; }
.mkv-band--dark .mkv-review figcaption { color: var(--mk-on-dark); }
.mkv-band--dark .mkv-review figcaption span { color: rgba(255,255,255,0.62); }
.mkv-band--dark .mkv-google-badge { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.mkv-band--dark .mkv-google-score { color: var(--mk-white); }
.mkv-band--dark .mkv-google-meta { color: rgba(255,255,255,0.72); }
.mkv-band--dark .mkv-google-meta span { display: block; color: var(--mk-teal); }

/* ============================== §6 REVIEWS — PO REJECTION FIXES (four named defects) ==
 * 1. CONTAINMENT. Measured on the rendered page: content spanned x=200..1239, i.e. 1040px of a
 *    1440 viewport — 72.2%, with ~200px of dead margin each side. That is the empty-third defect
 *    again, just on a dark ground. These are CARDS, not prose, so the S3 constraint (prose stays
 *    contained) does not apply and the content goes wide: 1280px = 88.9% of viewport at 1440. */
.mk-container--wide { max-width: none; padding-inline: var(--mk-pad-x); }
@media (min-width: 1600px) { .mk-container--wide { max-width: 1560px; margin-inline: auto; } }

/* 2. CARD PRESENCE. Cards were rgba(255,255,255,0.05) on a #0e1214 band — near-black on
 *    near-black, no edge, no elevation. Lifted so they read as objects sitting ON the band:
 *    a raised fill, a brighter hairline, and a real shadow. The BAND itself is untouched — the PO
 *    will judge its darkness after these four fixes, and warming the charcoal (not going pale) is
 *    the named next lever if it still reads oppressive. */
.mkv-band--dark .mkv-review {
	background: rgba(255,255,255,0.10);
	border: 1px solid rgba(255,255,255,0.17);
	box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 22px 44px -20px rgba(0,0,0,0.85);
	border-radius: var(--mk-r-card);
}
.mkv-band--dark .mkv-review::before { background: var(--mk-gold); }

/* 3. BADGE INTEGRATED INTO THE HEADING LINE. It previously sat in its own flex child below the
 *    heading block, aligned to nothing. It now shares a BASELINE row with the h2. */
.mkv-reviews-head {
	display: flex; align-items: baseline; justify-content: space-between;
	flex-wrap: wrap; gap: 16px 32px; margin-bottom: var(--mk-space-lg);
}
.mkv-reviews-head .mkv-dark-heading { margin: 0; flex: 1 1 22ch; }
.mkv-band--dark .mkv-google-badge {
	display: flex; align-items: baseline; gap: 12px;
	background: none; border: 0; padding: 0; flex: 0 0 auto;
}
.mkv-band--dark .mkv-google-score {
	font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1;
	color: var(--mk-gold); letter-spacing: var(--mk-track-display);
}
.mkv-band--dark .mkv-google-meta { font-size: var(--mk-fs-small); line-height: 1.45; color: rgba(255,255,255,0.72); text-align: left; }

/* 4. GOLD, NOT CYAN. DESIGN v1.1's palette assigns Warm Gold #d4a853 to trust signals — IATA and
 *    CLIA badges, ratings, "exclusive" markers. A Google rating and the link to the public profile
 *    are exactly that, so both move off the teal. Measured 8.6:1 on the dark band. Applied to the
 *    SHELVES band's accents too: the same rule governs them and leaving one band cyan would just
 *    move the inconsistency rather than fix it — flagged for the PO to pull back if unwanted. */
.mkv-eyebrow--gold { color: var(--mk-gold); }
.mk-page .mkv-eyebrow--on-dark { color: var(--mk-gold); }
.mkv-band--dark .mkv-google-meta span { display: block; color: var(--mk-gold); font-weight: 600; }
.mk-page .mkv-tile-link { color: var(--mk-gold); }

/* ===== §6 REVIEWS — QUIET INTERLUDE CAROUSEL (PO brief + amendment 1, 2026-08-04) ============
 * Was: full-bleed dark band + four bordered, filled cards. Two enclosures stacking, which is what
 * "the container is smothering ours" meant. Now: light ground, no cards, italic quotes, the gold
 * badge kept, five slides on a carousel.
 *
 * NOT TALLER THAN WHAT IT REPLACES, and that is a hard constraint rather than an aspiration:
 * two-up at desktop keeps the band populated (a one-up carousel empties three-quarters of it and
 * RAISES the emptiest-screen figure), and the track height follows its tallest VISIBLE pair rather
 * than a min-height sized to the longest quote. */
.mkv-reviews--light { background: var(--mk-alt-surface); color: var(--mk-ink); }
.mkv-reviews--light .mk-section-eyebrow { color: var(--mk-gold); }

.mkv-revcar { position: relative; margin-top: var(--mk-space-lg); overflow: hidden; }
.mkv-revcar-track {
	display: flex; gap: clamp(28px, 4vw, 64px);
	transition: transform 520ms var(--mk-ease-out);
	will-change: transform;
}
/* one-up mobile, two-up desktop */
.mkv-revcar-slide { flex: 0 0 100%; min-width: 0; margin: 0; }
@media (min-width: 860px) { .mkv-revcar-slide { flex: 0 0 calc((100% - clamp(28px,4vw,64px)) / 2); } }

/* NO CARD. No background, no border, no radius, no padding box — the quote carries itself and the
 * separating work is done by leading and the gap, exactly as the reference does it. */
.mkv-revcar-slide blockquote {
	margin: 0 0 18px; padding: 0; border: 0; background: none;
	font-style: italic;
	font-size: clamp(1.05rem, 1.45vw, 1.3rem);
	line-height: 1.72;
	color: var(--mk-ink);
	max-width: 46ch;              /* comfortable measure — protects the ~55ch the old grid protected */
}
.mkv-revcar-slide figcaption {
	font-size: var(--mk-fs-small); font-weight: 600; letter-spacing: var(--mk-track-tight);
	color: var(--mk-grey);
}
/* the one accent, used once, small — same hairline the cards had, kept as continuity */
.mkv-revcar-slide blockquote::before {
	content: ''; display: block; width: 28px; height: 2px;
	background: var(--mk-gold); margin-bottom: 16px;
}

.mkv-revcar-nav { display: flex; align-items: center; gap: 14px; margin-top: var(--mk-space-md); }
.mkv-revcar-btn {
	width: 38px; height: 38px; border-radius: var(--mk-r-pill);
	border: 1px solid var(--mk-border); background: transparent; color: var(--mk-ink);
	font-size: 1.15rem; line-height: 1; cursor: pointer;
	transition: border-color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}
.mkv-revcar-btn:hover { border-color: var(--mk-teal); }
.mkv-revcar-btn:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 3px; }
.mkv-revcar-btn[disabled] { opacity: 0.35; cursor: default; }
.mkv-revcar-dots { display: inline-flex; gap: 7px; }
.mkv-revcar-dots i {
	width: 7px; height: 7px; border-radius: var(--mk-r-pill);
	background: var(--mk-border); display: block;
}
.mkv-revcar-dots i[data-on] { background: var(--mk-gold); }
.mkv-revcar-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* REDUCED MOTION: no sliding transition. Paging still works; it just cuts. */
@media (prefers-reduced-motion: reduce) { .mkv-revcar-track { transition: none; } }

/* The badge keeps its own treatment but sits on a light ground now, so the dark-band override that
 * lifted the old cards must not apply here. */
.mkv-reviews--light .mkv-google-badge { background: var(--mk-white); }

/* --- two defects found by LOOKING at the render, both caused by moving to a light ground ------
 *
 * 1. BADGE. `display:block` on the badge's second line only ever existed inside
 *    `.mkv-band--dark .mkv-google-meta span`. Dropping the dark class to go light took the block
 *    display with it, so "66 reviews on Google" and "See the public profile →" collapsed onto one
 *    line with no space between them. Restated on the light variant rather than by re-adding a
 *    class the section no longer has.
 *
 * 2. NAV BUTTONS. They rendered as solid black rectangles. Cause is the Elementor Kit's sitewide
 *    `.elementor-kit-6 button { background-color:#1a1a1a; padding:16px 40px; }` — documented in
 *    style.css and already beaten the same way by `.mk-region-filter button`. A bare class cannot
 *    win against it, so the overrides are !important, matching the established precedent in this
 *    codebase rather than inventing a second approach. */
.mkv-reviews--light .mkv-google-meta span {
	display: block;
	color: var(--mk-teal-text);
	font-weight: 600;
	margin-top: 2px;
}
.mkv-revcar .mkv-revcar-btn {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--mk-ink) !important;
	border: 1px solid var(--mk-border) !important;
	border-radius: var(--mk-r-pill) !important;
	padding: 0 !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	font-size: 1.15rem !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.mkv-revcar .mkv-revcar-btn:hover:not([disabled]) { border-color: var(--mk-teal) !important; }
.mkv-revcar .mkv-revcar-btn[disabled] { opacity: 0.3 !important; cursor: default !important; }