/* ==========================================================================
   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 / orion-header-nav-menu.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; } }

.oh__logo-img-md { height: 36px; }
@media (min-width: 992px) { .oh__logo-img-md { height: 44px; } }
@media (min-width: 1199px) { .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; } }

.oh__dropdown-container { margin: 0 auto; padding-left: 16px; padding-right: 16px; }

.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 — without a
   rule raising max-height here it stays collapsed to 0 regardless, so the
   input/close icon are technically "visible" but rendered in a 0px box. */
.oh__search-box:not(.hidden) {
    max-height: 120px;
}
@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; }

.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%; } }

.oh1__logo-img { height: 36px; }
@media (min-width: 1199px) { .oh1__logo-img { height: 52px; } }
@media (min-width: 1752px) { .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;
    padding: 8px 10px 8px 0 !important;
    background: #fff;
    transition: all .15s;
}
@media (min-width: 640px) { .oh2__logo-link { padding-top: 16px; padding-bottom: 16px; } }
@media (min-width: 769px) { .oh2__logo-link { padding-top: 20px; padding-bottom: 20px; } }
@media (min-width: 992px) { .oh2__logo-link { padding-top: 12px; padding-bottom: 12px; padding-right: 20px !important; } }
@media (min-width: 1380px) { .oh2__logo-link { padding-top: 20px; padding-bottom: 20px; padding-right: 40px !important; } }
@media (min-width: 1752px) { .oh2__logo-link { padding-top: 28px; padding-bottom: 28px; } }

.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: 500;
    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; } }

.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; } }

.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; } }

.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: #186F65; }

/* 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;
}
@media (min-width: 992px) { .oh__suggestions-inner { padding: 20px; width: 100%; } }
@media (min-width: 1199px) { .oh__suggestions-inner { padding: 24px 28px; } }
@media (min-width: 1752px) { .oh__suggestions-inner { padding: 24px 40px; margin-inline: 0; } }

.oh__suggestions-label {
    color: #4e4e4e;
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.333;
    font-weight: 500;
    text-transform: uppercase;
}
@media (min-width: 640px) { .oh__suggestions-label { margin-bottom: 20px; font-size: 0.875rem; line-height: 1.4286; } }

.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;
}
@media (min-width: 769px) { .oh__suggestions-list { font-size: 0.875rem; line-height: 1.4286; } }
@media (min-width: 1752px) { .oh__suggestions-list { font-size: 1rem; line-height: 1.5; } }
.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: #186F65;
}

.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; } }
.oh__suggestions-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.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: #186F65; }

.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; } }

.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;
}
@media (min-width: 992px) { .dropdown-menu { top: 100%; height: fit-content; } }

.oh__dropdown-panel { background: #fff; }
.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%;
}
@media (min-width: 992px) { .dropdown-scroll { height: auto; } }

.orion-mega-menu-template-content {
    padding-top: 22px;
    padding-bottom: 30px;
}
@media (min-width: 992px) { .orion-mega-menu-template-content { padding-bottom: 36px; } }
@media (min-width: 1752px) { .orion-mega-menu-template-content { padding-bottom: 40px; } }

.oh__dropdown-plain-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 22px;
    padding-bottom: 30px;
    height: 100%;
}
@media (min-width: 992px) { .oh__dropdown-plain-list { padding-bottom: 36px; } }
@media (min-width: 1752px) { .oh__dropdown-plain-list { padding-bottom: 40px; } }

.oh__dropdown-submenu-list {
    background: #fff;
    padding: 12px;
    padding-block: 12px;
}
@media (min-width: 640px) { .oh__dropdown-submenu-list { padding-inline: 12px; } }
@media (min-width: 992px) {
    .oh__dropdown-submenu-list {
        border: 1px solid var(--color-gray-200, #e5e7eb);
        padding-inline: 14px;
        padding-block: 0;
    }
    .oh__dropdown-submenu-list > li:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, .1); }
}
@media (min-width: 1199px) { .oh__dropdown-submenu-list { padding-inline: 22px; } }

/* ── Pages submenu (nested flyout, CSS-hover only — no JS) ─────── */
.pages-submenu-parent {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
@media (min-width: 992px) { .pages-submenu-parent { padding-left: 22px; padding-right: 22px; } }
@media (min-width: 640px) and (max-width: 991px) { .pages-submenu-parent { padding-left: 14px; padding-right: 14px; } }

.dropdown-link {
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    padding-block: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-gray-400, #9ca3af);
}
@media (min-width: 769px) { .dropdown-link { font-size: 0.875rem; line-height: 1.4286; } }
@media (min-width: 1752px) { .dropdown-link { font-size: 1rem; line-height: 1.5; } }
@media (min-width: 992px) { .dropdown-link { padding-block: 10px; } }
@media (min-width: 1752px) { .dropdown-link { padding-block: 12px; } }
.dropdown-link:hover { color: #186F65; }

.oh__pages-arrow {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.pages-submenu-panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}
@media (min-width: 992px) {
    .pages-submenu-panel { left: 214px; padding-left: 10px; padding-inline-start: 0; min-width: 165px; }
}
@media (min-width: 1199px) { .pages-submenu-panel { min-width: 182px; } }
@media (min-width: 1380px) { .pages-submenu-panel { left: 239px; min-width: 220px; } }
.pages-submenu-panel:not(.hidden),
.pages-submenu-parent:hover .pages-submenu-panel.hidden,
.pages-submenu-parent:focus-within .pages-submenu-panel.hidden {
    display: block;
}
@media (max-width: 991px) {
    .pages-submenu-parent:hover .pages-submenu-panel.hidden,
    .pages-submenu-parent:focus-within .pages-submenu-panel.hidden {
        display: none;
    }
}

.oh__pages-item { border-bottom: 1px solid rgba(0, 0, 0, .1); }

.oh__pages-leaf-link,
.oh__pages-subitem-link {
    font-family: var(--font-lexend, "Lexend", sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 150%;
    display: block;
    color: var(--color-gray-400, #9ca3af);
    padding-block: 12px;
}
@media (min-width: 769px) { .oh__pages-leaf-link, .oh__pages-subitem-link { font-size: 0.875rem; line-height: 1.4286; } }
@media (min-width: 1752px) { .oh__pages-leaf-link, .oh__pages-subitem-link { font-size: 1rem; line-height: 1.5; } }
@media (min-width: 992px) { .oh__pages-leaf-link { padding-block: 10px; } }
@media (min-width: 1752px) { .oh__pages-leaf-link { padding-block: 12px; } }
.oh__pages-leaf-link:hover,
.oh__pages-subitem-link:hover { color: #186F65; }

.oh__pages-subitem { padding-block: 8px; }
@media (min-width: 992px) { .oh__pages-subitem { padding-block: 10px; } }
@media (min-width: 1752px) { .oh__pages-subitem { padding-block: 12px; } }

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

.oh__mega-grid--5col {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 30px;
    height: 100%;
}
@media (min-width: 412px) and (max-width: 639px) { .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: 1752px) { .oh__mega-grid--5col { gap: 28px; padding-bottom: 40px; } }

.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: #186F65; }

.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: #186F65; }

.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%;
    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%; } }

.oh__mega-image-item-img {
    width: 100%;
    height: 100%;
    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: #186F65; }

.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: #186F65; }