/**
 * Contact page (template "Contact") – loaded on that template only.
 *
 * Header, contact details next to the form, the review score card and the
 * closing call to action. The form fields themselves are styled site-wide
 * in project.css (.eno-form); the FAQ below comes from project.css too.
 *
 * Mobile: details, reviews and form stacked. Tablet: details and reviews
 * side by side above the form. Desktop: details left, form right.
 */

.eno-contact {
	width: 100%;
}

/* Header ------------------------------------------------------------------ */

.eno-contact__header {
	padding-block: 3rem 2.5rem;
}

.eno-contact__title {
	margin: 0;
	font-family: var(--eno-font-heading);
	font-size: var(--eno-text-headline-lg);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.eno-contact__intro {
	max-width: 44rem;
	margin-top: 1rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-body-lg);
	line-height: 1.6;
}

.eno-contact__intro p {
	margin: 0 0 0.75em;
}

.eno-contact__intro > :last-child {
	margin-bottom: 0;
}

.eno-contact__intro a {
	color: var(--eno-color-orange-dark);
}

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

.eno-contact__main {
	display: grid;
	gap: 2.5rem;
	padding-bottom: 4.5rem;
}

.eno-contact__aside {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

.eno-contact__heading {
	margin: 0 0 1.75rem;
	font-family: var(--eno-font-heading);
	font-size: var(--eno-text-headline-md);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.eno-contact__heading::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: 0.875rem;
	border-radius: 0.75rem;
	background-color: var(--eno-color-orange);
}

/* Contact details --------------------------------------------------------- */

.eno-contact__address {
	font-style: normal;
}

.eno-contact__company {
	margin: 0 0 0.25rem;
	font-family: var(--eno-font-heading);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.4;
}

.eno-contact__lines {
	margin: 0;
	color: var(--eno-color-text-muted);
	line-height: 1.7;
}

.eno-contact__channels {
	display: grid;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--eno-color-surface-high);
	list-style: none;
}

.eno-contact__channels li {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	min-width: 0;
}

.eno-contact__channels .eno-icon {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5625rem;
	border-radius: 50%;
	background-color: var(--eno-color-orange-tint);
	color: var(--eno-color-orange);
}

.eno-contact__channels a {
	overflow-wrap: anywhere;
	color: var(--eno-color-text);
	font-size: var(--eno-text-body-lg);
	font-weight: 600;
	text-decoration: none;
	transition: color 150ms var(--eno-ease);
}

.eno-contact__channels a:hover,
.eno-contact__channels a:focus-visible {
	color: var(--eno-color-orange);
}

.eno-contact__channels span {
	color: var(--eno-color-text-muted);
}

.eno-contact__registry {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem 2rem;
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--eno-color-surface-high);
}

.eno-contact__registry dt {
	margin: 0 0 0.125rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eno-contact__registry dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.eno-contact__note {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 1.5rem 0 0;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	line-height: 1.5;
}

.eno-contact__note .eno-icon {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.0625rem;
	color: var(--eno-color-green);
}

/* Review score card ------------------------------------------------------- */

.eno-contact-reviews {
	padding: 1.5rem;
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-surface-low);
}

.eno-contact-reviews__title {
	margin: 0 0 0.875rem;
	font-family: var(--eno-font-heading);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
}

.eno-contact-reviews__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.eno-contact-reviews__value {
	margin: 0;
	font-family: var(--eno-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.eno-contact-reviews__stars {
	display: inline-flex;
	color: var(--eno-color-star);
}

.eno-contact-reviews__stars .eno-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.eno-contact-reviews__meta {
	flex-basis: 100%;
	margin: 0;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
}

.eno-contact-reviews__review {
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eno-color-surface-high);
}

.eno-contact-reviews__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--eno-color-text);
	font-size: var(--eno-text-body);
	font-style: italic;
	line-height: 1.6;
}

.eno-contact-reviews__quote p {
	margin: 0;
}

.eno-contact-reviews__quote p::before {
	content: "“";
}

.eno-contact-reviews__quote p::after {
	content: "”";
}

.eno-contact-reviews__author {
	margin-top: 0.5rem;
	color: var(--eno-color-text-muted);
	font-size: var(--eno-text-label);
	font-weight: 600;
}

.eno-contact-reviews__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	color: var(--eno-color-orange-dark);
	font-size: var(--eno-text-label);
	font-weight: 700;
	text-decoration: none;
	transition: color 150ms var(--eno-ease);
}

.eno-contact-reviews__link .eno-icon {
	transition: transform 150ms var(--eno-ease);
}

.eno-contact-reviews__link:hover,
.eno-contact-reviews__link:focus-visible {
	color: var(--eno-color-orange);
}

.eno-contact-reviews__link:hover .eno-icon {
	transform: translateX(4px);
}

/* Form card --------------------------------------------------------------- */

.eno-contact__form {
	padding: 1.75rem 1.25rem;
	border: 1px solid var(--eno-color-surface-high);
	border-top: 3px solid var(--eno-color-orange);
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-white);
	box-shadow: var(--eno-shadow-float);
}

.eno-contact__form-text {
	max-width: 36rem;
	margin: -0.5rem 0 1.75rem;
	color: var(--eno-color-text-muted);
	line-height: 1.6;
}

.eno-contact__placeholder {
	margin: 0;
	padding: 3rem 1.5rem;
	border: 1px dashed var(--eno-color-outline);
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-surface-low);
	color: var(--eno-color-text-muted);
	text-align: center;
}

/* Tablet: details and review card side by side above the form. */
@media (min-width: 768px) {
	.eno-contact__header {
		padding-block: 4rem 3rem;
	}

	.eno-contact__main {
		gap: 3rem;
		padding-bottom: 6rem;
	}

	.eno-contact__aside {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
		gap: 2.5rem;
	}

	.eno-contact-reviews {
		align-self: start;
		padding: 1.75rem;
	}

	.eno-contact__form {
		padding: 2.5rem;
	}
}

/* Desktop: details left, form right. */
@media (min-width: 1024px) {
	.eno-contact__main {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 4rem;
		align-items: start;
	}

	.eno-contact__aside {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 2.5rem;
	}

	.eno-contact__form {
		padding: 3rem;
	}
}

@media (min-width: 1280px) {
	.eno-contact__main {
		gap: 6rem;
	}
}

/* Closing call to action -------------------------------------------------- */

.eno-contact-cta {
	padding-block: 0 5rem;
}

.eno-contact-cta__panel {
	position: relative;
	z-index: 0;
	display: grid;
	align-items: center;
	gap: 2rem;
	overflow: hidden;
	padding: 2.5rem 1.5rem;
	border-radius: var(--eno-radius-lg);
	background-color: var(--eno-color-orange);
	background-image: radial-gradient(circle at 80% 50%, rgb(255 255 255 / 16%), transparent 45%);
	color: var(--eno-color-footer);
}

/* Corrugated-board texture, fading in towards the box. */
.eno-contact-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--eno-corrugated);
	background-size: 40px 18px;
	opacity: 0.22;
	-webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
	mask-image: linear-gradient(100deg, transparent 35%, #000 85%);
	pointer-events: none;
}

.eno-contact-cta__title {
	max-width: 22ch;
	margin: 0;
	color: inherit;
	font-family: var(--eno-font-heading);
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.eno-contact-cta__text {
	max-width: 34rem;
	margin-top: 1rem;
	font-size: var(--eno-text-body-lg);
	line-height: 1.6;
}

.eno-contact-cta__text p {
	margin: 0 0 0.75em;
}

.eno-contact-cta__text > :last-child {
	margin-bottom: 0;
}

.eno-contact-cta__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.eno-contact-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.eno-contact-cta__actions .eno-button .eno-icon {
	transition: transform 150ms var(--eno-ease);
}

.eno-contact-cta__actions .eno-button:hover .eno-icon {
	transform: translateX(4px);
}

.eno-contact-cta :focus-visible {
	outline-color: var(--eno-color-footer);
}

.eno-contact-cta__media {
	display: none;
}

.eno-contact-cta .eno-cta__box {
	max-width: 17rem;
}

/* Reveal (armed by main.js via [data-eno-reveal]; visible without JS). */
.eno-contact-cta__content > * {
	transition: opacity 600ms var(--eno-ease), transform 600ms var(--eno-ease);
}

.eno-contact-cta__content > :nth-child(2) {
	transition-delay: 100ms;
}

.eno-contact-cta__content > :nth-child(3) {
	transition-delay: 200ms;
}

.eno-contact-cta.is-armed:not(.is-inview) .eno-contact-cta__content > * {
	opacity: 0;
	transform: translateY(1.25rem);
}

@media (max-width: 479px) {
	.eno-contact-cta__actions .eno-button {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.eno-contact-cta {
		padding-bottom: 6rem;
	}

	.eno-contact-cta__panel {
		grid-template-columns: 3fr 2fr;
		gap: 3rem;
		padding: 3.5rem 3rem;
	}

	.eno-contact-cta__media {
		display: block;
	}
}

@media (min-width: 1024px) {
	.eno-contact-cta__panel {
		padding: 4rem 4.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eno-contact-cta__content > *,
	.eno-contact-reviews__link .eno-icon,
	.eno-contact-cta__actions .eno-button .eno-icon {
		transition: none;
	}

	.eno-contact-reviews__link:hover .eno-icon,
	.eno-contact-cta__actions .eno-button:hover .eno-icon {
		transform: none;
	}
}