/*=========================================================
    JHS Corporate Header & Navigation
    Loaded after style.css / brand.css - header scope only.
=========================================================*/

:root {
    --jhs-ink: var(--fin-ink, #0B2A2E);
    --jhs-muted: #5A6B6E;
    --jhs-line: var(--fin-line, #DCEDE9);
    --jhs-accent: var(--fin-primary, #00A88C);

    /* Header colour stack: blue utility bar / white marquee / mint menu bar */
    --jhs-topbar-bg: var(--theme-color, #1a2653);
    --jhs-menubar-bg: #CFE8DC;
    --jhs-menubar-line: #B6D8C8;
    --jhs-menubar-fg: var(--theme-color, #1a2653);
    --jhs-menubar-fg-hover: var(--title-color, #001c54);
}

/* ---------------------------------------------------------
   1. Top utility strip - brand blue
--------------------------------------------------------- */
.header-layout1 .header-top {
    background: var(--jhs-topbar-bg);
    border-bottom: none;
    padding: 0;
}

.header-layout1 .header-top .header-links ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.header-layout1 .header-top .header-links li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 0;
    margin: 0 18px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
    letter-spacing: .01em;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, .22);
}

.header-layout1 .header-top .header-links li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}

/* The theme paints a grey divider 27px outside the item; we use a border. */
.header-layout1 .header-top .header-links li:not(:last-child):after {
    content: none;
}

/* .header-links span/p carry their own dark colour, which beats inheritance. */
.header-layout1 .header-top .header-links li span,
.header-layout1 .header-top .header-links li p,
.header-layout1 .header-top .header-links li b,
.header-layout1 .header-top .header-links li strong {
    color: #ffffff;
}

/* Bootstrap's d-*-inline-block utilities fight the flex row, which is what
   pushed the strip onto two lines. */
@media (min-width: 992px) {

    .header-layout1 .header-top .row {
        flex-wrap: nowrap;
        gap: 16px;
    }

    .header-layout1 .header-top .header-links li.d-lg-inline-block,
    .header-layout1 .header-top .header-links li.d-md-inline-block {
        display: flex !important;
    }

    .header-layout1 .header-top .header-links li {
        font-size: 12.5px;
        padding: 4px 13px 4px 0;
        margin: 0 13px 0 0;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .header-layout1 .header-top .header-links li.d-xl-inline-block {
        display: flex !important;
    }
}

/* Both strips only fit on one line once there is room for them; drop the
   opening hours first rather than let the bar wrap. */
@media (max-width: 1399px) {
    .header-layout1 .header-top .row > .col-auto:first-child .header-links li:nth-child(2) {
        display: none !important;
    }
}

.header-layout1 .header-top .header-links li i {
    color: var(--yellow-color);
    font-size: 13px;
}

.header-layout1 .header-top .header-links li a {
    color: #ffffff;
    text-decoration: none;
    transition: color .25s ease;
}

.header-layout1 .header-top .header-links li a:hover {
    color: var(--yellow-color);
}

.header-layout1 .header-top .header-right {
    gap: 14px;
}

.header-layout1 .header-top .currency-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: #ffffff;
    /* the template draws a bordered pill here AND on the select inside it,
       which reads as a box within a box */
    border: 0;
    border-radius: 0;
    max-width: none;
}

.header-layout1 .header-top .currency-menu > i {
    display: none;
}

.header-layout1 .header-top .currency-menu .nice-select {
    background-color: rgba(255, 255, 255, .12);
    /* nice-select copies the select's classes, so Bootstrap's .form-select
       chevron lands on top of the plugin's own arrow */
    background-image: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
    height: 32px;
    line-height: 30px;
    padding: 0 32px 0 14px;
    margin: 0;
    float: none;
    width: auto;
    min-width: 96px;
}

/* The template positions this arrow for a 56px-tall input, which leaves it
   floating outside the compact header pill. */
.header-layout1 .header-top .currency-menu .nice-select:after {
    top: 50%;
    right: 13px;
    height: 7px;
    width: 7px;
    margin-top: -5px;
    line-height: 1;
    border-color: rgba(255, 255, 255, .75);
}

.header-layout1 .header-top .currency-menu .nice-select.open:after {
    margin-top: -2px;
}

.header-layout1 .header-top .currency-menu .nice-select .current {
    line-height: 30px;
}

.header-layout1 .header-top .currency-menu .nice-select .list {
    color: var(--title-color);
    line-height: normal;
    margin-top: 6px;
}

.header-layout1 .header-top .currency-menu .nice-select .option {
    line-height: 34px;
    min-height: 34px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .header-layout1 .header-top {
        padding: 4px 0;
    }

    .header-layout1 .header-top .row > .col-auto:last-child {
        width: 100%;
    }

    .header-layout1 .header-top .row {
        justify-content: space-between !important;
        flex-wrap: nowrap;
    }

    .header-layout1 .header-top .header-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
    }

    .header-layout1 .header-top .currency-menu .nice-select {
        min-width: 86px;
        height: 30px;
        line-height: 28px;
        font-size: 12px;
        padding: 0 28px 0 12px;
    }

    .header-layout1 .header-top .currency-menu .nice-select .current {
        line-height: 28px;
    }

    .header-layout1 .header-top .header-right .header-links li {
        border-right: none;
        margin-right: 0;
        padding: 0;
        font-size: 12.5px;
    }

    .header-layout1 .header-top .header-right .header-links li a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        line-height: 1.2;
    }
}

/* ---------------------------------------------------------
   2. Announcement ticker - focused admissions ribbon
--------------------------------------------------------- */
.animate__content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #ffffff;
    border-bottom: 2px solid #fec001;
}

.animate__content .animate__content__marquee {
    background: #ffffff;
}

.animate__content .animate__content__track { animation-duration: 38s; }
.animate__content .animate__content__marquee:hover .animate__content__track,
.animate__content .animate__content__marquee:focus-within .animate__content__track { animation-play-state: paused; }
.animate__content .animate__content__item {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #001c54;
}
.animate__content .animate__content__item,
.animate__content .animate__content__item a {
    color: #001c54 !important;
    text-decoration: none;
}
.animate__content .animate__content__item:after {
    width: 5px;
    height: 5px;
    margin: 0 24px;
    background: #fec001;
}
.animate__content .jhs-ticker-lead {
    min-height: 26px;
    padding: 2px 14px;
    border-radius: 4px;
    background: #fec001;
    color: #001c54;
    /* The badge is its own separator, so it carries the gap itself. */
    margin-right: 24px;
}
/* The divider dot is a flex child of the item, so inside the badge it painted
   yellow-on-yellow and stretched the pill with ~50px of dead colour, leaving
   the next phrase butted against the edge. Drop it; the margin above spaces it. */
.animate__content .jhs-ticker-lead:after { display: none; }
.animate__content .animate__content__item a:hover { color: #fec001 !important; }
.animate__content .animate__content__item a i { margin-left: 7px; }
@media (max-width: 575px) {
    .animate__content .animate__content__track { animation-duration: 30s; }
    .animate__content .animate__content__item { min-height: 34px; font-size: 11.5px; }
    .animate__content .animate__content__item:after { margin: 0 16px; }
    .animate__content .jhs-ticker-lead { margin-right: 16px; padding: 2px 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .animate__content .animate__content__track { animation-play-state: paused; }
}

/* ---------------------------------------------------------
   3. Main bar - pastel mint
--------------------------------------------------------- */
.header-layout1 .menu-area,
.header-layout1 .sticky-wrapper.sticky .menu-area {
    padding: 0;
    background-color: var(--jhs-menubar-bg);
    border-bottom: 1px solid var(--jhs-menubar-line);
}

/* Anchor point for the full-width mega panels */
.header-layout1 .menu-area > .container {
    position: relative;
}

/* The header gutter matches the floating action buttons (left/right: 30px)
   so the logo lines up with the chat bubble and the CTA with the scroll-top. */
.header-layout1 .th-container {
    max-width: 100%;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.header-layout1 .header-top .row,
.header-layout1 .menu-area .row {
    --bs-gutter-x: 0;
}

@media (max-width: 575px) {
    .header-layout1 .th-container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* max-height only caps the artwork; the SVG is 115x42 intrinsic, so it needs
   an explicit height to scale up at all. */
.header-layout1 .header-logo img {
    height: 62px;
    max-height: none;
    width: auto;
    transition: height .3s ease;
}

.sticky-wrapper.sticky .header-layout1 .header-logo img,
.sticky-wrapper.sticky .header-logo img {
    height: 46px;
}

/* The header uses the dark logo artwork, so it needs no plate behind it.
   The vertical padding is what keeps the mark off the bar edges. */
.header-layout1 .header-logo {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border-radius: 0;
    padding: 11px 0;
    margin-left: 0;
    line-height: 0;
    transition: padding .3s ease;
}

.sticky-wrapper.sticky .header-layout1 .header-logo,
.sticky-wrapper.sticky .header-logo {
    padding: 8px 0;
}

/* Masked navy plate left over from the white-logo header. It is 80-92px tall
   inside a 57px bar, so below 1200px it bled over the page underneath. */
.header-layout1 .logo-bg,
.header-layout1 .logo-bg.bg-mask {
    display: none !important;
}

/* A bare glyph reads cleaner than the template's solid navy tile,
   but the tap target still needs to be 44px. */
.header-layout1 .th-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--theme-color);
    font-size: 26px;
    line-height: 1;
    transition: color .25s ease, transform .25s ease;
}

.header-layout1 .th-menu-toggle:hover,
.header-layout1 .th-menu-toggle:focus-visible {
    background-color: transparent;
    color: var(--title-color);
    transform: scale(1.06);
}

/* --- compact bar below the desktop breakpoint --- */
@media (max-width: 1199px) {

    /* The third column also holds the hamburger, so only the desktop CTA
       inside it may be hidden here (it already carries d-none d-xl-block). */
    .header-layout1 .menu-area .row > .col-auto:last-child {
        display: flex;
        align-items: center;
    }

    .header-layout1 .menu-area .row > .col-auto.me-xxl-auto {
        margin-left: auto;
    }

    .header-layout1 .menu-area,
    .header-layout1 .sticky-wrapper.sticky .menu-area {
        padding: 0;
    }

    .header-layout1 .header-logo,
    .sticky-wrapper.sticky .header-layout1 .header-logo,
    .sticky-wrapper.sticky .header-logo {
        padding: 10px 0;
    }

    .header-layout1 .header-logo img,
    .sticky-wrapper.sticky .header-layout1 .header-logo img,
    .sticky-wrapper.sticky .header-logo img {
        height: 52px;
    }
}

@media (max-width: 575px) {

    .header-layout1 .header-logo,
    .sticky-wrapper.sticky .header-layout1 .header-logo,
    .sticky-wrapper.sticky .header-logo {
        padding: 9px 0;
    }

    .header-layout1 .header-logo img,
    .sticky-wrapper.sticky .header-layout1 .header-logo img,
    .sticky-wrapper.sticky .header-logo img {
        height: 42px;
    }

    .header-layout1 .th-menu-toggle {
        font-size: 23px;
    }
}

/* ---------------------------------------------------------
   4. Top-level menu items
--------------------------------------------------------- */
.main-menu > ul {
    display: flex;
    align-items: center;
}

/* The nav must not be the positioning context, or the mega panels
   would be trapped inside the nav's own width instead of the header's. */
.header-layout1 .main-menu {
    position: static;
}

.main-menu > ul > li {
    position: relative;
    margin: 0 2px;
}

.main-menu a {
    font-family: var(--title-font);
    font-weight: 500;
    font-size: 15px;
    color: var(--jhs-menubar-fg);
}

.main-menu > ul > li > a {
    position: relative;
    padding: 30px 13px;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .25s ease;
}

/* Pack the nav against the CTA so it reads as one right-hand cluster. */
@media (min-width: 1200px) {
    .header-layout1 .menu-area .row > .col-auto:nth-child(2) {
        margin-left: auto;
    }

    .header-layout1 .main-menu {
        padding-left: 0 !important;
    }

    .header-layout1 .header-button {
        margin-left: 22px;
    }

    /* the bar is taller at rest, so the nav has to shrink with the logo */
    .sticky-wrapper.sticky .main-menu > ul > li > a {
        padding-top: 19px;
        padding-bottom: 19px;
    }

    .sticky-wrapper.sticky .header-layout1 .main-menu > ul > li > a:before {
        bottom: 11px;
    }
}

@media (max-width: 1399px) {
    .main-menu > ul > li > a {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 14.5px;
    }
}

@media (max-width: 1299px) {
    .main-menu > ul > li > a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 14px;
    }
}

/* Chevron instead of the theme's "+" */
.main-menu ul li:has(.sub-menu) > a:after,
.main-menu ul li:has(.jhs-mega) > a:after,
.main-menu ul li.menu-item-has-children > a:after {
    content: "\f107";
    font-family: var(--icon-font);
    font-weight: 400;
    font-size: 12px;
    margin-left: 7px;
    top: -1px;
    display: inline-block;
    transition: transform .25s ease, color .25s ease;
}

.main-menu > ul > li.menu-item-has-children:hover > a:after {
    transform: rotate(-180deg);
}

/* Gradient underline on hover / active */
.header-layout1 .main-menu > ul > li > a:before {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 22px;
    top: auto;
    margin-top: 0;
    height: 2px;
    width: auto;
    background: linear-gradient(90deg, var(--theme-color) 0%, var(--yellow-color) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}

.header-layout1 .main-menu > ul > li > a:hover:before,
.header-layout1 .main-menu > ul > li > a.active:before,
.main-menu > ul > li:hover > a:before {
    width: auto;
    transform: scaleX(1);
}

.header-layout1 .main-menu > ul > li > a:hover,
.header-layout1 .main-menu > ul > li > a.active,
.main-menu > ul > li:hover > a {
    color: var(--jhs-menubar-fg-hover);
}

/* ---------------------------------------------------------
   5. Mega panels - full header width, pastel
--------------------------------------------------------- */
.main-menu > ul > li.jhs-has-mega {
    position: static;
}

.main-menu ul.jhs-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(250px, 320px) repeat(var(--jhs-cols, 3), minmax(0, 1fr));
    gap: 0 44px;
    padding: 44px 40px 42px;
    background: #ffffff;
    border: none;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 26px 60px rgba(11, 42, 46, .12);
    text-align: left;
    /* the top-level links set nowrap, which would otherwise make the intro
       paragraph run as one line straight across the link columns */
    white-space: normal;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .32s ease, visibility .28s ease;
}

/* Gradient hairline across the top of the panel */
.main-menu ul.jhs-mega:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-color) 0%, var(--yellow-color) 100%);
}

.main-menu ul li:hover > ul.jhs-mega {
    visibility: visible;
    opacity: 1;
    z-index: 20;
    transform: translateY(0);
}

/* --- Intro column (left) --- */
.main-menu ul.jhs-mega > li.jhs-mega-intro {
    display: block;
    width: auto;
    margin: 0;
    padding: 0 40px 0 0;
    border-right: 1px solid var(--th-border-color);
}

.jhs-mega-eyebrow {
    display: block;
    font-family: var(--title-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 12px;
}

.jhs-mega-eyebrow:after {
    content: '';
    display: block;
    width: 26px;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background-color: var(--yellow-color);
}

.jhs-mega-heading {
    font-family: var(--title-font);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--title-color);
    margin: 0 0 14px;
}

.jhs-mega-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--body-color);
    margin: 0 0 22px;
}

a.jhs-mega-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--title-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-color);
    padding: 0 0 6px;
    border-bottom: 2px solid var(--th-border-color);
    transition: gap .25s ease, border-color .25s ease, color .25s ease;
}

a.jhs-mega-cta:hover {
    gap: 16px;
    color: var(--title-color);
    border-bottom-color: var(--yellow-color);
}

/* --- Link columns (right) --- */
.main-menu ul.jhs-mega > li.jhs-mega-col {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

.main-menu ul.jhs-mega .jhs-mega-title {
    display: block;
    font-family: var(--title-font);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--theme-color);
    padding: 0 0 12px;
    margin: 0;
}

.main-menu ul.jhs-mega .jhs-mega-title:after {
    content: '';
    display: block;
    width: 22px;
    height: 3px;
    margin-top: 8px;
    border-radius: 3px;
    background-color: var(--yellow-color);
}

.main-menu ul.jhs-mega ul {
    display: block;
}

.main-menu ul.jhs-mega ul li {
    display: block;
    width: 100%;
    margin: 0;
    border-top: 1px solid var(--th-border-color);
}

.main-menu ul.jhs-mega ul li a {
    position: relative;
    display: block;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--title-color);
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}

.main-menu ul.jhs-mega ul li a:before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background-color: var(--yellow-color);
    transform: translateY(-50%);
    transition: height .2s ease;
}

.main-menu ul.jhs-mega ul li a:hover {
    background-color: var(--fin-pastel-mint);
    color: var(--theme-color);
    padding-left: 20px;
}

.main-menu ul.jhs-mega ul li a:hover:before {
    height: 18px;
}

.main-menu ul.jhs-mega ul li a .jhs-menu-note {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #93A3A5;
    letter-spacing: .02em;
    margin-top: 2px;
}

/* Tighter on smaller desktops */
@media (max-width: 1399px) {
    .main-menu ul.jhs-mega {
        grid-template-columns: minmax(220px, 280px) repeat(var(--jhs-cols, 3), minmax(0, 1fr));
        gap: 0 30px;
        padding: 36px 28px 34px;
    }

    .jhs-mega-heading {
        font-size: 24px;
    }

    .main-menu ul.jhs-mega > li.jhs-mega-intro {
        padding-right: 28px;
    }
}

@media (max-width: 1299px) {
    .main-menu ul.jhs-mega ul li a,
    .jhs-mega-desc {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------
   6. Header CTA
--------------------------------------------------------- */
.header-layout1 .header-button {
    position: relative;
    line-height: 0;
}

.header-layout1 .header-button .th-btn {
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    white-space: nowrap;
    gap: 8px;
    color: #ffffff;
    background-color: #1a2653;
    box-shadow: 0 2px 6px rgba(16, 26, 66, .18);
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* the theme wipes a white fill across on hover, which erases the white label */
.header-layout1 .header-button .th-btn:before {
    display: none;
}

.header-layout1 .header-button .th-btn:hover,
.header-layout1 .header-button .th-btn:focus-visible {
    color: #ffffff;
    background-color: #28376f;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16, 26, 66, .24);
}

.header-layout1 .header-button .th-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 26, 66, .18);
}

/* the theme tilts .th-icon arrows 45deg; a level arrow reads calmer here */
.header-layout1 .header-button .th-btn i {
    font-size: 13px;
    transform: rotate(0deg);
    transition: transform .25s ease;
}

.header-layout1 .header-button .th-btn:hover i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .header-layout1 .header-button .th-btn,
    .header-layout1 .header-button .th-btn i {
        transition: none;
    }
}

/* ---------------------------------------------------------
   7. Mobile drawer
   Rebuilt as a proper slide-out sheet: fixed header row (logo + close),
   one scrolling body, sticky CTA. The template animated `left: -110%`,
   which janks on mobile; transform is compositor-friendly.
--------------------------------------------------------- */
.th-menu-wrapper {
    background-color: rgba(6, 22, 46, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity .3s ease, visibility .3s ease;
}

/* the drawer traps scrolling instead of letting the page slide underneath */
body:has(.th-menu-wrapper.th-body-visible) {
    overflow: hidden;
}

.th-menu-wrapper .th-menu-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: min(380px, 88vw);
    height: 100%;
    background-color: #ffffff;
    border-right: none;
    box-shadow: 18px 0 52px rgba(6, 22, 46, .26);
    left: 0;
    opacity: 1;
    visibility: visible;
    transform: translateX(-104%);
    /* closing: quick, quiet exit */
    transition: transform .3s cubic-bezier(.4, 0, .6, 1);
}

.th-menu-wrapper.th-body-visible .th-menu-area {
    left: 0;
    transform: translateX(0);
    /* opening: decisive start, soft expo-out landing */
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

/* menu items cascade in behind the sheet; reset instantly on close */
@media (prefers-reduced-motion: no-preference) {
    .th-menu-wrapper .th-mobile-menu > ul > li,
    .th-menu-wrapper .jhs-drawer-contact {
        opacity: 0;
        transform: translateX(-14px);
        transition: opacity .2s ease, transform .2s ease;
    }

    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li,
    .th-menu-wrapper.th-body-visible .jhs-drawer-contact {
        opacity: 1;
        transform: translateX(0);
        transition: opacity .35s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
    }

    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(1) { transition-delay: .1s; }
    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(2) { transition-delay: .16s; }
    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(3) { transition-delay: .22s; }
    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(4) { transition-delay: .28s; }
    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(5) { transition-delay: .34s; }
    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(6) { transition-delay: .4s; }
    .th-menu-wrapper.th-body-visible .th-mobile-menu > ul > li:nth-child(n+7) { transition-delay: .46s; }
    .th-menu-wrapper.th-body-visible .jhs-drawer-contact { transition-delay: .5s; }
}

/* --- drawer header --- */
.th-menu-wrapper .mobile-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 18px 74px 18px 22px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--jhs-line);
}

.th-menu-wrapper .mobile-logo img {
    max-height: 46px;
    width: auto;
}

.th-menu-wrapper .th-menu-toggle {
    position: absolute;
    right: 18px;
    top: 20px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 17px;
    border-radius: 12px;
    background-color: var(--smoke-color);
    color: var(--theme-color);
    transition: background-color .2s ease, color .2s ease;
}

.th-menu-wrapper .th-menu-toggle:hover,
.th-menu-wrapper .th-menu-toggle:focus-visible {
    background-color: var(--theme-color);
    color: #ffffff;
}

/* --- scrolling body --- */
.th-menu-wrapper .th-mobile-menu {
    flex: 1 1 auto;
    max-height: none;
    margin-top: 0;
    padding: 6px 0 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
}

.th-mobile-menu > ul {
    padding: 0 22px;
}

.th-mobile-menu ul li,
.th-mobile-menu ul li li:first-child {
    border-color: #EDF1F6;
}

.th-mobile-menu ul li a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 40px 12px 0;
    border-radius: 10px;
    font-family: var(--title-font);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--theme-color);
    transition: padding-left .3s cubic-bezier(.4, 0, .2, 1), color .22s ease, background-color .22s ease;
}

/* Slide-in cue: the caret leads, the label follows it to the right. */
.th-mobile-menu ul li > a:before {
    content: "\f105";
    font-family: var(--icon-font);
    font-weight: 700;
    font-size: 13px;
    position: absolute;
    left: 10px;
    top: 50%;
    opacity: 0;
    color: var(--theme-color);
    transform: translate(-8px, -50%);
    transition: opacity .22s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}

.th-mobile-menu ul li > a:hover,
.th-mobile-menu ul li > a:focus-visible,
.th-mobile-menu ul li > a:active,
.th-mobile-menu ul li.th-active > a {
    padding-left: 28px;
    background-color: #EAF1FF;
    color: var(--theme-color);
}

.th-mobile-menu ul li > a:hover:before,
.th-mobile-menu ul li > a:focus-visible:before,
.th-mobile-menu ul li > a:active:before,
.th-mobile-menu ul li.th-active > a:before {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {

    .th-mobile-menu ul li a,
    .th-mobile-menu ul li > a:before {
        transition-duration: .01ms;
    }
}

/* the plus/minus chips become a single centred chevron */
.th-mobile-menu ul .menu-item-has-children > a:after,
.th-mobile-menu ul .menu-item-has-children > a .th-mean-expand:before {
    content: "\f107";
    font-weight: 400;
    font-size: 14px;
    color: var(--theme-color);
    background-color: var(--smoke-color);
    box-shadow: none;
    border-radius: 9px;
}

.th-mobile-menu ul .menu-item-has-children > a:after {
    position: absolute;
    right: 8px;
    top: 50%;
    float: none;
    margin: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    transform: translateY(-50%);
    transition: transform .25s ease, background-color .25s ease;
}

.th-mobile-menu ul .menu-item-has-children.th-active > a:after {
    content: "\f107";
    transform: translateY(-50%) rotate(180deg);
    background-color: var(--yellow-color);
}

.th-mobile-menu ul .menu-item-has-children > a .th-mean-expand {
    background-color: transparent;
    box-shadow: none;
}

/* --- second level --- */
.th-mobile-menu ul li ul {
    margin: 4px 0 10px;
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--jhs-line);
    background: #FAFCFE;
    border-radius: 0 10px 10px 0;
}

.th-mobile-menu ul li ul li a {
    min-height: 42px;
    padding: 9px 12px 9px 6px;
    font-weight: 400;
    font-size: 14.5px;
    color: var(--body-color);
}

.th-mobile-menu ul li ul li a:hover {
    color: var(--theme-color);
}

.th-mobile-menu .jhs-mobile-heading {
    border: none !important;
    padding: 0 !important;
}

.th-mobile-menu .jhs-mobile-heading span {
    display: block;
    font-family: var(--title-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A97A8;
    padding: 14px 0 6px;
}

.th-mobile-menu .jhs-mobile-heading:first-child span {
    padding-top: 4px;
}

/* --- drawer CTA --- */
.th-mobile-menu .mobile-careers-cta {
    margin-top: 18px;
    border-bottom: none !important;
}

.th-mobile-menu .mobile-careers-cta > a {
    justify-content: center;
    min-height: 52px;
    padding: 14px 18px !important;
    border-radius: 12px;
    background: var(--theme-color);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(26, 38, 83, .22);
}

.th-mobile-menu .mobile-careers-cta > a:hover {
    background: var(--title-color);
    color: #ffffff !important;
}

.th-mobile-menu .mobile-careers-cta > a:before {
    content: none;
}

/* --- drawer contact block (scrolls with the menu, sits under the CTA) --- */
.jhs-drawer-contact {
    margin: 26px 0 0;
    padding: 22px 22px 4px;
    text-align: left;
    background: #F6F9FC;
    border-top: 1px solid var(--jhs-line);
}

.jhs-drawer-contact .jhs-dc-title {
    display: block;
    margin-bottom: 14px;
    font-family: var(--title-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8A97A8;
}

.jhs-drawer-contact .jhs-dc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-family: var(--body-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--title-color);
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color .22s ease;
}

.jhs-drawer-contact .jhs-dc-row:hover {
    color: var(--theme-color);
}

.jhs-drawer-contact .jhs-dc-row i {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-top: 1px;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(6, 22, 46, .08);
    font-size: 13px;
    text-align: center;
    color: var(--theme-color);
}

.jhs-drawer-contact .jhs-dc-row small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--body-color);
}

.jhs-drawer-contact .jhs-dc-social {
    display: flex;
    gap: 10px;
    margin: 18px 0 16px;
}

.jhs-drawer-contact .jhs-dc-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(6, 22, 46, .08);
    font-size: 14px;
    color: var(--theme-color);
    transition: background-color .22s ease, color .22s ease, transform .22s ease;
}

.jhs-drawer-contact .jhs-dc-social a:hover {
    background: var(--theme-color);
    color: #ffffff;
    transform: translateY(-2px);
}

.jhs-drawer-contact .jhs-dc-tagline {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--jhs-line);
    font-family: var(--title-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A97A8;
}

@media (prefers-reduced-motion: reduce) {

    .th-menu-wrapper,
    .th-menu-wrapper .th-menu-area,
    .th-menu-wrapper .th-mobile-menu > ul > li,
    .th-menu-wrapper .jhs-drawer-contact {
        transition-duration: .01ms;
        transition-delay: 0s;
    }
}