/* Contact Page geometry follows the saved desktop and mobile reference. */
.contact-page { background: var(--dermobliss-background-primary); }
.contact-page__intro {
	margin-block-start: -1px;
	padding-block: 64px;
	border-block-end: 1px solid var(--dermobliss-border-default);
}
.contact-page__eyebrow,
.contact-page__card dt {
	color: var(--dermobliss-accent-gold-dark);
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
}
.contact-page__intro h1 { margin-block-start: 16px; font-size: 36px; font-weight: 300; line-height: 40px; }
.contact-page__description {
	max-inline-size: 680px;
	margin-block-start: 16px;
	color: var(--dermobliss-text-secondary);
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
}
.contact-page__description > * + * { margin-block-start: 12px; }
.contact-page__body { padding-block: 64px; }
.contact-page__grid { display: grid; gap: 56px; }
.contact-page__grid > * { min-inline-size: 0; }
.contact-page__cards { display: grid; gap: 24px; margin: 0; }
.contact-page__card {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	min-block-size: 80px;
	padding: 20px;
	border: 1px solid var(--dermobliss-border-default);
	background: #fff;
}
.contact-page__card svg { inline-size: 18px; block-size: 18px; color: var(--dermobliss-accent-gold-dark); }
.contact-page__card dt { font-size: 10px; line-height: 14px; }
.contact-page__card dd { margin-block-start: 4px; font-size: 14px; line-height: 20px; }
.contact-page__note { margin-block-start: 24px; color: var(--dermobliss-text-secondary); font-size: 12px; line-height: 20px; }
.contact-form { position: relative; min-inline-size: 0; padding: 32px; border: 1px solid var(--dermobliss-border-default); background: #fff; }
.contact-form__honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form__feedback { margin-block-end: 24px; padding: 12px 16px; border: 1px solid var(--dermobliss-accent-gold); color: var(--dermobliss-text-primary); font-size: 14px; line-height: 22px; }
.contact-form__feedback--success { border-color: var(--dermobliss-accent-gold-dark); }
.contact-form__fields { display: grid; gap: 20px; }
.contact-form__field { min-inline-size: 0; }
.contact-form__field label { display: block; margin-block-end: 8px; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.08em; }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	padding: 14px 16px;
	border: 1px solid rgb(28 27 26 / 12%);
	border-radius: 0;
	background: #fff;
	color: var(--dermobliss-text-primary);
	font-family: var(--dermobliss-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}
.contact-form__field input,
.contact-form__field select { block-size: 50px; }
.contact-form__field textarea { block-size: 150px; resize: none; }
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: var(--dermobliss-text-secondary); opacity: 0.85; }
.contact-form__field :is(input, select, textarea):focus { border-color: rgb(184 150 92 / 50%); }
.contact-form__field :is(input, select, textarea):focus-visible { outline: 2px solid var(--dermobliss-accent-gold-dark); outline-offset: 2px; }
.contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	margin-block-start: 36px;
	padding: 14px 32px;
	border: 0;
	border-radius: 0;
	background: var(--dermobliss-text-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.16em;
}
.contact-form__submit:hover { background: var(--dermobliss-accent-gold-dark); }
.contact-form__submit svg { inline-size: 16px; block-size: 16px; }
@media (max-width: 639px) { .contact-form__submit { inline-size: 100%; } }
@media (min-width: 640px) { .contact-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form__field--full { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
	.contact-page__intro { padding-block: 96px; }
	.contact-page__intro h1 { font-size: 48px; line-height: 48px; }
	.contact-page__body { padding-block: 96px; }
	.contact-page__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
	.contact-form { padding: 40px; }
}