/**
 * Virgo — site header
 *
 * Two levels on desktop (a quiet utility bar plus the main bar), one level on
 * smaller screens with everything else moved into the drawer. Markup comes from
 * the virgo/site-header block.
 *
 * Heights are declared as custom properties because the fixed shell has to be
 * offset by exactly the same amount in layout.css, and the two must never drift.
 */

:root {
	--virgo-topbar-h: 0px;
	--virgo-bar-h: 64px;
	/* The second header row exists only in the narrow-desktop band. */
	--virgo-searchrow-h: 0px;
	--virgo-shell-h: calc(var(--virgo-topbar-h) + var(--virgo-bar-h) + var(--virgo-searchrow-h));
}

/* Desktop navigation starts at 1024px, not 992px: below that the six top-level
   items, the logo, the search field and the CTA cannot share a row without
   something being pushed off an edge, so the drawer takes over instead. */
@media (min-width: 64rem) {
	:root {
		--virgo-topbar-h: 38px;
		--virgo-bar-h: 74px;
	}
}

/* 1024–1279px: navigation keeps the first row, search moves to its own. */
@media (min-width: 64rem) and (max-width: 79.999rem) {
	:root {
		--virgo-searchrow-h: 52px;
	}
}

/* -------------------------------------------------------------------------
   Shell
   ---------------------------------------------------------------------- */

.virgo-header-shell {
	position: fixed;
	inset-inline: 0;
	top: 0;
	/* Stacking order comes from the scale in base.css: float 90 < drawer 95
	   < header 100 < overlay 120. Nothing here invents a number. */
	z-index: var(--z-header);
}

/* -------------------------------------------------------------------------
   Utility bar
   ---------------------------------------------------------------------- */

.virgo-topbar {
	display: none;
	height: var(--virgo-topbar-h);
	background-color: #04040a;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.8125rem;
}

@media (min-width: 64rem) {
	.virgo-topbar {
		display: block;
	}
}

.virgo-topbar__inner {
	height: 100%;
	width: var(--virgo-content-shell);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.virgo-topbar__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.virgo-topbar__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex: none;
}

.virgo-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--virgo-transition);
}

.virgo-topbar__link:hover,
.virgo-topbar__link:focus-visible {
	color: #fff;
}

.virgo-topbar__link svg {
	flex: none;
	opacity: 0.85;
}

.virgo-topbar__social {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0 0.35rem;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.virgo-topbar__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 6px;
	color: var(--wp--preset--color--muted);
	transition: color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-topbar__social a:hover,
.virgo-topbar__social a:focus-visible {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
   Main bar
   ---------------------------------------------------------------------- */

.virgo-header {
	height: calc(var(--virgo-bar-h) + var(--virgo-searchrow-h));
	display: flex;
	align-items: center;
	background-color: rgba(6, 6, 13, 0.78);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: background-color var(--virgo-transition), border-color var(--virgo-transition);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.virgo-header {
		background-color: rgba(6, 6, 13, 0.97);
	}
}

.virgo-header-shell.is-scrolled .virgo-header {
	background-color: rgba(6, 6, 13, 0.94);
	border-bottom-color: rgba(255, 255, 255, 0.09);
}

/* Grid rather than flex, so the search field can be moved to a second row at
   narrow desktop widths without duplicating the markup. */
.virgo-header__inner {
	width: var(--virgo-content-shell);
	margin-inline: auto;
	display: grid;
	grid-template-areas: "brand mobile";
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: center;
	column-gap: 1rem;
}

.virgo-header__brand {
	grid-area: brand;
	min-width: 0;
	z-index: 2;
}

.virgo-header__nav {
	grid-area: nav;
	display: none;
	justify-content: center;
	min-width: 0;
}

.virgo-header__search {
	grid-area: search;
	display: none;
	min-width: 0;
}

.virgo-header__actions {
	grid-area: cta;
	display: none;
	align-items: center;
	gap: 0.5rem;
}

.virgo-header__mobile {
	grid-area: mobile;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Narrow desktop: brand | nav | CTA on row one, search alone on row two. */
@media (min-width: 64rem) {
	.virgo-header__inner {
		grid-template-areas:
			"brand nav cta"
			"search search search";
		grid-template-columns: auto 1fr auto;
		justify-content: stretch;
		align-content: center;
		row-gap: 0.35rem;
	}

	.virgo-header__nav,
	.virgo-header__actions {
		display: flex;
	}

	.virgo-header__search {
		display: block;
		justify-self: stretch;
	}

	.virgo-header__mobile {
		display: none;
	}
}

/* Wide desktop: everything on one row. */
@media (min-width: 80rem) {
	.virgo-header__inner {
		grid-template-areas: "brand nav search cta";
		grid-template-columns: auto 1fr auto auto;
		row-gap: 0;
	}

	.virgo-header__search {
		justify-self: end;
		width: clamp(16.25rem, 22vw, 21.25rem); /* 260px – 340px */
	}
}

/* -------------------------------------------------------------------------
   Icon buttons
   ---------------------------------------------------------------------- */

.virgo-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--virgo-radius-md);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	flex: none;
	transition: background-color var(--virgo-transition), border-color var(--virgo-transition);
}

.virgo-iconbtn:hover,
.virgo-iconbtn:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.26);
}

.virgo-iconbtn[aria-expanded="true"] {
	background-color: rgba(139, 92, 246, 0.20);
	border-color: rgba(139, 92, 246, 0.45);
}

/* -------------------------------------------------------------------------
   Search field + suggestions

   A real input, not a magnifying-glass button. Moderate radius rather than a
   circle, a visible icon inside, and a suggestion list anchored beneath it.
   ---------------------------------------------------------------------- */

.virgo-search {
	position: relative;
	width: 100%;
}

.virgo-search__form {
	margin: 0;
}

.virgo-search__field {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	/* Right padding is small because the submit button carries its own. */
	padding: 0 0.3rem 0 0.7rem;
	min-height: 2.625rem; /* 42px — the field itself, inside a 74px bar. */
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--virgo-radius-md);
	background-color: rgba(255, 255, 255, 0.05);
	transition: border-color var(--virgo-transition), box-shadow var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-search__field:hover {
	border-color: rgba(255, 255, 255, 0.28);
}

.virgo-search__field:focus-within {
	border-color: var(--wp--preset--color--violet);
	background-color: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.28);
}

.virgo-search__icon {
	display: inline-flex;
	flex: none;
	color: rgba(255, 255, 255, 0.62);
}

.virgo-search__input {
	flex: 1 1 auto;
	min-width: 0;
	background: none;
	border: 0;
	color: #fff;
	/* 16px stops iOS zooming the viewport when the field takes focus. */
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.5rem 0;
	appearance: none;
}

.virgo-search__input:focus {
	outline: none;
}

.virgo-search__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

/* The native clear affordance is replaced by our own, which we can position
   and which stays visible against a dark field. */
.virgo-search__input::-webkit-search-cancel-button,
.virgo-search__input::-webkit-search-decoration {
	appearance: none;
	display: none;
}

.virgo-search__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--virgo-transition), color var(--virgo-transition);
}

.virgo-search__clear:hover,
.virgo-search__clear:focus-visible {
	background-color: rgba(255, 255, 255, 0.20);
	color: #fff;
}

.virgo-search__clear[hidden] {
	display: none;
}

/*
 * The submit control used to carry the brand gradient, which put a second
 * full-strength call to action a few pixels from "Start a project". Search is
 * a utility: it gets a restrained icon treatment and the CTA keeps the only
 * gradient in the bar. The accessible name is unchanged and still visible to
 * assistive tech through the label span.
 */
.virgo-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: calc(var(--virgo-radius-md) - 4px);
	background: rgba(255, 255, 255, 0.10);
	background-image: none;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition: background-color var(--virgo-transition), color var(--virgo-transition);
}

.virgo-search__submit:hover,
.virgo-search__submit:focus-visible {
	background: rgba(255, 255, 255, 0.20);
	color: #fff;
}

/* The label stays in the accessibility tree; the glyph carries it visually. */
.virgo-search__submit-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Suggestion list ---- */

.virgo-search__panel {
	position: absolute;
	z-index: var(--z-overlay);
	top: calc(100% + 0.4rem);
	left: 0;
	right: 0;
	max-height: min(26rem, calc(100vh - var(--virgo-shell-h) - 2rem));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.35rem;
	background-color: rgba(14, 14, 26, 0.99);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--virgo-radius-lg);
	box-shadow: var(--elev-overlay);
}

.virgo-search__panel[hidden] {
	display: none;
}

.virgo-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-search__group {
	padding: 0.55rem 0.65rem 0.3rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.virgo-search__option {
	display: block;
	padding: 0.5rem 0.65rem;
	border-radius: var(--virgo-radius-md);
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	cursor: pointer;
}

.virgo-search__option:hover,
.virgo-search__option.is-active {
	background-color: rgba(139, 92, 246, 0.22);
	color: #fff;
}

.virgo-search__option-title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
}

.virgo-search__option-kind {
	display: inline-block;
	margin-top: 0.25rem;
	padding: 0.08rem 0.45rem;
	border-radius: var(--virgo-radius-pill);
	background-color: rgba(255, 255, 255, 0.12);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.virgo-search__option-excerpt {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.62);
}

.virgo-search__empty {
	padding: 0.85rem 0.65rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
}

/* On a phone the submit label is the only thing that has to give. */
@media (max-width: 26rem) {
	.virgo-search__submit {
		padding: 0 0.6rem;
	}
}

/* -------------------------------------------------------------------------
   Desktop menu
   ---------------------------------------------------------------------- */

.virgo-menu,
.virgo-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-menu {
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.virgo-menu > li {
	position: relative;
}

.virgo-menu > li > a,
.virgo-menu > li > .virgo-menu__label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: var(--virgo-radius-pill);
	background: none;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-menu > li > a:hover,
.virgo-menu > li > .virgo-menu__label:hover,
.virgo-menu > li:focus-within > a,
.virgo-menu > li:focus-within > .virgo-menu__label {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.06);
}

.virgo-menu > li.current-menu-item > a,
.virgo-menu > li.current-menu-ancestor > a,
.virgo-menu > li.current-page-ancestor > a,
.virgo-menu > li.current-menu-ancestor > .virgo-menu__label,
.virgo-menu > li.current-page-ancestor > .virgo-menu__label {
	color: #fff;
}

/* Active indicator — a short brand rule rather than an underline. */
.virgo-menu > li.current-menu-item > a::after,
.virgo-menu > li.current-menu-ancestor > a::after,
.virgo-menu > li.current-page-ancestor > a::after,
.virgo-menu > li.current-menu-ancestor > .virgo-menu__label::after,
.virgo-menu > li.current-page-ancestor > .virgo-menu__label::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: -0.1rem;
	height: 2px;
	border-radius: 2px;
	background: var(--virgo-brand-gradient);
}

.virgo-menu__caret {
	width: var(--icon-chevron);
	height: var(--icon-chevron);
	flex: none;
	transition: transform var(--virgo-transition);
	opacity: 0.7;
}

.virgo-menu > li[data-open="true"] .virgo-menu__caret {
	transform: rotate(180deg);
}

/* Dropdown panel */
.virgo-submenu {
	position: absolute;
	top: calc(100% + 0.55rem);
	left: 50%;
	transform: translate(-50%, -6px);
	min-width: 17rem;
	max-width: min(30rem, calc(100vw - 2rem));
	padding: 0.5rem;
	background-color: rgba(14, 14, 26, 0.99);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--virgo-radius-lg);
	box-shadow: var(--elev-overlay);
	z-index: var(--z-overlay);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--virgo-transition), transform var(--virgo-transition), visibility var(--virgo-transition);
	max-height: calc(100vh - var(--virgo-shell-h) - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* A long list becomes two columns rather than a very tall panel. */
/* Superseded by the single-column treatment further down; kept only for the
   panel box itself, with no fixed floor. */
.virgo-submenu--wide {
	min-width: 0;
	max-width: min(44rem, calc(100vw - 2rem));
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.1rem;
}

.virgo-menu > li[data-open="true"] > .virgo-submenu,
.virgo-menu > li:hover > .virgo-submenu,
.virgo-menu > li:focus-within > .virgo-submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

/* Keep a wide panel from running off the right edge of the viewport. */
.virgo-menu > li:nth-last-child(-n+3) > .virgo-submenu--wide {
	left: auto;
	right: 0;
	transform: translate(0, -6px);
}

.virgo-menu > li:nth-last-child(-n+3)[data-open="true"] > .virgo-submenu--wide,
.virgo-menu > li:nth-last-child(-n+3):hover > .virgo-submenu--wide,
.virgo-menu > li:nth-last-child(-n+3):focus-within > .virgo-submenu--wide {
	transform: translate(0, 0);
}

/* Bridge the gap so the pointer can travel from trigger to panel. */
.virgo-menu > li.has-submenu::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 100%;
	height: 0.65rem;
}

.virgo-submenu a {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--virgo-radius-md);
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color var(--virgo-transition), color var(--virgo-transition);
}

.virgo-submenu a:hover,
.virgo-submenu a:focus-visible {
	background-color: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.virgo-submenu .virgo-submenu__desc {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.virgo-submenu li.current-menu-item > a {
	background-color: rgba(139, 92, 246, 0.14);
	color: #fff;
}

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

.virgo-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--virgo-radius-md);
	color: #fff;
	cursor: pointer;
	z-index: 2;
	flex: none;
	transition: background-color var(--virgo-transition), border-color var(--virgo-transition);
}

.virgo-burger:hover {
	background-color: rgba(255, 255, 255, 0.07);
}

.virgo-burger__box {
	position: relative;
	width: 1.15rem;
	height: 0.75rem;
	display: block;
}

.virgo-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--virgo-transition), opacity var(--virgo-transition), top var(--virgo-transition);
}

.virgo-burger__box span:nth-child(1) { top: 0; }
.virgo-burger__box span:nth-child(2) { top: calc(50% - 0.75px); }
.virgo-burger__box span:nth-child(3) { top: calc(100% - 1.5px); }

.virgo-burger[aria-expanded="true"] .virgo-burger__box span:nth-child(1) {
	top: calc(50% - 0.75px);
	transform: rotate(45deg);
}

.virgo-burger[aria-expanded="true"] .virgo-burger__box span:nth-child(2) {
	opacity: 0;
}

.virgo-burger[aria-expanded="true"] .virgo-burger__box span:nth-child(3) {
	top: calc(50% - 0.75px);
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
   Mobile drawer
   ---------------------------------------------------------------------- */

.virgo-drawer {
	position: fixed;
	inset: var(--virgo-shell-h) 0 0;
	z-index: var(--z-drawer);
	background-color: rgba(6, 6, 13, 0.99);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: clamp(1.25rem, 5vw, 2rem) var(--virgo-gutter) calc(2.5rem + env(safe-area-inset-bottom));
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
	transition: opacity var(--virgo-transition), transform var(--virgo-transition), visibility var(--virgo-transition);
}

.virgo-drawer[hidden] {
	display: none;
}

.virgo-drawer[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (min-width: 64rem) {
	.virgo-drawer {
		display: none;
	}
}

body.virgo-nav-open {
	overflow: hidden;
}

.virgo-drawer__menu,
.virgo-drawer__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-drawer__menu > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.virgo-drawer__menu > li > a,
.virgo-drawer__menu > li > .virgo-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.95rem 0.25rem;
	background: none;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	/* Comfortable touch target regardless of text length. */
	min-height: 3rem;
}

.virgo-drawer__toggle .virgo-menu__caret {
	width: calc(var(--icon-chevron) + 2px);
	height: calc(var(--icon-chevron) + 2px);
	flex: none;
}

.virgo-drawer__menu > li[data-open="true"] .virgo-menu__caret {
	transform: rotate(180deg);
}

.virgo-drawer__sub {
	display: none;
	padding: 0 0 0.85rem 0.25rem;
}

.virgo-drawer__menu > li[data-open="true"] > .virgo-drawer__sub {
	display: block;
}

.virgo-drawer__sub a {
	display: block;
	padding: 0.6rem 0;
	font-size: 1rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	min-height: 2.75rem;
}

.virgo-drawer__sub a:hover,
.virgo-drawer__sub a:focus-visible {
	color: #fff;
}

.virgo-drawer__sub li.current-menu-item > a {
	color: var(--wp--preset--color--violet-soft);
}

.virgo-drawer__actions {
	margin-top: 1.75rem;
	display: grid;
	gap: 0.65rem;
}

.virgo-drawer__actions .virgo-btn {
	width: 100%;
}

.virgo-drawer__meta {
	margin-top: 2rem;
	padding-top: 1.35rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
	display: grid;
	gap: 0.5rem;
}

.virgo-drawer__meta p {
	margin: 0;
}

.virgo-drawer__meta a {
	color: inherit;
	text-decoration: none;
	word-break: break-word;
}

.virgo-drawer__meta a:hover {
	color: #fff;
}

/* rgba(255,255,255,.45) on #06060d is 4.46:1 — just under AA for 13px text. */
.virgo-drawer__note {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.58);
	line-height: 1.5;
}

.virgo-drawer__social {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.virgo-drawer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--virgo-radius-md);
	color: var(--wp--preset--color--muted);
	transition: color var(--virgo-transition), border-color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-drawer__social a:hover,
.virgo-drawer__social a:focus-visible {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.26);
	background-color: rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------------------
   Floating WhatsApp button
   Small, out of the reading column, and it steps aside whenever the drawer or
   the search panel is open so it can never sit on top of them.
   ---------------------------------------------------------------------- */

.virgo-wa-float {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: calc(1rem + env(safe-area-inset-bottom));
	z-index: var(--z-float);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background-color: #1faa53;
	color: #fff;
	box-shadow: 0 12px 30px -10px rgba(31, 170, 83, 0.6);
	transition: transform var(--virgo-transition), background-color var(--virgo-transition), opacity var(--virgo-transition);
}

.virgo-wa-float:hover,
.virgo-wa-float:focus-visible {
	background-color: #17914a;
	color: #fff;
	transform: translateY(-2px);
}

body.virgo-nav-open .virgo-wa-float,
body.virgo-search-open .virgo-wa-float {
	opacity: 0;
	pointer-events: none;
}

@media print {
	.virgo-wa-float,
	.virgo-header-shell {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   No-JavaScript fallback
   ---------------------------------------------------------------------- */

.virgo-noscript-nav {
	margin-left: 0.5rem;
}

@media (min-width: 64rem) {
	.virgo-noscript-nav {
		display: none;
	}
}

.no-js .virgo-burger {
	display: none;
}

/* -------------------------------------------------------------------------
   Admin bar offset
   ---------------------------------------------------------------------- */

body.admin-bar .virgo-header-shell {
	top: 32px;
}

body.admin-bar .virgo-drawer {
	inset-block-start: calc(var(--virgo-shell-h) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .virgo-header-shell {
		top: 46px;
	}

	body.admin-bar .virgo-drawer {
		inset-block-start: calc(var(--virgo-shell-h) + 46px);
	}
}

/* -------------------------------------------------------------------------
   Grouped mega panel
   Used when the Services item has a third level. Columns are driven by the
   number of groups, and the whole panel scrolls if it ever exceeds the
   viewport rather than disappearing off the bottom.
   ---------------------------------------------------------------------- */

/*
 * No min-width outside a media query. The desktop rules further down give
 * the panel its width, bounded by the header column, so nothing here can
 * declare a 700px floor that would apply at 320px if the panel ever rendered
 * there.
 */
.virgo-submenu--mega {
	display: grid;
	gap: 0.25rem 1.25rem;
	padding: 1rem;
	min-width: 0;
	max-width: min(60rem, calc(100vw - 2rem));
}

.virgo-submenu--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.virgo-submenu--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.virgo-submenu--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/*
 * Superseded by the bounded rule further down this file, which applies the
 * same two-column fallback only inside the desktop range where the panel is
 * actually on screen. This one also ran below 1024px, where the mega panel is
 * not rendered at all, and its min-width fought the new width cap.
 */

.virgo-megagroup {
	min-width: 0;
}

.virgo-megagroup__title {
	display: block;
	padding: 0.4rem 0.6rem;
	margin-bottom: 0.15rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-radius: var(--virgo-radius-sm);
	transition: color var(--virgo-transition), background-color var(--virgo-transition);
}

.virgo-megagroup__title:hover,
.virgo-megagroup__title:focus-visible {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.05);
}

.virgo-megagroup__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.virgo-megagroup__list a {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: var(--virgo-radius-md);
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color var(--virgo-transition), color var(--virgo-transition);
}

.virgo-megagroup__list a:hover,
.virgo-megagroup__list a:focus-visible {
	background-color: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.virgo-megagroup__list li.current-menu-item > a {
	background-color: rgba(139, 92, 246, 0.14);
	color: #fff;
}

/* Group labels inside the mobile drawer */
/* rgba(255,255,255,.42) on #06060d is 4.12:1, and this is 11px uppercase. */
.virgo-drawer__grouplabel {
	padding: 0.9rem 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.60);
}

.virgo-drawer__grouplabel:first-child {
	padding-top: 0;
}

/* -------------------------------------------------------------------------
   Header controls are native <button> elements. Page builders and themes
   commonly style bare `button`, which would turn these into filled pills and
   swallow the icon. These declarations are deliberately explicit.
   ---------------------------------------------------------------------- */

.virgo-header-shell .virgo-iconbtn,
.virgo-header-shell .virgo-burger {
	background-image: none;
	background-color: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 1.35rem;
	overflow: visible;
}

.virgo-header-shell .virgo-iconbtn:hover,
.virgo-header-shell .virgo-iconbtn:focus-visible {
	background-image: none;
	background-color: rgba(255, 255, 255, 0.10);
}

.virgo-header-shell .virgo-burger:hover,
.virgo-header-shell .virgo-burger:focus-visible {
	background-image: none;
	background-color: rgba(255, 255, 255, 0.10);
}

.virgo-header-shell .virgo-iconbtn[aria-expanded="true"] {
	background-image: none;
	background-color: rgba(139, 92, 246, 0.22);
	border-color: rgba(139, 92, 246, 0.5);
}

/* The icon itself must always be visible and correctly sized. */
.virgo-header-shell .virgo-iconbtn svg,
.virgo-header-shell .virgo-burger svg {
	display: block;
	width: var(--icon-action);
	height: var(--icon-action);
	flex: none;
	color: currentColor;
}

/* -------------------------------------------------------------------------
   Mobile bar — WhatsApp
   Below the laptop breakpoint the bar carries logo, WhatsApp and menu. Search
   moves into the drawer where a real input fits.
   ---------------------------------------------------------------------- */

.virgo-iconbtn--whatsapp {
	color: #25d366;
	border-color: rgba(37, 211, 102, 0.35);
	background-color: rgba(37, 211, 102, 0.10);
}

.virgo-iconbtn--whatsapp:hover,
.virgo-iconbtn--whatsapp:focus-visible {
	color: #fff;
	border-color: rgba(37, 211, 102, 0.7);
	background-color: rgba(37, 211, 102, 0.22);
}

.virgo-drawer__search {
	margin-bottom: 1.25rem;
}

.virgo-drawer__search .virgo-search__field {
	min-height: 2.875rem;
}

/* The drawer panel is inside a scrolling column, so the suggestion list is
   placed in flow rather than floated over the menu beneath it. */
.virgo-drawer__search .virgo-search__panel {
	position: static;
	margin-top: 0.4rem;
	max-height: 18rem;
}

/* =========================================================================
   Desktop mega menu — anchoring and rhythm

   The grouped Services panel is up to 800px wide and its trigger is the third
   of six items, so it sits left of centre. Centred on that trigger the panel
   ran off the left edge at 1024px and, on the two-row header, sat on top of
   the search field.

   The panel is now anchored to `.virgo-header__inner` instead: it is centred
   on the header's own content column, opens below the whole header (search row
   included) and is bounded by the same column every other element uses, so it
   cannot clip at any width.
   ========================================================================= */

.virgo-header__inner {
	position: relative;
}

@media (min-width: 64rem) {
	/*
	 * `position: static` on the trigger is what re-points the absolutely
	 * positioned panel at the header inner. Only the mega item does this;
	 * Businesses and Portfolio keep their small panels anchored to themselves.
	 */
	.virgo-menu > li.has-mega {
		position: static;
	}

	/* The li is no longer the containing block, so its hover bridge would
	   become a full-width strip across the header. The panel carries its own. */
	.virgo-menu > li.has-mega::after {
		content: none;
	}

	.virgo-submenu--mega {
		left: 50%;
		right: auto;
		top: calc(100% + 0.5rem);
		transform: translate(-50%, -6px);
		width: min(56rem, 100%);
		min-width: 0;
		max-width: 100%;
		padding: 1.25rem 1.25rem 1rem;
		gap: 0.35rem 1.5rem;
		box-shadow: var(--elev-overlay);
	}

	.virgo-menu > li.has-mega[data-open="true"] > .virgo-submenu--mega,
	.virgo-menu > li.has-mega:hover > .virgo-submenu--mega,
	.virgo-menu > li.has-mega:focus-within > .virgo-submenu--mega {
		transform: translate(-50%, 0);
	}

	/* The bridge, now inside the panel: the pointer can travel from the
	   trigger into the menu without crossing dead space. */
	.virgo-submenu--mega::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: -0.75rem;
		height: 0.75rem;
	}

	/* Column count is stated by the panel class and no longer needs a
	   min-width to force it, which is what made the panel oversized. */
	.virgo-submenu--cols-2,
	.virgo-submenu--cols-3,
	.virgo-submenu--cols-4 {
		min-width: 0;
	}
}

/* Below 1248px four columns of service names get tight; two rows of two read
   better than four cramped ones. */
@media (min-width: 64rem) and (max-width: 77.999rem) {
	.virgo-submenu--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: min(38rem, 100%);
	}
}

/* A group heading is a label, not a control: no hover affordance on it. */
.virgo-megagroup__title {
	padding: 0 0.6rem 0.35rem;
	margin-bottom: 0.35rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	cursor: default;
}

.virgo-megagroup__title:hover,
.virgo-megagroup__title:focus-visible {
	color: var(--wp--preset--color--muted);
	background-color: transparent;
}

.virgo-megagroup + .virgo-megagroup {
	/* Each group is its own column; the rule above is the only separator. */
	margin: 0;
}

.virgo-megagroup__list a {
	padding: 0.4rem 0.6rem;
	min-height: 2rem;
	display: flex;
	align-items: center;
}

/* =========================================================================
   Businesses and Portfolio panels

   Deliberately not mega menus — four and seven short links respectively. They
   share the spacing, chevron, hover, focus, border and shadow of every other
   panel so the three dropdowns read as one family.
   ========================================================================= */

.virgo-submenu {
	box-shadow: var(--elev-overlay);
}

.virgo-submenu:not(.virgo-submenu--mega) {
	padding: 0.4rem;
	min-width: 15rem;
}

.virgo-submenu:not(.virgo-submenu--mega) a {
	min-height: 2.5rem;
	justify-content: center;
}

/* Seven projects fit one column comfortably; two columns is what made the
   Portfolio panel wider than it needed to be. */
.virgo-submenu--wide {
	min-width: 20rem;
	max-width: min(24rem, calc(100vw - 2rem));
	grid-template-columns: 1fr;
	display: block;
}

/* =========================================================================
   Header hierarchy

   Logo -> navigation -> search -> Start a project, with the CTA loudest and
   search quietest. The CTA already carries the only gradient in the bar; the
   search field is toned down to sit below the navigation rather than beside
   it in weight.
   ========================================================================= */

.virgo-search__field {
	background-color: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.13);
}

.virgo-search__field:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.virgo-header__actions .virgo-btn--primary {
	padding-inline: 1.25rem;
}

/* The logo reads slightly larger without changing the bar height. */
.virgo-header__brand .virgo-logo__mark,
.virgo-header__brand img {
	transition: transform var(--virgo-transition);
}

/* =========================================================================
   Drawer refinements

   The drawer already had the right semantics. What it needed was room to
   breathe, a scrollable body on a short screen and a search field that is
   obviously the first thing in it.
   ========================================================================= */

.virgo-drawer {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.virgo-drawer[hidden] {
	display: none;
}

.virgo-drawer__search {
	position: sticky;
	top: 0;
	z-index: 2;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	background-color: rgba(6, 6, 13, 0.99);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.virgo-drawer__menu > li[data-open="true"] > .virgo-drawer__toggle {
	color: #fff;
}

.virgo-drawer__menu > li.current-menu-ancestor > .virgo-drawer__toggle,
.virgo-drawer__menu > li.current-menu-item > a {
	color: var(--wp--preset--color--violet-soft);
}

.virgo-drawer__sub {
	padding-bottom: 1rem;
}

.virgo-drawer__sub a {
	display: flex;
	align-items: center;
	padding-inline: 0.15rem;
	border-radius: var(--virgo-radius-sm);
}

@media (max-width: 22.5rem) {
	.virgo-drawer__menu > li > a,
	.virgo-drawer__menu > li > .virgo-drawer__toggle {
		font-size: 1.0625rem;
	}
}