.header .dropdown-toggle {
	color: inherit !important;
	border: inherit !important;
	text-decoration: inherit !important;
	font-weight: inherit !important;
}

/* `html body`, not `body`: this reserves the space the FIXED header occupies, and
   WordPress's own `global-styles-inline-css` sets `body{padding-top:0}` at equal
   specificity. Which one wins is then decided by print order — and WP prints its
   global styles BEFORE the theme sheets on most templates but AFTER them on single
   posts. That is why every blog single rendered its hero underneath the header, with
   the byline's date line invisible behind it, on live as well as staging. One extra
   element in the selector makes this immune to that ordering difference.
   Paired with the >=992 tier in scss/config/media.scss, which is bumped the same way
   so their relative order still decides 60 vs 76. */
html body {
	padding-top:60px;
}

/* The whole header slides away on scroll down and returns on scroll up — the
   behaviour the deleted .head__button bar used to have, moved onto the one row
   that replaced it.

   Animated with `top`, NOT `transform`. A transform (or will-change: transform)
   on .header makes it the containing block for its position:fixed descendants —
   and #offcanvasNavbar is one of them, so the drawer collapsed to the header's
   own 60x375 box and every menu item fell outside it. `top` has no such effect.

   Mobile only: the offset lives in the <992px block below, so the header never
   hides on desktop, which is where it behaved this way before. */
.header {
	transition: top 0.3s ease;
}
body.admin-bar {
	padding-top:60px;
}
body.admin-bar .fixed-top {top: 32px;}

/* The blank header renders no navbar, so the space reserved for the fixed one
   above has to go. This override lives HERE, next to the rule it cancels.
   Both selectors are needed: the bare one outranks `body` on specificity, and
   the doubled one is what beats `body.admin-bar`, which it would otherwise tie
   and lose to on order. */
body.rs-header-blank,
body.rs-header-blank.admin-bar {
	padding-top: 0;
}

#offcanvasNavbar {
	z-index: 1051;
}

.header button.navbar-toggler {
	background-color: transparent;
	border: 0;
	color: #34383c;
	box-shadow: none;
}

/* atom/icon-close ships its own states, and this button is now that icon as well
   as the burger, so it inherits them: #34383c at rest, #f35b54 hover
   (30671:24426), #d9514b pressed (30671:24430).

   Gated on `pointer: fine`, not `hover: hover` alone. Two things defeat the
   hover-only guard on a real phone: a touchscreen keeps :hover applied after the
   finger lifts, and several Android browsers report `hover: hover` regardless.
   Tested on device 2026-09-03 — the coral stuck to the X for as long as the menu
   was open. `pointer: coarse` is the half that actually identifies a touchscreen,
   so :active moves inside the query too: a tap now changes nothing but the shape. */
@media (hover: hover) and (pointer: fine) {
	.header button.navbar-toggler:hover {
		color: #f35b54;
	}
	.header button.navbar-toggler:active {
		color: #d9514b;
	}
}

/* And whatever the device claims, the X itself is black-prime — Roman's call
   after that device test. (0,4,2) against the state rules' (0,3,2), so it holds
   even through a :hover that a browser refuses to drop. rs-nav-closing is here
   too, or the icon would flash coral on the way back to bars. */
body.rs-nav-open .header button.navbar-toggler,
body.rs-nav-open .header button.navbar-toggler:hover,
body.rs-nav-open .header button.navbar-toggler:focus,
body.rs-nav-open .header button.navbar-toggler:active,
body.rs-nav-closing .header button.navbar-toggler,
body.rs-nav-closing .header button.navbar-toggler:hover,
body.rs-nav-closing .header button.navbar-toggler:focus,
body.rs-nav-closing .header button.navbar-toggler:active {
	color: #34383c;
}

/* ---- Burger, and its morph into the X -------------------------------------
   Geometry is FA7 Pro `bars` at 24px, measured off the rendered page rather than
   guessed: three 2px bars, 21px wide, on an 8px pitch, 18px tall overall. So the
   rest state is pixel-identical to the glyph it replaces.

   Why spans and not the glyph: a font glyph cannot morph. atom/icon-close is FA
   `xmark` at 18px, whose ink box measures 13.5 square with a 2.12px perpendicular
   stroke (both read off the rasterised glyph, not inferred). A 45deg-rotated bar
   of length L and thickness t occupies (L + t) / sqrt(2) — the stroke counts
   toward the box, which is easy to drop — so hitting 13.5 with t=2 needs
   L = 13.5 * sqrt(2) - 2 = 17.09, i.e. scaleX(17.09 / 21) = .814. Rotating the
   bars at full 21px length would overshoot to 14.85, 10% too big.

   The middle bar collapses along its own axis rather than just fading, so the
   three strokes read as converging into two.

   .3s matches Bootstrap's own `transition: transform .3s ease-in-out` on the
   panel, so the morph and the slide are one gesture. currentColor picks up the
   state colours above for free. */
.rs-burger {
	position: relative;
	display: block;
	width: 21px;
	height: 18px;
}
.rs-burger__bar {
	position: absolute;
	left: 0;
	width: 21px;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .15s linear;
}
.rs-burger__bar:nth-child(1) { top: 0; }
.rs-burger__bar:nth-child(2) { top: 8px; }
.rs-burger__bar:nth-child(3) { top: 16px; }

body.rs-nav-open .rs-burger__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg) scaleX(.814);
}
body.rs-nav-open .rs-burger__bar:nth-child(2) {
	transform: scaleX(0);
	opacity: 0;
}
body.rs-nav-open .rs-burger__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg) scaleX(.814);
}

@media (prefers-reduced-motion: reduce) {
	.rs-burger__bar {
		transition: none;
	}
}

.header .navbar {
	font-family: "Hind Madurai", Sans-serif !important;
	font-size: 1rem;
	font-weight: 600;
}

/* Header bottom edge, BOTH breakpoints. Roman on the subtask, 2026-09-03: "lets
   use both for mobiles and desktops … 1px bottom border, 10% opacity with
   #34383C" — so this supersedes the mobile-only 2px at 15% that shipped
   previously, and desktop gains the edge it did not have.

   #34383c1a is 10%: 0x1A = 26, 26/255 = 10.2%.

   background-clip stops the navbar's own white at the padding edge, so the 10%
   actually composites over whatever scrolls beneath the fixed header. With the
   default border-box clip the white paints underneath and the alpha is declared
   but never does anything — the line renders as a flat tint regardless of the
   content behind it.

   Note for Figma: header-mobile-eng (30580:23481) still carries a 2px inside
   stroke at #34383c26, and header-desktop-eng (5351:6205) has no stroke at all.
   Both frames now trail the decision. */
.header .navbar {
	border-bottom: 1px solid #34383c1a;
	background-clip: padding-box;
}

.header .navbar .nav-link {
    border-radius: 8px;
}

.dropdown-menu {
	box-shadow: 0 10px 20px 0 rgba(47, 47, 47, 0.10), 0 20px 40px -10px rgba(47, 47, 47, 0.10);
}

.dropdown-menu .current-menu-item .dropdown-item {
	color: #408897;
}

.dropdown-menu .nav-item .dropdown-item:before, .lang__menu .dropdown-menu a:before {
	content: "";
    top: 50%;
    margin-top: -4px;
    position: absolute;
    width: 6px;
    height: 6px;
    background: transparent;
    border-radius: 8px;
}
.dropdown-menu .nav-item .dropdown-item:hover:before, .lang__menu .dropdown-menu .dropdown-item:hover:before {
	background: #EBF2F2;
}

.dropdown-menu .current-menu-item .dropdown-item:before, .lang__menu .dropdown-menu a.active:before {
    background: #408897;
}

.dropdown-menu .nav-item .dropdown-item:before, .dropdown-menu .current-menu-item a:before {
	left: 14px;
}

.lang__menu .dropdown-menu a:hover:before, .lang__menu .dropdown-menu a.active:before {
	right: 14px;
	left: auto;
}

.header .btn-warning {
	background-color: #FFC94B !important;
	font-family: "Montserrat", Sans-serif;
    font-size: 1rem;
	font-weight: 700;
	padding: 10px 30px 10px 30px;
	box-shadow: 0px 20px 40px -10px rgba(38, 50, 56, 0.2);
}
.header .btn-warning:hover {
	background-color: #FFB710 !important;
	box-shadow: 0px 10px 20px -5px rgba(38, 50, 56, 0.3);
}

.dropdown-item {
	font-weight: 600;
	position: relative;
}
.dropdown-item {
	color: #5D636A;
}
.dropdown-item:hover {
	color: #34383C;
	background-color: #fff;
}
.dropdown-item.active {
	color: #408897;
	background-color: #FFF;
}

.header__menu .nav-link, .lang__menu .nav-link {
	color: #34383C;
}

.header__menu .dropdown-menu, .lang__menu .dropdown-menu {
    border: none;
}

.header__menu .dropdown-toggle::after, .lang__menu .dropdown-toggle::after, .dropdown-toggle::after {
	content: "";
	display: inline-block;
	position: relative;
	top: 4px;
	width: 0.75em;
	height: 1em;
	font-size: 16px;
	margin-left: 0.75rem;
	border: none;
	vertical-align: baseline;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z'/%3E%3C/svg%3E") no-repeat center / contain;
}


#countdown-wrapper {
    position: relative;
    top: 5px;
    font-family: 'Montserrat', sans-serif;
}
.time-box {
    color: #fff;
    border-radius: 8px;
    text-align: center;
}
.time-box div {
    background: #333;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    width: 52px;
    padding: 2px 12px;
    border-radius: 4px;
}
.label {
    display: block;
    font-family: 'Hind Madurai', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 20px;
    color: #333;
}
.dilimiter {
    position: relative;
    top: -11px;
    font-size: 20px; 
    font-weight: bold;
}


.footer {
	color: #34383C;
	background: #f9faf4;
	font-size: 0.875rem;
	font-family:'Montserrat', Sans-serif;
	padding-top: 30px; /* was pt-4 (24px) — matches Figma footer top padding */
	padding-bottom: 23px; /* was pb-3 (16px) — matches Figma footer bottom padding */
}
.footer .fdescr {
    font-family: "Hind Madurai", Sans-serif;
}
.footer figure {
	margin-bottom: 10px; /* was default 16px — matches Figma logo-to-tagline gap */
}
.footer .fa-brands {
	font-size: 1.25rem;
	color: #34383C;
    position: relative;
    margin-right: 0.25rem;
    top: 2px;
}
.footer hr {
	border-color: #D8E2E3;
	margin-top: 30px; /* was default 16px — matches Figma columns-to-divider gap */
	margin-bottom: 22px; /* was default 16px — matches Figma divider-to-copy-row gap */
}
.fmenu-title {
	font-weight: 600;
	text-transform: capitalize;
	line-height: 0.875rem;
	margin-bottom: 20px; /* was mb-3 (16px) — matches Figma heading-to-link gap */
}
.footer .nav-link.text-body:hover {
	color: #f35b54 !important;
}
.footer .nav-link:hover, .footer .rs-social-icon:hover i {
	color: #F35B54;
}

/* Base .rs-social-icon styling. The footer's LinkedIn/YouTube links carry that
   class (template-parts/footer-default.php, footer-simple.php).

   All six declarations plus the child rules, not just the obvious three. The
   `i`/`svg` block is the load-bearing one: it constrains the glyph to 1em, and
   without it the icons render at their natural glyph width (measured: 25px
   instead of 20px, shifting the footer row by 5px per icon). Porting only what
   looks visually obvious is how that kind of drift ships. */
.rs-social-icon {
	color: #69727d;
	display: inline-block;
	font-size: 50px;
	line-height: 1;
	text-align: center;
	transition: all .3s;
}
.rs-social-icon i,
.rs-social-icon svg {
	display: block;
	height: 1em;
	position: relative;
	width: 1em;
}
.rs-social-icon i:before,
.rs-social-icon svg:before {
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
}

.modal-backdrop {
    background: #546E70;
    opacity: 0.95 !important;
}


@media (max-width: 991px) {
	/* Figma header-mobile-eng: 375x60, 7px/20px padding. The bottom edge itself is
	   no longer declared here — it is the same 1px at 10% on both breakpoints now,
	   set once in the base rule above. */
	.header .navbar {
		/* The 60px frame height. Set as min-height rather than padding because the
		   markup carries Bootstrap's `py-0`, whose !important no padding rule here can
		   beat. box-sizing is border-box, so this includes the border. */
		min-height: 60px;
	}

	/* Figma "mobile menu 5" (30580:23488) is now a full-bleed 375-wide white panel
	   with no backdrop and no stroke — the `menu` frame fills the artboard.

	   The 2px edge that used to be declared here is gone deliberately. An
	   offcanvas-start panel is full height, so `border-bottom` painted the line at
	   the very bottom of the viewport (measured y 810-812 on a 812-tall window),
	   not under the navbar where the comment claimed it was. The frame carries no
	   stroke on the open state, so there is nothing to reinstate: the closed
	   header keeps its own edge, and while the menu is open the navbar's edge is
	   suppressed to match the frame (see body.rs-nav-open below). */
	#offcanvasNavbar {
		--bs-offcanvas-width: 100%;
		/* Bootstrap gives offcanvas-start a 1px right border. Off-screen and
		   invisible at full width, but it still takes a pixel out of the content
		   box, which made every rule and the search field 334 rather than 335. */
		--bs-offcanvas-border-width: 0;
	}

	/* ---- Open state ------------------------------------------------------------
	   #offcanvasNavbar is a DESCENDANT of .header — it sits inside
	   .navbar > .container, next to .navbar-brand and .rs-nav-actions. Two things
	   follow, and both are the opposite of what you would assume:

	   1. Raising .header does nothing for the toggler. The drawer rides up with it,
	      and inside the header's own stacking context the drawer's z-index:1051
	      still paints over its non-positioned siblings. What has to be raised are
	      the drawer's SIBLINGS, which is what this rule does. `position: relative`
	      is the load-bearing half — z-index is inert on a static box.

	   2. The navbar's white background and its 2px edge never needed suppressing.
	      An ancestor's background and border paint BENEATH a descendant, so the
	      full-bleed panel already covers both. Rules to hide them were written
	      here and measured as no-ops.

	   rs-nav-closing keeps the raise through the slide-out (see the header partial)
	   so the X is not swallowed by the panel it is travelling with, while the morph
	   itself keys off rs-nav-open alone and so reverses the moment you tap. */
	body.rs-nav-open .header .navbar-brand,
	body.rs-nav-open .header .rs-lang-switch,
	body.rs-nav-open .header .rs-nav-actions,
	body.rs-nav-closing .header .navbar-brand,
	body.rs-nav-closing .header .rs-lang-switch,
	body.rs-nav-closing .header .rs-nav-actions {
		position: relative;
		z-index: 1052;
	}

	/* The logo is the mark alone in both states now — "mobile menu 9" (43765:35624)
	   uses atom/logo type=simple, which is what the closed header already shows
	   below lg. So the wordmark is never revealed, the brand never changes width,
	   and nothing in this row moves when the menu opens. (The previous design grew
	   the wordmark here, which is what pushed the row past 375 on the Polish label
	   and wrapped the X onto a second line.)

	   Drawer's own logo stays hidden: the header's mark shows through above the
	   panel, so a second one would double up 0.5px apart. .offcanvas-header is
	   display:none at >=lg anyway. */
	#offcanvasNavbar .offcanvas-title {
		display: none;
	}

	/* display:none, not opacity:0. The frame's header row is space-between across
	   exactly three items — mark, switcher, X — and a CTA still holding its 182px
	   of flow would push the switcher well off its position. So it leaves the flow
	   entirely and the switcher takes its turn; the panel arriving at the same
	   moment is what carries the swap. */
	body.rs-nav-open .header .rs-nav-cta {
		display: none;
	}

	/* ---- Language switcher (43765:35784) --------------------------------------
	   132x44 pill, 1px #ebf2f2, 4px padding, 4px gap; two 60x36 pills inside.
	   Active carries #40889726 — #408897 at 15% — with a #35717d label, which is a
	   darker teal than the #408897 used for open-dropdown state, not the same
	   token. Inactive is transparent with #5d636a.

	   Only present while the menu is open, so it is display:none at rest rather
	   than merely transparent — otherwise it would sit in the closed header's row
	   and squeeze the CTA. */
	.rs-lang-switch {
		display: none;
	}
	body.rs-nav-open .rs-lang-switch {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		gap: 4px;
		flex: 0 0 auto;
		padding: 4px;
		/* inset shadow, not a border: Figma's stroke is centre-aligned, so it does
		   not grow the 132x44 box, whereas a CSS border does — 4+60+4+60+4 is
		   exactly 132, and a border made it 134x46. A shadow paints inside and
		   costs no layout. */
		box-shadow: inset 0 0 0 1px #ebf2f2;
		border: 0;
		border-radius: 999px;
		animation: rs-nav-fade-in .2s linear both;
	}

	/* The frame's header row is space-between across its three items. Two Bootstrap
	   defaults fight that: `.navbar-brand` carries margin-right: 1rem, and
	   `.rs-nav-actions` carries `ms-auto`, whose auto margin swallows every pixel of
	   free space and packs the switcher against the brand — measured at x=83 instead
	   of centred. Both are cancelled while open; ms-auto is a utility, hence
	   !important. Only while open, so the closed header keeps its right-aligned
	   cluster exactly as it is.

	   Note the switcher then lands ~5px right of where the frame puts it, because
	   the CSS-drawn mark renders 47 wide against the frame's 36 — a pre-existing
	   difference in the logo, not in this row. It reads as dead-centre. */
	body.rs-nav-open .header .navbar-brand {
		margin-right: 0;
	}
	body.rs-nav-open .header .rs-nav-actions {
		margin-left: 0 !important;
	}
	/* The highlight is a single thumb behind the labels, positioned only by
	   --rs-lang-i, so switching is a translate rather than two backgrounds
	   crossfading. 64px per step: the 60px pill plus the 4px gap.

	   A language switch is a page navigation, so nothing can animate across it —
	   the thumb starts on the language you left and slides once the new page is
	   up (see the header partial). 150ms is --rs-duration-chip, the DS's timing
	   for exactly this kind of small labelled control. */
	.rs-lang-switch__thumb {
		position: absolute;
		top: 4px;
		left: 4px;
		width: 60px;
		height: 36px;
		border-radius: 999px;
		background-color: #40889726;
		transform: translateX(calc(var(--rs-lang-i, 0) * 64px));
		transition: transform 150ms cubic-bezier(.4, 0, .2, 1);
		pointer-events: none;
	}
	.rs-lang-switch__pill,
	.rs-lang-switch__pill:hover,
	.rs-lang-switch__pill:focus {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* above the thumb, which is what it is a backdrop for */
		position: relative;
		z-index: 1;
		width: 60px;
		height: 36px;
		border-radius: 999px;
		font-family: "Hind Madurai", sans-serif;
		font-size: 14px;
		line-height: 1.6;
		font-weight: 600;
		text-decoration: none;
		color: #5d636a;
		background-color: transparent;
		transition: color 150ms cubic-bezier(.4, 0, .2, 1);
	}
	/* Colour only — the fill is the thumb's job now. */
	.rs-lang-switch__pill.is-active,
	.rs-lang-switch__pill.is-active:hover,
	.rs-lang-switch__pill.is-active:focus {
		color: #35717d;
		background-color: transparent;
	}

	/* Restored open after a language switch: paint the drawer open during parse,
	   before the page below it renders, so switching never flashes the page
	   between the two menus. Replicates what Bootstrap's own .show does, and is
	   handed over to Bootstrap on DOMContentLoaded. */
	body.rs-nav-restore {
		overflow: hidden;
	}
	body.rs-nav-restore #offcanvasNavbar {
		visibility: visible;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.rs-lang-switch__thumb,
		.rs-lang-switch__pill {
			transition: none;
		}
	}

	@keyframes rs-nav-fade-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* ---- Drawer, aligned to Figma "mobile menu 9" (43765:35624) ----------------
	   The panel is full-bleed, so the content column is capped instead: 375 total
	   with a 20px gutter each side, giving the frame's 335 content width at every
	   viewport from 375 up. Below 375 it is fluid. The header ROW is not capped —
	   it spans the full width so the X stays on the viewport's right edge, exactly
	   where the burger was, at 768 as well as at 375.

	   Vertical origin: the frame now pads the panel 7px at the top, the same as
	   header-mobile-eng, so the 4px the two frames used to disagree by is gone and
	   the drawer and the button finally share one origin. Header row 44 tall at
	   y=7, and `main` is a 32-gap column, so the first row bar starts at 83. */
	#offcanvasNavbar .offcanvas-header {
		padding: 7px 20px 0;
		min-height: 51px;
		align-items: center;
	}
	#offcanvasNavbar .offcanvas-body {
		padding: 0 20px 20px;
		max-width: 375px;
	}
	#offcanvasNavbar .offcanvas-body .header__menu {
		margin-top: 32px;
	}

	/* Search — molecula/search-field, device=mobile (43311:14853). 335x40 now that
	   the content column is 335, no box: a single 1px #b2c9cb rule under it, label
	   left, magnifier right. The bottom margin is 0: the frame pads the panel 20px
	   at the bottom and the search field is its last child, so .offcanvas-body's
	   own 20px padding is the whole gap. */
	.rs-nav-search {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin: 24px 0 0;
		padding: 10px 12px 10px 10px;
		border-bottom: 1px solid #b2c9cb;
		height: 40px;
	}
	.rs-nav-search input.rs-nav-search__input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		padding: 0;
		background: none;
		font-family: "Hind Madurai", sans-serif;
		font-size: 12px;
		line-height: 1.4;
		color: #34383c;
	}
	.rs-nav-search input.rs-nav-search__input::placeholder {
		color: #5d636a;
		opacity: 1;
	}
	.rs-nav-search input.rs-nav-search__input:focus {
		outline: 0;
		box-shadow: none;
	}
	/* `button.` prefix is load-bearing: base.css matches `[type=submit]`, and an
	   attribute selector carries CLASS-level specificity (0,1,0) — identical to a
	   lone `.rs-nav-search__submit`, so print order would decide its display and
	   font-size. `button.x` is (0,1,1). */
	button.rs-nav-search__submit {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 14px;
		height: 14px;
		padding: 0;
		border: 0;
		background: none;
		color: #5d636a;
		font-size: 14px;
		line-height: 1;
		box-shadow: none;
	}
	.rs-nav-search__submit i {
		font-size: 14px;
		line-height: 1;
	}

	/* ---- Row bars (43765:35638) -----------------------------------------------
	   Each row is its own 335x44 grey bar at radius 4, 8px from the next, replacing
	   the 1px rules and 56px pitch of the previous design. Padding [10,10,10,16]:
	   the 24px icon frame is what makes the row 44, and the label's own 22px line
	   sits inside that.

	   The bar belongs to the .nav-item, not the .nav-link, so an expanded row can
	   wrap its own sub-links in the same box — which is what the expanded frame
	   shows. The 8px gap is a margin rather than a flex gap because .header__menu
	   is a <ul> whose display Bootstrap owns. */
	#offcanvasNavbar .header__menu > .nav-item {
		background-color: #f9f9f9;
		border-radius: 4px;
		/* main.min.css's `.offcanvas-body .header__menu > .nav-item` is (0,3,0) and
		   loads after this file, so its `border-bottom: 1px solid #d8e2e3` survived
		   the (0,2,0) override further down — a grey line under every bar, and the
		   1px that made each row 45 instead of 44. This id-scoped rule is what
		   actually clears it. */
		border: 0;
		padding: 10px 10px 10px 16px;
	}
	#offcanvasNavbar .header__menu > .nav-item + .nav-item {
		margin-top: 8px;
	}
	#offcanvasNavbar .header__menu > .nav-item > .nav-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		/* Zero padding: the bar above owns it, so the link fills the bar and the
		   whole 44px height stays tappable rather than just the text. */
		padding: 0;
		min-height: 24px;
		font-size: 14px;
		line-height: 1.6;
		font-weight: 600;
	}
	/* margin-right 6, not 0. The chevron lives in a 24x24 icon frame (43765:35641)
	   flush to the row's 10px right padding, with the glyph centred IN that frame —
	   so the glyph's centre sits 12px inside the padding edge, at 355 - 10 - 12 =
	   333. That is the same axis as the 44x44 X in the header above, 311 + 22 =
	   333, which is what makes the column of chevrons line up with it.

	   The glyph itself is 12 wide, and flush right it centred at 339 — 6px off. The
	   6px is the unused half of the icon frame, so the frame is reproduced by the
	   margin rather than by adding a box that would need its own mask sizing. */
	#offcanvasNavbar .header__menu .dropdown-toggle::after,
	#offcanvasNavbar .lang__menu .dropdown-toggle::after {
		position: static;
		right: auto;
		top: auto;
		flex: 0 0 auto;
		margin: 0 6px 0 auto;
	}

	/* Expanded: the fill drops away and a 1px #ebf2f2 outline takes over, so the
	   open row reads as a container for its sub-links rather than a pressed bar.

	   An inset shadow, not a border — the frame's stroke is strokeAlign: inside,
	   which does not grow the box, and a CSS border does: 10 + 24 + 10 is the
	   frame's 44, and a 1px border on top made every row 46. This way the row is
	   44 collapsed and 44 + its sub-links expanded, with no 2px jump on opening.

	   :has() rather than a class toggled in JS, so the state stays where Bootstrap
	   already puts it. If it ever fails to match, the row keeps its grey fill and
	   loses the outline — legible either way. */
	#offcanvasNavbar .header__menu > .nav-item:has(> .nav-link.show) {
		background-color: transparent;
		box-shadow: inset 0 0 0 1px #ebf2f2;
	}

	/* ---- Disclosure motion ----------------------------------------------------
	   300ms on cubic-bezier(.4, 0, .2, 1) — the same clock and curve as the burger
	   morph and Bootstrap's own panel slide, so the whole drawer moves on one
	   system. Deliberately NOT a fifth entry in the DS's motion set: these rows
	   carry no Figma prototype reaction, so there is nothing to transcribe, and
	   rs-design-tokens.css warns against collapsing the four timings it does
	   author. This curve is `--rs-ease` and it accelerates then decelerates, which
	   is the ease-in-and-out this wanted.

	   Height is driven from JS (see the header partial). Bootstrap's Dropdown,
	   unlike its Collapse, animates nothing — and neither `display` nor
	   `height: auto` is transitionable, so CSS cannot own that part alone. The
	   curve still lives here; the script only supplies the two numbers.

	   The chevron transitions `color` AND `background-color` because the glyph is
	   painted with `background-color: currentColor` — the colour it resolves to
	   only moves if both are interpolated. */
	#offcanvasNavbar .header__menu > .nav-item {
		transition: background-color 300ms cubic-bezier(.4, 0, .2, 1),
		            box-shadow 300ms cubic-bezier(.4, 0, .2, 1);
	}
	#offcanvasNavbar .header__menu > .nav-item > .nav-link {
		transition: color 300ms cubic-bezier(.4, 0, .2, 1);
	}
	#offcanvasNavbar .header__menu > .nav-item > .nav-link::after {
		transition: transform 300ms cubic-bezier(.4, 0, .2, 1),
		            color 300ms cubic-bezier(.4, 0, .2, 1),
		            background-color 300ms cubic-bezier(.4, 0, .2, 1);
	}
	#offcanvasNavbar .header__menu .dropdown-menu {
		transition: height 300ms cubic-bezier(.4, 0, .2, 1);
	}

	@media (prefers-reduced-motion: reduce) {
		#offcanvasNavbar .header__menu > .nav-item,
		#offcanvasNavbar .header__menu > .nav-item > .nav-link,
		#offcanvasNavbar .header__menu > .nav-item > .nav-link::after,
		#offcanvasNavbar .header__menu .dropdown-menu {
			transition: none;
		}
	}

	/* A top-level row with no dropdown ("Case Studies") goes to its own page, so it
	   gets the same chevron in the same place, turned to point right — a
	   destination rather than an expansion. Roman's call, 2026-09-03; "mobile
	   menu 5" has no such row, so there is no frame to take it from and the frame
	   should gain one.

	   Deliberately the SAME angle-down glyph as its siblings, rotated, rather than
	   FA's angle-right path: identical geometry means identical stroke weight, and
	   FA regular vs solid cannot be told apart from the Figma layer anyway. The
	   mask is duplicated rather than shared with the global .dropdown-toggle::after
	   rule because that rule is unscoped — extending its selector list would put a
	   chevron on the desktop nav's Case Studies too, where the frame has none.

	   -90deg, not 90: screen-space y runs downward, so positive rotation is
	   clockwise and would point this left. Verified in the browser.

	   Layout is untouched by the rotation — transforms apply after layout, so the
	   element still occupies the same 12x16 flex slot at the right edge as every
	   other chevron. `contain` renders the glyph 12x6.6 in that box, which comes
	   out 6.6x12 once turned, so it stays inside its own slot. */
	#offcanvasNavbar .header__menu > .nav-item > .nav-link:not(.dropdown-toggle)::after {
		content: "";
		display: inline-block;
		position: static;
		flex: 0 0 auto;
		/* Same 6px as the dropdown chevrons above, for the same reason: the icon
		   frame is 24 wide and the glyph is centred in it, landing on x=333 with
		   the X. Rotating does not move the element's box, so the offset is
		   identical for the right-pointing one. */
		margin: 0 6px 0 auto;
		width: 0.75em;
		height: 1em;
		font-size: 16px;
		border: none;
		vertical-align: baseline;
		background-color: currentColor;
		transform: rotate(-90deg);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* The language row is just another row, and teal is a STATE, not its identity.
	   It was hardcoded teal in both states here, on the strength of "mobile menu 5"
	   (30580:23488) — but that frame has the dropdown open, which is exactly when
	   teal is correct. "mobile menu 1" (30580:23432) is the same menu collapsed,
	   and there `en` is #34383c like `resources`, `services` and `about`, with a
	   #34383c chevron to match. Teal marks an open dropdown and the active choice
	   inside it; nothing else. */
	#offcanvasNavbar .lang__menu > .nav-item > .nav-link {
		/* !important only to out-rank `.lang__menu .dropdown-toggle { padding
		   !important }` in this file's own <992px block, which made this row 49px
		   tall against the frame's 23. */
		padding: 16px 0 15px !important;
		margin: 0 !important;
		width: 100%;
	}

	/* ---- Row colour, all four rows, both states ------------------------------
	   One place, because the convention is one rule: #34383c at rest, #408897 when
	   the dropdown is open, and #408897 on the active choice inside it. Nothing
	   else is teal.

	   Both declarations need !important, and the reason is line 8 of this file:
	   `.header .dropdown-toggle { color: inherit !important }`. That single
	   declaration is why the rows disagreed. It out-ranks `.header__menu .nav-link
	   { color: #34383c }` and main.min.css's `.offcanvas-body .header__menu
	   .dropdown-toggle.show { color: #408897 }` — neither of which is !important —
	   so the three dropdown rows inherited #5d636a from .offcanvas-body at rest and
	   never went teal when opened, while the leaf row ("Case Studies"), not being a
	   .dropdown-toggle, kept its #34383c. Hence Case Studies reading darker than
	   its neighbours.

	   `.show` is a class, so the open rule beats the rest rule on specificity
	   (1,4,0 against 1,3,0) rather than on source order.

	   The chevrons need nothing here: the global chevron rule paints them with
	   `background-color: currentColor`, so they track the label, and the existing
	   `.dropdown-toggle.show::after { color: #408897 !important }` carries them
	   into the open state. */
	#offcanvasNavbar .header__menu > .nav-item > .nav-link,
	#offcanvasNavbar .lang__menu > .nav-item > .nav-link {
		color: #34383c !important;
	}
	#offcanvasNavbar .header__menu > .nav-item > .nav-link.show,
	#offcanvasNavbar .lang__menu > .nav-item > .nav-link.show {
		color: #408897 !important;
	}
	/* No background-color override on the chevron: the global chevron rule already
	   paints it with `background-color: currentColor`, so it tracks the label — dark
	   at rest, and teal on open via `.dropdown-toggle.show::after { color }`. The
	   hardcoded teal that used to sit here defeated both. */

	/* The <992px block above tints an open dropdown-toggle #F0F8F9. The frame has no
	   fill on this row — it reads as a heading, not a pressed control. */
	#offcanvasNavbar .lang__menu .dropdown-toggle.show,
	#offcanvasNavbar .lang__menu .dropdown-toggle:focus,
	#offcanvasNavbar .lang__menu .dropdown-toggle:hover {
		background-color: transparent;
	}

	/* The panel is space-between: the `bottom` group sits at the bottom of the
	   drawer rather than under the links. margin-top:auto on the group's first
	   child is that, in flexbox — the CTA follows it, so both travel down. */
	#offcanvasNavbar .offcanvas-body {
		display: flex;
		flex-direction: column;
		min-height: calc(100% - 51px);
	}
	.rs-nav-search {
		margin-top: auto;
	}

	/* Drawer CTA — atom/btns color=black device=mobile (43771:35815): 335x44,
	   radius 4, Montserrat 700 14px, white label, full width, 16px under the
	   search field. The fill and every state come from .btn-dark, which is why
	   none of that is restated here.

	   The box is: `.btn.btn-atom` in main.min.css is the DESKTOP atom — 48px tall
	   at 16px — and it loads after this file, so matching it on specificity would
	   lose. #offcanvasNavbar (1,1,0) clears its (0,2,0), the same way
	   `.header .btn-warning.rs-nav-cta` restates these numbers for the yellow
	   button in the closed header. */
	#offcanvasNavbar .rs-nav-cta-drawer,
	#offcanvasNavbar .rs-nav-cta-drawer:hover,
	#offcanvasNavbar .rs-nav-cta-drawer:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		margin-top: 16px;
		padding: 0 30px;
		border-radius: 4px;
		font-size: 14px;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* wp_nav_menu emits `ms-auto` on this list. It was inert while the body was a
	   block; in a flex column margin-left:auto right-aligns the whole menu, so it
	   has to be cancelled — and it is a Bootstrap utility, hence !important. */
	#offcanvasNavbar .offcanvas-body .header__menu,
	#offcanvasNavbar .offcanvas-body .lang__menu {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100%;
	}

	/* ---- Sub-links inside an expanded row (43765:35676) -----------------------
	   The pattern the language list used to carry, moved onto the section menus,
	   which is where the new frames put it: a dot before the label, teal on the
	   page you are on, invisible on the others.

	   `res-expanded` is a col with gap 8 holding a 24-tall header row and the links
	   block, inside the .nav-item's [10,10,10,16] padding — hence margin-top 8 and
	   no padding of its own. The links block itself is a 10-gap column of 26-tall
	   rows: 4 x 26 + 3 x 10 = 134, which with 10 + 24 + 8 + 10 is the frame's 186.

	   `display: flex` stays gated on .show. Declared unconditionally it beats
	   Bootstrap's `.dropdown-menu { display: none }` — an id selector against a
	   class — and the list renders permanently expanded with aria-expanded="false"
	   and no .show class, which is exactly the bug the language row shipped with.
	   Layout is what wants flex, not visibility, so only `display` sits on .show. */
	#offcanvasNavbar .header__menu .dropdown-menu {
		flex-direction: column;
		gap: 10px;
		padding: 0;
		margin: 8px 0 0;
		border: 0;
		box-shadow: none;
		background: none;
	}
	#offcanvasNavbar .header__menu .dropdown-menu.show {
		display: flex;
	}
	#offcanvasNavbar .header__menu .dropdown-menu .dropdown-item {
		display: flex;
		align-items: center;
		gap: 0;
		width: -moz-fit-content;
		width: fit-content;
		min-height: 26px;
		padding: 0;
		font-size: 14px;
		line-height: 1.6;
		font-weight: 600;
		color: #5d636a;
		background: none;
	}
	/* Teal marks the page you are on. `.active` is Bootstrap's; `.current-menu-item`
	   is what WordPress puts on the <li>, and the walker does not copy it onto the
	   <a>, so both routes are needed. */
	#offcanvasNavbar .header__menu .dropdown-menu .dropdown-item.active,
	#offcanvasNavbar .header__menu .dropdown-menu .current-menu-item > .dropdown-item {
		color: #408897;
	}
	/* FA `circle-small` at 10px paints a 7px dot, centred in a 20x26 icon box with
	   an 8px gap after it, so the label starts at x=28. A 7px circle with 6.5px
	   before and 14.5px after reproduces that (6.5 + 7 + 14.5 = 28) without needing
	   the box as an element of its own. */
	#offcanvasNavbar .header__menu .dropdown-menu .dropdown-item::before {
		content: "";
		position: static;
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin: 0 14.5px 0 6.5px;
		border-radius: 50%;
		background-color: #408897;
		opacity: 0;
	}
	#offcanvasNavbar .header__menu .dropdown-menu .dropdown-item.active::before,
	#offcanvasNavbar .header__menu .dropdown-menu .current-menu-item > .dropdown-item::before {
		opacity: 1;
	}

	/* The language row leaves the drawer body — it is the header switcher now. It
	   stays in the markup because this same offcanvas is the inline desktop nav at
	   >=lg, where the dropdown is still the right control. */
	#offcanvasNavbar .lang__menu {
		display: none;
	}

	/* Slide distance for the scroll-hide. Mobile only — desktop keeps its header. */
	.header.is-hidden {
		top: -60px;
	}

	/* Figma pads the frame 20px each side; Bootstrap's .container gutter is 12px. */
	.header .navbar > .container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Brand is the mark only below lg; the wordmark img is hidden in markup. */
	.header .navbar-brand .logo .logo-wrapper {
		min-height: 44px;
	}

	/* The header row must never break. Bootstrap's .container inside .navbar is
	   flex-wrap: wrap, and revealing the wordmark on open grows the brand from 47
	   to 101 — so with the Polish CTA label the row needs 379px in a 375 viewport
	   and the actions cluster wrapped to a second line, dropping the X 46px below
	   the burger it had just replaced and stretching the navbar 60 -> 99. Measured
	   on /pl/o-remote-sensei/ at 375; EN only escaped it because its label is 26px
	   narrower and the row came to 353.

	   nowrap alone would let flex shrink the brand and clip the wordmark, so brand
	   and toggler are pinned and the squeeze is aimed at the CTA, which ellipsizes
	   and is fading out anyway whenever the wordmark is what needs the room. */
	.header .navbar > .container {
		flex-wrap: nowrap;
	}
	.header .navbar-brand {
		flex: 0 0 auto;
	}
	.header .btn-warning.rs-nav-cta {
		min-width: 0;
	}

	/* CTA + hamburger as one cluster, 12px apart, right-aligned. */
	.rs-nav-actions {
		gap: 12px;
		min-width: 0;
	}

	/* 44px tall, 4px radius, Montserrat 700 14px per the atom/btns mobile variant.
	   max-width keeps a long override label (e.g. "Tell us what you need") from
	   pushing the hamburger off the row; it ellipsizes instead of wrapping. */
	.header .btn-warning.rs-nav-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		padding: 0 20px;
		border-radius: 4px;
		font-size: 14px;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: calc(100vw - 160px);
	}

	.header .navbar-toggler {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.lang__menu .dropdown-menu {
		min-width: 60px;
		top: 80%;
		left: 0;
		margin: 0;
		padding: 0;
		border-radius: 8px;
		overflow: hidden;
	}
	.lang__menu .dropdown-toggle {
		padding: 0.25rem 2rem 0.25rem 0.75rem !important;
		margin: 0.75rem 0;
		border-radius: 6px !important;
	}
	.lang__menu .dropdown-toggle.show {
		background-color: #F0F8F9;
	}
	.lang__menu .dropdown-menu a:hover:before, .lang__menu .dropdown-menu a.active:before {
		right: 8px;
	}
	.btn-close {
		font-size: 0.75rem;
		margin-right: 0.15rem;
	}
	.dropdown-menu {
		padding-top: 0;
		margin-top: 0;
	}
	.header__menu .dropdown-menu, .lang__menu .dropdown-menu {
		box-shadow: none;
	}
	.header__menu .dropdown-menu li a {
		font-weight: normal;
	}
	.dropdown-menu li a, .lang__menu li a {
		color: inherit;
		font-size: 0.875rem;
		padding-left: 10px;
		padding-right: 15px;
	}
	.header__menu .dropdown-toggle.show::after, .lang__menu .dropdown-toggle.show::after, .dropdown-toggle.show::after {
		transform: rotate(180deg);
		color: #408897 !important;
	}
	
    .btn-close {
        border: 0 !important;
    }
    
    /* .offcanvas {
        max-width: 300px;
    } */
	.btn-close {
		font-size: 1rem;
	}
    
    .header .navbar-nav {
        font-size: 1rem;
    }
    .header .navbar-nav > .nav-item {
        padding-left: 0;
    }
    .header__menu .nav-link, .lang__menu .nav-link {
        padding:  1rem 0;
    }
    .header .navbar .header__menu .nav-link {
        padding-left: 0;
        padding-right: 0;
    }
	/* The rule lines are gone with the redesign — rows are grey bars now, each with
	   its own radius, so a 1px line between them would cut across them. Both the
	   per-row border below and main.min.css's border-top on the <ul>
	   (`.offcanvas-body .header__menu { border-top: 1px solid #d8e2e3 }`) have to
	   go; that second one this file cannot delete, only override. */
	.header__menu > .nav-item, .lang__menu > .nav-item {
		border-bottom: 0;
	}
	#offcanvasNavbar .offcanvas-body .header__menu {
		border-top: 0;
	}
	.header__menu > .nav-item .nav-link, .lang__menu > .nav-item .nav-link {
		border-radius: 0;
		border: 0 !important;
	}
    
    .header__menu .dropdown-toggle::after, .lang__menu .dropdown-toggle::after {
        position: absolute;
        right: 10px;
        top: 20px;
    }
}

@media (min-width: 992px) {
	/* header-desktop-eng (566:189, a COMPONENT — 5351:6205 is a stale duplicate
	   frame) is 1440x76 with the 1px stroke INSIDE, so the edge lives within the
	   76 rather than adding to it. Bootstrap's `py-lg-3` carries !important, so its
	   16px has to be cleared here or 16 + 46 + 16 + 1px lands on 80.

	   That overshoot was also the overlap: main.min.css reserves exactly 76 for
	   the fixed header (`html body` at min-width:992), so an 80px navbar hid the
	   top 4px of every desktop page. Pinning the navbar to the frame's 76 fixes
	   both at once. box-sizing is border-box, so min-height includes the border,
	   and the navbar's own align-items:center centres the row in the other 75. */
	.header .navbar {
		min-height: 76px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.lang__menu .dropdown-menu {
		min-width: 80px;
	}
	.header__menu .dropdown-menu .nav-item a {
		padding-left: 2rem;
		position: relative;
	}
	.navbar-nav .nav-item .nav-link:hover {
		background-color: #F0F8F9;
	}
	.lang__menu li a {
		padding-right: 2rem;
		position: relative;
	}
    .header .navbar-nav > .nav-item + .nav-item {
        margin-left: 1rem;
    }
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    .header .navbar-nav > .nav-item {
        margin: 0 !important;
/*         padding-left: 1rem; */
    }
    .header .navbar .nav-link {
        padding: 10px 16px;
    }
	
	/* 	Fix when click some drop-down parent */
	.dropdown-menu[data-bs-popper] {
		left: auto;
	}
}

/* === Fix: prevent sticky author-photo horizontal jump caused by the document scrollbar appearing/disappearing during scroll (re-centers in-flow content while the fixed photo stays). Reserving the scrollbar keeps content width constant. Scoped to author pages. RS 2026-06-10 === */
html:has(body.author) { overflow-y: scroll; }