/* ==========================================================================
   GrowthStudioz, "Lets chat" enquiry form
   Tokens from base.css. No raw hex, no magic numbers.
   ========================================================================== */

/* No background fill. The grey behind this section in the mockup was the Figma
   canvas, not a section colour: the form sits on the page's own white.

   The section keeps the site's global padding: it stays inside main's gutter
   (16 / 32 / 60px) rather than breaking out of it, so the form lines up with
   the header, the footer and every other section on the page. */
.gs-form-section {
	/* WP applies --wp--style--block-gap as a top margin between sibling blocks,
	   which put 24px above the form that nothing in this file asked for. */
	margin-block-start: 0;
	padding-block: var(--gs-section-pad);
}

/* Focused by the How we work button so keyboard users land in the form; the
   section itself is not a control, so no ring on it. */
.gs-form-section:focus {
	outline: none;
}

.gs-form-wrap {
	width: 100%;
	max-width: 1012px;
	margin-inline: auto;
	/* 20px inline, at every width. Deliberately not the site gutter: this is a
	   centred column, not full-bleed chrome, so it does not step 16/32/60. */
	padding-inline: 20px;
}

.gs-form__title {
	margin-block-end: var(--gs-space-7);
	text-align: center;
}

.gs-form {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-5);
}

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

.gs-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gs-space-4) var(--gs-space-5);
}

.gs-field {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* 16px, per Adarsh 23rd September 2026. Every label in the form is one size:
   the field labels and the service checkboxes had drifted to 12 and 14. */
.gs-field__label {
	color: var(--gs-body);
	font-size: var(--gs-b3);
	line-height: 1.2;
	padding: 0;
}

.gs-field__input {
	width: 100%;
	padding: var(--gs-space-3) var(--gs-space-4);
	border: var(--gs-border-width) solid var(--gs-border);
	border-radius: var(--gs-radius);
	background: var(--gs-surface);
	color: var(--gs-ink);
	font-family: inherit;
	font-size: var(--gs-b3);
	line-height: 1.4;
	transition:
		border-color var(--gs-dur-hover) ease,
		box-shadow var(--gs-dur-hover) ease;
}

.gs-field__input::placeholder {
	/* Placeholders still need to be readable: the browser default sits well
	   under 4.5:1. */
	color: var(--gs-body);
	opacity: 0.7;
}

.gs-field__input:focus {
	outline: none;
	border-color: var(--gs-ink);
	box-shadow: 0 0 0 3px rgb(0 0 0 / 8%);
}

.gs-field__input:focus-visible {
	outline: none;
}

.gs-field__textarea {
	min-height: 140px;
	resize: vertical;
}

/* --- services checkboxes --------------------------------------------------
   A real checkbox, visually replaced. The input keeps its own focus, keyboard
   and form semantics; the square is decoration that follows its state.
   -------------------------------------------------------------------------- */

/* A <legend> is painted as the fieldset's legend box, not as a flex item, so
   the fieldset's `gap` is skipped over it entirely, so "Services Needed" sat
   flush against its checkboxes at 0px while every other label had 8px. The
   spacing has to be an explicit margin on the legend itself. */
.gs-field--services > .gs-field__label {
	margin-block-end: var(--gs-space-2);
}

.gs-checks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-4) var(--gs-space-5);
}

.gs-check {
	display: inline-flex;
	align-items: center;
	gap: var(--gs-space-2);
	cursor: pointer;
}

.gs-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gs-check__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	border: var(--gs-border-width) solid var(--gs-border-strong, var(--gs-grey-m));
	border-radius: var(--gs-radius-sm);
	background: var(--gs-surface);
	color: var(--gs-surface);
	transition:
		background-color var(--gs-dur-hover) ease,
		border-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease;
}

.gs-check__box svg {
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: scale(0.8);
	transition:
		opacity var(--gs-dur-press) var(--gs-ease-out),
		transform var(--gs-dur-press) var(--gs-ease-out);
}

.gs-check input:checked + .gs-check__box {
	border-color: var(--gs-ink);
	background: var(--gs-ink);
	color: var(--gs-surface);
}

.gs-check input:checked + .gs-check__box svg {
	opacity: 1;
	transform: scale(1);
}

/* The focus ring has to move to the square, since the input itself is
   visually hidden. Without this the form is unusable by keyboard. */
.gs-check input:focus-visible + .gs-check__box {
	outline: 2px solid var(--gs-accent);
	outline-offset: 2px;
}

.gs-check__label {
	font-size: var(--gs-b3);
	color: var(--gs-ink);
}

/* --- honeypot -------------------------------------------------------------
   Off-canvas rather than display:none: some bots skip anything hidden, and
   this needs to look fillable to them while never reaching a person.
   -------------------------------------------------------------------------- */

.gs-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- status + submit ------------------------------------------------------ */

.gs-form__status {
	margin: 0;
	min-height: 1.4em;
	font-size: var(--gs-b4);
	max-width: none;
}

/* Collapse while there is nothing to say, so the gap before the button is the
   designed one rather than the designed one plus an empty line. It still holds
   its own height the moment a message appears, so the button never jumps. */
.gs-form__status:empty {
	min-height: 0;
	margin-block: calc(var(--gs-space-5) * -0.5);
}

.gs-form__status.is-error {
	color: var(--gs-pm-red);
}

.gs-form__status.is-success {
	color: var(--gs-ink);
	font-weight: var(--gs-weight-medium);
}

/* .gs-btn--accent --block carries everything but the sending state. */
.gs-form__submit {
	transition:
		transform var(--gs-dur-press) var(--gs-ease-out),
		background-color var(--gs-dur-hover) ease,
		border-color var(--gs-dur-hover) ease,
		color var(--gs-dur-hover) ease,
		opacity var(--gs-dur-hover) ease;
}

/* The social layout's button (Narrativ): black, with the wide tracking of
   the phone frame at every width (Adarsh, 26th September 2026). */
.gs-form__submit--tracked {
	letter-spacing: 0.2em;
}

.gs-form__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 767px) {

	/* No inline padding on phones: the form runs to the viewport edges. The
	   section already breaks out of main's gutter, so this is the last inset
	   left to remove. */
	.gs-form-wrap {
		padding-inline: 0;
	}

	.gs-form__title {
		/* Left-aligned on phones, per the mockup. */
		text-align: left;
		margin-block-end: var(--gs-space-5);
	}

	/* First and Last stay paired; everything below them goes full width. */
	.gs-form__grid > .gs-field:nth-child(n+3) {
		grid-column: 1 / -1;
	}

	/* Stacked one per row, per the mockup. */
	.gs-checks {
		flex-direction: column;
		gap: var(--gs-space-3);
	}
}

/* ==========================================================================
   Sent popup (Adarsh, 7th October 2026)

   The Launchpad booking card's thank-you screen, same sizes and colours
   (booking.css: 64 green circle in an 80 halo, 28/34 heading, 14/22 text,
   the WhatsApp link under a rule), without its step bar, in a card over the
   page. A native <dialog> opened with showModal(): it sits in the top layer,
   so no z-index, and the browser gives it the backdrop and focus handling.
   ========================================================================== */

.gs-formdone {
	--gs-formdone-green: #13835D;
	--gs-formdone-halo: #DFF3EA;
	--gs-formdone-text: #171717;
	--gs-formdone-muted: #737773;
	--gs-formdone-ease: cubic-bezier(0.23, 1, 0.32, 1);

	width: min(30rem, 100% - 2 * var(--gs-gutter-now));
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gs-formdone-text);
	overflow: visible;
}

.gs-formdone::backdrop {
	background: rgb(10 10 10 / 0.55);
}

/* The page stays put behind it. */
html:has(.gs-formdone[open]) {
	overflow: hidden;
}

.gs-formdone__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3.5rem 2rem 1.5rem;
	border-radius: 1.5rem;
	background: var(--gs-white);
	box-shadow: 0 1.5rem 3rem rgb(10 10 10 / 0.18);
	text-align: center;
}

.gs-formdone[open] .gs-formdone__card {
	animation: gs-formdone-in 260ms var(--gs-formdone-ease) both;
}

.gs-formdone[open]::backdrop {
	animation: gs-formdone-fade 200ms ease-out both;
}

.gs-formdone__close {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--gs-formdone-muted);
	font-size: 1.25rem;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.gs-formdone__close:hover {
		background: #F3F3F3;
		color: var(--gs-formdone-text);
	}
}

.gs-formdone__tick {
	position: relative;
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--gs-formdone-green);
	box-shadow: 0 0 0 0.5rem var(--gs-formdone-halo);   /* the 80 halo */
	color: var(--gs-white);
	font-size: 1.5rem;
}

/*
 * It moves (Adarsh, 7th October 2026: "let that green circle pulse and
 * animate the tick"). In order: the circle pops in as the card arrives, the
 * tick draws itself left to right, then a soft green ring keeps pulsing out
 * from behind the circle while the popup is open. Each restarts every time
 * the popup opens ([open] comes and goes).
 */
.gs-formdone__tick::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 50%;
	background: var(--gs-formdone-green);
	opacity: 0;
	pointer-events: none;
}

.gs-formdone__tick .gs-icon {
	position: relative;
	z-index: 1;
}

.gs-formdone[open] .gs-formdone__tick {
	animation: gs-formdone-pop 420ms var(--gs-formdone-ease) 80ms both;
}

.gs-formdone[open] .gs-formdone__tick::before {
	animation: gs-formdone-pulse 1.8s cubic-bezier(0.25, 0.6, 0.3, 1) 760ms infinite;
}

/* The check path is about 22.6 long; 24 hides it all. */
.gs-formdone[open] .gs-formdone__tick path {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: gs-formdone-draw 380ms ease-out 380ms forwards;
}

@keyframes gs-formdone-pop {
	from {
		opacity: 0;
		transform: scale(0.6);
	}
}

@keyframes gs-formdone-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes gs-formdone-pulse {
	0% {
		opacity: 0.35;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.9);
	}
}

.gs-formdone__title {
	max-width: none;
	margin: 2.5rem 0 0;                                 /* 32 from the halo */
	color: var(--gs-formdone-text);
	font-size: 1.75rem;                                 /* 28 */
	font-weight: 700;
	line-height: 1.2143;                                /* 34 */
	letter-spacing: -0.0125rem;
}

.gs-formdone__title:focus {
	outline: none;
}

.gs-formdone__text {
	max-width: 22rem;
	margin: 0.75rem 0 0;                                /* 12 */
	color: var(--gs-formdone-muted);
	font-size: 0.875rem;                                /* 14 */
	line-height: 1.5714;                                /* 22 */
}

/* a.x:hover, not .x:hover: base.css turns every other link red on hover. */
.gs-formdone__wa,
a.gs-formdone__wa:hover {
	color: var(--gs-formdone-text);
}

.gs-formdone__wa {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	gap: 0.375rem;
	margin-block-start: 2rem;
	padding-block: 1.8125rem 0.5rem;                    /* 29 under the rule */
	border-top: var(--gs-border-width) solid #EAEAEA;
	font-size: 0.875rem;                                /* 14 */
	font-weight: 700;
	line-height: 1.4286;                                /* 20 */
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@keyframes gs-formdone-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.97);
	}
}

@keyframes gs-formdone-fade {
	from {
		opacity: 0;
	}
}

@media (max-width: 479.98px) {
	.gs-formdone__card {
		padding: 3rem 1.25rem 1.25rem;
	}

	.gs-formdone__title {
		font-size: 1.5rem;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gs-check__box svg {
		transition: none;
		transform: none;
	}

	.gs-formdone[open] .gs-formdone__card {
		animation: gs-formdone-fade 160ms ease-out both;
	}

	/* Still: no pop, no pulse, the tick simply there. */
	.gs-formdone[open] .gs-formdone__tick,
	.gs-formdone[open] .gs-formdone__tick::before {
		animation: none;
	}

	.gs-formdone[open] .gs-formdone__tick path {
		animation: none;
		stroke-dashoffset: 0;
	}
}