.elementor-7091 .elementor-element.elementor-element-8851ac0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-6bd63ee */@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");


/* =====================================================
   YASHVI NEXUS HEADER
   ISOLATED FROM ELEMENTOR / HOME PAGE
===================================================== */

.yn-menu-shell {

    --yn-black: #020202;
    --yn-white: #ffffff;

    --yn-text-soft: rgba(2, 2, 2, 0.68);
    --yn-text-faint: rgba(2, 2, 2, 0.42);

    --yn-line: rgba(2, 2, 2, 0.12);
    --yn-line-strong: rgba(2, 2, 2, 0.24);

    --yn-shadow:
        0 30px 80px rgba(0, 0, 0, 0.16);

    --yn-radius: 8px;

    --yn-motion:
        cubic-bezier(0.16, 1, 0.3, 1);


    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 0;

    z-index: 999999;

    font-family:
        "Libre Baskerville",
        Georgia,
        "Times New Roman",
        serif;

    color: var(--yn-black);

    pointer-events: none;

    overflow: visible;
}


/* =====================================================
   BODY LOCK
===================================================== */

body.yn-menu-lock {

    overflow: hidden !important;

}


/* =====================================================
   RESET ONLY CUSTOM MENU
===================================================== */

.yn-menu-shell,
.yn-menu-shell * {

    box-sizing: border-box;

}


.yn-menu-shell a {

    color: inherit;

    text-decoration: none;

}


.yn-menu-shell button {

    font: inherit;

}


/* =====================================================
   HEADER
===================================================== */

.yn-site-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    display: grid;

    grid-template-columns:
        260px
        1fr
        260px;

    align-items: center;

    gap: 18px;

    width: 100%;

    height: 82px;

    padding:
        0
        clamp(18px, 6vw, 92px);

    border-bottom:
        1px solid
        rgba(2, 2, 2, 0.10);

    background:
        rgba(255, 255, 255, 0.94);

    -webkit-backdrop-filter:
        blur(20px);

    backdrop-filter:
        blur(20px);

    box-shadow:
        none;

    pointer-events: auto;

    transition:
        height 280ms var(--yn-motion),
        background 280ms ease,
        box-shadow 280ms ease,
        border-color 280ms ease;
}


/* =====================================================
   HEADER SCROLL
===================================================== */

.yn-site-header.yn-is-scrolled {

    height: 72px;

    background:
        rgba(255, 255, 255, 0.98);

    border-color:
        rgba(2, 2, 2, 0.16);

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.09);
}


/* =====================================================
   LOGO
===================================================== */

.yn-brand {

    display: inline-flex;

    width: max-content;

    max-width: 100%;

    align-items: center;

    outline: none;
}


.yn-logo-plate {

    position: relative;

    display: grid;

    place-items: center;

    width:
        min(220px, 42vw);

    min-height: 44px;

    padding:
        7px
        13px;

    border:
        1px solid
        var(--yn-line-strong);

    border-radius:
        999px;

    background:
        var(--yn-white);

    overflow: hidden;

    transition:
        transform 260ms var(--yn-motion),
        box-shadow 260ms ease;
}


.yn-logo-plate::after {

    position: absolute;

    top: -60%;
    bottom: -60%;

    left: -42px;

    width: 34px;

    content: "";

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(2, 2, 2, 0.16),
            transparent
        );

    transform:
        rotate(28deg);

    transition:
        left 620ms var(--yn-motion);
}


.yn-brand:hover .yn-logo-plate,
.yn-brand:focus-visible .yn-logo-plate {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 0 4px
        rgba(2, 2, 2, 0.08);
}


.yn-brand:hover .yn-logo-plate::after,
.yn-brand:focus-visible .yn-logo-plate::after {

    left:
        calc(100% + 42px);
}


.yn-brand-logo {

    display: block;

    width: 100%;

    max-height: 30px;

    object-fit: contain;
}


.yn-brand-wordmark {

    display: none;

    color: #050505;

    font-size: 1rem;

    font-weight: 700;

    white-space: nowrap;
}


.yn-brand-logo.yn-is-hidden {

    display: none;
}


.yn-brand-logo.yn-is-hidden
+
.yn-brand-wordmark {

    display: block;
}


/* =====================================================
   DESKTOP NAV
===================================================== */

.yn-desktop-nav {

    position: relative;

    display: flex;

    justify-self: center;

    align-items: center;

    justify-content: center;

    height: 100%;

    gap:
        clamp(20px, 2.5vw, 34px);

    color: #000000;

    /* MAIN MENU TEXT SIZE */
    font-size: 1.2rem;

    font-weight: 700;

    pointer-events: auto;
}


/* =====================================================
   NAV ITEM
===================================================== */

.yn-nav-item {

    position: static;

    display: flex;

    height: 100%;

    align-items: center;
}


/* =====================================================
   NAV LINKS
===================================================== */

.yn-nav-link,
.yn-nav-trigger {

    position: relative;

    display: inline-flex;

    min-height: 40px;

    align-items: center;

    gap: 7px;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    cursor: pointer;

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    line-height: 1.2;

    white-space: nowrap;

    transition:
        color 180ms ease,
        transform 180ms var(--yn-motion);
}


.yn-nav-link::after,
.yn-nav-trigger::after {

    position: absolute;

    right: 0;
    bottom: 7px;
    left: 0;

    height: 1px;

    content: "";

    background:
        var(--yn-black);

    opacity: 0;

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        opacity 180ms ease,
        transform 230ms var(--yn-motion);
}


.yn-nav-link:hover,
.yn-nav-link:focus-visible,
.yn-nav-trigger:hover,
.yn-nav-trigger:focus-visible,
.yn-nav-item:hover .yn-nav-trigger,
.yn-nav-item.yn-is-open .yn-nav-trigger {

    color:
        var(--yn-black);

    transform:
        translateY(-1px);

    outline: none;
}


.yn-nav-link:hover::after,
.yn-nav-link:focus-visible::after,
.yn-nav-trigger:hover::after,
.yn-nav-trigger:focus-visible::after,
.yn-nav-item:hover .yn-nav-trigger::after,
.yn-nav-item.yn-is-open .yn-nav-trigger::after {

    opacity: 1;

    transform:
        scaleX(1);
}


/* =====================================================
   DESKTOP CHEVRON
===================================================== */

.yn-chevron {

    display: inline-block;

    width: 7px;
    height: 7px;

    border-right:
        1.5px solid
        currentColor;

    border-bottom:
        1.5px solid
        currentColor;

    transform:
        translateY(-2px)
        rotate(45deg);

    transition:
        transform 230ms var(--yn-motion);
}


.yn-nav-item:hover .yn-chevron,
.yn-nav-item.yn-is-open .yn-chevron {

    transform:
        translateY(2px)
        rotate(225deg);
}


/* =====================================================
   HOVER HALO
===================================================== */

.yn-hover-halo {

    position: fixed;

    top: 0;
    left: 0;

    z-index: 90;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(2, 2, 2, 0.70);

    border-radius:
        50%;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.75);

    transition:
        left 280ms var(--yn-motion),
        top 280ms var(--yn-motion),
        opacity 160ms ease,
        transform 280ms var(--yn-motion);
}


.yn-hover-halo.yn-is-visible {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =====================================================
   SERVICES MEGA MENU
===================================================== */

.yn-mega {

    position: absolute;

    top:
        calc(100% - 1px);

    left: 50%;

    z-index: 110;

    width:
        min(
            900px,
            calc(100vw - 46px)
        );

    padding-top:
        14px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(18px)
        scale(0.98);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 340ms var(--yn-motion);
}


/* =====================================================
   HOVER BRIDGE
===================================================== */

.yn-mega::before {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 20px;

    content: "";
}


.yn-nav-item:hover .yn-mega,
.yn-nav-item.yn-is-open .yn-mega {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}


/* =====================================================
   MEGA PANEL
===================================================== */

.yn-mega-panel {

    position: relative;

    display: grid;

    grid-template-columns:
        300px
        minmax(0, 1fr);

    gap: 28px;

    min-height: 310px;

    padding:
        30px
        32px;

    border:
        1px solid
        var(--yn-line);

    border-radius:
        var(--yn-radius);

    background:
        #ffffff;

    box-shadow:
        var(--yn-shadow);

    overflow: hidden;

    clip-path:
        inset(
            0 0 100% 0
            round 8px
        );

    transform-origin:
        top center;

    transition:
        clip-path 390ms var(--yn-motion),
        border-color 250ms ease;
}


.yn-nav-item:hover .yn-mega-panel,
.yn-nav-item.yn-is-open .yn-mega-panel {

    clip-path:
        inset(
            0 0 0 0
            round 8px
        );

    border-color:
        rgba(2, 2, 2, 0.20);
}


.yn-mega-panel::before {

    position: absolute;

    inset: 0;

    content: "";

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(2, 2, 2, 0.05),
            transparent
        );

    opacity: 0;

    transform:
        translateX(-25%);

    transition:
        opacity 300ms ease,
        transform 620ms var(--yn-motion);
}


.yn-nav-item:hover .yn-mega-panel::before,
.yn-nav-item.yn-is-open .yn-mega-panel::before {

    opacity: 1;

    transform:
        translateX(18%);
}


/* =====================================================
   MEGA COLUMN
===================================================== */

.yn-mega-column {

    position: relative;

    z-index: 2;

    display: grid;

    align-content: start;

    gap: 16px;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity 240ms ease,
        transform 350ms var(--yn-motion);
}


.yn-nav-item:hover .yn-mega-column,
.yn-nav-item.yn-is-open .yn-mega-column {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        calc(
            var(--order) * 60ms
        );
}


/* =====================================================
   MEGA KICKER
===================================================== */

.yn-mega-kicker {

    color:
        var(--yn-text-faint);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


/* =====================================================
   SERVICES LIST
===================================================== */

.yn-mega-list {

    display: grid;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;
}


.yn-mega-link {

    position: relative;

    display: flex;

    min-height: 46px;

    align-items: center;

    padding:
        0
        16px;

    border-radius:
        5px;

    color:
        var(--yn-text-soft);

    font-size:
        0.84rem;

    font-weight:
        700;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms var(--yn-motion);
}


.yn-mega-link::before {

    position: absolute;

    top: 8px;
    bottom: 8px;
    left: 0;

    width: 2px;

    content: "";

    background:
        var(--yn-black);

    opacity: 0;

    transform:
        scaleY(0);

    transform-origin:
        top;

    transition:
        opacity 180ms ease,
        transform 230ms var(--yn-motion);
}


.yn-mega-link:hover,
.yn-mega-link:focus-visible,
.yn-mega-link.yn-is-active {

    color:
        var(--yn-black);

    background:
        rgba(2, 2, 2, 0.06);

    transform:
        translateX(4px);

    outline: none;
}


.yn-mega-link:hover::before,
.yn-mega-link:focus-visible::before,
.yn-mega-link.yn-is-active::before {

    opacity: 1;

    transform:
        scaleY(1);
}


/* =====================================================
   SUBLINE
===================================================== */

.yn-subline {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--yn-text-soft);

    font-size:
        0.82rem;

    font-weight:
        700;
}


.yn-subline::before {

    width: 18px;
    height: 1px;

    content: "";

    background:
        var(--yn-line-strong);
}


/* =====================================================
   PREVIEW CARD
===================================================== */

.yn-preview-card {

    position: relative;

    display: block;

    min-height: 178px;

    margin-top: 12px;

    border:
        1px solid
        var(--yn-line);

    border-radius:
        var(--yn-radius);

    background:
        #f6f6f6;

    overflow: hidden;

    transition:
        transform 250ms var(--yn-motion),
        box-shadow 250ms ease;
}


.yn-preview-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 0 0 5px
        rgba(2, 2, 2, 0.08);
}


/* =====================================================
   PREVIEW IMAGE - ORIGINAL COLOR
===================================================== */

.yn-preview-image {

    display: block;

    width: 100%;

    min-height: 178px;

    aspect-ratio:
        16 / 7.5;

    object-fit: cover;

    /* KEEP ORIGINAL IMAGE COLORS */
    filter: none;

    transform:
        scale(1.01);

    transition:
        transform 350ms var(--yn-motion),
        opacity 250ms ease;
}


.yn-preview-card:hover
.yn-preview-image {

    transform:
        scale(1.055);
}


/* =====================================================
   PREVIEW FALLBACK
===================================================== */

.yn-preview-image.yn-preview-fallback {

    object-fit: contain;

    padding: 45px;

    background:
        #f5f5f5;

    /* ORIGINAL COLOR */
    filter: none;
}


/* =====================================================
   PREVIEW CHANGE ANIMATION
===================================================== */

.yn-preview-card.yn-is-changing
.yn-preview-image {

    animation:
        ynPreviewSwap
        360ms
        var(--yn-motion);
}


@keyframes ynPreviewSwap {

    0% {

        opacity: 0.35;

        transform:
            scale(1.08);

    }


    100% {

        opacity: 1;

        transform:
            scale(1.01);

    }

}


/* =====================================================
   PREVIEW CAPTION
===================================================== */

.yn-preview-caption {

    position: absolute;

    right: 14px;
    bottom: 14px;
    left: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    min-height: 38px;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    border-radius:
        var(--yn-radius);

    background:
        rgba(255, 255, 255, 0.88);

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}


.yn-preview-tag {

    color:
        rgba(0, 0, 0, 0.55);

    font-size:
        0.68rem;

    font-weight:
        700;

    text-transform:
        uppercase;
}


.yn-preview-title {

    color:
        var(--yn-black);

    font-size:
        0.88rem;

    font-weight:
        700;

    text-align:
        right;
}


/* =====================================================
   HEADER CTA
===================================================== */

.yn-header-action {

    position: relative;

    display: inline-flex;

    justify-self: end;

    min-height: 44px;

    align-items: center;

    justify-content: center;

    padding:
        0
        18px;

    border:
        1px solid
        var(--yn-black);

    border-radius:
        999px;

    background:
        var(--yn-black);

    color:
        var(--yn-white) !important;

    font-size:
        0.82rem;

    font-weight:
        700;

    overflow: hidden;

    transition:
        transform 220ms var(--yn-motion),
        box-shadow 220ms ease,
        color 220ms ease;
}


.yn-header-action::before {

    position: absolute;

    inset: 0;

    content: "";

    background:
        var(--yn-white);

    transform:
        translateX(-102%);

    transition:
        transform 340ms var(--yn-motion);
}


.yn-header-action span {

    position: relative;

    z-index: 1;
}


.yn-header-action:hover {

    color:
        var(--yn-black) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 0 0 5px
        rgba(2, 2, 2, 0.08);
}


.yn-header-action:hover::before {

    transform:
        translateX(0);
}


/* =====================================================
   MOBILE BUTTONS
===================================================== */

.yn-menu-toggle,
.yn-menu-close {

    position: relative;

    display: none;

    width: 48px;
    height: 48px;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--yn-line-strong);

    border-radius:
        50%;

    background:
        var(--yn-white);

    color:
        var(--yn-black);

    cursor: pointer;
}


/* =====================================================
   HAMBURGER
===================================================== */

.yn-menu-lines,
.yn-menu-lines::before,
.yn-menu-lines::after {

    display: block;

    width: 22px;
    height: 2px;

    border-radius: 5px;

    background:
        currentColor;

    transition:
        transform 250ms var(--yn-motion),
        opacity 180ms ease,
        width 180ms ease;
}


.yn-menu-lines {

    position: relative;
}


.yn-menu-lines::before,
.yn-menu-lines::after {

    position: absolute;

    right: 0;

    content: "";
}


.yn-menu-lines::before {

    width: 14px;

    transform:
        translateY(-7px);
}


.yn-menu-lines::after {

    width: 17px;

    transform:
        translateY(7px);
}


/* =====================================================
   MOBILE BACKDROP
===================================================== */

.yn-menu-backdrop {

    position: fixed;

    inset: 0;

    z-index: 200;

    background:
        rgba(0, 0, 0, 0.24);

    -webkit-backdrop-filter:
        blur(5px);

    backdrop-filter:
        blur(5px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 260ms ease,
        visibility 260ms ease;
}


.yn-mobile-is-open
.yn-menu-backdrop {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =====================================================
   MOBILE DRAWER
===================================================== */

.yn-mobile-menu {

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 210;

    display: flex;

    width:
        min(520px, 94vw);

    flex-direction: column;

    padding: 22px;

    border-left:
        1px solid
        var(--yn-line);

    background:
        rgba(255, 255, 255, 0.99);

    box-shadow:
        var(--yn-shadow);

    pointer-events: auto;

    transform:
        translateX(105%);

    transition:
        transform 420ms var(--yn-motion);
}


.yn-mobile-is-open
.yn-mobile-menu {

    transform:
        translateX(0);
}


/* =====================================================
   MOBILE TOP
===================================================== */

.yn-mobile-menu__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    min-height: 58px;

    padding-bottom: 20px;

    border-bottom:
        1px solid
        var(--yn-line);
}


.yn-mobile-menu__top
.yn-logo-plate {

    width:
        min(210px, 58vw);
}


/* =====================================================
   MOBILE CLOSE BUTTON
===================================================== */

.yn-menu-close {

    display: inline-flex;

    flex:
        0 0 auto;
}


.yn-menu-close::before,
.yn-menu-close::after {

    position: absolute;

    width: 22px;
    height: 2px;

    content: "";

    background:
        currentColor;

    border-radius:
        5px;
}


.yn-menu-close::before {

    transform:
        rotate(45deg);
}


.yn-menu-close::after {

    transform:
        rotate(-45deg);
}


/* =====================================================
   MOBILE NAVIGATION
===================================================== */

.yn-mobile-nav {

    display: grid;

    gap: 7px;

    padding:
        24px 0;

    overflow-y: auto;

    overscroll-behavior:
        contain;
}


/* =====================================================
   NORMAL MOBILE LINKS
===================================================== */

.yn-mobile-link {

    display: flex;

    width: 100%;

    min-height: 60px;

    align-items: center;

    justify-content: space-between;

    padding: 0;

    border-bottom:
        1px solid
        var(--yn-line);

    color:
        var(--yn-black);

    font-size:
        clamp(1.4rem, 4.5vw, 2.12rem);

    font-weight: 700;

    line-height: 1;

    text-align: left;

    opacity: 0;

    transform:
        translateX(30px);

    transition:
        opacity 260ms ease,
        transform 390ms var(--yn-motion),
        padding-left 180ms ease;
}


/* =====================================================
   MOBILE SERVICES ROW
===================================================== */

.yn-mobile-dropdown-row {

    display: flex;

    width: 100%;

    min-height: 60px;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        var(--yn-line);

    opacity: 0;

    transform:
        translateX(30px);

    transition:
        opacity 260ms ease,
        transform 390ms var(--yn-motion);
}


/* =====================================================
   MOBILE SERVICES TEXT
===================================================== */

.yn-mobile-service-link {

    display: flex;

    flex:
        1 1 auto;

    min-width: 0;

    min-height: 60px;

    align-items: center;

    padding: 0;

    color:
        var(--yn-black);

    font-size:
        clamp(1.4rem, 4.5vw, 2.12rem);

    font-weight: 700;

    line-height: 1;

    text-align: left;

    transition:
        padding-left 180ms ease,
        opacity 180ms ease;
}


.yn-mobile-service-link:hover,
.yn-mobile-service-link:focus-visible {

    padding-left:
        8px;

    outline: none;
}


/* =====================================================
   SERVICES ARROW BUTTON
===================================================== */

.yn-mobile-dropdown-toggle {

    display: flex;

    flex:
        0 0 48px;

    width: 48px;
    height: 48px;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--yn-black);

    cursor: pointer;
}


/* =====================================================
   MOBILE OPEN ANIMATION
===================================================== */

.yn-mobile-is-open
.yn-mobile-link {

    opacity: 1;

    transform:
        translateX(0);

    transition-delay:
        calc(
            40ms +
            (
                var(--item) * 40ms
            )
        );
}


.yn-mobile-is-open
.yn-mobile-dropdown-row {

    opacity: 1;

    transform:
        translateX(0);

    transition-delay:
        calc(
            40ms +
            (
                var(--item) * 40ms
            )
        );
}


.yn-mobile-link:hover {

    padding-left:
        8px;
}


/* =====================================================
   MOBILE SERVICES ARROW
===================================================== */

.yn-mobile-arrow {

    position: relative;

    display: grid;

    width: 32px;
    height: 32px;

    place-items: center;

    border:
        1px solid
        var(--yn-line-strong);

    border-radius:
        50%;

    background:
        var(--yn-white);

    transition:
        transform 230ms var(--yn-motion),
        background 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}


.yn-mobile-arrow::before {

    width: 8px;
    height: 8px;

    content: "";

    border-right:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

    transform:
        translateY(-2px)
        rotate(45deg);
}


.yn-mobile-dropdown-toggle:hover
.yn-mobile-arrow {

    border-color:
        var(--yn-black);

    background:
        rgba(2, 2, 2, 0.06);
}


.yn-mobile-group.yn-is-open
.yn-mobile-arrow {

    background:
        var(--yn-black);

    color:
        var(--yn-white);

    transform:
        rotate(180deg);
}


/* =====================================================
   MOBILE SERVICES ACCORDION
===================================================== */

.yn-mobile-panel {

    display: grid;

    grid-template-rows:
        0fr;

    opacity: 0;

    transition:
        grid-template-rows 340ms var(--yn-motion),
        opacity 220ms ease;
}


.yn-mobile-group.yn-is-open
.yn-mobile-panel {

    grid-template-rows:
        1fr;

    opacity: 1;
}


.yn-mobile-panel__inner {

    display: grid;

    gap: 8px;

    overflow: hidden;

    padding:
        10px
        0
        8px
        14px;
}


/* =====================================================
   MOBILE SERVICE SUBMENU LINKS
===================================================== */

.yn-mobile-panel a {

    display: grid;

    gap: 4px;

    padding:
        13px
        14px;

    border-left:
        2px solid
        var(--yn-black);

    background:
        rgba(2, 2, 2, 0.04);

    border-radius:
        0
        var(--yn-radius)
        var(--yn-radius)
        0;

    transition:
        background 180ms ease,
        transform 180ms var(--yn-motion);
}


.yn-mobile-panel a:hover,
.yn-mobile-panel a:focus-visible {

    background:
        rgba(2, 2, 2, 0.08);

    transform:
        translateX(4px);

    outline: none;
}


.yn-mobile-panel strong {

    color:
        var(--yn-black);

    font-size:
        0.98rem;

    font-weight:
        700;

    line-height:
        1.3;
}


.yn-mobile-panel span {

    color:
        var(--yn-text-soft);

    font-size:
        0.84rem;

    font-weight:
        400;

    line-height:
        1.4;
}


/* =====================================================
   MOBILE FOOT
===================================================== */

.yn-mobile-menu__foot {

    margin-top: auto;

    padding-top: 20px;

    border-top:
        1px solid
        var(--yn-line);
}


.yn-mobile-action {

    display: flex;

    width: 100%;

    min-height: 54px;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        var(--yn-black);

    border-radius:
        999px;

    background:
        var(--yn-black);

    color:
        var(--yn-white) !important;

    font-size:
        0.95rem;

    font-weight:
        700;

    transition:
        background 220ms ease,
        color 220ms ease,
        transform 220ms var(--yn-motion);
}


.yn-mobile-action:hover {

    background:
        var(--yn-white);

    color:
        var(--yn-black) !important;

    transform:
        translateY(-2px);
}


/* =====================================================
   TABLET / MOBILE
===================================================== */

@media (max-width: 1180px) {

    .yn-site-header {

        grid-template-columns:
            minmax(160px, auto)
            auto;

        height: 74px;
    }


    .yn-site-header.yn-is-scrolled {

        height: 70px;
    }


    .yn-desktop-nav,
    .yn-header-action,
    .yn-hover-halo {

        display: none;
    }


    .yn-menu-toggle {

        display: inline-flex;

        justify-self: end;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 640px) {

    .yn-site-header {

        padding:
            0 16px;
    }


    .yn-logo-plate {

        width:
            min(180px, 58vw);

        min-height:
            42px;

        padding:
            7px
            11px;
    }


    .yn-brand-logo {

        max-height:
            27px;
    }


    .yn-mobile-menu {

        width:
            100vw;

        padding:
            18px;
    }


    .yn-mobile-link,
    .yn-mobile-dropdown-row,
    .yn-mobile-service-link {

        min-height:
            58px;
    }


    .yn-mobile-dropdown-toggle {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;
    }


    .yn-mobile-arrow {

        width:
            30px;

        height:
            30px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .yn-site-header {

        height:
            70px;
    }


    .yn-site-header.yn-is-scrolled {

        height:
            66px;
    }


    .yn-logo-plate {

        width:
            min(165px, 55vw);
    }


    .yn-menu-toggle {

        width:
            44px;

        height:
            44px;
    }


    .yn-mobile-menu {

        padding:
            16px;
    }


    .yn-mobile-nav {

        padding:
            18px 0;
    }


    .yn-mobile-link,
    .yn-mobile-service-link {

        font-size:
            clamp(1.25rem, 6vw, 1.7rem);
    }


    .yn-mobile-panel__inner {

        padding-left:
            8px;
    }


    .yn-mobile-panel a {

        padding:
            11px
            12px;
    }


    .yn-mobile-panel strong {

        font-size:
            0.9rem;
    }


    .yn-mobile-panel span {

        font-size:
            0.76rem;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .yn-menu-shell *,
    .yn-menu-shell *::before,
    .yn-menu-shell *::after {

        transition-duration:
            1ms !important;

        animation-duration:
            1ms !important;

        animation-iteration-count:
            1 !important;
    }

}/* End custom CSS */