/* ==========================================================================
   Apex — standalone page templates (404, legal/prose pages).
   ========================================================================== */

/* --------------------------------------------------------------------------
   404 — page not found
   -------------------------------------------------------------------------- */

.apex-404 { padding-bottom: var(--space-16); }

.apex-404__hero {
	background: var(--color-navy);
	background-image:
		radial-gradient(circle at 15% 0%, var(--color-navy-light), transparent 55%),
		radial-gradient(circle at 85% 100%, rgba(210, 49, 32, .28), transparent 50%);
	color: var(--color-white);
	text-align: center;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
	margin-bottom: var(--space-12);
	/* Break out of Storefront's .col-full so the navy reaches the true
	   viewport edge (same technique as .apex-full-bleed). */
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.apex-404__hero-inner { max-width: 720px; }

/* Oversized watermark numeral. It is decorative (aria-hidden in the
   template) — the real message is the <h1> beneath it. */
.apex-404__code {
	font-size: clamp(5rem, 3rem + 14vw, 11rem);
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.04em;
	margin: 0 0 var(--space-4);
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .28);
	/* Fallback for engines without -webkit-text-stroke: a faint solid fill
	   still reads as a watermark rather than disappearing entirely. */
	background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
	-webkit-background-clip: text;
	background-clip: text;
}

.apex-404__title { color: var(--color-white); margin-bottom: var(--space-3); }

.apex-404__lead {
	color: rgba(255, 255, 255, .78);
	font-size: 1.05rem;
	max-width: 52ch;
	margin: 0 auto var(--space-8);
}

.apex-404__search {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-white);
	border-radius: var(--radius-pill);
	padding: 6px 6px 6px var(--space-5);
	max-width: 560px;
	margin: 0 auto var(--space-6);
	box-shadow: 0 10px 30px rgba(1, 21, 54, .35);
}
.apex-404__search .apex-icon { color: var(--color-text-muted); flex-shrink: 0; }
.apex-404__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.7em 0;
	color: var(--color-text);
	font-size: 0.95rem;
}
.apex-404__search input[type="search"]:focus { outline: none; }
.apex-404__search button {
	border: 0;
	background: var(--color-red);
	color: var(--color-white);
	font-weight: 600;
	padding: 0.7em 1.5em;
	border-radius: var(--radius-pill);
	min-height: 42px;
}
.apex-404__search button:hover { background: var(--color-red-dark); }

.apex-404__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.apex-404__section { margin-bottom: var(--space-12); }

.apex-404__section-title {
	font-size: 1.25rem;
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-border);
}

/* Category routes ---------------------------------------------------------- */

.apex-404__cats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
}

.apex-404__cat {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.apex-404__cat:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-navy-light);
	color: inherit;
}

.apex-404__cat-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--radius-md);
	background: rgba(1, 32, 79, .07);
	color: var(--color-navy);
}
.apex-404__cat-icon .apex-icon svg { width: 24px; height: 24px; }

.apex-404__cat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apex-404__cat-body strong { color: var(--color-navy); font-size: 0.98rem; }
.apex-404__cat-body small { color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.45; }
.apex-404__cat-body em {
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-red);
	margin-top: 2px;
}

.apex-404__cat-go { margin-left: auto; color: var(--color-text-muted); flex-shrink: 0; }
.apex-404__cat:hover .apex-404__cat-go { color: var(--color-red); }

/* Support panel ------------------------------------------------------------ */

.apex-404__help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-6);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-red);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.apex-404__help-text { flex: 1 1 340px; }
.apex-404__help-text h2 { font-size: 1.2rem; margin-bottom: var(--space-2); }
.apex-404__help-text p { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; max-width: 58ch; }
.apex-404__help-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 600px) {
	.apex-404__search { flex-wrap: wrap; border-radius: var(--radius-lg); padding: var(--space-3); }
	.apex-404__search input[type="search"] { flex: 1 1 100%; padding-inline: var(--space-2); }
	.apex-404__search button { flex: 1 1 100%; border-radius: var(--radius-sm); }
	.apex-404__actions .apex-btn { flex: 1 1 100%; }
	.apex-404__help-actions { width: 100%; }
	.apex-404__help-actions .apex-btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   Legal / policy pages (Terms, Privacy, Shipping, Returns)
   -------------------------------------------------------------------------- */

.apex-legal { padding-bottom: var(--space-16); }

.apex-legal__hero {
	background: var(--color-navy);
	background-image: radial-gradient(circle at 12% 0%, var(--color-navy-light), transparent 60%);
	color: var(--color-white);
	padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.apex-legal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-white);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.9em;
	margin-bottom: var(--space-4);
}
.apex-legal__hero h1 { color: var(--color-white); margin-bottom: var(--space-3); max-width: 20ch; }
.apex-legal__intro { color: rgba(255, 255, 255, .78); max-width: 62ch; margin: 0 0 var(--space-5); }
.apex-legal__updated {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, .6);
	margin: 0;
}

/* Two-column shell: sticky contents rail + prose. Collapses to one column
   on tablet and below, where a sticky rail would eat most of the screen. */
.apex-legal__shell {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	padding-top: var(--space-12);
	align-items: start;
}

.apex-legal__toc {
	position: sticky;
	/* Clears the sticky site header, which sets --header-height from JS. */
	top: calc(var(--header-height, 0px) + var(--space-6));
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
}
.apex-legal__toc-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}
.apex-legal__toc ol { counter-reset: apex-toc; display: flex; flex-direction: column; gap: 2px; }
.apex-legal__toc a {
	counter-increment: apex-toc;
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--color-text-muted);
	padding: 0.5em 0.6em;
	border-radius: var(--radius-sm);
	border-left: 2px solid transparent;
}
.apex-legal__toc a::before {
	content: counter(apex-toc);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--color-red);
	min-width: 1.2em;
}
.apex-legal__toc a:hover {
	background: rgba(1, 32, 79, .05);
	color: var(--color-navy);
	border-left-color: var(--color-red);
}

/* Prose ------------------------------------------------------------------- */

.apex-legal__body { min-width: 0; }

.apex-legal__section {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	margin-bottom: var(--space-6);
	/* Anchor links land below the sticky header rather than under it. */
	scroll-margin-top: calc(var(--header-height, 0px) + var(--space-6));
}

.apex-legal__section > h2 {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: 1.15rem;
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}
.apex-legal__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: var(--color-navy);
	color: var(--color-white);
	font-size: 0.82rem;
	font-weight: 700;
}

.apex-legal__section h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: var(--space-6) 0 var(--space-3);
}
.apex-legal__section h3:first-of-type { margin-top: 0; }

.apex-legal__section p,
.apex-legal__section li {
	color: var(--color-text-muted);
	font-size: 0.94rem;
	line-height: 1.7;
}
.apex-legal__section p:last-child { margin-bottom: 0; }
.apex-legal__section strong { color: var(--color-text); font-weight: 600; }
.apex-legal__section a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }
.apex-legal__section a:hover { color: var(--color-red-dark); }

/* Checklist / bullet list with a drawn marker, so lists read as scannable
   rules rather than a wall of text. */
.apex-legal__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); }
.apex-legal__list li { position: relative; padding-left: 1.7em; }
.apex-legal__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--color-red);
}
.apex-legal__list--tick li::before {
	content: "";
	top: 0.42em;
	left: 1px;
	width: 6px;
	height: 11px;
	border-radius: 0;
	background: none;
	border: solid var(--color-success);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.apex-legal__list--cross li::before {
	content: "×";
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--color-red);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.5;
}

/* Callout — for the one or two things a reader must not miss. */
.apex-legal__note {
	display: flex;
	gap: var(--space-4);
	background: rgba(1, 32, 79, .04);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-navy);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin: var(--space-5) 0 0;
}
.apex-legal__note--warn { background: rgba(199, 119, 0, .07); border-left-color: var(--color-warning); }
.apex-legal__note p { margin: 0; font-size: 0.88rem; }
.apex-legal__note strong { display: block; color: var(--color-navy); margin-bottom: 2px; }

/* Key/value facts grid (data controller, retention periods, etc.) */
.apex-legal__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
}
.apex-legal__fact {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}
.apex-legal__fact dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}
.apex-legal__fact dd { margin: 0; font-size: 0.9rem; color: var(--color-text); line-height: 1.5; }

/* Data table (what we collect / why / how long) */
.apex-legal__table-wrap { overflow-x: auto; margin: var(--space-4) 0 0; }
.apex-legal__table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 520px; }
.apex-legal__table th,
.apex-legal__table td {
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border);
	vertical-align: top;
}
.apex-legal__table th {
	background: var(--color-bg);
	color: var(--color-navy);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.apex-legal__table td { color: var(--color-text-muted); line-height: 1.6; }
.apex-legal__table tr:last-child td { border-bottom: 0; }

/* Closing contact panel */
.apex-legal__cta {
	background: var(--color-navy);
	background-image: radial-gradient(circle at 50% -40%, var(--color-navy-light), transparent 70%);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	color: rgba(255, 255, 255, .8);
	margin-top: var(--space-8);
}
.apex-legal__cta h2 { color: var(--color-white); font-size: 1.15rem; margin-bottom: var(--space-2); }
.apex-legal__cta p { color: rgba(255, 255, 255, .78); font-size: 0.92rem; max-width: 56ch; }
.apex-legal__cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

@media (max-width: 1024px) {
	.apex-legal__shell { grid-template-columns: 1fr; }
	.apex-legal__toc { position: static; }
	.apex-legal__toc ol {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-1);
	}
}

@media (max-width: 600px) {
	.apex-legal__cta-actions .apex-btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Offers
   -------------------------------------------------------------------------- */

.apex-offers-page { padding-bottom: var(--space-16); }

.apex-offers-hero {
	background: var(--color-navy);
	background-image:
		radial-gradient(circle at 88% 10%, rgba(210, 49, 32, .35), transparent 55%),
		radial-gradient(circle at 10% 90%, var(--color-navy-light), transparent 55%);
	color: var(--color-white);
	padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
	margin-bottom: var(--space-12);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.apex-offers-hero__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--color-red);
	color: var(--color-white);
	border-radius: var(--radius-pill);
	padding: 0.4em 1em;
	margin-bottom: var(--space-4);
}
.apex-offers-hero h1 { color: var(--color-white); max-width: 20ch; margin-bottom: var(--space-3); }
.apex-offers-hero__lead { color: rgba(255,255,255,.8); max-width: 62ch; margin-bottom: var(--space-4); }
.apex-offers-hero__count {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-white);
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.9em;
	margin: 0;
}

.apex-offers-empty {
	text-align: center;
	background: var(--color-bg-alt);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(2.5rem, 1.8rem + 3vw, 4rem) var(--space-6);
}
.apex-offers-empty h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.apex-offers-empty p { color: var(--color-text-muted); max-width: 46ch; margin: 0 auto var(--space-6); }

.apex-offers-terms {
	margin-top: var(--space-12);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.apex-offers-terms h2 {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-text-muted);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}
.apex-offers-terms li { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.65; }
.apex-offers-terms a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   About Us
   -------------------------------------------------------------------------- */

.apex-about { padding-bottom: var(--space-16); }

.apex-about__hero {
	background: var(--color-navy);
	background-image: radial-gradient(circle at 80% 0%, var(--color-navy-light), transparent 60%);
	color: var(--color-white);
	padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
	margin-bottom: var(--space-12);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.apex-about__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-white);
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.9em;
	margin-bottom: var(--space-4);
}
.apex-about__hero h1 { color: var(--color-white); max-width: 22ch; margin-bottom: var(--space-3); }
.apex-about__lead { color: rgba(255,255,255,.8); max-width: 64ch; margin: 0; font-size: 1.05rem; }

.apex-about__section { margin-bottom: var(--space-12); }

.apex-about__section-title {
	font-size: 1.25rem;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-6);
	border-bottom: 2px solid var(--color-border);
}

.apex-about__intro { max-width: 68ch; }
.apex-about__intro h2 { font-size: 1.4rem; margin-bottom: var(--space-4); }
.apex-about__intro p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.75; }

.apex-about__pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-5);
}
.apex-about__pillar {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-card);
}
.apex-about__pillar-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--color-navy);
	color: var(--color-white);
	margin-bottom: var(--space-4);
}
.apex-about__pillar-icon .apex-icon svg { width: 22px; height: 22px; }
.apex-about__pillar h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.apex-about__pillar p { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.65; margin: 0; }

.apex-about__ranges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-4);
}
.apex-about__range {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.apex-about__range:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-navy-light);
	color: inherit;
}
.apex-about__range-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-md);
	background: rgba(1,32,79,.07);
	color: var(--color-navy);
	margin-bottom: var(--space-4);
}
.apex-about__range h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.apex-about__range p { color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.6; margin-bottom: var(--space-4); }
.apex-about__range-go {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--color-red);
}
.apex-about__range-go .apex-icon svg { width: 16px; height: 16px; }

.apex-about__visit {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-8);
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-red);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.apex-about__visit-text { flex: 1 1 380px; }
.apex-about__visit-text h2 { font-size: 1.25rem; margin-bottom: var(--space-3); }
.apex-about__visit-text > p { color: var(--color-text-muted); font-size: 0.94rem; max-width: 58ch; }
.apex-about__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--space-4);
	margin: var(--space-5) 0 0;
}
.apex-about__facts dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}
.apex-about__facts dd { margin: 0; font-size: 0.9rem; color: var(--color-text); line-height: 1.5; }
.apex-about__visit-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 600px) {
	.apex-about__visit-actions { width: 100%; }
	.apex-about__visit-actions .apex-btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   Contact Us
   -------------------------------------------------------------------------- */

.apex-contact { padding-bottom: var(--space-16); }

.apex-contact__hero {
	background: var(--color-navy);
	background-image:
		radial-gradient(circle at 88% 0%, var(--color-navy-light), transparent 58%),
		radial-gradient(circle at 5% 100%, rgba(210, 49, 32, .22), transparent 50%);
	color: var(--color-white);
	padding-block: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
	margin-bottom: var(--space-12);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.apex-contact__eyebrow {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-white);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius-pill);
	padding: 0.4em 0.9em;
	margin-bottom: var(--space-4);
}
.apex-contact__hero h1 { color: var(--color-white); max-width: 20ch; margin-bottom: var(--space-3); }
.apex-contact__lead { color: rgba(255, 255, 255, .8); max-width: 64ch; margin: 0; font-size: 1.02rem; }

/* ---- Contact routes ---- */

.apex-contact__routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-12);
}
.apex-contact__route {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.apex-contact__route:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-navy-light);
	color: inherit;
}
.apex-contact__route--static { background: var(--color-bg); box-shadow: none; }

.apex-contact__route-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	background: rgba(1, 32, 79, .07);
	color: var(--color-navy);
	font-size: 1.1rem;
	margin-bottom: var(--space-3);
}
.apex-contact__route-icon .apex-icon svg { width: 20px; height: 20px; }
.apex-contact__route-icon--whatsapp { background: rgba(37, 211, 102, .12); color: #128C4A; }
.apex-contact__route-icon--whatsapp svg { width: 22px; height: 22px; }

.apex-contact__route strong {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.apex-contact__route-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.4;
	word-break: break-word;
}
.apex-contact__route small {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	line-height: 1.5;
	margin-top: var(--space-2);
}

/* ---- Form + aside ---- */

.apex-contact__main {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
	gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	align-items: start;
	scroll-margin-top: calc(var(--header-height, 0px) + var(--space-6));
}

.apex-contact__form-wrap {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	box-shadow: var(--shadow-card);
}
.apex-contact__form-wrap h2 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.apex-contact__form-intro {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	max-width: 60ch;
	margin-bottom: var(--space-6);
}

.apex-contact__notice {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
	font-size: 0.9rem;
	line-height: 1.6;
}
.apex-contact__notice strong { font-weight: 700; }
.apex-contact__notice--ok { background: rgba(27, 138, 74, .08); border-left: 3px solid var(--color-success); }
.apex-contact__notice--ok strong { color: var(--color-success); }
.apex-contact__notice--warn { background: rgba(210, 49, 32, .07); border-left: 3px solid var(--color-red); }
.apex-contact__notice--warn strong { color: var(--color-red); }

.apex-contact__form { display: flex; flex-direction: column; gap: var(--space-5); }
.apex-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.apex-contact__field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.apex-contact__field label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--color-navy);
}
.apex-contact__field label span { color: var(--color-red); }
.apex-contact__field label small {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-text-muted);
}
.apex-contact__field input,
.apex-contact__field select,
.apex-contact__field textarea {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	padding: 0.8em 1em;
	font-size: 0.95rem;
	color: var(--color-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.apex-contact__field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.apex-contact__field input:focus,
.apex-contact__field select:focus,
.apex-contact__field textarea:focus {
	outline: none;
	border-color: var(--color-navy);
	box-shadow: 0 0 0 3px rgba(1, 32, 79, .1);
}

/* Honeypot: moved off-screen rather than display:none — some bots skip
   fields that are explicitly hidden but fill anything present in the DOM. */
.apex-contact__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.apex-contact__submit-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	padding-top: var(--space-2);
}
.apex-contact__submit-row small {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	max-width: 42ch;
	line-height: 1.5;
}
.apex-contact__submit-row a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Aside ---- */

.apex-contact__aside { display: flex; flex-direction: column; gap: var(--space-4); }
.apex-contact__card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-card);
}
.apex-contact__card h3 { font-size: 1rem; margin-bottom: var(--space-4); }
.apex-contact__card p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; }

.apex-contact__hours { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.apex-contact__hours > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: 0.88rem;
	padding-bottom: var(--space-3);
	border-bottom: 1px dashed var(--color-border);
}
.apex-contact__hours > div:last-child { border-bottom: 0; padding-bottom: 0; }
.apex-contact__hours dt { color: var(--color-text-muted); }
.apex-contact__hours dd { margin: 0; font-weight: 700; color: var(--color-navy); white-space: nowrap; }

.apex-contact__links { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.apex-contact__links a {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-navy);
	padding: 0.5em 0.6em;
	border-radius: var(--radius-sm);
	border-left: 2px solid transparent;
}
.apex-contact__links a:hover { background: var(--color-bg); border-left-color: var(--color-red); color: var(--color-red); }

.apex-contact__card--dark {
	background: var(--color-navy);
	background-image: radial-gradient(circle at 100% 0%, var(--color-navy-light), transparent 65%);
	border-color: transparent;
}
.apex-contact__card--dark h3 { color: var(--color-white); }
.apex-contact__card--dark p { color: rgba(255, 255, 255, .78); margin-bottom: var(--space-4); }

@media (max-width: 900px) {
	.apex-contact__main { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.apex-contact__row { grid-template-columns: 1fr; }
	.apex-contact__submit-row .apex-btn { width: 100%; }
}