/* =========================================================================
   NAVIGATION
   =========================================================================

   One markup tree, two presentations: an accordion inside a full-screen
   sheet, and from 1120px up a set of mega dropdowns anchored under the
   header. No second mobile menu to keep in step.

   Written mobile-first, and that is a correctness decision rather than a
   convention. The first version wrote the dropdown as the base and the
   accordion as an override, and `.nav__item[data-open='true'] > .mega` -
   which carries the dropdown's centring transform - outranks a bare `.mega`
   rule inside a media query. The accordion inherited translateX(-50%) and
   rendered half off the left edge of the phone. Every rule that belongs to
   the dropdown now lives inside the dropdown's own query, so there is
   nothing for the accordion to inherit.

   One state, one owner: the open state is `data-open` on the item, written
   by script, and no CSS :hover rule opens anything. The first version had
   both and they fought - hovering set data-open, so the click that followed
   read "already open" and closed it, while the :hover rule kept the panel on
   screen with aria-expanded reading false.

   Script is still not what makes the links reachable. Everything below is
   written for `html.js`, a class an inline script in the header adds, so a
   page whose JavaScript failed renders the whole menu inline and open rather
   than sealing twenty-odd links behind a dead button.
   ========================================================================= */

.site-header__actions { display: flex; align-items: center; gap: var(--sp-1); z-index: 3; }

/* The two header buttons belong to the wide bar. On a phone they live at the foot of the
   sheet instead, where there is room for both of them at a full tap target. */
.site-header__actions .btn { display: none; }

/* A quieter sibling of .btn, for the secondary action beside a solid one. Two solid buttons
   side by side means neither of them is the primary one. */
.btn--ghost { border-color: var(--edge); color: var(--text-dim); }
.btn--ghost:hover { color: #140d04; }

.nav { z-index: 2; }

.nav__item { position: static; }

.nav__trigger,
.nav__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.42rem;
	width: 100%;
	padding: 0.85rem var(--sp-2);
	border: 0;
	border-bottom: 1px solid var(--edge);
	border-radius: 12px;
	background: none;
	font: inherit;
	font-size: var(--step-1);
	letter-spacing: -0.02em;
	color: var(--text);
	text-align: left;
	cursor: pointer;
}

.nav__chev {
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.2px solid currentColor;
	border-bottom: 1.2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--fast) var(--ease);
}

.nav__item[data-open='true'] > .nav__trigger .nav__chev {
	transform: translateY(1px) rotate(-135deg);
}

/* The current page, and the panel that contains it. */
.nav__link[aria-current='page']::after,
.nav__trigger[aria-current='true']::after {
	content: '';
	position: absolute;
	top: 50%;
	right: var(--sp-2);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bronze);
	transform: translateY(-50%);
}

/* --------------------------------------------------- the panel, as accordion */

.mega { display: none; }
.nav__item[data-open='true'] > .mega { display: block; }

.mega__pane {
	position: relative;
	padding: var(--sp-2) 0 var(--sp-3);
	animation: nav-slide 300ms var(--ease) both;
}

.mega__lead { display: none; }

.mega__cols { display: grid; gap: var(--sp-3); }

.mega__heading {
	font-size: var(--step--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-faint);
	padding-bottom: 0.65rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--edge);
}

.mega__col ul { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
.mega__col a { display: grid; gap: 0.05rem; padding: 0.55rem 0; border-radius: 11px; }

.mega__name {
	color: var(--text);
	font-size: var(--step-0);
	letter-spacing: -0.016em;
	line-height: 1.3;
}

.mega__meta { color: var(--text-faint); font-size: var(--step--1); line-height: 1.35; }
.mega__col a[aria-current='page'] .mega__name { color: var(--bronze); }

.mega__all {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--bronze);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	justify-self: start;
}

.mega__all span { transition: transform var(--fast) var(--ease); }
.mega__all:hover span { transform: translateX(0.3rem); }

/* ----------------------------------------------------------- the sheet */

.nav__scroll { display: grid; align-content: start; gap: 0.2rem; }

.nav__mobile-actions {
	display: grid;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--edge);
}

.nav__mobile-actions .btn { justify-content: center; }

.nav__tel {
	text-align: center;
	color: var(--bronze);
	letter-spacing: 0.06em;
	font-size: var(--step-1);
}

/* With script running the sheet hides behind the toggle. Without it this rule never
   applies, the menu stays in the flow, and every link is still reachable. */
html.js .nav {
	position: fixed;
	inset: 0;
	padding: 5.5rem var(--gutter) var(--sp-4);
	background: rgba(7, 7, 11, 0.99);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.75rem);
	transition: opacity 260ms var(--ease), transform 320ms var(--ease),
		visibility 0s linear 320ms;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html.js .nav {
		background: rgba(7, 7, 11, 0.88);
		-webkit-backdrop-filter: blur(26px) saturate(140%);
		backdrop-filter: blur(26px) saturate(140%);
	}
}

html.js .site-header[data-open='true'] .nav {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* ---------------------------------------------------------------- toggle */

.nav-toggle {
	width: 2.85rem;
	height: 2.85rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--edge-lit);
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 1.05rem;
	height: 1.2px;
	border-radius: 2px;
	background: var(--text);
	transform: translateX(-50%);
	transition: transform 320ms var(--ease), background-color 160ms linear;
}

.nav-toggle__bars { top: 50%; margin-top: -0.6px; }
.nav-toggle__bars::before { content: ''; top: -0.34rem; }
.nav-toggle__bars::after { content: ''; top: 0.34rem; }

.site-header[data-open='true'] .nav-toggle__bars { background: transparent; }
.site-header[data-open='true'] .nav-toggle__bars::before {
	transform: translateX(-50%) translateY(0.34rem) rotate(45deg);
}
.site-header[data-open='true'] .nav-toggle__bars::after {
	transform: translateX(-50%) translateY(-0.34rem) rotate(-45deg);
}

@keyframes nav-slide {
	from { opacity: 0; transform: translateY(-0.4rem); }
	to { opacity: 1; transform: none; }
}

/* =========================================================================
   THE BAR AND THE MEGA DROPDOWNS

   1120px rather than a round 1024: the bar carries six items plus two
   buttons, and it starts colliding with the brand just above 1100 on a real
   window.
   ========================================================================= */

@media (min-width: 1120px) {

	.nav-toggle, .nav__mobile-actions { display: none; }
	.site-header__actions .btn { display: inline-flex; }

	/* Undo the sheet. Written with the same `html.js .nav` selector as the rule it
	   overrides, because a bare `.nav` here loses to it on specificity and the result is a
	   desktop header with no navigation in it at all. */
	html.js .nav {
		position: static;
		padding: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		overflow: visible;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.nav__scroll { display: flex; align-items: center; gap: 0.15rem; }

	.nav__trigger,
	.nav__link {
		display: inline-flex;
		justify-content: flex-start;
		width: auto;
		padding: 0.55rem 0.8rem;
		border: 1px solid transparent;
		border-radius: 999px;
		font-size: var(--step--1);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-dim);
		white-space: nowrap;
		transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease),
			border-color var(--fast) var(--ease);
	}

	.nav__trigger:hover,
	.nav__link:hover,
	.nav__item[data-open='true'] > .nav__trigger {
		color: var(--text);
		background: rgba(255, 255, 255, 0.055);
		border-color: var(--edge);
	}

	.nav__link[aria-current='page'],
	.nav__trigger[aria-current='true'] { color: var(--text); }

	/* The marker moves under the label here: beside it, in a pill this short, it reads as
	   a bullet point rather than as a state. */
	.nav__link[aria-current='page']::after,
	.nav__trigger[aria-current='true']::after {
		top: auto;
		bottom: 0.1rem;
		left: 50%;
		right: auto;
		width: 3px;
		height: 3px;
		transform: translateX(-50%);
	}

	.nav__chev { width: 0.4rem; height: 0.4rem; }

	/* --------------------------------------------------------- the panel */

	.mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		/* Width follows the column count. A two-column panel stretched to the width of a
		   three-column one is exactly the empty space this design was told to remove. */
		width: min(calc(100vw - (var(--gutter) * 2)), var(--mega-w, 1100px));
		padding-top: 0.55rem;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -0.5rem);
		transition: opacity 240ms var(--ease), transform 300ms var(--ease),
			visibility 0s linear 300ms;
	}

	.mega[data-cols='3'] { --mega-w: 1240px; }
	.mega[data-cols='2'] { --mega-w: 940px; }

	.nav__item[data-open='true'] > .mega {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	/* The panel surface, and the one place on this site that deliberately is NOT `.glass`.

	   `.mega` carries a transform for its entrance, and a transformed ancestor becomes the
	   backdrop root: backdrop-filter inside it then samples only what is painted within
	   that element, which is nothing, so the blur is a no-op and the 3.5% white of the
	   glass recipe leaves the hero headline legible straight through the menu. Measured,
	   not assumed - the first build of this panel looked exactly like that.

	   So the surface is near-opaque and the depth comes from light instead: a bronze
	   hairline on the top edge, and a warm bloom in the corner the panel opens from. */
	.mega__pane {
		padding: var(--sp-4);
		border-radius: calc(var(--round) + 4px);
		border: 1px solid var(--edge);
		background:
			radial-gradient(60% 120% at 12% 0%, rgba(156, 107, 47, 0.16), transparent 60%),
			linear-gradient(180deg, rgba(20, 20, 30, 0.985), rgba(9, 9, 15, 0.99));
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.07),
			0 40px 90px -36px rgba(0, 0, 0, 0.95);
		overflow: hidden;
		animation: none;
	}

	.mega__pane::before {
		content: '';
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--bronze-deep) 18%,
			var(--bronze) 50%, var(--bronze-deep) 82%, transparent);
		opacity: 0.6;
	}

	.mega__inner {
		display: grid;
		gap: var(--sp-4);
		grid-template-columns: minmax(0, 0.78fr) minmax(0, 2.4fr);
	}

	/* The narrower panel keeps the lead column roughly the same width in pixels rather
	   than the same fraction, otherwise its blurb wraps to four words a line. */
	.mega[data-cols='2'] .mega__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr); }

	.mega__lead {
		display: grid;
		gap: var(--sp-2);
		align-content: start;
		max-width: 36ch;
		padding-right: var(--sp-3);
		border-right: 1px solid var(--edge);
	}

	.mega__lead p { color: var(--text-dim); font-size: var(--step--1); line-height: 1.55; }

	.mega__cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

	.mega__col a {
		padding: 0.5rem 0.7rem;
		margin-inline: -0.7rem;
		transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
	}

	.mega__col a:hover,
	.mega__col a:focus-visible {
		background: rgba(255, 255, 255, 0.06);
		transform: translateX(2px);
	}

	.mega__col a[aria-current='page'] { background: rgba(213, 154, 79, 0.1); }
	.mega__col a[aria-current='page'] .mega__name { color: var(--text); }
	.mega__col a:hover .mega__meta { color: var(--bronze); }

	/* No script: the bar wraps and every panel sits open beneath it. Not a design, a
	   guarantee that the links are still there and still clickable. */
	html:not(.js) .nav__scroll { flex-wrap: wrap; }

	html:not(.js) .mega {
		position: static;
		width: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mega, .nav, .nav__chev, .nav__trigger, .nav__link, .mega__col a,
	.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
		transition-duration: 1ms;
	}
	.mega__pane { animation: none; }
	.mega__all span { transition: none; }
}