/**
 * Regroup Contact Flow — routed enquiry on /contact/.
 *
 * Lives inside .contact-form .form, which is cream text on the page's dark
 * ground (.sand = #F8F5F0). So this is a dark-ground skin: cream type,
 * cream-filled inputs to match the theme's own, and #AA8765 — the accent
 * the rest of this page already hovers to — for selection.
 *
 * TYPE. Two faces, each doing the job it does everywhere else on the site:
 *
 * - Graphik Condensed for titles, at DISPLAY size. The theme forces
 *   `body h1..h5 { font-family: 'Graphik Condensed Web' !important }` and
 *   sizes them 32–152px. A first pass set these headings at 18px, which
 *   rendered a display face as a squashed bold label — the thing that
 *   looked wrong. Graphik earns its keep large or not at all.
 * - MatterMono, uppercase and letterspaced, for field labels. That is
 *   exactly what the theme's own form labels use
 *   (`.contact-form .form div.field label`), so the questions sit in the
 *   house voice rather than a new one.
 *
 * Everything is scoped under #regroup-contact. The ID beats the theme's
 * `body .contact-form input[type='text']` rules without !important — but
 * NOT the `!important` on heading font-family, which is why the headings
 * are styled to suit Graphik rather than fighting it.
 *
 * ⚠ New CSS files must be added to the LiteSpeed optm-css_exc list, or the
 * optimizer reuses one URL for changed CSS and browsers hold a stale copy
 * for 7 days. See the cache-layers note.
 */

#regroup-contact {
	--cf-cream: #F8F5F0;
	--cf-ink: #1c1c1c;
	--cf-accent: #AA8765;
	--cf-error: #E0714F;
	--cf-hair: rgba(248, 245, 240, 0.28);
	--cf-hair-soft: rgba(248, 245, 240, 0.14);
	--cf-mono: 'MatterMonoRegular', ui-monospace, SFMono-Regular, monospace;
	--cf-sans: 'MatterRegular', system-ui, sans-serif;

	/* One spacing scale, so the rhythm is decided once rather than per rule. */
	--cf-gap-section: 44px;
	--cf-gap-field: 30px;
	--cf-gap-tight: 10px;

	color: var(--cf-cream);
	font-family: var(--cf-sans);
	line-height: 1.5;
}

#regroup-contact *,
#regroup-contact *::before,
#regroup-contact *::after { box-sizing: border-box; }

/*
 * Embedded via [regroup_enquiry] — the fit booking page. The host page
 * supplies its own heading and intro above, so the form starts clean.
 *
 * The gutter has to come from here. On the contact template the flow sits
 * inside .contact-form, which the theme has already padded; dropped into an
 * Elementor section it inherits nothing — the fit page's section is
 * full-bleed with zero padding at every level, and the Premium Addons form
 * it replaced brought its own. Without this the form sits flush against the
 * window edge. Values match the theme's own .padding_horizontal so the
 * embed lines up with everything else on the page.
 *
 * max-width because a form is not a hero: left unbounded on a wide monitor
 * the chip rows spread across 1800px and stop reading as a set of choices.
 */
#regroup-contact.rg-cf-embed {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 48px;
}
#regroup-contact.rg-cf-embed .rg-cf-panel { margin-top: 0; }

@media screen and (max-width: 1200px) {
	#regroup-contact.rg-cf-embed { padding: 0 32px; }
}
@media screen and (max-width: 800px) {
	#regroup-contact.rg-cf-embed { padding: 0 24px; }
}

/* Kept for screen readers and as a focus target; not shown twice. */
#regroup-contact .rg-cf-visually-hidden,
/* Screen-reader announcements only. */
#regroup-contact .rg-cf-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- display headings (Graphik) ---------- */

#regroup-contact .rg-cf-q {
	margin: 0 0 26px;
	font-size: 44px;
	line-height: 0.92;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--cf-cream);
	/* font-family comes from the theme's `body h2` !important rule. */
}
/*
 * No focus ring on the headings. They carry tabindex="-1" purely so focus
 * can be moved to them for screen readers when a panel opens — nobody tabs
 * to a heading, so a visible box around it isn't a focus affordance, it
 * just reads as an error state. (Interactive controls keep their rings.)
 */
#regroup-contact .rg-cf-q:focus,
#regroup-contact .rg-cf-q:focus-visible { outline: none; }

#regroup-contact .rg-cf-panel-q {
	margin-top: 4px;
	/*
	 * The sticky header is translucent and overlaps content by design, so a
	 * heading scrolled to by focus() would land underneath it. Same fix the
	 * theme already uses on checkout.
	 */
	scroll-margin-top: 130px;
}

#regroup-contact .rg-cf-subhead {
	margin: var(--cf-gap-section) 0 24px;
	padding-top: 30px;
	border-top: 1px solid var(--cf-hair-soft);
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--cf-cream);
}

/* ---------- body copy ---------- */

#regroup-contact .rg-cf-body {
	margin: 0 0 20px;
	font-size: 17px;
	line-height: 1.55;
	max-width: 46em;
}
#regroup-contact .rg-cf-body a,
#regroup-contact .rg-cf-aside a {
	color: var(--cf-cream);
	text-decoration: underline;
	text-underline-offset: 3px;
}
#regroup-contact .rg-cf-body a:hover,
#regroup-contact .rg-cf-aside a:hover { color: var(--cf-accent); }

#regroup-contact .rg-cf-aside {
	margin: -14px 0 var(--cf-gap-section);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(248, 245, 240, 0.72);
	max-width: 46em;
}

/* ---------- topic chooser ---------- */

#regroup-contact .rg-cf-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#regroup-contact .rg-cf-topic {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 220px;
	min-height: 44px; /* touch target */
	padding: 16px 18px;
	text-align: left;
	background: transparent;
	color: var(--cf-cream);
	border: 1px solid var(--cf-hair);
	border-radius: 4px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.18s, background 0.18s, color 0.18s;
}
#regroup-contact .rg-cf-topic:hover { border-color: var(--cf-cream); }
#regroup-contact .rg-cf-topic:focus-visible {
	outline: 2px solid var(--cf-accent);
	outline-offset: 2px;
}
#regroup-contact .rg-cf-topic.is-on {
	background: var(--cf-cream);
	border-color: var(--cf-cream);
	color: var(--cf-ink);
}

#regroup-contact .rg-cf-topic-label {
	font-family: var(--cf-mono);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
#regroup-contact .rg-cf-topic-blurb {
	font-size: 13px;
	line-height: 1.35;
	opacity: 0.66;
}

/*
 * The sales option is offered honestly but never advertised — it sits at
 * the end, quieter than the rest, so a customer's eye passes over it and
 * someone with a pitch still finds an obvious door.
 */
#regroup-contact .rg-cf-topic-quiet { opacity: 0.5; }
#regroup-contact .rg-cf-topic-quiet:hover,
#regroup-contact .rg-cf-topic-quiet.is-on { opacity: 1; }

/* ---------- picked bar (desktop) ---------- */

/*
 * Once a topic is chosen the six cards are noise above the questions, so
 * they fold away behind one line naming the choice. Keeps the answer
 * changeable without keeping the whole grid on screen.
 */
#regroup-contact .rg-cf-picked {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 var(--cf-gap-section);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--cf-hair-soft);
}
#regroup-contact .rg-cf-picked-label {
	font-family: var(--cf-mono);
	font-size: 11px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	opacity: 0.55;
}
#regroup-contact .rg-cf-picked-value {
	font-family: var(--cf-mono);
	font-size: 14px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--cf-accent);
}
#regroup-contact .rg-cf-change {
	margin-left: auto;
	padding: 8px 6px;
	background: none;
	border: 0;
	color: rgba(248, 245, 240, 0.6);
	font-family: var(--cf-mono);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
#regroup-contact .rg-cf-change:hover { color: var(--cf-cream); }

#regroup-contact .rg-cf-chooser.is-collapsed { display: none; }

/* ---------- the interview ---------- */

/*
 * One question at a time. The question gets heading weight because it IS
 * the label — there's no separate field caption to compete with it — and
 * the step count sits above in mono, quiet, so progress is legible without
 * becoming the point.
 */
#regroup-contact .rg-cf-progress {
	margin: 0 0 10px;
	font-family: var(--cf-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(248, 245, 240, 0.45);
}
#regroup-contact .rg-cf-optional { color: var(--cf-accent); }

/*
 * A <p>, not a heading — see the note in the JS. That keeps it out of the
 * theme's `body h1..h5 { font-family: Graphik Condensed !important }` rule,
 * which was squeezing a display face down to question size and rendering it
 * compressed and heavy. Matter Regular at 22px is the reading face doing
 * what it's for.
 */
#regroup-contact .rg-cf-step-q {
	margin: 0 0 12px;
	font-family: var(--cf-sans);
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--cf-cream);
	scroll-margin-top: 130px;
}
#regroup-contact .rg-cf-step-q:focus,
#regroup-contact .rg-cf-step-q:focus-visible { outline: none; }

/*
 * What's been said so far. Tappable, because the natural instinct on
 * seeing your own answer is to want to change it — and a conversation you
 * can't correct isn't one.
 */
#regroup-contact .rg-cf-answered {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--cf-gap-section);
	border-top: 1px solid var(--cf-hair-soft);
}
#regroup-contact .rg-cf-answered-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	width: 100%;
	padding: 11px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--cf-hair-soft);
	text-align: left;
	cursor: pointer;
}
#regroup-contact .rg-cf-answered-row:hover .rg-cf-answered-a { color: var(--cf-cream); }
#regroup-contact .rg-cf-answered-q {
	flex: 0 0 auto;
	font-family: var(--cf-mono);
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(248, 245, 240, 0.45);
}
#regroup-contact .rg-cf-answered-a {
	flex: 1 1 auto;
	font-family: var(--cf-sans);
	font-size: 14px;
	line-height: 1.4;
	color: var(--cf-accent);
	transition: color 0.18s;
}

#regroup-contact .rg-cf-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-top: var(--cf-gap-section);
}
#regroup-contact .rg-cf-next { min-width: 180px; cursor: pointer; }

/* Back and Skip are quiet: moving forward should always look like the
   obvious thing to do. */
#regroup-contact .rg-cf-skip,
#regroup-contact .rg-cf-back {
	margin: 0;
	padding: 10px 6px;
	background: none;
	border: 0;
	color: rgba(248, 245, 240, 0.55);
	font-family: var(--cf-mono);
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}
#regroup-contact .rg-cf-skip:hover,
#regroup-contact .rg-cf-back:hover { color: var(--cf-cream); }

/* ---------- fields ---------- */

#regroup-contact .rg-cf-field { margin: 0 0 var(--cf-gap-field); }

#regroup-contact .rg-cf-label {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--cf-gap-tight);
	font-family: var(--cf-mono);
	font-size: 15px;
	line-height: 1.25;
	letter-spacing: 1.6px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--cf-cream);
}
#regroup-contact .rg-cf-req { color: var(--cf-accent); }

#regroup-contact .rg-cf-help {
	margin: -4px 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(248, 245, 240, 0.62);
	max-width: 44em;
}

#regroup-contact .rg-cf-input {
	width: 100%;
	padding: 13px 15px;
	background: var(--cf-cream);
	color: var(--cf-ink);
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--cf-sans);
	/* 16px: anything smaller and iOS zooms the page on focus. */
	font-size: 16px;
	line-height: 1.45;
	scroll-margin-top: 130px;
}
#regroup-contact .rg-cf-input:focus-visible {
	outline: 2px solid var(--cf-accent);
	outline-offset: 2px;
}
#regroup-contact .rg-cf-textarea { resize: vertical; min-height: 116px; }

/*
 * Autofilled fields render with the browser's own yellow, which is nothing
 * to do with this palette and looked broken next to the cream inputs.
 * There's no property for "autofill background" — the inset box-shadow
 * trick is the only way to repaint it, and -webkit-text-fill-color is the
 * only way to recolour the text, since `color` is ignored while autofilled.
 */
#regroup-contact .rg-cf-input:-webkit-autofill,
#regroup-contact .rg-cf-input:-webkit-autofill:hover,
#regroup-contact .rg-cf-input:-webkit-autofill:focus,
#regroup-contact .rg-cf-input:autofill {
	-webkit-text-fill-color: var(--cf-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--cf-cream) inset;
	box-shadow: 0 0 0 1000px var(--cf-cream) inset;
	caret-color: var(--cf-ink);
	font-family: var(--cf-sans);
}

#regroup-contact .rg-cf-field.has-error .rg-cf-input { border-color: var(--cf-error); }
#regroup-contact .rg-cf-field.has-error .rg-cf-label { color: var(--cf-error); }

/* ---------- chips ---------- */

/*
 * Chips need more air under a label than an input does. An input's fill
 * starts where the box starts, so the label's own margin reads as the gap;
 * a pill's border is a thin line with space inside it, so the same margin
 * leaves the label looking stuck to the row. Hence the extra top margin
 * here rather than a bigger --cf-gap-tight, which would loosen every
 * label on the form to fix one case.
 */
#regroup-contact .rg-cf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

#regroup-contact .rg-cf-chip {
	min-height: 44px; /* touch target */
	padding: 11px 17px;
	background: transparent;
	color: var(--cf-cream);
	border: 1px solid var(--cf-hair);
	border-radius: 999px;
	cursor: pointer;
	font-family: var(--cf-sans);
	font-size: 15px;
	line-height: 1.2;
	transition: border-color 0.18s, background 0.18s, color 0.18s;
}
#regroup-contact .rg-cf-chip:hover { border-color: var(--cf-cream); }
#regroup-contact .rg-cf-chip:focus-visible {
	outline: 2px solid var(--cf-accent);
	outline-offset: 2px;
}
#regroup-contact .rg-cf-chip.is-on {
	background: var(--cf-accent);
	border-color: var(--cf-accent);
	color: var(--cf-ink);
}

/* ---------- chat launcher, while the overlay is open ---------- */

/*
 * The chat widget is fixed at z-index 2147483000, above this overlay, so
 * while the interview is open it lands on top of the Send button — two ways
 * to talk to us competing for the same corner, and the less important one
 * winning. Out of the way for the duration; back on close.
 *
 * !important because the widget styles its own launcher aggressively, and
 * scoped to a body class so we never edit the widget itself.
 */
body.rg-cf-overlay-open #regroup-chat-root,
body.rg-cf-overlay-open .rg-chat-bubble {
	display: none !important;
}

/* ---------- chip explainer ---------- */

/*
 * Appears under the chips when the chosen option has something to say. It
 * has to be calm: someone reading their way along seven sessions will see
 * this appear seven times, so it must not announce itself each time.
 */
#regroup-contact .rg-cf-note {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	border-left: 2px solid var(--cf-accent);
	transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease;
}
#regroup-contact .rg-cf-note.is-on {
	max-height: 340px;
	opacity: 1;
	margin-top: 16px;
}
#regroup-contact .rg-cf-note-body {
	margin: 0;
	padding: 2px 0 2px 16px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(248, 245, 240, 0.78);
	max-width: 46em;
}

/* ---------- shortcut line ---------- */

/*
 * The faster route, as one quiet line under the title. It was a bordered
 * card with its own button and that was wrong: the visitor came here to
 * contact us and has very likely already been to a bike page, so a browse
 * link was taking the top of the panel to answer a question they hadn't
 * asked. Muted, small, and out of the form's way.
 */
#regroup-contact .rg-cf-shortcut {
	margin: -12px 0 var(--cf-gap-section);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(248, 245, 240, 0.6);
	max-width: 46em;
}
#regroup-contact .rg-cf-shortcut-link {
	color: var(--cf-cream);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
#regroup-contact .rg-cf-shortcut-link:hover { color: var(--cf-accent); }

#regroup-contact .rg-cf-arrow { margin-left: 4px; }

/* ---------- send, errors ---------- */

#regroup-contact .rg-cf-send {
	min-width: 200px;
	margin-top: 6px;
	cursor: pointer;
}
#regroup-contact .rg-cf-send[disabled] { opacity: 0.6; cursor: default; }

#regroup-contact .rg-cf-error:empty { display: none; }
#regroup-contact .rg-cf-error {
	margin: 0 0 18px;
	padding: 12px 15px;
	background: var(--cf-error);
	border-radius: 4px;
	color: var(--cf-ink);
	font-family: var(--cf-sans);
	font-size: 15px;
	scroll-margin-top: 130px;
}

#regroup-contact .rg-cf-urgent { font-size: 15px; opacity: 0.75; }

/*
 * When a topic's desk isn't open every day. Sits above the phone number and
 * reads a shade quieter than the thank-you itself — it's an answer to "when
 * will I hear back?", not news.
 */
#regroup-contact .rg-cf-wait { font-size: 15px; opacity: 0.75; }

/* ---------- onward journey ---------- */

/*
 * Shown only after sending. Rows rather than cards: this is an offer, not a
 * second ask, and the thank-you should still be the loudest thing on the
 * screen. Each row is a full-width tap target, which is what you want on a
 * phone right after the keyboard has gone away.
 */
#regroup-contact .rg-cf-onward-head { font-size: 22px; }

#regroup-contact .rg-cf-onward-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--cf-hair-soft);
}

#regroup-contact .rg-cf-onward-item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px 0;
	border-bottom: 1px solid var(--cf-hair-soft);
	color: var(--cf-cream);
	text-decoration: none;
	transition: color 0.18s;
}
#regroup-contact .rg-cf-onward-item:hover { color: var(--cf-accent); }
#regroup-contact .rg-cf-onward-item:focus-visible {
	outline: 2px solid var(--cf-accent);
	outline-offset: 3px;
}

#regroup-contact .rg-cf-onward-over {
	font-family: var(--cf-mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cf-accent);
}
#regroup-contact .rg-cf-onward-title {
	font-size: 17px;
	line-height: 1.35;
}
/* Date · time · location for the ride; the one-liner for everything else. */
#regroup-contact .rg-cf-onward-meta {
	font-family: var(--cf-mono);
	font-size: 12px;
	line-height: 1.4;
	color: rgba(248, 245, 240, 0.55);
}
#regroup-contact .rg-cf-onward-item .rg-cf-arrow {
	display: inline-block;
	transition: transform 0.18s;
}
#regroup-contact .rg-cf-onward-item:hover .rg-cf-arrow { transform: translateX(3px); }

/* Honeypot — off-screen, never focusable. */
#regroup-contact .rg-cf-hp {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* ---------- no JS ---------- */

/*
 * The flow is JS-driven, so without it the routing can't happen. Rather
 * than a dead panel, fall back to the thing that always works: the shop's
 * address and phone number are already printed alongside this form.
 */
#regroup-contact .rg-cf-nojs {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
}

/* ================================================================
 * MOBILE
 * ================================================================ */

/*
 * These rules reach OUTSIDE #regroup-contact, into the theme's own contact
 * layout. Safe because this stylesheet is enqueued on the contact template
 * and nowhere else (inc/contact-flow.php), so the global padding classes
 * keep their values on every other page.
 *
 * The problem being fixed: on a phone you met 128px of hero padding, then
 * the address card, and only then "What can we help with?" — the reason you
 * opened the page was three scrolls down.
 */
@media screen and (max-width: 800px) {
	.page-contact .contact-form { gap: 44px; }
	.page-contact .contact-form .form { order: -1; }

	.page-contact .title.padding_248_192_128 {
		padding-top: 88px;
		padding-bottom: 44px;
	}
}

@media (max-width: 639px) {
	#regroup-contact {
		--cf-gap-section: 34px;
		--cf-gap-field: 26px;
	}

	#regroup-contact .rg-cf-q { font-size: 34px; margin-bottom: 22px; }
	#regroup-contact .rg-cf-subhead { font-size: 26px; }
	#regroup-contact .rg-cf-send { width: 100%; }

	/*
	 * Two-up rather than six full-width cards: the whole set stays on one
	 * screen, so the choice can be taken in at a glance instead of scrolled.
	 */
	#regroup-contact .rg-cf-topic {
		flex: 1 1 calc(50% - 5px);
		min-width: 0;
		padding: 13px 14px;
	}
	#regroup-contact .rg-cf-topic-blurb { font-size: 12px; }
}

/* Narrow phones: the blurbs cost more height than they add clarity. */
@media (max-width: 400px) {
	#regroup-contact .rg-cf-topic { flex-basis: 100%; }
	#regroup-contact .rg-cf-topic-blurb { display: none; }
}

/* ---------- the mobile sheet ---------- */

/*
 * Why a sheet and not an inline panel: the theme's header is sticky AND
 * translucent (rgba(28,28,28,.5)), and hideBreadcrumbs() changes its height
 * mid-scroll. A panel opening inline below the fold slid under a moving,
 * see-through header and read as disconnected from the tap that opened it.
 * A sheet is clear of all of that.
 *
 * Geometry follows the mobile-panel spec exactly: anchored top AND bottom,
 * NEVER an explicit height. iOS reports transitional visualViewport values
 * mid-keyboard-animation, and any panel sized from that value collapses to
 * nothing for a frame. JS feeds --cf-top/left/width/kb; the fallbacks fill
 * the viewport on browsers without the Visual Viewport API.
 */
#regroup-contact .rg-cf-sheet-root { display: none; }

/* ---------- launcher + desktop modal ---------- */

#regroup-contact.rg-cf-modal-mode { display: block; }

/* ---------- the two-card close ---------- */

#regroup-contact .rg-cf-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 1000px;
	margin: 0 auto;
}
@media (max-width: 767px) {
	#regroup-contact .rg-cf-cards { grid-template-columns: 1fr; }
}

#regroup-contact .rg-cf-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 30px 28px;
	background: rgba(248, 245, 240, 0.04);
	border: 1px solid var(--cf-hair);
	border-radius: 4px;
	color: var(--cf-cream);
	text-align: left;
	text-decoration: none;
	font-family: inherit;
	cursor: pointer;
	transition: border-color 0.18s, background 0.18s;
}
#regroup-contact .rg-cf-card:hover {
	border-color: var(--cf-cream);
	background: rgba(248, 245, 240, 0.07);
}
#regroup-contact .rg-cf-card:focus-visible {
	outline: 2px solid var(--cf-accent);
	outline-offset: 3px;
}

#regroup-contact .rg-cf-card-over {
	font-family: var(--cf-mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cf-accent);
}
/*
 * The house title face, set explicitly. This is a <span>, so unlike the
 * step question it isn't caught by the theme's
 * `body h1..h5 { font-family: Graphik Condensed !important }` — which means
 * here we can ask for Graphik deliberately and at a size that suits it,
 * rather than having it forced on us at label size. Uppercase and tight
 * leading to match "QUESTIONS?" and the rest of the site's titles.
 */
#regroup-contact .rg-cf-card-title {
	font-family: 'Graphik Condensed Web', sans-serif;
	font-size: 34px;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	margin-top: 2px;
}
@media (max-width: 767px) {
	#regroup-contact .rg-cf-card-title { font-size: 30px; }
}
#regroup-contact .rg-cf-card-body {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(248, 245, 240, 0.68);
}
#regroup-contact .rg-cf-card-cta {
	margin-top: 8px;
	font-family: var(--cf-mono);
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
}
#regroup-contact .rg-cf-card:hover .rg-cf-arrow { transform: translateX(3px); }
#regroup-contact .rg-cf-card .rg-cf-arrow { display: inline-block; transition: transform 0.18s; }
#regroup-contact .rg-cf-launch { cursor: pointer; }

/*
 * Modal mode shows the overlay at every width — that's the whole point of
 * it: the interview stops depending on the host page's layout. Below 639px
 * the sheet rules further down take over and it becomes a full takeover.
 */
@media (min-width: 640px) {
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-root { display: block; }

	#regroup-contact.rg-cf-modal-mode .rg-cf-scrim {
		position: fixed;
		inset: 0;
		background: rgba(17, 17, 17, 0.6);
		opacity: 0;
		transition: opacity 0.25s;
		z-index: 9998;
	}
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-root.is-open .rg-cf-scrim { opacity: 1; }

	/*
	 * Centred dialog. max-height rather than height so a short interview
	 * step doesn't stretch to fill the screen, and the body scrolls when a
	 * long one needs it.
	 */
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -46%);
		width: min(620px, calc(100vw - 64px));
		max-height: min(760px, calc(100vh - 80px));
		display: flex;
		flex-direction: column;
		background: #1c1c1c;
		border: 1px solid var(--cf-hair-soft);
		border-radius: 6px;
		opacity: 0;
		z-index: 9999;
		transition: opacity 0.22s, transform 0.22s;
	}
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-root.is-open .rg-cf-sheet {
		opacity: 1;
		transform: translate(-50%, -50%);
	}

	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: none;
		padding: 18px 24px 16px;
		border-bottom: 1px solid var(--cf-hair-soft);
	}
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-eyebrow {
		font-family: var(--cf-mono);
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--cf-accent);
	}
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-close {
		width: 44px;
		height: 44px;
		margin: -10px -14px -10px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--cf-cream);
		cursor: pointer;
	}
	#regroup-contact.rg-cf-modal-mode .rg-cf-sheet-scroll {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 28px 24px 30px;
	}
	/* Inside a dialog nothing needs clearing the page's sticky header. */
	#regroup-contact.rg-cf-modal-mode .rg-cf-step-q,
	#regroup-contact.rg-cf-modal-mode .rg-cf-input,
	#regroup-contact.rg-cf-modal-mode .rg-cf-error { scroll-margin-top: 12px; }
}

@media (max-width: 639px) {
	#regroup-contact .rg-cf-sheet-root { display: block; }

	#regroup-contact .rg-cf-scrim {
		position: fixed;
		inset: 0;
		background: rgba(17, 17, 17, 0.5);
		opacity: 0;
		transition: opacity 0.25s;
		z-index: 9998;
	}
	#regroup-contact .rg-cf-sheet-root.is-open .rg-cf-scrim { opacity: 1; }

	#regroup-contact .rg-cf-sheet {
		position: fixed;
		top: var(--cf-top, 0px);
		left: var(--cf-left, 0px);
		right: auto;
		bottom: var(--cf-kb, 0px);
		width: var(--cf-width, 100%);
		max-width: none;
		height: auto;      /* never set — see above */
		max-height: none;
		display: flex;
		flex-direction: column;
		background: #1c1c1c;
		z-index: 9999;
		transform: translateY(100%);
		transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	}
	#regroup-contact .rg-cf-sheet-root.is-open .rg-cf-sheet { transform: translateY(0); }

	#regroup-contact .rg-cf-sheet-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: none;
		padding: max(14px, env(safe-area-inset-top)) 20px 14px;
		border-bottom: 1px solid var(--cf-hair-soft);
	}
	#regroup-contact .rg-cf-sheet-eyebrow {
		font-family: var(--cf-mono);
		font-size: 11px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--cf-accent);
	}
	#regroup-contact .rg-cf-sheet-close {
		width: 44px;   /* 44pt touch target */
		height: 44px;
		margin: -10px -12px -10px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--cf-cream);
		cursor: pointer;
	}

	#regroup-contact .rg-cf-sheet-scroll {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;  /* belt to the body lock's braces */
		padding: 26px 20px max(30px, env(safe-area-inset-bottom));
	}

	/* Inside the sheet the header is gone, so nothing needs clearing it. */
	#regroup-contact .rg-cf-sheet .rg-cf-panel-q,
	#regroup-contact .rg-cf-sheet .rg-cf-input,
	#regroup-contact .rg-cf-sheet .rg-cf-error { scroll-margin-top: 16px; }
	#regroup-contact .rg-cf-sheet .rg-cf-panel-q { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	#regroup-contact *,
	#regroup-contact .rg-cf-sheet,
	#regroup-contact .rg-cf-scrim { transition: none !important; }
}