/* Mega menu + mobile drawer (Claude Design "Mega menu responsive frames", Oct 15 2026).
 * Values come from FKDesktopNav.dc.html / FKMobileNav.dc.html and the designer's build notes.
 * Desktop panels at >= 1200px; the drawer below 1200px. Panels are positioned by fk-mega.js
 * (top = the header's bottom edge, Services spans min(1140px, 100% - 48px)). */

@keyframes fkMegaDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fkDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ triggers */
/* The chevron sits in the existing gap after the label (absolute), so the nav keeps its converted
 * 700px width and the header row never reflows (a 760px nav pushed the phone/CTA onto new lines). */
.fk-nav--mega .fk-mega__trigger {
	position: relative; display: flex; align-items: center;
	background: none; border: 0; margin: 0; padding: 0 10px 0 0; cursor: pointer; /* 10px = the converted menu's hidden arrow margin */
	-webkit-appearance: none; appearance: none; border-radius: 4px;
	font: inherit; line-height: 1;
}
.fk-nav--mega .fk-nav__main .fk-nav__link:focus-visible { outline: none; box-shadow: 0 0 0 2px #C39432; }
.fk-nav--mega .fk-mega__trigger[aria-expanded="true"] { color: #C39432 !important; }
.fk-mega__chev { position: absolute; left: calc(100% - 5px); top: 50%; margin-top: -6px; transition: transform 150ms ease; }
.fk-mega__trigger[aria-expanded="true"] .fk-mega__chev { transform: rotate(180deg); }

/* -------------------------------------------------------------------- panels */
.fk-mega__panel { display: none; position: absolute; z-index: 1010; text-align: left; pointer-events: none; }
.fk-mega__box { pointer-events: auto; }
.fk-mega__item.is-open > .fk-mega__panel { display: block; }
/* Without JavaScript the panels still open on hover and keyboard focus. */
html:not(.fk-mega-js) .fk-mega__item:hover > .fk-mega__panel,
html:not(.fk-mega-js) .fk-mega__item:focus-within > .fk-mega__panel { display: block; top: 100%; padding-top: 12px; }

.fk-mega__box {
	background: #FFFFFF; border-radius: 5px; border-top: 3px solid #C39432;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
	font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; color: #181818;
	animation: fkMegaDrop 140ms ease-out both;
}
.fk-mega__panel--about .fk-mega__box { width: 290px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fk-mega__panel--list .fk-mega__box { width: 290px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fk-mega__panel--areas .fk-mega__box { width: 460px; padding: 16px; }
.fk-mega__panel--services .fk-mega__box {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; overflow: hidden;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

/* links */
.fk-mega__link {
	display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 5px;
	color: #181818 !important; text-decoration: none !important; outline: none;
}
.fk-mega__link:hover, .fk-mega__link:focus-visible { background: #F6F2E8; }
.fk-mega__link:focus-visible { box-shadow: 0 0 0 2px #181818, 0 0 0 5px #C39432; }
.fk-mega__label { font: 500 15px/1.35 "DM Sans", sans-serif; }
.fk-mega__link--strong .fk-mega__label { font-weight: 700; }
.fk-mega__desc { font: 400 13px/1.4 "DM Sans", sans-serif; color: #54595F; text-wrap: pretty; }
.fk-mega__rule { display: block; height: 1px; background: #ECEAE4; margin: 4px 14px; }

/* Services */
.fk-mega__main { padding: 28px 32px 0; display: flex; flex-direction: column; }
.fk-mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fk-mega__col { display: flex; flex-direction: column; gap: 26px; }
.fk-mega__group { display: flex; flex-direction: column; gap: 8px; }
.fk-mega__group-head {
	display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 0 4px;
	font: 700 13px/1 "DM Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #181818;
}
.fk-mega__hex { flex: none; width: 36px; height: 32px; }
.fk-mega__group .fk-mega__link { padding: 8px 12px; margin: 0 -12px; }
.fk-mega__trust {
	display: flex; gap: 24px; margin: 24px 0 0; padding: 14px 0 16px; border-top: 1px solid #ECEAE4;
	font: 400 13px/1.4 "DM Sans", sans-serif; color: #54595F;
}

/* rail */
.fk-mega__rail { background: #181818; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.fk-mega__card {
	display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 5px;
	background: #232323; border: 1px solid #333333; color: #FFFFFF !important; text-decoration: none !important; outline: none;
}
a.fk-mega__card:hover { background: #2A2A2A; border-color: #C39432; }
a.fk-mega__card:focus-visible { border-color: #C39432; box-shadow: 0 0 0 2px #C39432; }
.fk-mega__card-title {
	display: flex; align-items: center; gap: 10px; font: 700 17px/1.2 "DM Sans", sans-serif;
	color: #FFFFFF !important; text-decoration: none !important; border-radius: 4px; outline: none;
}
.fk-mega__card--estimator .fk-mega__card-title svg { color: #C39432; }
a.fk-mega__card-title:hover { color: #C39432 !important; }
a.fk-mega__card-title:focus-visible { box-shadow: 0 0 0 2px #C39432; }
.fk-mega__card-text { font: 400 14px/1.5 "DM Sans", sans-serif; color: #D4D4D4; text-wrap: pretty; }
.fk-mega__card-btn {
	margin-top: 4px; align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
	border-radius: 5px; background: #C39432; color: #181818; font: 500 15px/1 "DM Sans", sans-serif;
}
.fk-mega__alert {
	flex: none; width: 28px; height: 28px; border-radius: 5px; background: #D10000; color: #FFFFFF;
	display: flex; align-items: center; justify-content: center;
}
.fk-mega__go { color: #C39432; }
.fk-mega__call {
	display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 5px;
	background: #D10000; color: #FFFFFF !important; text-decoration: none !important; font: 700 16px/1 "DM Sans", sans-serif; outline: none;
}
.fk-mega__call:hover { background: #B00000; }
.fk-mega__call:focus-visible { box-shadow: 0 0 0 2px #232323, 0 0 0 4px #FFFFFF; }

/* Service Areas */
.fk-mega__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.fk-mega__areas .fk-mega__link { justify-content: center; }
.fk-mega__note {
	margin: 12px 14px 0; padding: 12px 0 4px; border-top: 1px solid #ECEAE4;
	font: 400 14px/1.45 "DM Sans", sans-serif; color: #54595F;
}

/* -------------------------------------------------------------- breakpoints */
/* The design switches to the drawer below 1200px (the converted header switched at 1024px). */
@media (min-width: 1025px) and (max-width: 1199.98px) {
	.fk-nav--mega .fk-nav__main { display: none !important; }
	.fk-nav--mega .fk-nav__toggle { display: block !important; }
}

/* -------------------------------------------------------------------- drawer */
.fk-drawer[hidden] { display: none !important; }
.fk-drawer {
	position: fixed; left: 0; right: 0; top: 0; bottom: var(--fk-callbar-h, 0px); z-index: 1090;
	font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; color: #FFFFFF;
}
@media (min-width: 1200px) { .fk-drawer { display: none !important; } }
body.fk-drawer-open { overflow: hidden; }
.fk-drawer__bar {
	position: absolute; left: 0; right: 0; top: 0; height: 100px; z-index: 2; background: #181818;
	display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.fk-drawer__spacer { width: 44px; }
.fk-drawer__logo { display: block; }
.fk-drawer__logo img { display: block; width: 236px; height: 56px; max-width: 100%; object-fit: contain; }
.fk-drawer__close {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	background: none; border: 0; border-radius: 5px; color: #FFFFFF; cursor: pointer; padding: 0;
}
.fk-drawer__close:focus-visible { outline: none; box-shadow: 0 0 0 2px #C39432; }
.fk-drawer__scrim { position: absolute; left: 0; right: 0; top: 100px; bottom: 0; background: rgba(0, 0, 0, .55); z-index: 1; }
.fk-drawer__sheet {
	position: absolute; top: 100px; bottom: 0; right: 0; width: 100%; max-width: 440px; z-index: 2;
	background: #181818; border-top: 1px solid #2B2B2B; overflow-y: auto; overscroll-behavior: contain;
	animation: fkDrawerIn 160ms ease-out both;
}
.fk-drawer a, .fk-drawer button { -webkit-tap-highlight-color: transparent; }
.fk-drawer__ctas { padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.fk-drawer__call, .fk-drawer__estimator {
	display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 5px; text-decoration: none !important; outline: none;
}
.fk-drawer__call { height: 56px; background: #C39432; color: #181818 !important; font: 700 18px/1 "DM Sans", sans-serif; }
.fk-drawer__estimator { height: 52px; border: 1.5px solid #C39432; color: #C39432 !important; font: 500 17px/1 "DM Sans", sans-serif; }
.fk-drawer__call:focus-visible, .fk-drawer__estimator:focus-visible { box-shadow: 0 0 0 2px #181818, 0 0 0 4px #C39432; }
.fk-drawer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2B2B2B; }
.fk-drawer__item { border-bottom: 1px solid #2B2B2B; margin: 0; }
.fk-drawer__row {
	width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px;
	background: transparent; color: #FFFFFF !important; border: 0; border-radius: 0; text-align: left; cursor: pointer;
	text-decoration: none !important; font: 500 17px/1.2 "DM Sans", sans-serif; outline: none;
}
.fk-drawer__row.is-active { color: #C39432 !important; }
.fk-drawer__chev { flex: none; color: #C39432; transition: transform 150ms ease; }
.fk-drawer__toggle[aria-expanded="true"] { background: #C39432; color: #181818 !important; }
.fk-drawer__toggle[aria-expanded="true"] .fk-drawer__chev { color: #181818; transform: rotate(180deg); }
.fk-drawer__row:focus-visible, .fk-drawer__link:focus-visible, .fk-drawer__feature:focus-visible, .fk-drawer__social a:focus-visible { box-shadow: inset 0 0 0 2px #C39432; }
.fk-drawer__sub { background: #131313; padding: 8px 0; }
.fk-drawer__sub--services { padding: 8px 0 12px; }
.fk-drawer__sub--areas { padding: 8px 0 4px; }
.fk-drawer__link {
	display: flex; align-items: center; min-height: 48px; padding: 0 20px 0 36px; color: #FFFFFF !important;
	text-decoration: none !important; font: 400 16px/1.3 "DM Sans", sans-serif; outline: none;
}
.fk-drawer__link--grouped { padding-left: 56px; }
.fk-drawer__feature {
	display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; color: #FFFFFF !important;
	text-decoration: none !important; font: 700 16px/1.3 "DM Sans", sans-serif; outline: none;
}
.fk-drawer__badge { flex: none; width: 26px; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.fk-drawer__badge--red { background: #D10000; color: #FFFFFF; }
.fk-drawer__badge--gold { background: #C39432; color: #181818; }
.fk-drawer__group {
	display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px 6px;
	font: 700 12px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #C39432;
}
.fk-drawer__group .fk-mega__hex { width: 26px; height: 23px; }
.fk-drawer__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-drawer__link--area { min-height: 52px; }
.fk-drawer__link--strong { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; padding-top: 4px; padding-bottom: 4px; }
.fk-drawer__link--strong span:first-child { font: 700 16px/1.25 "DM Sans", sans-serif; }
.fk-drawer__desc { font: 400 13px/1.3 "DM Sans", sans-serif; color: #A8A8A8; }
.fk-drawer__note { margin: 0; padding: 12px 20px 14px 36px; font: 400 14px/1.45 "DM Sans", sans-serif; color: #BDBDBD; }
.fk-drawer__foot {
	padding: 20px 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	font: 400 13px/1.4 "DM Sans", sans-serif; color: #A8A8A8;
}
.fk-drawer__social { display: flex; gap: 4px; }
.fk-drawer__social a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 5px; color: #C39432; outline: none; }

@media (prefers-reduced-motion: reduce) {
	.fk-mega__box, .fk-drawer__sheet { animation: none !important; }
	.fk-mega__chev, .fk-drawer__chev { transition: none !important; }
}