/* =========================================================================
   Enquiry Forge — front-end styles

   Everything visual is driven by the tokens in the first block. When you
   send your design, that block is the only part that has to change: swap
   the values and the whole form follows. The rest is structure.
   ========================================================================= */

.enqf {
	/* Colour */
	--enqf-text:          #16161a;
	--enqf-label:         #16161a;
	--enqf-muted:         #8b8b93;
	--enqf-line:          #e7e7ea;
	--enqf-line-focus:    #16161a;
	--enqf-field-bg:      #f2f2f4;
	--enqf-accent:        #e03a3a;
	--enqf-accent-hover:  #c92f2f;
	--enqf-accent-text:   #ffffff;
	--enqf-error:         #b3261e;
	--enqf-error-bg:      #fdf2f1;
	--enqf-success:       #1d6b45;
	--enqf-success-bg:    #f0f7f3;

	/* Type */
	--enqf-font:          inherit;
	--enqf-size:          1rem;
	--enqf-label-size:    0.8125rem;
	--enqf-label-weight:  700;
	--enqf-label-spacing: 0.03em;
	--enqf-title-size:    1.75rem;
	--enqf-title-weight:  800;

	/* Shape and rhythm */
	--enqf-radius:        12px;
	--enqf-card-radius:   20px;
	--enqf-button-radius: 999px;
	--enqf-gap:           1.5rem;
	--enqf-pad-y:         0.9rem;
	--enqf-pad-x:         1.1rem;
	--enqf-border:        1px;
	--enqf-card-pad:      2.25rem;

	font-family: var(--enqf-font);
	color: var(--enqf-text);
	max-width: 46rem;

	/* Card shell */
	background: #ffffff;
	border: var(--enqf-border) solid var(--enqf-line);
	border-radius: var(--enqf-card-radius);
	padding: var(--enqf-card-pad);
}

.enqf *,
.enqf *::before,
.enqf *::after {
	box-sizing: border-box;
}

/* --- Headings ---------------------------------------------------------- */

.enqf-title {
	margin: 0 0 1.5rem;
	line-height: 1.1;
	font-size: var(--enqf-title-size);
	font-weight: var(--enqf-title-weight);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.enqf-intro {
	margin: 0 0 1.75rem;
	color: var(--enqf-muted);
}

/* --- Layout ------------------------------------------------------------ */

.enqf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--enqf-gap);
}

.enqf-field--full {
	grid-column: 1 / -1;
}

.enqf-field--half {
	grid-column: span 1;
}

@media (max-width: 640px) {
	.enqf-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.enqf-field--half {
		grid-column: 1 / -1;
	}
}

.enqf-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* --- Labels and inputs ------------------------------------------------- */

.enqf-label {
	display: block;
	font-size: var(--enqf-label-size);
	font-weight: var(--enqf-label-weight);
	letter-spacing: var(--enqf-label-spacing);
	text-transform: uppercase;
	color: var(--enqf-label);
	margin-bottom: 0.55rem;
}

.enqf-required {
	color: var(--enqf-error);
	margin-left: 0.15em;
}

.enqf-input {
	font: inherit;
	font-size: var(--enqf-size);
	color: var(--enqf-text);
	width: 100%;
	padding: var(--enqf-pad-y) var(--enqf-pad-x);
	background: var(--enqf-field-bg);
	border: var(--enqf-border) solid var(--enqf-field-bg);
	border-radius: var(--enqf-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.enqf-input::placeholder {
	color: var(--enqf-muted);
	opacity: 0.7;
}

.enqf-input:focus {
	outline: none;
	border-color: var(--enqf-line-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--enqf-line-focus) 18%, transparent);
}

/* Keyboard users always get a visible focus ring, even in forced-colors. */
.enqf-input:focus-visible,
.enqf-submit:focus-visible {
	outline: 2px solid var(--enqf-line-focus);
	outline-offset: 2px;
}

.enqf-textarea {
	resize: vertical;
	min-height: 8rem;
	line-height: 1.5;
}

.enqf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2316161a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--enqf-pad-x) center;
	background-size: 12px 8px;
	padding-right: calc(var(--enqf-pad-x) * 2 + 12px);
	color: var(--enqf-muted);
}

.enqf-select:invalid,
.enqf-select option[value=""] {
	color: var(--enqf-muted);
}

.enqf-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.enqf-checkbox input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

/* --- Errors ------------------------------------------------------------ */

.enqf-field--error .enqf-input {
	border-color: var(--enqf-error);
}

.enqf-error {
	color: var(--enqf-error);
	font-size: 0.8125rem;
	margin-top: 0.35rem;
}

/* --- Notices ----------------------------------------------------------- */

.enqf-notice {
	padding: 1rem 1.15rem;
	border-radius: var(--enqf-radius);
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

.enqf-notice--success {
	color: var(--enqf-success);
	background: var(--enqf-success-bg);
	border: var(--enqf-border) solid color-mix(in srgb, var(--enqf-success) 30%, transparent);
	margin-bottom: 0;
}

.enqf-notice--error {
	color: var(--enqf-error);
	background: var(--enqf-error-bg);
	border: var(--enqf-border) solid color-mix(in srgb, var(--enqf-error) 30%, transparent);
}

/* --- Button ------------------------------------------------------------ */

.enqf-actions {
	margin-top: 1.75rem;
}

.enqf-submit {
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--enqf-accent-text);
	background: var(--enqf-accent);
	border: none;
	border-radius: var(--enqf-button-radius);
	width: 100%;
	padding: 1.05rem 1.75rem;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 0 0 0 rgba(224, 58, 58, 0);
}

.enqf-submit:hover {
	background: var(--enqf-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--enqf-accent) 55%, transparent);
}

.enqf-submit:active {
	transform: translateY(0);
	box-shadow: none;
}

/* --- Honeypot: hidden from people, present for bots --------------------- */

.enqf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.enqf-input,
	.enqf-submit {
		transition: none;
	}
}