/* ==========================================================================
   HQDM — Miami SEO pages (HQDM standard suburb component): left-aligned hero,
   content + sticky glass offer card, about + map, FAQ, closing band, other areas grid
   ========================================================================== */
.hq-hero--area { padding-bottom: var(--section-tight); isolation: isolate; overflow: clip; }
.hq-hero--area::before { content: ""; position: absolute; inset: 0 0 auto; height: 80%; background: radial-gradient(42% 60% at 25% 0%, rgba(113, 61, 223, .26), transparent 72%); z-index: -1; pointer-events: none; }
.hq-hero--area::after { content: ""; position: absolute; right: -8%; top: 20%; width: 560px; aspect-ratio: 1; background: url("../../img/dots.webp") center / contain no-repeat; opacity: .14; z-index: -1; pointer-events: none; }
.hq-hero--area .hq-hero__content { max-width: var(--wide); }
.hq-hero--area .hq-title { max-width: 18ch; }
.hq-hero--area .hq-lede { color: var(--c-text); margin-top: var(--sp-5); max-width: 58ch; }
.hq-hero__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hq-hero__links a {
	/* look: base.css (first = primary pill, the rest = outlined pill); size = every primary CTA */
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 1rem 2rem;
	font-size: 1.125rem;
	line-height: 1.3;                          /* = the primary's rolling label, so both links are the same height */
	text-decoration: none;
}
.hq-hero__links a:active { transform: scale(.98); }
@media (max-width: 781px) { .hq-hero__links a { font-size: 1rem; padding: .875rem 1.625rem; } }

.hq-area-body { display: grid; grid-template-columns: minmax(0, var(--read)) minmax(260px, 320px); justify-content: space-between; gap: clamp(32px, 6vw, 96px); align-items: start; }
.hq-area-body > * { max-width: none; margin: 0 !important; }
.hq-area-offer {
	position: sticky;
	top: 104px;
	font-size: 1rem;
	padding: var(--sp-6) var(--sp-5);
	border-radius: var(--r-2);
	overflow: hidden;
	background:
		radial-gradient(80% 55% at 50% -12%, rgba(151, 71, 255, .2), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01) 45%),
		rgba(13, 7, 28, .62);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	border: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 40px 80px -40px rgba(0, 0, 0, .85);
}
.hq-area-offer::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .03) 70%, rgba(151, 71, 255, .22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.hq-area-offer h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.hq-area-offer p:not(.hq-label) { color: var(--c-text-muted); font-size: .9375rem; }
@media (max-width: 1023px) { .hq-area-body { grid-template-columns: minmax(0, 1fr); } .hq-area-offer { position: static; } }

.hq-area-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: stretch; }
.hq-area-about > * { max-width: none; margin: 0 !important; }
.hq-area-about__text { position: relative; font-size: 1rem; padding: var(--sp-7) var(--sp-6); border-radius: var(--r-2); border: 0; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.hq-area-about__text p { color: var(--c-text-muted); }
.hq-area-about__text h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); }
.hq-area-about .hq-map { min-height: 420px; }
@media (max-width: 900px) { .hq-area-about { grid-template-columns: 1fr; } }

.hq-areas > .hq-section-title { text-align: center; margin-inline: auto; }
.hq-areas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 260px)); justify-content: center; gap: var(--sp-3); width: 100%; max-width: var(--wide); margin-inline: auto; padding: 0; list-style: none; }   /* margin-top: section rhythm (layout.css) */
.hq-areas__grid li { margin: 0; }
.hq-area-card { position: relative; display: grid; gap: 2px; min-height: 104px; align-content: end; font-size: 1rem; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-2); border: 0; background: var(--spot), var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); text-decoration: none; transition: border-color var(--d-2) var(--ease), box-shadow var(--d-3) var(--ease), --so var(--d-3) var(--ease); }
.hq-area-card::before { content: "→"; position: absolute; top: var(--sp-4); right: var(--sp-5); color: var(--c-text-faint); transition: transform var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.hq-area-card__name { font-family: var(--ff-heading); color: var(--c-text-strong); font-weight: var(--fw-heading); font-size: var(--fs-h4); letter-spacing: -.008em; }
.hq-area-card__more { color: var(--c-text-faint); font-size: var(--fs-ui); }
.hq-area-card[aria-current="page"] { --rim: var(--glass-rim-hover); box-shadow: var(--glass-shadow), 0 0 0 1px rgba(151, 71, 255, .35), 0 0 30px -10px rgba(151, 71, 255, .8); }
@media (hover: hover) {
	.hq-area-card:hover { --so: 1; box-shadow: var(--glass-shadow-hover); }
	.hq-area-card:hover::before { transform: translateX(2px); color: var(--c-text-strong); }
}
.hq-area-card:active { transform: scale(.99); }

/* Standard suburb templates (posts in the Suburb category) reuse the same look */
.hq-suburb-hero, .hq-suburb__body, .hq-suburb-related, .hq-suburb-list { padding: var(--section) var(--gutter); max-width: var(--wide); margin-inline: auto; }