/* ==========================================================================
   messe-display — Contact + the enquiry form
   Figma "Contact us" (58:4990); the same form component is reused by
   "Exhibition custom" (46:2736) and by /print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — Figma Article > Container 1525.6x734 with an IMAGE fill under a black
   overlay, headline centred (Inter 400/48 #FFFFFF).
   -------------------------------------------------------------------------- */
.md-contact-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 734px;
	padding: 0 60px;
	background: var(--md-black) center/cover no-repeat;
	text-align: center;
}
.md-contact-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}
.md-contact-hero h1 {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: 1200px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 48px;
	line-height: 60px;
	color: var(--md-white);
}

/* --------------------------------------------------------------------------
   White card.
   In the Figma tree the card's inner container sits at y=663 while the hero
   runs to y=853 — it OVERLAPS the photo by 190px. Card width 1410.
   -------------------------------------------------------------------------- */
.md-contact {
	position: relative;
	z-index: 2;
	max-width: 1410px;
	margin: -190px auto 0;
	padding: 90px;
	background: var(--md-white);
}

/* Info column ~340 wide; the form starts at x=580 in the frame. */
.md-contact__cols {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 88px;
	align-items: start;
}

.md-contact__info h2 {
	margin: 0 0 40px;
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	color: var(--md-black);
}
.md-contact__block { margin-bottom: 36px; }
.md-contact__block h3 {
	margin: 0 0 10px;
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 25px;
	line-height: 30px;
	color: var(--md-black);
}
/* Supporting line grey, the contact detail itself black — as in the frame. */
.md-contact__block p { margin: 0 0 4px; font-size: 18px; line-height: 28px; color: var(--md-grey); }
.md-contact__block p.is-strong { color: var(--md-black); }

/* --------------------------------------------------------------------------
   Enquiry form
   -------------------------------------------------------------------------- */
.md-form { max-width: 100%; }

.md-form__lead { margin: 0 0 40px; }
.md-form__title {
	margin: 0 0 16px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 60px;
	line-height: 68px;
	color: var(--md-black);
}
.md-form__subtitle {
	margin: 0 0 16px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 29px;
	line-height: 38px;
	color: var(--md-black);
}
.md-form__intro { margin: 0; font-size: 18px; line-height: 28.8px; color: var(--md-ink-2); }

/* Dimension rows — label, range slider, number box (#EFEFEF), unit. */
.md-form__dims { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.md-form__dim label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--md-font-banner);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--md-black);
}
.md-form__dim-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 164px auto;
	gap: 16px;
	align-items: center;
}

.md-form__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: #EFEDE8;
	outline: none;
}
.md-form__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 2px;
	background: var(--md-black);
	cursor: pointer;
}
.md-form__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 2px;
	background: var(--md-black);
	cursor: pointer;
}
.md-form__range:focus-visible { outline: 2px solid var(--md-purple); outline-offset: 4px; }

.md-form__num {
	height: 52px;
	padding: 0 16px;
	border: 0;
	background: var(--md-fill-2);
	font-family: var(--md-font);
	font-size: 15px;
	text-align: center;
	color: var(--md-black);
}
.md-form__unit { font-family: var(--md-font-banner); font-size: 14px; color: var(--md-ink-2); }

/* Field grid — THREE columns in the frame, not two. */
.md-form__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 24px;
}
.md-form__field--full { grid-column: 1 / -1; }

/* Labels are uppercase with a red required marker. */
.md-form__field label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--md-font);
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--md-black);
}
.md-form__req { color: var(--md-red); }

.md-form__field input[type="text"],
.md-form__field input[type="email"],
.md-form__field input[type="tel"],
.md-form__field textarea {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid #D9D9D9;
	background: var(--md-white);
	font-family: var(--md-font);
	font-size: 15px;
	line-height: 24px;
	color: var(--md-black);
}
.md-form__field textarea { min-height: 200px; resize: vertical; }
.md-form__field input:focus,
.md-form__field textarea:focus { outline: 2px solid var(--md-purple); outline-offset: -2px; }

/* CHOOSE FILE and SUBMIT are black pills in the frame. The native file input
   is visually hidden — the label is the button. Leaving it visible drew the
   browser's own "Choose File / No file chosen" alongside ours. */
.md-form__file { display: inline-flex; align-items: center; gap: 14px; margin-top: 4px; cursor: pointer; }
.md-form__file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.md-form__filebtn {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 26px;
	border-radius: var(--md-r-10);
	background: var(--md-black);
	color: var(--md-white);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.05px;
	text-transform: uppercase;
}
.md-form__file:hover .md-form__filebtn { opacity: .85; }
.md-form__file input[type="file"]:focus-visible + .md-form__filebtn { outline: 2px solid var(--md-purple); outline-offset: 2px; }
.md-form__filename { font-size: 14px; color: var(--md-ink-2); }

.md-form__legal { margin: 26px 0 0; font-size: 13px; line-height: 20px; color: var(--md-ink-2); }
.md-form__consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 14px; line-height: 22px; }
.md-form__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--md-purple); }

.md-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	height: 52px;
	margin-top: 30px;
	padding: 0 28px;
	border-radius: var(--md-r-10);
	background: var(--md-black);
	color: var(--md-white);
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.05px;
	text-transform: uppercase;
}
.md-form__submit:hover { opacity: .85; }

.md-form__msg { margin-top: 16px; font-size: 15px; }
.md-form__msg.is-error { color: var(--md-red); }

/* --------------------------------------------------------------------------
   Map — Figma 1526x655, full-bleed under the card.
   -------------------------------------------------------------------------- */
.md-contact__map { margin-top: 80px; height: 655px; background: var(--md-fill-3); }
.md-contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.md-contact__strip { height: 655px; margin-top: 80px; background: var(--md-fill-3) center/cover no-repeat; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
	.md-contact-hero { height: 520px; padding-inline: 40px; }
	.md-contact-hero h1 { font-size: 36px; line-height: 46px; }
	.md-contact { margin-top: -120px; padding: 48px 40px; }
	.md-contact__cols { grid-template-columns: 1fr; gap: 48px; }
	.md-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md-form__title { font-size: 40px; line-height: 48px; }
	.md-contact__map, .md-contact__strip { height: 420px; margin-top: 56px; }
}
@media (max-width: 759px) {
	.md-contact-hero { height: 360px; padding-inline: 16px; }
	.md-contact-hero h1 { font-size: 26px; line-height: 34px; }
	.md-contact { margin-top: -60px; padding: 28px 16px; }
	.md-form__title { font-size: 28px; line-height: 36px; }
	.md-form__subtitle { font-size: 20px; line-height: 28px; }
	.md-form__grid { grid-template-columns: 1fr; }
	.md-form__dim-row { grid-template-columns: minmax(0, 1fr) 96px auto; gap: 10px; }
	.md-contact__map, .md-contact__strip { height: 300px; margin-top: 40px; }
}

/* ==========================================================================
   Enquiry form as an ordinary page section — /exhibition-custom and /print.
   These pages cannot reuse `.md-contact`: that class carries the contact page's
   deliberate -190px overlap onto its photo hero, and here there is no hero to
   overlap, so the form was dragged up into the promo image above it.
   The Figma frame puts the lead copy and the form in the same 1110 column.
   ========================================================================== */
.md-formsec { padding-inline: var(--md-gutter); }
.md-formsec__inner { max-width: 1110px; margin-inline: auto; }

@media (max-width: 759px) {
	.md-form__title    { font-size: 34px; line-height: 42px; }
	.md-form__subtitle { font-size: 20px; line-height: 28px; }
	.md-form__intro    { font-size: 16px; line-height: 26px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
	.md-form__title    { font-size: 44px; line-height: 54px; }
	.md-form__subtitle { font-size: 24px; line-height: 32px; }
}