/* ==========================================================================
   Contact

   NEEDS DESIGN SIGN-OFF. No Contact artboard exists, so every value here is
   an engineering decision - but not a free one. Spacing comes from the
   --dima-space scale, colour from the ground aliases, type from the existing
   classes, motion from the existing transition tokens. Nothing below invents
   a colour, a radius or a type size.

   The one genuinely new component is the form control. It is drawn as a
   hairline box on the surface, matching the mega-menu card and the button's
   hairline treatment rather than the filled inputs most themes default to.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The two-column band
   Proportion borrowed from the About band: a wide text column beside a
   narrower companion, not a 50/50 split.
   -------------------------------------------------------------------------- */

.dima-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: var(--dima-space-9); /* 64px */
	align-items: start;
	max-width: 1328px;
	margin-inline: auto;
	padding-inline: var(--dima-space-8); /* 56px */
}

.dima-contact__title {
	margin-block: 0 var(--dima-space-4);
}

.dima-contact__intro {
	color: var(--dima-text);
	max-width: 54ch;
	margin-block: 0 var(--dima-space-6); /* 48px */
}

/* --------------------------------------------------------------------------
   2. The form
   -------------------------------------------------------------------------- */

.dima-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dima-space-4); /* 24px */
}

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

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

.dima-form__label {
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-eyebrow-label);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dima-text-heading);
	display: flex;
	align-items: baseline;
	gap: var(--dima-space-2);
}

.dima-form__optional {
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--dima-text-muted);
}

.dima-form__hint {
	margin: 0;
	font-size: var(--dima-font-size-eyebrow-label);
	color: var(--dima-text-muted);
}

/* The control. A hairline box on the surface, so it belongs to the same
   family as the button and the mega-menu card rather than reading as a
   borrowed browser widget. */
.dima-form__control {
	width: 100%;
	min-width: 0;
	padding: 12px 16px;
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-body);
	line-height: var(--dima-line-height-body);
	color: var(--dima-text-heading);
	background-color: var(--dima-surface);
	border: 1px solid var(--dima-border);
	border-radius: 4px;
	appearance: none;
	transition:
		border-color var(--dima-transition-fast),
		background-color var(--dima-transition-fast);
}

.dima-form__control::placeholder {
	color: var(--dima-text-muted);
}

.dima-form__control:hover {
	border-color: var(--dima-accent-on-ground);
}

.dima-form__control:focus-visible {
	outline: 2px solid var(--dima-focus-ring);
	outline-offset: 2px;
	border-color: var(--dima-accent-on-ground);
}

.dima-form__control--textarea {
	resize: vertical;
	min-height: 148px;
}

.dima-form__field.is-invalid .dima-form__control {
	border-color: var(--dima-error-on-ground);
}

.dima-form__error {
	margin: 0;
	font-size: var(--dima-font-size-eyebrow-label);
	color: var(--dima-error-on-ground);
}

/* The select keeps its own chevron rather than the platform one, so it
   matches the nav toggle. */
.dima-form__select-wrap {
	position: relative;
	display: block;
}

.dima-form__control--select {
	padding-inline-end: var(--dima-space-6);
	cursor: pointer;
}

.dima-form__select-icon {
	position: absolute;
	inset-inline-end: 16px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--dima-accent-on-ground);
}

/* Honeypot: hidden from sight, from layout and from assistive technology,
   without display:none - some bots skip fields that are display:none. */
.dima-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dima-form__actions {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3); /* 16px */
	align-items: flex-start;
	margin-block-start: var(--dima-space-5); /* 32px */
}

.dima-form__legal {
	margin: 0;
	font-size: var(--dima-font-size-eyebrow-label);
	color: var(--dima-text-muted);
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   3. Notices
   -------------------------------------------------------------------------- */

.dima-notice {
	padding: var(--dima-space-4);
	border-inline-start: 2px solid var(--dima-accent-on-ground);
	background-color: var(--dima-surface-raised);
	margin-block-end: var(--dima-space-4);
}

.dima-notice--error {
	border-inline-start-color: var(--dima-error-on-ground);
}

.dima-notice__title {
	margin: 0 0 var(--dima-space-1);
	font-weight: 600;
	color: var(--dima-text-heading);
}

.dima-notice__body {
	margin: 0;
	color: var(--dima-text);
}

/* --------------------------------------------------------------------------
   4. The direct-contact rail
   Uses the --dark ground so the page has a second zone without inventing a
   surface. Sticky on tall viewports so the phone number stays in reach while
   the visitor writes.
   -------------------------------------------------------------------------- */

.dima-contact__rail {
	padding: var(--dima-space-6); /* 48px */
	position: sticky;
	top: var(--dima-space-9); /* clears the 112px header comfortably */
}

.dima-contact__rail-eyebrow {
	margin-block: 0 var(--dima-space-5);
	color: var(--dima-accent-on-ground);
}

.dima-contact__details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--dima-space-5); /* 32px */
}

.dima-contact__detail {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dima-contact__detail-label {
	font-size: var(--dima-font-size-eyebrow-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dima-text-muted);
}

.dima-contact__detail-value {
	font-family: var(--dima-font-body);
	font-size: var(--dima-font-size-body-large);
	color: var(--dima-text-heading);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	align-self: flex-start;
	transition:
		color var(--dima-transition-fast),
		border-color var(--dima-transition-fast);
}

a.dima-contact__detail-value:hover,
a.dima-contact__detail-value:focus-visible {
	color: var(--dima-accent-on-ground);
	border-block-end-color: currentColor;
}

.dima-contact__detail-value--plain {
	border-block-end: 0;
}

.dima-contact__rail-action {
	margin-block-start: var(--dima-space-6);
}

/* --------------------------------------------------------------------------
   5. What happens next
   Reuses the service card's shape. The numbers are information: these three
   stages happen in this order.
   -------------------------------------------------------------------------- */

.dima-next-steps__inner {
	max-width: 1328px;
	margin-inline: auto;
	padding-inline: var(--dima-space-8);
}

.dima-next-steps__title {
	margin-block: var(--dima-space-2) var(--dima-space-7);
}

.dima-next-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dima-space-6); /* 48px */
}

.dima-next-steps__item {
	display: flex;
	flex-direction: column;
	gap: var(--dima-space-3);
	min-width: 0;
	padding-block-start: var(--dima-space-4);
	border-block-start: 1px solid var(--dima-border);
}

.dima-next-steps__number {
	font-family: var(--dima-font-display);
	font-size: var(--dima-font-size-h3-subsection);
	line-height: 1;
	color: var(--dima-accent-on-ground);
	font-variant-numeric: tabular-nums;
}

.dima-next-steps__item-title {
	margin: 0;
	color: var(--dima-text-heading);
}

.dima-next-steps__item-body {
	margin: 0;
	color: var(--dima-text);
}

/* --------------------------------------------------------------------------
   6. Narrower viewports
   Undesigned territory, like the rest of the site below 1440px. These are
   engineering defaults that keep the page usable, not a responsive design.

   BREAKPOINTS. This file used to carry its own 1100 and 720, which belonged to
   nothing: the theme has exactly three canonical breakpoints - 1200 / 900 /
   600 - documented at the top of assets/css/responsive.css. Two private ones
   here meant the Contact page reflowed at widths where nothing else on the
   site moved, and meant six numbers had to be held in mind instead of three.
   Both have been folded onto the canonical scale:

     1100 -> 1200. Measured: the two-column band is comfortable all the way
       down to 1150, where the narrowest form field is still 284px. Collapsing
       at 1200 instead is therefore safe, and slightly more generous than the
       old 1100. No content is harmed by the earlier collapse.

     720 -> 600, NOT 900. This one is counter-intuitive, so it is written down.
       By 900 the band is already single-column, so the form is as wide as the
       whole row. Dropping the form to one column at 900 as well would render
       every text input at the full row width - measured 836px at 900px of
       viewport. An 836px input is bad form design at any viewport: the eye
       cannot track the caret back to the left edge. Keeping TWO form columns
       down to 600 gives roughly 265px fields at the low end, which is tight
       but correct. Tight beats 836px. NEEDS DESIGN.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.dima-contact__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--dima-space-7);
		padding-inline: var(--dima-space-5);
	}

	.dima-contact__rail {
		position: static;
	}

	/* NEEDS DESIGN: a readable ceiling for the collapsed column.

	   Once .dima-contact__inner is one track, the form column and the rail
	   inherit the full row width. Measured before this cap: 1036px at a
	   1100px viewport, 836px at 900px, 656px at 720px - so a single-column
	   form field was 506px, 406px and 656px wide respectively. That is a bad
	   measure for a text input regardless of how much viewport is available;
	   the constraint is the reader's eye, not the screen.

	   640px is the ceiling. It holds the two-column form grid at roughly
	   308px per field (640 - 24px gap, halved), which is close to the 296px
	   the desktop band gives at 1440. The rail is capped to the same value so
	   the two blocks stack as one column rather than two different widths.

	   Scoped deliberately to this block: at > 1200px the band is genuinely
	   two-column and the grid track already constrains both children, so a
	   max-width there would only shrink the desktop layout the artboard-
	   adjacent proportions were chosen for.

	   `width: 100%` IS LOAD-BEARING, do not delete it as redundant. These two
	   are grid items. An inline-axis `auto` margin on a grid item cancels the
	   default `justify-self: stretch`, so max-width + margin-inline: auto
	   alone leaves each item at its FIT-CONTENT width and then centres that.
	   Measured without the width: the form column collapsed to 595px and the
	   rail to 334px - two different widths, each decided by its own text
	   rather than by the layout. width: 100% restores a definite size for
	   max-width to clamp, so both land on exactly 640px. */
	.dima-contact__form-column,
	.dima-contact__rail {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

	.dima-next-steps__inner {
		padding-inline: var(--dima-space-5);
	}

	.dima-next-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.dima-next-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.dima-contact__rail {
		padding: var(--dima-space-5);
	}
}