/* REC ART Weddings — redesign stylesheet
   Loaded via page-level Custom CSS @import (Elementor Theme Builder / Custom Code
   REST access is blocked for this account — see project memory). */

/* Hello Elementor's own reset.css sets border:1px solid #c36 on every
   real button/[type=button]/[type=submit] element — a bare specificity
   tie against any single-class override in this file, so every custom
   button component here needs this countered somewhere, not just the
   ones that happened to get noticed first (story-card photo buttons,
   FAQ rows, the popup's submit button, etc. all showed the same stray
   pink border). Every button in this design system supplies its own
   complete visual treatment, so resetting it site-wide up front is
   correct rather than patching one component class at a time. */
button,
[type="button"],
[type="submit"] {
	border: none;
}

:root {
	--recart-body-bg: hsla(215, 18%, 87%, 1); /* #D8DDE4 */
	--recart-paper: #E7E8EB;
	--recart-text-primary: #191B1F;
	--recart-text-secondary: #5B5F66;
	--recart-text-accent: #701524;
	--recart-text-accent-hover: #53101B;
	--recart-primitive-accent: #A5ADB9;
	--recart-action-default: #701524;
	--recart-action-hover: #53101B;
	--recart-text-on-action: #FFFFFF;
	--recart-radius-pill: 999px;
	--recart-radius-panel: 28px;
	--recart-radius-sm: 16px;
	--color-form-success: #285948;
	--color-form-error: #983440;
	--recart-popup-border-default: rgba(165, 173, 185, 0.4);
	/* Popup height model: fills the viewport minus these gutters (no fixed
	   812/852px cap) — see the #elementor-popup-modal-43 .dialog-widget-content
	   rule. --recart-popup-adminbar is 0 by default and only becomes
	   non-zero under body.admin-bar, where WP's toolbar (a real fixed-
	   position page element, not browser chrome) sits on top of the popup's
	   own full-viewport overlay and needs to be subtracted once so the card
	   doesn't end up partly tucked behind it. 32px/46px are WP core's own
	   stable, documented toolbar heights (46px only under 783px), not a
	   guess. */
	--recart-popup-gutter: 48px;
	--recart-popup-adminbar: 0px;
}
body.admin-bar {
	--recart-popup-adminbar: 32px;
}
@media (max-width: 782px) {
	body.admin-bar {
		--recart-popup-adminbar: 46px;
	}
}
@media (max-width: 767px) {
	:root {
		--recart-popup-gutter: 32px;
	}
}

/* No universal box-sizing:border-box reset exists anywhere else on this
   page — checked live: not in WordPress's own global-styles block, not in
   Elementor's inline per-section CSS, not in this file before now. Without
   it, any element here that combines width:100% with its own padding
   (border-box was only ever applied piecemeal, per-rule, where a bug had
   already been hit) adds that padding ON TOP of the width instead of
   inside it — a confirmed, standing cause of exactly the kind of
   horizontal mobile overflow being reported, not just a precaution. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Safety net against horizontal bleed — client-reported issue, mobile in
   particular. Doesn't fix whatever specific element might be forcing
   extra width on a given page (that's still worth finding and fixing
   directly if one turns up), but guarantees nothing can ever force a
   horizontal scrollbar or visible overflow past the viewport regardless
   of the cause. Safe globally, not just on mobile: this site doesn't rely
   on any intentional horizontal body/page scroll anywhere. */
html {
	overflow-x: hidden;
	max-width: 100%;
}
body {
	background-color: var(--recart-body-bg) !important;
	overflow-x: hidden;
	max-width: 100%;
}

/* ===== Reusable Primary CTA button — same pattern for the whole project ===== */
.recart-btn-primary {
	display: inline-flex;
	align-items: center;
	/* No-op at the component's natural content-hugging width (desktop,
	   everywhere else on the site) since there's no extra space to
	   distribute there — but without this, a full-width usage (mobile Hero)
	   had nothing pinning the icon to the end: with no justify-content set
	   at all (default flex-start), it just sat next to the label instead of
	   riding out to the far right edge. */
	justify-content: space-between;
	gap: 16px;
	background: var(--recart-action-default);
	border: none;
	border-radius: var(--recart-radius-pill);
	padding: 8px 8px 8px 24px;
	height: 48px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
	cursor: pointer;
}
.recart-btn-primary:hover,
.recart-btn-primary:focus-visible {
	background: var(--recart-action-hover);
}
.recart-btn-primary__label {
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 18.4px;
	line-height: 23px;
	color: var(--recart-text-on-action);
	perspective: 240px;
}
.recart-btn-primary__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	/* Belt-and-suspenders alongside .recart-btn-primary's justify-content:
	   space-between above — pins the icon to the end regardless of that
	   (e.g. if a future change adds a third flex child and space-between's
	   distribution stops meaning "exactly one at each end"). */
	margin-left: auto;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-paper);
	overflow: hidden;
}
.recart-btn-primary__icon img {
	position: absolute;
	width: 15px;
	height: 15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.26s ease, opacity 0.26s ease;
}
.recart-btn-primary__icon img.is-duplicate {
	transform: translate(calc(-50% - 33px), calc(-50% + 33px));
	opacity: 0;
}
.recart-btn-primary:hover .recart-btn-primary__icon img:not(.is-duplicate),
.recart-btn-primary:focus-visible .recart-btn-primary__icon img:not(.is-duplicate) {
	transform: translate(calc(-50% + 33px), calc(-50% - 33px));
	opacity: 0;
}
.recart-btn-primary:hover .recart-btn-primary__icon img.is-duplicate,
.recart-btn-primary:focus-visible .recart-btn-primary__icon img.is-duplicate {
	transform: translate(-50%, -50%);
	opacity: 1;
	transition: transform 0.3s ease 0.02s, opacity 0.3s ease 0.02s;
}
@media (prefers-reduced-motion: reduce) {
	.recart-btn-primary__icon img {
		transition: none !important;
	}
}

/* ===== Navbar ===== */
.recart-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--recart-paper);
}
.recart-navbar__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 111px;
	/* Matches the 80px side inset every other section uses (Hero, About,
	   Stories, etc.) — was 24px, which left the logo/Contact button
	   noticeably out of alignment with the content below. */
	padding: 0 80px;
}
.recart-navbar__logo img {
	display: block;
	width: 112px;
	height: auto;
}
.recart-navbar__menu {
	display: flex;
	align-items: center;
	gap: 32px;
}
.recart-navbar__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-primary);
	text-decoration: none;
}
.recart-navbar__link-underline {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--recart-text-accent);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.recart-navbar__link:hover .recart-navbar__link-underline,
.recart-navbar__link:focus-visible .recart-navbar__link-underline,
.recart-navbar__link.is-active .recart-navbar__link-underline {
	opacity: 1;
}
.recart-navbar__link.is-active {
	color: var(--recart-text-accent);
}
.recart-navbar__link:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 4px;
}
.recart-navbar__divider {
	height: 1px;
	width: 100%;
	background: var(--recart-primitive-accent);
}
.recart-navbar__actions {
	display: flex;
	align-items: center;
	gap: 16px;
}
.recart-navbar__mobile-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

/* The real [gtranslate] shortcode, rendered via two Elementor Shortcode
   widgets (desktop + mobile instances, siblings of the navbar's HTML
   widget) — pinned out of flow immediately so neither can push/widen the
   navbar bar even for a frame before the relocation script (inline in the
   navbar's own HTML widget) moves their real rendered output (GTranslate's
   own .gtranslate_wrapper) into the matching visible slot below. */
.recart-gtranslate-source,
.recart-gtranslate-source-mobile {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* GTranslate widget_look is now "flags_code" (flat flag + language-code
   row, no dropdown) — see the two [gtranslate] Shortcode widgets tagged
   .recart-gtranslate-source / .recart-gtranslate-source-mobile. Their own
   injected a.glink/img rules are mostly fine as-is; the span (text code)
   rule needs the extra .notranslate qualifier below purely to out-specify
   their own scoped `.gt_container-xxx a.glink span` rule, which otherwise
   wins the cascade since their <style> tag is appended to <head> (and
   therefore sits later in source order) than this stylesheet. */
.recart-gtranslate-slot {
	display: flex;
	align-items: center;
}
/* The actual flag+code links sit inside .gtranslate_wrapper (the plugin's
   own div, relocated here whole via appendChild) — a single child of the
   slot above, so display:flex up there alone never touched them: they're
   plain inline <a> tags joined by literal spaces, which wrap like text the
   moment they run out of room (confirmed happening at 416px, a common
   Android width, with "UK" dropping to its own line). flex-wrap:nowrap on
   the actual parent is what forces them to stay one row. */
.recart-gtranslate-slot .gtranslate_wrapper {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 14px;
}
.recart-gtranslate-slot a.glink.notranslate img {
	width: 22px;
	height: 22px;
}
.recart-gtranslate-slot a.glink.notranslate span {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	color: var(--recart-text-primary);
	margin: 0 0 0 6px;
}
@media (max-width: 1024px) {
	/* Tighter than desktop so the compact mobile bar (logo + flags + menu
	   toggle, all in one row) has real breathing room instead of just
	   barely not-wrapping. */
	.recart-gtranslate-slot .gtranslate_wrapper {
		gap: 10px;
	}
	.recart-gtranslate-slot a.glink.notranslate img {
		width: 18px;
		height: 18px;
	}
	.recart-gtranslate-slot a.glink.notranslate span {
		font-size: 12px;
		margin-left: 4px;
	}
}
@media (max-width: 359px) {
	/* Below this even the shrunk version is too tight alongside the logo
	   and toggle — drop to flags-only in the collapsed bar specifically
	   (same fallback already used on the Contact page's compact header);
	   the mobile panel's own slot has plenty of room and keeps the full
	   flag+code treatment. */
	.recart-navbar__bar .recart-gtranslate-slot a.glink.notranslate span {
		display: none;
	}
}

/* Mobile menu toggle (hidden on desktop) — icon only, no "Menu"/"Close"
   label text; both label spans stay permanently hidden (see the shared
   display:none rule below) rather than toggling with the open state. */
.recart-navbar__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid var(--recart-primitive-accent);
	border-radius: var(--recart-radius-pill);
	background: transparent;
	cursor: pointer;
}
.recart-navbar__menu-toggle .is-menu-label,
.recart-navbar__menu-toggle .is-close-label {
	display: none;
}
.recart-navbar__menu-toggle img {
	width: 28px;
	height: 28px;
}
.recart-navbar__menu-toggle .is-close-icon {
	display: none;
}
.recart-navbar.is-open .recart-navbar__menu-toggle .is-menu-icon {
	display: none;
}
.recart-navbar.is-open .recart-navbar__menu-toggle .is-close-icon {
	display: block;
}

/* Expanded mobile panel */
.recart-navbar__mobile-panel {
	display: none;
	flex-direction: column;
	gap: 24px;
	padding: 24px 24px 32px;
	width: 100%;
	box-sizing: border-box;
}
.recart-navbar.is-open .recart-navbar__mobile-panel {
	display: flex;
}
.recart-navbar__mobile-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.recart-navbar__mobile-link {
	display: flex;
	align-items: center;
	height: 56px;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 36.8px;
	line-height: 43.7px;
	color: var(--recart-text-primary);
	text-decoration: none;
}
.recart-navbar__mobile-link.is-active {
	color: var(--recart-text-accent);
}
.recart-navbar__mobile-cta {
	width: 100%;
}
/* Reuses .recart-contact-cta__button wholesale (the Hero's own outlined
   secondary-CTA component — same layout, icon treatment, hover-exit-arrow
   animation and split-flap label for free) deliberately so it reads as a
   different style from the filled .recart-btn-primary Contact button
   above it. That component's own colours (white label, gray border) were
   tuned for the dark Hero background it was built for — this panel is
   the light paper background, so just the color/alignment-dependent
   properties are overridden here for legibility; everything else about
   the component is untouched.
   The "a." element qualifier on the width/border rule isn't decorative —
   .recart-contact-cta__button's own width:280px/border rule (further down
   this file) has the exact same specificity as a bare .recart-navbar__
   mobile-whatsapp class selector, so without it source order alone
   decided the winner and silently kept this at 280px with a grey border
   instead of matching Contact's full width and this component's own
   burgundy brand colour — confirmed live, not just a theoretical risk. */
a.recart-navbar__mobile-whatsapp {
	width: 100%;
	/* Also overriding height/padding — the base rule's 56px/0 8px was
	   tuned for the Hero's own usage; Contact right above this uses
	   .recart-btn-primary's 48px/8px 8px 8px 24px, so without matching
	   both values exactly the two buttons were visibly different heights
	   and "Book an instant call" started well left of where "Contact"
	   does despite the earlier text-align fix. */
	height: 48px;
	padding: 8px 8px 8px 24px;
	border-color: var(--recart-action-default);
}
.recart-navbar__mobile-whatsapp .recart-contact-cta__button-label {
	color: var(--recart-text-primary);
	/* Also overriding the base rule's text-align:center here — Contact's
	   own label (.recart-btn-primary__label) has no such centering, it
	   just starts right after the button's padding, so without this the
	   two buttons' text didn't actually line up despite matching widths. */
	text-align: left;
}
.recart-navbar__mobile-secondary {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-primary);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.5px;
}
.recart-navbar__mobile-social {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* ===== Hero ===== */
.recart-hero {
	/* Same value as --recart-text-primary — not reusing that token here
	   since its meaning (ink/text colour) is unrelated to this one
	   (image-load fallback/letterbox colour); just a literal to avoid
	   introducing a new token for one rule. */
	background: #191B1F;
}
.recart-hero__panel {
	position: relative;
	overflow: hidden;
	display: flex;
	/* Client change: only the bottom corners are rounded now, top corners
	   are square — everything inside (photo, overlays) clips to this same
	   outline since it's the overflow:hidden boundary. */
	border-radius: 0 0 var(--recart-radius-panel) var(--recart-radius-panel);
	min-height: 100vh;
}
/* Full-section photo backdrop, not a pinned-right card anymore. */
.recart-hero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.recart-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	display: block;
	/* WebKit's default resampling can look soft on a photo that's
	   continuously CSS-scaled (the Ken-Burns drift here, the GSAP zoom on
	   .recart-hero__frame below) — this tells it to favour a sharper
	   algorithm. No effect outside WebKit; other engines just ignore it. */
	image-rendering: -webkit-optimize-contrast;
}
/* Mobile/tablet keep the original slow single-image Ken-Burns drift
   exactly as before — the GSAP rotation below only ever runs at the
   desktop breakpoint (see .recart-hero__rotation), so this stays scoped
   here rather than applying unconditionally like it used to. */
@media (max-width: 1024px) {
	.recart-hero__photo img {
		animation: recart-hero-zoom 4s ease-out forwards;
	}
}
@keyframes recart-hero-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.recart-hero__photo img {
		animation: none;
		transform: scale(1);
	}
}
/* ----- Desktop hero rotation (REC ART / desktop hero frame rotation) -----
   .recart-hero__rotation is the parallax transform target (moved here from
   the single <img> it used to be, now that multiple frames stack inside
   it) — see initHeroParallax in app.js. Each .recart-hero__frame owns only
   its own GSAP opacity/scale/transform-origin, never the parallax x/y.
   Frame 1's <img> (inside the permanent mobile-source <picture>) is the
   only frame present in markup; frames 2–6 are created by JS, desktop
   only, so mobile never requests them. scale(1.22) here is the exact
   resting value initHeroRotation's GSAP timeline also starts every frame
   from — kept in both places so there's never a visible jump between the
   CSS default and the first animated frame. */
.recart-hero__rotation {
	position: absolute;
	inset: 0;
	/* Without an explicit z-index this stays z-index:auto, which does NOT
	   form its own stacking context — the frames' own inline z-index
	   (set by JS, 2/3/4/... as each one becomes incoming) would then be
	   compared directly against this element's SIBLINGS instead of being
	   contained here, letting a frame paint over .recart-hero__overlay
	   (z-index:1) once any value passes 1. This value just needs to be a
	   real number, not auto, to contain them — 0 keeps it below the
	   overlay the same way it always was. */
	z-index: 0;
}
.recart-hero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	display: block;
	opacity: 0;
	/* Not an animated zoom — app.js only ever tweens this element's
	   opacity now. A small, fixed, never-changing overscan still has to
	   stay here though: the mouse-parallax in initHeroParallax shifts
	   .recart-hero__rotation (every frame's shared parent) by up to 14px,
	   and without this buffer that shift would expose a dark edge at
	   .recart-hero__panel's own clipped boundary — preserving that
	   parallax exactly as it already works is a separate, still-standing
	   requirement from the brief that first added this rotation. */
	transform: scale(1.05);
	z-index: 0;
}
.recart-hero__frame.is-active {
	opacity: 1;
}
@media (max-width: 1024px) {
	/* The rotation system never initialises below the desktop breakpoint
	   (gated in JS) — reset back to plain static layout so the existing
	   mobile <source> swap and its own object-position/animation rules
	   above behave exactly as before. */
	.recart-hero__rotation {
		position: static;
	}
	.recart-hero__frame {
		position: static;
		opacity: 1;
		transform: none;
	}
}
.recart-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.recart-hero__overlay--horizontal {
	background: linear-gradient(
		90deg,
		rgba(25, 27, 31, 0.82) 0%,
		rgba(25, 27, 31, 0.67) 40%,
		rgba(25, 27, 31, 0.28) 72%,
		rgba(25, 27, 31, 0.12) 100%
	);
}
.recart-hero__overlay--depth {
	background: linear-gradient(
		180deg,
		rgba(25, 27, 31, 0) 0%,
		rgba(25, 27, 31, 0) 58%,
		rgba(25, 27, 31, 0.48) 100%
	);
}
.recart-hero__text {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 96px 80px 64px;
}
.recart-hero__main {
	flex: 1 0 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	max-width: 760px;
}
.recart-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.recart-hero__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 87.4px;
	line-height: 94.3px;
	letter-spacing: 0;
	color: var(--recart-text-on-action);
	margin: 0;
}
.recart-hero__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 620px;
}
.recart-hero__description {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-on-action);
	margin: 0;
}
.recart-hero__statement {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 18.4px;
	line-height: 27.6px;
	color: var(--recart-text-on-action);
	margin: 0;
}
.recart-hero__actions {
	display: flex;
	align-items: center;
	gap: 24px;
}
/* Hero-specific height on top of the shared .recart-btn-primary component —
   56px to row-align with the outlined button beside it (other usages:
   navbar, services, FAQ, stay at their own 48px). Deliberately NOT forcing
   a fixed width: .recart-btn-primary's layout is justify-content:
   space-between, so a fixed width here stretches the gap between label and
   icon wider than the component's normal, content-hugging look everywhere
   else on the site — confirmed as unwanted against the "Let's talk"
   reference. Width stays natural/content-driven, matching that. */
.recart-hero__primary {
	height: 56px;
}
@media (min-width: 1025px) {
	/* The shared .recart-contact-cta__button base is width:280px (tuned for
	   its mobile full-width nav usage) — element-qualified to a.* so this
	   reliably beats that base rule regardless of file order, same reason
	   as other equal-specificity overrides in this file. Mobile already
	   gets its own width:100% from the stacked-actions rule below, so this
	   is scoped to desktop only. min-width matches .recart-hero__primary's
	   own current rendered width ("View our work") — plain max-content on
	   its own left this one looking noticeably narrower/unbalanced next to
	   it when its own label is shorter; min-width is a floor only, so it
	   still grows past that if its own label ever needs more. */
	a.recart-hero__secondary {
		width: max-content;
		min-width: 208px;
	}
}
.recart-hero__geo {
	position: relative;
	z-index: 2;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-on-action);
	opacity: 0.82;
	margin: 0;
	max-width: 760px;
}

/* ===== About ===== */
.recart-about {
	background: var(--recart-paper);
	display: flex;
	align-items: flex-start;
	gap: 64px;
	padding: 112px 80px;
}
.recart-about__eyebrow {
	flex: 0 0 320px;
	max-width: 320px;
	padding-top: 16px;
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}
.recart-about__statement {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 896px;
}
.recart-about__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-primary);
	margin: 0;
	display: flex;
	flex-direction: column;
}
.recart-about__title-line--italic {
	font-style: italic;
	color: var(--recart-text-accent);
}
/* Desktop: "A story worth keeping." on one line. Mobile: Figma specifies a
   3-line total heading ("A story worth" / "keeping."), so this break is
   switched on only below the same 1024px breakpoint everything else here
   uses. */
.recart-about__break {
	display: none;
}
.recart-about__description {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
	max-width: 520px;
	margin: 0;
}

/* Reusable quiet text link — same pattern as the hero's secondary CTA */
.recart-link-secondary {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-primary);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
}
.recart-link-secondary:hover,
.recart-link-secondary:focus-visible {
	color: var(--recart-text-accent);
}

/* ===== Selected stories ===== */
/* Rebuilt per Figma node 2126:6489 — independent per-story Swiper
   carousels (cards) + node 2126:6512 (lightbox). Card markup below is
   rendered entirely from app.js's STORIES data array (see "Stories
   carousels" there) rather than hand-authored per card, so the DOM, the
   counter, the progress marks and nav-hiding for single-photo stories all
   just follow whatever's in that array — adding a photo or a story is a
   data change, not a markup change. */
.recart-stories {
	background: var(--recart-paper);
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 32px 80px 80px;
}
.recart-stories__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.recart-stories__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-stories__subtitle {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 16.1px;
	line-height: 24px;
	color: var(--recart-text-secondary);
	max-width: 360px;
	flex-shrink: 0;
}
.recart-stories__subtitle p {
	margin: 0;
}

/* ----- Grid + card shell ----- */
/* CSS Grid, not flex — a flex row with flex:1 0 0 and no wrap wouldn't
   reflow once "See all stories" reveals a 4th/5th card into a "3 cards
   row 1 + 2 cards row 2" layout, it'd just keep cramming every card into
   one ever-narrower row. A fixed 3-column grid wraps on its own, keeps
   each card's own column width identical before and after reveal, and
   leaves a partial final row's empty cell(s) empty rather than stretching
   the last cards to fill them. */
.recart-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 48px;
	align-items: start;
}
.recart-story-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
/* "See all stories" reveal — cards past the first 3 start hidden (JS adds
   this class) and fade/rise in together, same timing/easing idiom as the
   FAQ's own extra-questions reveal above. */
.recart-story-card--hidden {
	display: none;
}
.recart-story-card--hidden.is-revealed {
	display: flex;
	opacity: 0;
	transform: translateY(8px);
	animation: recart-faq-reveal 0.4s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
	.recart-story-card--hidden.is-revealed {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ----- Carousel (photo + controls row) ----- */
.recart-story-card__carousel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.recart-story-card__photo-btn {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--recart-radius-panel);
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: none;
	background: var(--recart-primitive-accent);
	cursor: pointer;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.recart-story-card__photo-btn:focus-visible {
	outline: 2px solid var(--recart-action-default);
	outline-offset: 2px;
}
.recart-story-card__swiper {
	/* !important is load-bearing: Swiper.js adds its own .swiper class to
	   this same element, and its bundled CSS's `.swiper{position:relative}`
	   ties this rule's specificity exactly — since that CSS is injected via
	   a CDN <link> at runtime, it always lands after this stylesheet and
	   wins the tie, silently turning this back into a relative, in-flow
	   box where inset:0 does nothing. Without the forced absolute
	   positioning the whole swiper (and the photo inside it) collapses to
	   its own content height instead of filling the card. */
	position: absolute !important;
	inset: 0;
}
.recart-story-card__swiper .swiper-wrapper {
	height: 100%;
	/* Swiper's own bundled CSS (loaded from the CDN at runtime, so it
	   always lands after this stylesheet regardless of enqueue order) sets
	   align-items:flex-start on .swiper-wrapper, which stops slides from
	   stretching to the wrapper's full height — each slide then sizes
	   itself off its own content instead, and since the <img> inside is
	   height:100% of THAT (now content-sized) slide, a square source photo
	   rendered as a square instead of filling the card's 4:5 box, exposing
	   the button's own background in the gap. stretch is flexbox's own
	   default, just re-asserted here since Swiper overrides it. */
	align-items: stretch;
}
.recart-story-card__swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.recart-story-card__expand {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-paper);
	color: var(--recart-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease, color 0.18s ease;
	/* Decorative only (aria-hidden, sits inside the single clickable
	   photo-btn) — pointer-events:none so it never steals the mousedown/
	   touchstart that starts a Swiper drag gesture from underneath it. */
	pointer-events: none;
}
.recart-story-card__expand svg {
	width: 20px;
	height: 20px;
}
.recart-story-card__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 44px;
}
.recart-story-card__counter {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-secondary);
	white-space: nowrap;
	margin: 0;
}
.recart-story-card__marks {
	display: flex;
	align-items: center;
	gap: 8px;
}
.recart-story-mark {
	width: 12px;
	height: 2px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-primitive-accent);
	padding: 0;
	border: none;
	display: block;
}
.recart-story-mark.swiper-pagination-bullet-active {
	background: var(--recart-action-default);
}
.recart-story-card__nav {
	display: flex;
	gap: 8px;
}
.recart-story-card__nav-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-paper);
	color: var(--recart-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.recart-story-card__nav-btn svg {
	width: 20px;
	height: 20px;
}
.recart-story-card__nav-btn.swiper-button-disabled {
	opacity: 0.4;
	pointer-events: none;
}
@media (hover: hover) {
	/* .recart-story-card__expand has pointer-events:none (see above) so it
	   can never match its own :hover — triggered instead by hovering the
	   single clickable photo-btn it sits inside, which is what's actually
	   receiving the pointer. */
	.recart-story-card__photo-btn:hover .recart-story-card__expand,
	.recart-story-card__nav-btn:hover,
	.recart-lightbox__close:hover,
	.recart-lightbox__nav-btn:hover {
		background: var(--recart-action-default);
		color: var(--recart-text-on-action);
	}
}
.recart-story-card__expand:focus-visible,
.recart-story-card__nav-btn:focus-visible,
.recart-lightbox__close:focus-visible,
.recart-lightbox__nav-btn:focus-visible {
	outline: 2px solid var(--recart-action-default);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.recart-story-card__expand,
	.recart-story-card__nav-btn,
	.recart-lightbox__close,
	.recart-lightbox__nav-btn {
		transition: none !important;
	}
}

/* ----- Story information ----- */
.recart-story-card__info {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.recart-story-card__eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-action-default);
	text-transform: uppercase;
	margin: 0;
}
.recart-story-card__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 36.8px;
	line-height: 43.7px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-story-card__description {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 16.1px;
	line-height: 24px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-story-card__location {
	display: flex;
	align-items: center;
	gap: 8px;
}
.recart-story-card__location img {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.recart-story-card__location span {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-secondary);
}

/* ----- "See all stories" reveal button ----- */
.recart-stories__reveal-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Reuses .recart-faq__more / .recart-faq-ghost-cta* wholesale (same
   markup, same classes) for the button itself — identical look, hover
   exit-arrow animation and split-flap label for free. This wrapper only
   adds the stories-specific "hidden once <=3 stories or none left to
   reveal" + mobile full-width behaviour on top. */
.recart-stories__reveal-wrap .recart-faq__more {
	padding: 0;
}

/* ===== Services ===== */
.recart-services {
	background: var(--recart-paper);
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 32px 80px 80px;
}
.recart-services__panel {
	background: var(--recart-text-primary);
	border-radius: var(--recart-radius-panel);
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 56px;
	box-sizing: border-box;
	width: 100%;
}
.recart-services__intro {
	display: flex;
	align-items: center;
	gap: 48px;
}
.recart-services__heading {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;
	max-width: 704px;
}
.recart-services__eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 1.6px;
	color: var(--recart-text-on-action);
	margin: 0;
}
.recart-services__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-on-action);
	margin: 0;
	display: flex;
	flex-direction: column;
}
.recart-services__body {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-on-action);
	margin: 0;
	flex: 0 0 400px;
	max-width: 400px;
}
.recart-services__list {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.recart-service-row {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.recart-service-row__divider {
	height: 1px;
	width: 100%;
	background: var(--recart-text-on-action);
	opacity: 0.2;
}
.recart-service-row__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 40px 0;
}
.recart-service-row__heading {
	display: flex;
	align-items: center;
	gap: 32px;
	color: var(--recart-text-on-action);
	flex: 0 0 500px;
}
.recart-service-row__number {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	margin: 0;
	flex-shrink: 0;
}
.recart-service-row__name {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 46px;
	line-height: 50.6px;
	margin: 0;
}
.recart-service-row__description {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-on-action);
	margin: 0;
	flex: 0 0 400px;
	max-width: 400px;
}
.recart-service-row__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-paper);
	flex-shrink: 0;
	text-decoration: none;
}
.recart-service-row__arrow img {
	width: 20px;
	height: 20px;
}
.recart-services__contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.recart-services__contact-text {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
	margin: 0;
	max-width: 704px;
}

/* ===== Experience (timeline) ===== */
.recart-experience {
	background: var(--recart-paper);
	position: relative;
	padding: 0 80px;
	box-sizing: border-box;
	/* desktop only — pinned full-height while the step-by-step stagger
	   plays (see initTimelineStagger in app.js); overridden back to auto
	   on mobile below, which isn't pinned. */
	min-height: 100vh;
}
.recart-experience__center {
	/* Anchored to the exact center coordinate of the section rather than
	   flex justify-content: GSAP's pin wrapper manages this element's
	   height/position while pinned, which fought the flex-centering
	   approach (content stayed pinned to the top with empty space left
	   below instead of centering). Absolute + transform centers on both
	   axes regardless of how the pin wrapper sizes things. */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 1280px;
	display: flex;
	flex-direction: column;
	gap: 64px;
	box-sizing: border-box;
	padding: 112px 0;
}
.recart-experience__intro {
	display: flex;
	align-items: center;
	gap: 80px;
}
.recart-experience__heading {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex: 1 1 auto;
	max-width: 832px;
}
.recart-experience__eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 1.6px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-experience__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-primary);
	margin: 0;
	display: flex;
	flex-direction: column;
}
.recart-experience__body {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
	margin: 0;
	flex: 0 0 368px;
	max-width: 368px;
}

/* Timeline: horizontal row of 5 steps on desktop, each owning its own
   connector segment so they visually join into one continuous rail. */
.recart-timeline {
	display: flex;
	align-items: flex-start;
	width: 100%;
}
.recart-timeline-step {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 256px;
	flex-shrink: 0;
}
.recart-timeline-step__number {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 46px;
	line-height: 55.2px;
	letter-spacing: -1px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-timeline-step__rail {
	position: relative;
	height: 8px;
	width: 100%;
}
.recart-timeline-step__rail-track {
	position: absolute;
	inset: 0;
	left: 8px;
	top: 50%;
	height: 1px;
	transform: translateY(-50%);
	background: var(--recart-primitive-accent);
	opacity: 0.4;
}
.recart-timeline-step__rail-fill {
	position: absolute;
	left: 8px;
	top: 50%;
	height: 1px;
	width: calc(100% - 8px);
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	background: var(--recart-text-accent);
}
.recart-timeline-step__dot {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-text-accent);
}
.recart-timeline-step__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.recart-timeline-step__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 36.8px;
	line-height: 43.7px;
	color: var(--recart-text-accent);
	margin: 0;
	min-height: 88px;
}
.recart-timeline-step__description {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
	margin: 0;
}

/* ===== Reviews (Kind words) ===== */
.recart-reviews {
	/* Bridges the sitewide body backdrop back to the hero's cream tone —
	   an echo that bookends the page. */
	background: linear-gradient(180deg, var(--recart-body-bg) 0%, #EBE1D6 100%);
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 80px 0;
}
.recart-reviews__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	padding: 0 80px;
}
.recart-reviews__eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 1.6px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-reviews__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-reviews__loop {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 0 24px;
	overflow: hidden;
	width: 100%;
}
.recart-reviews__row {
	width: 100%;
	overflow: hidden;
}
.recart-reviews__track {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: max-content;
	will-change: transform;
}
.recart-reviews__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 112px;
	z-index: 2;
	pointer-events: none;
}
.recart-reviews__fade--left {
	left: 0;
	background: linear-gradient(90deg, var(--recart-paper) 0%, rgba(231, 232, 235, 0) 100%);
}
.recart-reviews__fade--right {
	right: 0;
	background: linear-gradient(270deg, var(--recart-paper) 0%, rgba(231, 232, 235, 0) 100%);
}

.recart-review-card {
	position: relative;
	width: 400px;
	height: 280px;
	flex-shrink: 0;
}
.recart-review-card__surface {
	background: #FFFFFF;
	border-radius: var(--recart-radius-panel);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	width: 100%;
	height: 260px;
	filter: drop-shadow(0px 8px 24px rgba(25, 27, 31, 0.043));
}
/* Real exported "Cloud / Soft tail" vector — not a CSS approximation */
.recart-review-card__tail {
	position: absolute;
	left: 40px;
	top: 258px;
	width: 26px;
	height: 16px;
}
.recart-review-card__tail img {
	display: block;
	width: 100%;
	height: 100%;
}
.recart-review-card__author {
	display: flex;
	align-items: center;
	gap: 16px;
}
.recart-review-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: var(--recart-radius-pill);
	object-fit: cover;
	flex-shrink: 0;
	display: block;
}
.recart-review-card__byline {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.recart-review-card__name {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-review-card__label {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-review-card__quote {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-primary);
	margin: 0;
}

/* ===== Footer ===== */
.recart-footer {
	background: var(--recart-paper);
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 2rem 80px 40px;
}
.recart-footer__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}
.recart-footer__row1 {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.recart-footer__col {
	display: flex;
	align-items: center;
	flex: 1 0 0;
	min-width: 0;
}
.recart-footer__col--brand {
	justify-content: center;
}
.recart-footer__col--social {
	justify-content: flex-end;
}
.recart-footer__logo {
	display: flex;
	flex-shrink: 0;
	text-decoration: none;
}
.recart-footer__logo img {
	display: block;
	width: 88px;
	height: 60.07px;
}

/* "Wedding Film + Photography / Hull · Yorkshire · UK / REC ART Weddings —
   by REC INC." — duplicated once (desktop inside the 3-col row, mobile
   below the menu) since its DOM position shifts, but it's plain text with
   no interactive children, so unlike the nav links this costs nothing for
   tab order. */
.recart-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.recart-footer__brand p {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
	white-space: nowrap;
}
.recart-footer__brand p:last-child {
	color: var(--recart-text-primary);
}
.recart-footer__brand--mobile {
	display: none;
}

.recart-footer__nav {
	display: flex;
	align-items: center;
	gap: 24px;
	width: max-content;
}
.recart-footer__nav--mobile {
	display: none;
}
.recart-footer__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-primary);
	text-decoration: none;
	white-space: nowrap;
}
.recart-footer__link-underline {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--recart-text-accent);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.recart-footer__link:hover .recart-footer__link-underline,
.recart-footer__link:focus-visible .recart-footer__link-underline {
	opacity: 1;
}
.recart-footer__link:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 4px;
}

.recart-footer__social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	row-gap: 8px;
}
.recart-footer__social-link {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.recart-footer__social-link:hover,
.recart-footer__social-link:focus-visible {
	opacity: 0.6;
}
.recart-footer__social-link:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 2px;
}
.recart-footer__social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	flex-shrink: 0;
}
.recart-footer__social-icon img {
	display: block;
	width: 20px;
	height: 20px;
	/* Instagram/Email are square; Facebook's own SVG is narrower (12.5:20,
	   the "f" glyph itself) — without this it would get stretched to a
	   full 20x20 square and visibly distort. Harmless no-op on the
	   square ones. */
	object-fit: contain;
}
.recart-footer__social-label {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
	white-space: nowrap;
}
/* Email — same visual treatment as Instagram, but not a real link yet (no
   confirmed team address). Matches how the old Facebook slot was handled:
   visible, styled identically, just not interactive until a real mailto:
   exists. */
.recart-footer__social-link--pending {
	cursor: default;
}
.recart-footer__social-link--pending:hover,
.recart-footer__social-link--pending:focus-visible {
	opacity: 1;
}

.recart-footer__divider {
	height: 1px;
	width: 100%;
	background: var(--recart-primitive-accent);
	opacity: 0.28;
}

.recart-footer__bottom {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.recart-footer__legal {
	display: flex;
	align-items: center;
	gap: 24px;
}
.recart-footer__col--copyright {
	justify-content: center;
}
.recart-footer__col--credit {
	justify-content: flex-end;
}
.recart-footer__copyright {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
	margin: 0;
	white-space: nowrap;
}
.recart-footer__credit {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
	text-decoration: none;
	white-space: nowrap;
}
.recart-footer__credit-name {
	color: var(--recart-text-primary);
	transition: color 0.2s ease;
}
.recart-footer__credit:hover .recart-footer__credit-name,
.recart-footer__credit:focus-visible .recart-footer__credit-name {
	color: var(--recart-text-accent);
}
.recart-footer__credit:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 4px;
}
.recart-footer__heart {
	color: var(--recart-text-accent);
}
@media (prefers-reduced-motion: reduce) {
	.recart-footer__link-underline,
	.recart-footer__social-link,
	.recart-footer__credit-name {
		transition: none !important;
	}
}
@media (max-width: 1024px) {
	.recart-footer {
		padding: 2rem 24px 32px;
		gap: 24px;
	}
	.recart-footer__row1 {
		justify-content: space-between;
	}
	.recart-footer__col--logo,
	.recart-footer__col--social {
		flex: 0 0 auto;
	}
	.recart-footer__col--brand {
		display: none;
	}
	.recart-footer__brand--mobile {
		display: flex;
		width: 100%;
	}
	.recart-footer__nav--desktop {
		display: none;
	}
	.recart-footer__nav--mobile {
		display: flex;
		flex-wrap: wrap;
		gap: 0 16px;
		width: 100%;
	}
	.recart-footer__link {
		height: 44px;
		font-size: 13.8px;
		line-height: 20.7px;
		letter-spacing: 0.345px;
	}
	.recart-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.recart-footer__col--copyright,
	.recart-footer__col--credit {
		justify-content: flex-start;
	}
}

/* ===== Contact (closing CTA) ===== */
.recart-contact-cta-section {
	background: var(--recart-paper);
	display: flex;
	padding: 64px 80px 0;
}
.recart-contact-cta {
	background: var(--recart-text-primary);
	border-radius: var(--recart-radius-panel);
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}
.recart-contact-cta__header,
.recart-contact-cta__footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}
.recart-contact-cta__eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: #FFFFFF;
	margin: 0;
	white-space: nowrap;
}
.recart-contact-cta__eyebrow--muted {
	opacity: 0.6;
}
.recart-contact-cta__footer .recart-contact-cta__eyebrow {
	opacity: 0.56;
}
.recart-contact-cta__core {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.recart-contact-cta__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 87.4px;
	line-height: 94.3px;
	color: #FFFFFF;
	text-align: center;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.recart-contact-cta__title--mobile {
	display: none;
}
.recart-contact-cta__subtitle {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: #FFFFFF;
	opacity: 0.72;
	text-align: center;
	max-width: 608px;
	margin: 0;
}

/* Outlined CTA — stays outlined on hover/focus; only the icon moves */
.recart-contact-cta__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 280px;
	max-width: 100%;
	height: 56px;
	box-sizing: border-box;
	padding: 0 8px;
	border: 1px solid var(--recart-primitive-accent);
	border-radius: var(--recart-radius-pill);
	text-decoration: none;
}
.recart-contact-cta__button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
.recart-contact-cta__button-label {
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 18.4px;
	line-height: 23px;
	color: #FFFFFF;
	flex: 1 0 0;
	text-align: center;
	perspective: 240px;
}
/* Split-flap (railway departure board) hover — each character flips a full
   half-turn and lands on the exact same letter, so front/back are identical
   and there's nothing to reverse on mouse-leave (interrupting mid-flip just
   lands on the same readable glyph either way). */
.recart-flap-char {
	position: relative;
	display: inline-block;
	transform-style: preserve-3d;
}
.recart-flap-char__face {
	display: inline-block;
	backface-visibility: hidden;
}
.recart-flap-char__face--back {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotateX(180deg);
}
@keyframes recart-flap {
	from { transform: rotateX(0deg); }
	to { transform: rotateX(-180deg); }
}
@media (hover: hover) {
	.recart-btn-primary:hover .recart-flap-char,
	.recart-faq__more:hover .recart-flap-char,
	.recart-contact-cta__button:hover .recart-flap-char {
		animation: recart-flap 0.46s ease-in-out both;
	}
}
.recart-btn-primary:focus-visible .recart-flap-char,
.recart-faq__more:focus-visible .recart-flap-char,
.recart-contact-cta__button:focus-visible .recart-flap-char {
	animation: recart-flap 0.46s ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
	.recart-btn-primary:hover .recart-flap-char,
	.recart-btn-primary:focus-visible .recart-flap-char,
	.recart-faq__more:hover .recart-flap-char,
	.recart-faq__more:focus-visible .recart-flap-char,
	.recart-contact-cta__button:hover .recart-flap-char,
	.recart-contact-cta__button:focus-visible .recart-flap-char {
		animation: none !important;
	}
}
.recart-contact-cta__icon {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	/* Same belt-and-suspenders as .recart-btn-primary__icon — pins to the
	   end regardless of the button's own justify-content. */
	margin-left: auto;
	border-radius: var(--recart-radius-pill);
	background: #FFFFFF;
	overflow: hidden;
}
.recart-contact-cta__icon img {
	position: absolute;
	width: 15px;
	height: 15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.28s ease, opacity 0.28s ease;
}
.recart-contact-cta__icon img.is-duplicate {
	transform: translate(calc(-50% - 40px), calc(-50% + 40px));
	opacity: 0;
}
/* Scoped to hover-capable pointers so a tap on touch devices can't leave
   this mid-swap (no hover-out event to reverse it there). */
@media (hover: hover) {
	.recart-contact-cta__button:hover .recart-contact-cta__icon img:not(.is-duplicate) {
		transform: translate(calc(-50% + 40px), calc(-50% - 40px));
		opacity: 0;
	}
	.recart-contact-cta__button:hover .recart-contact-cta__icon img.is-duplicate {
		transform: translate(-50%, -50%);
		opacity: 1;
		transition: transform 0.32s ease 0.02s, opacity 0.32s ease 0.02s;
	}
}
.recart-contact-cta__button:focus-visible .recart-contact-cta__icon img:not(.is-duplicate) {
	transform: translate(calc(-50% + 40px), calc(-50% - 40px));
	opacity: 0;
}
.recart-contact-cta__button:focus-visible .recart-contact-cta__icon img.is-duplicate {
	transform: translate(-50%, -50%);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.recart-contact-cta__icon img {
		transition: none !important;
	}
}

/* ===== FAQ ===== */
.recart-faq {
	background: var(--recart-paper);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 64px;
	padding: 112px 80px;
}
.recart-faq__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	flex: 0 0 448px;
	max-width: 448px;
}
.recart-faq__eyebrow {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 1.6px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-faq__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-primary);
	margin: 0;
	display: flex;
	flex-direction: column;
}
.recart-faq__description {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
	margin: 0;
	max-width: 400px;
}
.recart-faq__list {
	display: flex;
	flex-direction: column;
	flex: 0 0 704px;
	max-width: 704px;
	width: 100%;
}

/* Accordion item */
.recart-faq-item {
	display: flex;
	flex-direction: column;
}
.recart-faq-item__divider {
	height: 1px;
	width: 100%;
	background: var(--recart-primitive-accent);
}
.recart-faq-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 87px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.recart-faq-item__row:hover,
.recart-faq-item__row:focus,
.recart-faq-item__row:active {
	background: transparent;
}
.recart-faq-item__row:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 2px;
}
.recart-faq-item__question {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-primary);
	flex: 1 1 auto;
}
.recart-faq-item__control {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-action-default);
	overflow: hidden;
}
.recart-faq-item__control-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--recart-text-on-action);
	border-radius: 1px;
}
.recart-faq-item__control-bar--h {
	width: 16px;
	height: 2px;
	transform: translate(-50%, -50%);
}
.recart-faq-item__control-bar--v {
	width: 2px;
	height: 16px;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.recart-faq-item.is-open .recart-faq-item__control-bar--v {
	transform: translate(-50%, -50%) scaleY(0);
	opacity: 0;
}

/* Gentle height transition without measuring content in JS */
.recart-faq-item__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.recart-faq-item.is-open .recart-faq-item__answer-wrap {
	grid-template-rows: 1fr;
}
.recart-faq-item__answer-inner {
	overflow: hidden;
	min-height: 0;
}
.recart-faq-item__answer {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 18.4px;
	line-height: 27.6px;
	color: var(--recart-text-secondary);
	margin: 0;
	padding: 0 0 32px 0;
}

/* Questions 6-10 — hidden until "Display more" is clicked */
.recart-faq-item--extra {
	display: none;
}
.recart-faq-item--extra.is-revealed {
	display: flex;
	opacity: 0;
	transform: translateY(8px);
	animation: recart-faq-reveal 0.4s ease forwards;
}
@keyframes recart-faq-reveal {
	to { opacity: 1; transform: translateY(0); }
}

/* "Display more questions" ghost CTA */
.recart-faq__more {
	width: max-content;
	max-width: 100%;
	padding: 32px 0 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	font: inherit;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.recart-faq__more:hover,
.recart-faq__more:active {
	background: transparent;
}
.recart-faq__more.is-hidden {
	display: none;
}
.recart-faq__more:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 2px;
	border-radius: var(--recart-radius-pill);
}
.recart-faq-ghost-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: max-content;
	height: 48px;
	border-radius: var(--recart-radius-pill);
	padding: 0;
	background: transparent;
}
.recart-faq-ghost-cta__label {
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 18.4px;
	line-height: 23px;
	color: var(--recart-text-primary);
	perspective: 240px;
}
.recart-faq-ghost-cta__icon {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--recart-radius-pill);
	background: #FFFFFF;
	overflow: hidden;
}
.recart-faq-ghost-cta__icon img {
	position: absolute;
	width: 15px;
	height: 15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.26s ease, opacity 0.26s ease;
}
.recart-faq-ghost-cta__icon img.is-duplicate {
	transform: translate(calc(-50% - 33px), calc(-50% + 33px));
	opacity: 0;
}
.recart-faq__more:hover .recart-faq-ghost-cta__icon img:not(.is-duplicate),
.recart-faq__more:focus-visible .recart-faq-ghost-cta__icon img:not(.is-duplicate) {
	transform: translate(calc(-50% + 33px), calc(-50% - 33px));
	opacity: 0;
}
.recart-faq__more:hover .recart-faq-ghost-cta__icon img.is-duplicate,
.recart-faq__more:focus-visible .recart-faq-ghost-cta__icon img.is-duplicate {
	transform: translate(-50%, -50%);
	opacity: 1;
	transition: transform 0.3s ease 0.02s, opacity 0.3s ease 0.02s;
}
@media (prefers-reduced-motion: reduce) {
	.recart-faq-ghost-cta__icon img,
	.recart-faq-item__control-bar--v,
	.recart-faq-item__answer-wrap {
		transition: none !important;
	}
	.recart-faq-item--extra.is-revealed {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ===== Responsive breakpoints ===== */
@media (max-width: 1024px) {
	.recart-contact-cta-section {
		padding: 48px 24px 0;
	}
	.recart-contact-cta {
		padding: 32px 24px;
		gap: 48px;
	}
	.recart-contact-cta__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.recart-contact-cta__footer {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}
	.recart-contact-cta__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-contact-cta__title--desktop {
		display: none;
	}
	.recart-contact-cta__title--mobile {
		display: flex;
	}
	.recart-contact-cta__subtitle {
		font-size: 18.4px;
		line-height: 27.6px;
		max-width: 294px;
	}

	.recart-navbar__bar {
		height: 80px;
		padding: 0 24px;
		gap: 12px;
	}
	.recart-navbar__logo {
		/* Pushes everything else (now just the gtranslate slot + toggle,
		   since the menu and Contact button are hidden below) flush to the
		   right edge — an auto margin absorbs all the leftover space before
		   the bar's own justify-content:space-between gets a chance to
		   spread a lone middle item across the whole width. */
		margin-right: auto;
	}
	.recart-navbar__logo img {
		width: 88px;
	}
	.recart-navbar__menu {
		display: none;
	}
	.recart-navbar__menu-toggle {
		display: flex;
	}
	.recart-navbar__cta-desktop {
		display: none;
	}
	.recart-navbar__actions {
		/* Was fully hidden — now shown so its other child, the gtranslate
		   slot, is visible on the collapsed mobile bar too, not just after
		   opening the hamburger panel. The Contact button alongside it
		   stays hidden via its own .recart-navbar__cta-desktop rule above. */
		display: flex;
	}

	.recart-hero__panel {
		height: auto !important; /* undo any inline height app.js set at desktop */
		min-height: 100svh;
	}
	.recart-hero__text {
		padding: 48px 24px 32px;
	}
	.recart-hero__main {
		max-width: 100%;
		/* Figma: content sits in the lower portion, portrait visible above —
		   not vertically centered like desktop. */
		justify-content: flex-end;
	}
	.recart-hero__title {
		font-size: 50.6px;
		line-height: 55.2px;
	}
	.recart-hero__intro {
		max-width: 100%;
	}
	.recart-hero__description {
		font-size: 18.4px;
		line-height: 27.6px;
	}
	.recart-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.recart-hero__primary,
	.recart-hero__secondary {
		width: 100%;
	}
	.recart-hero__geo {
		max-width: 100%;
		margin-top: 12px;
	}
	/* Native size of hero-image-mobile.jpg is exactly 517×775 — object-fit:
	   cover scales that by height to fill the 390×768 reference container
	   (~0.99×, negligible vs. the Figma spec's literal unscaled 517×775),
	   so object-position alone reproduces the specified x=-44,y=-7 crop:
	   44px of the 127px total horizontal overflow comes off the left edge
	   (≈35%), and vertical overflow is small enough that a low top-biased
	   value both matches the spec and keeps both faces (upper portion of
	   the photo) safely in frame on taller/narrower phones too. */
	.recart-hero__photo img {
		object-position: 35% 10%;
	}
	/* Mobile overlay is one vertical gradient only (see Figma) — no
	   horizontal readability gradient needed once text sits full-width
	   in the lower portion rather than beside the subject. */
	.recart-hero__overlay--horizontal {
		display: none;
	}
	.recart-hero__overlay--depth {
		background: linear-gradient(
			180deg,
			rgba(25, 27, 31, 0.16) -27.02%,
			rgba(25, 27, 31, 0.23) 0.93%,
			rgba(25, 27, 31, 0.70) 27.6%,
			rgba(25, 27, 31, 0.94) 100%
		);
		opacity: 0.8;
	}

	.recart-about {
		flex-direction: column;
		gap: 32px;
		padding: 64px 24px;
	}
	.recart-about__eyebrow {
		/* flex: 0 0 320px on the base rule is axis-dependent — it sets a
		   fixed WIDTH in the desktop side-by-side row layout, but .recart-
		   about switches to flex-direction:column above, so that same
		   320px silently becomes a fixed HEIGHT instead: a tall empty box
		   with "OUR APPROACH" sitting at its top and everything else
		   pushed 320px down. Resetting flex-basis back to auto is what
		   max-width:100% alone couldn't fix (max-width constrains the
		   cross axis, not the flex-basis driving the main axis). */
		flex: 0 0 auto;
		padding-top: 0;
		max-width: 100%;
	}
	.recart-about__statement {
		gap: 24px;
		max-width: 100%;
	}
	.recart-about__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-about__break {
		display: block;
	}
	.recart-about__description {
		font-size: 18.4px;
		line-height: 27.6px;
		max-width: 100%;
	}

	.recart-stories {
		padding: 32px 24px 64px;
		gap: 40px;
	}
	.recart-stories__heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.recart-stories__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-stories__subtitle {
		max-width: 100%;
	}
	.recart-stories__grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}
	.recart-story-card {
		width: 100%;
	}
	.recart-story-card__photo-btn {
		border-radius: var(--recart-radius-photo, 24px);
	}
	/* Figma's mobile ghost CTA stretches full width with a smaller 40px
	   icon circle, unlike FAQ's own desktop-only "Display more questions"
	   sizing — scoped here so the shared .recart-faq__more classes keep
	   their normal (non-stretched) behaviour everywhere else. */
	.recart-stories__reveal-wrap .recart-faq__more {
		width: 100%;
	}
	.recart-stories__reveal-wrap .recart-faq-ghost-cta {
		width: 100%;
	}
	.recart-stories__reveal-wrap .recart-faq-ghost-cta__label {
		flex: 1 0 0;
	}
	.recart-stories__reveal-wrap .recart-faq-ghost-cta__icon {
		width: 40px;
		height: 40px;
	}

	.recart-services {
		padding: 32px 24px 64px;
		gap: 32px;
	}
	.recart-services__panel {
		padding: 24px;
		gap: 32px;
		border-radius: 16px;
	}
	.recart-services__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.recart-services__heading {
		max-width: 100%;
	}
	.recart-services__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-services__body {
		font-size: 18.4px;
		line-height: 27.6px;
		max-width: 100%;
		flex-basis: auto;
	}
	.recart-service-row__content {
		flex-wrap: wrap;
		padding: 24px 0 0;
		gap: 16px;
	}
	.recart-service-row {
		padding-bottom: 24px;
	}
	.recart-service-row__heading {
		flex: 1 1 auto;
		gap: 16px;
	}
	.recart-service-row__name {
		font-size: 36.8px;
		line-height: 43.7px;
	}
	.recart-service-row__description {
		flex: 1 1 100%;
		max-width: 100%;
		font-size: 18.4px;
		line-height: 27.6px;
		order: 3;
	}
	.recart-services__contact {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.recart-services__contact-text {
		font-size: 18.4px;
		line-height: 27.6px;
		max-width: 100%;
	}

	.recart-experience {
		padding: 0 24px;
		min-height: auto;
	}
	.recart-experience__center {
		/* not pinned on mobile — back to normal flow, no centering trick */
		position: static;
		transform: none;
		max-width: 100%;
		padding: 80px 0;
		gap: 56px;
	}
	.recart-experience__intro {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}
	.recart-experience__heading {
		max-width: 100%;
	}
	.recart-experience__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-experience__body {
		font-size: 18.4px;
		line-height: 27.6px;
		max-width: 100%;
		flex-basis: auto;
	}

	/* Vertical timeline: grid lets the rail span the full step height
	   alongside number+title+description without touching the DOM order. */
	.recart-timeline {
		flex-direction: column;
		gap: 56px;
	}
	.recart-timeline-step {
		display: grid;
		grid-template-columns: 8px 1fr;
		grid-template-rows: auto auto;
		column-gap: 24px;
		row-gap: 16px;
		width: 100%;
	}
	.recart-timeline-step__number {
		grid-column: 2;
		grid-row: 1;
		font-size: 32.2px;
		line-height: 40px;
		opacity: 0.75;
	}
	.recart-timeline-step__rail {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 8px;
		height: 100%;
		min-height: 180px;
	}
	.recart-timeline-step__rail-track {
		inset: 0;
		left: 50%;
		top: 8px;
		width: 1px;
		height: calc(100% - 8px);
		transform: translateX(-50%);
	}
	.recart-timeline-step__rail-fill {
		left: 50%;
		top: 8px;
		width: 1px;
		height: calc(100% - 8px);
		transform: translateX(-50%) scaleY(0);
		transform-origin: top center;
	}
	.recart-timeline-step__dot {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
	.recart-timeline-step__content {
		grid-column: 2;
		grid-row: 2;
		gap: 16px;
	}
	.recart-timeline-step__title {
		font-size: 36.8px;
		line-height: 43.7px;
		min-height: 0;
	}
	.recart-timeline-step__description {
		font-size: 18.4px;
		line-height: 27.6px;
	}

	.recart-reviews {
		padding: 64px 0;
		gap: 40px;
	}
	.recart-reviews__heading {
		align-items: flex-start;
		text-align: left;
		padding: 0 24px;
	}
	.recart-reviews__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-review-card {
		width: 310px;
		height: 272px;
	}
	.recart-review-card__surface {
		height: 252px;
		padding: 24px;
	}
	.recart-review-card__tail {
		left: 32px;
		top: 250px;
	}
	.recart-review-card__avatar {
		width: 48px;
		height: 48px;
	}
	.recart-review-card__quote {
		font-size: 18.4px;
		line-height: 27.6px;
	}

	.recart-faq {
		flex-direction: column;
		gap: 56px;
		padding: 64px 24px 80px;
	}
	.recart-faq__intro {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
	.recart-faq__title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-faq__description {
		font-size: 18.4px;
		line-height: 27.6px;
		max-width: 100%;
	}
	.recart-faq__list {
		flex: 0 0 auto;
		max-width: 100%;
	}
	.recart-faq-item__row {
		min-height: 79px;
	}
	.recart-faq-item__question {
		font-size: 18.4px;
		line-height: 27.6px;
	}
	.recart-faq-item__control {
		width: 40px;
		height: 40px;
	}
	.recart-faq-item__control-bar--h {
		width: 14px;
	}
	.recart-faq-item__control-bar--v {
		height: 14px;
	}
	.recart-faq-item__answer {
		font-size: 18.4px;
		padding: 0 0 24px 0;
	}
	.recart-faq-ghost-cta__icon {
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 380px) {
	/* Extra safety margin below the 390px mobile reference — keeps the
	   serif heading from feeling cramped at 320px without changing the
	   320–1024px behaviour above. */
	.recart-hero__title {
		font-size: 42px;
		line-height: 46px;
	}
}
@media (min-width: 1025px) {
	.recart-navbar__mobile-panel,
	.recart-navbar__menu-toggle {
		display: none !important;
	}
}

/* ===== Section indicator (scrollspy) — injected by app.js ===== */
.recart-section-indicator {
	position: fixed;
	z-index: 40;
	background: #FFFFFF;
	border-radius: var(--recart-radius-pill);
	box-shadow: 0px 8px 12px rgba(25, 27, 31, 0.05);
	transition: opacity 0.24s ease, transform 0.24s ease, background-color 0.24s ease;
}
/* Inverse theme while Services or Contact (dark panels) is active */
.recart-section-indicator.is-inverse {
	background: #191B1F;
}
.recart-section-indicator.is-inverse .recart-section-indicator__count {
	color: #FFFFFF;
}
.recart-section-indicator.is-inverse .recart-section-indicator__dot {
	background: var(--recart-paper);
}
.recart-section-indicator.is-inverse .recart-section-indicator__mark.is-active .recart-section-indicator__dot {
	background: var(--recart-paper);
	opacity: 1;
}
.recart-section-indicator__count {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-accent);
	margin: 0;
	white-space: nowrap;
}
.recart-section-indicator__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}
.recart-section-indicator__mark:focus-visible {
	outline: 2px solid var(--recart-text-accent);
	outline-offset: 2px;
	border-radius: 4px;
}
.recart-section-indicator__dot {
	display: block;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-text-primary);
	opacity: 0.56;
	transition: width 0.24s ease, height 0.24s ease, background-color 0.24s ease, opacity 0.24s ease;
}
.recart-section-indicator__mark.is-active .recart-section-indicator__dot {
	background: var(--recart-action-default);
	opacity: 1;
}

/* Desktop: vertical pill, fixed to the right edge, vertically centered */
.recart-section-indicator--desktop {
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 40px;
	padding: 16px 0;
}
.recart-section-indicator--desktop .recart-section-indicator__count--total {
	color: var(--recart-text-secondary);
	opacity: 0.68;
}
.recart-section-indicator--desktop.is-inverse .recart-section-indicator__count--total {
	color: #FFFFFF;
	opacity: 0.68;
}
.recart-section-indicator--desktop .recart-section-indicator__marks {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.recart-section-indicator--desktop .recart-section-indicator__mark {
	width: 40px;
	height: 28px;
}
.recart-section-indicator--desktop .recart-section-indicator__dot {
	width: 4px;
	height: 4px;
}
.recart-section-indicator--desktop .recart-section-indicator__mark.is-active .recart-section-indicator__dot {
	width: 4px;
	height: 16px;
}

/* Mobile: compact horizontal capsule, fixed to the bottom safe area */
.recart-section-indicator--mobile {
	display: none;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
	align-items: center;
	gap: 16px;
	width: min(336px, calc(100vw - 48px));
	height: 48px;
	padding: 0 12px;
	box-sizing: border-box;
}
.recart-section-indicator--mobile .recart-section-indicator__marks {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: space-between;
}
.recart-section-indicator--mobile .recart-section-indicator__mark {
	width: 32px;
	height: 32px;
}
.recart-section-indicator--mobile .recart-section-indicator__dot {
	width: 4px;
	height: 4px;
}
.recart-section-indicator--mobile .recart-section-indicator__mark.is-active .recart-section-indicator__dot {
	width: 16px;
	height: 4px;
}
.recart-section-indicator.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(8px);
}
.recart-section-indicator--mobile.is-hidden {
	transform: translateX(-50%) translateY(8px);
}

@media (max-width: 1024px) {
	.recart-section-indicator--desktop {
		display: none;
	}
	/* Hidden completely on mobile, by request — not just faded via
	   .is-hidden (which keeps layout space reserved via opacity/pointer-
	   events), an actual display:none so it reserves nothing. */
	.recart-section-indicator--mobile {
		display: none;
	}
}

/* ===== Enquiry popup (Elementor Pro Popup Builder template) =====
   Defensive reset for Elementor's own popup chrome, scoped to this
   template's actual generated id (#elementor-popup-modal-43) rather than
   every popup on the site. `.dialog-message` is confirmed (read directly
   from the installed elementor-pro source, modules/popup/document.php) as
   the real wrapper Elementor's Layout controls target — its default Width
   control is 640px, smaller than our 1040px design, so it must be
   neutralized or our content gets clipped. `.dialog-close-button` is
   Elementor's own default close icon; we ship our own inside the widget
   (`.recart-popup__close`), and set the Document's close_button control to
   "no" server-side — this is just a harmless backstop in case that control
   isn't picked up.

   The outer `.elementor-popup-modal` element IS the full-viewport backdrop
   (confirmed from the dialogs-manager source the plugin ships,
   assets/lib/dialog/dialog.js — there's no separate overlay element; the
   single "widget" element is the full-screen root). It gets our own
   graphite dim directly instead of transparent, so there's one real
   backdrop rather than whatever pale default was showing through.
   `.dialog-widget-content` is the native white box one level in; it's
   matched to our card's radius and clipped so no square white corners show
   around the rounded custom card, with its own shadow killed so only
   `.recart-popup`'s shadow shows (no stacked shadows). */
#elementor-popup-modal-43.elementor-popup-modal {
	background: rgba(25, 27, 31, 0.58) !important;
}
#elementor-popup-modal-43 .elementor-widget-wrap,
#elementor-popup-modal-43 .elementor-container {
	background: transparent !important;
	padding: 0 !important;
	max-width: none !important;
	box-shadow: none !important;
}
#elementor-popup-modal-43 .dialog-widget-content {
	background: transparent !important;
	border-radius: var(--recart-radius-panel) !important;
	overflow: hidden !important;
	box-shadow: none !important;
	/* Definite height lives here, at the native wrapper, not just on the
	   inner .recart-popup card — .dialog-message/.recart-popup below just
	   inherit it at height:100%. Three-tier progressive enhancement, each
	   line overriding the previous where supported: plain vh (universal
	   baseline) → dvh (accurate as mobile browser chrome shows/hides) →
	   var(--recart-vvh) (set by app.js from the real VisualViewport API,
	   the only one of the three that reliably shrinks for an on-screen
	   keyboard in every browser — dvh does not, consistently, across
	   browsers). The var(--recart-vvh, 100dvh) fallback is given explicitly
	   and self-contained within this one declaration — relying on an
	   invalid var() to silently "fall back" to an earlier declaration in
	   the same rule isn't a safe assumption across browsers/engines, so
	   this names its own fallback rather than leaning on cascade order. */
	height: calc(100vh - var(--recart-popup-gutter) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--recart-popup-adminbar)) !important;
	height: calc(100dvh - var(--recart-popup-gutter) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--recart-popup-adminbar)) !important;
	height: calc(var(--recart-vvh, 100dvh) - var(--recart-popup-gutter) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--recart-popup-adminbar)) !important;
}
#elementor-popup-modal-43 .dialog-message {
	width: auto !important;
	max-width: none !important;
	height: 100% !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
}
#elementor-popup-modal-43 .dialog-close-button {
	display: none !important;
}

.recart-popup {
	/* Fills .dialog-widget-content's now-definite height (set above) —
	   that's the one place the viewport-minus-gutters math lives; this
	   card just takes 100% of it. Without a real height anywhere in this
	   chain, every `flex:1 0 0; min-height:0` further down (panel → form →
	   scroll body) has nothing to distribute and collapses toward content
	   size instead of growing, which is what left the scroll body only as
	   tall as its own content. */
	position: relative;
	display: flex;
	width: min(1040px, calc(100vw - 48px));
	height: 100%;
	background: var(--recart-paper);
	border-radius: var(--recart-radius-panel);
	box-shadow: 0px 20px 56px 0px rgba(25, 27, 31, 0.22);
	overflow: hidden;
}
.recart-popup__photo {
	flex: 0 0 320px;
	align-self: stretch;
}
.recart-popup__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.recart-popup__panel {
	position: relative;
	flex: 1 0 0;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* Trimmed vertical padding (was 32px all round) frees up room so the
	   full nine-field form fits without the inner scroll body ever needing
	   to activate on realistic desktop heights — horizontal stays roomy. */
	padding: 24px 32px;
	box-sizing: border-box;
}
.recart-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.recart-popup__close img {
	width: 20px;
	height: 20px;
}
.recart-popup__close:hover img,
.recart-popup__close:focus-visible img {
	filter: invert(13%) sepia(54%) saturate(3540%) hue-rotate(327deg) brightness(84%) contrast(94%);
}
.recart-popup__close:focus-visible {
	outline: 2px solid var(--recart-action-default);
	outline-offset: 2px;
}
.recart-popup__intro {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 8px;
}
.recart-popup__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 46px;
	line-height: 50.6px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-popup__lede {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-popup__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 0 0;
	min-height: 0;
}
.recart-popup__scroll {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 0 0;
	min-height: 0;
	/* Still scrollable as a fallback for genuinely extreme viewports, but
	   with the compacted field/gap sizing below, the full nine-field form
	   now fits inside realistic desktop heights without this ever having to
	   kick in. */
	overflow-y: auto;
	overflow-x: hidden;
}
.recart-popup__row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
}
.recart-popup__row > * {
	flex: 1 0 0;
	min-width: 0;
}

/* --- Field control (Line / Select / Message, 7 states) --- */
.recart-popup-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.recart-popup-field-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 0 0;
	min-width: 0;
}
.recart-popup-field__control {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	background: #FFFFFF;
	border: 1px solid var(--recart-popup-border-default, rgba(165, 173, 185, 0.4));
	border-radius: 16px;
	padding: 10px 16px;
	box-sizing: border-box;
	transition: opacity 0.2s ease;
}
/* Event date field, once "Date not decided / flexible" is checked — the
   field itself already goes readOnly + clears via app.js's change handler;
   this just gives that state a visible, animated cue instead of the input
   silently becoming uneditable with no feedback. is-flexible is toggled
   both ways (checked and unchecked) so it reverses cleanly too. */
.recart-popup-field.is-flexible .recart-popup-field__control {
	opacity: 0.8;
}
.recart-popup-field--message .recart-popup-field__control {
	align-items: flex-start;
	min-height: 88px;
}
.recart-popup-field__control:hover {
	border-color: var(--recart-primitive-accent);
}
.recart-popup-field__control:focus-within {
	border-color: var(--recart-action-default);
	border-width: 1.5px;
	box-shadow: 0 0 0 3px rgba(112, 21, 36, 0.1);
	padding: 9.5px 15.5px;
}
.recart-popup-field__icon,
.recart-popup-field__feedback {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.recart-popup-field__icon img {
	width: 100%;
	height: 100%;
	display: block;
}
.recart-popup-field__feedback {
	position: relative;
	display: none;
}
.recart-popup-field__feedback-icon {
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	display: none;
}
.recart-popup-field__body {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	min-width: 0;
}
/* Label + "optional" sit in one flex row, label taking the remaining
   space so "optional" lands at the far right of the row (per Figma's
   "Label + optional" node) rather than inline right after the label text. */
.recart-popup-field__label-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.recart-popup-field__label {
	display: block;
	flex: 1 0 0;
	min-width: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}
.recart-popup-field__control:focus-within .recart-popup-field__label,
.recart-popup-field__control:focus-within .recart-popup-field__icon {
	color: var(--recart-action-default);
}
.recart-popup-field__control:focus-within .recart-popup-field__icon img {
	filter: invert(13%) sepia(54%) saturate(3540%) hue-rotate(327deg) brightness(84%) contrast(94%);
}
.recart-popup-field__optional {
	flex-shrink: 0;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	opacity: 0.45;
}
/* Native border/shadow/background/padding reset, scoped to the actual
   control elements inside __body only — the rounded __control wrapper owns
   the visible border/fill/focus state. !important guards against theme or
   Elementor base form-field CSS (input[type=...] selectors elsewhere in the
   cascade) winning on a selector we can't fully audit from here. */
.recart-popup-field__body input,
.recart-popup-field__body select,
.recart-popup-field__body textarea {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	/* The native browser focus outline on the input itself — the other
	   properties above were already forced with !important, but outline
	   was only set on .recart-popup-field__input without !important
	   (below), which could lose to the browser's own native focus-ring
	   styling. The rounded .recart-popup-field__control wrapper's own
	   :focus-within border-color + box-shadow stays untouched and remains
	   the visible focus indicator for both mouse and Tab-key navigation —
	   this only removes the redundant native ring on the input underneath
	   it, scoped to these form fields specifically, not the whole site. */
	outline: none !important;
}
/* padding:0 split out from the reset above into its four sides: top/right/
   bottom stay zeroed for every input uniformly (including the phone
   input) so its height still matches every other field. Only padding-
   LEFT is excluded for .iti__tel-input — intl-tel-input sets that one
   side via inline style, dynamically measured against the real rendered
   width of the flag + dial code for whichever country is selected (a
   static guessed value fought that earlier and visibly overlapped the
   text). An earlier version of this excluded the input from the whole
   padding shorthand instead of just padding-left, which fixed the
   overlap but left padding-top/bottom unset too — closer to the browser's
   own default input padding than 0, which is what was actually causing
   the height mismatch against the other fields. */
.recart-popup-field__body input,
.recart-popup-field__body select,
.recart-popup-field__body textarea {
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
}
.recart-popup-field__body input:not(.iti__tel-input),
.recart-popup-field__body select,
.recart-popup-field__body textarea {
	padding-left: 0 !important;
}
.recart-popup-field__input {
	/* Excludes [type="date"]: appearance:none on a date input also hides its
	   native calendar-picker-indicator in WebKit, which the brief explicitly
	   wants preserved. Select keeps appearance:none — that's intentional,
	   it's what lets our own chevron icon stand in for the native arrow. */
	border: none;
	outline: none;
	background: transparent;
	width: 100%;
	padding: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-secondary);
	opacity: 0.75;
}
.recart-popup-field__input:not([type="date"]) {
	appearance: none;
	-webkit-appearance: none;
}
.recart-popup-field__input::placeholder {
	color: var(--recart-text-secondary);
	opacity: 1;
}
.recart-popup-field__input:not(:placeholder-shown),
select.recart-popup-field__input:valid,
.recart-popup-field__input[type="date"] {
	color: var(--recart-text-primary);
	opacity: 1;
}
textarea.recart-popup-field__input {
	resize: none;
	min-height: 46px;
}
.recart-popup-field--select .recart-popup-field__body {
	position: relative;
}
select.recart-popup-field__input {
	cursor: pointer;
	padding-right: 28px;
}
.recart-popup-field__chevron {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	pointer-events: none;
}
.recart-popup-field__chevron img {
	width: 100%;
	height: 100%;
}
.recart-popup-field__error {
	/* display:none (not visibility:hidden) — reserving this space in every
	   field unconditionally (a prior attempt) fixed the row-height mismatch
	   but bloated the gap between EVERY field, everywhere, all the time,
	   which was worse. The real fix is .recart-popup__row's own
	   align-items:stretch below: it equalizes a row's two columns only
	   when they actually differ (one has a visible error, the other
	   doesn't), so normal fields keep their normal compact height. */
	display: none;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--color-form-error, #983440);
	margin: 0;
}

/* Valid state */
.recart-popup-field.is-valid .recart-popup-field__control {
	border-color: var(--color-form-success, #285948);
}
.recart-popup-field.is-valid .recart-popup-field__feedback {
	display: block;
}
.recart-popup-field.is-valid .recart-popup-field__feedback-icon--valid {
	display: block;
}

/* Error state */
.recart-popup-field.is-error .recart-popup-field__control {
	border-color: var(--color-form-error, #983440);
}
.recart-popup-field.is-error .recart-popup-field__feedback {
	display: block;
}
.recart-popup-field.is-error .recart-popup-field__feedback-icon--error {
	display: block;
}
.recart-popup-field.is-error .recart-popup-field__error {
	display: block;
}

/* Date-flexible checkbox */
.recart-popup-flexible {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	cursor: pointer;
}
.recart-popup-flexible__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.recart-popup-flexible__box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--recart-primitive-accent);
	border-radius: 5px;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
.recart-popup-flexible__box img {
	width: 12px;
	height: 12px;
	opacity: 0;
}
.recart-popup-flexible__input:checked ~ .recart-popup-flexible__box {
	background: var(--recart-action-default);
	border-color: var(--recart-action-default);
}
.recart-popup-flexible__input:checked ~ .recart-popup-flexible__box img {
	opacity: 1;
	filter: brightness(0) invert(1);
}
.recart-popup-flexible__input:focus-visible ~ .recart-popup-flexible__box {
	outline: 2px solid var(--recart-action-default);
	outline-offset: 2px;
}
.recart-popup-flexible__label {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--recart-text-secondary);
}

/* --- Submit row (reuses .recart-btn-primary) --- */
.recart-popup__submit-row {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 8px;
}
.recart-popup__submit {
	width: max-content;
	justify-content: space-between;
	border: none;
	cursor: pointer;
}
.recart-popup__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}
.recart-popup__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.recart-popup__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: 0;
}
.recart-popup-field.is-error .recart-popup-field__input {
	outline: none;
}
.recart-popup__panel:focus-visible {
	outline: none;
}
.recart-popup__submit-icon {
	position: relative;
}
.recart-popup__submit-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.recart-popup__submit-spinner img {
	width: 20px;
	height: 20px;
	animation: recart-popup-spin 0.9s linear infinite;
}
@keyframes recart-popup-spin {
	to { transform: rotate(360deg); }
}
/* Each rule below also matches .recart-contact-form — the /contact page's
   inline (non-modal) reuse of this exact field/submit/status system, see
   that section's own CSS further down. Same state classes (is-loading /
   is-success / is-failure), same child class names, just a different
   wrapper and no modal chrome — sharing these selectors instead of
   duplicating them keeps both instances behaving identically by
   construction. */
.recart-popup.is-loading .recart-popup__submit,
.recart-contact-form.is-loading .recart-popup__submit {
	pointer-events: none;
}
.recart-popup.is-loading .recart-popup__submit-icon img:not(.recart-popup__submit-spinner img),
.recart-contact-form.is-loading .recart-popup__submit-icon img:not(.recart-popup__submit-spinner img) {
	opacity: 0 !important;
}
.recart-popup.is-loading .recart-popup__submit-spinner,
.recart-contact-form.is-loading .recart-popup__submit-spinner {
	opacity: 1;
}
.recart-popup.is-loading .recart-popup-field__control,
.recart-popup.is-loading .recart-popup-flexible,
.recart-contact-form.is-loading .recart-popup-field__control,
.recart-contact-form.is-loading .recart-popup-flexible {
	opacity: 0.58;
	pointer-events: none;
}
.recart-popup__privacy {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--recart-text-secondary);
	margin: 0;
}
.recart-popup__privacy a {
	color: var(--recart-text-secondary);
}

/* --- Success / failure full-panel states --- */
.recart-popup__state {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	position: absolute;
	inset: 32px;
	background: var(--recart-paper);
}
.recart-popup.is-success .recart-popup__form,
.recart-popup.is-failure .recart-popup__form,
.recart-contact-form.is-success .recart-popup__form,
.recart-contact-form.is-failure .recart-popup__form {
	display: none;
}
.recart-popup.is-success .recart-popup__state--success,
.recart-popup.is-failure .recart-popup__state--failure,
.recart-contact-form.is-success .recart-popup__state--success,
.recart-contact-form.is-failure .recart-popup__state--failure {
	display: flex;
}
.recart-popup__state-title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 1.1;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-popup__state-text {
	font-family: 'Manrope', sans-serif;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-secondary);
	max-width: 420px;
	margin: 0;
}
.recart-popup__state-retry {
	margin-top: 8px;
	border: 1px solid var(--recart-primitive-accent);
	border-radius: var(--recart-radius-pill);
	background: transparent;
	padding: 12px 24px;
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--recart-text-primary);
	cursor: pointer;
}

@media (max-width: 767px) {
	.recart-popup {
		flex-direction: column;
		/* No width cap — fills the viewport minus 16px gutters per side, so
		   it keeps growing on wider phones/tablets instead of plateauing at
		   390px. Height still comes entirely from .dialog-widget-content's
		   own height:100% chain, via --recart-popup-gutter switching to
		   32px at this same breakpoint. */
		width: calc(100vw - 32px);
		border-radius: 24px;
	}
	#elementor-popup-modal-43 .dialog-widget-content {
		border-radius: 24px !important;
	}
	/* No photo at all on mobile, by request — just the form. */
	.recart-popup__photo {
		display: none;
	}
	.recart-popup__panel {
		padding: 24px;
		min-height: 0;
	}
	.recart-popup__row {
		flex-direction: column;
		/* Overrides the base rule's align-items:flex-start, which is correct
		   for desktop (vertically aligning two side-by-side fields to their
		   tops) but, once flex-direction flips to column here, becomes the
		   CROSS-axis property instead — meaning it stopped fields from
		   stretching to the row's full width and let them shrink to their
		   own content width instead. stretch fixes that. */
		align-items: stretch;
	}
	.recart-popup__title {
		font-size: 36.8px;
		line-height: 43.7px;
	}
	.recart-popup__state {
		inset: 24px;
	}
	/* Full-width submit button on mobile — the max-content/content-hugging
	   sizing used everywhere else on the site (navbar, services, FAQ) is a
	   desktop convention; a full-width action is the more familiar, easier
	   to hit pattern for a stacked mobile form. */
	.recart-popup__submit {
		width: 100%;
	}
	/* Smaller message control on mobile — less vertical real estate to
	   spare in a single-column layout than on desktop's two-column grid.
	   Textarea's own min-height comes down too — the control's min-height
	   alone is just a floor and won't actually shrink the box while the
	   textarea inside still demands more room than that. */
	.recart-popup-field--message .recart-popup-field__control {
		min-height: 64px;
	}
	textarea.recart-popup-field__input {
		min-height: 32px;
	}
}

/* Very short viewports (landscape phones, small-height laptops with the
   browser chrome eating into available height) — compact the intro so the
   scroll body keeps real room, without touching anything the field rows or
   submit footer need. max-height query, independent of width, placed after
   the width-based mobile block so it wins on top of it when both match
   (e.g. a phone in landscape). */
@media (max-height: 700px) {
	.recart-popup__panel {
		padding-top: 20px;
		padding-bottom: 20px;
		gap: 12px;
	}
	.recart-popup__intro {
		gap: 4px;
	}
	.recart-popup__title {
		font-size: 32px;
		line-height: 36px;
	}
}

/* ===== /contact page — navbar phone variant ===== */
/* Logo and phone zones get equal fixed widths (matching the Figma source
   exactly, 223px each) so the centered menu is genuinely centered by
   geometry, not just by accident of space-between with two unequal-width
   neighbors — the phone zone is far narrower than the old Contact button +
   gtranslate zone was, so without this the menu would visibly drift left. */
.recart-navbar--contact .recart-navbar__logo {
	flex: 0 0 223px;
}
.recart-navbar--contact .recart-navbar__phone-zone {
	flex: 0 0 223px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
}
.recart-navbar__phone-link {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-accent);
	text-decoration: none;
	white-space: nowrap;
}
.recart-navbar__mobile-phone {
	display: none;
}

@media (max-width: 1024px) {
	.recart-navbar--contact .recart-navbar__logo {
		/* The desktop centering trick (equal 223px logo/phone-zone widths)
		   was never undone for mobile — on a 390px viewport that alone ate
		   well over half the available bar width, long before the gtranslate
		   slot was ever added back in here. Matches the plain .recart-navbar
		   mobile logo treatment below. */
		flex: 0 0 auto;
		margin-right: auto;
	}
	.recart-navbar--contact .recart-navbar__phone-zone {
		/* No more fixed-width centering trick needed — mobile nav is a
		   hamburger, not inline links either side of a centered menu. */
		flex: 0 0 auto;
		gap: 10px;
	}
	.recart-navbar__phone-link {
		font-size: 13.8px;
		line-height: 20.7px;
		letter-spacing: 0.345px;
	}
	/* Desktop's phone-zone pairs the gtranslate slot with the phone link;
	   on mobile that bar is tight (logo + phone number + toggle all in one
	   row). The mobile panel's own slot already shows the full flags+code
	   row with room to spare, so here — the compact bar — only the flags
	   show (text codes dropped via the rule below) to keep this instance
	   narrow enough to sit alongside the phone number without pushing the
	   toggle off-screen. */
	.recart-navbar--contact .recart-navbar__phone-zone .recart-gtranslate-slot--desktop a.glink.notranslate span {
		display: none;
	}
	.recart-navbar--contact .recart-navbar__phone-zone .recart-gtranslate-slot--desktop {
		gap: 6px;
	}
	.recart-navbar--contact .recart-navbar__phone-zone .recart-gtranslate-slot--desktop a.glink.notranslate img {
		width: 18px;
		height: 18px;
	}
	.recart-navbar__mobile-phone {
		display: block;
	}
}

/* ===== /contact page — introduction + reused form ===== */
.recart-contact-page {
	/* No background of its own — var(--recart-paper) was a shade different
	   from the page body's own background (var(--recart-body-bg)), leaving
	   a visible seam around the section. Transparent lets the body colour
	   show through underneath, matching the rest of the page. */
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	padding: 96px 80px 112px;
}
.recart-contact-page__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 656px;
	max-width: 100%;
	text-align: center;
}
.recart-contact-page__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 87.4px;
	line-height: 94.3px;
	color: var(--recart-text-primary);
	margin: 0;
}
.recart-contact-page__lede {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
	margin: 0;
}
/* Two separate paragraphs, not one responsive reflow — the mobile copy is
   genuinely different wording ("your venue" / "your plans"), not just a
   different line-break of the same sentence, so this is a markup-level
   swap toggled by display, same pattern as other breakpoint-specific
   content on this site. Font size inherited from .recart-contact-page__lede
   above, untouched either way. */
.recart-contact-page__lede--mobile {
	display: none;
}
@media (max-width: 1024px) {
	.recart-contact-page__lede--desktop {
		display: none;
	}
	.recart-contact-page__lede--mobile {
		display: block;
	}
}

/* Contact page form */
.recart-contact-form {
	/* 960px per spec — at this width each two-column row is exactly
	   (960-12)/2 = 474px per field, with the row's own 12px gap. The
	   earlier 656→760→900px progression was working around the real
	   constraint instead of fixing it: the Elementor CONTAINER wrapping
	   this section had no content_width setting, so it was using
	   Elementor's own default boxed width rather than giving this section
	   room to reach 960px at all — fixed on the container itself
	   (content_width: 'full', matching the footer container's own
	   setting), not by fighting it from in here. */
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 960px;
	margin-inline: auto;
}
.recart-contact-form .recart-popup__form {
	gap: 12px;
	flex: none;
	min-height: auto;
}
.recart-contact-form .recart-popup__row {
	/* Base rule uses align-items:flex-start (left alone for the popup,
	   whose own fixed-height scroll chain this isn't touched for) — here,
	   stretch makes a row's two columns match heights only when they
	   actually differ, e.g. one field currently showing a validation error
	   and its row partner not. Doesn't add any space when both columns are
	   already the same height, which is the normal case. */
	align-items: stretch;
}
.recart-contact-form .recart-popup-field__label {
	/* !important: a plain (non-!important) version of this same rule was
	   already live and verified present in the deployed CSS, yet "Phone /
	   WhatsApp" was still visibly wrapping to two lines in a real browser —
	   true wrapping, not overflow or ellipsis-truncation, which shouldn't
	   be possible if white-space:nowrap were actually winning. Forcing it
	   removes any doubt about whatever was overriding it. */
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.recart-contact-form .recart-popup-field__label-row {
	flex-wrap: nowrap !important;
}
.recart-contact-form .recart-popup-field:not(.recart-popup-field--message) .recart-popup-field__control {
	/* Set here instead of (or alongside) the label itself — white-space
	   inherits by default, so this covers the label and anything else
	   inside the control in one place, at the level the actual sizing
	   constraint lives, rather than fighting it only on the leaf label
	   element further down. Excludes the message field specifically — its
	   textarea is the one place multi-line wrapping is actually wanted,
	   not something to force out of. */
	white-space: nowrap !important;
}
.recart-contact-form .recart-popup-field__input {
	/* Inputs/selects/textareas don't inherit white-space from their
	   ancestor the same way plain text does in every browser — explicit
	   here so the control's nowrap doesn't accidentally break placeholder
	   text or typed values wrapping inside the input itself. */
	white-space: normal !important;
}
.recart-contact-form .recart-popup__submit-row {
	margin-top: 12px;
	align-items: center;
}
.recart-contact-form .recart-popup__submit {
	align-self: center;
	margin: 0 auto;
}
.recart-contact-form .recart-popup__privacy {
	text-align: center;
}
.recart-contact-form .recart-popup__state {
	position: static;
	inset: auto;
	padding: 64px 0;
}

@media (max-width: 1024px) {
	.recart-contact-page {
		gap: 48px;
		padding: 48px 24px 64px;
	}
	.recart-contact-page__intro {
		/* No cap at all now — fills whatever width .recart-contact-page's
		   own 24px side padding leaves (e.g. 382px at a 430px screen),
		   rather than plateauing at the old 342px Figma-reference number. */
		width: 100%;
		max-width: none;
		min-width: 0;
		gap: 16px;
	}
	.recart-contact-page__title {
		font-size: 50.6px;
		line-height: 55.2px;
	}
	.recart-contact-page__lede {
		font-size: 18.4px;
		line-height: 27.6px;
	}
	.recart-contact-form {
		/* No cap — same reasoning as the intro above. The page's own 24px
		   side padding is the only inset; the form just fills whatever
		   width that leaves. */
		width: 100%;
		max-width: none;
		min-width: 0;
	}
	.recart-contact-form .recart-popup__row {
		flex-direction: column;
	}
	.recart-contact-form .recart-popup__submit {
		width: max-content;
	}
}

/* ===== Venue / location UK place autocomplete =====
   Shared by the popup's and the /contact page's "Venue / location" field
   (both share .recart-popup-field[data-field="venue"]) — one dropdown,
   moved into whichever field is currently active (see app.js). Fixed
   positioning (top/left/width set inline by JS from the field's own
   bounding rect) is what lets it escape .recart-popup__scroll's own
   overflow-y:auto clipping on the popup, regardless of how deep in the
   DOM it sits — not something a static/absolute position could do here. */
.recart-venue-suggest {
	position: fixed;
	z-index: 2000;
	background: #FFFFFF;
	border: 1px solid var(--recart-popup-border-default, rgba(165, 173, 185, 0.4));
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(25, 27, 31, 0.16);
	padding: 6px;
	overflow-y: auto;
	box-sizing: border-box;
}
.recart-venue-suggest__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
}
.recart-venue-suggest__item:hover,
.recart-venue-suggest__item.is-active {
	background: var(--recart-action-default);
}
.recart-venue-suggest__item:hover .recart-venue-suggest__name,
.recart-venue-suggest__item.is-active .recart-venue-suggest__name,
.recart-venue-suggest__item:hover .recart-venue-suggest__region,
.recart-venue-suggest__item.is-active .recart-venue-suggest__region {
	color: var(--recart-text-on-action);
}
.recart-venue-suggest__name {
	font-weight: 500;
	font-size: 14.95px;
	line-height: 21px;
	color: var(--recart-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.recart-venue-suggest__region {
	flex-shrink: 0;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	color: var(--recart-text-secondary);
	opacity: 0.7;
	white-space: nowrap;
}
.recart-venue-suggest__credit {
	margin: 4px 0 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 16px;
	color: var(--recart-text-secondary);
	opacity: 0.55;
}
.recart-venue-suggest__credit a {
	color: inherit;
	text-decoration: underline;
}
@media (max-width: 1024px) {
	.recart-venue-suggest {
		/* Same fixed/JS-positioned mechanism as desktop — only the item
		   sizing changes, to stay comfortably tappable on a touchscreen. */
		padding: 8px;
	}
	.recart-venue-suggest__item {
		padding: 10px;
	}
}

/* ===== Phone / WhatsApp mask (intl-tel-input, loaded from CDN in app.js) =====
   Scoped to the Phone / WhatsApp field specifically (shared by the popup
   and /contact page, both data-field="phone"). intl-tel-input's own CSS
   uses --iti-* custom properties for theming — overriding those here
   instead of fighting individual declarations. */
.recart-popup-field[data-field="phone"] .iti {
	/* The library's own CSS already sets position:relative on .iti, but
	   that's what the flag/dial-code (.iti__country-container, position:
	   absolute; left:0) is positioned against — if anything in the popup
	   specifically were to end up overriding or losing that (an Elementor
	   popup wrapper has its own show/hide + centering styling that a plain
	   Canvas-templated page like /contact/ never goes through), .iti__
	   country-container would anchor to the next positioned ancestor up
	   instead — .recart-popup-field__control — landing the flag somewhere
	   other than flush against this input's own left edge regardless of
	   how correct the input's own padding-left is, which fits what's
	   actually being seen: identical, correct padding-left on both pages,
	   broken only on the popup. Making it explicit and !important here
	   costs nothing on /contact/ (same value either way) and closes that
	   gap on the popup if that's what's actually happening. */
	position: relative !important;
	display: block;
	width: 100%;
	/* Confirmed by directly diffing the two pages' real rendered HTML: the
	   popup wraps this field in .recart-popup__scroll (flex-direction:
	   column, overflow-y:auto, min-height:0) so it can scroll on short
	   viewports — /contact/ is a plain page with nothing to scroll and has
	   no such wrapper at all. A block child's height inside a nested
	   flex/overflow chain like that can resolve to 0 in some browsers
	   (min-height:auto's content-based sizing doesn't always propagate
	   cleanly through several nested flex levels), and .iti__country-
	   container's top:0/bottom:0 (which is what positions the flag) is
	   measured against *this* element's own height — if it collapses, the
	   flag has no real box to span, which would show up as exactly this:
	   correct padding-left, broken only where the scroll wrapper exists.
	   flex-shrink:0 keeps it from being squeezed by the scroll container's
	   own flex sizing in the first place, and min-height matches the
	   phone input's own line-height so .iti always has a real, non-zero
	   box to position the flag against regardless of ambient flex context. */
	flex-shrink: 0;
	min-height: 23px;
	--iti-border-color: var(--recart-popup-border-default, rgba(165, 173, 185, 0.4));
	--iti-country-selector-bg: transparent;
	--iti-icon-color: var(--recart-text-secondary);
	--iti-hover-color: rgba(112, 21, 36, 0.06);
}
/* No padding-left override needed here — .iti__tel-input is excluded from
   the padding-left:0 !important reset at its source (further up this
   file), so intl-tel-input's own inline style (dynamically measured
   against the real rendered flag/dial-code width) applies untouched.
   An earlier version here used padding-left: revert !important, on a
   theory that the popup loaded some competing Elementor CSS /contact/
   didn't — checked directly: there is no such rule, popup and /contact/
   both load nothing but this one stylesheet. revert turned out to be the
   actual bug: confirmed via computed style that `revert !important` on
   this property doesn't resolve to a usable value at all (computes back
   out as the literal string "revert"), so it was silently overriding the
   correct exclusion above with something that didn't work, on both pages
   — removing it is what actually fixes it, not what breaks it. */
.recart-popup-field[data-field="phone"] .iti__selected-country-primary {
	font-family: 'Manrope', sans-serif;
}
.recart-popup-field[data-field="phone"] .iti__selected-dial-code {
	color: var(--recart-text-secondary);
	font-size: 16.1px;
}
/* Swaps out the static phone.svg icon (a plain sibling of the input,
   untouched by the library) once intl-tel-input's own flag takes over
   that visual role — added by app.js only after the library actually
   initializes, so the old icon stays put if the CDN script fails to load. */
.recart-popup-field[data-field="phone"].recart-has-iti .recart-popup-field__icon {
	display: none;
}
/* dropdownParent:document.body (set in app.js) detaches the country list
   from .recart-popup-field entirely, to escape .recart-popup__scroll's
   overflow-y:auto clipping inside the popup — same reasoning as the venue
   suggestions above. It can't be scoped under .recart-popup-field here as
   a result, but .iti__country-list/.iti--detached-country-selector are
   specific enough on their own not to collide with anything else sitewide. */
.iti--detached-country-selector {
	z-index: 999999 !important;
}
.iti__country-list {
	font-family: 'Manrope', sans-serif;
	background: #FFFFFF;
	border: 1px solid var(--recart-popup-border-default, rgba(165, 173, 185, 0.4));
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(25, 27, 31, 0.16);
	padding: 6px;
}
.iti__country {
	border-radius: 10px;
	padding: 8px 10px;
}
.iti__country.iti__highlight {
	background-color: var(--recart-action-default);
}
.iti__country.iti__highlight .iti__country-name,
.iti__country.iti__highlight .iti__dial-code {
	color: var(--recart-text-on-action);
}

/* ===== Occasion switcher (replaces the old 3-row services list) =====
   Figma: REC ART / Occasion switcher (node 2089:4150), 5 occasions ×
   2 formats. Desktop matches the Figma frame directly; mobile follows a
   separate, explicitly-specified grid (see the @media block below) rather
   than a literal port of the Figma mobile variants. Single shared content
   panel (#recart-panel-service), text/photo swapped via JS per tab —
   not 5 separate DOM panels — so "no height jump" only has one layout to
   stay consistent, and non-active photos are naturally never requested
   (no loading="lazy" needed: the browser simply never sees their src
   until that tab is actually clicked). */
.recart-switcher {
	background: var(--recart-paper);
	display: flex;
	flex-direction: column;
	gap: 32px;
	/* No top padding — the About section right above already carries its
	   own 112px bottom padding, so a matching top value here was doubling
	   up into a much bigger gap than the site's normal between-section
	   rhythm. Side/bottom padding unchanged. */
	padding: 0 80px 112px;
}
.recart-switcher__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.recart-switcher__eyebrow {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-accent);
}
.recart-switcher__heading-row {
	display: flex;
	gap: 64px;
	align-items: flex-start;
}
.recart-switcher__title {
	flex: 1 0 0;
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 73.6px;
	line-height: 80.5px;
	color: var(--recart-text-primary);
}
.recart-switcher__subtitle {
	/* max-width (not a fixed width) — Figma's 1440px desktop frame had
	   headroom this never actually needed, but the Elementor container
	   this sits in isn't always that wide, and a fixed width doesn't
	   shrink with it. */
	flex: 1 1 320px;
	max-width: 480px;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
}
.recart-switcher__subtitle p {
	margin: 0;
}

/* ----- Tabs ----- */
.recart-switcher__tabs {
	background: #FFFFFF;
	display: flex;
	gap: 8px;
	padding: 8px;
	border-radius: var(--recart-radius-panel, 28px);
}
.recart-switcher__tab {
	flex: 1 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 16px;
	border: none;
	border-radius: var(--recart-radius-pill, 999px);
	background: transparent;
	color: var(--recart-text-secondary);
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.recart-switcher__tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.recart-switcher__tab-icon svg {
	width: 100%;
	height: 100%;
}
.recart-switcher__tab:hover {
	/* Hover previews the active look (burgundy fill, white text/icon) on a
	   slightly darker shade (--recart-action-hover) than the true active
	   state (--recart-action-default), rather than just tinting the text —
	   same distinction the rest of the site already uses for hover vs.
	   active/pressed burgundy. */
	background: var(--recart-action-hover);
	color: var(--recart-text-on-action, #FFFFFF);
}
.recart-switcher__tab[aria-selected="true"]:hover {
	background: var(--recart-action-default);
}
.recart-switcher__tab[aria-selected="true"] {
	background: var(--recart-action-default);
	color: var(--recart-text-on-action, #FFFFFF);
}
.recart-switcher__tab[aria-selected="true"]:hover {
	color: var(--recart-text-on-action, #FFFFFF);
}
.recart-switcher__tab:focus-visible {
	outline: 2px solid var(--recart-action-default);
	outline-offset: 2px;
}

/* ----- Panel: copy + photo ----- */
.recart-switcher__panel {
	display: flex;
	gap: 64px;
	align-items: flex-start;
}
.recart-switcher__copy {
	/* 528:688 is Figma's own proportion between the two columns — using it
	   as flex-grow weights (both shrinkable, each with a sane floor) means
	   the two scale together at whatever width is actually available,
	   instead of the photo staying rigid at a fixed px and the text
	   column absorbing 100% of the difference (which is what left as
	   little as ~228px for text inside a boxed ~980px container). */
	flex: 528 1 280px;
	min-width: 0;
	min-height: 576px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* Fade target — see .is-switching below. Reduced-motion drops the
	   transition entirely (further down), leaving an instant swap. */
	transition: opacity 220ms ease;
}
.recart-switcher__copy:focus-visible {
	outline: 2px solid var(--recart-action-default);
	outline-offset: 4px;
	border-radius: 8px;
}
.recart-switcher.is-switching .recart-switcher__copy,
.recart-switcher.is-switching .recart-switcher__photo-img {
	opacity: 0;
}
.recart-switcher__service-eyebrow {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-accent);
}
.recart-switcher__service-title {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 62px;
	line-height: 68px;
	color: var(--recart-text-primary);
}
.recart-switcher__service-body {
	margin: 0;
	max-width: 496px;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20.7px;
	line-height: 32.2px;
	color: var(--recart-text-secondary);
}

/* Weddings-only pricing block */
.recart-switcher__pricing {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.recart-switcher__price-row {
	display: flex;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--recart-text-secondary);
}
.recart-switcher__price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 168px;
}
.recart-switcher__price-label {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}
.recart-switcher__price-amount {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 36.8px;
	line-height: 41.4px;
	color: var(--recart-text-accent);
}
.recart-switcher__price-note {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}
.recart-switcher__price-note a {
	color: var(--recart-text-accent);
	text-decoration: underline;
}

/* Non-wedding "available formats" row */
.recart-switcher__formats p {
	margin: 0;
	display: flex;
	gap: 8px;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	white-space: nowrap;
	color: var(--recart-text-primary);
}
.recart-switcher__formats p span:nth-child(2) {
	color: var(--recart-text-secondary);
}

.recart-switcher__secondary {
	margin: 0;
	max-width: 496px;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}

.recart-switcher__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}
.recart-switcher__whatsapp {
	width: max-content;
}
.recart-switcher__cta-hint {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}

/* ----- Photo ----- */
.recart-switcher__photo {
	/* Same 528:688 proportional sizing as .recart-switcher__copy above —
	   this used to be a rigid width:688px that never gave an inch back to
	   the text column regardless of how little space was actually there. */
	flex: 688 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Dedicated clip boundary around the <img> alone (same position:relative +
   aspect-ratio + overflow:hidden shape as .recart-story-card__photo above)
   — the scroll-driven GSAP zoom scales the photo up to 1.12x via transform,
   which doesn't reflow, so without its own frame the enlarged image would
   paint over the caption below rather than stopping at its own edges. */
.recart-switcher__photo-frame {
	position: relative;
	aspect-ratio: 688 / 576;
	border-radius: var(--recart-radius-panel);
	overflow: hidden;
}
#services .recart-switcher__photo-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* #services prefix: Elementor's own base `.elementor img` rule was
	   winning the cascade over the bare class selector and computing this
	   to 0, confirmed in a real browser — this selector is more specific
	   without needing !important. */
	/* Same token as .recart-story-card__photo (Selected Stories) —
	   redundant with the frame's own radius above now that the frame
	   clips, kept so the image still reads correctly if anything is ever
	   rendered outside that frame. */
	border-radius: var(--recart-radius-panel);
	transition: opacity 220ms ease;
}
.recart-switcher__caption {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 13.8px;
	line-height: 20.7px;
	letter-spacing: 0.345px;
	color: var(--recart-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.recart-switcher__copy,
	.recart-switcher__photo-img {
		transition: none !important;
	}
}

/* ----- Mobile ----- */
@media (max-width: 1024px) {
	.recart-switcher {
		padding: 0 24px 64px;
		gap: 24px;
	}
	.recart-switcher__heading-row {
		flex-direction: column;
		gap: 16px;
	}
	.recart-switcher__title {
		/* flex:1 0 0 above is a desktop row value (grow to fill the
		   remaining width next to the subtitle) — heading-row switches to
		   a column here, making that same flex-basis:0/grow:1 apply to
		   HEIGHT instead, inflating this block with empty space it never
		   needed. flex:none lets it size to its own content again. */
		flex: none;
		/* "For every chapter." on one line at 390px and fluid below it,
		   rather than the desktop's fixed 73.6px wrapping awkwardly at
		   narrow widths. 46px is the 390px reference size; clamp lets it
		   shrink smoothly on narrower screens instead of wrapping or
		   overflowing, and never exceeds 46px back up toward desktop
		   widths (the fixed desktop rule above already takes over past
		   1024px). */
		font-size: clamp(34px, 11.8vw, 46px);
		line-height: 1.1;
		white-space: nowrap;
	}
	.recart-switcher__subtitle {
		/* Same reset as the title above — desktop's flex-basis:320px was
		   being read as a 320px-tall starting height once this column
		   stacks vertically, which was most of the gap on its own. */
		flex: none;
		width: 100%;
	}
	.recart-switcher__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		border-radius: 24px;
	}
	.recart-switcher__tab {
		height: 48px;
		padding: 0 12px;
	}
	.recart-switcher__tab[data-occasion="couples"] {
		grid-column: 1 / -1;
	}
	.recart-switcher__panel {
		flex-direction: column-reverse;
		gap: 24px;
	}
	.recart-switcher__copy {
		/* The 528/280px flex-grow/basis above is tuned for the DESKTOP row
		   layout, distributing WIDTH between copy and photo — column-reverse
		   makes the main axis vertical here, so without resetting this too,
		   that same huge grow factor was being applied to HEIGHT instead,
		   inflating this block (or the photo's own 688/320px) with empty
		   space well past what either's actual content needed. flex:none
		   lets both size naturally again — content height for copy,
		   aspect-ratio for the photo. */
		flex: none;
		min-height: 0;
		width: 100%;
	}
	.recart-switcher__service-title {
		font-size: 46px;
		line-height: 50.6px;
	}
	.recart-switcher__service-body,
	.recart-switcher__secondary {
		max-width: 100%;
	}
	.recart-switcher__price-row {
		flex-wrap: wrap;
	}
	.recart-switcher__photo {
		/* Same reset as .recart-switcher__copy above — the desktop
		   688/320px flex-grow/basis was being misapplied to height on this
		   vertical (column-reverse) axis instead of width. */
		flex: none;
		width: 100%;
	}
}

/* Anchor-link scroll offset for the fixed navbar — #services (this
   switcher), #work (Stories, renamed from #stories to match the Hero's
   "View our work" link), #experience (About, pinned timeline section) and
   #faq (Guide). Native browser anchor scrolling (plain <a href="#id">, used
   whenever the navbar link is clicked from a different page and lands here
   via a full navigation — the JS-driven in-page version computes its own
   offset at click time instead) has no way to know about the fixed navbar
   sitting on top of the target otherwise. */
#services,
#work,
#experience,
#faq {
	scroll-margin-top: 135px;
}
@media (max-width: 1024px) {
	#services,
	#work,
	#experience,
	#faq {
		scroll-margin-top: 104px;
	}
}

/* ===== Story lightbox (REC ART / Story lightbox, node 2126:5060) =====
   One shared overlay, re-populated per story on open — same "single DOM
   instance, content swapped by JS" shape as the occasion switcher's panel.
   Kept entirely separate from the Elementor enquiry popup: its own
   overlay, its own open/close state, no shared markup or handlers. */
.recart-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: var(--recart-text-primary);
	display: none;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	box-sizing: border-box;
}
.recart-lightbox.is-open {
	display: flex;
}
.recart-lightbox__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 44px;
	flex-shrink: 0;
}
.recart-lightbox__title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
	font-size: 36.8px;
	line-height: 43.7px;
	color: var(--recart-text-on-action);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.recart-lightbox__close {
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-paper);
	color: var(--recart-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.recart-lightbox__close svg {
	width: 20px;
	height: 20px;
}
.recart-lightbox__stage {
	flex: 1 0 0;
	min-height: 0;
	position: relative;
	width: 100%;
	/* The zoomed photo (up to 3x) is often larger than this box — clip it
	   here so it never visually bleeds into the header/nav rows above and
	   below, rather than relying on nothing. */
	overflow: hidden;
}
.recart-lightbox__stage .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}
.recart-lightbox__stage img {
	/* width/height:100% + object-fit:contain (rather than width/height:auto
	   capped by max-width/max-height) so the photo scales UP to fill the
	   stage too, not just down — auto sizing never exceeds the image's own
	   intrinsic pixel size, which left modest-resolution photos stranded
	   small in the middle of a much larger stage, especially on mobile. */
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0 auto;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	/* Hints the scroll-wheel zoom (desktop only — touch has no cursor to
	   show this on anyway, so no media query needed). */
	cursor: zoom-in;
}
.recart-lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 44px;
	flex-shrink: 0;
}
.recart-lightbox__nav-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--recart-radius-pill);
	background: var(--recart-paper);
	color: var(--recart-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.recart-lightbox__nav-btn svg {
	width: 20px;
	height: 20px;
}
.recart-lightbox__nav-btn[hidden] {
	display: none;
}
.recart-lightbox__counter {
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16.1px;
	line-height: 23px;
	color: var(--recart-text-on-action);
	margin: 0;
	white-space: nowrap;
}
@media (max-width: 1024px) {
	.recart-lightbox {
		padding: 24px;
		gap: 16px;
	}
	.recart-lightbox__title {
		font-size: 32.2px;
		line-height: 40px;
	}
}

/* ----- Third-party overrides ----- */
/* Cookie-consent plugin's own "copyright"/attribution element — not part
   of this design system, not in any page's own markup (rendered by the
   plugin's own JS after load), hidden per client request. !important
   since the plugin's own stylesheet both loads after this one and likely
   has at least this much specificity on its own class. */
.cc-copyright {
	display: none !important;
}