/**
 * Site chrome — RMD header + footer (spec chrome). Hand-written (NOT Tailwind),
 * so it needs no rebuild and doesn't depend on utilities being present in the
 * compiled main.css. Semantic classes only. Ported from the case-study design
 * (ink #041135, slight #596980, bord #E9EAF2, gradient CTA).
 *
 * Loaded only where the RMD chrome renders (case-study templates today).
 */

/* The chrome renders outside the .rmd-case scope, so give the case-study page
   body the design font (this class is only on case-study pages). */
.rmd-body {
	font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* A site-wide breadcrumb snippet (injected at wp_body_open, white text meant to
   float over the Elementor pages' DARK heroes) also lands on our case-study
   shell, where it shows as a faint grey chip over the white hero. It's not ours
   and it's wanted elsewhere — just hide it where our chrome renders. */
.rmd-body .breadcrumb-wrapper { display: none !important; }

/* Skip link (template-parts/site-header.php) — off-screen until focused, then
   pinned top-left. z-index must beat the sticky header (50) and the WP admin
   bar (99999) or the thing you tab to is hidden behind them. */
.rmd-skip-link {
	position: fixed;
	top: -100px;
	left: 8px;
	z-index: 2147483001;
	padding: 12px 20px;
	border-radius: 0 0 8px 8px;
	background: #041135;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: top .15s ease;
}
.rmd-skip-link:focus {
	top: 0;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: -4px;
}
body.admin-bar .rmd-skip-link:focus { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .rmd-skip-link:focus { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.rmd-skip-link { transition: none; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
/* Anchor jumps (#resultats, #methode, #contact — the in-page nav) must land
   BELOW the fixed header, not underneath it. The ayoub design carried
   scroll-padding-top: 88px; it was lost in the port — sections arrived flush
   to the viewport top with their eyebrow hidden behind the bar. */
html { scroll-padding-top: 96px; }

.rmd-site-header {
	position: static;
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #E9EAF2;
}
.rmd-site-header.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	transition: padding .2s ease, box-shadow .2s ease, background-color .2s ease;
}
/* Don't hide behind the WordPress admin bar for logged-in users. */
body.admin-bar .rmd-site-header.is-sticky { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .rmd-site-header.is-sticky { top: 46px; }
}
.rmd-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
}
@media (min-width: 768px) {
	.rmd-header-inner { padding: 20px 24px; }
}
/* Right-hand cluster: switcher + CTA (+ burger on mobile). Grouping keeps it
   pinned right whether or not the center nav is present (e.g. the archive). */
.rmd-header-actions { display: flex; align-items: center; gap: 12px; }
.rmd-site-header.is-sticky.scrolled {
	padding-top: .625rem;
	padding-bottom: .625rem;
	box-shadow: 0 2px 8px -4px rgba(4, 17, 53, .08);
	background: rgba(255, 255, 255, .98);
}
.rmd-site-header.is-sticky.scrolled .rmd-header-inner {
	padding-top: 0;
	padding-bottom: 0;
}

.rmd-logo { display: inline-flex; align-items: center; text-decoration: none; }
.rmd-logo-img { height: 30px; width: auto; display: block; }
.rmd-logo-text { font-weight: 700; font-size: 20px; color: #041135; }
@media (min-width: 768px) { .rmd-logo-img { height: 38px; } }

.rmd-nav { display: none; }
@media (min-width: 768px) { .rmd-nav { display: block; } }
.rmd-nav-list {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rmd-nav-list a {
	font-size: 14px;
	font-weight: 500;
	color: #596980;
	text-decoration: none;
	transition: color .15s ease;
}
.rmd-nav-list a:hover,
.rmd-nav-list .current-menu-item > a { color: #041135; }

/* Dropdown (submenu level, e.g. Services) — desktop. Opens on hover and on
   keyboard focus; the parent keeps a caret that flips while open. */
.rmd-nav-list > li { position: relative; }
.rmd-nav-list > li.menu-item-has-children > a {
	position: relative;
	padding-right: 14px;
}
.rmd-nav-list > li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease, margin-top .15s ease;
}
.rmd-nav-list > li.menu-item-has-children:hover > a::after {
	transform: rotate(225deg);
	margin-top: -1px;
}
/* Invisible bridge so the pointer can travel from the link to the panel. */
.rmd-nav-list > li.menu-item-has-children::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 12px;
}
.rmd-nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	min-width: 250px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(4, 17, 53, .08);
	border-radius: 12px;
	box-shadow: 0 12px 28px -8px rgba(4, 17, 53, .16);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 60;
}
.rmd-nav-list > li:hover > .sub-menu,
.rmd-nav-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.rmd-nav-list .sub-menu li { white-space: nowrap; }
.rmd-nav-list .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
}
.rmd-nav-list .sub-menu a:hover { background: #F4F6FA; color: #041135; }

/* Gradient CTA with the shine sweep (matches the case-study .btn-cta). */
.rmd-cta {
	display: none;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
	box-shadow: -4px 0 10px 0 rgba(0, 0, 0, .02), 4px 0 10px 0 rgba(0, 0, 0, .02), 0 4px 10px 0 rgba(0, 0, 0, .02);
}
@media (min-width: 768px) { .rmd-cta { display: inline-flex; } }
.rmd-cta:hover { opacity: .95; color: #fff; }
.rmd-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	animation: rmdCtaShine 3s ease-in-out infinite;
}
@keyframes rmdCtaShine {
	0% { left: -75%; }
	25% { left: 125%; }
	100% { left: 125%; }
}

.rmd-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: 1px solid #E9EAF2;
	border-radius: 8px;
	background: #fff;
	color: #041135;
	cursor: pointer;
}
@media (min-width: 768px) { .rmd-burger { display: none; } }

/* Mobile slide-in panel. z-index must beat third-party floating widgets
   (WhatsApp bubbles and consent banners ship 99999+), or they float OVER the
   open menu — seen on staging with the WhatsApp plugin sitting on the CTA. */
/* visibility, not transform alone. Sliding the panel off-screen left every link
   inside it in the TAB ORDER: under 768px a keyboard user tabbed from the burger
   straight into an invisible logo link, close button, the whole nav and the CTA.
   Those focusables also sat inside aria-hidden="true" (set by main.js), which is
   the aria-hidden-focus violation. `visibility` is what actually removes them.
   Transitioned like the desktop submenu above: going to hidden it holds `visible`
   for the full .3s so the slide-out still animates, and going to visible it flips
   at once so the slide-in is seen. */
.rmd-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: #fff;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .3s ease, visibility .3s;
}
.rmd-mobile-panel.open { transform: translateX(0); visibility: visible; }
@media (min-width: 768px) { .rmd-mobile-panel { display: none; } }
/* While the panel is open (html class set by main.js), the page behind it
   must not scroll — otherwise closing the menu lands the reader elsewhere. */
html.rmd-menu-open,
html.rmd-menu-open body { overflow: hidden; }
.rmd-mobile-inner { display: flex; flex-direction: column; height: 100%; padding: 24px; }
.rmd-mobile-top { display: flex; align-items: center; justify-content: space-between; }
.rmd-mobile-top .rmd-burger { display: inline-flex; width: 40px; height: 40px; }
.rmd-mobile-brand { font-weight: 700; font-size: 18px; color: #041135; }
.rmd-mobile-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}
.rmd-mobile-list a {
	display: block;
	border-bottom: 1px solid #E9EAF2;
	padding: 16px 0;
	font-size: 24px;
	font-weight: 500;
	color: #041135;
	text-decoration: none;
}
/* Mobile submenu: always expanded, indented under its parent; the separator
   moves from the parent link to the end of the sub-list. */
.rmd-mobile-list li.menu-item-has-children > a { border-bottom: 0; }
.rmd-mobile-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 12px 18px;
	border-bottom: 1px solid #E9EAF2;
}
.rmd-mobile-list .sub-menu a {
	border-bottom: 0;
	padding: 10px 0;
	font-size: 17px;
	font-weight: 500;
	color: #596980;
}
.rmd-mobile-cta {
	display: inline-flex;
	justify-content: center;
	margin-top: auto;
	height: 54px;
	padding: 0 32px;
}

/* Spacer reserves the fixed header's height (only output when sticky). */
.rmd-header-spacer { height: 78px; }
@media (min-width: 768px) { .rmd-header-spacer { height: 86px; } }

/* ── Footer ───────────────────────────────────────────────────────────────
   Five bands on navy: hero → proof → columns → directory → end bar.
   Components in template-parts/footer/, data from rmd_footer_context().        */
.rmd-site-footer { background: #041135; color: #fff; }
.rmd-site-footer::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, #D7045A 50%, #FC8831 100%); }
.rmd-site-footer a { color: inherit; text-decoration: none; }
.rmd-fd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.rmd-fd-lbl {
	font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255, 255, 255, .62); margin: 0;
}

/* 0 — expert band: face + pitch + phone on the left, headline figures right */
.rmd-fd-expert {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 28px 48px; padding: 44px 0 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rmd-fd-lead { display: flex; align-items: center; gap: 24px; }
.rmd-fd-face { flex: 0 0 auto; }
/* The red ring is the signature of this band on the live site — it is what makes
   the face read as a person to call, not a stock portrait. */
.rmd-fd-face-img {
	display: block; width: 104px; height: 104px; border-radius: 50%;
	object-fit: cover; object-position: top center;
	border: 3px solid #E4004D;
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
}
.rmd-fd-pitch {
	margin: 0; max-width: 340px;
	font-size: 14px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, .82);
}
.rmd-fd-phone {
	display: inline-flex; align-items: center; gap: 9px; margin: 14px 0 0;
	font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}
a.rmd-fd-phone:hover { color: #fff; text-decoration: underline; }
.rmd-fd-phone-ico { display: inline-flex; color: #E4004D; }
.rmd-fd-phone-ico svg { width: 19px; height: 19px; display: block; }

.rmd-fd-figures { display: flex; flex-wrap: wrap; gap: 24px 52px; }
.rmd-fd-figure { text-align: center; }
.rmd-fd-fig-n {
	display: block; font-size: clamp(28px, 3.4vw, 40px); font-weight: 500;
	letter-spacing: -.02em; line-height: 1.05; color: #fff;
	font-variant-numeric: tabular-nums;
}
.rmd-fd-fig-l { display: block; margin-top: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .62); }

@media (max-width: 720px) {
	.rmd-fd-expert { padding: 34px 0 30px; gap: 24px; }
	.rmd-fd-lead { gap: 16px; }
	.rmd-fd-face-img { width: 76px; height: 76px; border-width: 2px; }
	.rmd-fd-figures { gap: 18px 32px; width: 100%; justify-content: space-between; }
	.rmd-fd-figure { text-align: left; }
}

/* 1 — "book an appointment" band */
.rmd-fd-hero {
	position: relative; overflow: hidden; border-radius: 24px;
	margin-top: 48px; padding: 44px 48px;
	background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 26px 40px;
}
/* Two classes on purpose: .rmd-fd-hero > * (below) also matches the blob and
   would win the position with a single-class selector — the mockup's original
   .fd-hero .blob carried this same extra specificity. */
.rmd-fd-hero .rmd-fd-blob {
	position: absolute; top: -110px; right: -90px; width: 380px; height: 380px;
	border-radius: 50%; background: radial-gradient(circle, #E4004D 0, transparent 70%);
	opacity: .28; filter: blur(10px);
}
.rmd-fd-hero > * { position: relative; z-index: 1; }
/* Text column keeps the button under it; the figure is the band's other half. */
.rmd-fd-hero-main { max-width: 620px; }
.rmd-fd-kicker {
	font-size: 12px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255, 255, 255, .62); margin: 0;
}
.rmd-fd-hero h2 {
	font-size: clamp(24px, 3.2vw, 34px); font-weight: 500;
	letter-spacing: -.02em; line-height: 1.15; margin: 10px 0 0;
}
.rmd-fd-thin { font-weight: 300; color: rgba(255, 255, 255, .62); }
.rmd-fd-note {
	margin: 6px 0 0; max-width: 460px;
	font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .5);
}
.rmd-fd-cta {
	position: relative; overflow: hidden; display: inline-flex; align-items: center;
	gap: 10px; margin-top: 22px; border-radius: 10px; padding: 16px 34px;
	font-size: 15px; font-weight: 500; color: #fff;
	background-image: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
	box-shadow: 0 14px 34px -16px rgba(215, 4, 90, .6);
}
.rmd-fd-cta:hover { opacity: .95; color: #fff; }
.rmd-fd-cta::before {
	content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg); animation: rmdCtaShine 3s ease-in-out infinite;
}
@media (max-width: 720px) {
	.rmd-fd-hero { padding: 30px 24px; }
	.rmd-fd-cta { width: 100%; justify-content: center; }
}

/* 2 — partner badges (the revenue figure lives in the band above) */
.rmd-fd-proof {
	padding: 40px 0 36px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rmd-fd-rev { flex: 0 0 auto; }
.rmd-fd-num {
	font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -.03em;
	line-height: 1.05; margin: 8px 0 0; font-variant-numeric: tabular-nums;
	background-image: linear-gradient(155deg, #6478FF 40%, #FF2D6C 78%, #FC8831 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.rmd-fd-partners-h {
	margin: 0 0 26px; text-align: center;
	font-size: clamp(18px, 2.2vw, 24px); font-weight: 600; letter-spacing: -.01em; color: #fff;
}
/* The logos come on their own backgrounds (white, purple, dark), so they are NOT
   tinted or inverted — each badge keeps its official look, and the row simply
   gives them equal breathing room. */
.rmd-fd-badges {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 18px 26px;
}
.rmd-fd-badge {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; transition: transform .15s ease, opacity .15s ease;
}
a.rmd-fd-badge:hover { transform: translateY(-3px); opacity: .92; }
/* Height-locked, width free: the badges have wildly different aspect ratios
   (square Clutch hexagons next to wide Shopify lockups) and only a common
   height makes the row read as one set. */
.rmd-fd-badge-img {
	display: block; width: auto; height: 96px; max-width: 200px; object-fit: contain;
}
@media (max-width: 720px) {
	.rmd-fd-badges { gap: 14px 18px; }
	.rmd-fd-badge-img { height: 72px; }
}

/* 3 — the four columns */
.rmd-fd-main {
	display: grid; grid-template-columns: 1fr; gap: 40px 32px;
	padding: 46px 0 42px; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 640px) {
	.rmd-fd-main { grid-template-columns: repeat(2, 1fr); }
	.rmd-fd-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
	.rmd-fd-main { grid-template-columns: 1.4fr 1fr 1fr 1.45fr; }
	.rmd-fd-brand { grid-column: auto; }

	/* A site can drop columns it has nothing to say in (Réglages du site →
	   Pied de page → Blocs). Without these the four fixed tracks would stay and
	   leave a hole where the removed column was, so the count comes through as
	   data-cols and each case keeps the design's intent: a wider opening track
	   for the brand, a wider closing one for contact. */
	.rmd-fd-main[data-cols="3"] { grid-template-columns: 1.4fr 1fr 1.45fr; }
	.rmd-fd-main[data-cols="2"] { grid-template-columns: 1.4fr 1.45fr; }
	.rmd-fd-main[data-cols="1"] { grid-template-columns: minmax(0, 520px); }
}

/* Two columns at the tablet breakpoint only makes sense with something to pair;
   a lone column shouldn't sit in a half-width track. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.rmd-fd-main[data-cols="1"] { grid-template-columns: 1fr; }
}
.rmd-fd-logo { height: 34px; width: auto; display: block; }
.rmd-fd-blurb { margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .5); max-width: 320px; }
.rmd-fd-social { display: flex; gap: 10px; margin-top: 20px; }
.rmd-fd-social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75);
	transition: color .15s ease, border-color .15s ease, background-image .15s ease, transform .15s ease;
}
.rmd-fd-social a:hover {
	color: #fff; border-color: transparent; transform: translateY(-2px);
	background-image: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
}
.rmd-fd-social svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.rmd-fd-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rmd-fd-flags a {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid rgba(255, 255, 255, .14); border-radius: 9999px;
	padding: 6px 13px; font-size: 12.5px; color: rgba(255, 255, 255, .62);
	transition: color .15s ease, border-color .15s ease;
}
.rmd-fd-flags a:hover,
.rmd-fd-flags a[aria-current] { color: #fff; border-color: rgba(255, 255, 255, .35); }
.rmd-fd-flags .rmd-flag { width: 18px; height: 12.6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }

.rmd-fd-h {
	font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: #fff; margin: 0 0 18px;
}
.rmd-fd-h::after {
	content: ''; display: block; width: 28px; height: 2px; margin-top: 8px;
	border-radius: 2px; background: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
}
.rmd-fd-links { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.rmd-fd-links a { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .62); transition: color .15s ease; }
.rmd-fd-links a:hover { color: #fff; }

.rmd-fd-mail { display: inline-block; font-size: 14px; font-weight: 500; color: #fff; }
.rmd-fd-mail:hover { text-decoration: underline; }
/* An office card does two things: the card opens Google Maps, each phone number
   dials. An <a> cannot contain another <a>, so the map link is an overlay
   stretched over the card and the phone links are lifted above it. */
.rmd-fd-office {
	position: relative;
	display: block; margin-top: 12px; background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 13px 15px;
	transition: background-color .15s ease, border-color .15s ease;
}
.rmd-fd-office:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); }

/* The overlay. Sits under the phone links, so it takes every click the numbers
   don't. Because it is inset:0 its box IS the card, so its own focus ring already
   draws around the whole card — no :has() needed, and it works everywhere. */
.rmd-fd-office-map { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.rmd-fd-office-map:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 2px; }

.rmd-fd-city {
	display: flex; align-items: center; gap: 7px;
	font-size: 13.5px; font-weight: 600; color: #fff;
}
/* Reuses the switcher's inline flags (inc/locale.php), scaled to sit on the
   cap-height of the city name rather than tower over it. */
.rmd-fd-flag { display: inline-flex; flex: 0 0 auto; }
.rmd-fd-flag .rmd-flag {
	display: block; width: 17px; height: 12px; border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.rmd-fd-addr { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .5); margin-top: 4px; }

.rmd-fd-tel { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .75); margin-top: 3px; }
/* Above the overlay, so a tap on the number calls instead of opening the map. */
.rmd-fd-tel a { position: relative; z-index: 1; color: inherit; }
.rmd-fd-tel a:hover { color: #fff; text-decoration: underline; }
.rmd-fd-tel a:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 2px; border-radius: 3px; }
.rmd-fd-sep { padding: 0 3px; color: rgba(255, 255, 255, .38); }

/* 4 — the SEO directory. Native <details>: links stay in the DOM for Google
   and the accordions work with JavaScript disabled. */
.rmd-fd-dir { padding-top: 44px; padding-bottom: 10px; }
.rmd-fd-dir-lead { max-width: 640px; margin-bottom: 30px; }
.rmd-fd-dir-lead h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 10px 0 0; }
.rmd-fd-dir-lead p:not(.rmd-fd-lbl) { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, .5); margin: 8px 0 0; }
.rmd-fd-dir-tools { display: flex; justify-content: flex-end; margin-bottom: 4px; }

/* The control that opens every accordion wears the accordions' own mark: the
   same 16×2 gradient dash each row carries, and the same uppercase tracking as
   their titles. It reads as belonging to the section rather than as a stray
   pill. The gradient stays a hairline accent here — filled, it would compete
   with the CTA buttons, which are the only elements allowed to carry it solid. */
.rmd-fd-toggle-all {
	display: inline-flex; align-items: center; gap: 11px;
	padding: 9px 18px 9px 15px;
	font: inherit; font-size: 11.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: rgba(255, 255, 255, .68);
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 9999px;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .12s ease;
}

/* Both marks are pseudo-elements on purpose: main.js rewrites the button's
   textContent on every toggle, so any real child node would be wiped. */
.rmd-fd-toggle-all::before {
	content: ''; flex: 0 0 auto; width: 16px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
	transition: width .22s ease;
}
.rmd-fd-toggle-all::after {
	content: ''; flex: 0 0 auto; width: 6px; height: 6px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .22s ease;
}

.rmd-fd-toggle-all:hover {
	color: #fff;
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .28);
}
/* The dash extends on hover, echoing the nudge a row's summary makes. */
.rmd-fd-toggle-all:hover::before { width: 26px; }
.rmd-fd-toggle-all:active { transform: translateY(1px); }
.rmd-fd-toggle-all:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 2px; }

/* Expanded: the chevron points back up, so the button's state is legible
   without reading its label. aria-expanded is already maintained by main.js. */
.rmd-fd-toggle-all[aria-expanded="true"] { color: #fff; border-color: rgba(255, 255, 255, .22); }
.rmd-fd-toggle-all[aria-expanded="true"]::before { width: 26px; }
.rmd-fd-toggle-all[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
/* Rows are separated by a top rule only. The last row deliberately has NO
   bottom rule: the end bar's own border-top already closes the block, and the
   two together read as a stray double line 36px apart. */
.rmd-fd-acc { border-top: 1px solid rgba(255, 255, 255, .08); }
.rmd-fd-acc > summary {
	display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none;
	padding: 18px 4px; transition: padding-left .18s ease;
}
.rmd-fd-acc > summary::-webkit-details-marker { display: none; }
.rmd-fd-acc > summary:hover { padding-left: 10px; }
.rmd-fd-acc > summary::before {
	content: ''; flex: 0 0 auto; width: 16px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, #D7045A 50%, #FC8831 100%);
}
.rmd-fd-t {
	font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255, 255, 255, .75); transition: color .18s ease;
}
.rmd-fd-acc[open] .rmd-fd-t,
.rmd-fd-acc > summary:hover .rmd-fd-t { color: #fff; }
.rmd-fd-chev {
	margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .62);
	transition: transform .22s ease, color .18s ease, background-color .18s ease, border-color .18s ease;
}
.rmd-fd-acc > summary:hover .rmd-fd-chev { color: #fff; border-color: rgba(255, 255, 255, .35); }
.rmd-fd-acc[open] .rmd-fd-chev { transform: rotate(180deg); color: #fff; background: rgba(255, 255, 255, .08); }
.rmd-fd-chev svg { width: 13px; height: 13px; }
.rmd-fd-acc[open] > .rmd-fd-col { animation: rmdFdReveal .26s ease both; }
@keyframes rmdFdReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rmd-fd-col { columns: 2; column-gap: 32px; padding: 2px 0 22px; margin: 0; list-style: none; }
@media (min-width: 700px) { .rmd-fd-col { columns: 3; } }
@media (min-width: 1024px) { .rmd-fd-col { columns: 4; } }
.rmd-fd-col li { list-style: none; break-inside: avoid; margin-bottom: 9px; }
.rmd-fd-col a { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .5); transition: color .15s ease; }
.rmd-fd-col a:hover { color: #fff; }

/* 5 — end bar */
.rmd-fd-end {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 14px 24px; margin-top: 26px; padding: 22px 0 32px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.rmd-fd-copy { font-size: 12.5px; color: rgba(255, 255, 255, .5); margin: 0; }
.rmd-fd-copy b { color: rgba(255, 255, 255, .8); font-weight: 600; }
.rmd-fd-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rmd-fd-legal a { font-size: 12.5px; color: rgba(255, 255, 255, .5); transition: color .15s ease; }
.rmd-fd-legal a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.rmd-cta::before { animation: none; }
	.rmd-mobile-panel { transition: none; }
	.rmd-site-header.is-sticky { transition: none; }
	.rmd-fd-cta::before { animation: none; }
	.rmd-fd-social a:hover { transform: none; }
	.rmd-fd-acc[open] > .rmd-fd-col { animation: none; }
	.rmd-fd-acc > summary, .rmd-fd-chev { transition: none; }
	.rmd-fd-toggle-all,
	.rmd-fd-toggle-all::before,
	.rmd-fd-toggle-all::after { transition: none; }
}

/* ── Country / language switcher (rmd_locale_switcher, inc/locale.php) ── */
.rmd-locale-switch { position: relative; display: inline-block; }
.rmd-locale-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: transparent; color: #041135; border: none;
	padding: 8px 10px; border-radius: 999px; cursor: pointer;
	font: inherit; line-height: 1;
	transition: background .2s ease;
}
.rmd-locale-btn:hover { background: rgba(0, 0, 0, .05); }
.rmd-locale-current { display: inline-flex; align-items: center; line-height: 1; }
.rmd-locale-arrow { display: flex; align-items: center; transition: transform .2s ease; }
.rmd-locale-switch.open .rmd-locale-arrow { transform: rotate(180deg); }
.rmd-locale-menu {
	display: none; position: absolute; right: 0; top: 115%;
	background: #fff; border: 1px solid #E9EAF2; border-radius: 10px;
	min-width: 160px; box-shadow: 0 10px 20px rgba(4, 17, 53, .10);
	z-index: 60; overflow: hidden;
}
.rmd-locale-switch.open .rmd-locale-menu { display: block; }
.rmd-locale-menu a {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 16px; text-decoration: none; font-size: 14px; color: #041135;
	transition: background .15s ease;
}
.rmd-locale-menu a:hover { background: #F3F4F6; }
.rmd-locale-menu a.active { background: #E5E7EB; font-weight: 600; }
.rmd-locale-flag { display: inline-flex; align-items: center; line-height: 1; }
.rmd-locale-label { white-space: nowrap; }
/* Inline SVG flags — render on every OS (unlike flag emoji on Windows). */
.rmd-flag { display: block; width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(4, 17, 53, .10); }
.rmd-locale-current .rmd-flag { width: 22px; height: 15.4px; }
.rmd-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.rmd-locale-arrow, .rmd-locale-btn, .rmd-locale-menu a { transition: none; }
}