/* =====================================================================
   Header — Orisa's header-1 (2.Orisa_development/src/views/partials/
   header-1.html; scss/layout/header/_header.scss + menu/_menu.scss): logo
   left, the page links centred in a frosted glass box with a hover
   dropdown, a grid-icon menu button right. Orisa's search button and
   dark-mode switch are deliberately not carried over. Markup: Navbar.astro.

   Every measured number is Orisa's own px — 20px bar padding, the 5px/8px
   glass box, 10px/24px links, the dropdown's 120% drop, 12px/18px items,
   the 8px arrow — px rather than rem for the usual reason: this page's root
   font-size is fluid. Palette is Minos's: off-white type and glass over the
   photo/charcoal behind the bar, the dropdown on this site's own elevated
   charcoal (#232a35, same as .menu2_bg below) with gold accents.

   Fixed, not Orisa's absolute: this navbar lives outside #smooth-content,
   so it can't scroll away with the page the way Orisa's does. navbar.js's
   .is-compact produces the same end state instead — past 100px of scroll
   the bar fades out and only the MENU pill is left, which is exactly what
   Orisa's page looks like once its own header has scrolled off.
   ===================================================================== */

/* pointer-events: none on the full-width fixed box, auto again on the real
   controls — without it the bar's empty space swallows clicks meant for
   whatever sits underneath it (the revealed footer's top row, most visibly;
   see footer.css). The menu box and dropdown need it back too, not just
   their links: the gaps between items would otherwise pass the pointer
   through, dropping :hover and snapping the dropdown shut mid-move. */
.u-navbar {
	position: fixed;
	inset: 0 0 auto;
	z-index: 888;
	padding: 20px 0;
	pointer-events: none;
}
.u-navbar a,
.u-navbar button,
.navbar_menu,
.navbar_submenu {
	pointer-events: auto;
}
/* A dark scrim behind the bar — the hero is a photograph, and nothing else
   guarantees the off-white type and glass box a dark enough ground there.
   Fades out well before the headline; over charcoal it is invisible. */
.u-navbar::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: 160px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 100%);
}
/* A wrapper under .container, not the flex row itself — .container carries
   base.css's clearfix pseudo-elements, which become real flex items on a
   flex box (same fix as every ported section). */
.navbar_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
/* flex: 1 1 0% on both ends — Orisa's col-xl-2 / col-xl-2 pair — so the menu
   between them is centred on the viewport, not on whatever width the logo
   and the button happen to leave over. */
.navbar_brand,
.navbar_right {
	display: flex;
	align-items: center;
	flex: 1 1 0%;
}
.navbar_right {
	justify-content: flex-end;
	gap: 12px;
}

/* ===== Logo ===== */
.navbar_logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vv-off-white);
	text-decoration: none;
}
/* Orisa's data-width="30" on its mark. */
.navbar_logo img {
	display: block;
	width: 30px;
	height: auto;
}
.navbar_logo_text {
	font-family: Jost, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* ===== The glass box (Orisa's .at-main-menu.menu-light) ===== */
.navbar_menu {
	padding: 5px 8px;
	border: 1px solid rgba(245, 242, 237, 0.3);
	background: rgba(245, 242, 237, 0.18);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.navbar_menu_list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.navbar_menu_item {
	position: relative;
	margin: 0;
}
/* The underline is Orisa's bgborder() mixin: two 1px background gradients,
   the second growing 0 → 100% from the left on hover. */
.navbar_menu_link {
	position: relative;
	display: inline-block;
	padding: 10px 24px;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-size:
		0 1px,
		0 1px;
	background-position:
		100% 100%,
		0 100%;
	background-repeat: no-repeat;
	transition:
		background-size 0.3s linear,
		background-color 0.4s ease,
		color 0.3s ease;
}
/* Orisa's hover bridge: an invisible box 20px taller than the link, so the
   pointer can cross the gap down to the dropdown (top: 120%) without ever
   leaving the <li> — without it the menu closes in that gap. */
.navbar_menu_link::before {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}
.navbar_menu_item:hover > .navbar_menu_link,
.navbar_menu_item:focus-within > .navbar_menu_link {
	background-size:
		0 1px,
		100% 1px;
}
.navbar_menu_link[aria-current="page"] {
	color: var(--vv-gold);
}

/* ===== Services dropdown ===== */
/* The small corner arrow is Orisa's own SVG data URI, filled off-white
   directly rather than its #0F0F0F + filter: invert(1). */
.has-dropdown > .navbar_menu_link::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 10px;
	width: 8px;
	height: 8px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5" viewBox="0 0 5 5" fill="none"><path d="M0.119881 4.0916L3.76201 0.14603C3.8265 0.0762058 3.912 0.0286966 4.00771 0.00950819C4.10343 -0.00968026 4.20505 0.000313791 4.29974 0.0382265C4.39443 0.0761392 4.47794 0.140268 4.5397 0.222507C4.60146 0.304746 4.63871 0.401402 4.64673 0.500256L4.96657 4.4493C4.97728 4.58185 4.93474 4.70892 4.8483 4.80257C4.76185 4.89622 4.63858 4.94877 4.50559 4.94867L0.543624 4.94521C0.444446 4.94511 0.345125 4.9157 0.258216 4.8607C0.171308 4.8057 0.100716 4.72759 0.0553628 4.63623C0.0100097 4.54486 -0.00806781 4.44436 0.00341617 4.34742C0.0149001 4.25048 0.0554298 4.16146 0.119881 4.0916Z" fill="%23F5F2ED"/></svg>');
	background-position: center;
	background-repeat: no-repeat;
}
.has-dropdown:hover > .navbar_menu_link,
.has-dropdown:focus-within > .navbar_menu_link {
	background-color: rgba(245, 242, 237, 0.2);
}
/* A fade and a short drop, NOT Orisa's scaleY-from-zero reveal. Scaling a box
   of text open vertically squashes every glyph in it on the way: caught at
   any point mid-transition the nine service names flatten into grey bars, and
   at 0.5s there is a lot of "mid-transition" to catch — which is exactly what
   "εμφανιζόταν crush, δες κάτι γραμμές" was. Reproduced by holding the panel
   at scale(1, 0.55): the list renders as stacked smears. Opacity and a
   translate cannot distort type, so the panel looks the same at every frame
   as it does at rest. Shorter, too, so there is less of it to see.

   :focus-within alongside :hover so keyboard users tabbing onto Services get
   the same list. 320px, not Orisa's 260px — the longest service name here
   ("Review response and online reputation") needs it. */
.navbar_submenu {
	position: absolute;
	top: 120%;
	left: 0;
	z-index: 99;
	width: 320px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	text-align: start;
	background: rgba(35, 42, 53, 0.94);
	border: 1px solid rgba(184, 154, 107, 0.25);
	border-radius: 12px;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s;
}
.navbar_menu_item:hover > .navbar_submenu,
.navbar_menu_item:focus-within > .navbar_submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.navbar_submenu li {
	margin: 0;
	padding: 0 12px;
}
.navbar_submenu_link {
	display: block;
	padding: 12px 18px;
	border-radius: 8px;
	color: rgba(245, 242, 237, 0.75);
	font-family: Jost, Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}
.navbar_submenu_link:hover,
.navbar_submenu_link:focus-visible {
	background-color: rgba(184, 154, 107, 0.14);
	color: var(--vv-gold);
}

/* ===== Grid-icon button (Orisa's .at-menu-bar) — opens .menu2_area ===== */
.navbar_bar_btn {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50px;
	background: none;
	color: var(--vv-off-white);
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.navbar_bar_btn:hover {
	opacity: 0.6;
}
.navbar_bar_btn svg {
	display: block;
}

/* ===== "MENU" pill — Orisa's #header-sticky / .hamburger-sticky-menu =====
   Hidden while the bar is showing; navbar.js's initNavCompact() adds
   .is-compact past 100px of scroll, which fades the bar out and pops this in
   at Orisa's own top: 40px / right: 20px. Gold-on-charcoal is this site's
   pill treatment, in place of Orisa's white-on-white. */
.u-menu-btn {
	appearance: none;
	display: none;
	position: absolute;
	top: 40px;
	right: 20px;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border: 0;
	border-radius: 16px;
	background-color: var(--vv-gold);
	color: var(--vv-charcoal);
	font-family: Jost, Arial, sans-serif;
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.u-menu-btn:hover {
	opacity: 0.85;
}
/* The SVG carries width/height="24" (Orisa's); without sizing it to its
   18px box it overflows down and right of the "MENU" label. */
.u-menu-btn_icon {
	display: block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}
.u-menu-btn_icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ===== Compact state =====
   opacity/visibility rather than display: none on the bar's parts, so they
   fade instead of snapping — visibility is what takes them out of tab order
   and hit-testing once the fade ends. .is-leaving-compact (held for 300ms by
   navbar.js) keeps the pill at display: inline-flex long enough for its
   fade-out to play, since display itself can't transition. */
.navbar_brand,
.navbar_menu,
.navbar_lang,
.navbar_bar_btn,
.u-navbar::before {
	transition:
		opacity 0.3s ease-in-out,
		visibility 0.3s ease-in-out;
}
.u-navbar.is-compact .navbar_brand,
.u-navbar.is-compact .navbar_menu,
.u-navbar.is-compact .navbar_lang,
.u-navbar.is-compact .navbar_bar_btn {
	opacity: 0;
	visibility: hidden;
}
.u-navbar.is-compact::before {
	opacity: 0;
}
.u-navbar.is-compact .u-menu-btn,
.u-navbar.is-leaving-compact .u-menu-btn {
	display: inline-flex;
}
.u-navbar.is-compact .u-menu-btn {
	opacity: 1;
	transform: scale(1);
}
.u-navbar.is-leaving-compact .u-menu-btn {
	opacity: 0;
	transform: scale(0.5);
}
/* Orisa's pill scales up from 0.5 as it arrives. @starting-style is what
   gives a freshly display: none → inline-flex element a frame to animate
   from; browsers without it just show the pill without the pop. */
@starting-style {
	.u-navbar.is-compact .u-menu-btn {
		opacity: 0;
		transform: scale(0.5);
	}
}
/* Menu panel open (.active, navbar.js): the panel carries its own logo and
   close control, so the bar's logo, its centred menu and both open buttons stand down rather
   than doubling up on screen. */
.u-navbar.active .navbar_brand,
.u-navbar.active .navbar_menu,
.u-navbar.active .navbar_lang,
.u-navbar.active .navbar_bar_btn,
.u-navbar.active .u-menu-btn {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Orisa hides the centred menu below xl (d-none d-xl-flex) and leaves just
   logo + button; the grid button opens the same panel either way. */
@media screen and (max-width: 1199px) {
	.navbar_menu {
		display: none;
	}
}
/* top: 16px, not 40px — WhyUs/Services/About's mobile pins all start 72px
   down to clear this pill (whyus.js, services-page.js, about-page.js), and
   40px + the pill's own height would reach past that. */
@media screen and (max-width: 767px) {
	.u-navbar {
		padding: 12px 0;
	}
	.navbar_container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.navbar_logo_text {
		font-size: 20px;
	}
	.u-menu-btn {
		top: 16px;
		right: 16px;
		padding: 12px 20px;
		font-size: 14px;
	}
}

/* =====================================================================
   Circle-reveal side menu — Orisa's offcanvas 2 (partials/sidebar.html;
   scss/layout/menu/_offcanvas.scss), matched to Orisa's own panel rather
   than re-coloured dark: a frosted light card 570px wide, inset 20px from
   the viewport's right edge, growing out of the MENU corner via clip-path:
   circle(); logo + close on top; big sentence-case links, each with a "+";
   one hairline under the list. Orisa's numbers throughout — 600px area,
   570px card, 20px inset and radius, blur(20px), 100px padding, 50px under
   the logo row, 48px/600/-0.04em links, 105px under the list, the -300px
   drop — with its own breakpoint steps at the bottom of this file.

   Only the palette is Minos's: off-white glass for Orisa's white, charcoal
   type for its black. Charcoal on off-white is this site's own
   type-on-light pairing (base.css design tokens); gold never sets type on
   off-white, so hover darkens to the muted grey instead.

   Timing is Orisa's apart from the stagger: its first link waits ~1.7s
   after the 0.7s circle, which read as the menu not opening at all, so the
   cascade starts at 0.3s here, 0.1s apart. navbar.js holds .is-closing for
   800ms so the circle can shrink before the container lets go.

   px, not rem, for the usual fluid-root reason. */
.menu2_area {
	position: fixed;
	top: 0;
	right: 0;
	left: 100%;
	/* 100dvh (with a 100% fallback), not --vh: while open this has to keep
	   covering the live viewport, and --vh is deliberately frozen against
	   the mobile toolbar's height-only resizes (head.js). */
	height: 100%;
	height: 100dvh;
	width: 600px;
	max-width: 100vw;
	z-index: 1000;
	pointer-events: none;
}
.menu2_area.is-open,
.menu2_area.is-closing {
	left: auto;
	pointer-events: auto;
}
.menu2_bg {
	position: fixed;
	inset: 20px 20px 20px auto;
	z-index: 2;
	width: 570px;
	max-width: calc(100vw - 40px);
	border-radius: 20px;
	background: rgba(245, 242, 237, 0.9);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1);
	clip-path: circle(0% at calc(100% - 45px) 45px);
	transition: clip-path 0.7s ease-in-out;
}
.menu2_area.is-open .menu2_bg {
	clip-path: circle(150% at calc(100% - 45px) 45px);
}
/* Positioned to the card's own box (the same 20px inset and 570px as
   .menu2_bg), so the scrollable content ends exactly where the visible card
   does. Absolute rather than fixed so it still travels offscreen with
   .menu2_area's left: 100% at rest — .menu2_bg can be fixed because its
   clip-path hides it in place; this text has no such cover. */
.menu2_panel {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	width: 570px;
	max-width: calc(100vw - 40px);
	padding: 100px 100px 40px;
	overflow-y: auto;
	scrollbar-width: none;
}
.menu2_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 50px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-80px);
	/* 0.5s, not Orisa's 1.5s: the header bar's own logo fades out in 0.3s as
	   the panel opens, and at 1.5s neither logo was on screen for a second. */
	transition: all 0.5s ease-in-out !important;
}
.menu2_area.is-open .menu2_top {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Orisa's .at-header-logo: a 30px mark, 24px/700 name beside it. */
.menu2_logo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vv-charcoal);
	text-decoration: none;
}
.menu2_logo img {
	display: block;
	width: 30px;
	height: auto;
}
.menu2_logo_text {
	font-family: Jost, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}
/* A <button>, so it needs the chrome reset the header's own buttons get —
   kept separate from those, whose display/position rules this always-present
   close control must never pick up. */
.menu2_close {
	appearance: none;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--vv-charcoal);
	cursor: pointer;
	transition: transform 0.4s ease;
}
.menu2_close:hover {
	transform: rotate(90deg);
}
.menu2_nav {
	list-style: none;
	margin: 0;
	padding: 10px 0 105px;
	border-bottom: 1px solid rgba(46, 54, 68, 0.12);
}
.menu2_nav_item {
	margin: 0;
	overflow: hidden;
}
/* The stagger — scoped under .is-open because transition-delay applies to
   both directions: unscoped, closing would replay these delays and leave
   later rows floating after the card had already shrunk away. The fast,
   unstaggered close is the .is-closing rule below. */
.menu2_area.is-open .menu2_nav_item:nth-child(1) .menu2_nav_link {
	transition-delay: 0.3s !important;
}
.menu2_area.is-open .menu2_nav_item:nth-child(2) .menu2_nav_link {
	transition-delay: 0.4s !important;
}
.menu2_area.is-open .menu2_nav_item:nth-child(3) .menu2_nav_link {
	transition-delay: 0.5s !important;
}
.menu2_area.is-open .menu2_nav_item:nth-child(4) .menu2_nav_link {
	transition-delay: 0.6s !important;
}
.menu2_area.is-open .menu2_nav_item:nth-child(5) .menu2_nav_link {
	transition-delay: 0.7s !important;
}
.menu2_area.is-open .menu2_nav_item:nth-child(6) .menu2_nav_link {
	transition-delay: 0.8s !important;
}
/* Orisa's link: 48px/600, line-height 1.2, -0.04em, sentence case, no
   padding, dropping in from -300px over 1.5s. The transition list names its
   properties rather than "all", so hovering (color) doesn't inherit the
   entrance's 1.5s. */
.menu2_nav_link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0;
	color: var(--vv-charcoal);
	font-family: Jost, Arial, sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
	text-decoration: none;
	transform: translateY(-300px);
	opacity: 0;
	visibility: hidden;
	transition:
		transform 1.5s ease-in-out,
		opacity 1.5s ease-in-out,
		visibility 1.5s ease-in-out,
		color 0.25s ease !important;
}
.menu2_area.is-open .menu2_nav_link {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
/* Closing: fast and unstaggered (0.4s, under the card's own 0.7s shrink),
   so nothing is left floating without the card behind it. */
.menu2_area.is-closing .menu2_nav_link {
	transition:
		transform 0.4s ease-in-out,
		opacity 0.4s ease-in-out,
		visibility 0.4s ease-in-out !important;
}
.menu2_nav_link:hover {
	color: var(--vv-gray);
}
/* Orisa's plus is Font Awesome's at 28px; this site never loads an icon
   font, so it's the typeset "+" at the size that draws the same cross. */
.menu2_nav_plus {
	flex-shrink: 0;
	color: var(--vv-charcoal);
	font-size: 44px;
	font-weight: 300;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	transition: transform 0.3s ease;
}
.menu2_nav_link:hover .menu2_nav_plus {
	transform: rotate(90deg);
}
/* No .menu2_social — the Instagram/Facebook/WhatsApp/Airbnb links were
   placeholders (href="#") and were pulled on request; the list's hairline
   now reads as the card's bottom edge. */

/* Orisa's own breakpoint steps (_offcanvas.scss). */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
	.menu2_panel {
		padding: 80px 60px 40px 50px;
	}
	.menu2_nav_link {
		font-size: 42px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.menu2_panel {
		padding: 80px 60px 40px 50px;
	}
	.menu2_nav_link {
		font-size: 54px;
	}
}
/* Below lg the card goes full-bleed: no inset, no radius. */
@media screen and (max-width: 991px) {
	.menu2_area {
		width: 100%;
	}
	.menu2_bg {
		inset: 0;
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
	.menu2_panel {
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		padding: 60px 50px 40px;
	}
	.menu2_nav_link {
		font-size: 54px;
	}
}
@media screen and (max-width: 767px) {
	.menu2_panel {
		padding: 60px 30px 40px;
	}
	.menu2_nav_link {
		font-size: 48px;
	}
}
@media screen and (max-width: 575px) {
	.menu2_nav_link {
		font-size: 50px;
	}
}
/* ===== Language switch (EL / EN) =====
   In the bar: the centred menu's own glass box, shrunk to two codes. The
   current language is gold and not dimmed. It fades with the rest of
   .navbar_right in the compact state, like the grid button beside it. */
.navbar_lang {
	display: flex;
	align-items: center;
	padding: 3px;
	border: 1px solid rgba(245, 242, 237, 0.3);
	background: rgba(245, 242, 237, 0.18);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.navbar_lang_link {
	display: inline-block;
	padding: 7px 10px;
	color: var(--vv-off-white);
	font-family: Jost, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.3s ease, color 0.3s ease;
}
.navbar_lang_link:hover,
.navbar_lang_link[aria-current] {
	opacity: 1;
}
.navbar_lang_link[aria-current] {
	color: var(--vv-gold);
}

/* In the panel: under the link list's own bottom rule, fading in after the
   last link's cascade (the sixth link's delay is 0.8s). */
.menu2_lang {
	display: flex;
	gap: 28px;
	padding-top: 32px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.menu2_area.is-open .menu2_lang {
	opacity: 1;
	transition: opacity 0.5s ease 0.9s;
}
.menu2_lang_link {
	color: var(--vv-gray);
	font-family: Jost, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color 0.3s ease;
}
.menu2_lang_link:hover,
.menu2_lang_link[aria-current] {
	color: var(--vv-charcoal);
}
.menu2_lang_link[aria-current] {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}
/* ===== Light tone (Navbar tone="light" — /about) ===========================
   Over a light ground the off-white type and the dark scrim both go wrong:
   type turns charcoal, the scrim goes, and the glass boxes take a charcoal
   tint instead of an off-white one. Gold stays off type here (base.css) — the
   current page is marked by weight of colour, not by gold. The MENU pill
   past 100px of scroll is unchanged. */
.u-navbar.is-light::before {
	display: none;
}
.u-navbar.is-light .navbar_logo,
.u-navbar.is-light .navbar_menu_link,
.u-navbar.is-light .navbar_bar_btn,
.u-navbar.is-light .navbar_lang_link {
	color: var(--vv-charcoal);
}
.u-navbar.is-light .navbar_menu,
.u-navbar.is-light .navbar_lang {
	border-color: rgba(46, 54, 68, 0.14);
	background: rgba(46, 54, 68, 0.05);
}
.u-navbar.is-light .navbar_lang_link[aria-current] {
	color: var(--vv-charcoal);
	opacity: 1;
}
/* The current page keeps its hover underline showing instead of turning gold. */
.u-navbar.is-light .navbar_menu_link[aria-current="page"] {
	color: var(--vv-charcoal);
	background-size:
		0 1px,
		100% 1px;
}

/* The MENU pill a touch see-through (on request): its gold at 80% with a
   light blur behind, so the page shows faintly through it. The label stays
   fully opaque. */
.u-menu-btn {
	background-color: rgba(184, 154, 107, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}