/**
 * Site header: over-the-band state, megamenu, compact bar
 * (nodes 197:629 / 59:62 / 59:212). Global stylesheet.
 */

:root {
	--header-bar-h: 74px; /* pill: 42px logo + 2 x 16px padding (node 59:212) */
	--header-bar-offset: 22px; /* floating pill offset from the viewport top (node 59:139) */
	--header-grid: 86rem; /* 1376px: the header content grid (row + panel content) */

	/* Megamenu motion. The house style is a ~650ms enter with an 80ms child
	   stagger and an exit at the same duration and curve with no stagger; this
	   menu had run at 450 open / 300 close since it was built and had no
	   stagger at all.

	   A SWITCH is deliberately not an open. The menu is already up and the
	   visitor is already engaged, so repeating the full 650 on every hop
	   between About and Services reads as sticky. 450 is the menu's own former
	   open duration, so it is still a value this component already had.

	   Named rather than written out because three separate declarations have
	   to agree with each other, including a visibility delay that hides the
	   overlay the moment it stops tracking the fade. */
	--header-motion: 650ms;
	--header-motion-switch: 450ms;
	--header-motion-stagger: 80ms;
}

/* Clearance for the fixed bar, from the bar's own published height, so the two
   cannot drift apart. The two other header modes open with their own hero and
   take no clearance at all.

   This was a hardcoded calc(--header-bar-offset + --header-bar-h) = 96px, and
   96 was very nearly right for the wrong reason: it describes the FLOATING
   pill, a 22px offset plus a 74px box, which happens to land within half a
   pixel of where the compact bar's glass is actually painted at desktop. It
   was wrong at mobile, where the glass ends at 82 and 96 left 14px of dead
   space under the bar. */
body.has-static-header {
	padding-top: var(--header-bar-space);
}

/* --------------------------------------------------------------------
 * Overlay (shared): below the header layers, above the page
 * -------------------------------------------------------------------- */

.site-header-overlay {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background-color: rgba(10, 11, 13, 0.25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--header-motion) var(--motion-ease), visibility 0s linear var(--header-motion);
}

.site-header-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--header-motion) var(--motion-ease), visibility 0s;
}

/* --------------------------------------------------------------------
 * Shared row anatomy
 * -------------------------------------------------------------------- */

/* The row (and panel content) sit on the 1376px header grid, centered;
   the shell surfaces may be wider (band width) but content never is. */
.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	max-width: var(--header-grid);
	margin-inline: auto;
}

.site-header__logo {
	display: block;
	flex-shrink: 0;
}

.site-header__logo .site-logo {
	display: block;
	height: 53px;
	width: auto;
}

.site-header__pill {
	display: flex;
	align-items: center;
	gap: 64px;
}

.site-header__menu {
	list-style: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Flex so the item height comes from the 14px link, not the line-box strut
   of the inherited 16px root font (which inflates the pill vertically). */
.site-header__item {
	display: flex;
}

.site-header__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.875rem; /* nav-link 14px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-body-text-on-dark);
	text-decoration: none;
	transition: color 150ms ease;
}

/* Orange, the same token the open toggle below uses. It was
   --color-heading-text-on-dark: #D9DCE1 to #FFFFFF, a change so small it read
   as no hover at all, and the only place orange appeared in the row was
   [aria-expanded="true"]. That made the two links WITH a megamenu look like
   they had a hover state and the three without look like they had none, when
   in fact none of the five did - the orange was the open panel, not the
   pointer. Now an open panel and a hovered link agree. */
.site-header__link:hover,
.site-header__link:focus-visible {
	color: var(--color-button-primary-bg-hover);
}

.site-header__chevron {
	flex-shrink: 0;
	transition: transform 150ms ease;
}

.site-header__toggle[aria-expanded="true"] {
	color: var(--color-button-primary-bg-hover);
}

.site-header__toggle[aria-expanded="true"] .site-header__chevron {
	transform: rotate(180deg);
}

.site-header__meta {
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-header__lang {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	line-height: normal;
	font-weight: 500;
}

.site-header__lang-item {
	color: var(--color-text-secondary-on-dark);
	text-decoration: none;
	transition: color 150ms ease;
}

.site-header__lang-item:hover,
.site-header__lang-item:focus-visible {
	color: var(--color-heading-text-on-dark);
}

.site-header__lang-item.is-current {
	color: var(--color-heading-text-on-dark);
}

.site-header__lang-sep {
	color: var(--color-text-secondary-on-dark);
}

/* --------------------------------------------------------------------
 * State 1: over-the-band header
 * -------------------------------------------------------------------- */

.site-header--top {
	position: absolute;
	top: calc(var(--page-inset) + var(--wp-admin--admin-bar--height, 0px));
	left: 0;
	right: 0;
	z-index: 100;
	pointer-events: none;
}

.site-header--top .site-header__shell {
	position: relative;
	width: min(var(--band-max), 100% - 2 * var(--page-inset));
	margin-inline: auto;
	/* Declared value is the VIEWPORT-EDGE target minus the inset: this header
	   is positioned at top: var(--page-inset), so its padding stacks on top of
	   that 6px. 32 - 6 = 26 puts the logo 32px from the viewport edge, which is
	   where the horizontal grid already puts it. */
	padding: calc(32px - var(--page-inset)) 0 0;
	border-radius: 6px; /* all corners per designer correction (top-only in Figma is drift) */
	background-color: transparent;
	transition: background-color var(--header-motion) var(--motion-ease);
}

.site-header--top .site-header__row,
.site-header--top .site-header__panel {
	pointer-events: auto;
}

/* Top-state open rhythm: the divider lives on the row (padding-bottom does
   not move the center-aligned items, so glyphs stay pixel-identical). */
.site-header--top .site-header__shell.is-open .site-header__row {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--color-border-subtle);
}

/* Glass pill in the closed state. */
.site-header--top .site-header__pill {
	padding: 16px 32px;
	border-radius: 6px;
	background-color: rgba(247, 248, 250, 0.2);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color var(--header-motion) var(--motion-ease);
}

/* Open state (SHARED color story; refined ruling: the row NEVER re-lays-out
   on open in either context, it only recolors): the shell becomes the light
   panel surface, links go dark, the glass fades. Geometry rules stay
   per-context below. Recolors ride the house curve at ~300ms. */
.site-header__shell.is-open {
	background-color: var(--color-page-bg);
	transition-duration: var(--header-motion);
	pointer-events: auto;
}

.site-header__shell.is-open .site-header__pill,
.site-header--page .site-header__pill {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-header__shell.is-open .site-header__link,
.site-header--page .site-header__link {
	color: var(--color-body-text);
	transition: color var(--header-motion) var(--motion-ease);
}

/* The light surface takes the same orange, for the same reason: #2A2D33 to
   #0A0B0D was the light-header equivalent of the invisible change above. */
.site-header__shell.is-open .site-header__link:hover,
.site-header__shell.is-open .site-header__link:focus-visible,
.site-header--page .site-header__link:hover,
.site-header--page .site-header__link:focus-visible {
	color: var(--color-button-primary-bg-hover);
}

.site-header__shell.is-open .site-header__toggle[aria-expanded="true"],
.site-header--page .site-header__toggle[aria-expanded="true"] {
	color: var(--color-button-primary-bg-hover);
}

.site-header__shell.is-open .site-header__lang-item,
.site-header__shell.is-open .site-header__lang-sep,
.site-header--page .site-header__lang-item,
.site-header--page .site-header__lang-sep {
	color: var(--color-text-secondary-on-dark);
	transition: color var(--header-motion) var(--motion-ease);
}

.site-header__shell.is-open .site-header__lang-item.is-current,
.site-header--page .site-header__lang-item.is-current {
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * State 2: in-flow header for subpages (node 390:1880)
 *
 * The only variant that does NOT float: it sits in normal flow on the light
 * page background and the hero band begins below it. Everything about the row
 * is shared with the other two states, so this block owns only the flow
 * position and the surface; the on-light ink is the open-megamenu treatment,
 * which this variant is added to above rather than restating.
 * -------------------------------------------------------------------- */

.site-header--page {
	position: relative;
	z-index: 100;
}

.site-header--page .site-header__shell {
	position: relative;
	/* Same shell geometry and 32px top padding as the overlay state, so the
	   logo lands on the identical grid position on every template. The bottom
	   padding is this variant's own: the overlay state has none because it
	   floats, but in flow it is what separates the row from the band below. */
	width: min(var(--band-max), 100% - 2 * var(--page-inset));
	margin-inline: auto;
	/* 16px from the viewport edge, top and bottom. NOT calc(16px - inset) like
	   the overlay header above: that one is positioned at top: var(--page-inset)
	   so its padding stacks on the inset, but this one is in normal flow and its
	   shell starts at y=0 (the inset is horizontal only here, via the width
	   above). Subtracting the inset would land the logo at 10px. Measured: shell
	   top 0, so the declared value IS the viewport-edge distance.
	   Named because the absolutely positioned panel below has to subtract it to
	   sit against the row rather than the shell's outer edge. */
	--page-header-pad: 16px;
	padding: var(--page-header-pad) 0;
	border-radius: 6px;
	/* No background declared on purpose. The shell has none by default, and
	   declaring transparent here would tie with .site-header__shell.is-open on
	   specificity and win on source order, so the open megamenu would lose its
	   panel surface. It currently looks right only because the page background
	   happens to be the same colour, which is not something to rely on. */
	transition: background-color var(--header-motion) var(--motion-ease);
}

/* THE PANEL IS OUT OF FLOW IN THIS VARIANT ONLY.
   --top and --bar are absolute and fixed, so a panel growing inside their
   shell costs no layout. This shell is in normal flow, so an in-flow panel
   made it grow by the panel's full height on open (measured 85px to 471px)
   and pushed the hero and everything under it down by 386px. Positioning the
   panel against the shell removes the shell from the equation entirely: its
   height is identical open and closed, so nothing below it can move. Do not
   apply any of this to the other two variants.

   top subtracts the shell's bottom padding so the panel meets the row's
   divider on the same 64px rhythm the overlay megamenu has, rather than 64
   plus that padding. */
.site-header--page .site-header__panel {
	position: absolute;
	top: calc(100% - var(--page-header-pad));
	left: 0;
	right: 0;
	z-index: 1; /* over the hero band below */

	/* The panel is now the surface itself rather than a layer inside the
	   shell's, so it carries the open background and the bottom corners the
	   shell used to provide. max-width plus auto margins cannot both paint
	   full width and hold the content to the header grid, so the grid becomes
	   symmetric padding instead. */
	max-width: none;
	margin-inline: 0;
	padding-inline: max(0px, (100% - var(--header-grid)) / 2);
	background-color: var(--color-page-bg);
	border-radius: 0 0 6px 6px;

	/* The divider rides the PANEL here, not the row. On --top the row grows by
	   32px plus a border when the menu opens, which is free for an absolute
	   header but grew this in-flow shell by 33px and pushed the hero down by
	   the same. --bar moves it to the panel for exactly this reason; so does
	   this variant. The row's box is now identical open and closed.

	   That 32px is PADDING, not a margin: a margin would start the panel's
	   background 32px lower and leave the dark hero band showing through the
	   gap between the header and the panel. The surface has to begin at the
	   row's bottom edge and carry the divider inside it. 32 to the divider
	   then 64 to the content, the same rhythm the row-borne divider gives. */
	padding-top: calc(32px + 64px);
}

/* The divider spans the header grid, like the row-borne one on --top, while
   the panel behind it spans the full shell. A pseudo-element is what lets one
   element do both. */
.site-header--page .site-header__panel::before {
	content: "";
	position: absolute;
	top: 32px; /* matches the first half of the panel's padding-top */
	left: max(0px, (100% - var(--header-grid)) / 2);
	right: max(0px, (100% - var(--header-grid)) / 2);
	border-top: 1px solid var(--color-border-subtle);
}

/* Square where the two surfaces meet, so they read as one panel. */
.site-header--page .site-header__shell.is-open {
	border-radius: 6px 6px 0 0;
}

/* No glass pill here: on a light background the closed state is plain text.
   The transparent pill itself comes from the shared open-state rule. */
.site-header--page .site-header__pill {
	padding: 16px 32px;
	border-radius: 6px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* --------------------------------------------------------------------
 * State 3: compact fixed bar
 * -------------------------------------------------------------------- */

/* How much of the viewport the compact bar occupies once revealed. Published
   as a property because anything scrolling to an anchor has to clear it, and
   arriving at an anchor ALWAYS puts the header in this state, so the taller
   overlay height is the wrong number to use.

   This is the PAINTED extent, not the border box, and the difference is the
   whole point. The dark glass pill is .site-header__row::before at
   inset: -16px, so it is drawn 16px BELOW the row that generates it and
   overflows the bar's own box by that much. The box is what
   getBoundingClientRect reports; the pill is what a reader sees and what
   buries a target. Measuring the box gives 80.5 here and 66 at mobile, and
   both are 16px short of the glass.

   Verified by scanning the rendered pixels rather than by reading the box:
   the dark pill runs to y=95 at 1440 and to y=81 at 390, going light at 96
   and 82. Rounded up, away from the dependent element, so a target can never
   land half under it.

   Redeclared for mobile immediately below rather than in tokens.css, because
   this value has to stay next to the bar it measures. */
:root {
	--header-bar-space: 97px;
}

/* The bar is shorter below the breakpoint: the shell takes 16px of padding
   instead of 32, so the row lands at 22..66 rather than 38..80.5, and the
   glass ends at 82 rather than 96.5. One value, one measurement, same rule. */
@media (max-width: 1024px) {
	:root {
		--header-bar-space: 82px;
	}
}

.site-header--bar {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 110;
	pointer-events: none;
	/* -100% alone leaves the pill skin on screen: the skin overflows the
	   wrapper box by 16px below the shell. The extra 24px clears it. */
	transform: translateY(calc(-100% - 24px));
	opacity: 0;
	visibility: hidden;
	transition:
		transform 300ms var(--motion-ease),
		opacity 300ms var(--motion-ease),
		visibility 0s linear 300ms;
}

.site-header--bar.is-visible,
.site-header--bar.is-static {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition:
		transform 450ms var(--motion-ease),
		opacity 450ms var(--motion-ease),
		visibility 0s;
}

.site-header--bar.is-static {
	transition: none;
}

/* NO SHELL MORPHING, NO ROW RE-LAYOUT (refined ruling): the shell has one
   static geometry (band width at the band top; its 32px padding puts the row
   exactly where the pill spec wants it, 22px offset + 16px pad = 38px) and
   the row keeps its EXACT closed layout when the menu opens - the pill only
   recolors. The panel is a surface/content layer below; it draws its own
   divider so the row is never touched. */
.site-header--bar .site-header__shell {
	position: relative;
	pointer-events: none;
	width: min(var(--band-max), 100% - 2 * var(--page-inset));
	margin-top: var(--page-inset);
	margin-inline: auto;
	padding: 32px 0 0;
	border-radius: 6px; /* all corners per designer correction */
	background-color: transparent;
	transition: background-color var(--header-motion) var(--motion-ease);
}

.site-header--bar .site-header__row,
.site-header--bar .site-header__panel {
	pointer-events: auto;
}

/* The pill skin (node 59:139): row box + 16/13 paddings = 1402 x 74 at 22px
   from the viewport top. Crossfades out when the panel opens. isolation keeps
   the z-index:-1 skin INSIDE the row's stacking context, so it paints above
   the shell's light surface during the crossfade instead of behind it. */
.site-header--bar .site-header__row {
	position: relative;
	isolation: isolate;
}

.site-header--bar .site-header__row::before {
	content: "";
	position: absolute;
	inset: -16px -13px;
	z-index: -1;
	border-radius: 6px;
	background-color: rgba(10, 11, 13, 0.85);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 1;
	transition: opacity var(--header-motion) var(--motion-ease);
	will-change: opacity;
	pointer-events: none;
}

.site-header--bar .site-header__shell.is-open .site-header__row::before {
	opacity: 0;
}

.site-header--bar .site-header__logo .site-logo {
	height: 42px; /* smaller logo per node 59:212 */
}

/* Open from the bar: colors only on the row (logo stays 42, layout frozen).
   Background restated because the closed transparent bg above would
   otherwise win the cascade against the shared .is-open rule. */
.site-header--bar .site-header__shell.is-open {
	background-color: var(--color-page-bg);
}

/* The panel layer draws the open rhythm from the bar's own position: row
   bottom + 32px to the divider, then the panel's 64px to content. */
.site-header--bar .site-header__panel {
	margin-top: 32px;
	border-top: 1px solid var(--color-border-subtle);
}

/* --------------------------------------------------------------------
 * Megamenu panel
 * -------------------------------------------------------------------- */

.site-header__panel {
	width: 100%;
	max-width: var(--header-grid);
	margin-inline: auto;
	padding-top: 64px; /* divider -> content rhythm */
	padding-bottom: 64px;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity var(--header-motion) var(--motion-ease), transform var(--header-motion) var(--motion-ease);
}

.site-header__panel.is-active {
	opacity: 1;
	transform: translateY(0);
	transition-duration: var(--header-motion);
}

/* Panel to panel. Set by header.js for the length of the swap only, and it
   zeroes the stagger as well as shortening the fade: a switch that also
   staggered would run 450 + 240 and land slower than the open it is meant to
   undercut. The children read --header-motion-stagger by inheritance, so
   zeroing it here is all that is needed. */
.site-header__panel.is-switching {
	--header-motion-stagger: 0ms;

	transition-duration: var(--header-motion-switch);
}

.site-header__panel.is-active.is-switching {
	transition-duration: var(--header-motion-switch);
}

.site-header__panel {
	will-change: opacity, transform;
}

.mega {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

/* --------------------------------------------------------------------
 * Child stagger on enter
 *
 * The house style is an 80ms step in reading order on the way in and nothing
 * on the way out, because a stagger is a way of introducing content and there
 * is nothing to introduce on the way out. The panel had neither: it faded as
 * one flat sheet in both directions.
 *
 * The intro leads at 0 and the link columns follow it left to right, so the
 * order the eye reads is the order the content arrives. The delay is the step
 * times the item's index, and only the index is per item, so the whole ramp
 * retimes from the one token.
 *
 * Exit carries no delay at all: these rules are scoped to .is-active, and the
 * resting rule below has none, so closing is unstaggered by construction
 * rather than by a second set of rules.
 * -------------------------------------------------------------------- */

.mega__intro,
.mega__col {
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity var(--header-motion) var(--motion-ease),
		transform var(--header-motion) var(--motion-ease);
}

.site-header__panel.is-active .mega__intro,
.site-header__panel.is-active .mega__col {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--header-motion-stagger) * var(--stagger-index, 0));
}

.mega__col:nth-child(1) {
	--stagger-index: 1;
}

.mega__col:nth-child(2) {
	--stagger-index: 2;
}

.mega__col:nth-child(3) {
	--stagger-index: 3;
}

.mega__col:nth-child(4) {
	--stagger-index: 4;
}

.mega__intro {
	flex: 1;
	min-width: 0;
}

.mega__intro .eyebrow {
	margin-bottom: 32px;
}

/* h3-style headline (28/600 Archivo, line normal per node). */
.mega__headline {
	font-family: var(--font-heading);
	font-size: var(--type-h3-size);
	line-height: normal;
	font-weight: var(--type-h3-weight);
	color: var(--color-heading-text);
}

.mega__overview {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 64px;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 500;
	color: var(--color-button-text-color);
	text-decoration: none;
	transition: color 150ms ease;
}

.mega__overview:hover,
.mega__overview:focus-visible {
	color: var(--color-accent);
}

.mega__items {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 32px;
}

.mega__col {
	flex: 1;
	min-width: 0;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.mega__item {
	display: block;
	text-decoration: none;
}

.mega__item-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	font-weight: 500;
	color: var(--color-heading-text);
	transition: color 150ms ease;
}

/* The 8px arrow fades and slides in on hover (house micro-motion). */
.mega__item-arrow {
	flex-shrink: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 150ms ease, transform 150ms ease;
}

.mega__item:hover .mega__item-title,
.mega__item:focus-visible .mega__item-title {
	color: var(--color-button-primary-bg-hover);
}

.mega__item:hover .mega__item-arrow,
.mega__item:focus-visible .mega__item-arrow {
	opacity: 1;
	transform: translateX(0);
}

.mega__item-desc {
	display: block;
	margin-top: 6px;
	font-size: 0.8125rem; /* nav-dropdown-desc 13px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
 * Responsive (<=1024)
 *
 * The mobile navigation lives in mobile-nav.css: it hides the desktop nav,
 * repositions the row and owns the burger and panel. Only the pieces that
 * belong to THIS stylesheet stay here.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Desktop megamenu panels and their overlay have no role at this width. */
	.site-header__panel,
	.site-header-overlay {
		display: none;
	}
}