/* ==========================================================================
   Orion Main Header — Custom CSS (no Tailwind utility classes)
   Breakpoints match the project's real Tailwind config, NOT Tailwind
   defaults: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752

   JS-hook classes (header, nav-right, mobile-nav, navbar, logo-box,
   header-btn, searchBox, search-suggestions-panel, hidden, max-h-0,
   no-toggle-color, header-lg, header-three, group/search, search-buttonDark)
   are preserved verbatim in the markup and are NOT redefined here — their
   rules already live in orion-tailwind.css / the JS itself. This file only
   supplies the layout/spacing/color rules that used to come from Tailwind
   utility classes.
   ========================================================================== */

/* ── Scrolled (sticky) state: force menu text black on styles ────────
   1 & 4, whose default menu color is white. Targets the new semantic
   classes directly so it doesn't depend on the older overrides file. ── */
.header.sticky-header .oh1__menu .nav-tab,
.header.sticky-header .oh1__menu .dropdown-text,
.header.sticky-header .oh4__menu .nav-tab,
.header.sticky-header .oh4__menu .dropdown-text {
    color: #000 !important;
}

.header.sticky-header .oh1__menu .dropdown-svg,
.header.sticky-header .oh4__menu .dropdown-svg,
.header.sticky-header .oh1__menu .dropdown-toggle svg,
.header.sticky-header .oh4__menu .dropdown-toggle svg {
    stroke: #000 !important;
    color: #000 !important;
}

/* ── Shared across styles 1/2/4 ─────────────────────────── */
.oh__logo-link {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    background: #fff;
    transition: all .15s;
}
@media (min-width: 640px) { .oh__logo-link { padding-top: 16px; padding-bottom: 16px; } }
@media (min-width: 1752px) { .oh__logo-link { padding-top: 28px; padding-bottom: 28px; } }
@media (min-width: 1380px) { .oh__logo-link { padding-left: 40px; padding-right: 40px; } }

/* Sticking shrinks the logo box on its own vertical schedule
   (".header.sticky-header .logo-box" in the reference), which is what takes
   the sticky bar from 84px down to 80px at desktop widths. Horizontal padding
   is unchanged from the static state. This is a JS-toggled state class, so it
   can't come from an Elementor control. */
.orion-html-header .header.sticky-header .oh__logo-link { padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 640px)  { .orion-html-header .header.sticky-header .oh__logo-link { padding-top: 16px; padding-bottom: 16px; } }
@media (min-width: 769px)  { .orion-html-header .header.sticky-header .oh__logo-link { padding-top: 20px; padding-bottom: 20px; } }
@media (min-width: 992px)  { .orion-html-header .header.sticky-header .oh__logo-link { padding-top: 12px; padding-bottom: 12px; } }
@media (min-width: 1380px) { .orion-html-header .header.sticky-header .oh__logo-link { padding-top: 14px; padding-bottom: 14px; } }
@media (min-width: 1752px) { .orion-html-header .header.sticky-header .oh__logo-link { padding-top: 20px; padding-bottom: 20px; } }

/* Inner ("pages", i.e. not the front page) logo box: solid brand-color
   block behind the white logo variant — Home keeps the plain white box
   above untouched. Added by orion_render_main_header() via an extra
   modifier class, never by editing the base rule. */
.oh__logo-link--inner,
.oh2__logo-link--inner {
    background-color: var(--orion-primary);
}

/* Prefixed with .orion-html-header so these beat Elementor's own
   `.elementor img { height: auto }` (0,1,1), which otherwise outranks a bare
   class selector and collapses the logo to its intrinsic aspect ratio. */
.orion-html-header .oh__logo-img-md { height: 36px; }
@media (min-width: 992px) { .orion-html-header .oh__logo-img-md { height: 44px; } }
@media (min-width: 1199px) { .orion-html-header .oh__logo-img-md { height: 56px; } }

.oh__actions { height: auto; display: flex; align-items: center; gap: 5px; }
.oh__my-auto { margin-top: auto; margin-bottom: auto; }

/* CTA button renders twice (matching the reference): once inside the
   mobile nav list, once in the desktop actions row — only one of the
   two is ever visible at a given width. */
.oh__cta-desktop { display: none; }
@media (min-width: 992px) { .oh__cta-desktop { display: flex; } }

.oh__cta-mobile-item { display: flex; }
@media (min-width: 992px) { .oh__cta-mobile-item { display: none; } }

.oh__nav-flex { display: flex; align-items: stretch; justify-content: space-between; margin: 0 auto; }
.oh__mobile-nav-default { width: 100%; }
@media (min-width: 992px) { .oh__mobile-nav-default { width: auto; } }

/* Mega panels: style1/4 use oh__dropdown-container (= theme .container caps
   992/1199/1380/1752). Style2 nav swaps in .container-2 (1170/1260/1472).
   sm/md caps omitted so the panel stays full-bleed below 992 like HTML. */
.oh__dropdown-container { width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 992px) { .oh__dropdown-container { max-width: 992px; } }
@media (min-width: 1199px) { .oh__dropdown-container { max-width: 1199px; } }
@media (min-width: 1380px) { .oh__dropdown-container { max-width: 1380px; } }
@media (min-width: 1752px) { .oh__dropdown-container { max-width: 1752px; } }
/* The mega panels wrap their content in `lg:container mx-auto px-4`, which
   keeps the 16px gutter at every width. The plain "Pages" dropdown uses
   `lg:px-0 px-4` instead — its gutter only exists on the stacked mobile
   sheet, and keeping it at desktop shrank the list by 32px and wrapped the
   longer labels onto two lines. */
@media (min-width: 992px) {
    .pages .oh__dropdown-container,
    .pages .container-2 { padding-left: 0; padding-right: 0; }
}

.oh__overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, .31); z-index: 40; }

/* Shared search elements (styles 1, 2, 4) */
.oh__search-container { width: 100%; display: flex; align-items: center; height: 100%; }
.oh__search-toggle { display: flex; align-items: center; gap: 8px; position: relative; height: 100%; }
.oh__search-button {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 8px;
    padding: 8px 0;
    border-radius: 9999px;
    cursor: pointer;
    transition: all .3s;
}
.oh__search-icon { display: flex; align-items: center; width: 20px; height: 20px; }
@media (min-width: 1752px) { .oh__search-icon { width: 24px; height: 24px; } }

.oh__search-box {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0 auto !important;
    max-width: 90%;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    transition: all .5s ease-in-out;
}
/* JS only ever removes the "hidden" class to open this box, so max-height
   has to be released here or it stays collapsed at 0. The reference leaves
   it uncapped and animates width/opacity instead, so a fixed cap here would
   clip the bar once the input grows past it. */
.oh__search-box:not(.hidden) {
    max-height: none;
}
@media (min-width: 992px) {
    .oh__search-box { margin-left: 0 !important; margin-right: 0 !important; padding-right: 60px; max-width: 93%; }
}
@media (min-width: 1199px) { .oh__search-box { max-width: 87%; } }
@media (min-width: 1380px) { .oh__search-box { padding-right: 90px; } }
@media (min-width: 1752px) { .oh__search-box { padding-right: 100px; max-width: 84%; } }

.oh__search-suggestions {
    border-top: 1px solid #E2E2E2;
    max-height: 75vh;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    left: auto;
    width: 100%;
    background: #fff;
}
@media (min-width: 992px) { .oh__search-suggestions { right: 60px; width: 73%; } }
@media (min-width: 1199px) { .oh__search-suggestions { width: 70%; } }
@media (min-width: 1380px) { .oh__search-suggestions { right: 90px; } }
@media (min-width: 1752px) { .oh__search-suggestions { right: 100px; } }

/* ── Style 1 — index.html (transparent over hero) ───────── */
.oh1 { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; }

/* Inner pages using style1 (i.e. not the front page): normal document
   flow instead of floating transparent over the hero, and black menu
   text instead of white — set via orion_render_main_header() swapping
   "oh1" for this class, never by editing the base .oh1 rule above (which
   Home still uses, untouched).

   #orion-header-inner (an ID, added by orion_render_main_header() only in
   this same case) plus !important are both required: the orion-main-header
   widget's own "Menu Color" style control bakes rules like
   ".elementor-9325 .elementor-element.elementor-element-<uid> .orion-html-header
   .nav-tab { color:#fff !important }" into Elementor's per-post generated
   CSS — 5 classes deep, so even a heavily-compounded class selector on our
   side only ties on specificity and can still lose on stylesheet order. An
   ID selector always outranks any number of classes, tie or no tie. */
.oh1--inner { position: relative; width: 100%; z-index: 50; }
#orion-header-inner .navbar,
#orion-header-inner .navbar .nav-tab,
#orion-header-inner .navbar .dropdown-text,
#orion-header-inner .navbar a {
    color: #000 !important;
}
#orion-header-inner .navbar .dropdown-svg,
#orion-header-inner .navbar .dropdown-toggle svg {
    stroke: #000 !important;
    color: #000 !important;
}
#orion-header-inner svg{
    fill: #000 !important;
}
/*
 * Stroke-only chevrons must stay unfilled. The rule above beats the SVG
 * fill="none" attribute and turns open paths (e.g. Pages submenu arrows)
 * into solid triangles.
 */
#orion-header-inner .oh__pages-arrow,
#orion-header-inner .oh__pages-arrow path,
#orion-header-inner .dropdown-svg,
#orion-header-inner .dropdown-svg path,
#orion-header-inner .dropdown-arrow-area,
#orion-header-inner .navbar .dropdown-toggle > svg,
#orion-header-inner .navbar .dropdown-toggle > svg path,
#orion-header-inner .orion-projects-mega-arrow svg,
#orion-header-inner .orion-projects-mega-arrow svg path {
    fill: none !important;
}

.oh1__logo-wrap { flex-shrink: 0; max-width: 140px; }
@media (min-width: 769px) { .oh1__logo-wrap { max-width: 180px; } }
@media (min-width: 1199px) { .oh1__logo-wrap { max-width: 200px; } }
@media (min-width: 1380px) { .oh1__logo-wrap { max-width: 250px; } }
@media (min-width: 1752px) { .oh1__logo-wrap { max-width: 100%; } }

.orion-html-header .oh1__logo-img { height: 36px; }
@media (min-width: 1199px) { .orion-html-header .oh1__logo-img { height: 52px; } }
@media (min-width: 1752px) { .orion-html-header .oh1__logo-img { height: 56px; } }

.oh1__nav-right {
    display: flex;
    justify-content: flex-end;
    background: transparent;
    gap: 16px;
    width: 100%;
    padding-right: 16px;
}
@media (min-width: 992px) { .oh1__nav-right { gap: 24px; padding-right: 60px; } }
@media (min-width: 1199px) { .oh1__nav-right { gap: 40px; } }
@media (min-width: 1380px) { .oh1__nav-right { gap: 48px; padding-right: 90px; } }
@media (min-width: 1752px) { .oh1__nav-right { gap: 60px; padding-right: 100px; } }

.oh1__menu {
    font-weight: 500;
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-direction: column;
    color: #fff;
    text-transform: uppercase;
}
@media (min-width: 992px) { .oh1__menu { flex-direction: row; margin-top: 0; } }

.oh1__nav-item { padding-left: 16px; padding-right: 16px; }
@media (min-width: 992px) { .oh1__nav-item { padding-left: 10px; padding-right: 10px; } }
@media (min-width: 1199px) { .oh1__nav-item { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 1752px) { .oh1__nav-item { padding-left: 18px; padding-right: 18px; } }

/* ── Style 2 — index-2.html / inner pages (white bar) ───── */
.oh2 { position: relative; width: 100%; background: #fff; z-index: 50; }
.oh2__nav { background: #fff; }

.oh2__logo-wrap { flex-shrink: 0; max-width: 140px; }
@media (min-width: 769px) { .oh2__logo-wrap { max-width: 126px; } }
@media (min-width: 992px) { .oh2__logo-wrap { max-width: 180px; } }
@media (min-width: 1199px) { .oh2__logo-wrap { max-width: 200px; } }
@media (min-width: 1380px) { .oh2__logo-wrap { max-width: 230px; } }
@media (min-width: 1752px) { .oh2__logo-wrap { max-width: 100%; } }

.oh2__logo-link {
    display: flex;
    align-items: center;
    /* Shorthand !important must be mirrored on every breakpoint override,
       otherwise sticky/base 8px padding wins over the HTML py schedule. */
    padding: 8px 10px 8px 0 !important;
    background: #fff;
    transition: all .15s;
}
@media (min-width: 640px) {
	.oh2__logo-link { padding-top: 16px !important; padding-bottom: 16px !important; }
}
@media (min-width: 769px) {
	.oh2__logo-link { padding-top: 20px !important; padding-bottom: 20px !important; }
}
@media (min-width: 992px) {
	.oh2__logo-link {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		padding-right: 20px !important;
	}
}
@media (min-width: 1380px) {
	.oh2__logo-link {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
		padding-right: 40px !important;
	}
}
@media (min-width: 1752px) {
	.oh2__logo-link { padding-top: 28px !important; padding-bottom: 28px !important; }
}
/* Scrolled sticky bar — match HTML .sticky-header .logo-box compression */
.orion-html-header .header.sticky-header .oh2__logo-link {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.oh2__nav-right { display: flex; justify-content: flex-end; gap: 16px; width: 100%; background: transparent; }
@media (min-width: 992px) { .oh2__nav-right { gap: 24px; } }
@media (min-width: 1199px) { .oh2__nav-right { gap: 40px; } }
@media (min-width: 1380px) { .oh2__nav-right { gap: 48px; } }
@media (min-width: 1752px) { .oh2__nav-right { gap: 60px; } }

.oh2__menu {
    font-weight: 500;
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-direction: column;
    color: #000;
    text-transform: uppercase;
    padding: 16px;
    padding-top: 0;
}
@media (min-width: 992px) { .oh2__menu { padding: 0; flex-direction: row; margin-top: 0; } }

.oh2__nav-item { }
@media (min-width: 640px) { .oh2__nav-item { padding-left: 6px; padding-right: 6px; } }
@media (min-width: 992px) { .oh2__nav-item { padding-left: 10px; padding-right: 10px; } }
@media (min-width: 1199px) { .oh2__nav-item { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 1752px) { .oh2__nav-item { padding-left: 18px; padding-right: 18px; } }

/* ── Style 3 — index-3.html (floating rounded pill) ─────── */
/* Real .container schedule, scoped — the bare .container class is reset
   to max-width:none by a legacy ".elementor-page .container" rule in
   style.css, so this wrapper uses its own class instead. */
.oh3__wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .oh3__wrapper { max-width: 640px; } }
@media (min-width: 769px)  { .oh3__wrapper { max-width: 769px; } }
@media (min-width: 992px)  { .oh3__wrapper { max-width: 992px; } }
@media (min-width: 1199px) { .oh3__wrapper { max-width: 1199px; } }
@media (min-width: 1380px) { .oh3__wrapper { max-width: 1380px; } }
@media (min-width: 1752px) { .oh3__wrapper { max-width: 1752px; } }

.oh3 {
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    height: fit-content;
    z-index: 50;
    transition: all .15s;
    background: transparent !important;
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 769px) { .oh3 { top: 24px; } }
@media (min-width: 992px) { .oh3 { height: auto; } }

.oh3__inner-nav {
    background: #fff;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    transition: all .15s;
    position: relative;
}
@media (min-width: 1752px) { .oh3__inner-nav { padding-left: 28px; padding-right: 28px; } }

.oh3__logo-wrap { flex-shrink: 0; max-width: 109px; margin-left: 8px; }
@media (min-width: 640px) { .oh3__logo-wrap { max-width: 124px; } }
@media (min-width: 769px) { .oh3__logo-wrap { max-width: 135px; } }
@media (min-width: 992px) { .oh3__logo-wrap { margin-left: 0; } }
@media (min-width: 1199px) { .oh3__logo-wrap { max-width: 150px; margin-left: 8px; } }
@media (min-width: 1752px) { .oh3__logo-wrap { margin-left: 20px; } }

.oh3__logo-link { display: flex; align-items: center; }
.oh3__logo-img { width: 100%; }

.oh3__nav-right { display: flex; justify-content: flex-end; height: 100%; width: 100%; background: transparent !important; }

.oh3__mobile-nav {
    width: 100%;
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 28px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 12px;
    background: transparent !important;
}
@media (min-width: 769px) { .oh3__mobile-nav { width: auto; border-radius: 0; } }
@media (min-width: 992px) { .oh3__mobile-nav { margin-top: 0; overflow: visible; } }

.oh3__menu {
    font-weight: 400;
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-direction: column;
    color: #000;
    text-transform: uppercase;
    padding: 16px;
    width: 100%;
    border-radius: 20px;
}
@media (min-width: 640px) { .oh3__menu { border-radius: 30px; } }
@media (min-width: 992px) { .oh3__menu { padding: 0; flex-direction: row; margin-top: 0; } }

/* Logo link has no text but inherits theme `a { color: primary }` */
.oh3__logo-link,
.oh3__logo-wrap a {
	color: inherit;
}

/* Theme `a { color: primary }` beats inheritance — HTML style-3 nav is black */
.oh3__menu .nav-tab,
.oh3__menu .nav-tab-2,
.oh3__menu .dropdown-text,
.oh3 .navbar .nav-tab,
.oh3 .navbar a.nav-tab {
	color: #000 !important;
}
.oh3__menu .nav-tab:hover,
.oh3__menu .nav-tab-2:hover,
.oh3 .navbar .nav-tab:hover {
	color: var(--orion-primary) !important;
}

.oh3__nav-item { padding-left: 6px; padding-right: 6px; }
@media (min-width: 1199px) { .oh3__nav-item { padding-left: 10px; padding-right: 10px; } }
@media (min-width: 1380px) { .oh3__nav-item { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 1752px) { .oh3__nav-item { padding-left: 18px; padding-right: 18px; } }

.oh3__dropdown-round { border-radius: 20px; overflow: hidden !important; }
@media (min-width: 992px) { .oh3__dropdown-round { border-radius: 50px; } }

/* Pages plain dropdown — HTML: lg:rounded-none rounded-[20px].
   Never use overflow:hidden on desktop: nested .pages-submenu-panel
   flyouts sit outside this box and would be clipped. */
.oh3__pages-dropdown {
	border-radius: 20px;
}
@media (max-width: 991px) {
	.oh3__pages-dropdown { overflow: hidden; }
}
@media (min-width: 992px) {
	.oh3__pages-dropdown {
		border-radius: 0;
		overflow: visible !important;
	}
}

/* Sticky header-3 (HTML .header-three.sticky-header):
   Floating pill → full-bleed bar. Mega/dropdown must match: full width,
   no border-radius. Unlayered here so it beats Tailwind @layer utilities
   AND the resting .oh3__dropdown-round / .oh3__inner-nav radius rules. */
.oh3__wrapper:has(.oh3.sticky-header) {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.oh3.sticky-header {
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	z-index: 100;
	border-radius: 0;
}
.oh3.sticky-header .oh3__inner-nav,
.oh3.sticky-header .header-3 {
	width: 100%;
	max-width: none;
	border-radius: 0;
}
.oh3.sticky-header .oh3__mobile-nav,
.oh3.sticky-header .oh3__menu,
.oh3.sticky-header .navbar {
	border-radius: 0;
	margin-top: 0;
}
.oh3.sticky-header .oh3__dropdown-round,
.oh3.sticky-header .dropdown-menu,
.oh3.sticky-header .search-suggestions-panel,
.oh3.sticky-header .oh3__search-suggestions {
	border-radius: 0 !important;
}
/* Keep mega/dropdown panels unclipped when the bar is fixed. */
.oh3.sticky-header,
.oh3.sticky-header .oh3__inner-nav,
.oh3.sticky-header .oh3__nav-right,
.oh3.sticky-header .oh3__mobile-nav,
.oh3.sticky-header .oh3__menu {
	overflow: visible !important;
}
/* Rounded mega still clips its own corners at rest; sticky is square so
   overflow can stay visible (Pages flyouts). Open mega: no radius clip. */
.oh3.sticky-header .dropdown-menu.open.oh3__dropdown-round {
	overflow: visible;
	border-radius: 0 !important;
}

.oh3__actions { height: auto; display: flex; align-items: center; gap: 6px; margin-left: 12px; }
@media (min-width: 640px) { .oh3__actions { gap: 12px; } }
@media (min-width: 1199px) { .oh3__actions { gap: 16px; margin-left: 40px; } }
@media (min-width: 1380px) { .oh3__actions { margin-left: 44px; } }

.oh3__cta { border-radius: 9999px; height: fit-content; width: fit-content; margin-top: auto; margin-bottom: auto; display: none !important; }
@media (min-width: 992px) { .oh3__cta { display: flex !important; } }

.oh3__search-container { width: 100%; }
.oh3__search-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all .15s ease-in-out;
    padding: 8px;
    position: relative;
}
@media (min-width: 992px) { .oh3__search-toggle { padding: 10px; } }
@media (min-width: 1199px) { .oh3__search-toggle { padding: 12px; } }

/*
 * Style-3 search-buttonDark: Elementor's per-template CSS sets
 * `#searchToggleWrapper { color:#000 !important }` at ~1ID+4classes
 * (unlayered), which beats Tailwind `@layer utilities` white color/fill
 * and leaves a black icon on the black circle. Mirror HTML: white icon
 * on black at lg+, black icon on white below.
 */
.elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle,
.elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark {
    background-color: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
    fill: #000 !important;
}
.elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle svg,
.elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle svg path,
.elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark svg,
.elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark svg path {
    fill: #000 !important;
    color: #000 !important;
}
@media (min-width: 992px) {
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark {
        background-color: #000 !important;
        color: #fff !important;
        fill: #fff !important;
    }
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle svg,
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle svg path,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark svg,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark svg path {
        fill: #fff !important;
        color: #fff !important;
    }
}
@media (hover: hover) {
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle:hover,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark:hover {
        background-color: #000 !important;
        color: #fff !important;
        fill: #fff !important;
    }
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle:hover svg,
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle:hover svg path,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark:hover svg,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark:hover svg path {
        fill: #fff !important;
        color: #fff !important;
    }
}
@media (min-width: 992px) and (hover: hover) {
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle:hover,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark:hover {
        background-color: #fff !important;
        color: #000 !important;
        fill: #000 !important;
    }
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle:hover svg,
    .elementor .elementor-element .orion-html-header #searchToggleWrapper.oh3__search-toggle:hover svg path,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark:hover svg,
    .elementor .elementor-element .orion-html-header .oh3__search-toggle.search-buttonDark:hover svg path {
        fill: #000 !important;
        color: #000 !important;
    }
}

.oh3__search-button { align-items: center; gap: 8px; }

.oh3__search-icon { display: flex; align-items: center; width: 16px; height: 16px; transition: all .15s ease-in-out; }
@media (min-width: 640px) { .oh3__search-icon { width: 20px; height: 20px; } }
@media (min-width: 1752px) { .oh3__search-icon { width: 24px; height: 24px; } }

/* Collapsed by default (like the shared .oh__search-box) — JS only ever
   toggles the "hidden" class, so the expand/collapse height must come
   from CSS here or the box stays permanently expanded regardless. */
.oh3__search-box {
    position: absolute;
    top: 100%;
    right: 0;
    border-radius: 9999px;
    margin: 8px auto 0;
    max-width: calc(100% - 5%);
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    transition: all .5s ease-in-out;
    z-index: 20;
}
.oh3__search-box:not(.hidden) { max-height: 120px; }
@media (min-width: 992px) {
    .oh3__search-box { right: -2px !important; margin-left: 0 !important; margin-right: 0 !important; padding-right: 60px; margin-top: 0; }
}
@media (min-width: 1380px) { .oh3__search-box { padding-right: 90px; } }
@media (min-width: 1752px) { .oh3__search-box { padding-right: 100px; } }

.oh3__search-suggestions {
    border-top: 1px solid #E2E2E2;
    max-height: 75vh;
    overflow-y: auto;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
@media (min-width: 992px) { .oh3__search-suggestions { border-radius: 50px; } }

/* ── Style 4 — index-4.html (dark green bar) ────────────── */
.oh4 { position: relative; top: 0; left: 0; width: 100%; z-index: 50; background: var(--orion-primary); }

/* Hovering the header (JS adds .bg-white, same class the sticky-scroll
   state uses) should match the sticky state's white background — the
   sticky state gets this via an Elementor "!important" control targeting
   ".sticky-header" specifically, which doesn't cover the hover-only case. */
.oh4.bg-white { background-color: #fff; }

/* The CTA swaps between .btn-green-bg (rest) and .btn-dark-reverse
   (header/hover white state, matching the sticky-scroll look) via JS —
   but the site's global "a { color: ... }" rule in style.css is an
   unlayered declaration, and CSS cascade layers mean ANY unlayered rule
   beats a layered one (Tailwind's utility classes) regardless of
   specificity. These explicit, unlayered rules are needed so the CTA's
   text color actually follows the swapped class instead of getting stuck
   on the site-wide link color. */
.header-btn.btn-green-bg { color: #000; }
.header-btn.btn-dark-reverse { color: #fff; }

.oh4__logo-wrap { flex-shrink: 0; max-width: 140px; }
@media (min-width: 992px) { .oh4__logo-wrap { max-width: 170px; } }
@media (min-width: 1199px) { .oh4__logo-wrap { max-width: 200px; } }
@media (min-width: 1380px) { .oh4__logo-wrap { max-width: 250px; } }
@media (min-width: 1752px) { .oh4__logo-wrap { max-width: 100%; } }

.oh4__nav-right {
    display: flex;
    justify-content: flex-end;
    background: transparent;
    gap: 16px;
    width: 100%;
    padding-right: 16px;
}
@media (min-width: 992px) { .oh4__nav-right { gap: 24px; } }
@media (min-width: 1199px) { .oh4__nav-right { gap: 40px; padding-right: 40px; } }
@media (min-width: 1380px) { .oh4__nav-right { gap: 48px; padding-right: 90px; } }
@media (min-width: 1752px) { .oh4__nav-right { gap: 60px; padding-right: 100px; } }

.oh4__menu {
    font-weight: 400;
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-direction: column;
    color: #fff;
    text-transform: uppercase;
}
@media (min-width: 992px) { .oh4__menu { flex-direction: row; margin-top: 0; } }

/* The global "a { color: var(--orion-primary) }" rule (a plain element
   selector) beats the inherited white from .oh4__menu for any <a> inside
   it, since inheritance always loses to an explicit rule of any
   specificity — so nav links need their own explicit white override. */
.oh4__menu .nav-tab,
.oh4__menu .dropdown-text {
    color: #fff;
}

.oh4__nav-item { padding-left: 16px; padding-right: 16px; }
@media (min-width: 992px) { .oh4__nav-item { padding-left: 8px; padding-right: 8px; } }
@media (min-width: 1199px) { .oh4__nav-item { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 1752px) { .oh4__nav-item { padding-left: 18px; padding-right: 18px; } }

.oh4__actions { height: auto; display: flex; align-items: center; gap: 5px; }
@media (min-width: 992px) { .oh4__actions { gap: 12px; } }
@media (min-width: 1199px) { .oh4__actions { gap: 24px; } }
@media (min-width: 1752px) { .oh4__actions { gap: 32px; } }

/* ── Search Suggestions Panel (orion_header_search_suggestions()) ─────
   Replaces the previous Tailwind utility markup. Values reproduce the
   original classes exactly, including 1xl (1380px) and !important
   variants that Tailwind's JIT never actually compiled (dead classes in
   the old markup) — this restores the intended responsive schedule. ── */

.oh__suggestions-inner {
    padding: 12px 0;
    width: 90%;
    margin-inline: auto;
}
/* The reference's `lg:!p-5` is an important utility, so its 20px vertical
   padding outranks the plain `xl:py-6` at every width above it — only the
   horizontal padding actually steps up. */
@media (min-width: 992px) { .oh__suggestions-inner { padding: 20px; width: 100%; margin-inline: 0; } }
@media (min-width: 1199px) { .oh__suggestions-inner { padding: 20px 28px; } }
@media (min-width: 1752px) { .oh__suggestions-inner { padding: 20px 40px; } }

.oh__suggestions-label {
    color: #4e4e4e;
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 23px;
    font-weight: 500;
    text-transform: uppercase;
}
@media (min-width: 640px) { .oh__suggestions-label { margin-bottom: 20px; font-size: 0.875rem; } }
/* Fixed px steps rather than a ratio — the reference's line-height climbs
   independently of its font-size, which stays at 14px from 640px up. */
@media (min-width: 992px) { .oh__suggestions-label { line-height: 25px; } }
@media (min-width: 1199px) { .oh__suggestions-label { line-height: 26px; } }
@media (min-width: 1380px) { .oh__suggestions-label { line-height: 28px; } }
@media (min-width: 1752px) { .oh__suggestions-label { line-height: 32px; } }

.oh__suggestions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}
@media (min-width: 640px) { .oh__suggestions-grid { grid-template-columns: repeat(3, 1fr); } }

.oh__suggestions-list {
    color: #000;
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    list-style-type: disc;
    padding-left: 18px;
    margin: 0;
}
/* The reference holds a 150% ratio at every step here, so only the
   font-size changes. */
@media (min-width: 769px) { .oh__suggestions-list { font-size: 0.875rem; } }
@media (min-width: 1752px) { .oh__suggestions-list { font-size: 1rem; } }
.oh__suggestions-list li + li { margin-top: 12px; }
@media (min-width: 1380px) { .oh__suggestions-list li + li { margin-top: 16px; } }

.oh__suggestions-list-item,
.oh__suggestions-list-item a {
    color: #000;
}
.oh__suggestions-list-item:hover,
.oh__suggestions-list-item a:hover {
    color: var(--orion-primary);
}

.oh__suggestions-divider {
    height: 0.5px;
    border: 0;
    background-color: #E5E5E5;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 16px;
}
@media (min-width: 640px) { .oh__suggestions-divider { margin-top: 30px; } }
@media (min-width: 1380px) { .oh__suggestions-divider { margin-top: 38px; margin-bottom: 20px; } }

.oh__suggestions-blogs { margin-bottom: 12px; }

.oh__suggestions-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 640px) { .oh__suggestions-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1199px) { .oh__suggestions-blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1752px) { .oh__suggestions-blog-grid { gap: 65px; } }

.oh__suggestions-blog-link {
    display: flex;
    align-items: center;
    gap: 14px;
}
@media (min-width: 1752px) { .oh__suggestions-blog-link { gap: 20px; } }

.oh__suggestions-blog-thumb {
    width: 85px;
    height: 70px;
    flex-shrink: 0;
}
@media (min-width: 1199px) { .oh__suggestions-blog-thumb { width: 95px; height: 75px; } }
@media (min-width: 1752px) { .oh__suggestions-blog-thumb { width: 100px; height: 80px; } }
/* Prefixed so it out-ranks Elementor's `.elementor img { height: auto }`,
   which ties on specificity and would otherwise win on source order,
   letting the thumbnail grow to its natural aspect ratio. */
.orion-html-header .oh__suggestions-blog-thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
/* Live search results (js/orion-header-footer.js) can match content with
   no featured image (e.g. a Page) — show a neutral placeholder box
   instead of an empty gap so the grid stays visually consistent. */
.oh__suggestions-blog-thumb:empty {
    background-color: #f3f3f3;
}

.oh__suggestions-type-badge {
    display: inline-block;
    margin-top: 4px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.oh__suggestions-blog-title {
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    margin: 0;
}
@media (min-width: 769px) { .oh__suggestions-blog-title { font-size: 0.875rem; line-height: 1.4286; } }
@media (min-width: 1752px) { .oh__suggestions-blog-title { font-size: 1rem; line-height: 1.5; } }
.oh__suggestions-blog-link:hover .oh__suggestions-blog-title { color: var(--orion-primary); }

.orion-search-no-results { padding: 30px; }

.oh__suggestions-empty-heading {
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    font-family: var(--font-lexend, "Lexend", sans-serif);
}

/* ── Search Panel (orion_header_search_panel()) ────────────────────
   Replaces the previous Tailwind utility markup on the form/input/close
   controls. JS-hook classes (hidden, opacity-0, opacity-100,
   pointer-events-none) are preserved verbatim in the markup — see the
   file header comment. ── */

.oh__search-close-mobile {
    /* Desktop close button lives inside the search box instead; this one
       is mobile-only. Pairs with the JS-toggled "hidden" class. */
}
@media (min-width: 992px) { .oh__search-close-mobile { display: none; } }

.oh__search-close-svg {
    width: 22px;
    height: 22px;
}
@media (min-width: 640px) { .oh__search-close-svg { width: 24px; height: 24px; } }
.oh__search-close-svg--sm { width: 17px; height: 17px; }
@media (min-width: 640px) { .oh__search-close-svg--sm { width: 24px; height: 24px; } }

.oh__search-form {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    padding-block: 16px;
    gap: 12px;
}
@media (min-width: 640px) { .oh__search-form { gap: 20px; } }
@media (min-width: 769px) { .oh__search-form { gap: 32px; } }
@media (min-width: 1752px) { .oh__search-form { padding-block: 22px; } }

.oh__search-input {
    height: 100%;
    width: 100%;
    padding-right: 12px;
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 300;
    color: #000;
    font-size: 0.875rem;
    line-height: 23px;
    border: 0;
    background: transparent;
}
@media (min-width: 992px) { .oh__search-input { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { .oh__search-input { line-height: 26px; } }
@media (min-width: 1380px) { .oh__search-input { line-height: 28px; } }
@media (min-width: 1752px) { .oh__search-input { font-size: 1.125rem; line-height: 32px; } }
.oh__search-input:focus {
    outline: none;
    box-shadow: none;
}

/* lg:block — overrides the static "hidden" class at desktop widths; the
   actual open/close animation on desktop then uses opacity + pointer-events
   (toggled by JS), not display. */
.oh__search-close-inside {
    color: #000;
    transition-property: all;
    transition-duration: 0.3s;
    transition-delay: 0.2s;
}
@media (min-width: 992px) { .oh__search-close-inside { display: block; } }
.oh__search-close-inside:hover { color: oklch(44.6% .03 256.802); }

/* ── Nav Walker: dropdown / mega menu (Orion_Tailwind_Header_Walker) ──
   .dropdown, .dropdown-toggle, .dropdown-menu, .dropdown-text,
   .dropdown-scroll, .pages-submenu-parent, .pages-submenu-panel,
   .project-arrow are stable/JS-hook class names already used by
   orion-header-footer.js (querySelectors, animateDropdown, etc.) —
   extended in place rather than renamed. "fade-down" was a vestigial
   AOS.js artifact with zero effect as a bare class (confirmed dead) and
   has been dropped from the markup entirely. ── */

.oh__nav-item {
    margin-block: auto;
    display: flex;
    font-family: Lexend, sans-serif;
}
@media (min-width: 992px) { .oh__nav-item { height: 100%; } }

.dropdown {
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 992px) { .dropdown { position: static; } }

/*
 * "Pages" is a plain dropdown (see Orion_Tailwind_Header_Walker), not a
 * mega menu — the reference marks it `lg:relative ... pages` (vs. the real
 * mega menus' `lg:static`) so its .dropdown-menu is positioned relative to
 * the li itself instead of a distant static ancestor. Without this, the
 * child's `width: 100%` (see .dropdown-menu below) resolves against the
 * whole header instead of the li, stretching the narrow list full width
 * like a mega panel.
 */
@media (min-width: 992px) {
    .dropdown.pages { position: relative; }
    .dropdown.pages .dropdown-menu { width: auto; left: auto; right: 0; }
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-block: auto;
    gap: 4px;
}
@media (min-width: 992px) { .dropdown-toggle { height: 100%; gap: 8px; } }

.dropdown-menu {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 50;
    height: 100vh;
    flex-direction: column;
}
@media (min-width: 992px) { .dropdown-menu { top: 100%; height: fit-content; } }

/* Background is an Elementor control (Dropdown Menu > Panel). */
.oh__dropdown-panel--rounded { padding-left: 24px; padding-right: 24px; }
@media (min-width: 1199px) { .oh__dropdown-panel--rounded { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1380px) { .oh__dropdown-panel--rounded { padding-left: 40px; padding-right: 40px; } }

.dropdown-scroll {
    overflow-y: auto;
    height: 100%;
}
/* At desktop widths nested items open as hover flyouts positioned outside
   this element's own box (see .pages-submenu-panel) — overflow-y:auto
   here forces overflow-x to clip too (any axis paired with a non-visible
   other axis stops being "visible" per spec), cutting the flyouts off.
   Only mobile needs this element's own scrollbar (it's the full-height
   stacked menu there); desktop's dropdown-menu already sizes to content
   via height:fit-content, so no scrolling is needed on this wrapper. */
@media (min-width: 992px) { .dropdown-scroll { height: auto; overflow: visible; } }

/* .orion-mega-menu-template-content intentionally carries no padding —
   both templates it wraps (Services/Projects Enhanced widgets, see
   widgets/orion-*-enhanced-widget.php) already replicate the reference's
   exact top/bottom spacing themselves (their own grid's
   pt-[22px]/pb-[30-40px] plus their own footer's border-top + padding), so
   padding here would double up on top of what they already render. */

/* ── Pages-style dropdown ─────────────────────────────────────
   Structure only. Every size, spacing value, colour and the whole responsive
   schedule are Elementor control defaults — see
   register_dropdown_style_controls() in
   widgets/orion-main-header-widget.php. Elementor's breakpoints on this site
   are configured to the reference's own (639/768/991/1198/1379/1752), so each
   step of the reference schedule maps onto exactly one device and needs no
   stylesheet media query. */
.oh__dropdown-plain-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 992px) { .oh__dropdown-plain-list { max-height: 100%; } }
.oh__dropdown-plain-list > li { list-style: none; }
/* The reference's final row keeps 12px of vertical padding at every width
   instead of tightening to 10px like the rows above it. !important because
   the Vertical Padding control emits an element-scoped selector that would
   otherwise outrank this. */
.oh__dropdown-plain-list > li:last-child > .dropdown-link { padding-block: 12px !important; }

.oh__dropdown-plain-list > li:not(:last-child) {
    /* Colour is set on every edge (the reference's border utility does the
       same) and only the bottom edge is given a width. */
    border-style: solid;
    border-width: 0 0 1px;
}

/* Row wrapper shared by parent rows and leaf rows, exactly as in the
   reference: the row carries the vertical padding, the anchor inside it is
   sized to its own text. */
.dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color .2s ease;
}

.oh__pages-arrow {
    flex-shrink: 0;
    fill: none !important;
    color: inherit;
    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.oh__pages-arrow path {
    fill: none !important;
}
@media (min-width: 992px) {
    .pages-submenu-parent:hover > .dropdown-link .oh__pages-arrow,
    .pages-submenu-parent:focus-within > .dropdown-link .oh__pages-arrow {
        transform: rotate(90deg);
    }
}

.oh__pages-leaf-link,
.oh__pages-subitem-link {
    display: flex;
    align-items: center;
    padding: 0;
    text-decoration: none;
    transition: color .2s ease;
}

.oh__dropdown-submenu-list {
    margin: 0;
    list-style: none;
    border-style: solid;
    border-width: 0;
}
.oh__pages-subitem { list-style: none; }
.oh__dropdown-submenu-list > li:not(:last-child) {
    border-style: solid;
    border-width: 0;
}

/* OTHER PAGES nested list — HTML
   `2xl:max-h-60 1xl:max-h-50 xl:max-h-45 lg:max-h-28 overflow-y-auto`
   (spacing unit 0.25rem). Caps the flyout so wheel scroll stays inside
   the menu instead of scrolling the page. */
.oh__pages-submenu-scroll {
    max-height: none;
    overflow: visible;
    overscroll-behavior: contain;
}
@media (min-width: 992px) {
    .oh__pages-submenu-scroll {
        max-height: 7rem; /* max-h-28 */
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@media (min-width: 1199px) {
    .oh__pages-submenu-scroll { max-height: 11.25rem; } /* max-h-45 */
}
@media (min-width: 1380px) {
    .oh__pages-submenu-scroll { max-height: 12.5rem; } /* max-h-50 */
}
@media (min-width: 1752px) {
    .oh__pages-submenu-scroll { max-height: 15rem; } /* max-h-60 */
}

/* ── Nested flyout (CSS hover only — no JS) ────────────────── */
.pages-submenu-parent { position: relative; }

.pages-submenu-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}
/* Must beat `.orion-html-header .hidden { display:none }` (declared later). */
.pages-submenu-panel:not(.hidden),
.orion-html-header .pages-submenu-parent:hover > .pages-submenu-panel.hidden,
.orion-html-header .pages-submenu-parent:focus-within > .pages-submenu-panel.hidden {
    display: block !important;
    visibility: visible !important;
}
@media (max-width: 991px) {
    /* Below the desktop breakpoint the whole menu is a full-height stacked
       sheet opened by the back-button UI, not a hover flyout on a floating
       card. */
    .orion-html-header .pages-submenu-parent:hover > .pages-submenu-panel.hidden,
    .orion-html-header .pages-submenu-parent:focus-within > .pages-submenu-panel.hidden {
		display: none !important;
	}
    .pages > .dropdown-menu {
        position: fixed;
        z-index: 70;
    }
    /* Nested Pages drill-down sheet (Homes / Projects / …) */
    .orion-html-header .pages-submenu-panel.mobile-panel-open {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        z-index: 1002 !important;
        display: block !important;
        visibility: visible !important;
        overflow-y: auto !important;
        background: #fff !important;
        margin: 0 !important;
        min-width: 0 !important;
    }
    .orion-html-header .pages > .dropdown-menu:has(> .pages-submenu-panel.mobile-panel-open) {
        overflow: visible !important;
    }
}

/* The floating card's shadow. Not an Elementor control: the reference stacks
   two shadow layers and Elementor's Box Shadow group control only emits one. */
@media (min-width: 992px) {
    .pages > .dropdown-menu {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
		overflow: visible !important;
    }
	.pages > .dropdown-menu.open,
	.pages > .dropdown-menu:not(.hidden) {
		overflow: visible !important;
	}
}

/* Elementor emits its `max-width: 1198px` (Tablet Extra) block *before* its
   `max-width: 1379px` (Laptop) block, so in the 992-1198 overlap the wider
   Laptop rule always wins and the Tablet Extra values never apply. These
   three properties are the only ones whose reference values differ between
   those two bands, so they are re-asserted here. */
@media (min-width: 992px) and (max-width: 1198px) {
    .pages-submenu-panel { min-width: 165px !important; }
    .oh__pages-tri { right: 149px !important; }
    .oh__dropdown-submenu-list { padding-left: 14px !important; padding-right: 14px !important; }
    /* Same story for the top-level tabs, which step 13px -> 14px at 1199. */
    .orion-html-header .navbar > li > .nav-tab,
    .orion-html-header .navbar > li > .nav-tab-2,
    .orion-html-header .navbar > li > .dropdown-toggle,
    .orion-html-header .navbar > li > .dropdown-toggle .dropdown-text {
        font-size: 13px !important;
        line-height: 19.5px !important;
    }
}

/* Pointer tying the flyout back to its parent row. Sits behind the list,
   which paints its own background over the square's inner half. */
.oh__pages-tri {
    position: absolute;
    left: auto;
    display: none;
    rotate: 45deg;
    border-style: solid;
    z-index: -1;
}
@media (min-width: 992px) { .oh__pages-tri { display: block; } }

/* ── Mega menu grids ─────────────────────────────────────────── */
.oh__mega-grid { display: grid; grid-template-columns: 1fr; }

.oh__mega-grid--5col {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 30px;
    height: 100%;
}
@media (min-width: 412px) { .oh__mega-grid--5col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .oh__mega-grid--5col { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .oh__mega-grid--5col { grid-template-columns: repeat(5, 1fr); padding-bottom: 36px; } }
@media (min-width: 1199px) { .oh__mega-grid--5col { gap: 24px; } }
@media (min-width: 1752px) { .oh__mega-grid--5col { gap: 28px; padding-bottom: 40px; } }

/* Row closing the image grid: copyright + "View Projects" link. */
.oh__mega-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .149);
    padding-block: 18px;
}
@media (min-width: 640px) {
    .oh__mega-footer { align-items: center; flex-wrap: nowrap; gap: 18px; padding-block: 20px; }
}
@media (min-width: 1380px) { .oh__mega-footer { padding-block: 24px; } }
@media (min-width: 1752px) { .oh__mega-footer { padding-block: 30px; } }

.oh__mega-footer-text {
    margin: 0;
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 300;
    text-transform: none;
    text-align: start;
    color: #000;
    cursor: default;
}
@media (min-width: 640px) { .oh__mega-footer-text { text-align: center; } }

/* Scoped through the parent so it outranks .btn's own padding/tracking
   regardless of stylesheet order — index.html forces the same two values
   with `!px-0` / `!tracking-[3px]`. */
.oh__mega-footer .oh__mega-footer-link {
    letter-spacing: 3px;
    padding-inline: 0;
}

.oh__mega-grid--3col {
    grid-template-columns: 1fr;
    gap: 0;
    row-gap: 12px;
    text-transform: none;
    padding-top: 12px;
    padding-bottom: 28px;
    border-top: 1px solid var(--color-gray-300, #d1d5db);
}
.oh__mega-grid--3col > li:not(:last-child) { border-bottom: 1px solid var(--color-gray-300, #d1d5db); }
@media (min-width: 640px) {
    .oh__mega-grid--3col { grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 28px; padding-top: 20px; border-top: 0; }
    .oh__mega-grid--3col > li:not(:last-child) { border-bottom: 0; }
}
@media (min-width: 992px) { .oh__mega-grid--3col { row-gap: 40px; padding-bottom: 40px; } }
@media (min-width: 1199px) { .oh__mega-grid--3col { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1380px) { .oh__mega-grid--3col { padding-bottom: 55px; } }
@media (min-width: 1752px) { .oh__mega-grid--3col { column-gap: 57px; row-gap: 50px; } }

/* Services (text) mega item */
.oh__mega-text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 455px;
    width: 100%;
    padding-block: 16px;
}
@media (min-width: 640px) { .oh__mega-text-item { padding-block: 0; } }
@media (min-width: 992px) { .oh__mega-text-item { gap: 10px; } }
@media (min-width: 1752px) { .oh__mega-text-item { gap: 12px; } }

.oh__mega-text-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.oh__mega-text-item-title { margin: 0; text-align: start; }
.oh__mega-text-item-title a { color: inherit; }
.oh__mega-text-item:hover .oh__mega-text-item-title a { color: var(--orion-primary); }

.oh__mega-text-item-arrow {
    color: #000;
    flex-shrink: 0;
    display: block;
}
@media (min-width: 992px) { .oh__mega-text-item-arrow { display: none; } }
.oh__mega-text-item:hover .oh__mega-text-item-arrow { color: var(--orion-primary); }

.oh__mega-text-item-desc {
    color: var(--color-gray-400, #9ca3af);
    text-transform: none;
    font-weight: 300;
    margin: 0;
    text-align: start;
}

/* Projects (image) mega item */
.oh__mega-image-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
@media (min-width: 640px) { .oh__mega-image-item { gap: 17px; } }

.oh__mega-image-item-media { position: relative; width: 100%; }

.oh__mega-image-item-link {
    display: block;
    width: 100%;
    height: 100% !important;
    overflow: hidden;
    position: relative;
}
.oh__mega-image-item-link::before { content: ""; display: block; padding-top: 60%; }
@media (min-width: 640px) { .oh__mega-image-item-link::before { padding-top: 116%; } }

/* Same Elementor img reset as .orion-projects-mega-img (template path). */
.oh__mega-image-item-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.oh__mega-image-item-arrow {
    width: 30px;
    height: 30px;
    stroke: #000;
}
@media (min-width: 992px) { .oh__mega-image-item-arrow { width: 36px; height: 36px; } }
@media (min-width: 1752px) { .oh__mega-image-item-arrow { width: 39px; height: 39px; } }
.project-arrow:hover .oh__mega-image-item-arrow { stroke: var(--orion-primary); }

.oh__mega-image-item-title {
    color: #000;
    text-transform: none;
    margin: 0;
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 400;
}
.oh__mega-image-item:hover .oh__mega-image-item-title { color: var(--orion-primary); }

/* ── Utility cascade guard ──────────────────────────────────
   The reference emits `.hidden { display: none }` after the layout
   utilities, so it wins on source order. Here the ported `oh__*` classes
   are defined afterwards and set `display` themselves, which silently beat
   `.hidden` — the search toggle stayed visible after opening the search and
   the collapsed search box still reported `display: flex`. Re-asserting it
   last, scoped to the header, restores the reference's behaviour without
   needing !important anywhere. */
.orion-html-header .hidden { display: none; }

/* The reference reveals this one with `lg:block` while it keeps the static
   `hidden` class, so it has to out-rank the guard above. Its open/close
   animation then runs on opacity + pointer-events, not display. */
@media (min-width: 992px) {
    .orion-html-header .oh__search-close-inside { display: block; }
}

/* Same story for the hamburger's close icon: it keeps a static `hidden` and is
   revealed by `group-[.active]:block` once the toggle gains `.active`. That
   variant ties the guard on specificity but loses on source order, which left
   the open mobile menu with no close icon at all. */
.orion-html-header .group.active .group-\[\.active\]\:block { display: block; }

/* ── Mobile drawer back-btn ───────────────────────────────────
   Reference: back-btn bg-white flex items-center lg:hidden
   pb-3 pt-2.5 border-b border-[#00000015]
   Tailwind does not emit border-[#00000015] / text-[15px] from PHP/JS
   markup, so pin the layout here. */
.orion-html-header .back-btn,
.orion-html-header .mobile-back-btn {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 10px 0 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.082);
	position: sticky;
	top: 0;
	z-index: 20;
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 992px) {
	.orion-html-header .back-btn,
	.orion-html-header .mobile-back-btn {
		display: none;
	}
}

.orion-html-header .back-btn > button,
.orion-html-header .mobile-back-btn > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.orion-html-header .back-btn > span,
.orion-html-header .mobile-back-btn > span {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-primary-900, var(--orion-primary, #1a3c34));
}

@media (min-width: 769px) {
	.orion-html-header .back-btn > span,
	.orion-html-header .mobile-back-btn > span {
		font-size: 16px;
	}
}