/* =====================================================================
   SOMNATH GROUP — CONTACT
   The shared design system for the Contact page and the Brochure page:
   gold / dark-charcoal identity, hero band, card panel, contact cards,
   map, process steps and the reveal animations.
   NOTE: nav + footer rules are intentionally NOT defined here. They
   live in footer.css, which is loaded after this file on every page.
   ===================================================================== */

:root {
	--inq-ink: #202727;
	--inq-ink-soft: #293736;
	--inq-ink-2: #2a3433;
	--inq-ink-deep: #111818;
	/* One surface shared by the hero and the form band. Both sections paint
	   the exact same flat colour with no gradient, so there is no seam and
	   no value clash between them. */
	--inq-band: #1c2625;
	--inq-gold: #d8ad6d;
	--inq-gold-deep: #aa8250;
	--inq-gold-light: #e7be7d;
	--inq-gold-soft: #f0cc91;
	--inq-cream: #f7f2ed;
	--inq-cream-2: #f7f4ef;
	--inq-card: #ffffff;
	--inq-line: #e6e1da;
	--inq-muted: #686d6a;
	--inq-muted-2: #737a76;
	--inq-green: #1d5d49;
	--inq-green-bright: #30b86a;
	--inq-shadow-sm: 0 6px 18px rgba(32, 39, 39, 0.07);
	--inq-shadow: 0 18px 44px rgba(32, 39, 39, 0.1);
	--inq-shadow-lg: 0 30px 70px rgba(32, 39, 39, 0.16);
	--inq-radius: 18px;
	--inq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------- */
/* RESET                                                 */
/* ---------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
}

html,
body {
	width: 100%;
	overflow-x: hidden;
}

body {
	background-color: var(--inq-cream);
	color: var(--inq-ink);
/* Matches the stack footer.css already resolves to site-wide, so the shared
   nav and footer render identically here and on every other page. */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	/* No -webkit-font-smoothing here. It is an inherited property, so setting
	   it on body changed the weight of the shared nav and footer text on this
	   page and brochure.html only, making those two headers look thinner and
	   lighter than the same nav everywhere else. The other pages leave it at
	   the browser default; matching them keeps the header identical sitewide. */
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

::selection {
	background: var(--inq-gold);
	color: var(--inq-ink-deep);
}

/* ---------------------------------------------------- */
/* PRELOADER                                             */
/* ---------------------------------------------------- */

#preloader {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	background-color: #0b0f0f;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 1;
	transition: opacity 0.6s ease;
}

/* The preloader keeps #main-content hidden. It is revealed together with the
   page fade by .inq-ready, so the content never paints and then blinks back
   out. A <noscript> override in the markup exposes it when JS is off. */
#main-content {
	display: none;
}

.inq-ready #main-content {
	display: block;
	animation: inq-page-in 0.7s var(--inq-ease) both;
}

@keyframes inq-page-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.preloader-logo {
	width: 20%;
	max-width: 190px;
	border-radius: 10%;
	animation: inq-logo-breathe 2.4s ease-in-out infinite;
}

@keyframes inq-logo-breathe {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.85;
	}
	50% {
		transform: scale(1.06);
		opacity: 1;
	}
}

/* ---------------------------------------------------- */
/* SHARED SECTION FURNITURE                             */
/* ---------------------------------------------------- */

.inq-shell {
	width: min(92%, 1240px);
	margin-inline: auto;
}

.inq-section {
	padding: clamp(48px, 5.5vw, 78px) 0;
}

.inq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--inq-gold-deep);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.inq-eyebrow::before,
.inq-eyebrow::after {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.65;
}

.inq-eyebrow--center {
	justify-content: center;
}

.inq-eyebrow--center::after {
	display: none;
}

.inq-title {
	color: var(--inq-ink);
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.12;
}

.inq-title em {
	color: var(--inq-gold-deep);
	font-style: italic;
}

.inq-lede {
	max-width: 62ch;
	margin: 16px auto 0;
	color: var(--inq-muted);
	font-size: clamp(0.95rem, 1.6vw, 1.06rem);
	line-height: 1.75;
}

.inq-center {
	text-align: center;
}

/* Scroll-reveal primitives (driven by IntersectionObserver) */
.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity 0.85s var(--inq-ease),
		transform 0.85s var(--inq-ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.reveal--left {
	transform: translateX(-40px);
}

.reveal--right {
	transform: translateX(40px);
}

.reveal--scale {
	transform: scale(0.94);
}

/* ---------------------------------------------------- */
/* HERO                                                  */
/* ---------------------------------------------------- */

/* Flat charcoal. No photograph, no gradient, no radial wash — the surface is
   identical to the form band below it, so the two read as one band. */
.inq-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	padding: 132px 6% 38px;
	background: var(--inq-band);
}

.inq-hero__inner {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	text-align: center;
	color: #fff;
	animation: inq-rise 0.9s 0.1s both var(--inq-ease);
}

.inq-hero__eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	color: var(--inq-gold);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

@keyframes inq-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.inq-hero__title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.9rem, 4.6vw, 3.4rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.inq-hero__title em {
	color: var(--inq-gold);
	font-style: italic;
}

.inq-hero__title::after {
	content: "";
	display: block;
	width: 54px;
	height: 2px;
	margin: 18px auto 0;
	background: var(--inq-gold);
	opacity: 0.85;
}

.inq-hero__lede {
	max-width: 52ch;
	margin: 18px auto 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(0.92rem, 1.6vw, 1.02rem);
	line-height: 1.7;
}


/* ---------------------------------------------------- */
/* FORM + INFO BAND                                      */
/* ---------------------------------------------------- */

/* Same flat colour as the hero directly above it. No fade, no glow, no
   separate value — the panel and the contact cards sit on one surface. */
.inq-main {
	position: relative;
	background: var(--inq-band);
	padding: clamp(30px, 3.5vw, 48px) 0 clamp(44px, 5vw, 68px);
}

.inq-main__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 34px;
	align-items: start;
}

.inq-panel {
	border: 1px solid rgba(32, 39, 39, 0.08);
	border-radius: 22px;
	background: var(--inq-card);
	box-shadow: var(--inq-shadow-lg);
	overflow: hidden;
}

.inq-panel__head {
	padding: 30px 32px 24px;
	border-bottom: 1px solid var(--inq-line);
	background: linear-gradient(180deg, #fffdfb, #ffffff);
}

.inq-panel__head .inq-title {
	font-size: clamp(1.6rem, 3.2vw, 2.15rem);
}

.inq-panel__head p {
	margin: 10px 0 0;
	color: var(--inq-muted);
	font-size: 0.92rem;
}

.inq-panel__body {
	padding: 30px 32px 34px;
}

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

.inq-form {
	display: grid;
	gap: 18px;
}

.inq-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.inq-field {
	position: relative;
	display: block;
}

.inq-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.inq-field input,
.inq-field select,
.inq-field textarea {
	width: 100%;
	padding: 21px 15px 11px;
	border: 1px solid var(--inq-line);
	border-radius: 12px;
	background: var(--inq-cream-2);
	color: var(--inq-ink);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	transition:
		border-color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	appearance: none;
	-webkit-appearance: none;
}

.inq-field textarea {
	min-height: 118px;
	resize: vertical;
	padding-top: 26px;
}

/* Keep long option labels clear of the chevron. */
.inq-field select {
	padding-right: 42px;
}

.inq-field label {
	position: absolute;
	top: 15px;
	left: 16px;
	z-index: 1;
	color: var(--inq-muted-2);
	font-size: 0.92rem;
	pointer-events: none;
	transform-origin: left top;
	transition:
		transform 0.28s var(--inq-ease),
		color 0.28s ease,
		font-size 0.28s ease;
}

/* Floated label states */
.inq-field input:focus,
.inq-field input:not(:placeholder-shown),
.inq-field select:focus,
.inq-field select:valid,
.inq-field textarea:focus,
.inq-field textarea:not(:placeholder-shown) {
	border-color: var(--inq-gold-deep);
	background: var(--inq-card);
	box-shadow: 0 10px 26px rgba(170, 130, 80, 0.12);
}

/* A select floats its label on :valid only. Floating on :focus would lift the
   label away and leave an empty box whenever the field is focused but unset. */
.inq-field select:valid + label {
	transform: translateY(-9px) scale(0.76);
	color: var(--inq-gold-deep);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.inq-field input:focus + label,
.inq-field input:not(:placeholder-shown) + label,
.inq-field textarea:focus + label,
.inq-field textarea:not(:placeholder-shown) + label {
	transform: translateY(-9px) scale(0.76);
	color: var(--inq-gold-deep);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.inq-field input:focus,
.inq-field select:focus,
.inq-field textarea:focus {
	outline: none;
}

/* Native select chevron. It tracks the select's own value text, which never
   moves, so it is pinned — it does not jump when focus or the label changes. */
.inq-field--select::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 17px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--inq-gold-deep);
	border-bottom: 2px solid var(--inq-gold-deep);
	transform: rotate(45deg);
	pointer-events: none;
}

.inq-field select option {
	color: var(--inq-ink);
	background: #fff;
}

/* Validation */
.inq-field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	max-height: 0;
	overflow: hidden;
	color: #b4453a;
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	opacity: 0;
	transition:
		max-height 0.3s var(--inq-ease),
		opacity 0.3s ease,
		margin 0.3s var(--inq-ease);
}

.inq-field.is-invalid input,
.inq-field.is-invalid select,
.inq-field.is-invalid textarea {
	border-color: #d9776c;
	background: #fdf6f5;
}

.inq-field.is-invalid .inq-field__error {
	max-height: 40px;
	margin: 6px 2px 0;
	opacity: 1;
}

@keyframes inq-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-5px);
	}
	40% {
		transform: translateX(5px);
	}
	60% {
		transform: translateX(-3px);
	}
	80% {
		transform: translateX(3px);
	}
}

/* Shake is driven by an explicit class so it fires on submit/blur only,
   never on every keystroke while a field stays invalid. */
.inq-field.is-shake {
	animation: inq-shake 0.45s ease;
}

/* Form footer row */
.inq-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 3vw, 16px);
	margin-top: 4px;
}

.inq-counter {
	color: var(--inq-muted-2);
	font-size: clamp(0.7rem, 2.2vw, 0.76rem);
	font-variant-numeric: tabular-nums;
}

.inq-counter.is-near {
	color: #b4453a;
}

.inq-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(9px, 2.2vw, 12px);
	min-width: min(210px, 100%);
	padding: clamp(14px, 3vw, 16px) clamp(18px, 4.5vw, 28px);
	overflow: hidden;
	border: 1px solid var(--inq-ink);
	border-radius: 999px;
	background: var(--inq-ink);
	color: #fff;
	font-family: inherit;
	font-size: clamp(9.5px, 2.4vw, 11px);
	font-weight: 700;
	letter-spacing: clamp(0.1em, 0.26vw, 0.14em);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		transform 0.3s var(--inq-ease),
		box-shadow 0.3s ease,
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.inq-submit__label {
	white-space: nowrap;
}

.inq-submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(216, 173, 109, 0.55), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s var(--inq-ease);
}

.inq-submit:hover:not(:disabled),
.inq-submit:focus-visible:not(:disabled) {
	transform: translateY(-3px);
	border-color: var(--inq-gold-deep);
	background: var(--inq-ink-soft);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
	outline: none;
}

.inq-submit:hover::after,
.inq-submit:focus-visible::after {
	left: 160%;
}

.inq-submit:disabled {
	cursor: progress;
	opacity: 0.8;
}

.inq-submit__spinner {
	flex: 0 0 auto;
	width: clamp(13px, 3vw, 15px);
	height: clamp(13px, 3vw, 15px);
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--inq-gold);
	border-radius: 50%;
	animation: inq-spin 0.7s linear infinite;
}

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

/* Success panel */
.inq-success {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 26px 34px;
	text-align: center;
	animation: inq-rise 0.7s var(--inq-ease) both;
}

.inq-form-wrap.is-sent .inq-form,
.inq-form-wrap.is-sent .inq-form__foot {
	display: none;
}

.inq-form-wrap.is-sent .inq-success {
	display: flex;
}

.inq-success__mark {
	display: grid;
	width: 74px;
	height: 74px;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--inq-green-bright), var(--inq-green));
	color: #fff;
	font-size: 28px;
	box-shadow:
		0 0 0 8px rgba(48, 184, 106, 0.14),
		0 14px 30px rgba(29, 93, 73, 0.28);
	animation: inq-mark-in 0.65s var(--inq-ease) both;
}

@keyframes inq-mark-in {
	0% {
		transform: scale(0.3);
		opacity: 0;
	}
	60% {
		transform: scale(1.15);
		opacity: 1;
	}
	100% {
		transform: scale(1);
	}
}

.inq-success h3 {
	color: var(--inq-ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.6rem;
	font-weight: 600;
}

.inq-success p {
	max-width: 42ch;
	color: var(--inq-muted);
	font-size: 0.92rem;
}

.inq-success__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 6px;
}

/* Base button. Previously only the --solid / --line modifiers existed, so
   every .inq-btn rendered unstyled. */
.inq-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	padding: clamp(11px, 2.6vw, 13px) clamp(16px, 4vw, 24px);
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: clamp(9.5px, 2.2vw, 11px);
	font-weight: 700;
	letter-spacing: clamp(0.1em, 0.24vw, 0.12em);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 0.3s var(--inq-ease),
		border-color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}

.inq-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(216, 173, 109, 0.5), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s var(--inq-ease);
}

.inq-btn:hover:not(:disabled),
.inq-btn:focus-visible:not(:disabled) {
	transform: translateY(-3px);
}

.inq-btn:hover::after,
.inq-btn:focus-visible::after {
	left: 160%;
}

.inq-btn--solid {
	border-color: var(--inq-ink);
	background: var(--inq-ink);
	color: #fff;
}

.inq-btn--solid:hover,
.inq-btn--solid:focus-visible {
	background: var(--inq-ink-soft);
}

.inq-btn--line {
	border-color: var(--inq-line);
	background: transparent;
	color: var(--inq-ink);
}

.inq-btn--line:hover,
.inq-btn--line:focus-visible {
	border-color: var(--inq-gold-deep);
	background: rgba(216, 173, 109, 0.12);
}

/* ---- Info column ---- */

.inq-info {
	display: grid;
	gap: 20px;
}

.inq-contact-list {
	display: grid;
	gap: 14px;
}

.inq-contact {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--inq-line);
	border-radius: 14px;
	background: var(--inq-card);
	text-decoration: none;
	transition:
		transform 0.35s var(--inq-ease),
		border-color 0.3s ease,
		box-shadow 0.35s ease;
}

.inq-contact:hover,
.inq-contact:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(170, 130, 80, 0.5);
	box-shadow: var(--inq-shadow-sm);
	outline: none;
}

.inq-contact__icon {
	display: grid;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 13px;
	background: rgba(216, 173, 109, 0.16);
	color: var(--inq-gold-deep);
	font-size: 17px;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		transform 0.35s var(--inq-ease);
}

.inq-contact:hover .inq-contact__icon {
	background: var(--inq-gold);
	color: var(--inq-ink);
	transform: rotate(-8deg) scale(1.06);
}

.inq-contact__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.inq-contact__text small {
	color: var(--inq-muted-2);
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.inq-contact__text strong,
.inq-contact__text span {
	color: var(--inq-ink);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

.inq-contact__text span {
	font-weight: 400;
}

.inq-map {
	padding: 20px;
	border: 1px solid var(--inq-line);
	border-radius: 18px;
	background: var(--inq-card);
	box-shadow: var(--inq-shadow-sm);
}

.inq-map__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.inq-map__head h3 {
	color: var(--inq-ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
}

.inq-map__head a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--inq-gold-deep);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: gap 0.3s var(--inq-ease);
}

.inq-map__head a:hover {
	gap: 13px;
}

.inq-map iframe {
	width: 100%;
	height: 268px;
	border: 1px solid var(--inq-line);
	border-radius: 14px;
	filter: saturate(0.8);
	transition:
		filter 0.3s ease,
		transform 0.4s var(--inq-ease);
}

.inq-map iframe:hover {
	filter: saturate(1);
	transform: translateY(-3px);
}

/* ---------------------------------------------------- */
/* PROCESS STEPS                                         */
/* ---------------------------------------------------- */

.inq-process {
	background: var(--inq-cream-2);
	border-top: 1px solid var(--inq-line);
}

.inq-process__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 52px;
	counter-reset: inq-step;
}

.inq-step {
	position: relative;
	padding: 32px 26px 30px;
	border: 1px solid var(--inq-line);
	border-radius: var(--inq-radius);
	background: var(--inq-card);
	box-shadow: var(--inq-shadow-sm);
	overflow: hidden;
	transition:
		transform 0.4s var(--inq-ease),
		box-shadow 0.4s var(--inq-ease);
}

.inq-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--inq-gold-deep), var(--inq-gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--inq-ease);
}

.inq-step:hover {
	transform: translateY(-6px);
	box-shadow: var(--inq-shadow);
}

.inq-step:hover::before,
.inq-step.is-visible::before {
	transform: scaleX(1);
}

.inq-step__num {
	display: inline-grid;
	width: 42px;
	height: 42px;
	place-items: center;
	margin-bottom: 18px;
	border: 1px solid rgba(170, 130, 80, 0.4);
	border-radius: 50%;
	background: rgba(216, 173, 109, 0.14);
	color: var(--inq-gold-deep);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
}

.inq-step h3 {
	margin-bottom: 9px;
	color: var(--inq-ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.32rem;
	font-weight: 600;
}

.inq-step p {
	color: var(--inq-muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

/* ---------------------------------------------------- */
/* RESPONSIVE                                            */
/* ---------------------------------------------------- */

/* Nav collapses to the hamburger below 1024px, so it is shorter. */
@media (max-width: 1023px) {
	html {
		scroll-padding-top: 76px;
	}
}

@media (max-width: 1080px) {
	.inq-main__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.inq-hero {
		min-height: 220px;
		padding: 112px 22px 30px;
	}

	.inq-row {
		grid-template-columns: 1fr;
	}

	.inq-process__grid {
		grid-template-columns: 1fr;
	}

	.inq-panel__head,
	.inq-panel__body {
		padding-inline: 22px;
	}

	/* Compact, content-sized pill centred under the counter. A full-width
	   button at this size reads as a slab, not a call to action. */
	.inq-form__foot {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		text-align: center;
	}

	.inq-submit {
		flex: 0 1 auto;
		width: auto;
		max-width: 100%;
		min-width: 0;
		padding: 14px 22px;
		font-size: 10px;
		letter-spacing: 0.11em;
	}
}

@media (max-width: 520px) {
	.inq-hero {
		min-height: 196px;
		padding: 104px 22px 26px;
	}

	.inq-hero__title {
		font-size: clamp(1.7rem, 8.5vw, 2.3rem);
	}

	.inq-btn {
		width: min(100%, 250px);
	}

	.inq-map iframe {
		height: 220px;
	}

	/* Keep the floating contact bar clear */
	.inq-main {
		padding-bottom: clamp(78px, 13vw, 96px);
	}

	.inq-section {
		padding-bottom: clamp(96px, 18vw, 140px);
	}
}

/* Narrow phones: trim the pill further so the label keeps its tracking. */
@media (max-width: 400px) {
	.inq-submit {
		padding: 13px 16px;
		font-size: 9.5px;
		letter-spacing: 0.08em;
	}
}

/* ---------------------------------------------------- */
/* REDUCED MOTION                                        */
/* ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.inq-hero__inner,
	.preloader-logo,
	.inq-success,
	.inq-success__mark,
	.inq-ready #main-content {
		animation: none;
		transition-duration: 0.01ms;
	}

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.inq-btn::after,
	.inq-submit::after {
		display: none;
	}

	.inq-field.is-shake {
		animation: none;
	}
}