/*
 * header.css — a measured rebuild of the client's existing header.
 *
 * Every number below was read off their live site's computed styles rather than
 * eyeballed from a screenshot (tools/measure-orig.js):
 *
 *   bar        1440px max, padding 24px 64px, height 145px (24 + 96 + 24 + 1px rule)
 *   rule       1px solid rgba(255,255,255,.24)
 *   scrolled   rgba(0,0,0,.2) + blur(10px), after 150px  (Elementor sticky_effects_offset)
 *   logo       89 x 96
 *   links      Lato 18px / 400 / #fff, 24px apart, hover #73A220
 *   pill       Lato 18px / 500, #73A220, radius 50px, padding 16px 32px, hover #67921D
 *   dropdown   #73A220 panel, radius 8px, 14px items, padding 16px 8px, hover #67921D
 *   burger     at <=1024; bar padding drops to 16px and the logo to 69px at <=767
 *
 * Two deliberate departures, both flagged to the client:
 *
 * 1. INNER PAGES. Their header is transparent on every page because every page
 *    opens on a dark photo. Ours open on a pale band, where white type would be
 *    unreadable, so inner pages keep a light frosted bar with ink type. Same
 *    geometry, same font, same pill — only the two colours differ.
 *
 * 2. THE 1025-1279 BAND. Their nav row is a fixed 1023px and their burger only
 *    appears at <=1024, so between those widths their own header overflows the
 *    viewport. We tighten the gaps and padding through that band instead of
 *    reproducing a horizontal scrollbar. At >=1280 the layout is exact.
 *
 * 3. THE FRONT PAGE'S SCROLLED STATE. Theirs stays a dark translucent pane with
 *    white type all the way down; ours goes light with ink type once past the
 *    hero, because our page body is cream and their treatment measured 1.66:1
 *    over it. Same reason as departure 1, applied to a state rather than a page.
 *    See the .is-solid block below.
 */

/* ---- The bar ---- */

/*
 * Default = inner pages: a light frosted bar, because our page heroes are pale.
 * The front page overrides this to the client's transparent treatment below.
 */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	isolation: isolate;
	/*
	 * DEPARTURE #3 REVERSED on the client's instruction (18.8.2026, screenshots
	 * of the live site): the bar is THEIR dark blurred pane with white type in
	 * every state, on every page. Their alpha is 0.2, which measured 1.66:1
	 * for white text over our cream pages — so ours is 0.56, the same look
	 * dark enough to carry white text at AA over the palest backdrop
	 * (measured 4.5:1+ at every scroll depth by tools/header-contrast.js;
	 * axe cannot see this state, the gate can).
	 */
	--hdr-fg: #fff;
	color: var(--hdr-fg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.24);
	transition: border-color 0.3s ease;
}

/*
 * The bar's surface lives on a pseudo-element, NOT on .site-header itself.
 *
 * backdrop-filter on an element that contains content makes Chrome render that
 * content's own backgrounds wrong: with the blur on the header, the green
 * Tarjouspyyntö pill painted as near-white — computed styles said #73A220 the
 * whole time, so this is only visible in a screenshot, never in the CSSOM.
 * Keeping the blur on a sibling layer behind the content avoids it entirely.
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.56);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	/* Their transition, verbatim: background only, 0.3s ease. */
	transition: background-color 0.3s ease;
}

/* Front page: transparent over the hero video, exactly as theirs. */
.site-header--overlay {
	--hdr-fg: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.24);
}

.site-header--overlay::before {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * Scrolled past 150px — DELIBERATE DEPARTURE #3 (see the file header).
 *
 * Theirs darkens to a translucent rgba(0,0,0,.2) pane and keeps white type in
 * both states. We copied that faithfully, and on their site it works because
 * their pages are dark photography most of the way down. Ours are not: below
 * the hero this site is cream and pale bands, and white-on-20%-black over cream
 * measured **1.66:1** — text that is effectively invisible while scrolling.
 *
 * ⚠ axe CANNOT see this. It audits at scroll 0, where the bar is still over the
 * dark hero and measures ~14.5:1. It passed every a11y gate we ran while being
 * unreadable in normal use. Regression gate: tools/header-contrast.js, which
 * samples the real composited backdrop at several scroll depths.
 *
 * So past the hero the bar becomes the SAME light frosted treatment the inner
 * pages already use, and the type goes to ink. The rule the site now follows is
 * coherent and easy to state: transparent with white type while the header is
 * over the hero image; light bar with ink type once it is over page content.
 * --hdr-fg drives the nav links, the dropdown toggle and the burger, so one
 * variable flip carries all of them.
 */
.site-header--overlay.is-solid {
	border-bottom-color: rgba(255, 255, 255, 0.24);
}

.site-header--overlay.is-solid::before {
	/* Identical to the inner-page bar above, so the two states cannot drift. */
	background: rgba(0, 0, 0, 0.56);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.site-header__inner {
	position: relative;
	z-index: 1; /* above the ::before surface */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	/*
	 * Their bar is a 1440px CONTENT box with 64px padding outside it (Elementor's
	 * inner/outer container pair). Ours is border-box, so a bare 1440px here put
	 * our logo exactly 64px further in than theirs at every width above 1568
	 * (measured 16.8: 304 vs 240 at 1920, 624 vs 560 at 2560). Content + padding
	 * reproduces their x-positions to the pixel from 1536 to 2560.
	 */
	max-width: calc(1440px + 2 * 64px);
	margin-inline: auto;
	padding: 24px 64px;
}

/* ---- Logo ---- */
.site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.site-logo__lockup {
	width: 89px;
	height: auto; /* 96px — the source is 267x289, served at 3x for retina. */
	display: block;
}

/* The bar is dark (or transparent over the dark hero) in every state now, so
   the white lockup rides everywhere and the ink one never shows. Both stay in
   the markup so a future light bar is a CSS-only change. */
.site-logo__lockup--light {
	display: block;
}

.site-logo__lockup--dark {
	display: none;
}

/* ---- Nav ---- */
.primary-nav {
	display: flex;
	align-items: center;
}

/* Hidden on desktop; the <=1024 block turns it on. Declared here so that block
   is the later rule and wins. */
.nav-toggle {
	display: none;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: none;
	/*
	 * Labels are nowrap, so a shrunken list does not reflow — the text spills out
	 * and collides with the pill, which no overflow check would catch. Holding the
	 * natural width means "does it fit" is decided by the media queries below.
	 */
	flex: 0 0 auto;
}

.nav-item {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
}

.nav-item__link {
	display: flex;
	align-items: center;
	min-height: 52px; /* the pill sets the row height; plain links match it */
	padding: 0;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 20px;
	color: var(--hdr-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.nav-item__link:hover,
.nav-item__link:focus-visible {
	color: var(--koivu-bright);
}

/* Current page — theirs marks the active item in the same green as hover. */
.nav-item.is-current > .nav-item__link {
	color: var(--koivu-bright);
}

/* ---- Dropdown toggle ----
   Their chevron lives inside the <a> and occupies 26px (their "Palvelumme"
   measures 125 against 99 of text). Ours is a separate button so it can be
   reached by keyboard, so the 26px is rebuilt here as 10px gap + a 16px mark. */
.nav-item--has-sub {
	gap: 10px;
}

.nav-item__sub-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--hdr-fg);
	cursor: pointer;
	transition: color 0.2s ease;
}

.nav-item--has-sub:hover .nav-item__sub-toggle,
.nav-item__sub-toggle:hover,
.nav-item__sub-toggle:focus-visible {
	color: var(--koivu-bright);
}

.nav-chevron {
	transition: transform var(--dur-fast) var(--ease);
}

.nav-item--has-sub[data-open] .nav-chevron {
	transform: rotate(180deg);
}

/* ---- Submenu ---- */
.nav-sub {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.nav-sub a {
	display: block;
	padding: 16px 8px;
	font-size: 14px;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.nav-sub a:hover,
.nav-sub a:focus-visible {
	background-color: var(--koivu-dark);
}

/* ---- The Tarjouspyyntö pill ----
   Their nav's last item, turned into the CTA by custom CSS at >=1024. Below that
   their burger takes over and it renders as a plain menu line, so the pill
   styling is scoped to the desktop nav only (see the media queries). */

/* ---- Desktop nav (>1024, matching their burger breakpoint) ---- */
@media (min-width: 1025px) {
	.nav-sub {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 100%;
		width: max-content;
	/*
	 * --koivu, NOT --koivu-bright: this is a SURFACE CARRYING WHITE TEXT.
	 * The bright green (#73A220) is their real brand green and stays available
	 * for small non-text highlights, but white on it measures 3.04:1 — below
	 * AA. --koivu is the AA-safe step (5.01:1 with white) in the brief 04
	 * palettes. In the pre-brief-04 palette the two tokens hold the same value,
	 * so this is a no-op there and cannot change the old look.
	 */
		background-color: var(--koivu);
		border-radius: 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition:
			opacity var(--dur-fast) var(--ease),
			transform var(--dur-fast) var(--ease),
			visibility var(--dur-fast);
	}

	.nav-sub li:first-child a {
		border-radius: 8px 8px 0 0;
	}

	.nav-sub li:last-child a {
		border-radius: 0 0 8px 8px;
	}

	.nav-item--has-sub:hover .nav-sub,
	.nav-item--has-sub:focus-within .nav-sub,
	.nav-item--has-sub[data-open] .nav-sub {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.nav-item--pill .nav-item__link {
		padding: 16px 32px;
		font-weight: 500;
		color: #fff;
		text-align: center;
	/*
	 * --koivu, NOT --koivu-bright: this is a SURFACE CARRYING WHITE TEXT.
	 * The bright green (#73A220) is their real brand green and stays available
	 * for small non-text highlights, but white on it measures 3.04:1 — below
	 * AA. --koivu is the AA-safe step (5.01:1 with white) in the brief 04
	 * palettes. In the pre-brief-04 palette the two tokens hold the same value,
	 * so this is a no-op there and cannot change the old look.
	 */
		background-color: var(--koivu);
		border-radius: 50px;
	/*
	 * No transition here on purpose. Elementor gives their pill none either, and
	 * transitioning background-color on this page leaves the element stuck at a
	 * part-way colour: the intermediate paint never gets invalidated once Lenis
	 * and GSAP start ticking, so the green rendered at ~43%% while the CSSOM
	 * reported #73A220. Instant hover matches their site and cannot rot.
	 */
	}

	.nav-item--pill .nav-item__link:hover,
	.nav-item--pill .nav-item__link:focus-visible {
		color: #fff;
		background-color: var(--koivu-dark);
	}
}

/*
 * Laptop band (1025-1263). Measured 16.8 on BOTH sites: their full layout fits
 * on one row from exactly 1264px up, and from 1264 to 1279 our desktop rules
 * reproduce it to the pixel (nav start 177/181/192 at 1264/1268/1279, same
 * as theirs), so nothing here may touch >= 1264. Below 1264 their bar wraps
 * onto THREE rows, so an exact copy is broken and we trim instead.
 *
 * The trim is fluid, one property at a time, in the order that is least
 * visible, each starting exactly where the previous one runs out — so the
 * layout never jumps at a breakpoint and the logo moves last. Every threshold
 * is measured on our own markup (see tools/header-compare.js), not estimated.
 * The desktop layout overshoots by 1px per 1px of viewport below 1264, and
 * each step below recovers width at that same rate.
 */
/*
 * 1370 -> 1264 — NEW 18.8, the language toggle's own step. The pill toggle
 * costs the row ~77px (measured: it fits naturally from ~1365 up), so the
 * SEVEN gaps give 24 -> 14 across this range, before the older steps below
 * take over.
 */
@media (min-width: 1264px) and (max-width: 1369.98px) {
	.primary-nav__list {
		gap: clamp(14px, calc(24px - (1370px - 100vw) * 0.14), 24px);
	}
}

@media (min-width: 1025px) and (max-width: 1269.98px) {
	.primary-nav__list {
		/* The toggle costs more than the old 16px floor could carry: the gaps
		   hold the 12px the deepest band already used. Reaches 1270 so these
		   recoveries cover the point where the ramp above sits on its floor. */
		gap: 12px;
	}

	.nav-item__link {
		/* 1240 -> 1165: type 18 -> 15. One px deeper than the seven-item floor —
		   that px (~46px across the row's labels, Finnish widest) pays for the
		   language item in this band. */
		font-size: clamp(15px, calc(18px - (1240px - 100vw) * 0.04), 18px);
	}

	.nav-item--pill .nav-item__link {
		padding-inline: clamp(22px, calc(32px - (1240px - 100vw) * 0.11), 32px);
	}

	.site-header__inner {
		/* 1116 -> 1052: only now does the inset give, 64 -> 32, and the logo moves. */
		padding-inline: clamp(32px, calc(64px - (1116px - 100vw) / 2), 64px);
	}
}

/*
 * 1052 -> 1025, the last 27px above the burger breakpoint. Everything above has
 * given all it can, and the pill was ending 5px from the viewport edge at 1025
 * (measured). Two last fluid trims, same slope: the six gaps 16 -> 12 (24px)
 * and the pill inset 24 -> 22 (4px) — 28px recovered for 27px of viewport, so
 * the pill lands on the 32px padding edge all the way down.
 */
@media (min-width: 1025px) and (max-width: 1051.98px) {
	.nav-item--pill .nav-item__link {
		padding-inline: clamp(18px, calc(22px - (1052px - 100vw) * 4 / 27), 22px);
	}

	.primary-nav__list {
		/* The last 5px at 1025: one px off the seven gaps. */
		gap: clamp(11px, calc(12px - (1052px - 100vw) / 27), 12px);
	}

	.lang-toggle__opt {
		padding: 4px 6px;
	}

	.site-logo__lockup {
		width: 70px; /* One step above the <=767 size of 69. */
	}
}

/* ---- Burger + green dropdown panel (<=1024, exactly their breakpoint) ---- */
@media (max-width: 1024.98px) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* PRE-EXISTING, found 19.8 while shrinking the bar for Felix and fixed
		   here: the padding alone left the button 42x34px. That is the primary
		   control on a phone — the only way into the menu — and it was under the
		   44px minimum tap target in both dimensions. axe never flagged it
		   because WCAG 2.1 A/AA has no target-size rule at all (2.5.5 is AAA), so
		   a clean sweep said nothing about it. Sized explicitly rather than left
		   to padding, so a future padding change cannot quietly shrink it again. */
		min-width: 44px;
		min-height: 44px;
		padding: var(--s-2);
		margin-left: auto;
		background: none;
		border: 0;
		cursor: pointer;
		color: var(--hdr-fg);
		z-index: 2;
	}

	/*
	 * Their mobile menu is a full-width green panel that drops from under the
	 * bar — not a white full-screen drawer. Height is animated via transform so
	 * the panel never triggers layout on open.
	 */
	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
	/*
	 * --koivu, NOT --koivu-bright: this is a SURFACE CARRYING WHITE TEXT.
	 * The bright green (#73A220) is their real brand green and stays available
	 * for small non-text highlights, but white on it measures 3.04:1 — below
	 * AA. --koivu is the AA-safe step (5.01:1 with white) in the brief 04
	 * palettes. In the pre-brief-04 palette the two tokens hold the same value,
	 * so this is a no-op there and cannot change the old look.
	 */
		background-color: var(--koivu);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity var(--dur-fast) var(--ease),
			transform var(--dur-fast) var(--ease),
			visibility var(--dur-fast);
		/*
		 * The open panel fills the rest of the screen, not just its own rows.
		 * Sized to its content it ended mid-page, and half of the hero's
		 * Tarjouspyyntö button showed under its edge (Masudur, 12.10). 100% is
		 * the header's height (the containing block), so this is "everything
		 * below the bar"; vh first for browsers without dvh. The list still
		 * scrolls inside the panel when it is taller than the screen.
		 */
		height: calc(100vh - 100%);
		height: calc(100dvh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Room under the last row, so the floating chat button never sits on it. */
		padding-bottom: 96px;
	}

	body.nav-open .primary-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-nav__list {
		display: block;
		gap: 0;
	}

	.nav-item {
		display: block;
	}

	/*
	 * 15px block padding + 22.4px line box = a 52px row, which is their menu's
	 * row height to the pixel (measured from their live drawer, not guessed).
	 */
	.nav-item__link {
		min-height: 0;
		padding: 15px 24px;
		font-size: 16px;
		line-height: 1.4;
		color: #fff;
		white-space: normal;
	}

	.nav-item__link:hover,
	.nav-item__link:focus-visible {
		color: #fff;
		background-color: var(--koivu-dark);
	}

	/* Chevron sits at the right edge of its row, not tight against the label. */
	.nav-item--has-sub {
		position: relative;
		display: block;
	}

	.nav-item__sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 52px;
		justify-content: center;
		color: #fff;
	}

	.nav-item__sub-toggle:hover,
	.nav-item__sub-toggle:focus-visible {
		color: #fff;
	}

	.nav-sub {
		display: none;
		background-color: var(--koivu-dark);
	}

	.nav-item--has-sub[data-open] .nav-sub {
		display: block;
	}

	.nav-sub a {
		padding: 14px 24px 14px 40px;
		font-size: 16px;
	}

	.nav-sub a:hover,
	.nav-sub a:focus-visible {
		background: rgba(0, 0, 0, 0.16);
	}

	/* Open state: the bar behind the panel must stay readable on light pages. */
	body.nav-open {
		overflow: hidden;
	}

	body.nav-open .nav-toggle__bar {
		background: transparent;
	}

	body.nav-open .nav-toggle__bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	body.nav-open .nav-toggle__bar::after {
		top: 0;
		transform: rotate(-45deg);
	}
}

/* ---- Hamburger internals (the show/hide rules live above, before the <=1024
   block — a later `display:none` at equal specificity would win and the burger
   would never appear) ---- */
.nav-toggle__box {
	position: relative;
	display: block;
	width: 26px;
	height: 18px;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--hdr-fg);
	border-radius: 2px;
	transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bar {
	top: 50%;
	transform: translateY(-50%);
}

.nav-toggle__bar::before {
	content: "";
	top: -8px;
}

.nav-toggle__bar::after {
	content: "";
	top: 8px;
}

/* ---- Phone (<=767): their bar tightens to 16px and the logo to 69px ---- */
/*
 * Short screens: the drawer is a HEIGHT problem, not a width one.
 *
 * Seven items at the normal 52px row fill 381px. On a 568px-tall phone (an
 * iPhone SE and anything like it) that is 86% of the screen with the menu open
 * — measured, and the reason the menu "takes too much space" there while
 * looking perfectly normal on a 844px phone.
 *
 * So the rows tighten with the VIEWPORT HEIGHT rather than at a width
 * breakpoint: 44px is Apple's minimum tap target, so this is as tight as it can
 * honestly go, and 7 items now come to 308px instead of 381px. Text stays 16px
 * — shrinking the label would have been the easy way to save space and the
 * wrong one.
 */
@media (max-width: 1024.98px) and (max-height: 700px) {
	.nav-item__link {
		padding-block: 11px;
	}

	.nav-item__sub-toggle {
		height: 44px;
	}
}

@media (max-width: 767.98px) {
	/*
	 * Felix, 19.8: "Mobile optimize. Nav bar is too large."
	 *
	 * Measured before changing: the bar was 108px — a 75px-tall lockup in 16px
	 * of padding — which with the (now removed) 78px action bar put 22% of a
	 * 390x844 screen permanently under fixed furniture, and 38% of a 320x568
	 * one. This takes the bar to ~81px on its own.
	 *
	 * ⚠ Departure from the "match their site" rule, deliberately and on the
	 * client's own instruction: their mobile lockup is 60px. Ours was larger
	 * than theirs, and is now slightly smaller.
	 *
	 * The floor is set by the burger, not by taste: it is pinned to a 44px tap
	 * target (see .nav-toggle), so 12px of padding around it is as tight as this
	 * bar can honestly go.
	 */
	.site-header__inner {
		padding: 12px 16px;
	}

	.site-logo__lockup {
		width: 52px;
	}
}

/* ---- Language switcher (brief 04 §8) ----
   The last nav item: a pill TOGGLE (Robin's final form 18.8) — FI left, EN
   right, a white knob on the language being read, the other side a link.
   It rhymes with the site's own pill idiom next to the Tarjouspyyntö button.

   ⚠ The track is a DARK tint with the bar's hairline, not the light track of
   the first mock: white 12px text on a light translucent track over the dark
   pane measured ~3.8:1 (below AA), and axe cannot see composited backdrops —
   the dark track keeps the inactive label at or above the nav's own worst
   contrast by construction. Knob text is var(--ink) on white.

   ⚠ THE EIGHTH ITEM DOES NOT FIT THE SEVEN-ITEM SQUEEZE — measured 18.8: the
   toggle (~77px wide) overflows the row below ~1370px. The extended ramps in
   the blocks above pay for it. Verify ANY header change with the nav-width
   probe at 1025–1440 — this overflow is invisible to shot.js (the list
   clips; overflowX stays 0). */
.lang-toggle {
	display: inline-flex;
	align-items: center;
	padding: 2px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.28);
}

.lang-toggle__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.lang-toggle__opt.is-active {
	background: #fff;
	color: var(--ink);
}

a.lang-toggle__opt:hover,
a.lang-toggle__opt:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}

/* Below 1270 the toggle itself compacts (~19px back). */
@media (min-width: 1025px) and (max-width: 1269.98px) {
	.lang-toggle__opt {
		padding: 4px 7px;
		font-size: 11px;
		letter-spacing: 0.02em;
	}
}

/* And in the last stretch the lockup takes a mild intermediate step —
   precedented: it already drops to 69px below 768. This is departure #2
   territory (their own header overflows these widths), not the client look. */
@media (min-width: 1025px) and (max-width: 1149.98px) {
	.site-logo__lockup {
		width: 74px;
	}
}

@media (max-width: 1024.98px) {
	/* A drawer row like the others; the toggle reads the same on the green. */
	.nav-item--lang {
		padding: 12px 24px;
	}
}