/* =========================================================
   Contact page — split hero + form + form styles
   ========================================================= */

.ct-wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 9rem var(--gutter) 4rem;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 5rem;
	align-items: start;
}
.ct-left h1 {
	font-weight: 500;
	font-size: clamp(3rem, 10vw, 8rem);
	letter-spacing: -0.03em;
	line-height: .9;
	text-transform: lowercase;
	max-width: 10ch;
}
.ct-left h1 .italic {
	font-family: var(--font-accent-serif);
	font-style: italic;
	font-weight: 300;
	color: var(--accent-deep);
}
.ct-left p.lede {
	margin-top: 2rem;
	max-width: 44ch;
	color: var(--ink);
}
.ct-left .contact-block {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hairline);
	display: grid;
	gap: 1rem;
	font-size: 1.05rem;
}
.ct-left .contact-block a { color: var(--ink); }
.ct-left .contact-block .label {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--muted-2);
	letter-spacing: .04em;
	text-transform: lowercase;
	margin-bottom: .2em;
}

.ct-right {
	background: var(--bg-alt);
	border-radius: var(--radius-lg);
	padding: 3rem;
}
.ct-right h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	letter-spacing: -0.025em;
	text-transform: lowercase;
	margin-bottom: 1.5rem;
}

/* Form element defaults — work with WPForms or Gravity Forms out of the box,
   plus the plain HTML fallback form. */
.ct-right form .field,
.ct-right .wpforms-field,
.ct-right .gfield {
	margin-bottom: 1.25rem;
}
/* Reset fieldset/legend to look like a normal .field */
.ct-right form fieldset.field {
	border: 0;
	padding: 0;
	margin-inline: 0;
	min-width: 0;
}
.ct-right form fieldset.field legend {
	padding: 0;
	float: none;
	width: auto;
}
.ct-right label,
.ct-right form fieldset.field > legend,
.ct-right .wpforms-field-label,
.ct-right .gfield_label {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	text-transform: lowercase;
	letter-spacing: .04em;
	color: var(--muted);
	margin-bottom: .5em;
}
.ct-right input[type="text"],
.ct-right input[type="email"],
.ct-right input[type="tel"],
.ct-right input[type="url"],
.ct-right input[type="number"],
.ct-right select,
.ct-right textarea {
	width: 100%;
	padding: .85em 1em;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), background .25s var(--ease);
	/* Hint native form widgets to follow the page theme. Without this,
	 * dark-mode <select> flashes its native white dropdown panel on first
	 * click before settling — the OS uses light theming for the popover by
	 * default. `color-scheme: light dark` lets the browser pick correctly
	 * based on the body class (mona's dark-mode toggle adds `body.dark`,
	 * which inverts the CSS vars and the browser will then render the
	 * popover in dark too). */
	color-scheme: light dark;
}

/* Custom chevron + appearance:none on selects so the native triangle
 * indicator (which doesn't respect dark mode in older Chromium) is
 * replaced with one that matches the page text colour. */
.ct-right select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%235F6463' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	padding-right: 2.5rem;
}
body.dark .ct-right select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%239CA09F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
}
.ct-right input:focus,
.ct-right select:focus,
.ct-right textarea:focus {
	outline: none;
	border-color: var(--accent);
}
.ct-right textarea { min-height: 140px; resize: vertical; }

.ct-right .checkbox-group,
.ct-right .radio-group {
	display: grid;
	gap: .4em;
	margin-top: .3em;
}
.ct-right .checkbox-group label,
.ct-right .radio-group label {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--ink);
	text-transform: none;
	letter-spacing: -0.005em;
}

/* ────────────────────────────────────────────────────────────────────
 * Chip selector — replaces the old 9-checkbox grid with a 4-chip
 * primary tier and a refinement sub-tier that only appears when
 * "brand / commercial" is the active primary. Form-CRO recommendation
 * 2026-05-05: 9 options shown together drove cognitive load + lower
 * completion. Same data captured server-side via hidden cf_interests[]
 * inputs so PHP handler is unchanged.
 * ──────────────────────────────────────────────────────────────────── */
.ct-right .chip-fieldset {
	margin-top: .3em;
}
.ct-right .chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .55em;
}
/* `display: flex` above otherwise overrides the user-agent `hidden`
 * stylesheet so the sub-tier is visible at rest — explicit !important
 * keeps `hidden` authoritative on these chip groups. */
.ct-right .chip-group[hidden] {
	display: none !important;
}
.ct-right .chip-group--sub {
	margin-top: .9em;
	padding-top: .9em;
	border-top: 1px solid var(--hairline);
}
.ct-right .chip-prompt {
	width: 100%;
	margin: 0 0 .15rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: lowercase;
	color: var(--muted);
}
.ct-right .chip {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--hairline);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	text-transform: lowercase;
	padding: .55em 1em;
	border-radius: 999px;
	cursor: pointer;
	min-height: 44px; /* mobile tap target */
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.ct-right .chip:hover {
	border-color: var(--ink);
}
.ct-right .chip:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.ct-right .chip[aria-pressed="true"] {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.ct-right .chip-sub {
	font-size: .92rem;
	padding: .45em .85em;
	min-height: 40px;
}

.ct-right .cf-reassure {
	margin: 1rem 0 0;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--muted);
	text-align: center;
}

.ct-right button[type="submit"],
.ct-right input[type="submit"] {
	width: 100%;
	margin-top: 1rem;
	padding: 1em 1.5em;
	background: var(--ink);
	color: var(--bg);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 1rem;
	text-transform: lowercase;
	letter-spacing: -0.005em;
	border: 0;
	cursor: pointer;
	transition: background .3s var(--ease);
}
.ct-right button[type="submit"]:hover,
.ct-right input[type="submit"]:hover {
	background: var(--accent);
}

.ct-right .required::after {
	content: " *";
	color: var(--accent);
}

@media (max-width: 860px) {
	/* On mobile, form is the primary action — should sit RIGHT after the
	 * hero, not buried below the contact details + chat panel. Switch the
	 * grid to a flex column + use display:contents on .ct-left so its
	 * children participate in the same flow, then order() each piece into
	 * its strategic slot:
	 *
	 *   1. Section label + h1 ("let's talk.") + lede
	 *   2. Form ("start a project")  ← was at bottom
	 *   3. Direct phone/email/response time
	 *   4. "or chat instead" WhatsApp panel
	 *
	 * Keeps desktop layout untouched — the grid is only replaced inside
	 * this media query. */
	.ct-wrap {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
	}
	.ct-left { display: contents; }
	.ct-left .section-label    { order: 1; }
	.ct-left h1                { order: 1; }
	.ct-left .lede             { order: 1; }
	.ct-right                  { order: 2; padding: 2rem; }
	.ct-left .contact-block    { order: 3; margin-top: 0; padding-top: 1.5rem; }
	.ct-left .ct-chat          { order: 4; margin-top: 0; }
}

/* ────────────────────────────────────────────────────────────────────
 * Multi-step contact form (Sprint 2 form-CRO build, 2026-05-05).
 *
 * Without JS, .mona-contact-form has no .is-stepped class — every
 * .cf-step is `display: block` and the form looks/works exactly like
 * a single-page form. With JS, .is-stepped flips the layout: only the
 * .is-active step is visible, with a slide-in animation between steps.
 *
 * The chip-group CSS above still applies inside Step 1's chip-fieldset.
 *
 * Visually-hidden helper for accessibility-only labels.
 * ──────────────────────────────────────────────────────────────────── */
.visually-hidden,
.ct-right .visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Progress bar — sits above the steps, four pills tracking position.
 * Hidden in single-page mode (where steps don't matter). */
.ct-right .cf-progress-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 2rem 0;
	flex-wrap: wrap;
}
.ct-right .cf-progress {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	flex: 1 1 auto;
}
.ct-right .cf-progress li { margin: 0; padding: 0; }
.ct-right .cf-progress-dot {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--hairline);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: lowercase;
	padding: .4em .85em;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 32px;
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.ct-right .cf-progress-dot:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.ct-right .cf-progress-dot.is-on {
	color: var(--ink);
}
.ct-right .cf-progress-dot.is-here {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.ct-right .cf-pd-num {
	font-weight: 500;
	opacity: .55;
}
.ct-right .cf-progress-dot.is-here .cf-pd-num,
.ct-right .cf-progress-dot.is-on .cf-pd-num {
	opacity: 1;
}
.ct-right .cf-pd-label { display: inline-block; }

/* Singlepage-mode toggle — small mono-typed text link in the corner. */
.ct-right .cf-singlepage-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: lowercase;
	color: var(--muted);
	cursor: pointer;
	padding: .25em 0;
	border-bottom: 1px dashed var(--hairline);
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ct-right .cf-singlepage-toggle:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* Step container — always block by default (no-JS fallback shows all). */
.ct-right .cf-step {
	display: block;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px dashed var(--hairline);
}
.ct-right .cf-step:last-of-type {
	border-bottom: 0;
}
.ct-right .cf-step-heading {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 .5rem 0;
	text-transform: lowercase;
}
.ct-right .cf-step-sub {
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
}

/* Step nav — back + next buttons aligned at the bottom of each step. */
.ct-right .cf-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.5rem;
}
.ct-right .cf-step-nav-spacer {
	visibility: hidden;
}
.ct-right .cf-back,
.ct-right .cf-next {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: lowercase;
	padding: .8em 1.4em;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.ct-right .cf-back {
	border-color: var(--hairline);
	color: var(--muted);
}
.ct-right .cf-back:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.ct-right .cf-next {
	background: var(--ink);
	color: var(--bg);
}
.ct-right .cf-next:hover {
	background: var(--accent);
}
.ct-right .cf-nav-arrow {
	font-family: var(--font-mono);
	font-size: 1.1em;
	line-height: 1;
}

/* Submit button inside the step nav — match the .cf-next pill. */
.ct-right .cf-step-nav button[type="submit"].cf-submit {
	width: auto;
	margin-top: 0;
}

/* ────────────────────────────────────────────────────────────────────
 * STEPPED MODE — only show the active step.
 * Toggled on by JS adding .is-stepped to the form.
 * ──────────────────────────────────────────────────────────────────── */
.ct-right .mona-contact-form.is-stepped .cf-step {
	display: none;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.ct-right .mona-contact-form.is-stepped .cf-step.is-active {
	display: block;
}

/* Slide-in / slide-out animation — gentle, ~250ms.
 * Skipped entirely on prefers-reduced-motion (see media query below). */
@keyframes cf-step-in-forward {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes cf-step-in-back {
	from { opacity: 0; transform: translateX(-20px); }
	to   { opacity: 1; transform: translateX(0); }
}
.ct-right .mona-contact-form.is-stepped .cf-step.is-entering-forward {
	animation: cf-step-in-forward .28s var(--ease) both;
}
.ct-right .mona-contact-form.is-stepped .cf-step.is-entering-back {
	animation: cf-step-in-back .28s var(--ease) both;
}

/* Single-page escape hatch — overrides .is-stepped, shows everything. */
.ct-right .mona-contact-form.is-singlepage .cf-step {
	display: block !important;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px dashed var(--hairline);
	animation: none !important;
}
.ct-right .mona-contact-form.is-singlepage .cf-step:last-of-type {
	border-bottom: 0;
}
/* In singlepage mode, hide the per-step "next" buttons (only the final
 * submit matters). Keep "back" buttons hidden for cleanliness. */
.ct-right .mona-contact-form.is-singlepage .cf-step-nav .cf-next,
.ct-right .mona-contact-form.is-singlepage .cf-step-nav .cf-back {
	display: none;
}
.ct-right .mona-contact-form.is-singlepage [data-cf-step="4"] .cf-step-nav .cf-submit {
	display: inline-flex;
}

/* Invalid field highlight (set by JS during step validation). */
.ct-right .cf-invalid {
	border-color: #d4423a !important;
	background: #fff5f4;
}

/* Submit-locked state — set on the form during the network round-trip
 * after submit. Visually dims the submit button + suppresses hover so
 * the user can see they've already fired the submission. */
.ct-right .mona-contact-form.is-submitting button[type="submit"],
.ct-right button[type="submit"]:disabled,
.ct-right button[type="submit"][aria-busy="true"] {
	opacity: .55;
	cursor: progress;
	pointer-events: none;
}
.ct-right .mona-contact-form.is-submitting button[type="submit"]:hover {
	background: var(--ink); /* override the .cf-next:hover accent flip */
}

/* Reduced motion — skip the slide animation, keep the visibility toggle. */
@media (prefers-reduced-motion: reduce) {
	.ct-right .mona-contact-form.is-stepped .cf-step.is-entering-forward,
	.ct-right .mona-contact-form.is-stepped .cf-step.is-entering-back {
		animation: none !important;
	}
}

/* Mobile — sticky step nav at the bottom of the form for easier tapping. */
@media (max-width: 860px) {
	.ct-right .cf-progress-wrap {
		gap: .75rem;
	}
	.ct-right .cf-progress {
		gap: .35rem;
	}
	.ct-right .cf-progress-dot {
		font-size: .62rem;
		padding: .35em .65em;
	}
	.ct-right .cf-pd-label {
		display: none;
	}
	.ct-right .cf-progress-dot.is-here .cf-pd-label {
		display: inline-block;
	}
	.ct-right .cf-step-heading {
		font-size: 1.35rem;
	}
	.ct-right .cf-step-sub {
		font-size: .9rem;
	}
	.ct-right .cf-step-nav {
		gap: .5rem;
	}
	.ct-right .cf-back,
	.ct-right .cf-next {
		padding: .7em 1.1em;
		font-size: .9rem;
		flex: 0 1 auto;
	}
}


/* ====================================================================
 * /links/ form alias — mirror every .ct-right form rule to .bio-form-wrap
 * so the inline contact form on /links/ inherits the same styling without
 * touching the .ct-right selectors themselves. Generated 2026-05-05.
 * ==================================================================== */
/* =========================================================
   Contact page — split hero + form + form styles
   ========================================================= */

.ct-wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 9rem var(--gutter) 4rem;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 5rem;
	align-items: start;
}
.ct-left h1 {
	font-weight: 500;
	font-size: clamp(3rem, 10vw, 8rem);
	letter-spacing: -0.03em;
	line-height: .9;
	text-transform: lowercase;
	max-width: 10ch;
}
.ct-left h1 .italic {
	font-family: var(--font-accent-serif);
	font-style: italic;
	font-weight: 300;
	color: var(--accent-deep);
}
.ct-left p.lede {
	margin-top: 2rem;
	max-width: 44ch;
	color: var(--ink);
}
.ct-left .contact-block {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--hairline);
	display: grid;
	gap: 1rem;
	font-size: 1.05rem;
}
.ct-left .contact-block a { color: var(--ink); }
.ct-left .contact-block .label {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--muted-2);
	letter-spacing: .04em;
	text-transform: lowercase;
	margin-bottom: .2em;
}

.bio-form-wrap {
	background: var(--bg-alt);
	border-radius: var(--radius-lg);
	padding: 3rem;
}
.bio-form-wrap h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	letter-spacing: -0.025em;
	text-transform: lowercase;
	margin-bottom: 1.5rem;
}

/* Form element defaults — work with WPForms or Gravity Forms out of the box,
   plus the plain HTML fallback form. */
.bio-form-wrap form .field,
.bio-form-wrap .wpforms-field,
.bio-form-wrap .gfield {
	margin-bottom: 1.25rem;
}
/* Reset fieldset/legend to look like a normal .field */
.bio-form-wrap form fieldset.field {
	border: 0;
	padding: 0;
	margin-inline: 0;
	min-width: 0;
}
.bio-form-wrap form fieldset.field legend {
	padding: 0;
	float: none;
	width: auto;
}
.bio-form-wrap label,
.bio-form-wrap form fieldset.field > legend,
.bio-form-wrap .wpforms-field-label,
.bio-form-wrap .gfield_label {
	display: block;
	font-family: var(--font-mono);
	font-size: .72rem;
	text-transform: lowercase;
	letter-spacing: .04em;
	color: var(--muted);
	margin-bottom: .5em;
}
.bio-form-wrap input[type="text"],
.bio-form-wrap input[type="email"],
.bio-form-wrap input[type="tel"],
.bio-form-wrap input[type="url"],
.bio-form-wrap input[type="number"],
.bio-form-wrap select,
.bio-form-wrap textarea {
	width: 100%;
	padding: .85em 1em;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), background .25s var(--ease);
	/* Hint native form widgets to follow the page theme. Without this,
	 * dark-mode <select> flashes its native white dropdown panel on first
	 * click before settling — the OS uses light theming for the popover by
	 * default. `color-scheme: light dark` lets the browser pick correctly
	 * based on the body class (mona's dark-mode toggle adds `body.dark`,
	 * which inverts the CSS vars and the browser will then render the
	 * popover in dark too). */
	color-scheme: light dark;
}

/* Custom chevron + appearance:none on selects so the native triangle
 * indicator (which doesn't respect dark mode in older Chromium) is
 * replaced with one that matches the page text colour. */
.bio-form-wrap select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%235F6463' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	padding-right: 2.5rem;
}
body.dark .bio-form-wrap select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%239CA09F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
}
.bio-form-wrap input:focus,
.bio-form-wrap select:focus,
.bio-form-wrap textarea:focus {
	outline: none;
	border-color: var(--accent);
}
.bio-form-wrap textarea { min-height: 140px; resize: vertical; }

.bio-form-wrap .checkbox-group,
.bio-form-wrap .radio-group {
	display: grid;
	gap: .4em;
	margin-top: .3em;
}
.bio-form-wrap .checkbox-group label,
.bio-form-wrap .radio-group label {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--ink);
	text-transform: none;
	letter-spacing: -0.005em;
}

/* ────────────────────────────────────────────────────────────────────
 * Chip selector — replaces the old 9-checkbox grid with a 4-chip
 * primary tier and a refinement sub-tier that only appears when
 * "brand / commercial" is the active primary. Form-CRO recommendation
 * 2026-05-05: 9 options shown together drove cognitive load + lower
 * completion. Same data captured server-side via hidden cf_interests[]
 * inputs so PHP handler is unchanged.
 * ──────────────────────────────────────────────────────────────────── */
.bio-form-wrap .chip-fieldset {
	margin-top: .3em;
}
.bio-form-wrap .chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .55em;
}
/* `display: flex` above otherwise overrides the user-agent `hidden`
 * stylesheet so the sub-tier is visible at rest — explicit !important
 * keeps `hidden` authoritative on these chip groups. */
.bio-form-wrap .chip-group[hidden] {
	display: none !important;
}
.bio-form-wrap .chip-group--sub {
	margin-top: .9em;
	padding-top: .9em;
	border-top: 1px solid var(--hairline);
}
.bio-form-wrap .chip-prompt {
	width: 100%;
	margin: 0 0 .15rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: lowercase;
	color: var(--muted);
}
.bio-form-wrap .chip {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--hairline);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.005em;
	text-transform: lowercase;
	padding: .55em 1em;
	border-radius: 999px;
	cursor: pointer;
	min-height: 44px; /* mobile tap target */
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.bio-form-wrap .chip:hover {
	border-color: var(--ink);
}
.bio-form-wrap .chip:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.bio-form-wrap .chip[aria-pressed="true"] {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.bio-form-wrap .chip-sub {
	font-size: .92rem;
	padding: .45em .85em;
	min-height: 40px;
}

.bio-form-wrap .cf-reassure {
	margin: 1rem 0 0;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--muted);
	text-align: center;
}

.bio-form-wrap button[type="submit"],
.bio-form-wrap input[type="submit"] {
	width: 100%;
	margin-top: 1rem;
	padding: 1em 1.5em;
	background: var(--ink);
	color: var(--bg);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 1rem;
	text-transform: lowercase;
	letter-spacing: -0.005em;
	border: 0;
	cursor: pointer;
	transition: background .3s var(--ease);
}
.bio-form-wrap button[type="submit"]:hover,
.bio-form-wrap input[type="submit"]:hover {
	background: var(--accent);
}

.bio-form-wrap .required::after {
	content: " *";
	color: var(--accent);
}

@media (max-width: 860px) {
	/* On mobile, form is the primary action — should sit RIGHT after the
	 * hero, not buried below the contact details + chat panel. Switch the
	 * grid to a flex column + use display:contents on .ct-left so its
	 * children participate in the same flow, then order() each piece into
	 * its strategic slot:
	 *
	 *   1. Section label + h1 ("let's talk.") + lede
	 *   2. Form ("start a project")  ← was at bottom
	 *   3. Direct phone/email/response time
	 *   4. "or chat instead" WhatsApp panel
	 *
	 * Keeps desktop layout untouched — the grid is only replaced inside
	 * this media query. */
	.ct-wrap {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
	}
	.ct-left { display: contents; }
	.ct-left .section-label    { order: 1; }
	.ct-left h1                { order: 1; }
	.ct-left .lede             { order: 1; }
	.bio-form-wrap                  { order: 2; padding: 2rem; }
	.ct-left .contact-block    { order: 3; margin-top: 0; padding-top: 1.5rem; }
	.ct-left .ct-chat          { order: 4; margin-top: 0; }
}

/* ────────────────────────────────────────────────────────────────────
 * Multi-step contact form (Sprint 2 form-CRO build, 2026-05-05).
 *
 * Without JS, .mona-contact-form has no .is-stepped class — every
 * .cf-step is `display: block` and the form looks/works exactly like
 * a single-page form. With JS, .is-stepped flips the layout: only the
 * .is-active step is visible, with a slide-in animation between steps.
 *
 * The chip-group CSS above still applies inside Step 1's chip-fieldset.
 *
 * Visually-hidden helper for accessibility-only labels.
 * ──────────────────────────────────────────────────────────────────── */
.visually-hidden,
.bio-form-wrap .visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Progress bar — sits above the steps, four pills tracking position.
 * Hidden in single-page mode (where steps don't matter). */
.bio-form-wrap .cf-progress-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 2rem 0;
	flex-wrap: wrap;
}
.bio-form-wrap .cf-progress {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
	flex: 1 1 auto;
}
.bio-form-wrap .cf-progress li { margin: 0; padding: 0; }
.bio-form-wrap .cf-progress-dot {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--hairline);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: lowercase;
	padding: .4em .85em;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	min-height: 32px;
	transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.bio-form-wrap .cf-progress-dot:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.bio-form-wrap .cf-progress-dot.is-on {
	color: var(--ink);
}
.bio-form-wrap .cf-progress-dot.is-here {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}
.bio-form-wrap .cf-pd-num {
	font-weight: 500;
	opacity: .55;
}
.bio-form-wrap .cf-progress-dot.is-here .cf-pd-num,
.bio-form-wrap .cf-progress-dot.is-on .cf-pd-num {
	opacity: 1;
}
.bio-form-wrap .cf-pd-label { display: inline-block; }

/* Singlepage-mode toggle — small mono-typed text link in the corner. */
.bio-form-wrap .cf-singlepage-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: lowercase;
	color: var(--muted);
	cursor: pointer;
	padding: .25em 0;
	border-bottom: 1px dashed var(--hairline);
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.bio-form-wrap .cf-singlepage-toggle:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* Step container — always block by default (no-JS fallback shows all). */
.bio-form-wrap .cf-step {
	display: block;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px dashed var(--hairline);
}
.bio-form-wrap .cf-step:last-of-type {
	border-bottom: 0;
}
.bio-form-wrap .cf-step-heading {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 .5rem 0;
	text-transform: lowercase;
}
.bio-form-wrap .cf-step-sub {
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.5;
	margin: 0 0 1.5rem 0;
}

/* Step nav — back + next buttons aligned at the bottom of each step. */
.bio-form-wrap .cf-step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.5rem;
}
.bio-form-wrap .cf-step-nav-spacer {
	visibility: hidden;
}
.bio-form-wrap .cf-back,
.bio-form-wrap .cf-next {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-transform: lowercase;
	padding: .8em 1.4em;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.bio-form-wrap .cf-back {
	border-color: var(--hairline);
	color: var(--muted);
}
.bio-form-wrap .cf-back:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.bio-form-wrap .cf-next {
	background: var(--ink);
	color: var(--bg);
}
.bio-form-wrap .cf-next:hover {
	background: var(--accent);
}
.bio-form-wrap .cf-nav-arrow {
	font-family: var(--font-mono);
	font-size: 1.1em;
	line-height: 1;
}

/* Submit button inside the step nav — match the .cf-next pill. */
.bio-form-wrap .cf-step-nav button[type="submit"].cf-submit {
	width: auto;
	margin-top: 0;
}

/* ────────────────────────────────────────────────────────────────────
 * STEPPED MODE — only show the active step.
 * Toggled on by JS adding .is-stepped to the form.
 * ──────────────────────────────────────────────────────────────────── */
.bio-form-wrap .mona-contact-form.is-stepped .cf-step {
	display: none;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.bio-form-wrap .mona-contact-form.is-stepped .cf-step.is-active {
	display: block;
}

/* Slide-in / slide-out animation — gentle, ~250ms.
 * Skipped entirely on prefers-reduced-motion (see media query below). */
@keyframes cf-step-in-forward {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes cf-step-in-back {
	from { opacity: 0; transform: translateX(-20px); }
	to   { opacity: 1; transform: translateX(0); }
}
.bio-form-wrap .mona-contact-form.is-stepped .cf-step.is-entering-forward {
	animation: cf-step-in-forward .28s var(--ease) both;
}
.bio-form-wrap .mona-contact-form.is-stepped .cf-step.is-entering-back {
	animation: cf-step-in-back .28s var(--ease) both;
}

/* Single-page escape hatch — overrides .is-stepped, shows everything. */
.bio-form-wrap .mona-contact-form.is-singlepage .cf-step {
	display: block !important;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px dashed var(--hairline);
	animation: none !important;
}
.bio-form-wrap .mona-contact-form.is-singlepage .cf-step:last-of-type {
	border-bottom: 0;
}
/* In singlepage mode, hide the per-step "next" buttons (only the final
 * submit matters). Keep "back" buttons hidden for cleanliness. */
.bio-form-wrap .mona-contact-form.is-singlepage .cf-step-nav .cf-next,
.bio-form-wrap .mona-contact-form.is-singlepage .cf-step-nav .cf-back {
	display: none;
}
.bio-form-wrap .mona-contact-form.is-singlepage [data-cf-step="4"] .cf-step-nav .cf-submit {
	display: inline-flex;
}

/* Invalid field highlight (set by JS during step validation). */
.bio-form-wrap .cf-invalid {
	border-color: #d4423a !important;
	background: #fff5f4;
}

/* Submit-locked state — set on the form during the network round-trip
 * after submit. Visually dims the submit button + suppresses hover so
 * the user can see they've already fired the submission. */
.bio-form-wrap .mona-contact-form.is-submitting button[type="submit"],
.bio-form-wrap button[type="submit"]:disabled,
.bio-form-wrap button[type="submit"][aria-busy="true"] {
	opacity: .55;
	cursor: progress;
	pointer-events: none;
}
.bio-form-wrap .mona-contact-form.is-submitting button[type="submit"]:hover {
	background: var(--ink); /* override the .cf-next:hover accent flip */
}

/* Reduced motion — skip the slide animation, keep the visibility toggle. */
@media (prefers-reduced-motion: reduce) {
	.bio-form-wrap .mona-contact-form.is-stepped .cf-step.is-entering-forward,
	.bio-form-wrap .mona-contact-form.is-stepped .cf-step.is-entering-back {
		animation: none !important;
	}
}

/* Mobile — sticky step nav at the bottom of the form for easier tapping. */
@media (max-width: 860px) {
	.bio-form-wrap .cf-progress-wrap {
		gap: .75rem;
	}
	.bio-form-wrap .cf-progress {
		gap: .35rem;
	}
	.bio-form-wrap .cf-progress-dot {
		font-size: .62rem;
		padding: .35em .65em;
	}
	.bio-form-wrap .cf-pd-label {
		display: none;
	}
	.bio-form-wrap .cf-progress-dot.is-here .cf-pd-label {
		display: inline-block;
	}
	.bio-form-wrap .cf-step-heading {
		font-size: 1.35rem;
	}
	.bio-form-wrap .cf-step-sub {
		font-size: .9rem;
	}
	.bio-form-wrap .cf-step-nav {
		gap: .5rem;
	}
	.bio-form-wrap .cf-back,
	.bio-form-wrap .cf-next {
		padding: .7em 1.1em;
		font-size: .9rem;
		flex: 0 1 auto;
	}
}

/* ─────────────────────────────────────────────────────────────────
 * Contact form — success state (?sent=1)
 * Renders inside contact-form.php in place of the form when the
 * post-submit redirect lands. Lives in this file (not page-contact's
 * own block) because the same partial is rendered on /links/, so the
 * success markup needs to look right in two layouts.
 *
 * Built around the existing brand tokens — accent teal for the check,
 * monospace eyebrow for the "01/02/03" rhythm that matches the rest
 * of the site, soft surface card on dark bg-alt for contrast.
 * ───────────────────────────────────────────────────────────────── */
.ct-success {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 2.5rem 2rem;
	background: var(--bg-alt, #EDEDE9);
	border: 1px solid var(--hairline, #D8D8D4);
	border-radius: 18px;
	color: var(--ink, #141616);
	position: relative;
	overflow: hidden;
	/* Subtle entry animation — block fades + lifts on arrival.
	   Skipped under prefers-reduced-motion (defined further down). */
	animation: ct-success-rise .55s cubic-bezier(.22,.61,.36,1) both;
}
[data-theme="dark"] .ct-success {
	background: var(--bg-alt, #141616);
	border-color: var(--hairline, #2A2D2D);
}

/* Soft accent gradient spill from the top-left — matches the new
   bio-cta-card "lit from within" feel without being noisy. */
.ct-success::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 0% 0%, rgba(27,191,186,.10), transparent 55%),
		radial-gradient(circle at 100% 100%, rgba(27,191,186,.06), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.ct-success > * { position: relative; z-index: 1; }

/* ── Animated check mark ───────────────────────────────── */
.ct-success-mark {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent, #1BBFBA);
	background: rgba(27,191,186,.10);
	border-radius: 50%;
	margin-bottom: .25rem;
}
.ct-success-mark svg {
	display: block;
	overflow: visible;
}
.ct-success-ring {
	stroke-dasharray: 176;       /* 2πr ≈ 176 for r=28 */
	stroke-dashoffset: 176;
	animation: ct-success-ring 0.7s cubic-bezier(.22,.61,.36,1) .15s forwards;
	transform-origin: center;
}
.ct-success-tick {
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
	animation: ct-success-tick 0.4s cubic-bezier(.22,.61,.36,1) .7s forwards;
}

/* ── Eyebrow + headline + lede ─────────────────────────── */
.ct-success-eyebrow {
	font-family: var(--mono, ui-monospace, Menlo, monospace);
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent, #1BBFBA);
	font-weight: 700;
}
.ct-success-title {
	font-family: var(--font-display, var(--font, -apple-system, sans-serif));
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -.025em;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
.ct-success-title .italic {
	font-style: italic;
	font-weight: 400;
}
.ct-success-lede {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--ink-2, var(--ink));
	max-width: 50ch;
	margin: 0;
}

/* ── "What happens next" numbered list ─────────────────── */
.ct-success-next {
	list-style: none;
	margin: .25rem 0 0 0;
	padding: 1rem 0 0 0;
	border-top: 1px solid var(--hairline);
	width: 100%;
	max-width: 56ch;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.ct-success-next li {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--ink-2, var(--ink));
}
.ct-success-next-num {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .2em;
	color: var(--accent);
	font-weight: 700;
	flex-shrink: 0;
}
.ct-success-next-text {
	color: var(--ink-2, var(--ink));
}

/* ── Secondary actions ─────────────────────────────────── */
.ct-success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .5rem;
}
.ct-success-action {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1rem;
	background: var(--bg, #F7F7F5);
	border: 1px solid var(--hairline);
	border-radius: 100px;
	color: var(--ink);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.ct-success-action:hover,
.ct-success-action:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-1px);
}
.ct-success-action .arrow {
	font-family: var(--mono);
	font-size: .95rem;
	transition: transform .2s ease;
}
.ct-success-action:hover .arrow,
.ct-success-action:focus-visible .arrow {
	transform: translateX(3px);
}
[data-theme="dark"] .ct-success-action {
	background: rgba(255,255,255,.03);
	color: var(--ink);
}

/* ── "Send another" reset link ─────────────────────────── */
.ct-success-reset {
	margin-top: .25rem;
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted, #5F6463);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.ct-success-reset:hover,
.ct-success-reset:focus-visible {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* ── Animations ────────────────────────────────────────── */
@keyframes ct-success-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ct-success-ring {
	to { stroke-dashoffset: 0; }
}
@keyframes ct-success-tick {
	to { stroke-dashoffset: 0; }
}

/* ── Reduced motion — show static state immediately ───── */
@media (prefers-reduced-motion: reduce) {
	.ct-success,
	.ct-success-ring,
	.ct-success-tick {
		animation: none;
	}
	.ct-success-ring,
	.ct-success-tick {
		stroke-dashoffset: 0;
	}
}

/* ── /links/ context — narrower column, tighter padding ── */
.bio-form-wrap .ct-success {
	padding: 2rem 1.4rem;
	gap: 1rem;
	border-radius: 14px;
}
.bio-form-wrap .ct-success-mark {
	width: 56px;
	height: 56px;
}
.bio-form-wrap .ct-success-mark svg {
	width: 56px;
	height: 56px;
}
.bio-form-wrap .ct-success-title {
	font-size: clamp(1.4rem, 6vw, 1.9rem);
}
.bio-form-wrap .ct-success-lede {
	font-size: .94rem;
}
.bio-form-wrap .ct-success-actions {
	flex-direction: column;
	width: 100%;
}
.bio-form-wrap .ct-success-action {
	justify-content: space-between;
	width: 100%;
}

/* ── Mobile narrowing for the /contact/ right column ───── */
@media (max-width: 600px) {
	.ct-success {
		padding: 1.75rem 1.25rem;
		gap: 1rem;
	}
	.ct-success-actions {
		flex-direction: column;
		width: 100%;
	}
	.ct-success-action {
		justify-content: space-between;
		width: 100%;
	}
}