/* ExpatKit Blog System — built from the site's active design tokens
   (Expatkit Passport Navy: navy / gold / cream, Fraunces + Inter). */

:root {
	--ek-bg: #FFFFFF;
	--ek-surface: #FAF7F1;
	--ek-ink: #101A28;
	--ek-navy: #0A1B33;
	--ek-navy-mid: #143059;
	--ek-navy-lift: #1D4275;
	--ek-accent: #C9A227;
	--ek-accent-light: #E5C158;
	--ek-accent-soft: #F5E7BE;
	--ek-muted: #5C6B7F;
	--ek-line: #E7E2D7;
	--ek-support: #1E7A6E;
	--ek-ink-on-accent: #20180A;

	--ek-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ek-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--ek-radius-sm: 12px;
	--ek-radius-md: 16px;
	--ek-radius-lg: 26px;
	--ek-radius-pill: 100px;

	--ek-container: 1200px;
	--ek-container-narrow: 760px;
	--ek-article-col: 820px;
	--ek-hero-width: 1000px;
	--ek-gap: 48px;
	/* Combined measure of the article column + the 220-260px side column
	   beside it (TOC/lead row, article+rail row), so a full-width block like
	   the sapo can span the exact same trench as the rows below it. */
	--ek-row-width: calc(var(--ek-article-col) + var(--ek-gap) + 260px);
}

/* ---------- Base / layout ---------- */

.ek-single, .ek-blog-index, .ek-archive {
	color: var(--ek-ink);
	font-family: var(--ek-font-body);
	background: var(--ek-bg);
}

.ek-container {
	max-width: var(--ek-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.ek-container--narrow {
	max-width: calc(var(--ek-container-narrow) + 48px);
}

/* Single-post hero column: left-anchored (not centered) inside .ek-container
   so it lines up exactly with the article body's grid column below it.
   Uses its own token (--ek-hero-width), wider than --ek-article-col so the
   H1 gets real breathing room, and separate from --ek-container-narrow, so
   this never affects the blog index / archive headers that also reuse
   .ek-container--narrow. */
.ek-hero-col {
	max-width: var(--ek-hero-width);
}

/* ---------- Eyebrow / breadcrumbs ---------- */

.ek-eyebrow {
	display: inline-block;
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9A7A12;
	text-decoration: none;
	margin-block-end: 12px;
}
.ek-eyebrow:hover { color: var(--ek-accent); }

.ek-breadcrumbs, .rank-math-breadcrumb {
	font-family: var(--ek-font-body);
	font-size: 0.85rem;
	color: var(--ek-muted);
	margin-block-end: 20px;
}
.ek-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.ek-breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin-inline-start: 6px;
	color: var(--ek-line);
}
.ek-breadcrumbs a, .rank-math-breadcrumb a {
	color: var(--ek-muted);
	text-decoration: none;
}
.ek-breadcrumbs a:hover, .rank-math-breadcrumb a:hover { color: var(--ek-navy); text-decoration: underline; }
.rank-math-breadcrumb p { margin: 0; }

/* ---------- Article header ---------- */

.ek-article-header {
	padding-block-start: 40px;
	padding-block-end: 8px;
}

.ek-article-title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	color: var(--ek-ink);
	line-height: 1.1;
	letter-spacing: -0.01em;
	/* ~34px at 320px viewport, ~44px at 768px (tablet), maxing at 58px by ~1440px (desktop) */
	font-size: clamp(2.125rem, 1.766rem + 2.07vw, 3.625rem);
	margin: 0 0 24px;
}

.ek-featured-image {
	margin: 28px 0 32px;
}
.ek-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ek-radius-lg);
	display: block;
}

.ek-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: var(--ek-muted);
	margin: 0 0 24px;
}
.ek-article-meta a { color: var(--ek-navy); text-decoration: none; font-weight: 600; }
.ek-article-meta a:hover { color: var(--ek-accent); }

.ek-sapo {
	margin-block: 24px 0;
	max-width: var(--ek-row-width);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-md);
	background: var(--ek-surface);
	padding: 24px 28px;
}
.ek-sapo__label {
	font-family: var(--ek-font-body);
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9A7A12;
	margin: 0 0 10px;
}
.ek-article-deck {
	font-family: var(--ek-font-body);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	line-height: 1.65;
	color: var(--ek-ink);
	margin: 0;
	/* No prose-measure cap here on purpose: .ek-sapo already caps the box
	   itself at --ek-row-width, so the text can use the full padded width
	   of the card instead of trapping it in a narrow inner column. */
}
/* Collapsed state is JS-applied only (see blog.js) so the full summary is
   always present and readable with JS disabled or when printing. */
.ek-sapo[data-expanded="false"] .ek-article-deck {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Double-scoped (.ek-sapo .ek-sapo__toggle) so this beats Elementor's
   global kit button reset (".elementor-kit-XXXX button"), which otherwise
   wins on specificity alone and repaints this into a solid pill. */
.ek-sapo .ek-sapo__toggle {
	display: inline-block;
	margin-block-start: 14px;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	font-family: var(--ek-font-body);
	font-style: normal;
	font-weight: 600;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--ek-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ek-sapo .ek-sapo__toggle:hover { background: none; color: var(--ek-accent); }
.ek-sapo .ek-sapo__toggle:focus-visible { outline: 2px solid var(--ek-accent); outline-offset: 2px; }
@media print {
	.ek-sapo[data-expanded="false"] .ek-article-deck {
		display: block !important;
		-webkit-line-clamp: unset !important;
		overflow: visible !important;
	}
	.ek-sapo__toggle { display: none !important; }
}

/* ---------- Article layout (main + rail) ---------- */

.ek-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-block-end: 64px;
}

@media (min-width: 1024px) {
	.ek-article-layout {
		grid-template-columns: minmax(0, var(--ek-article-col)) minmax(220px, 260px);
		gap: var(--ek-gap);
		align-items: start;
	}
	/* No City Score / Email Capture on this post: drop the reserved rail
	   column entirely and let the article column center in the freed space. */
	.ek-article-layout--no-rail {
		grid-template-columns: minmax(0, 1fr);
	}
	.ek-article-layout--no-rail .ek-article-body {
		max-width: var(--ek-article-col);
		margin-inline: auto;
	}
}

.ek-article-body { min-width: 0; }

.ek-rail { min-width: 0; }
.ek-rail__sticky {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
@media (min-width: 1024px) {
	.ek-rail__sticky {
		position: sticky;
		top: 32px;
	}
}

/* ---------- TOC + Lead capture row ----------
   Shares the exact same column measure as .ek-article-layout below it
   (--ek-article-col main + a 220-260px side column) so both rows begin on
   the same horizontal position and read as one connected layout. */

.ek-toc-lead-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-block: 32px;
	align-items: start;
}
@media (min-width: 1024px) {
	.ek-toc-lead-row {
		grid-template-columns: minmax(0, var(--ek-article-col)) minmax(220px, 260px);
		gap: var(--ek-gap);
	}
	.ek-toc-lead-row--toc-only { grid-template-columns: minmax(0, 1fr); }
	.ek-toc-lead-row--toc-only .ek-toc-card { max-width: 560px; }
	.ek-toc-lead-row--lead-only { grid-template-columns: minmax(0, 1fr); }
	.ek-toc-lead-row--lead-only .ek-lead-card { max-width: 380px; }
}

.ek-toc-card {
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-md);
	background: #fff;
	padding: 24px;
}

/* ---------- Easy Table of Contents plugin (scoped override) ----------
   Targets the plugin's own real front-end markup/classes, inspected from
   its rendered output: #ez-toc-container, .ez-toc-title-container,
   .ez-toc-title, .ez-toc-toggle, .ez-toc-list, .ez-toc-link. The plugin's
   own box chrome (background/border/shadow) is neutralised so .ek-toc-card
   supplies it instead, matching the lead card's card system exactly.
   Plugin files are never modified — this is a pure CSS override. */

.ek-toc-card #ez-toc-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}
.ek-toc-card .ez-toc-title-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ek-line);
}
.ek-toc-card .ez-toc-title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ek-ink);
	margin: 0;
}
.ek-toc-card .ez-toc-toggle,
.ek-toc-card .ez-toc-js-icon-con {
	border: 0;
	background: transparent;
	width: auto;
	height: auto;
	left: 0;
	padding: 0;
	margin: 0;
}
/* Text label injected next to the plugin's icon by blog.js, kept in sync
   with the list's real visibility via a MutationObserver — the plugin
   itself exposes no text state and no aria-expanded, so this also closes
   an accessibility gap in the plugin's own markup. */
.ek-toc-card .ez-toc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	margin: -5px -9px -5px 0;
	border-radius: var(--ek-radius-sm);
	transition: background-color 0.15s ease;
}
.ek-toc-card .ez-toc-toggle:hover {
	background: var(--ek-surface);
}
.ek-toc-toggle-label {
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--ek-navy);
	order: -1;
}
.ek-toc-card .ez-toc-toggle:hover .ek-toc-toggle-label {
	color: var(--ek-accent);
}
.ek-toc-card .ez-toc-icon-toggle-span {
	width: 20px;
	height: 20px;
}
.ek-toc-card .ez-toc-icon-toggle-span svg {
	width: 16px !important;
	height: 16px !important;
	fill: var(--ek-muted) !important;
	color: var(--ek-muted) !important;
}
.ek-toc-card .ez-toc-toggle:hover .ez-toc-icon-toggle-span svg {
	fill: var(--ek-navy) !important;
	color: var(--ek-navy) !important;
}

/* List/link rules are shared between the normal card and the sticky panel
   (.ek-toc-sticky__panel-inner) on purpose: opening the sticky TOC relocates
   the same #ez-toc-container node rather than cloning it (see blog.js), so
   whichever context currently holds it must render identically. */
/* display is fully owned here, never by the plugin's own inline style —
   blog.js's controller tracks open/closed with its own flag and toggles
   only this class. Collapsed (display:none !important) is the
   unconditional default so the very first paint is always collapsed, with
   no dependency on script load order or the plugin's own init timing —
   an earlier version inferred open/closed from the plugin's inline style,
   which raced the plugin's own ready-time init and could flash the list
   open before snapping shut. Both states use !important so neither the
   plugin's inline style nor its own stylesheet can override either one;
   the open rule's extra class wins the tie between the two. Layout-only
   properties (gap, margin, etc.) stay unconditional; they're inert while
   display:none anyway. */
.ek-toc-card nav > ul.ez-toc-list,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list,
.ek-toc-card ul.ez-toc-list,
.ek-toc-sticky__panel-inner ul.ez-toc-list {
	display: none !important;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	max-height: none;
	overflow: visible;
}
.ek-toc-card nav > ul.ez-toc-list.ek-toc-is-open,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list.ek-toc-is-open,
.ek-toc-card ul.ez-toc-list.ek-toc-is-open,
.ek-toc-sticky__panel-inner ul.ez-toc-list.ek-toc-is-open {
	display: flex !important;
}
.ek-toc-card li,
.ek-toc-sticky__panel-inner li {
	list-style: none;
}

/* ---- Numbering (1., 2., 3. / 1.1, 1.2 under section 1) ----
   Generated purely with CSS counters from the plugin's existing nested
   <ul>/<li> markup (verified live: a nested <ul> sits as a direct child of
   its parent <li>). No text is added to the DOM and nothing in the plugin
   is modified — this is presentational only, so screen readers still read
   each link's own accessible name unchanged. */
.ek-toc-card nav > ul.ez-toc-list,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list {
	counter-reset: ek-toc-1;
}
.ek-toc-card nav > ul.ez-toc-list > li,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list > li {
	counter-increment: ek-toc-1;
}
.ek-toc-card nav > ul.ez-toc-list > li > ul,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list > li > ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 4px 0 8px 1.4em;
	padding: 0;
	counter-reset: ek-toc-2;
}
.ek-toc-card nav > ul.ez-toc-list > li > ul > li,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list > li > ul > li {
	counter-increment: ek-toc-2;
}
.ek-toc-card nav > ul.ez-toc-list > li > a::before,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list > li > a::before {
	content: counter(ek-toc-1) '.';
	flex-shrink: 0;
	min-width: 1.5em;
	color: #9A7A12;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease;
}
.ek-toc-card nav > ul.ez-toc-list > li > ul > li > a::before,
.ek-toc-sticky__panel-inner nav > ul.ez-toc-list > li > ul > li > a::before {
	content: counter(ek-toc-1) '.' counter(ek-toc-2);
	flex-shrink: 0;
	min-width: 2.5em;
	color: var(--ek-muted);
	font-weight: 600;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease;
}

/* ---- Rows: top-level stronger than nested, clear hover vs. active ----
   Every color-bearing selector below includes the real #ez-toc-container
   ID (present as an ancestor in both the card and the relocated sticky
   panel — verified live in the rendered DOM) rather than resting on
   .ek-toc-card/.ek-toc-sticky__panel-inner classes alone. Without the ID,
   the plugin's own screen.css ("#ez-toc-container a { color: #444444 }"
   and "#ez-toc-container a:visited { color: #9f9f9f }") silently won on
   specificity regardless of how many classes ours stacked — an ID beats
   any number of classes — so every row's text (and a visited row doubly
   so) rendered in the plugin's own grey instead of the design's ink/navy,
   including while hovered or active. */
.ek-toc-card #ez-toc-container .ez-toc-link,
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 10px;
	margin-inline-start: -10px;
	border-left: 2px solid transparent;
	border-radius: 0 8px 8px 0;
	color: var(--ek-ink);
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.45;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ek-toc-card #ez-toc-container nav > ul.ez-toc-list > li > ul .ez-toc-link,
.ek-toc-sticky__panel-inner #ez-toc-container nav > ul.ez-toc-list > li > ul .ez-toc-link {
	padding-block: 5px;
	color: var(--ek-muted);
	font-weight: 500;
	font-size: 0.84rem;
}
.ek-toc-card #ez-toc-container .ez-toc-link:hover,
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link:hover {
	background: var(--ek-surface);
	border-left-color: var(--ek-line);
	color: var(--ek-navy);
}
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link:hover {
	background: #fff;
}
.ek-toc-card #ez-toc-container li.active > a,
.ek-toc-card #ez-toc-container .ez-toc-link.ek-toc-active,
.ek-toc-sticky__panel-inner #ez-toc-container li.active > a,
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link.ek-toc-active {
	background: var(--ek-surface);
	border-left-color: var(--ek-accent);
	color: var(--ek-navy);
	font-weight: 700;
}
.ek-toc-sticky__panel-inner #ez-toc-container li.active > a,
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link.ek-toc-active {
	background: #fff;
}
/* The number tracks the same hover/active emphasis as the row's text
   instead of staying a fixed gold/muted tone regardless of state — without
   this the numbering read as decorative rather than part of the same
   interactive row. */
.ek-toc-card #ez-toc-container .ez-toc-link:hover::before,
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link:hover::before,
.ek-toc-card #ez-toc-container li.active > a::before,
.ek-toc-card #ez-toc-container .ez-toc-link.ek-toc-active::before,
.ek-toc-sticky__panel-inner #ez-toc-container li.active > a::before,
.ek-toc-sticky__panel-inner #ez-toc-container .ez-toc-link.ek-toc-active::before {
	color: var(--ek-navy);
}
@media (prefers-reduced-motion: reduce) {
	.ek-toc-card .ez-toc-link,
	.ek-toc-sticky__panel-inner .ez-toc-link,
	.ek-toc-card .ez-toc-link::before,
	.ek-toc-sticky__panel-inner .ez-toc-link::before {
		transition: none;
	}
}

/* ---------- Sticky follow-along TOC ----------
   Appears once the real .ek-toc-card scrolls out of view above the
   viewport (see blog.js). It never duplicates the TOC: opening it
   relocates the same #ez-toc-container node into the panel below, and
   closing it (or scrolling back up to the real card) moves it back. */

.ek-toc-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: #fff;
	border-bottom: 1px solid var(--ek-line);
}
body.admin-bar .ek-toc-sticky { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ek-toc-sticky { top: 46px; }
}

/* Double-scoped for the same reason as .ek-sapo .ek-sapo__toggle: beats
   Elementor's global kit ".elementor-kit-XXXX button" reset, which
   otherwise wins on specificity and repaints this into a solid gold pill. */
.ek-toc-sticky .ek-toc-sticky__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 14px 0;
	cursor: pointer;
	text-align: left;
}
.ek-toc-sticky .ek-toc-sticky__toggle:hover { background: none; }
.ek-toc-sticky__label {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ek-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.ek-toc-sticky__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--ek-navy);
}
.ek-toc-sticky__toggle:hover .ek-toc-sticky__action { color: var(--ek-accent); }
.ek-toc-sticky__toggle:focus-visible { outline: 2px solid var(--ek-accent); outline-offset: -2px; }
.ek-toc-sticky__chevron {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.ek-toc-sticky.is-open .ek-toc-sticky__chevron { transform: rotate(180deg); }

.ek-toc-sticky__panel {
	background: var(--ek-surface);
	border-top: 1px solid var(--ek-line);
	max-height: min(65vh, 480px);
	overflow-y: auto;
}
.ek-toc-sticky__panel-inner {
	padding-block: 18px 22px;
}
/* The relocated #ez-toc-container already shows its own list; the plugin's
   title/toggle row would just duplicate the sticky bar above it. */
.ek-toc-sticky__panel-inner .ez-toc-title-container {
	display: none;
}
.ek-toc-sticky__panel-inner #ez-toc-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
@media (prefers-reduced-motion: reduce) {
	.ek-toc-sticky__chevron { transition: none; }
}

/* ---------- CTA ---------- */

.ek-cta {
	background: var(--ek-navy);
	border-radius: var(--ek-radius-lg);
	color: #fff;
	text-align: left;
}
.ek-cta__heading {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	color: #fff;
	margin: 0 0 8px;
}
.ek-cta__copy {
	color: rgba(255,255,255,0.75);
	margin: 0 0 20px;
	line-height: 1.55;
}
.ek-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ek-accent);
	color: var(--ek-ink-on-accent);
	font-family: var(--ek-font-body);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--ek-radius-pill);
	padding: 13px 26px;
	font-size: 0.95rem;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ek-cta__button:hover { background: var(--ek-accent-light); }
.ek-cta__button:focus-visible { outline: 2px solid var(--ek-accent-light); outline-offset: 3px; }

.ek-cta--compact {
	padding: 24px;
}
.ek-cta--compact .ek-cta__heading { font-size: 1.15rem; }
.ek-cta--compact .ek-cta__copy { font-size: 0.9rem; }
.ek-cta--compact .ek-cta__button { width: 100%; }

.ek-final-cta { padding-block: 64px; }
.ek-cta--full {
	padding: 56px;
	text-align: center;
}
.ek-cta--full .ek-cta__heading { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.ek-cta--full .ek-cta__copy { font-size: 1.05rem; max-width: 46ch; margin-inline: auto; margin-block-end: 28px; }

@media (prefers-reduced-motion: reduce) {
	.ek-cta__button { transition: none; }
}

/* ---------- Prose (article content) ---------- */

.ek-prose {
	font-family: var(--ek-font-body);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.75;
	color: var(--ek-ink);
}
.ek-prose > * + * { margin-block-start: 1.4em; }

.ek-prose h2 {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	color: var(--ek-ink);
	line-height: 1.15;
	font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.125rem);
	margin-block-start: 2em;
	scroll-margin-top: 24px;
}
.ek-prose h3 {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	color: var(--ek-ink);
	line-height: 1.2;
	font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);
	margin-block-start: 1.8em;
	scroll-margin-top: 24px;
}
.ek-prose h4 {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	margin-block-start: 1.6em;
}
.ek-prose > h2:first-child, .ek-prose > h3:first-child { margin-block-start: 0; }

.ek-prose p { max-width: 68ch; }

.ek-prose a { color: var(--ek-navy); text-decoration-color: var(--ek-line); text-underline-offset: 3px; }
.ek-prose a:hover { color: var(--ek-accent); }
.ek-prose a:focus-visible { outline: 2px solid var(--ek-accent); outline-offset: 2px; }

.ek-prose strong { font-weight: 700; }

.ek-prose ul, .ek-prose ol {
	max-width: 68ch;
	padding-inline-start: 1.4em;
}
.ek-prose li + li { margin-block-start: 0.5em; }
.ek-prose ul { list-style: disc; }
.ek-prose ol { list-style: decimal; }

.ek-prose ol.is-style-ek-steps {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: ek-step;
}
.ek-prose ol.is-style-ek-steps > li {
	counter-increment: ek-step;
	position: relative;
	padding-inline-start: 44px;
}
.ek-prose ol.is-style-ek-steps > li::before {
	content: counter(ek-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ek-navy);
	color: #fff;
	font-family: var(--ek-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ek-prose blockquote {
	max-width: 68ch;
	margin: 1.6em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--ek-accent);
	font-family: var(--ek-font-heading);
	font-style: italic;
	font-size: 1.2em;
	color: var(--ek-navy);
	line-height: 1.5;
}
.ek-prose blockquote p { margin: 0; }
.ek-prose blockquote cite {
	display: block;
	margin-block-start: 0.6em;
	font-family: var(--ek-font-body);
	font-style: normal;
	font-size: 0.8rem;
	color: var(--ek-muted);
}

/* Tip / Note block-style variations (opt-in from the block toolbar) */
.ek-prose p.is-style-ek-tip,
.ek-prose p.is-style-ek-note {
	max-width: none;
	border-radius: var(--ek-radius-md);
	padding: 18px 22px;
	font-size: 0.95em;
	line-height: 1.65;
}
.ek-prose p.is-style-ek-tip {
	background: var(--ek-accent-soft);
	border: 1px solid var(--ek-accent-light);
	color: #4A3B0C;
}
.ek-prose p.is-style-ek-note {
	background: var(--ek-surface);
	border: 1px solid var(--ek-line);
	border-left: 3px solid var(--ek-navy);
	color: var(--ek-ink);
}

/* Pros / Cons block-style variations for Group blocks */
.ek-prose .is-style-ek-pro,
.ek-prose .is-style-ek-con {
	border-radius: var(--ek-radius-md);
	padding: 20px 22px;
	border: 1px solid var(--ek-line);
}
.ek-prose .is-style-ek-pro { background: rgba(30,122,110,0.06); border-color: rgba(30,122,110,0.3); }
.ek-prose .is-style-ek-con { background: rgba(16,26,40,0.03); border-color: var(--ek-line); }

.ek-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
}
.ek-prose .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}
.ek-prose th, .ek-prose td {
	border: 1px solid var(--ek-line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.ek-prose th {
	font-family: var(--ek-font-body);
	font-weight: 600;
	background: var(--ek-surface);
}

.ek-prose img { max-width: 100%; height: auto; border-radius: var(--ek-radius-md); display: block; }
.ek-prose figure { margin: 1.6em 0; }
.ek-prose figcaption {
	font-size: 0.85rem;
	color: var(--ek-muted);
	margin-block-start: 10px;
	text-align: center;
}
.ek-prose .wp-block-gallery { max-width: none; }

.ek-prose > * { overflow-wrap: break-word; word-break: break-word; }

/* ---------- Tags ---------- */

.ek-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 40px;
}
.ek-tag {
	font-size: 0.82rem;
	color: var(--ek-muted);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-pill);
	padding: 6px 14px;
	text-decoration: none;
}
.ek-tag:hover { border-color: var(--ek-navy); color: var(--ek-navy); }

/* ---------- Rank Math FAQ block (scoped override) ----------
   Targets Rank Math's own front-end markup/classes (#rank-math-faq,
   .rank-math-list-item, .rank-math-question, .rank-math-answer) rather
   than a custom DOM, per the ExpatKit editorial style. The .ek-rm-faq__*
   classes are added client-side (see blog.js) purely as a progressive
   accordion enhancement on top of that existing markup. */

.ek-prose #rank-math-faq {
	margin-block-start: 1.4em;
	background: transparent;
	counter-reset: ek-faq;
}
.ek-prose #rank-math-faq .rank-math-list {
	display: block;
}
.ek-prose #rank-math-faq .rank-math-list-item {
	border-bottom: 1px solid var(--ek-line);
	counter-increment: ek-faq;
}
.ek-prose #rank-math-faq .rank-math-list-item:first-child {
	border-top: 1px solid var(--ek-line);
}
.ek-prose #rank-math-faq .rank-math-question {
	margin: 0;
	font-size: 1em;
	line-height: 1.35;
}

/* justify-content: flex-start (not space-between) + the icon's own
   margin-inline-start: auto below — with a generated ::before number as an
   extra flex child, space-between would spread three items across the row
   instead of grouping "number + question" on the left with the icon
   pinned right. min-height/padding are bumped from the plugin's original
   FAQ item density to give each row more breathing room now that there is
   only ever one FAQ block per article rather than a dense stacked list. */
.ek-prose #rank-math-faq .ek-rm-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: 20px 6px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: left;
	font-family: var(--ek-font-body);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--ek-ink);
	cursor: pointer;
}
/* Sized at 1.25rem (20px) bold specifically so the eyebrow gold (#9A7A12,
   ~4.1:1 on white) clears WCAG AA as "large text" (>=18.66px bold needs
   only 3:1) rather than falling just short of the 4.5:1 that size would
   otherwise require — the color itself stays the site's one locked
   eyebrow-safe gold, used identically in the TOC numbering and card
   category labels, so it isn't changed here. */
.ek-prose #rank-math-faq .ek-rm-faq__trigger::before {
	content: counter(ek-faq) '.';
	flex-shrink: 0;
	min-width: 1.6em;
	color: #9A7A12;
	font-weight: 700;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	transition: color 0.15s ease;
}
.ek-prose #rank-math-faq .ek-rm-faq__trigger:hover { color: var(--ek-navy); background: transparent; }
.ek-prose #rank-math-faq .ek-rm-faq__trigger:focus-visible {
	outline: 2px solid var(--ek-accent);
	outline-offset: -2px;
}
/* The number tracks hover and the open state the same way the TOC's own
   numbering tracks hover/active — consistent cross-component behavior
   instead of the number staying inert while the question text responds. */
.ek-prose #rank-math-faq .ek-rm-faq__trigger:hover::before,
.ek-prose #rank-math-faq .ek-rm-faq__trigger[aria-expanded="true"]::before {
	color: var(--ek-navy);
}
.ek-rm-faq__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-inline-start: auto;
	position: relative;
}
.ek-rm-faq__icon::before,
.ek-rm-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ek-navy);
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.ek-rm-faq__icon::before { width: 100%; height: 1.5px; }
.ek-rm-faq__icon::after { width: 1.5px; height: 100%; }
.ek-prose #rank-math-faq .ek-rm-faq__trigger[aria-expanded="true"] .ek-rm-faq__icon::after { opacity: 0; }

/* padding-left (~46px) lines the answer text up under the question text,
   past the number column above it, rather than sitting flush with the row
   edge — a deliberate, modest alignment, not a deep indent. Bottom padding
   bumped from 24 to 28px to match the taller trigger row above, so the gap
   before the next question doesn't read tighter than the gap the question
   itself now has. Capped at 68ch (matching the rest of .ek-prose) rather
   than left to fill the full ~770px article column — uncapped, the answer
   text ran meaningfully wider than every other paragraph on the page. */
.ek-prose #rank-math-faq .rank-math-answer {
	padding: 0 6px 28px 46px;
	font-family: var(--ek-font-body);
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--ek-ink);
	max-width: 68ch;
}
.ek-prose #rank-math-faq .rank-math-answer[hidden] { display: none; }
.ek-prose #rank-math-faq .rank-math-answer p { margin: 0; }
.ek-prose #rank-math-faq .rank-math-answer p + p { margin-block-start: 1em; }

@media (prefers-reduced-motion: reduce) {
	.ek-rm-faq__icon::before, .ek-rm-faq__icon::after { transition: none; }
}

/* ---------- Author box ---------- */

.ek-author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-block-start: 48px;
	padding-block-start: 32px;
	border-top: 1px solid var(--ek-line);
}
.ek-author__avatar { border-radius: 50%; flex-shrink: 0; }
.ek-author__label { font-size: 0.78rem; color: var(--ek-muted); margin: 0; }
.ek-author__name { font-weight: 600; margin: 2px 0 6px; }
.ek-author__name a { color: var(--ek-ink); text-decoration: none; }
.ek-author__name a:hover { color: var(--ek-accent); }
.ek-author__bio { font-size: 0.9rem; color: var(--ek-muted); line-height: 1.6; margin: 0; max-width: 60ch; }

/* ---------- Cards / grid ---------- */

.ek-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	padding-block: 48px;
}
@media (min-width: 640px) {
	.ek-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ek-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.ek-card { display: flex; flex-direction: column; }
.ek-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--ek-radius-lg);
	overflow: hidden;
	background: var(--ek-surface);
	margin-block-end: 18px;
}
.ek-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ek-card:hover .ek-card__media img { transform: scale(1.03); }
.ek-card__media-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--ek-navy), var(--ek-navy-lift));
}
.ek-card__cat {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #9A7A12;
	text-decoration: none;
	margin-block-end: 8px;
}
.ek-card__title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0 0 10px;
}
.ek-card__title a { color: var(--ek-ink); text-decoration: none; }
.ek-card__title a:hover { color: var(--ek-accent); }
.ek-card__excerpt { color: var(--ek-muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 12px; }
.ek-card__meta { font-size: 0.8rem; color: var(--ek-muted); margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.ek-card__media img { transition: none; }
}

/* ---------- Blog hero ---------- */

.ek-blog-hero {
	padding-block-start: 56px;
	padding-block-end: 32px;
	background: var(--ek-surface);
}
.ek-blog-hero__title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	color: var(--ek-ink);
	line-height: 1.1;
	font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
	margin: 0 0 16px;
}
.ek-blog-hero__desc {
	font-size: 1.1rem;
	color: var(--ek-muted);
	max-width: 56ch;
	line-height: 1.6;
	margin: 0 0 40px;
}

.ek-cat-nav__scroll {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 0 24px 4px;
	scrollbar-width: thin;
}
.ek-cat-nav__pill {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ek-navy);
	background: #fff;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius-pill);
	padding: 10px 20px;
	text-decoration: none;
}
.ek-cat-nav__pill:hover { border-color: var(--ek-accent); color: var(--ek-accent); }

/* ---------- Featured article ---------- */

.ek-featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-block: 48px;
	border-bottom: 1px solid var(--ek-line);
}
@media (min-width: 900px) {
	.ek-featured { grid-template-columns: 58% 1fr; gap: 48px; align-items: center; }
}
.ek-featured__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--ek-radius-lg);
	overflow: hidden;
	background: var(--ek-surface);
}
.ek-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-featured__title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.2;
	margin: 0 0 14px;
}
.ek-featured__title a { color: var(--ek-ink); text-decoration: none; }
.ek-featured__title a:hover { color: var(--ek-accent); }
.ek-featured__excerpt { color: var(--ek-muted); line-height: 1.65; margin: 0 0 16px; }
.ek-text-link {
	display: inline-block;
	margin-block-start: 16px;
	font-weight: 600;
	color: var(--ek-navy);
	text-decoration: none;
}
.ek-text-link:hover { color: var(--ek-accent); }

/* ---------- Related ---------- */

.ek-related { padding-block: 24px 16px; }
.ek-related__heading {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: 1.5rem;
	margin: 0;
}
.ek-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-block-start: 24px;
}
@media (min-width: 768px) {
	.ek-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Archive header ---------- */

.ek-archive-header { padding-block: 48px 8px; }
.ek-archive-title {
	font-family: var(--ek-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
	margin: 0 0 12px;
}
.ek-archive-desc { color: var(--ek-muted); max-width: 62ch; line-height: 1.6; }
.ek-empty { color: var(--ek-muted); padding-block: 48px; }

/* ---------- Pagination ---------- */

.ek-pagination { padding-block: 24px 56px; }
.ek-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.ek-pagination a, .ek-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--ek-radius-pill);
	border: 1px solid var(--ek-line);
	color: var(--ek-ink);
	text-decoration: none;
	font-size: 0.9rem;
}
.ek-pagination a:hover { border-color: var(--ek-navy); }
.ek-pagination span.current {
	background: var(--ek-navy);
	border-color: var(--ek-navy);
	color: #fff;
}

/* ---------- Mobile ---------- */

@media (max-width: 1023px) {
	.ek-container { padding-inline: 20px; }
}

/* ==========================================================================
   ExpatKit Guides hub (page 1400) — Phase B
   ========================================================================== */
.ek-guides {
	background: #FFFFFF;
}

/* ---------- Hero: compact, typographic, no stock imagery ---------- */
.ek-ghero {
	background: #0A1B33;
	color: #FAF7F1;
	padding: 56px 0 52px;
}
.ek-ghero__inner {
	display: flex;
	align-items: center;
	gap: 48px;
}
.ek-ghero__main {
	flex: 0 1 60%;
	min-width: 0;
}
.ek-ghero__eyebrow {
	margin: 0 0 12px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: #E5C158;
}
.ek-ghero__title {
	margin: 0 0 14px;
	font-family: Fraunces, Georgia, serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -1px;
	color: #FAF7F1;
}
.ek-ghero__intro {
	margin: 0 0 22px;
	font-family: Inter, sans-serif;
	font-size: 17.5px;
	line-height: 1.6;
	color: #CFDDEF;
	max-width: 52ch;
}
.ek-guides .ek-ghero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #E5C158;
	text-decoration: none;
}
.ek-guides .ek-ghero__cta:hover,
.ek-guides .ek-ghero__cta:focus-visible {
	color: #FAF7F1;
	text-decoration: underline;
	text-decoration-color: #C9A227;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.ek-guides .ek-ghero__cta:focus-visible {
	outline: 3px solid #E5C158;
	outline-offset: 4px;
	border-radius: 4px;
}
.ek-ghero__arrow {
	font-size: 17px;
	line-height: 1;
}
/* Right panel: an index of the three real pillars, not decoration */
.ek-ghero__index {
	flex: 0 1 40%;
	min-width: 0;
	padding-left: 40px;
	border-left: 1px solid rgba(250, 247, 241, 0.16);
}
.ek-ghero__pillars {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ek-ghero__pillar {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 12px 0;
}
.ek-ghero__pillar + .ek-ghero__pillar {
	border-top: 1px solid rgba(250, 247, 241, 0.12);
}
.ek-ghero__num {
	flex: none;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	color: #C9A227;
}
.ek-ghero__plabel {
	font-family: Fraunces, Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: #FAF7F1;
}

/* ---------- Start here: compact navigation cards ---------- */
.ek-start {
	background: #FAF7F1;
	padding: 56px 0;
}
.ek-start__title {
	margin: 0 0 28px;
	font-family: Fraunces, Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: #0A1B33;
}
.ek-start__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ek-start__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px;
	background: #FFFFFF;
	border: 1px solid #E7E2D7;
	border-radius: 16px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.ek-start__card:hover {
	border-color: rgba(201, 162, 39, 0.6);
	transform: translateY(-2px);
}
.ek-start__num {
	display: block;
	margin-bottom: 10px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	color: #9A7A12;
}
.ek-start__ctitle {
	margin: 0 0 8px;
	font-family: Fraunces, Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: #0A1B33;
}
.ek-start__desc {
	flex: 1 1 auto;
	margin: 0 0 16px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #5C6B7F;
}
.ek-guides .ek-start__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #0A1B33;
	text-decoration: none;
}
.ek-guides .ek-start__cta:hover,
.ek-guides .ek-start__cta:focus-visible {
	text-decoration: underline;
	text-decoration-color: #C9A227;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.ek-guides .ek-start__cta:focus-visible {
	outline: 3px solid #0A1B33;
	outline-offset: 4px;
	border-radius: 4px;
}
.ek-start__arrow,
.ek-gfeat__arrow,
.ek-lcard__arrow {
	transition: transform 0.2s ease;
}
.ek-start__card:hover .ek-start__arrow,
.ek-gfeat__card:hover .ek-gfeat__arrow {
	transform: translateX(3px);
}

/* ---------- Featured guide ---------- */
.ek-gfeat {
	background: #FFFFFF;
	padding: 60px 0;
}
.ek-gfeat__card {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	background: #FAF7F1;
	border: 1px solid #E7E2D7;
	border-radius: 18px;
}
.ek-gfeat__media {
	flex: 0 0 55%;
	min-width: 0;
	background: #E7E2D7;
}
.ek-gfeat__media .ek-gfeat__img,
.ek-gfeat__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	max-width: none;
	object-fit: cover;
}
.ek-gfeat__body {
	flex: 0 1 45%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px;
}
.ek-gfeat__eyebrow {
	margin: 0 0 10px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: #0A1B33;
}
.ek-gfeat__location {
	margin: 0 0 10px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #9A7A12;
}
.ek-gfeat__title {
	margin: 0 0 12px;
	font-family: Fraunces, Georgia, serif;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.5px;
	color: #0A1B33;
}
.ek-gfeat__desc {
	margin: 0 0 14px;
	font-family: Inter, sans-serif;
	font-size: 15.5px;
	line-height: 1.6;
	color: #5C6B7F;
}
.ek-gfeat__meta {
	margin: 0 0 18px;
	font-family: Inter, sans-serif;
	font-size: 13.5px;
	color: #5C6B7F;
}
.ek-gfeat__meta span {
	margin: 0 6px;
}
.ek-guides .ek-gfeat__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-family: Inter, sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	color: #0A1B33;
	text-decoration: none;
}
.ek-guides .ek-gfeat__cta:hover,
.ek-guides .ek-gfeat__cta:focus-visible {
	text-decoration: underline;
	text-decoration-color: #C9A227;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.ek-guides .ek-gfeat__cta:focus-visible {
	outline: 3px solid #0A1B33;
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---------- Latest guides (dormant until enough real content) ---------- */
.ek-latest {
	background: #FAF7F1;
	padding: 56px 0;
}
.ek-latest__title {
	margin: 0 0 24px;
	font-family: Fraunces, Georgia, serif;
	font-size: 28px;
	font-weight: 600;
	color: #0A1B33;
}
.ek-latest__grid {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ek-latest__grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ek-latest__grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ek-lcard {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E7E2D7;
	border-radius: 14px;
}
.ek-lcard__media {
	height: 172px;
	background: #E7E2D7;
}
.ek-lcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ek-lcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px;
}
.ek-lcard__eyebrow {
	margin: 0 0 8px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #9A7A12;
}
.ek-lcard__title {
	margin: 0 0 8px;
	font-family: Fraunces, Georgia, serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: #0A1B33;
}
.ek-lcard__desc {
	flex: 1 1 auto;
	margin: 0 0 12px;
	font-family: Inter, sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5C6B7F;
}
.ek-lcard__meta {
	margin: 0 0 12px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	color: #5C6B7F;
}
.ek-guides .ek-lcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: Inter, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: #0A1B33;
	text-decoration: none;
}
.ek-guides .ek-lcard__cta:hover {
	text-decoration: underline;
	text-decoration-color: #C9A227;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* ---------- Topic nav (dormant) ---------- */
.ek-topics {
	background: #FFFFFF;
	padding: 0 0 8px;
}
.ek-topics__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.ek-guides .ek-topics__pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	background: #FAF7F1;
	border: 1px solid #E7E2D7;
	border-radius: 999px;
	font-family: Inter, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: #0A1B33;
	text-decoration: none;
}

/* ---------- Compact checklist CTA (replaces the advisor CTA) ---------- */
.ek-guides__cta {
	background: #FFFFFF;
	padding: 20px 0 72px;
}
.ek-guides .ek-cta {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 34px 36px;
	background: #0A1B33;
	border-radius: 18px;
	text-align: left;
}
.ek-guides .ek-cta__main {
	flex: 0 1 56%;
	min-width: 0;
}
.ek-guides .ek-cta__action {
	flex: 0 1 44%;
	min-width: 0;
}
.ek-guides .ek-cta__eyebrow {
	margin: 0 0 10px;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: #E5C158;
}
.ek-guides .ek-cta__heading {
	margin: 0 0 10px;
	font-family: Fraunces, Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: #FAF7F1;
}
.ek-guides .ek-cta__copy {
	margin: 0 0 10px;
	font-family: Inter, sans-serif;
	font-size: 15.5px;
	line-height: 1.6;
	color: #CFDDEF;
}
.ek-guides .ek-cta__proof {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #E5C158;
}
.ek-guides .ek-cta .wpforms-field-label {
	font-family: Inter, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #FAF7F1;
}
.ek-guides .ek-cta input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: #FFFFFF;
	border: 1px solid #C9D2DE;
	border-radius: 10px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: #0A1B33;
}
.ek-guides .ek-cta input[type="email"]:focus-visible {
	outline: 3px solid #E5C158;
	outline-offset: 2px;
}
.ek-guides .ek-cta button[type="submit"] {
	width: 100%;
	min-height: 48px;
	padding: 12px 20px;
	background: #C9A227;
	border: 0;
	border-radius: 10px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #0A1B33;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.ek-guides .ek-cta button[type="submit"]:hover {
	background: #E5C158;
}
.ek-guides .ek-cta button[type="submit"]:focus-visible {
	outline: 3px solid #E5C158;
	outline-offset: 3px;
}
.ek-guides .ek-cta .ek-form-microcopy {
	margin: 10px 0 0;
	font-family: Inter, sans-serif;
	font-size: 12.5px;
	line-height: 1.5;
	color: #CFDDEF;
}
.ek-guides .ek-cta .wpforms-confirmation-container,
.ek-guides .ek-cta .wpforms-confirmation-container-full {
	background: #FAF7F1;
	border: 1px solid #C9A227;
	border-radius: 12px;
	color: #0A1B33;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.ek-ghero__inner {
		gap: 32px;
	}
	.ek-ghero__index {
		padding-left: 28px;
	}
	.ek-ghero__title {
		font-size: 34px;
	}
	.ek-start__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ek-gfeat__card {
		flex-direction: column;
	}
	.ek-gfeat__media {
		flex: none;
		width: 100%;
	}
	.ek-gfeat__media img {
		min-height: 0;
		height: 300px;
	}
	.ek-gfeat__body {
		flex: none;
		width: 100%;
	}
	.ek-guides .ek-cta {
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	.ek-guides .ek-cta__main,
	.ek-guides .ek-cta__action {
		flex: none;
		width: 100%;
	}
}
@media (max-width: 767px) {
	.ek-ghero {
		padding: 40px 0 36px;
	}
	.ek-ghero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}
	.ek-ghero__main,
	.ek-ghero__index {
		flex: none;
		width: 100%;
	}
	.ek-ghero__index {
		padding-left: 0;
		padding-top: 18px;
		border-left: 0;
		border-top: 1px solid rgba(250, 247, 241, 0.16);
	}
	.ek-ghero__title {
		font-size: 28px;
	}
	.ek-ghero__intro {
		font-size: 16px;
		margin-bottom: 16px;
	}
	.ek-ghero__pillar {
		padding: 9px 0;
	}
	.ek-ghero__plabel {
		font-size: 15.5px;
	}
	.ek-start,
	.ek-latest {
		padding: 40px 0;
	}
	.ek-start__title {
		font-size: 24px;
	}
	.ek-start__grid,
	.ek-latest__grid--two,
	.ek-latest__grid--three {
		grid-template-columns: minmax(0, 1fr);
	}
	.ek-gfeat {
		padding: 40px 0;
	}
	.ek-gfeat__media img {
		height: 200px;
	}
	.ek-gfeat__body {
		padding: 22px 20px 24px;
	}
	.ek-gfeat__title {
		font-size: 22px;
	}
	.ek-guides .ek-cta {
		padding: 26px 20px;
		border-radius: 16px;
	}
	.ek-guides .ek-cta__heading {
		font-size: 22px;
	}
	.ek-guides__cta {
		padding: 12px 0 52px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ek-start__card,
	.ek-start__arrow,
	.ek-gfeat__arrow,
	.ek-lcard__arrow,
	.ek-guides .ek-cta button[type="submit"] {
		transition: none;
	}
	.ek-start__card:hover {
		transform: none;
	}
}

/* ---------- Phase B QA corrections ---------- */
/* The featured media keeps a true 16:9 box instead of stretching to whatever
   height the text column happens to be (which cropped it to near-square at
   ~1024px). align-self keeps it centred against a taller body. */
.ek-gfeat__card {
	align-items: stretch;
}
.ek-gfeat__media {
	aspect-ratio: 16 / 9;
	align-self: center;
}
.ek-gfeat__media .ek-gfeat__img,
.ek-gfeat__media img {
	min-height: 0;
	height: 100%;
}
/* Trim the desktop hero to the 260-300px target. */
.ek-ghero {
	padding: 44px 0 40px;
}
.ek-ghero__title {
	font-size: 37px;
}
.ek-ghero__intro {
	margin-bottom: 18px;
	font-size: 17px;
}
.ek-ghero__pillar {
	padding: 10px 0;
}
@media (max-width: 767px) {
	/* On phones the pillar index sits immediately above the Start cards and
	   repeats them verbatim, which is what pushed the hero past 600px. Drop it
	   and let the Start section do that job. */
	.ek-ghero__index {
		display: none;
	}
	.ek-ghero {
		padding: 34px 0 32px;
	}
	.ek-ghero__inner {
		gap: 0;
	}
	.ek-ghero__title {
		font-size: 27px;
		margin-bottom: 12px;
	}
	.ek-ghero__intro {
		font-size: 15.5px;
		margin-bottom: 14px;
	}
	.ek-gfeat__media {
		aspect-ratio: auto;
	}
	.ek-gfeat__media img {
		height: 200px;
	}
}
@media (max-width: 1024px) and (min-width: 768px) {
	.ek-gfeat__media {
		aspect-ratio: 16 / 9;
		width: 100%;
	}
	.ek-gfeat__media img {
		height: 100%;
	}
}

/* Final hero tightening toward the 260-300px desktop / 280-320px mobile target. */
.ek-ghero {
	padding: 36px 0 34px;
}
.ek-ghero__title {
	margin-bottom: 12px;
	font-size: 35px;
	line-height: 1.1;
}
.ek-ghero__intro {
	margin-bottom: 16px;
	font-size: 16.5px;
	line-height: 1.55;
}
.ek-guides .ek-ghero__cta {
	min-height: 40px;
}
@media (max-width: 767px) {
	.ek-ghero {
		padding: 26px 0 24px;
	}
	.ek-ghero__eyebrow {
		margin-bottom: 9px;
	}
	.ek-ghero__title {
		font-size: 25px;
		line-height: 1.14;
		margin-bottom: 10px;
	}
	.ek-ghero__intro {
		font-size: 15px;
		line-height: 1.5;
		margin-bottom: 12px;
	}
	/* Keeps a 44px touch target while the visual box stays compact. */
	.ek-guides .ek-ghero__cta {
		min-height: 44px;
		margin-bottom: -4px;
	}
}

/* Accessibility fix: #9A7A12 is only 4.06:1 on white and 3.80:1 on cream, so it
   fails AA at these sizes. Gold is kept for navy grounds (9.94:1) and light
   grounds use Passport Navy, matching the Services sections. */
.ek-start__num {
	color: #0A1B33;
}
.ek-gfeat__location {
	color: #0A1B33;
}
.ek-lcard__eyebrow {
	color: #0A1B33;
}
/* A hairline gold rule keeps the accent without relying on gold text. */
.ek-start__num::after {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	margin-top: 7px;
	background: #C9A227;
	border-radius: 2px;
}