/*
 * GFD 2026: the curated header. Loaded only when gfd_nav_enabled().
 * Fakt Pro throughout (no display face in navigation). Colours are the site's own:
 * paper #F9F9F5, ink #242E35, forest #113524, mint #D5FCE9.
 */
.gfdnav {
	--gfdnav-paper: #f9f9f5;
	--gfdnav-surface: #fdfdfb;
	--gfdnav-ink: #242e35;
	--gfdnav-copy: #49545b;   /* 7.4:1 on paper */
	--gfdnav-label: #5b676e;  /* 5.6:1 on paper */
	--gfdnav-line: rgba(36, 46, 53, 0.12);
	--gfdnav-tint: rgba(36, 46, 53, 0.055);
	--gfdnav-forest: #113524;
	--gfdnav-forest-deep: #0b2619;
	--gfdnav-mint: #d5fce9;
	--gfdnav-wash: rgba(213, 252, 233, 0.6);
	--gfdnav-h: 77px;          /* matches the old navbar, so nothing below it moves */
	--gfdnav-h-small: 62px;
	--gfdnav-max: 1140px;
	--gfdnav-gutter: 15px;
	--gfdnav-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--gfdnav-regular: 'Fakt Pro Normal', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gfdnav-medium: 'Fakt Pro Medium', 'Fakt Pro Normal', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--gfdnav-semi: 'Fakt Pro Semi Bold', 'Fakt Pro Medium', system-ui, -apple-system, 'Segoe UI', sans-serif;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	font-family: var(--gfdnav-regular);
	color: var(--gfdnav-ink);
	-webkit-font-smoothing: antialiased;
}
.admin-bar .gfdnav { top: 32px; }
@media (max-width: 782px) { .admin-bar .gfdnav { top: 46px; } }

.gfdnav *, .gfdnav *::before, .gfdnav *::after { box-sizing: border-box; }
/* Each Fakt Pro cut is its own family, so weight stays 400 and the browser never fakes bold. */
.gfdnav, .gfdnav a, .gfdnav button, .gfdnav span, .gfdnav p { font-weight: 400; font-synthesis: none; }
/* Resets sit at zero specificity so the component classes below always win. */
:where(.gfdnav) ul { list-style: none; margin: 0; padding: 0; }
:where(.gfdnav) p { margin: 0; }
:where(.gfdnav) a { text-decoration: none; color: inherit; }
.gfdnav a:hover { text-decoration: none; }
:where(.gfdnav) button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; }
.gfdnav :focus-visible { outline: 2px solid var(--gfdnav-forest); outline-offset: 2px; border-radius: 8px; }
.gfdnav-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gfdnav-skip {
	position: fixed; left: 16px; top: 8px; z-index: 1050;
	padding: 10px 16px; border-radius: 8px;
	background: #113524; color: #f9f9f5; font-family: 'Fakt Pro Medium', sans-serif; font-size: 15px;
	transform: translateY(-160%);
}
.gfdnav-skip:focus { transform: none; color: #f9f9f5; }
#gfdnav-end { position: absolute; top: 0; outline: none; }

/* Bar: transparent over the hero like the old one; quiet paper glass and a shrink once you scroll. */
.gfdnav__bar {
	height: var(--gfdnav-h);
	border-bottom: 1px solid transparent;
	transition: height 220ms var(--gfdnav-ease), background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.gfdnav.is-scrolled .gfdnav__bar,
.gfdnav.has-open .gfdnav__bar {
	background: rgba(249, 249, 245, 0.88);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom-color: var(--gfdnav-line);
}
.gfdnav.is-scrolled .gfdnav__bar { height: var(--gfdnav-h-small); box-shadow: 0 10px 30px -22px rgba(36, 46, 53, 0.35); }
.gfdnav.has-open .gfdnav__bar { background: var(--gfdnav-surface); }

.gfdnav__inner {
	height: 100%;
	max-width: var(--gfdnav-max);
	margin: 0 auto;
	padding: 0 var(--gfdnav-gutter);
	display: flex;
	align-items: center;
	gap: 24px;
}
.gfdnav__brand { flex: 0 0 auto; display: flex; align-items: center; }
.gfdnav__brand .custom-logo-link, .gfdnav__brand .navbar-brand { display: block; margin: 0; padding: 0; line-height: 0; }
.gfdnav__brand .custom-logo {
	display: block; width: auto; height: 35px; max-width: none;
	transition: height 220ms var(--gfdnav-ease);
}
.gfdnav.is-scrolled .gfdnav__bar .custom-logo { height: 30px; }

/* Primary links */
.gfdnav__primary { flex: 1 1 auto; display: flex; justify-content: center; }
.gfdnav__list { display: flex; align-items: center; gap: 4px; }
.gfdnav .gfdnav__top {
	display: inline-flex; align-items: center; gap: 7px;
	height: 40px; padding: 0 14px; border-radius: 999px;
	font-family: var(--gfdnav-medium); font-size: 15.5px; line-height: 1; letter-spacing: 0.005em;
	color: var(--gfdnav-ink);
	transition: background-color 160ms ease, color 160ms ease;
}
.gfdnav .gfdnav__top:hover, .gfdnav__trigger[aria-expanded="true"] { background: var(--gfdnav-tint); color: var(--gfdnav-ink); }
.gfdnav__top[aria-current="page"], .gfdnav__top.is-current { box-shadow: inset 0 -2px 0 -0.5px var(--gfdnav-forest); border-radius: 0; }
.gfdnav__top[aria-current="page"]:hover, .gfdnav__top.is-current:hover, .gfdnav__top.is-current[aria-expanded="true"] { border-radius: 999px; box-shadow: none; }
.gfdnav__chev { transition: transform 200ms var(--gfdnav-ease); opacity: 0.7; }
.gfdnav__trigger[aria-expanded="true"] .gfdnav__chev, .gfdnav-drawer__toggle[aria-expanded="true"] .gfdnav__chev { transform: rotate(180deg); }

/* The one filled action */
.gfdnav__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.gfdnav .gfdnav__cta {
	display: inline-flex; align-items: center; justify-content: center;
	height: 42px; padding: 0 20px; border-radius: 8px;
	background: var(--gfdnav-forest); color: var(--gfdnav-paper);
	font-family: var(--gfdnav-semi); font-size: 15px; line-height: 1;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 16px -8px rgba(17, 40, 28, 0.45);
	transition: background-color 160ms ease, transform 160ms var(--gfdnav-ease), box-shadow 160ms ease;
}
.gfdnav .gfdnav__cta:hover { background: var(--gfdnav-forest-deep); color: var(--gfdnav-paper); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 12px 24px -10px rgba(17, 40, 28, 0.5); }
.gfdnav .gfdnav__cta:active { transform: translateY(1px); box-shadow: 0 2px 6px -4px rgba(17, 40, 28, 0.4); }
.gfdnav .gfdnav__cta:focus-visible { outline-color: var(--gfdnav-forest); }
.gfdnav__burger { display: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; }
.gfdnav__burger:hover { background: var(--gfdnav-tint); }

/* Panels: a floating glass card under the bar, with GFD ONE's float shadow */
.gfdnav__panel {
	position: absolute; top: calc(100% + 10px);
	left: max(var(--gfdnav-gutter), calc((100% - var(--gfdnav-max)) / 2));
	right: max(var(--gfdnav-gutter), calc((100% - var(--gfdnav-max)) / 2));
	background: var(--gfdnav-surface); /* solid: hero headlines must never ghost through */
	-webkit-backdrop-filter: saturate(1.4) blur(24px);
	backdrop-filter: saturate(1.4) blur(24px);
	border: 1px solid var(--gfdnav-line);
	border-radius: 16px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 8px -2px rgba(17, 40, 28, 0.08), 0 28px 64px -28px rgba(17, 40, 28, 0.32);
	visibility: hidden; opacity: 0; transform: translateY(-6px) scale(0.995); transform-origin: top center;
	transition: opacity 180ms ease, transform 220ms var(--gfdnav-ease), visibility 0s linear 220ms;
	max-height: calc(100vh - var(--gfdnav-h) - 32px);
	overflow-y: auto;
}
/* An invisible bridge over the gap, so moving the pointer from the bar to the card keeps it open. */
.gfdnav__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.gfdnav__panel.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html:not(.gfdnav-js) .gfdnav__item--panel:hover > .gfdnav__panel,
html:not(.gfdnav-js) .gfdnav__item--panel:focus-within > .gfdnav__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.gfdnav__panel-inner {
	max-width: var(--gfdnav-max); margin: 0 auto;
	padding: 32px 36px 30px;
	display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px;
}
.gfdnav-groups { display: grid; grid-template-columns: repeat(var(--gfdnav-cols, 2), minmax(0, 1fr)); gap: 32px 40px; }

.gfdnav-group__label {
	font-family: var(--gfdnav-semi); font-size: 12px; line-height: 1.2;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--gfdnav-label);
}
.gfdnav-group__promise { margin-top: 6px !important; font-size: 14px; line-height: 1.45; color: var(--gfdnav-copy); }
.gfdnav-group__list { margin-top: 14px !important; padding-top: 6px !important; border-top: 1px solid var(--gfdnav-line); }
.gfdnav-group--more .gfdnav-group__list { border-top: 0; margin-top: 0 !important; }

.gfdnav-link {
	display: block; margin: 0 -12px; padding: 10px 12px; border-radius: 10px;
	transition: background-color 160ms ease, box-shadow 160ms ease;
}
.gfdnav .gfdnav-link:hover { background: var(--gfdnav-wash); box-shadow: inset 0 0 0 1px rgba(17, 53, 36, 0.06); }
.gfdnav-link__title { display: block; font-family: var(--gfdnav-semi); font-size: 15.5px; line-height: 1.3; color: var(--gfdnav-ink); }
.gfdnav-link__desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--gfdnav-copy); }
.gfdnav-link[aria-current="page"] .gfdnav-link__title { color: var(--gfdnav-forest); }
.gfdnav-link[aria-current="page"] .gfdnav-link__title::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--gfdnav-forest); vertical-align: 2px; }

.gfdnav .gfdnav-all {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
	font-family: var(--gfdnav-semi); font-size: 14.5px; color: var(--gfdnav-forest);
}
.gfdnav-arrow, .gfdnav__arrow { flex: 0 0 auto; transition: transform 180ms var(--gfdnav-ease); }
.gfdnav a:hover > .gfdnav__arrow, .gfdnav a:hover .gfdnav__arrow { transform: translateX(3px); }

/* Rail: one featured tile, one human */
.gfdnav-rail { display: flex; flex-direction: column; gap: 12px; }
.gfdnav .gfdnav-feature {
	position: relative; display: flex; flex-direction: column; gap: 8px;
	padding: 22px 22px 20px; border-radius: 12px; overflow: hidden;
	background: radial-gradient(120% 90% at 100% 0%, rgba(213, 252, 233, 0.16), rgba(213, 252, 233, 0) 60%), var(--gfdnav-forest);
	color: var(--gfdnav-paper);
	box-shadow: 0 18px 36px -24px rgba(17, 53, 36, 0.7);
	transition: transform 200ms var(--gfdnav-ease), box-shadow 200ms ease;
}
.gfdnav .gfdnav-feature:hover { color: var(--gfdnav-paper); transform: translateY(-2px); box-shadow: 0 24px 40px -24px rgba(17, 53, 36, 0.8); }
.gfdnav .gfdnav-feature:focus-visible { outline-color: var(--gfdnav-forest); }
.gfdnav-feature__eyebrow { font-family: var(--gfdnav-semi); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gfdnav-mint); }
.gfdnav-feature__title { font-family: var(--gfdnav-medium); font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; }
.gfdnav-feature__text { font-size: 14px; line-height: 1.5; color: rgba(249, 249, 245, 0.84); }
.gfdnav-feature__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--gfdnav-semi); font-size: 14.5px; color: var(--gfdnav-mint); }

.gfdnav .gfdnav-concierge {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px; border-radius: 12px;
	background: #fff; border: 1px solid var(--gfdnav-line);
	transition: border-color 160ms ease, box-shadow 200ms ease;
}
.gfdnav .gfdnav-concierge:hover { border-color: rgba(36, 46, 53, 0.28); box-shadow: 0 12px 28px -20px rgba(36, 46, 53, 0.45); }
.gfdnav-concierge__photo { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e9ebe6; }
.gfdnav-concierge__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gfdnav-concierge__title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gfdnav-semi); font-size: 15.5px; color: var(--gfdnav-ink); }
.gfdnav-concierge__text { font-size: 13.5px; line-height: 1.4; color: var(--gfdnav-copy); }

/* Work gallery */
.gfdnav-main > .gfdnav-group__label { margin-bottom: 16px !important; }
.gfdnav-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gfdnav-tile { display: block; }
.gfdnav-tile__frame { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #ecede8; box-shadow: inset 0 0 0 1px var(--gfdnav-line); }
.gfdnav-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--gfdnav-ease); }
.gfdnav-tile:hover .gfdnav-tile__img { transform: scale(1.035); }
.gfdnav-tile__label { display: block; margin-top: 14px; font-family: var(--gfdnav-semi); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gfdnav-label); }
.gfdnav-tile__title {
	display: -webkit-box; margin-top: 6px; overflow: hidden;
	-webkit-line-clamp: 3; -webkit-box-orient: vertical;
	font-family: var(--gfdnav-semi); font-size: 15.5px; line-height: 1.35; color: var(--gfdnav-ink);
}
.gfdnav-tile:hover .gfdnav-tile__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Drawer (phones and small tablets) */
.gfdnav-drawer {
	position: fixed; inset: 0; z-index: 1040;
	display: flex; flex-direction: column;
	background: var(--gfdnav-paper);
	opacity: 0; transform: translateY(8px);
	transition: opacity 200ms ease, transform 240ms var(--gfdnav-ease);
}
.gfdnav-drawer[hidden] { display: none; }
.gfdnav-drawer.is-open { opacity: 1; transform: none; }
.admin-bar .gfdnav-drawer { top: 46px; }
.gfdnav-drawer__head {
	flex: 0 0 auto; height: 64px; padding: 0 8px 0 16px;
	display: flex; align-items: center; justify-content: space-between;
	border-bottom: 1px solid var(--gfdnav-line);
}
.gfdnav-drawer__head .custom-logo { height: 28px; }
.gfdnav-drawer__close { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.gfdnav-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 24px; }
.gfdnav-drawer__item { border-bottom: 1px solid var(--gfdnav-line); }
.gfdnav .gfdnav-drawer__top {
	display: flex; width: 100%; align-items: center; justify-content: space-between;
	min-height: 64px; padding: 0; text-align: left;
	font-family: var(--gfdnav-medium); font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; color: var(--gfdnav-ink);
}
.gfdnav-drawer__top[aria-current="page"] { color: var(--gfdnav-forest); }
.gfdnav-drawer__toggle .gfdnav__chev { width: 14px; height: 14px; }
.gfdnav .gfdnav-drawer__top:focus-visible { outline-offset: -2px; }
.gfdnav-drawer__section { padding: 4px 0 24px; display: grid; gap: 22px; }
.gfdnav-drawer__section[hidden] { display: none; }
.gfdnav-drawer__section .gfdnav-group__list { margin-top: 10px !important; }
.gfdnav-drawer__section .gfdnav-link { margin: 0; padding: 10px 0; }
.gfdnav-drawer__section .gfdnav-all { margin-top: 0; }
.gfdnav-drawer__work .gfdnav-link { display: flex; flex-direction: column-reverse; padding: 12px 0; border-bottom: 1px solid var(--gfdnav-line); }
.gfdnav-drawer__work li:last-child .gfdnav-link { border-bottom: 0; }
.gfdnav-drawer__work .gfdnav-link__desc { margin: 0 0 4px; font-family: var(--gfdnav-semi); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gfdnav-label); }
.gfdnav-drawer__foot {
	flex: 0 0 auto; display: grid; gap: 12px;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--gfdnav-line); background: var(--gfdnav-paper);
}
.gfdnav .gfdnav__cta--block { display: flex; width: 100%; height: 52px; font-size: 16px; }
html.gfdnav-locked, html.gfdnav-locked body { overflow: hidden; }
html.gfdnav-locked .gfdnav { z-index: 100000; } /* above the back-to-top button and chat widgets */
/* An open panel sits above everything on the page, including legacy buttons with high z-index. */
.gfdnav:has(.gfdnav__panel.is-open), .gfdnav:focus-within { z-index: 100000; }
.gfdnav-drawer__body .gfdnav-concierge--drawer { margin-top: 24px; }

/* Breakpoints: below 992px the drawer takes over (Bootstrap lg, like the old navbar). */
@media (max-width: 991.98px) {
	.gfdnav { --gfdnav-h: 64px; --gfdnav-h-small: 56px; --gfdnav-gutter: 16px; }
	.gfdnav__primary { display: none; }
	.gfdnav__actions { margin-left: auto; }
	.gfdnav__burger { display: inline-flex; }
	.gfdnav__brand .custom-logo { height: 30px; }
	.gfdnav.is-scrolled .gfdnav__bar .custom-logo { height: 26px; }
}
@media (max-width: 575.98px) {
	.gfdnav__actions .gfdnav__cta { display: none; }
	.gfdnav__brand .custom-logo { height: 28px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
	.gfdnav__panel-inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; }
	.gfdnav-groups { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
	.gfdnav *, .gfdnav *::before, .gfdnav *::after { transition: none !important; animation: none !important; }
	.gfdnav__panel, .gfdnav-drawer { transform: none !important; }
	.gfdnav-tile:hover .gfdnav-tile__img, .gfdnav .gfdnav-feature:hover { transform: none; }
}
@media (forced-colors: active) {
	.gfdnav__panel, .gfdnav-drawer, .gfdnav .gfdnav-feature, .gfdnav .gfdnav-concierge { border: 1px solid CanvasText; }
}
