/*
 * Site chrome: utility strip, header, mobile menu, footer, sticky mobile bar.
 * Breakpoints: 48rem (768) tablet, 64rem (1024) sticky bar hides, 75rem (1200) full navigation.
 */

/* Utility strip (desktop only) ------------------------------------------------------------------- */

.utility-strip {
	display: none;
	font-size: var(--text-xs);
	color: var(--color-on-dark);
}

.utility-strip__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	min-height: var(--utility-height);
	padding-inline: var(--space-48);
}

.utility-strip__note {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.utility-strip__icon {
	width: 16px;
	height: 16px;
	color: var(--color-yellow);
}

.utility-strip__links {
	display: flex;
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility-strip .utility-strip__links a {
	color: var(--color-on-dark);
}

.utility-strip .utility-strip__links a:hover {
	color: var(--color-white);
}

/* Header ----------------------------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 50;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	min-height: var(--header-height);
	padding: 0 var(--space-12) 0 var(--space-16);
}

.site-header__logo {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	flex-shrink: 0;
}

.site-header__logo img {
	width: 104px;
	height: 40px;
}

.primary-nav {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.header-phone {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--tap-min);
	padding: 0 var(--space-8);
	color: var(--color-ink);
	text-decoration: none;
}

.header-phone:hover {
	color: var(--color-ink);
}

.header-phone__chip {
	display: flex;
	color: var(--color-blue);
}

.header-phone__chip .icon {
	width: 18px;
	height: 18px;
}

.header-phone__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.header-phone__label {
	font-size: 0.6875rem; /* 11 */
	font-weight: var(--weight-semibold);
	color: var(--color-muted);
}

.header-phone__number {
	font-size: var(--text-base);
	font-weight: var(--weight-heavy);
	white-space: nowrap;
}

.header-schedule {
	display: none;
	white-space: nowrap;
}

.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
}

.menu-toggle .icon {
	width: 22px;
	height: 22px;
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: flex;
}

.no-js .menu-toggle {
	display: none;
}

/* Mobile menu: a panel under the header. Without JavaScript it's simply shown open. */

.mobile-menu {
	padding: var(--space-8) var(--space-16) var(--space-24);
	border-top: 1px solid var(--color-line);
	background: var(--color-white);
}

.js .mobile-menu:not(.is-open) {
	display: none;
}

.js .mobile-menu.is-open {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100dvh - var(--header-height));
	overflow-y: auto;
	box-shadow: 0 12px 24px rgba(27, 26, 23, 0.12);
}

.mobile-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu__list a {
	display: flex;
	align-items: center;
	min-height: 52px;
	border-bottom: 1px solid var(--color-line);
	color: var(--color-ink);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.mobile-menu__list a[aria-current="page"] {
	color: var(--color-blue);
}

/* Mobile menu sections: the chevron expands the section's pages. */
.mobile-menu__list .has-submenu {
	display: grid;
	grid-template-columns: 1fr auto;
}

.mobile-menu__list .submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	min-height: 52px;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-line);
	color: var(--color-ink);
	cursor: pointer;
}

.mobile-menu__list .submenu-toggle .icon {
	transition: transform 0.15s ease;
}

.mobile-menu__list .has-submenu.is-open > .submenu-toggle .icon {
	transform: rotate(180deg);
}

.mobile-menu__list .submenu {
	display: none;
	grid-column: 1 / -1;
	padding: var(--space-4) 0 var(--space-12) var(--space-16);
	border-bottom: 1px solid var(--color-line);
}

.mobile-menu__list .has-submenu.is-open > .submenu,
.no-js .mobile-menu__list .submenu {
	display: block;
}

.mobile-menu__list .submenu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu__list .submenu a {
	min-height: var(--tap-min);
	border-bottom: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.mobile-menu__list .submenu .submenu__all {
	gap: var(--space-8);
	color: var(--color-blue);
	font-weight: var(--weight-bold);
}

.mobile-menu__list .submenu__all .icon {
	width: 16px;
	height: 16px;
}

.mobile-menu__actions {
	display: grid;
	gap: var(--space-10);
	margin-top: var(--space-20);
}

@media (min-width: 48rem) {
	.site-header__inner {
		gap: var(--space-16);
		padding-inline: var(--space-24);
	}

	.site-header__actions {
		gap: var(--space-12);
	}

	.header-schedule {
		display: inline-flex;
	}
}

/* Full navigation from 75rem (1200px). */
@media (min-width: 75rem) {
	.utility-strip {
		display: block;
	}

	.site-header__inner {
		gap: var(--space-32);
		padding-inline: var(--space-48);
	}

	.site-header__logo img {
		width: 141px;
		height: 54px;
	}

	.primary-nav {
		display: block;
	}

	.primary-nav__list {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.primary-nav__list > li {
		position: relative;
		display: flex;
		align-items: center;
		--nav-pad: 9px;
	}

	.primary-nav__list > li > a {
		display: flex;
		align-items: center;
		min-height: var(--tap-min);
		padding: var(--space-12) var(--nav-pad);
		color: var(--color-ink);
		font-size: var(--text-base);
		font-weight: var(--weight-semibold);
		text-decoration: none;
		white-space: nowrap;
	}

	.primary-nav__list > .has-submenu > a {
		padding-right: 2px;
	}

	.primary-nav__list > li > a:hover {
		color: var(--color-blue);
	}

	/* Current section: blue text and a straight yellow bar under the label (and its chevron). */
	.primary-nav__list > .is-current-section > a {
		color: var(--color-blue);
	}

	.primary-nav__list > .is-current-section::after {
		content: "";
		position: absolute;
		left: var(--nav-pad);
		right: var(--nav-pad);
		bottom: 0;
		height: 3px;
		background: var(--color-yellow);
		pointer-events: none;
	}

	.primary-nav__list > .is-current-section.has-submenu::after {
		right: 2px;
	}

	/* Dropdowns: open on hover (pointer devices), with the chevron button, or on focus without JS. */
	.primary-nav .submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: var(--tap-min);
		margin-right: 2px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--color-muted);
		cursor: pointer;
	}

	.primary-nav .submenu-toggle .icon {
		width: 14px;
		height: 14px;
		transition: transform 0.15s ease;
	}

	.primary-nav .submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 40;
		min-width: 260px;
		padding: var(--space-10);
		background: var(--color-white);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-lg);
		box-shadow: 0 16px 32px rgba(27, 26, 23, 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	}

	/* The last two sections open toward the left so the dropdown stays on screen. */
	.primary-nav__list > li:nth-last-child(-n+2) > .submenu {
		left: auto;
		right: 0;
	}

	.primary-nav .has-submenu.is-open > .submenu,
	.no-js .primary-nav .has-submenu:focus-within > .submenu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.primary-nav .has-submenu.is-open > .submenu-toggle .icon {
		transform: rotate(180deg);
	}

	@media (hover: hover) {
		.primary-nav .has-submenu:hover > .submenu {
			opacity: 1;
			visibility: visible;
			transform: none;
			transition-delay: 0s;
		}

		.primary-nav .has-submenu:hover > .submenu-toggle .icon {
			transform: rotate(180deg);
		}
	}

	.primary-nav .submenu__list {
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.primary-nav .submenu__list--columns {
		grid-template-columns: repeat(2, max-content);
		column-gap: var(--space-8);
	}

	.primary-nav .submenu a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: var(--space-8) var(--space-12);
		border-radius: var(--radius-sm);
		color: var(--color-ink);
		font-size: var(--text-sm);
		font-weight: var(--weight-semibold);
		line-height: 1.3;
		text-decoration: none;
		white-space: nowrap;
	}

	.primary-nav .submenu a:hover {
		background: var(--color-cream);
		color: var(--color-blue);
	}

	.primary-nav .submenu a[aria-current="page"] {
		background: var(--color-blue-tint);
		color: var(--color-blue);
	}

	.primary-nav .submenu .submenu__all {
		gap: var(--space-8);
		margin-top: var(--space-8);
		padding-top: var(--space-12);
		border-top: 1px solid var(--color-line);
		border-radius: 0;
		color: var(--color-blue);
		font-weight: var(--weight-bold);
	}

	.primary-nav .submenu .submenu__all:hover {
		background: none;
		text-decoration: underline;
	}

	.primary-nav .submenu__all .icon {
		width: 16px;
		height: 16px;
	}

	.site-header__actions {
		gap: var(--space-16);
	}

	.header-phone {
		gap: var(--space-10);
		padding: 0;
	}

	.header-phone__chip {
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--color-blue-tint);
	}

	.header-phone__chip .icon {
		width: 20px;
		height: 20px;
	}

	.header-phone__label {
		font-size: 0.75rem; /* 12 */
	}

	.header-phone__number {
		font-size: 1.25rem; /* 20 */
	}

	.menu-toggle,
	.mobile-menu,
	.js .mobile-menu.is-open {
		display: none;
	}
}

/* 1200–1439px: the design is drawn at 1440, so tighten spacing and show just the phone number. */
@media (min-width: 75rem) and (max-width: 89.99rem) {
	.site-header__inner {
		gap: var(--space-16);
		padding-inline: var(--space-24);
	}

	.primary-nav__list {
		gap: 0;
	}

	.primary-nav__list > li {
		--nav-pad: 6px;
	}

	.primary-nav__list > li > a {
		font-size: var(--text-sm);
	}

	.primary-nav .submenu-toggle {
		width: 16px;
		margin-right: 2px;
	}

	.primary-nav__list > .is-current-section.has-submenu::after {
		right: 2px;
	}

	.site-header__actions {
		gap: var(--space-12);
	}

	.header-phone__chip,
	.header-phone__label {
		display: none;
	}

	.header-phone__number {
		font-size: var(--text-lg);
	}
}

/* Footer ----------------------------------------------------------------------------------------- */

.site-footer {
	padding-block: var(--space-40) var(--space-32);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-on-dark);
}

.site-footer__inner {
	width: min(100% - 2 * var(--gutter), var(--container-max));
	margin-inline: auto;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-32) var(--space-24);
}

.site-footer__brand {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12);
}

.site-footer__brand img {
	width: 146px;
	height: 56px;
}

.site-footer address {
	font-style: normal;
}

.site-footer .site-footer__phone {
	color: var(--color-yellow);
	font-size: 1.375rem; /* 22 */
	font-weight: var(--weight-heavy);
	text-decoration: none;
}

.site-footer__heading {
	margin-bottom: var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: 1.6;
	color: var(--color-white);
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .site-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--color-on-dark);
	text-decoration: none;
}

.site-footer .site-footer__list a:hover {
	color: var(--color-white);
	text-decoration: underline;
}

.site-footer__social {
	margin-top: var(--space-8);
}

.site-footer .site-footer__hiring {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin-top: var(--space-4);
	color: var(--color-yellow);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-8) var(--space-24);
	margin-top: var(--space-40);
	padding-top: var(--space-20);
	border-top: 1px solid var(--color-ink-rule);
	font-size: var(--text-2xs);
	color: var(--color-on-dark-muted);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .site-footer__legal a {
	color: var(--color-on-dark-muted);
}

@media (min-width: 64rem) {
	.site-footer {
		padding-block: var(--space-64) var(--space-40);
	}

	.site-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-40);
	}

	.site-footer__brand {
		grid-column: auto;
	}

	.site-footer__bottom {
		margin-top: var(--space-48);
	}
}

/* Sticky mobile bar (below 64rem) ---------------------------------------------------------------- */

.mobile-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-10);
	/* No env(safe-area-inset-bottom) here: Firefox for Android grows it while its address bar slides
	   in, which pushed the buttons up and made the bar look too tall near the top of the page. (The
	   page doesn't use viewport-fit=cover, so it's 0 on iPhones anyway.) */
	padding: var(--space-10) var(--space-12);
	background: var(--color-white);
	border-top: 1px solid var(--color-line);
	box-shadow: var(--shadow-bar);
}

.mobile-bar__btn {
	min-height: 54px;
	padding: 0 var(--space-8);
	gap: var(--space-8);
	font-size: var(--text-base);
}

/* With HubSpot chat loaded, a third button (Chat) joins the bar; labels get a touch smaller. */
.mobile-bar--chat {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-8);
}

.mobile-bar--chat .mobile-bar__btn {
	padding: 0 var(--space-4);
	gap: 6px;
	font-size: var(--text-sm);
}

/* Buttons switched off with the hidden attribute (the plain Call link once "Call or Text" is
   ready; Chat until HubSpot's chat is ready) stay hidden despite .btn's display. */
.mobile-bar [hidden],
.mobile-bar[hidden] {
	display: none !important;
}

/* Contact sheet (opened from the mobile bar) ----------------------------------------------------- */

.contact-sheet {
	width: 100%;
	max-width: 30rem;
	margin: auto auto 0;
	padding: var(--space-20) var(--space-20) var(--space-24);
	border: 0;
	border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
	background: var(--color-white);
	color: var(--color-ink);
	box-shadow: var(--shadow-bar);
}

.contact-sheet::backdrop {
	background: rgba(18, 17, 14, 0.55);
}

.contact-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
}

.contact-sheet__title {
	font-size: var(--text-h3);
}

.contact-sheet__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-ink);
	cursor: pointer;
}

.contact-sheet__note {
	margin-top: var(--space-4);
	color: var(--color-muted);
}

.contact-sheet__actions {
	display: grid;
	gap: var(--space-12);
	margin-top: var(--space-20);
}

@media (prefers-reduced-motion: no-preference) {
	.contact-sheet[open] {
		animation: contact-sheet-in 0.2s ease-out;
	}

	@keyframes contact-sheet-in {
		from {
			transform: translateY(24px);
			opacity: 0;
		}
	}
}

/* Keep the end of the page from hiding behind the bar. */
body {
	padding-bottom: var(--mobile-bar-height);
}

@media (min-width: 64rem) {
	.mobile-bar {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}