/*
 * Site-wide header — template-parts/site-header.php
 * Figma: nav bar frame 1995:1791 (1356x54 content row + ~32px top/bottom
 * padding = ~118px total bar height), logo group 1752:3949, Menu instance
 * 1788:4665. Fixed, transparent-over-hero at rest, solid on scroll.
 */

:root {
	--tp-header-height: 118px;
	/* Height of the solid/scrolled bar. This is an ABSOLUTE value per
	   breakpoint, not `--tp-header-height - 30px`: the rest height already
	   steps down to 84 then 72 on smaller screens, so a flat -30px shrink
	   collapsed the mobile sticky bar to 42px — barely taller than the 33px
	   logo inside it. Each breakpoint below re-states this alongside its
	   --tp-header-height so the shrink stays proportional. */
	--tp-header-height-scrolled: 88px;
	/* Figma 1995:1791 — content row 1356 wide inset 42px on a 1440 page. */
	--tp-header-max: 1440px;
	/* Figma 1995:1791 — the bar's 1440 frame with a 42px inset each side
	   (content row 1356). Named so .site-search can offset past it. */
	--tp-header-pad: 42px;

	/* Search open/close motion — Figma 1788:4623 ON_CLICK SMART_ANIMATE,
	   SPRING_PRESET_THREE [mass 1, stiffness 45, damping 15], 1667ms envelope.
	     ζ  = 15 / (2·√45) = 1.118  → OVERDAMPED, so it never overshoots
	     ωn = √45 = 6.708 rad/s
	     poles -4.146 and -10.854; the DOMINANT one is -4.146, so τ = 0.241s
	   The usual 4/(ζ·ωn) shortcut does not apply to an overdamped system — it
	   gives 0.53s, which runs the motion about twice too fast. The real curve
	   is 36% done at 0.2s, 70% at 0.4s, 97% at 0.95s, 99.8% at Figma's 1.667s
	   envelope. So the expand runs 0.95s (the last 3% is imperceptible tail)
	   along the spring's actual step response, sampled below as linear().
	   A cubic-bezier cannot express this shape: the curve is far flatter in the
	   middle than any single bezier ease-out. Close keeps Figma's 0.75 ratio.
	   Browsers without linear() fall back to `ease`, which is close enough. */
	--tp-search-ease: linear(
		0 0%, 0.03 4.2%, 0.0995 8.3%, 0.1873 12.5%, 0.2804 16.7%, 0.3716 20.8%,
		0.4569 25%, 0.5344 29.2%, 0.6036 33.3%, 0.6644 37.5%, 0.7175 41.7%,
		0.7634 45.8%, 0.803 50%, 0.8371 54.2%, 0.8662 58.3%, 0.891 62.5%,
		0.9122 66.7%, 0.9303 70.8%, 0.9457 75%, 0.9588 79.2%, 0.9699 83.3%,
		0.9794 87.5%, 0.9874 91.7%, 0.9942 95.8%, 1 100%
	);
	--tp-search-open-duration: 0.95s;
	--tp-search-close-duration: 0.71s;

	/* Figma's mega-menu link hover is DISSOLVE 300ms with EASE_IN
	   [0.42, 0, 1, 1] — an accelerating curve, not the OUT_CUBIC used
	   everywhere else. Kept distinct so it can't be "tidied" into --tp-ease. */
	--tp-ease-in-figma: cubic-bezier(0.42, 0, 1, 1);
}

/* ---------------------------------------------------------------------
 * Bar
 * ------------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: var(--tp-header-height);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background var(--tp-speed) var(--tp-ease), box-shadow var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease);
}

.site-header.is-scrolled {
	height: var(--tp-header-height-scrolled);
	background: rgba(10, 28, 77, 0.9); /* --tp-navy-900 @ 90% */
	box-shadow: 0 8px 28px rgba(6, 12, 32, 0.18);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
	width: 100%;
	max-width: var(--tp-header-max);
	margin: 0 auto;
	padding: 0 var(--tp-header-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Figma: Menu instance 1788:4665 — 24px between the nav links and actions. */
	gap: 24px;
	/* Positioning context for .site-search — see .site-header__center. */
	position: relative;
}

/* ---------------------------------------------------------------------
 * Logo (FR-001)
 * ------------------------------------------------------------------- */

.site-header__logo {
	display: inline-flex;
	align-items: center;
	/* Figma: logo frame 1752:3949 — 206x39, 11px between mark and wordmark. */
	gap: 11px;
	flex-shrink: 0;
}

/* QA 2026-08-13 — "the logo needs to be on the same line as the other header
   items". Figma 1995:1791 lays the bar out as `items-start`, so the 39px logo
   sits at the TOP of the 54px content row (y 0–38.83), not centred in it: its
   wordmark bottom (70.8) lands level with the nav labels' text bottom (69).
   .site-header__inner centres its children, which dropped the logo 7.5px and
   left it visibly below the nav baseline. The extra bottom margin makes the
   logo's margin box the full 54px row so centring puts the logo itself at the
   top — a constant 7.5px lift (margin/2) that holds in the scrolled state too,
   where the logo shrinks to 31px. Desktop only: below 1024 the nav is gone and
   the mobile bar (Figma 2215:1765) does centre the logo. */
@media (min-width: 1025px) {
	.site-header__logo {
		/* 54px Figma row − 39px logo. */
		margin-bottom: 15px;
	}
}

.site-header__logo-mark {
	width: 206px;
	height: 39px;
	object-fit: contain;
	transition: width var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease);
}

/* Once solid/scrolled, shrink the logo and nav labels so the bar reads
   as a slimmer, more compact "fixed" state (matches the height transition
   already declared on .site-header above). */
.site-header.is-scrolled .site-header__logo-mark {
	width: 165px;
	height: 31px;
}

/* ---------------------------------------------------------------------
 * Primary nav + mega-menu (FR-002 / FR-003)
 * ------------------------------------------------------------------- */

/* Shared slot for nav + inline search (data-tp-center) — both children are
 * stacked absolutely inside it so opening search cross-fades/expands in
 * place instead of an instant layout swap. */
/* Positioning context for the absolutely-stacked nav. The search panel is NOT
   in here — it is a sibling anchored to .site-header__inner so its right edge
   can't be dragged around by this column shrinking as the lang cluster
   collapses. See the markup comment in template-parts/site-header.php. */
.site-header__center {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}

/* Figma: the nav links (1788:4542) and the actions cluster sit in one
 * right-aligned "Menu" instance (1788:4665) — the links end 24px before the
 * lang/search cluster rather than being centred in the free space. */
.site-header__nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	opacity: 1;
	transition: opacity var(--tp-search-close-duration) var(--tp-search-ease);
}

.site-header.is-search-open .site-header__nav {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tp-search-open-duration) var(--tp-search-ease);
}

/* Figma 1788:4575 lays the links out on a FIXED rhythm, not a spread: inside
   the 586px row 1788:4542 the five items sit at x=0/115/240/360/490 with
   widths 86/96/91/101/96, i.e. a flat 29px gap between every pair. The row is
   right-flushed by .site-header__nav so its last item ends 24px before the
   lang/search cluster, which at 1440 puts "Services" at x=406 and leaves the
   158px breath after the logo that the design shows.

   This replaced an earlier `space-between` spread copied from the live header
   (thinkpalmtestphp), which stretched the same five links across the free
   space and blew the gaps out to ~41px. Client QA measured that against the
   design; Figma wins. */
.site-header__menu {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	justify-content: flex-end;
	gap: 29px;
	transition: gap var(--tp-speed) var(--tp-ease);
}

.site-header__menu-item {
	position: relative;
}

.site-header__menu-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* Figma: nav item 1788:4543 — 4px from label to the 16px chevron box. */
	gap: 4px;
	padding: 8px 0;
	color: var(--tp-white);
	/* Figma: 1788:4544 — Plus Jakarta Sans Medium 16/20 (125%), pure #ffffff. */
	font: 500 16px/20px var(--tp-font-body);
	/* Figma textCase=TITLE on 1788:4544/4548/4552/4556/4560. */
	text-transform: capitalize;
	opacity: 1;
	white-space: nowrap;
	transition: opacity var(--tp-speed-fast) var(--tp-ease), font-size var(--tp-speed) var(--tp-ease);
}

.site-header.is-scrolled .site-header__menu-trigger {
	/* Scrolled shrink only — not a Figma spec. Keeps the same -1px step off the
	   16px rest state that 14px had off 13px. */
	font-size: 15px;
}

.site-header__menu-trigger::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--tp-blue);
	transform: scaleX(0);
	transition: transform var(--tp-speed-fast) var(--tp-ease);
}

.site-header__menu-trigger:hover,
.site-header__menu-item.is-open .site-header__menu-trigger {
	opacity: 1;
}

.site-header__menu-trigger:hover::after,
.site-header__menu-item.is-open .site-header__menu-trigger::after {
	transform: scaleX(1);
}

/* Figma: chevron box 1788:4545 is 16x16 with an 8x4 arrow inset at 4,7. */
.site-header__chevron {
	flex-shrink: 0;
	transition: transform var(--tp-speed-fast) var(--tp-ease);
}

.site-header__menu-item.is-open .site-header__chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
 * Mega-menu dropdown card
 *
 * Figma component sets: Services 1446:2934 (1112x376), Industries 1468:4521,
 * Products 1468:5052, Resources 1491:7764, Company 1499:3541 (all 760x376).
 * The card is a white panel anchored under its nav item — not the full-bleed
 * bar the earlier build used. Geometry from the Company set:
 *   card        760 x 376
 *   link column 344 wide at 32,32; rows 344x44, radius 8, no gap
 *   preview     344x328 at 400,24, radius 16
 * Services is 1112 wide: a second link column sits at x=404 and only appears
 * once a category is clicked.
 * ------------------------------------------------------------------- */

/* Placement comes from Figma's own overlay offsets on the five nav items
   (1788:4543/4547/4551/4555/4559): each dropdown opens at a specific x
   relative to its trigger — Services -264, Industries -21, Products -158,
   Resources -621, Company -421 — and y = +52 from the 20px label's top.
   Our trigger adds 8px of vertical padding, so +52 from the label is
   100% + 24px from the list item. --mega-offset is set per menu in the markup. */
.mega-menu {
	position: absolute;
	top: calc(100% + 24px);
	left: var(--mega-offset, 0);
	z-index: 999;
	width: var(--mega-width, 760px);
	max-width: calc(100vw - 2 * var(--tp-header-pad));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Figma: each nav item (1788:4543/4547/4551/4555/4559) opens its panel with
	   MOVE_FROM_RIGHT + SPRING_PRESET_THREE (1250ms envelope; the preset is
	   overdamped so it settles at --tp-speed). Reproduced as a short X offset +
	   fade rather than a full traverse. */
	transform: translateX(40px);
	transition: opacity var(--tp-speed-spring) var(--tp-ease-spring), transform var(--tp-speed-spring) var(--tp-ease-spring), visibility 0s linear var(--tp-speed-spring);
}

.mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition: opacity var(--tp-speed-spring) var(--tp-ease-spring), transform var(--tp-speed-spring) var(--tp-ease-spring);
}

/* Figma: white card, 32px inset on the link side, 24px on the preview side. */
.mega-menu__card {
	display: grid;
	grid-template-columns: 344px 344px;
	justify-content: space-between;
	align-items: start;
	min-height: 376px;
	padding: 24px;
	background: var(--tp-white);
	border-radius: 16px;
	box-shadow: 0 28px 48px rgba(10, 16, 40, 0.16);
}

/* Services: links | sub-links | preview. */
.mega-menu--cascade .mega-menu__card {
	grid-template-columns: 344px 344px 344px;
}

.mega-menu__links {
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
}

/* Figma 1491:7697 -> 1491:7702. Rest: 344x44, radius 8, 12px inset, Medium
   14/20 #131313. Hover: #edf4ff fill, 1px #96bfff border, SemiBold #1977f3,
   and the label shifts to a 24px inset. Border is an inset shadow so the 44px
   row height and the 12px text inset don't move when it appears. */
.mega-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	font: 500 14px/20px var(--tp-font-body);
	color: var(--tp-black);
	text-transform: capitalize;
	box-shadow: inset 0 0 0 1px transparent;
	/* Figma ON_HOVER: DISSOLVE 300ms EASE_IN (cubic-bezier(.42,0,1,1)). */
	transition:
		background var(--tp-speed-fast) var(--tp-ease-in-figma),
		box-shadow var(--tp-speed-fast) var(--tp-ease-in-figma),
		color var(--tp-speed-fast) var(--tp-ease-in-figma),
		padding var(--tp-speed-fast) var(--tp-ease-in-figma);
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible,
.mega-menu__link.is-active {
	padding: 0 12px 0 24px;
	background: #edf4ff;
	box-shadow: inset 0 0 0 1px #96bfff;
	color: var(--tp-blue);
	font-weight: 600;
}

/* Figma keeps the caret visible on every row that has children — it only
   changes colour with the row (inherited via currentColor), it does not fade
   in on hover. */
.mega-menu__caret {
	flex: none;
}

/* Sub-column carets point up in Figma (1446:2935): they read as "expands"
   rather than "goes deeper". Clicking the row opens its children panel, so the
   caret animates down to read as "expanded". */
.mega-menu__link--sub .mega-menu__caret {
	transform: rotate(-90deg);
	transition: transform var(--tp-speed-fast) var(--tp-ease-in-figma);
}

.mega-menu__sub-item.is-open .mega-menu__link--sub .mega-menu__caret {
	transform: rotate(90deg);
}

/* Second column (Services only) — hidden until a category is clicked. */
.mega-menu__subs {
	position: relative;
	padding-top: 8px;
	min-height: 1px;
}

.mega-menu__sub {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	inset: 0 0 auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--tp-speed-fast) var(--tp-ease-in-figma), visibility 0s linear var(--tp-speed-fast);
}

.mega-menu__sub.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--tp-speed-fast) var(--tp-ease-in-figma);
}

/* Third level — expands inline beneath its parent, as Figma's variants show.
   The 0fr -> 1fr row collapse only works on a grid with ONE child, so the
   <ul> is wrapped: this div is the grid, the list is its single item. */
.mega-menu__children {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--tp-speed-spring) var(--tp-ease-spring), opacity var(--tp-speed-fast) var(--tp-ease-in-figma);
}

/* min-height:0 is load-bearing: without it the grid item keeps its intrinsic
   height and the 0fr row never actually collapses. */
.mega-menu__children-list {
	overflow: hidden;
	min-height: 0;
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
}

/* Click-latched (header.js), not :hover — the whole menu is click-driven, and
   a hover-expanded panel also shifted every row below it out from under the
   pointer mid-reach. */
.mega-menu__sub-item.is-open .mega-menu__children {
	grid-template-rows: 1fr;
	opacity: 1;
}

.mega-menu__link--child {
	height: 40px;
	font-size: 13px;
	color: var(--tp-gray-700);
}

/* Preview panel — Figma 1499:3452 (344x328, radius 16). Default state shows a
   brand tile; clicking a link cross-fades to that link's image + copy on the
   #edf4ff wash. All panes are stacked in one grid cell. */
.mega-menu__preview {
	display: grid;
	width: 344px;
	height: 328px;
	border-radius: 16px;
	overflow: hidden;
	background: #edf4ff;
}

.mega-menu__preview-pane {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	/* Figma 1588:4313 — content inset 16px, 18px between image and copy. */
	padding: 16px;
	gap: 18px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tp-speed-fast) var(--tp-ease-in-figma);
}

.mega-menu__preview-pane.is-active {
	opacity: 1;
	pointer-events: auto;
}

.mega-menu__preview-pane--default {
	padding: 0;
}

.mega-menu__preview-brand {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma 1499:3550 — 312x160, radius 8. */
.mega-menu__preview-image {
	width: 100%;
	height: 160px;
	border-radius: 8px;
	object-fit: cover;
}

.mega-menu__preview-copy {
	display: flex;
	flex-direction: column;
	gap: 8px; /* Figma 1499:3552 */
}

/* Figma 1499:3553 — Medium 18/24 #131313. */
.mega-menu__preview-title {
	font: 500 18px/24px var(--tp-font-heading);
	color: var(--tp-black);
	text-transform: capitalize;
	margin: 0;
}

/* Figma 1499:3554 — Regular 12/16 #595959. */
.mega-menu__preview-desc {
	font: 400 12px/16px var(--tp-font-body);
	color: var(--tp-gray-700);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Actions: JP link (FR-004), search (FR-005), CTA (FR-006), hamburger
 * ------------------------------------------------------------------- */

.site-header__actions {
	display: flex;
	align-items: center;
	/* Figma: actions cluster 2162:519 — 20px between the lang/search group and the CTA. */
	gap: 20px;
	flex-shrink: 0;
	/* Belt-and-braces against .site-header__center (flex:1) so this cluster is
	   unambiguously flush against .site-header__inner's right padding edge —
	   see the max-width:360px block for why this matters at 320px. */
	margin-left: auto;
}

/* Figma groups the language pill + search icon as one tight-knit cluster
 * (2162:520, nearly touching — mr-[-2px]) before the 20px gap to the CTA.
 * Collapses to 0 width (rather than an instant display:none) so the CTA
 * slides into its place — the same choreography Figma's Smart Animate
 * drives via the outer wrapper's width/translate keyframes. */
.site-header__lang-search {
	display: inline-flex;
	align-items: center;
	/* Figma 1788:4564: gap is -2 (the search circle overlaps the pill by 2px);
	   applied as a negative margin on the toggle since CSS gap can't be < 0. */
	gap: 0;
	max-width: 240px;
	overflow: hidden;
	opacity: 1;
	transition:
		max-width var(--tp-search-close-duration) var(--tp-search-ease),
		margin var(--tp-search-close-duration) var(--tp-search-ease),
		opacity var(--tp-search-close-duration) var(--tp-search-ease);
}

/* The JP pill has no counterpart in Figma's open variant, so Smart Animate
   fades it out across the whole transition while the grey pill grows beneath
   it — it does not blink out on frame 1. It collapses on the same spring as
   the pill's growth so the two read as one morph.
   This is only safe because .site-search is anchored to .site-header__inner:
   the reflow this causes inside .site-header__actions no longer touches the
   pill's right edge. */
.site-header.is-search-open .site-header__lang-search {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--tp-search-open-duration) var(--tp-search-ease);
}

/* Figma: language pill 1961:5115 — 103x40, radius 27, 12px side padding,
 * 4px between the 24px flag (1961:5128) and the label (1961:5110, Medium
 * 16/24). Figma fills that label #000000 on a transparent pill, which would
 * be unreadable over the dark hero — kept white pending design confirmation. */
.site-header__jp {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 12px;
	min-height: 40px;
	border-radius: 27px;
	color: var(--tp-white);
	font: 500 16px/24px var(--tp-font-body);
	/* Figma textCase=TITLE on 1961:5110. */
	text-transform: capitalize;
	opacity: 1;
	transition: opacity var(--tp-speed-fast) var(--tp-ease), min-height var(--tp-speed) var(--tp-ease), font-size var(--tp-speed) var(--tp-ease);
}

.site-header__jp:hover {
	opacity: 1;
}

.site-header__jp-flag {
	flex-shrink: 0;
	transition: width var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease);
}

/* Shrink alongside the logo/menu once the bar goes solid/fixed. */
.site-header.is-scrolled .site-header__jp {
	min-height: 34px;
	font-size: 14px;
}

.site-header.is-scrolled .site-header__jp-flag {
	width: 20px;
	height: 20px;
}

/* Figma: search icon instance 1788:4623 — 54x54 circle holding a 25x25
 * glyph (1788:4613), overlapping the language pill by 2px. */
/* Figma 1788:4623 "search icon" — 54x54, radius 37.776, horizontal auto-layout
   with 12.186px padding and a 12.186px gap, centre-aligned. The padding is what
   sizes the glyph well: 12.186 + 29.63 + 12.186 = 54, so the 25px vector sits
   in a ~30px content box exactly as the nested frame 1788:4612 does in Figma. */
.site-header__search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12.186px;
	width: 54px;
	height: 54px;
	padding: 12.186px;
	margin-left: -2px;
	border-radius: 37.776px;
	color: var(--tp-white);
	opacity: 1;
	transition: opacity var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease), background var(--tp-speed-fast) var(--tp-ease), width var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease), padding var(--tp-speed) var(--tp-ease);
}

/* The compact bar shrinks its chip 54 -> 42, but NOT the glyph: Figma has a
   single search icon (1788:4615, both variants) at 24.754 and no scrolled
   variant to justify a smaller one, so the padding is what absorbs the 12px.
   (42 - 29.6283) / 2 = 6.18585. */
.site-header.is-scrolled .site-header__search-toggle {
	width: 42px;
	height: 42px;
	padding: 6.18585px;
}

/* Figma 1788:4613 — the glyph is a 24.754 vector sitting in a 29.6283 frame
   (see the padded-viewBox note in site-header.php). Because the viewBox now
   carries Figma's 2.4372 padding, every size below is the GLYPH size scaled by
   29.6283 / 24.754 = 1.1969. Here that lands on 29.6283, which is exactly the
   54px chip minus its 2 x 12.186 padding — the svg fills the content box. */
.site-header__search-toggle svg {
	flex: none;
	width: 29.6283px;
	height: 29.6283px;
	transition: width var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease);
}

/* Deliberately NOT shrunk on scroll — the glyph stays at Figma's 24.754
   (29.6283 box) in every state. It used to drop to 19px, which read as a
   different, smaller icon than the design. */
.site-header.is-scrolled .site-header__search-toggle svg {
	width: 29.6283px;
	height: 29.6283px;
}

/* Figma 1788:4623 ON_HOVER -> 1788:4616, DISSOLVE 300ms OUT_CUBIC: the pill
   fills #ededed and the glyph goes #ffffff -> #383838. Timing comes from the
   --tp-speed-fast / --tp-ease pair on the base rule above. */
.site-header__search-toggle:hover,
.site-header__search-toggle:focus-visible {
	opacity: 1;
	color: #383838;
	background: #ededed;
}

.site-header__cta {
	flex-shrink: 0;
	/* Figma: CTA frame 2162:532 — 207x44, text inset 35px/10px, bold. */
	padding: 10px 35px;
	min-height: 44px;
	font-weight: 700;
	/* Figma textCase=TITLE on 1788:4574. */
	text-transform: capitalize;
	transition: padding var(--tp-speed) var(--tp-ease), min-height var(--tp-speed) var(--tp-ease), font-size var(--tp-speed) var(--tp-ease);
}

.site-header.is-scrolled .site-header__cta {
	padding: 8px 26px;
	min-height: 36px;
	font-size: 13px;
}

.site-header__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 22px;
	flex-shrink: 0;
}

.site-header__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--tp-white);
	transition: transform var(--tp-speed-fast) var(--tp-ease), opacity var(--tp-speed-fast) var(--tp-ease);
}

.site-header__hamburger.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__hamburger.is-active span:nth-child(2) {
	opacity: 0;
}

.site-header__hamburger.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------------------------------------------------------------------
 * Inline search (FR-005)
 * Figma: node 1788:4730 ("Menu", Property 1=Variant2) — the nav links +
 * lang/search cluster are replaced in place by a 719px pill (#ededed,
 * 54px tall, fully rounded) with a "Search....." placeholder and an
 * inline close (X); the "Start Your Project" CTA stays put beside it.
 * ------------------------------------------------------------------- */

/* Figma 1788:4599 — the open row is 946 wide and right-aligned in the bar:
   the 719px pill, a 20px gap, then the 207px CTA, ending flush with the bar's
   right edge. So the pill hugs the CTA rather than sitting next to the logo. */
/* Anchored to .site-header__inner, not the centre column: the pill's right edge
   is then always (CTA 207 + actions gap 20) = 227px from the bar's right padding
   edge — Figma's 20px gap before the CTA — no matter what the lang cluster is
   doing. That decoupling is what lets the cluster animate out over the full
   duration (as Smart Animate does) without dragging the pill sideways. */
.site-search {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Offsets resolve against the PADDING box, which for .site-header__inner is
	   its border box — so a bare `left: 0` put the pill flush with the bar's
	   outer edge and the placeholder ran off-screen once the viewport was too
	   narrow for the full 719px. header.js publishes the inner's real
	   padding-left (42/32/24/16 by breakpoint) so the pill stops at the same
	   content edge the logo does. */
	left: var(--tp-search-left, 0px);
	/* Offsets resolve against .site-header__inner's PADDING box, so the bar's
	   own 42px inset has to be added back: CTA 207 + actions gap 20 + pad 42.
	   Without the pad the pill's right edge landed 22px inside the CTA.
	   That literal only holds for the rest state at 1440: once .is-scrolled
	   shrinks the CTA (207 -> ~163) the pill stopped 44px short of it, and the
	   42px is likewise wrong at every breakpoint that re-pads the bar. header.js
	   therefore measures the CTA's real left edge each frame and publishes it as
	   --tp-search-right; this literal stays only as the pre-JS fallback. */
	right: var(--tp-search-right, calc(207px + 20px + var(--tp-header-pad)));
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	opacity: 0;
	pointer-events: none;
	/* Hidden only after the pill has finished shrinking back to 54px. */
	transition: opacity 0s linear var(--tp-search-close-duration);
}

/* Shown on frame 1, in the same instant the toggle collapses, so the 54px grey
   circle takes over the toggle's exact footprint. Figma morphs one element; a
   cross-fade here would read as two. */
.site-search.is-open {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0s linear;
}

/* Figma's Smart Animate morphs the round search icon (54x54) into the full
 * 719px pill by animating width alone (height stays fixed), so the shape
 * grows without distorting the border-radius. Durations/easing match the
 * source Smart Animate keyframes exactly (open slower than close). */
.site-search__form {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* The collapsed pill has to be exactly the toggle's 54px. Horizontal padding
	   lives on the input, not here: under border-box a padded box cannot shrink
	   below its own padding, so `padding: 0 44px 0 24px` was clamping the
	   collapsed width up to 68px — 14px wider than the circle it replaces. */
	flex: 0 0 auto;
	min-width: 0;
	width: 54px;
	/* Cap against the container, NOT at 719px. Animating `54px -> 100%` under a
	   719px max-width meant the interpolated value blew past the cap about
	   halfway through and sat clamped for the rest, so the pill finished
	   growing at ~0.5s no matter what duration was set. The open state now
	   names 719px outright, which makes the tween exactly the visible range. */
	max-width: 100%;
	height: 54px;
	padding: 0;
	background: #ededed;
	/* Figma 1788:4627 radius 37.776 — the same value the 54px collapsed toggle
	   uses, so the Smart Animate morph keeps one radius throughout. */
	border-radius: 37.776px;
	transition: width var(--tp-search-close-duration) var(--tp-search-ease),
		height var(--tp-speed) var(--tp-ease);
}

.site-search.is-open .site-search__form {
	/* min() against 100%, not a bare 719px: below ~1160px the anchored
	   container (left/right vars, see .site-search above) is narrower than
	   the Figma pill, and a bare 719px pushed the box past the viewport's
	   left edge — leaving the hamburger sitting uncovered next to the close
	   button instead of the pill covering the header row. */
	width: min(719px, 100%); /* Figma 1788:4627 */
	transition: width var(--tp-search-open-duration) var(--tp-search-ease),
		height var(--tp-speed) var(--tp-ease);
}

.site-search__input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	/* Figma 1788:4721 — the placeholder box starts 24px in; the right inset
	   clears the close button (20px from the edge + 24px wide). Held here
	   rather than on the form so the form can collapse to a true 54px. */
	padding: 0 44px 0 24px;
	border: none;
	outline: none;
	background: transparent;
	font: 500 20px/34px var(--tp-font-body);
	color: var(--tp-black);
	text-transform: capitalize;
	opacity: 0;
	transition: opacity var(--tp-search-close-duration) var(--tp-search-ease),
		padding var(--tp-speed) var(--tp-ease),
		font-size var(--tp-speed) var(--tp-ease);
}

.site-search.is-open .site-search__input {
	opacity: 1;
	transition: opacity var(--tp-search-open-duration) var(--tp-search-ease),
		padding var(--tp-speed) var(--tp-ease),
		font-size var(--tp-speed) var(--tp-ease);
}

.site-search__input::placeholder {
	color: rgba(19, 19, 19, 0.5);
}

.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration {
	appearance: none;
	-webkit-appearance: none;
}

/* Figma 1788:4717 / symbol 1788:4708 — a bare 24x24 box holding a 15x15 cross
   vector (1788:4707) filled #000000 at 50%, inset 5px on every side, sitting
   20px in from the pill's right edge. There is no disc behind it: the previous
   translucent-black circle with a white glyph was an invention. */
.site-search__close {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: rgba(0, 0, 0, 0.5);
	background: none;
	opacity: 0;
	transition: opacity var(--tp-search-close-duration) var(--tp-search-ease), color var(--tp-speed-fast) var(--tp-ease),
		right var(--tp-speed) var(--tp-ease), width var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease);
}

.site-search.is-open .site-search__close {
	opacity: 1;
	transition: opacity var(--tp-search-open-duration) var(--tp-search-ease), color var(--tp-speed-fast) var(--tp-ease),
		right var(--tp-speed) var(--tp-ease), width var(--tp-speed) var(--tp-ease), height var(--tp-speed) var(--tp-ease);
}

/* Figma DOES define this hover, contrary to what this comment used to claim:
   component set 1788:4709 "Close" holds Property 1=Default (1788:4708, the
   black-at-50% glyph above) and Property 1=Variant2 (1788:4710), and 4708
   carries an ON_HOVER -> CHANGE_TO 4710 reaction, SMART_ANIMATE / EASE_OUT /
   300ms. Variant2's vector 1788:4711 is filled a solid #1977F3 — the brand
   blue, i.e. --tp-blue — with no fill-opacity, so the glyph goes from 50%
   black to 100% blue. The previous rgba(0,0,0,0.85) was an invented
   "deepen the black" affordance standing in for a state the design had all
   along. --tp-speed-fast/--tp-ease are already 300ms OUT_CUBIC, so the
   timing on the base rule matches the Smart Animate keyframe as-is. */
.site-search__close:hover,
.site-search__close:focus-visible {
	color: var(--tp-blue);
}

/* Scrolled/compact bar. Only the CLOSED pill tracks the compact bar — it has
   to sit exactly on the search toggle it morphs out of, and .is-scrolled pulls
   that chip 54 -> 42. Once open, the field is Figma's (1788:4577): 719x54,
   full stop. It used to scale through at the toggle's 0.78 ratio — 560x42 with
   16/28 text and a 20px close — which client QA measured against the design.
   Figma has no scrolled variant of this component, so there is nothing backing
   a second size; the pill is an overlay on an 88px bar and 54px fits it.

   Written as :not(.is-open) / .is-open pairs rather than one collapsed rule
   because `.site-header.is-scrolled .site-search__form` and
   `.site-search.is-open .site-search__form` have equal specificity — the
   later-declared collapsed width would otherwise beat the open one. */
.site-header.is-scrolled .site-search:not(.is-open) .site-search__form {
	width: 42px;
	height: 42px;
}

.site-header.is-scrolled .site-search.is-open .site-search__form {
	/* Same overflow guard as the base rule: below ~1160px the anchored
	   container is narrower than the Figma pill. */
	width: min(719px, 100%);
	height: 54px;
}

/* ---------------------------------------------------------------------
 * Mobile drawer (<=1024px)
 * ------------------------------------------------------------------- */

.site-mobile-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(10, 16, 40, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--tp-speed) var(--tp-ease), visibility 0s linear var(--tp-speed-spring);
}

.site-mobile-nav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--tp-speed) var(--tp-ease);
}

.site-mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1002;
	/* Figma 2336:3313 draws the open menu full-bleed at 360 — the design has no
	   sliver of page showing down the left edge, and the drawer carries its own
	   header bar, so it covers the viewport edge to edge. */
	width: 100%;
	background: var(--tp-white);
	transform: translateX(100%);
	transition: transform var(--tp-speed) var(--tp-ease);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.site-mobile-nav.is-open {
	transform: translateX(0);
}

/* Head bar — Figma 2336:3313 > "Frame 2147226940": 79px tall, white, 1px
   #DDDDDD hairline along the bottom. Logo 154x28.4 at x=16; the search and
   close glyph centres land at x=278 and x=329 in a 360 frame, which is what
   the asymmetric right padding + 27px gap below reproduce. */
.site-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	height: 79px;
	padding: 0 19.5px 0 16px;
	border-bottom: 1px solid #dddddd;
}

.site-mobile-nav__logo {
	display: inline-flex;
	align-items: center;
}

.site-mobile-nav__logo img {
	display: block;
	width: 154px;
	height: auto;
}

.site-mobile-nav__head-actions {
	display: flex;
	align-items: center;
	gap: 27.125px;
}

.site-mobile-nav__search,
.site-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: #222222;
}

.site-mobile-nav__search svg {
	width: 24.75px;
	height: 24.75px;
	display: block;
}

.site-mobile-nav__close svg {
	width: 23px;
	height: 23px;
	display: block;
}

/* Nested accordion, rebuilt against Figma node 2336:3313 (Mobile > Navigation).
   Depth is signalled by a 16px indent per level plus, for the open branch only,
   a tinted #EDF4FF card — NOT by full-bleed tint bands per level (the earlier
   portworx-derived treatment). Every row is a 24px line box; siblings sit 16px
   apart, a parent row sits 20px above its children, and the last child of any
   expanded group gets 12px of trailing space. */
.site-mobile-nav__accordion {
	/* 24px below the head bar; 20px gutters give the 320-wide content column. */
	padding: 24px 20px 0;
	flex: 1;
}

/* Top-level rows are the only ones with a divider: a 1px #CFF1FF hairline
   floating 12px clear of the block above and below it. */
.site-mobile-nav__item--l1 {
	padding: 10px 0 22px;
	border-bottom: 1px solid #cff1ff;
	/* 11 not 12: Figma's divider is a zero-height line node, so its 1px stroke
	   costs no layout there but does here. */
	margin-bottom: 11px;
}

.site-mobile-nav__item--l1:last-child {
	padding-bottom: 10px;
	border-bottom: 0;
	margin-bottom: 0;
}

.site-mobile-nav__summary {
	width: 100%;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 24px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font: 500 14px/20px var(--tp-font-body);
	color: #131313;
	transition: color 0.2s ease;
}

/* Branch rows below the first level read as 600 while collapsed and drop to
   500 + accent once open — that inversion is what the Figma component set
   does, not an oversight here. */
.site-mobile-nav__summary--l2,
.site-mobile-nav__summary--l3 {
	font-weight: 600;
}

.site-mobile-nav__item.is-open > .site-mobile-nav__summary {
	font-weight: 500;
	color: #1977f3;
}

/* Figma draws the chevron as a 12.73x7.78 glyph inside a 24px hit box whose
   right edge is flush with the column — so the glyph itself lands 5.64px in. */
.site-mobile-nav__summary .site-header__chevron {
	width: 12.73px;
	height: 7.78px;
	margin-right: 5.64px;
	flex: 0 0 auto;
}

/* The open third-level row uses the larger 27px component variant. */
.site-mobile-nav__item--l3.is-open > .site-mobile-nav__summary {
	min-height: 27px;
}

.site-mobile-nav__item--l3.is-open > .site-mobile-nav__summary .site-header__chevron {
	width: 14.32px;
	height: 8.75px;
	margin-right: 6.34px;
}

.site-mobile-nav__item.is-open > .site-mobile-nav__summary .site-header__chevron {
	transform: rotate(180deg);
}

/* Grid-rows collapse — same 0fr/1fr technique as .mega-menu__children, so
   the panel slides open/closed instead of a native <details> element's
   instant snap (matches portworx.com's animated mobile submenu). */
.site-mobile-nav__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--tp-speed-spring) var(--tp-ease-spring);
}

.site-mobile-nav__item.is-open > .site-mobile-nav__panel {
	grid-template-rows: 1fr;
}

/* min-height:0 is load-bearing: without it the grid item keeps its intrinsic
   height and the 0fr row never actually collapses. VERTICAL padding is
   deliberately zero here too — a stretched grid item's padding renders even at
   0 track height, which shows as a sliver under every closed section. The
   20px/12px breathing room therefore rides on the first/last child's margins,
   which the 0-height overflow:hidden box clips away cleanly. */
.site-mobile-nav__panel-inner {
	overflow: hidden;
	min-height: 0;
	padding: 0 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-mobile-nav__panel-inner > :first-child {
	margin-top: 20px;
}

.site-mobile-nav__panel-inner > :last-child {
	margin-bottom: 12px;
}

/* The open branch — and only the open branch — sits in a tinted card. The
   1px edge is an inset shadow rather than a border so it does not eat into the
   box and shift the 46px / 314px content edges Figma specifies. */
.site-mobile-nav__item--l2.is-open {
	background: #edf4ff;
	box-shadow: inset 0 0 0 1px #96bfff;
	border-radius: 7px;
	/* Asymmetric on purpose: Figma's inner column stops 26px short of the card's
	   right edge while starting 10px in from the left. */
	padding: 10px 26px 10px 10px;
}

/* Leaf rows — the actual links. Same 24px line box as a summary row so a list
   mixing toggles and links reads as one evenly-pitched column. */
.site-mobile-nav__leaf {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	padding: 0;
	color: #131313;
	font: 600 14px/20px var(--tp-font-body);
}

.site-mobile-nav__leaf:hover {
	color: var(--tp-blue);
}

.site-mobile-nav__footer {
	padding: 20px;
	display: flex;
	align-items: center;
}

/* Figma: 320x44 pill, radius 59, 16/24 bold on #1977F3. */
.site-mobile-nav__cta {
	flex: 1;
	justify-content: center;
	height: 44px;
	padding: 0 16px;
	border-radius: 59px;
	background: #1977f3;
	color: var(--tp-white);
	font: 700 16px/24px var(--tp-font-body);
}

html.tp-no-scroll,
html.tp-no-scroll body {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Responsive (Figma reference widths: 1440 / 1024 / 768 / 425 / 375 / 320)
 * ------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.site-header__nav {
		display: none;
	}

	.site-header__hamburger {
		display: flex;
	}

	.site-header__inner {
		padding: 0 32px;
	}
}

@media (max-width: 768px) {
	:root {
		--tp-header-height: 84px;
		/* -16, not -30: 54px would leave only ~10px around the 33px logo. */
		--tp-header-height-scrolled: 68px;
	}

	.site-header__inner {
		padding: 0 24px;
	}

	/* Below 1024 the pill-morph (54px circle -> 719px bar growing sideways
	   off the CTA's left edge) has no CTA to anchor against once it's hidden
	   at 680px, and reads as the wrong gesture on a touch header anyway.
	   Swap it for a full-width panel that drops straight down from the
	   toggle, on the same slide the mobile drawer already uses
	   (--tp-speed/--tp-ease) so search and drawer feel like one motion
	   language rather than two unrelated animations. Logo/hamburger live in
	   .site-header__inner, untouched by any of this — nothing here hides them. */
	.site-search {
		top: var(--tp-header-height);
		bottom: auto;
		left: 24px;
		right: 24px;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity var(--tp-speed) var(--tp-ease),
			transform var(--tp-speed) var(--tp-ease),
			visibility 0s linear var(--tp-speed);
	}

	.site-search.is-open {
		visibility: visible;
		transform: translateY(0);
		transition: opacity var(--tp-speed) var(--tp-ease),
			transform var(--tp-speed) var(--tp-ease);
	}

	/* The width-morph is what makes the desktop pill an "expand"; here the
	   form is always full width and the container above does the only
	   motion (slide + fade), so the morph transition is dropped outright. */
	.site-search__form,
	.site-search.is-open .site-search__form,
	.site-header.is-scrolled .site-search__form,
	.site-header.is-scrolled .site-search:not(.is-open) .site-search__form,
	.site-header.is-scrolled .site-search.is-open .site-search__form {
		width: 100%;
		height: 54px;
		box-shadow: 0 12px 28px rgba(10, 16, 40, 0.18);
		transition: none;
	}

	.site-search__input,
	.site-search.is-open .site-search__input {
		opacity: 1;
		transition: none;
	}

	.site-search__close,
	.site-search.is-open .site-search__close {
		opacity: 1;
		transition: color var(--tp-speed-fast) var(--tp-ease);
	}

	/* Desktop collapses .site-header__lang-search (JP link + search toggle)
	   because the pill visually replaces it in the same spot. The mobile
	   panel drops below the header instead, so nothing needs to make room —
	   keep the JP flag and the toggle visible and tappable the whole time
	   search is open. */
	.site-header.is-search-open .site-header__lang-search {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	/* The toggle stays on screen the whole time the panel below is open (see
	   above), so it needs its own "active" state — otherwise it just sits
	   there looking idle while it's actually the close control. Reuses the
	   existing hover treatment rather than inventing a new one. */
	.site-header__search-toggle[aria-expanded="true"] {
		color: #383838;
		background: #ededed;
	}

	.site-header__logo-mark {
		width: 176px;
		height: 33px;
	}

	.site-header__cta {
		padding: 10px 20px;
		font-size: 13px;
	}
}

/* Logo (176) + JP (100) + search (54) + CTA (151) + hamburger (28) + the 24px
   and 20px gaps need ~643px of viewport. Below that the row overflowed and the
   hamburger was pushed clean off the right edge, so the menu was unreachable on
   every phone — the drawer existed but nothing could open it.

   FR-004 pins the JP connector into the bar "at all times" and the menu
   obviously can't go, so the CTA is the control that steps out here: it is
   already the first thing in the drawer's footer, one tap away. Above this
   width the full row fits and the CTA stays in the bar (FR-006). */
@media (max-width: 680px) {
	.site-header__cta {
		display: none;
	}

	/* Actions are now JP + search + hamburger only; tighten Figma's 20px
	   CTA gap so all three still clear 320px. */
	.site-header__actions {
		gap: 12px;
	}
}

@media (max-width: 480px) {
	:root {
		--tp-header-height: 72px;
		/* -12 only. The scrolled search toggle is 42px and the logo 33px, so
		   60px is the smallest bar that still reads as a header rather than a
		   strip of clipped icons. */
		--tp-header-height-scrolled: 60px;
	}

	.site-header__inner {
		padding: 0 16px;
		gap: 12px;
	}

	.site-search {
		left: 16px;
		right: 16px;
	}

	.site-header__jp-label {
		display: none;
	}

	/* Padding stays OFF the form. It used to carry `0 44px 0 16px` on top of
	   the input's own `0 44px 0 24px`, so the two stacked: at 320px the 288px
	   pill lost 60px to the form and another 68px to the input, leaving a
	   160px text slot — a typed query scrolled off the left edge while ~50px
	   of empty pill sat between the text and the X. The indent it was buying
	   now lives on the input alone, below. */
	.site-search__form {
		max-width: none;
		padding: 0;
	}

	/* 46px right clears the close button (14px inset + 24px glyph + 8px gap);
	   20px left balances that against the pill's left edge. Text slot at
	   320px goes 160px -> 222px. */
	.site-search__input {
		padding: 0 46px 0 20px;
		font-size: 16px;
		line-height: 1.4;
	}

	.site-search__close {
		right: 14px;
	}
}

@media (max-width: 360px) {
	.site-header__logo-mark {
		width: 132px;
		height: 25px;
	}

	/* `.site-header.is-scrolled .site-header__logo-mark` outranks the rule
	   above on specificity, so without this the logo would GROW from 132 to
	   165px on scroll at 320px and shove the hamburger off the row. */
	.site-header.is-scrolled .site-header__logo-mark {
		width: 124px;
		height: 23px;
	}

	.site-header__actions {
		gap: 6px;
	}

	/* 320px: logo 132 + JP + search + hamburger 28 + gaps overflowed the
	   288px inside the 16px padding by ~28px in practice (measured via
	   rendered getBoundingClientRect, not just adding up the assumed
	   dimensions above) — the JP pill's 12px side padding was the biggest
	   single offender once its label is hidden and it's carrying nothing but
	   the flag icon. Trimmed pill padding + tightened gaps + a smaller search
	   circle claws that back so the hamburger stays fully on-screen. */
	.site-header__inner {
		gap: 4px;
	}

	.site-header__jp {
		padding: 0 6px;
	}

	.site-header__search-toggle {
		width: 36px;
		height: 36px;
		padding: 7px;
	}

	/* 18px glyph x 1.1969. */
	.site-header__search-toggle svg {
		width: 21.54px;
		height: 21.54px;
	}
}

/* ---------------------------------------------------------------------
 * Mobile bar — Figma node 2215:1765 (Mobile > homepage frame, header).
 *
 * Deliberately placed AFTER the 480/360 blocks above: those set
 * --tp-header-height to 72px and shrink the logo for the old JP + search +
 * hamburger row, and equal-specificity rules resolve by source order. This
 * block is the mobile header spec, so it has to be the last word.
 *
 * The bar is 360x79 filled #07100D with a 48px content row centred in it:
 * logo 155x29 at x=16, then the search and hamburger GLYPH centres at x=278
 * and x=329.5 in a 360 frame. Those centres are what the odd gap/padding
 * numbers below reproduce — they are anchored to the right edge, so they hold
 * at 320 and 425 too, which the fixed 360-wide Figma frame does not tell us.
 * ------------------------------------------------------------------- */

@media (max-width: 680px) {
	:root {
		--tp-header-height: 79px;
	}

	.site-header {
		background: #07100d;
	}

	/* Figma 2215:1765 gives the mobile bar exactly ONE fill — #07100D, fully
	   opaque, `effects: []` — and defines no scrolled variant, so the colour
	   must not move as the page scrolls. It was moving: the desktop
	   `.site-header.is-scrolled` rule near the top of this file is 0,2,0 and
	   therefore outranks the 0,1,0 `.site-header` fill above, so scrolling on
	   a phone swapped the bar to rgba(10,28,77,.9) navy and added a shadow.
	   Restate the Figma fill at equal specificity here and drop the desktop
	   chrome with it — the shadow isn't in the design, and the backdrop blur
	   is dead weight behind an opaque fill. */
	.site-header.is-scrolled {
		background: #07100d;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Right inset lands the hamburger BARS' right edge on Figma's 339.823:
	   the 48px tap target sits at x=305 with the 22.5882 glyph frame inset
	   13.1758 into it, and the bars occupy 0.9412..21.6471 of that frame, so
	   305 + 13.1758 + 21.6471 = 339.823, i.e. 360 - 339.823 = 20.177. */
	.site-header__inner {
		padding: 0 20.177px 0 16px;
	}

	.site-header__logo-mark,
	.site-header.is-search-open .site-header__logo-mark {
		width: 155px;
		height: 29px;
	}

	/* Figma's mobile bar carries logo + search + hamburger only. See the note
	   in the session summary: FR-004 wants the JP connector in the bar at all
	   times, and this drops it below 680px. */
	.site-header__jp {
		display: none;
	}

	/* The search element is now the PADDED 29.6283 box, not the bare glyph, so
	   the gap shrinks by the 2.4372 of padding it gained on that side. Figma:
	   bars start at 319.117 and the padded search box ends at 293.0, so the
	   gap is 26.117. That still puts the two GLYPH centres 51.28px apart
	   (24.754/2 + 2.4372 + 26.117 + 20.7059/2), which is what the design
	   actually specifies. */
	.site-header__actions {
		gap: 26.117px;
	}

	/* Bare glyph, no hit circle — the mobile design has no chip behind it.
	   29.6283 is Figma frame 2215:1788; the glyph inside it renders at
	   24.754 (2215:1789), matching the design exactly. */
	/* This wrapper exists for the DESKTOP pill-morph: it clips a max-width
	   collapse so the CTA can slide into the JP link's place. Below 680 the JP
	   link is hidden and there is no morph, so the clip does nothing but damage
	   — it was cutting the hover chip down to a rectangle (which is what made
	   the hover read as a white SQUARE) and, because the toggle carries a
	   -2px margin for the JP pill overlap, the wrapper shrink-wrapped to
	   27.63px and shaved 2px off the button as well. Drop both here. */
	.site-header__lang-search {
		overflow: visible;
	}

	.site-header__search-toggle,
	.site-header__search-toggle[aria-expanded="true"] {
		position: relative;
		margin-left: 0;
		width: 29.6283px;
		height: 29.6283px;
		padding: 0;
		background: none;
		border-radius: 0;
		color: var(--tp-white);
	}

	.site-header__search-toggle svg {
		position: relative;
		z-index: 1;
		width: 29.6283px;
		height: 29.6283px;
	}

	/* The base `:hover` rule paints `background: #ededed`, but this breakpoint
	   sets `border-radius: 0` — so hovering produced a hard 29.63px WHITE
	   SQUARE with the glyph jammed against its edges. Kill that fill here
	   (`:hover` outranks the plain-class rule above, so it has to be undone at
	   equal specificity) and paint a round chip instead. */
	.site-header__search-toggle:hover,
	.site-header__search-toggle:focus-visible {
		background: none;
	}

	/* The chip is an overflowing pseudo-element rather than a bigger button, so
	   the 29.6283 layout box — and every Figma measurement derived from it
	   above — is untouched. 54px / 50% is the same chip the desktop component
	   uses (Figma 1788:4623 ON_HOVER -> 1788:4616), which is the right size
	   here because the glyph is the same 24.754 at both breakpoints. It clears
	   the hamburger bars by ~14px at every width, since both are anchored to
	   the right edge.

	   Gated on `(hover: hover)`: on a touchscreen `:hover` sticks after a tap,
	   which would strand a grey circle in the bar until the next tap. */
	.site-header__search-toggle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 54px;
		height: 54px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: #ededed;
		opacity: 0;
		transition: opacity var(--tp-speed-fast) var(--tp-ease);
	}

	/* Open search: the toggle is the close control and stays on the chip, so
	   the glyph has to invert against it the same way it does on hover. */
	.site-header__search-toggle[aria-expanded="true"]::before {
		opacity: 1;
	}

	.site-header__search-toggle[aria-expanded="true"] {
		color: #383838;
	}

	@media (hover: hover) {
		.site-header__search-toggle:hover::before,
		.site-header__search-toggle:focus-visible::before {
			opacity: 1;
		}

		.site-header__search-toggle:hover,
		.site-header__search-toggle:focus-visible {
			color: #383838;
		}
	}

	/* Figma 2215:1782 is a 22.5882 frame, but the three bars inside it only
	   occupy 20.7059 x 18.8235 (x 0.9412..21.6471, y 1.8824..20.7059) — the
	   rest is padding. This element IS the bars box, so it takes those inner
	   numbers, and the padding is absorbed by the inset above. Bars are
	   2.3529 tall with fully rounded caps, 5.8824 apart. */
	.site-header__hamburger {
		width: 20.7059px;
		height: 18.8235px;
		gap: 5.8824px;
	}

	.site-header__hamburger span {
		height: 2.3529px;
		border-radius: 1.1765px;
	}

	/* 8.2353 = the bar centre-to-centre pitch (2.3529 + 5.8824). */
	.site-header__hamburger.is-active span:nth-child(1) {
		transform: translateY(8.2353px) rotate(45deg);
	}

	.site-header__hamburger.is-active span:nth-child(3) {
		transform: translateY(-8.2353px) rotate(-45deg);
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion — every header transition resolves instantly. The
 * open/closed states themselves are unchanged, so the search pill, the
 * mega-menu and the drawer all still work, they just don't travel.
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__inner,
	.site-header.is-search-open .site-header__inner,
	.site-header__nav,
	.site-header__menu-trigger,
	.site-header__menu-trigger::after,
	.site-header__chevron,
	.site-header__lang-search,
	.site-header__jp,
	.site-header__search-toggle,
	.site-header__hamburger span,
	.site-search,
	.site-search__form,
	.site-search__input,
	.site-search__close,
	.site-mobile-nav,
	.site-mobile-nav-backdrop {
		transition: none;
	}

	.mega-menu,
	.mega-menu.is-open {
		transform: none;
		transition: none;
	}
}