/* ===========================================================================
 * UTILITY BAR (row 0)
 * Mirrors production: phones, secondary links, social row, BBB seal, search.
 * Fixed height at every breakpoint so it can never shift the hero.
 * ======================================================================== */
.asm-topbar {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	background: #071214;
	font-family: var(--font-body, inherit);
}

.asm-topbar__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.9vw, 34px);
	min-height: 44px;
}

/* ---- phones ---- */
.asm-topbar__phones {
	display: flex;
	align-items: center;
	gap: 18px;
	flex: none;
}

.asm-topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .78rem;
	line-height: 1;
	color: #C9DAD8;
	text-decoration: none;
	white-space: nowrap;
}

.asm-topbar__phone b {
	font-weight: 600;
	color: #fff;
}

.asm-topbar__phone svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--accent-2);
}

.asm-topbar__phone:hover,
.asm-topbar__phone:hover b {
	color: var(--accent-2);
}

/* ---- secondary links ---- */
.asm-topbar__links {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-inline: auto;
	flex: none;
}

.asm-topbar__links a {
	font-size: .8rem;
	font-weight: 500;
	line-height: 1;
	color: #A9BDBB;
	text-decoration: none;
	white-space: nowrap;
}

.asm-topbar__links a:hover {
	color: var(--accent-2);
}

.asm-topbar__sep {
	font-size: .8rem;
	color: rgba(255, 255, 255, .22);
}

/* ---- right cluster ---- */
.asm-topbar__right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	margin-left: auto;
}

.asm-topbar__social {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asm-topbar__social a {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	color: #9CB2B0;
	transition: color .16s ease, background-color .16s ease;
}

.asm-topbar__social svg {
	width: 13px;
	height: 13px;
}

.asm-topbar__social a:hover {
	color: var(--accent-2);
	background: rgba(255, 255, 255, .07);
}

/* ---- BBB seal ---- */
.asm-topbar__bbb {
	display: block;
	flex: none;
	line-height: 0;
	opacity: .95;
	transition: opacity .16s ease;
}

.asm-topbar__bbb:hover {
	opacity: 1;
}

.asm-topbar__bbb img {
	display: block;
	width: 125px;
	height: 26px;
	border-radius: 3px;
}

/* ---- search ---- */
.asm-topbar__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
}

.asm-topbar__srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.asm-topbar__search input {
	width: 150px;
	height: 28px;
	padding: 0 30px 0 11px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 7px;
	background: rgba(255, 255, 255, .05);
	color: #EAF3F2;
	font: inherit;
	font-size: .78rem;
	line-height: 1;
	transition: border-color .16s ease, background-color .16s ease;
	appearance: none;
	-webkit-appearance: none;
}

.asm-topbar__search input::placeholder {
	color: #7E9391;
}

.asm-topbar__search input:focus {
	outline: none;
	border-color: var(--accent-2);
	background: rgba(255, 255, 255, .08);
}

.asm-topbar__search button {
	position: absolute;
	right: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 0 7px 7px 0;
	background: none;
	color: #9CB2B0;
	cursor: pointer;
}

.asm-topbar__search button:hover {
	color: var(--accent-2);
}

.asm-topbar__search button svg {
	width: 14px;
	height: 14px;
}

/* HEADER CLEANUP PASS (2026-07): the topbar used to go transparent-over-cream
   on scroll, which forced a whole second light-ink palette for phones/links/
   social/search/BBB below. The header is now a persistent dark glass panel
   at every scroll position (see "PERSISTENT DARK HEADER" at the bottom of
   this file), so the topbar's own base colors — already dark-bg-friendly —
   apply unconditionally. The BBB chip also stays on permanently instead of
   only appearing once scrolled, since the seal's white baked-in text needs
   a dark card at all times, not just past 30px. */
.asm-topbar__bbb {
	background: #0B2A2B;
	padding: 3px 8px;
	border-radius: 6px;
	opacity: .88;
}

.asm-topbar__bbb:hover {
	opacity: 1;
}

/* ---- narrow desktop: shed the seal, then the secondary links ---- */
@media (max-width: 1500px) {

	.asm-topbar__bbb {
		display: none;
	}
}

@media (max-width: 1240px) {

	.asm-topbar__links {
		display: none;
	}
}

@media (max-width: 1040px) {

	.asm-topbar__social {
		display: none;
	}
}

/* ---- mobile: phones only, centred ---- */
@media (max-width: 900px) {

	.asm-topbar__inner {
		justify-content: center;
		gap: 14px;
		min-height: 38px;
	}

	.asm-topbar__phones {
		gap: 14px;
	}

	.asm-topbar__phone {
		font-size: .72rem;
	}

	.asm-topbar__phone svg {
		width: 13px;
		height: 13px;
	}

	.asm-topbar__right {
		display: none;
	}
}

@media (max-width: 420px) {

	.asm-topbar__phone span {
		display: inline-flex;
		flex-direction: column;
		gap: 1px;
		line-height: 1.15;
	}
}

/*
 * Two-row header (asm-header--split)
 * ---------------------------------------------------------------------------
 * Row 1: logo / company name + Free Consultation CTA.
 * Row 2: the primary menu only, full bleed, so eight dropdowns fit on one line.
 *
 * Kept in its own file so the DESIGN thread keeps sole ownership of main.css.
 * Only opacity/transform are animated. No layout-shifting transitions.
 */

@media (min-width: 901px) {

	.asm-header--split,
	.asm-header--split.is-scrolled {
		padding: 0;
	}

	/* Keep total header height identical scrolled vs not: no layout jump. */
	.asm-header--split.is-scrolled .asm-header__top {
		padding: 14px 0 12px;
	}

	/* --- row 1 ------------------------------------------------------------ */
	.asm-header--split .asm-header__top {
		padding: 14px 0 12px;
	}

	.asm-header--split .asm-header__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.asm-header--split .asm-header__actions {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.asm-header--split .asm-logo {
		margin-bottom: 0;
	}

	.asm-header--split .asm-logo__img {
		display: block;
		width: auto;
		height: 40px;
	}

	/* --- row 2 ------------------------------------------------------------ */
	.asm-header--split .asm-header__navrow {
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.asm-header--split.is-scrolled .asm-header__navrow {
		border-top-color: var(--line);
	}

	.asm-header--split .asm-header__navrow .asm-nav {
		display: flex;
		align-items: stretch;
		justify-content: center;
		gap: 0;
	}

	.asm-header--split .asm-header__navrow .asm-menu {
		display: flex;
		align-items: stretch;
		justify-content: center;
		flex-wrap: wrap;
		gap: 4px 26px;
		margin: 0;
	}

	/* The single biggest win: stop top-level labels wrapping to two lines. */
	.asm-header--split .asm-header__navrow .asm-menu > li > a {
		display: flex;
		align-items: center;
		gap: 4px;
		white-space: nowrap;
		padding: 12px 0;
		line-height: 1.2;
	}

	/* The CTA lives in row 1 on desktop; this copy is for the mobile drawer. */
	.asm-header--split .asm-header__cta--drawer {
		display: none;
	}

	.asm-header--split .asm-header__actions .asm-header__cta {
		display: inline-block;
	}
}

@media (max-width: 900px) {

	/* Collapse back to a single bar; the nav is a fixed drawer at this width. */
	.asm-header--split .asm-header__navrow {
		border: 0;
		padding: 0;
		margin: 0;
	}

	.asm-header--split .asm-header__navrow > .asm-wrap {
		padding: 0;
	}

	.asm-header--split .asm-header__actions {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.asm-header--split .asm-logo__img {
		display: block;
		width: auto;
		height: 30px;
	}

	.asm-header--split .asm-logo {
		margin-bottom: 0;
	}

	.asm-header--split .asm-header__cta--drawer {
		display: inline-block;
		margin-top: 8px;
	}
}

/* ---------------------------------------------------------------------------
 * Edge clamping. Panels are centre-anchored (left:50% + translateX(-50%)),
 * which pushes the first one off the left edge and the last ones off the
 * right. Anchor the outer items to their own edge instead. Only transform is
 * animated, so the reveal stays CLS-safe.
 * ------------------------------------------------------------------------ */
@media (min-width: 901px) {

	.asm-header--split .asm-menu > li > .sub-menu {
		max-width: calc(100vw - 40px);
	}

	.asm-header--split .asm-menu > li:first-child > .sub-menu {
		left: 0;
		transform: translate(0, 8px);
	}

	.asm-header--split .asm-menu > li:first-child:hover > .sub-menu,
	.asm-header--split .asm-menu > li:first-child:focus-within > .sub-menu {
		transform: translate(0, 0);
	}

	.asm-header--split .asm-menu > li:last-child > .sub-menu,
	.asm-header--split .asm-menu > li:nth-last-child(2) > .sub-menu,
	.asm-header--split .asm-menu > li:nth-last-child(3) > .sub-menu {
		left: auto;
		right: 0;
		transform: translate(0, 8px);
	}

	.asm-header--split .asm-menu > li:last-child:hover > .sub-menu,
	.asm-header--split .asm-menu > li:last-child:focus-within > .sub-menu,
	.asm-header--split .asm-menu > li:nth-last-child(2):hover > .sub-menu,
	.asm-header--split .asm-menu > li:nth-last-child(2):focus-within > .sub-menu,
	.asm-header--split .asm-menu > li:nth-last-child(3):hover > .sub-menu,
	.asm-header--split .asm-menu > li:nth-last-child(3):focus-within > .sub-menu {
		transform: translate(0, 0);
	}
}

/* ===========================================================================
 * STACKED FLYOUT PANELS
 * Bordered card, one row per page: icon tile + label + the page's own meta
 * description, closed by a two-cell action strip. Only opacity/transform are
 * animated, so opening a panel costs no layout shift.
 * ======================================================================== */
@media (min-width: 901px) {

	.asm-header--split .asm-menu .sub-menu.asm-fly {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 1px;
		width: max-content;
		min-width: 320px;
		max-width: min(calc(100vw - 40px), 400px);
		max-height: calc(100vh - 150px);
		overflow-y: auto;
		padding: 7px;
		border: 1px solid rgba(255, 255, 255, .09);
		border-radius: 14px;
		background: #0E1A1C;
		box-shadow: 0 28px 60px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .3);
	}

	.asm-header--split .asm-menu .sub-menu.asm-fly--2col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: min(calc(100vw - 40px), 640px);
		column-gap: 2px;
	}

	.asm-header--split .asm-menu .sub-menu.asm-fly--3col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: min(calc(100vw - 40px), 800px);
		column-gap: 2px;
	}

	/* ---- optional hub row above the list ---- */
	.asm-header--split .asm-menu .asm-fly__lead {
		grid-column: 1 / -1;
		margin: 1px 5px 5px;
		padding-bottom: 6px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.asm-header--split .asm-menu .asm-fly__lead a {
		display: block;
		padding: 0;
		font-family: var(--font-display);
		font-size: .66rem;
		font-weight: 700;
		letter-spacing: .085em;
		text-transform: uppercase;
		color: var(--accent-2);
		background: none;
	}

	.asm-header--split .asm-menu .asm-fly__lead a:hover {
		color: #fff;
		background: none;
	}

	/* ---- one page row ---- */
	.asm-header--split .asm-menu .asm-fly__item > a {
		display: grid;
		grid-template-columns: 30px minmax(0, 1fr);
		align-items: start;
		gap: 10px;
		padding: 7px 9px;
		border-radius: 9px;
		white-space: normal;
		background: transparent;
		transition: background-color .16s ease;
	}

	.asm-header--split .asm-menu .asm-fly__item > a:hover,
	.asm-header--split .asm-menu .asm-fly__item > a:focus-visible {
		background: rgba(255, 255, 255, .055);
	}

	.asm-header--split .asm-menu .asm-fly__icon {
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		background: rgba(255, 255, 255, .05);
		color: #8FA6A4;
		transition: color .16s ease, background-color .16s ease;
	}

	.asm-header--split .asm-menu .asm-fly__icon svg {
		width: 16px;
		height: 16px;
	}

	.asm-header--split .asm-menu .asm-fly__item > a:hover .asm-fly__icon {
		color: var(--accent-2);
		background: rgba(0, 224, 198, .12);
	}

	.asm-header--split .asm-menu .asm-fly__txt {
		display: block;
		min-width: 0;
		padding-top: 1px;
	}

	.asm-header--split .asm-menu .asm-fly__label {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: .8rem;
		font-weight: 600;
		line-height: 1.3;
		color: #F2F7F6;
	}

	.asm-header--split .asm-menu .asm-fly__desc {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-top: 1px;
		font-size: .72rem;
		font-weight: 400;
		line-height: 1.38;
		color: #8B9E9C;
	}

	/* Denser multi-column panels drop the description, so tighten the row. */
	.asm-fly--2col .asm-fly__item > a,
	.asm-fly--3col .asm-fly__item > a {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 9px;
		align-items: center;
		padding: 5px 8px;
	}

	.asm-fly--2col .asm-fly__icon,
	.asm-fly--3col .asm-fly__icon {
		width: 24px;
		height: 24px;
		border-radius: 7px;
	}

	.asm-fly--2col .asm-fly__icon svg,
	.asm-fly--3col .asm-fly__icon svg {
		width: 13px;
		height: 13px;
	}

	.asm-fly--2col .asm-fly__label,
	.asm-fly--3col .asm-fly__label {
		font-size: .765rem;
		font-weight: 500;
		line-height: 1.28;
	}

	/* ---- action strip ---- */
	.asm-header--split .asm-menu .asm-fly__foot {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		position: sticky;
		bottom: -7px;
		margin: 6px -7px -7px;
		border-top: 1px solid rgba(255, 255, 255, .09);
		border-radius: 0 0 13px 13px;
		backdrop-filter: blur(6px);
		background: rgba(14, 26, 28, .96);
		overflow: hidden;
	}

	.asm-header--split .asm-menu .asm-fly__foot a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 9px 10px;
		border-radius: 0;
		font-size: .74rem;
		font-weight: 600;
		color: #C8DAD8;
		white-space: nowrap;
	}

	.asm-header--split .asm-menu .asm-fly__foot a + a {
		border-left: 1px solid rgba(255, 255, 255, .09);
	}

	.asm-header--split .asm-menu .asm-fly__foot a:hover {
		background: rgba(255, 255, 255, .05);
		color: var(--accent-2);
	}

	.asm-header--split .asm-menu .asm-fly__foot svg {
		width: 14px;
		height: 14px;
		flex: none;
		color: #7E9391;
	}

	.asm-header--split .asm-menu .asm-fly__foot a:hover svg {
		color: var(--accent-2);
	}
}

/* ---- mobile drawer: flatten the card back to a plain indented list ---- */
@media (max-width: 900px) {

	.asm-menu .sub-menu.asm-fly {
		display: none;
		grid-template-columns: none;
		width: auto;
		min-width: 0;
		max-width: none;
		margin-top: 4px;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.asm-menu .menu-item-has-children.is-open > .sub-menu.asm-fly {
		display: block;
	}

	.asm-menu .asm-fly__lead {
		margin: 0 0 4px;
		padding: 0 0 6px;
		border-bottom: 1px solid rgba(0, 0, 0, .1);
	}

	.asm-menu .asm-fly__lead a {
		font-size: .68rem !important;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: #1B7F72 !important;
		padding: 4px 0 !important;
	}

	.asm-menu .asm-fly__item > a {
		display: flex !important;
		align-items: center;
		gap: 10px;
		padding: 7px 0 !important;
		font-size: .875rem !important;
	}

	.asm-menu .asm-fly__icon {
		display: grid;
		place-items: center;
		width: 25px;
		height: 25px;
		flex: none;
		border-radius: 7px;
		background: rgba(11, 42, 43, .07);
		color: #1B7F72;
	}

	.asm-menu .asm-fly__icon svg {
		width: 14px;
		height: 14px;
	}

	.asm-menu .asm-fly__txt {
		min-width: 0;
	}

	.asm-menu .asm-fly__desc {
		display: none;
	}

	.asm-menu .asm-fly__label {
		display: block;
		font-size: .875rem;
		font-weight: 500;
		line-height: 1.3;
		color: #12312F;
	}

	.asm-menu .asm-fly__foot {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 16px;
		margin: 10px 0 6px;
		padding-top: 10px;
		border: 0;
		border-top: 1px solid rgba(0, 0, 0, .1);
		border-radius: 0;
		background: none;
	}

	.asm-menu .asm-fly__foot a {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 2px 0 !important;
		font-size: .8rem !important;
		font-weight: 600;
		line-height: 1.25;
		color: #1B7F72 !important;
		border: 0 !important;
	}

	.asm-menu .asm-fly__foot svg {
		width: 14px;
		height: 14px;
		flex: none;
	}
}

/* ---------------------------------------------------------------------------
 * Phantom horizontal scroll — mobile drawer.
 * main.css parks the drawer off-canvas with translateX(100%). A transformed box
 * still contributes scrollable overflow, which inflated the mobile layout
 * viewport from 390px to 429px and pushed the burger past the right edge.
 * Clipping at the root was worse (it clipped the fixed drawer to the header),
 * so the closed state stays in place and reveals with opacity instead. Still
 * opacity/transform only, still zero CLS, and scrollWidth now equals 390.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {

	.asm-nav {
		transform: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity .26s var(--ease, ease), visibility .26s;
	}

	.asm-nav.is-open {
		transform: none;
		opacity: 1;
		visibility: visible;
	}
}

/* ---------------------------------------------------------------------------
 * MOBILE DRAWER — three defects found by live measurement at 390px.
 *
 * 1. `.asm-header` carries backdrop-filter: blur(12px). A backdrop-filter makes
 *    the element a containing block for fixed-position descendants, so the
 *    drawer (position: fixed, inside the header) was being contained AND
 *    clipped to the 108px header box — its items painted outside it, ghosting
 *    over the hero. Dropping the blur below 900px hands the drawer back to the
 *    viewport, and blur on a 108px mobile bar buys nothing but INP cost.
 *
 * 2. Decorative glow spans (.asm-port__glow, .asm-locgrid-sec__glow) bleed past
 *    the viewport. `body` is overflow-x: clip, but clip does not create a scroll
 *    container, so the overflow still propagated and inflated the mobile layout
 *    viewport from 390 to 429 — which shrank everything and pushed the burger
 *    off the right edge. overflow-x: hidden on the root stops the propagation.
 *
 * 3. houston-seo.css sets `.asm-nav a { color: #F4F7FB }` on the location
 *    templates for the dark desktop bar. That near-white leaked into the cream
 *    mobile drawer, leaving top-level items nearly invisible. The doubled
 *    `.asm-nav.asm-nav` raises specificity above it without touching that file.
 * ------------------------------------------------------------------------ */
html {
	overflow-x: hidden;
}
@media (max-width: 900px) {

	/* houston-seo.css ships `body.page-template-page-location-cine .asm-header`
	   at (0,2,2) and loads AFTER this file, so every override below is doubled
	   up on a class to clear that bar rather than editing that stylesheet. */
	.asm-header.asm-header--split.asm-header--split,
	.asm-header.asm-header--split.asm-header--split.is-scrolled {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.asm-nav.asm-nav .asm-menu.asm-menu > li > a {
		color: #12312F;
	}

	.asm-nav.asm-nav .asm-fly__foot.asm-fly__foot a,
	.asm-nav.asm-nav .asm-fly__lead.asm-fly__lead {
		color: #1B7F72;
	}

	.asm-nav.asm-nav .asm-fly__label.asm-fly__label {
		color: #12312F;
	}
}

/* Same defence for the utility bar: it lives inside .asm-header, so the
   location template's `.asm-header a { color:#F4F7FB }` would otherwise repaint
   its links and icons on every location page. */
.asm-topbar.asm-topbar .asm-topbar__phone {
	color: #C9DAD8;
}

.asm-topbar.asm-topbar .asm-topbar__phone b {
	color: #fff;
}

.asm-topbar.asm-topbar .asm-topbar__links a {
	color: #A9BDBB;
}

.asm-topbar.asm-topbar .asm-topbar__links a:hover,
.asm-topbar.asm-topbar .asm-topbar__phone:hover,
.asm-topbar.asm-topbar .asm-topbar__phone:hover b {
	color: var(--accent-2);
}

.asm-topbar.asm-topbar .asm-topbar__social a {
	color: #9CB2B0;
}

.asm-topbar.asm-topbar .asm-topbar__social a:hover {
	color: var(--accent-2);
}

/* ===========================================================================
 * ROW ASSIGNMENT
 * The logo rides in the utility bar and the CTA closes the menu row, so the
 * old middle row is desktop-dead — it survives only below 900px, where the
 * bar has no room for a 267px logo next to two phone numbers.
 * ======================================================================== */
.asm-topbar__logo {
	display: flex;
	align-items: center;
	flex: none;
	line-height: 0;
}

.asm-topbar__logo img {
	display: block;
	width: 240px;
	height: 29px;
}

.asm-topbar__logo:hover {
	opacity: .88;
}

@media (min-width: 901px) {

	.asm-header__top--mobile {
		display: none;
	}

	/* The menu row now carries the CTA, so it needs its own vertical rhythm. */
	.asm-header--split .asm-header__navrow {
		padding: 7px 0;
	}

	.asm-header__navbar {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.asm-header__navbar .asm-nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	.asm-header__cta.asm-header__cta--nav {
		flex: none;
		white-space: nowrap;
	}
}

@media (max-width: 900px) {

	.asm-topbar__logo,
	.asm-header__cta--nav {
		display: none;
	}
}

/* The CTA costs the menu row 183px, which is enough to wrap ten items onto a
   second line at 1920. Buying it back out of the inter-item gaps keeps the
   menu on one line down to the width where it used to wrap anyway. */
@media (min-width: 1500px) {

	.asm-header__navbar .asm-nav.asm-nav .asm-menu.asm-menu {
		gap: 4px 17px;
	}
}

/* ---------------------------------------------------------------------------
 * BURGER CONTRAST
 * The bars ship as #141410, which sits on a dark transparent-over-hero header
 * at ~1.1:1 — effectively invisible. Measured states at 390px:
 *   default templates: transparent at top, #F7F4EE once scrolled
 *   location template: dark gradient in BOTH states
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {

	.asm-header--split.asm-header--split .asm-burger span {
		background: #fff;
	}

	.asm-header--split.asm-header--split.is-scrolled .asm-burger span {
		background: #12312F;
	}

	body.page-template-page-location-cine .asm-header--split.asm-header--split.is-scrolled .asm-burger span {
		background: #fff;
	}
}

/* ---------------------------------------------------------------------------
 * SCROLLED BAR — LOCATION TEMPLATE EXCEPTION
 * The is-scrolled rules above repaint the bar for a cream header, but
 * houston-seo keeps .asm-header on a dark gradient for location pages in BOTH
 * states, so the ink text disappeared there. Restore the light treatment.
 * ------------------------------------------------------------------------ */
body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar {
	border-bottom-color: rgba(255, 255, 255, .08);
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar.asm-topbar .asm-topbar__phone {
	color: #C9DAD8;
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar.asm-topbar .asm-topbar__phone b {
	color: #fff;
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar.asm-topbar .asm-topbar__links a {
	color: #A9BDBB;
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar .asm-topbar__sep {
	color: rgba(255, 255, 255, .26);
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar.asm-topbar .asm-topbar__social a {
	color: #9CB2B0;
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar.asm-topbar .asm-topbar__social a:hover {
	background: rgba(255, 255, 255, .09);
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar .asm-topbar__search input {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #E8F1F0;
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar .asm-topbar__search button {
	color: #9CB2B0;
}

body.page-template-page-location-cine .asm-header.is-scrolled .asm-topbar__bbb {
	background: none;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * DENSITY
 * Ten top-level items plus the CTA overflow the menu row on a 1536 laptop, and
 * the utility bar ran wall to wall. Measured item text totals ~1036px at
 * .88rem, so the row fits on one line down to 1536 with a 14px gap; below 1500
 * the CTA goes compact and the gap tightens again to hold one line to ~1440.
 * The search field sheds at 1400 to give the bar breathing room.
 * ------------------------------------------------------------------------ */
@media (min-width: 901px) {

	.asm-header--split .asm-header__navrow {
		padding: 10px 0;
	}

	.asm-header__navbar .asm-nav.asm-nav .asm-menu.asm-menu {
		gap: 4px 14px;
	}

	.asm-header__navbar .asm-nav.asm-nav .asm-menu.asm-menu > li > a {
		font-size: .88rem;
	}
}

@media (min-width: 901px) and (max-width: 1500px) {

	.asm-header__navbar {
		gap: 12px;
	}

	.asm-header__navbar .asm-nav.asm-nav .asm-menu.asm-menu {
		gap: 4px 8px;
	}

	.asm-header__navbar .asm-nav.asm-nav .asm-menu.asm-menu > li > a {
		font-size: .83rem;
	}

	.asm-header__cta.asm-header__cta--nav {
		padding: .52em .95em;
		font-size: .82rem;
	}
}

@media (max-width: 1400px) {

	.asm-topbar__search {
		display: none;
	}
}


/* ==========================================================================
   ASM location hero nav legibility
   The location template (page-ai-home.php) opens on a full-bleed hero whose
   grade swings from bright golden sky to near-black dusk across the 12s clip.
   White ink alone fails against the bright end, dark ink fails against the
   dark end. A soft top-down scrim carries the dark topbar tone down through
   the nav row and guarantees contrast at both extremes. Scoped to this body
   class so the homepage header stays byte-identical. Desktop only: at <=900px
   the nav is a light drawer that keeps its dark ink.
   ========================================================================== */
@media (min-width: 901px) {

	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-header__navrow {
		background: linear-gradient(180deg,
			rgba(7, 18, 20, .46) 0%,
			rgba(7, 18, 20, .20) 62%,
			rgba(7, 18, 20, 0) 100%);
	}

	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-nav.asm-nav .asm-menu.asm-menu > li > a,
	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-header__cta.asm-header__cta--nav {
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .30);
	}

	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-nav.asm-nav .asm-menu.asm-menu > li > a:hover,
	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-nav.asm-nav .asm-menu.asm-menu > li:focus-within > a {
		color: var(--accent-2);
	}

	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-header__cta.asm-header__cta--nav {
		border-color: rgba(255, 255, 255, .72);
	}

	body.page-template-page-ai-home .asm-header--split.is-over-hero:not(.is-scrolled) .asm-header__cta.asm-header__cta--nav:hover {
		background: #fff;
		color: #0B2A2B;
		border-color: #fff;
		text-shadow: none;
	}
}

/* ===========================================================================
 * PERSISTENT DARK HEADER (2026-07 header cleanup)
 * ---------------------------------------------------------------------------
 * Root cause of the "Automotive / PPC / About" legibility bug: main.css only
 * paints .asm-header once .is-scrolled (cream, 92% + blur) and only flips nav
 * text to white when .is-over-hero is present — which header.php only sets
 * for page-home.php / page-ai-home.php. Every other template (seo-services,
 * page-inner, location pages using page-location-cine, etc.) falls through to
 * a fully transparent bar with dark --ink-2 (#3A382F) text sitting directly
 * over whatever art is behind it — illegible whenever that art is dark, which
 * is most of the site now that it's gone cinematic/dark end to end.
 *
 * Fix: stop depending on scroll position or a template whitelist. The header
 * (topbar + navrow) now carries one persistent dark-glass background at all
 * times, and nav/CTA/burger ink is a fixed light tone. Scrolling only deepens
 * the glass slightly for depth — no more light↔dark repaint, no more hero-
 * dependent contrast gambling. This is also the "minimalistic, clean" look
 * requested: one quiet, cohesive dark bar instead of a cream bar that only
 * shows up after 30px of scroll.
 * ======================================================================== */
@media (min-width: 901px) {

	.asm-header.asm-header--split,
	.asm-header.asm-header--split.is-scrolled,
	.asm-header.asm-header--split.is-over-hero,
	.asm-header.asm-header--split.is-over-hero.is-scrolled {
		background: transparent;
		box-shadow: none;
	}

	.asm-header--split .asm-header__navrow {
		background: rgba(7, 18, 20, .90);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		border-top-color: rgba(255, 255, 255, .10) !important;
		transition: background-color .3s var(--ease, ease);
	}

	.asm-header--split.is-scrolled .asm-header__navrow {
		background: rgba(5, 14, 16, .97);
		box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
	}

	/* Nav ink is fixed light — independent of scroll state or hero template. */
	.asm-header--split .asm-nav.asm-nav .asm-menu.asm-menu > li > a {
		color: #DCEBE9;
	}

	.asm-header--split .asm-nav.asm-nav .asm-menu.asm-menu > li > a:hover,
	.asm-header--split .asm-nav.asm-nav .asm-menu.asm-menu > li.menu-item-has-children:hover > a,
	.asm-header--split .asm-nav.asm-nav .asm-menu.asm-menu > li:focus-within > a {
		color: var(--accent-2);
	}

	.asm-header--split .asm-header__cta.asm-header__cta--nav {
		border-color: rgba(255, 255, 255, .55);
		color: #EAF3F2;
	}

	.asm-header--split .asm-header__cta.asm-header__cta--nav:hover {
		background: #fff;
		color: #0B2A2B;
		border-color: #fff;
	}

	/* Row 1 (logo strip) already sits on the topbar's own dark background via
	   inc-topbar.php, but on templates where row 1 is hidden (desktop, no
	   mobile logo row) this only matters below 901px — kept here for the
	   .asm-logo fallback path (no custom logo set) so it never inherits dark
	   ink if that ever runs on desktop. */
	.asm-header--split .asm-logo,
	.asm-header--split .asm-logo svg,
	.asm-header--split .asm-logo .lg-accent {
		color: #fff;
	}

	/* The old is-over-hero white-text rules from main.css are now redundant
	   (nav ink is unconditionally light above) but harmless — left in place
	   since main.css is DESIGN-owned and not to be edited here. */
}

/* Mobile burger: header is dark at every breakpoint now, so the burger lines
   are always light — no more dark-lines-on-dark-drawer-toggle at the instant
   before the drawer opens. */
@media (max-width: 900px) {

	.asm-header.asm-header--split.asm-header--split .asm-burger span,
	.asm-header.asm-header--split.asm-header--split.is-scrolled .asm-burger span {
		background: #EAF3F2;
	}
}