@charset "UTF-8";
/**
 * DigitalWebStudio — enquiry form and contact page.
 * Loaded only where the form is rendered.
 */

@layer components {
	.dws-contact {
		display: grid;
		gap: var(--dws-space-12);
	}

	@media (min-width: 960px) {
		.dws-contact {
			grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
			gap: var(--dws-space-16);
			align-items: start;
		}
	}

	.dws-contact__aside {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-6);
	}

	.dws-contact__intro {
		font-size: var(--dws-text-base);
	}

	.dws-contact__card {
		gap: var(--dws-space-5);
	}

	.dws-contact__note {
		padding: 0;
	}

	.dws-contact__steps {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-3);
		margin: 0;
		padding-left: 1.25em;
		color: var(--dws-ink-soft);
		font-size: var(--dws-text-base);
	}

	.dws-contact__steps li::marker {
		color: var(--dws-accent);
		font-weight: 700;
	}

	/* --- Form -------------------------------------------------------------- */
	.dws-form {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-6);
	}

	/* Off-screen rather than display:none — some bots skip hidden inputs, and
	   this needs to look fillable to them while staying unreachable for people
	   and for assistive technology. */
	.dws-form__trap {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.dws-form__grid {
		display: grid;
		gap: var(--dws-space-5);
	}

	@media (min-width: 640px) {
		.dws-form__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.dws-form__field--wide {
			grid-column: 1 / -1;
		}
	}

	.dws-form__field {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-2);
		min-width: 0;
	}

	.dws-form__label {
		font-size: var(--dws-text-sm);
		font-weight: 600;
		color: var(--dws-ink);
	}

	.dws-form__required {
		color: var(--dws-accent);
	}

	.dws-form__input {
		width: 100%;
		padding: 0.75rem 0.9375rem;
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border-strong);
		border-radius: var(--dws-radius);
		font-size: var(--dws-text-base);
		line-height: 1.5;
		color: var(--dws-ink);
		transition: border-color var(--dws-dur-fast) var(--dws-ease),
			box-shadow var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-form__input::placeholder {
		color: var(--dws-gray-300);
	}

	.dws-form__input:hover {
		border-color: var(--dws-gray-500);
	}

	.dws-form__input:focus {
		outline: none;
		border-color: var(--dws-accent);
		box-shadow: 0 0 0 3px var(--dws-blue-100);
	}

	textarea.dws-form__input {
		resize: vertical;
		min-height: 8rem;
	}

	.dws-form__select {
		appearance: none;
		padding-right: 2.5rem;
		/* Inline SVG chevron as a data URI: no extra request, and it inherits
		   nothing so it stays crisp at any zoom. */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%234d5972' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 0.9375rem center;
	}

	.dws-form__fieldset {
		display: flex;
		flex-direction: column;
		gap: var(--dws-space-3);
	}

	.dws-form__choices {
		display: grid;
		gap: var(--dws-space-2);
	}

	@media (min-width: 520px) {
		.dws-form__choices {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.dws-form__choice {
		display: flex;
		align-items: center;
		gap: var(--dws-space-3);
		padding: 0.6875rem 0.9375rem;
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius);
		font-size: var(--dws-text-sm);
		font-weight: 500;
		cursor: pointer;
		transition: border-color var(--dws-dur-fast) var(--dws-ease),
			background-color var(--dws-dur-fast) var(--dws-ease);
	}

	.dws-form__choice:hover {
		border-color: var(--dws-blue-200);
		background-color: var(--dws-blue-50);
	}

	.dws-form__choice:has(input:checked) {
		border-color: var(--dws-accent);
		background-color: var(--dws-blue-50);
	}

	.dws-form__choice input,
	.dws-form__consent input {
		flex-shrink: 0;
		width: 1.0625rem;
		height: 1.0625rem;
		margin: 0;
		accent-color: var(--dws-accent);
	}

	.dws-form__consent {
		display: flex;
		align-items: flex-start;
		gap: var(--dws-space-3);
		font-size: var(--dws-text-sm);
		line-height: 1.55;
		color: var(--dws-ink-soft);
		cursor: pointer;
	}

	.dws-form__consent input {
		margin-top: 0.2em;
	}

	.dws-form__hint {
		font-size: var(--dws-text-sm);
		color: var(--dws-ink-muted);
	}

	.dws-form__error {
		display: flex;
		align-items: center;
		gap: var(--dws-space-2);
		font-size: var(--dws-text-sm);
		font-weight: 500;
		color: var(--dws-danger);
	}

	.dws-form__field.has-error .dws-form__input {
		border-color: var(--dws-danger);
	}

	.dws-form__field.has-error .dws-form__input:focus {
		box-shadow: 0 0 0 3px rgb(192 38 74 / 0.14);
	}

	/* --- Contact Form 7 ---------------------------------------------------- */
	.wpcf7 {
		position: relative;
	}

	.wpcf7 .screen-reader-response {
		position: absolute;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		word-wrap: normal !important;
	}

	.wpcf7 form.dws-form p {
		margin: 0;
	}

	.wpcf7-form-control-wrap {
		display: block;
	}

	.wpcf7-form-control-wrap .dws-form__input,
	.wpcf7 select.dws-form__input,
	.wpcf7 textarea.dws-form__input {
		width: 100%;
	}

	.wpcf7-not-valid.dws-form__input,
	.wpcf7 .wpcf7-not-valid {
		border-color: var(--dws-danger);
	}

	.wpcf7-not-valid:focus {
		box-shadow: 0 0 0 3px rgb(192 38 74 / 0.14);
	}

	.wpcf7-not-valid-tip {
		display: block;
		margin-top: var(--dws-space-2);
		font-size: var(--dws-text-sm);
		font-weight: 500;
		color: var(--dws-danger);
	}

	.wpcf7-checkbox,
	.wpcf7-radio {
		display: grid;
		gap: var(--dws-space-2);
	}

	@media (min-width: 520px) {
		.wpcf7-checkbox {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	/* Card chrome lives on the list item; the inner CF7 <label> is the
	   flex row so checkbox + text share one alignment context. */
	.wpcf7-list-item {
		display: flex;
		margin: 0;
		padding: 0;
		min-width: 0;
		background-color: var(--dws-surface);
		border: 1px solid var(--dws-border);
		border-radius: var(--dws-radius);
		font-size: var(--dws-text-sm);
		font-weight: 500;
		cursor: pointer;
		transition: border-color var(--dws-dur-fast) var(--dws-ease),
			background-color var(--dws-dur-fast) var(--dws-ease);
	}

	.wpcf7-list-item:hover {
		border-color: var(--dws-blue-200);
		background-color: var(--dws-blue-50);
	}

	.wpcf7-list-item:has(input:checked) {
		border-color: var(--dws-accent);
		background-color: var(--dws-blue-50);
	}

	.wpcf7-checkbox .wpcf7-list-item > label,
	.wpcf7-radio .wpcf7-list-item > label {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0.6875rem 0.9375rem;
		cursor: pointer;
		line-height: 1.4;
	}

	.wpcf7-list-item input[type="checkbox"],
	.wpcf7-list-item input[type="radio"] {
		box-sizing: border-box;
		display: inline-block;
		width: 18px;
		height: 18px;
		flex: 0 0 18px;
		margin: 0;
		padding: 0;
		accent-color: var(--dws-accent);
		vertical-align: middle;
	}

	.wpcf7-list-item-label {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wpcf7-acceptance {
		display: block;
	}

	.wpcf7-acceptance .wpcf7-list-item {
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		font-size: var(--dws-text-sm);
		font-weight: 400;
		line-height: 1.55;
		color: var(--dws-ink-soft);
	}

	.wpcf7-acceptance .wpcf7-list-item:hover,
	.wpcf7-acceptance .wpcf7-list-item:has(input:checked) {
		background: none;
		border-color: transparent;
	}

	.wpcf7-acceptance .wpcf7-list-item > label {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		cursor: pointer;
		line-height: 1.55;
	}

	/* class:dws-form__consent is on the input; drop leftover label styles. */
	.wpcf7-acceptance input.dws-form__consent {
		display: inline-block;
		font-size: inherit;
		line-height: normal;
		color: inherit;
	}

	.wpcf7-acceptance a {
		color: inherit;
		text-decoration: underline;
	}

	.wpcf7 .dws-form__actions .wpcf7-spinner,
	.wpcf7-spinner {
		display: none;
		width: 1.25rem;
		height: 1.25rem;
		margin: 0;
		border: 2px solid var(--dws-blue-100);
		border-top-color: var(--dws-accent);
		border-radius: 50%;
		background: none;
		animation: dws-cf7-spin 0.7s linear infinite;
	}

	.wpcf7 form.submitting .wpcf7-spinner {
		display: inline-block;
		vertical-align: middle;
	}

	.wpcf7 form.submitting .wpcf7-submit {
		opacity: 0.7;
		pointer-events: none;
	}

	@keyframes dws-cf7-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.wpcf7-submit {
		appearance: none;
		font-family: inherit;
		cursor: pointer;
	}

	.wpcf7-response-output {
		display: flex;
		align-items: flex-start;
		gap: var(--dws-space-3);
		order: -1;
		margin: 0 0 var(--dws-space-6);
		padding: var(--dws-space-5);
		border-radius: var(--dws-radius);
		font-size: var(--dws-text-base);
		font-weight: 700;
	}

	.wpcf7 form.init .wpcf7-response-output,
	.wpcf7-response-output:empty {
		display: none;
	}

	.wpcf7 form.sent .wpcf7-response-output {
		display: flex;
		background-color: #eaf7f0;
		border: 1px solid #b6e0ca;
		color: #0b5c3d;
	}

	.wpcf7 form.invalid .wpcf7-response-output,
	.wpcf7 form.unaccepted .wpcf7-response-output,
	.wpcf7 form.spam .wpcf7-response-output,
	.wpcf7 form.failed .wpcf7-response-output,
	.wpcf7 form.aborted .wpcf7-response-output {
		display: flex;
		background-color: #fdeef1;
		border: 1px solid #f5c4ce;
		color: #8c1c37;
		font-weight: 500;
	}

	.dws-form__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dws-space-4) var(--dws-space-6);
	}

	.dws-form__note {
		font-size: var(--dws-text-sm);
		color: var(--dws-ink-muted);
		max-width: 34ch;
	}

	/* --- Alerts ------------------------------------------------------------- */
	.dws-alert {
		display: flex;
		align-items: flex-start;
		gap: var(--dws-space-3);
		padding: var(--dws-space-5);
		border-radius: var(--dws-radius);
		font-size: var(--dws-text-base);
	}

	.dws-alert[hidden] {
		display: none;
	}

	.dws-alert strong {
		display: block;
		font-weight: 700;
	}

	.dws-alert p {
		margin-top: var(--dws-space-1);
	}

	.dws-alert--success {
		background-color: #eaf7f0;
		border: 1px solid #b6e0ca;
		color: #0b5c3d;
	}

	.dws-alert--success .dws-icon {
		flex-shrink: 0;
		color: var(--dws-success);
	}

	.dws-alert--error {
		background-color: #fdeef1;
		border: 1px solid #f5c4ce;
		color: #8c1c37;
	}

	.dws-alert--error .dws-icon {
		flex-shrink: 0;
		color: var(--dws-danger);
	}
}