/* =========================================================
   ARSP HEADER + NAVIGATION
   Clean responsive layout
========================================================= */

:root{
    --arsp-navy:#071d68;
    --arsp-navy-dark:#04144d;
    --arsp-green:#07883f;
    --arsp-red:#c62828;
    --arsp-blue:#1167b1;
    --arsp-white:#ffffff;
    --arsp-light:#f4f7fb;
    --arsp-border:#dfe5ef;
}

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

.main-header{
    width:100%;
    position:relative;
    z-index:5000;
    background:#fff;
    box-shadow:0 3px 16px rgba(0,0,0,.10);
}

/* =========================================================
   MAIN HEADER ROW
========================================================= */

.arsp-header-main{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:18px 24px;
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    column-gap:28px;
    align-items:center;
}

/* =========================================================
   LOGO / ACTION AREA
========================================================= */

.arsp-logo-section{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.arsp-logo-box{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.arsp-main-logo{
    width:100px;
    height:100px;
    object-fit:contain;
}

/* Mobile menu hidden on desktop */

.arsp-mobile-menu{
    display:none;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.arsp-action-buttons{
    grid-column:1;
    grid-row:2;

    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.arsp-action-btn{
    min-width:0;
    min-height:38px;
    padding:7px 8px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:0;
    border-radius:6px;

    background:var(--arsp-green);
    color:#fff !important;

    font-family:inherit;
    font-size:10px;
    font-weight:800;
    line-height:1.1;
    text-align:center;
    text-decoration:none;

    white-space:nowrap;
    overflow:hidden;
    transition:.2s ease;
}

.arsp-action-btn span{
    overflow:hidden;
    text-overflow:ellipsis;
}

.arsp-action-btn:hover{
    filter:brightness(.92);
    transform:translateY(-1px);
}

.arsp-action-btn i{
    flex:0 0 auto;
    font-size:11px;
}

.arsp-qr-btn{
    grid-column:1 / -1;
    background:var(--arsp-navy);
    cursor:pointer;
}

/* =========================================================
   BRANDING
========================================================= */

.arsp-branding-section{
    min-width:0;
    display:flex;
    align-items:center;
}

.arsp-branding-content{
    min-width:0;
}

.arsp-branding-content h1{
    margin:0 0 7px;
    color:var(--arsp-navy);
    font-size:42px;
    line-height:1.08;
    font-weight:900;
    letter-spacing:-.7px;
}

.arsp-branding-content p{
    margin:0;
    color:#687089;
    font-size:16px;
    line-height:1.4;
}

/* =========================================================
   MOVING NOTICE
========================================================= */

.scrolling-messages{
    width:100%;
    overflow:hidden;
    background:#f0f8f3;
    border-top:1px solid #dcebe2;
    border-bottom:1px solid #dcebe2;
    white-space:nowrap;
}

.scrolling-messages-track{
    display:inline-flex;
    align-items:center;
    gap:70px;
    min-width:max-content;
    padding:10px 0;
    animation:arspTicker 28s linear infinite;
}

.scrolling-message{
    display:inline-flex;
    align-items:center;
    gap:9px;
    flex-shrink:0;

    color:var(--arsp-navy);
    font-size:14px;
    font-weight:800;
    text-decoration:none;
}

.scrolling-message i{
    color:var(--arsp-green);
}

.scrolling-messages:hover .scrolling-messages-track{
    animation-play-state:paused;
}

@keyframes arspTicker{
    from{
        transform:translateX(100vw);
    }

    to{
        transform:translateX(-100%);
    }
}

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

.navbar{
    width:100%;
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:0;
    padding:0 8px;

    background:var(--arsp-navy);

    overflow:visible;
}

.navbar > a,
.navbar .dropdown > a{
    position:relative;

    min-height:48px;
    padding:0 15px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:12px;
    font-weight:700;
    text-decoration:none;

    white-space:nowrap;

    transition:.2s ease;
}

.navbar > a:hover,
.navbar .dropdown > a:hover{
    background:var(--arsp-green);
    color:#fff;
}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown{
    position:relative;
    display:flex;
    align-items:center;
}

.dropdown-content{
    display:none;

    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);

    min-width:210px;
    padding:7px 0;

    background:#fff;
    border-radius:0 0 8px 8px;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    z-index:99999;
}

.dropdown-content a{
    display:block;
    padding:11px 17px;

    color:#24304d;
    background:#fff;

    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;

    transition:.2s ease;
}

.dropdown-content a:hover{
    background:#f2f5fa;
    color:var(--arsp-navy);
    padding-left:22px;
}

.dropdown:hover .dropdown-content{
    display:block;
    animation:dropdownIn .18s ease;
}

@keyframes dropdownIn{
    from{
        opacity:0;
        transform:translateX(-50%) translateY(5px);
    }

    to{
        opacity:1;
        transform:translateX(-50%) translateY(0);
    }
}

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

@media(max-width:1000px){

    .arsp-header-main{
        grid-template-columns:150px minmax(0,1fr);
        column-gap:20px;
        padding:15px 18px;
    }

    .arsp-main-logo{
        width:82px;
        height:82px;
    }

    .arsp-branding-content h1{
        font-size:32px;
    }

    .arsp-branding-content p{
        font-size:14px;
    }

    .arsp-action-btn{
        font-size:9px;
    }

    .navbar > a,
    .navbar .dropdown > a{
        padding:0 10px;
        font-size:10px;
    }
}

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

@media(max-width:768px){

    .arsp-header-main{
        width:100%;
        padding:14px 14px 12px;

        display:grid;

        /*
           Row 1:
           logo/menu | branding

           Row 2:
           actions spanning full width
        */

        grid-template-columns:92px minmax(0,1fr);
        grid-template-rows:auto auto;

        column-gap:16px;
        row-gap:12px;

        align-items:center;
    }

    /* -------------------------
       LOGO
    ------------------------- */

    .arsp-logo-section{
        grid-column:1;
        grid-row:1;

        width:92px;

        align-self:start;

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .arsp-logo-box{
        width:92px;

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:9px;
    }

    .arsp-main-logo{
        width:78px;
        height:78px;
    }

    /* -------------------------
       MOBILE MENU
    ------------------------- */

    .arsp-mobile-menu{
        display:flex;

        width:52px;
        height:52px;

        align-items:center;
        justify-content:center;

        border:1px solid #dbe2ec;
        border-radius:10px;

        background:#fff;
        color:var(--arsp-navy);

        font-size:27px;

        box-shadow:0 2px 7px rgba(0,0,0,.06);

        cursor:pointer;
    }

    .arsp-mobile-menu:hover{
        background:#f4f7fb;
    }

    /* -------------------------
       BRANDING
    ------------------------- */

    .arsp-branding-section{
        grid-column:2;
        grid-row:1;

        width:100%;
        min-width:0;

        align-self:center;
    }

    .arsp-branding-content h1{
        margin:0;

        font-size:24px;
        line-height:1.08;
        letter-spacing:-.3px;

        overflow-wrap:anywhere;
    }

    .arsp-branding-content p{
        display:none;
    }

    /* -------------------------
       ACTIONS
       FULL WIDTH
    ------------------------- */

    .arsp-action-buttons{
        grid-column:1 / -1;
        grid-row:2;

        width:100%;

        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));

        gap:6px;
    }

    .arsp-action-btn{
        width:100%;
        min-width:0;
        min-height:40px;

        padding:7px 5px;

        font-size:9px;
        border-radius:6px;
    }

    .arsp-qr-btn{
        grid-column:auto;
    }

    .arsp-action-btn i{
        font-size:10px;
    }

    /* -------------------------
       NOTICE
    ------------------------- */

    .scrolling-messages-track{
        gap:45px;
        padding:9px 0;
        animation-duration:23s;
    }

    .scrolling-message{
        font-size:12px;
    }

    /* -------------------------
       NAV
    ------------------------- */

    .navbar{
        display:none;

        width:100%;
        min-height:0;

        padding:6px 10px;

        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;

        gap:2px;

        overflow:visible;
    }

    .navbar.mobile-open{
        display:flex;
    }

    .navbar > a,
    .navbar .dropdown > a{
        width:100%;
        min-height:44px;

        justify-content:flex-start;

        padding:0 15px;

        border-radius:5px;

        font-size:12px;
    }

    .dropdown{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .dropdown-content{
        position:static;

        display:none;

        width:100%;
        min-width:0;
        max-width:none;

        transform:none;

        padding:0;

        box-shadow:none;
        border-radius:0;
        background:#061754;
    }

    .dropdown.open .dropdown-content{
        display:block;
    }

    .dropdown-content a{
        min-height:40px;
        padding:9px 28px;

        background:#061754;
        color:#fff;

        font-size:11px;
    }

    .dropdown-content a:hover{
        background:#0b2b83;
        color:#fff;
        padding-left:32px;
    }

    .dropdown:hover .dropdown-content{
        animation:none;
    }
}

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

@media(max-width:480px){

    .arsp-header-main{
        grid-template-columns:78px minmax(0,1fr);
        column-gap:12px;
        padding:12px 10px 10px;
    }

    .arsp-logo-section{
        width:78px;
    }

    .arsp-logo-box{
        width:78px;
    }

    .arsp-main-logo{
        width:66px;
        height:66px;
    }

    .arsp-mobile-menu{
        width:46px;
        height:46px;
        font-size:24px;
    }

    .arsp-branding-content h1{
        font-size:20px;
    }

    .arsp-action-buttons{
        gap:5px;
    }

    .arsp-action-btn{
        min-height:38px;
        padding:6px 3px;
        font-size:8px;
    }

    .arsp-action-btn i{
        font-size:9px;
    }

    .scrolling-message{
        font-size:11px;
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.arsp-mobile-menu:focus-visible,
.arsp-action-btn:focus-visible,
.navbar a:focus-visible{
    outline:2px solid #8dd9ad;
    outline-offset:2px;
}

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* =========================================================
   FINAL HEADER ALIGNMENT FIX
========================================================= */

/* Desktop */
.arsp-header-main{
    align-items:start;
}

.arsp-logo-section{
    align-self:start;
}

.arsp-branding-section{
    align-self:start;
    padding-top:8px;
}

.arsp-action-buttons{
    grid-column:1;
    grid-row:2;
    width:100%;
}


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

@media(max-width:768px){

    .arsp-header-main{
        grid-template-columns:88px minmax(0,1fr);
        grid-template-rows:auto auto;
        column-gap:14px;
        row-gap:12px;
        align-items:start;
        padding:13px 12px 12px;
    }

    /* Logo stays at the very top */
    .arsp-logo-section{
        grid-column:1;
        grid-row:1;
        width:88px;
        align-self:start;
    }

    .arsp-logo-box{
        width:88px;
        align-items:center;
    }

    .arsp-main-logo{
        width:74px;
        height:74px;
    }

    /* Menu directly below logo */
    .arsp-mobile-menu{
        width:48px;
        height:48px;
        margin-top:2px;
        font-size:25px;
    }

    /* Brand aligns with top of logo */
    .arsp-branding-section{
        grid-column:2;
        grid-row:1;
        width:100%;
        align-self:start;
        padding-top:5px;
    }

    .arsp-branding-content{
        width:100%;
    }

    .arsp-branding-content h1{
        margin:0;
        font-size:23px;
        line-height:1.08;
        text-align:left;
    }

    /* Action buttons get their own full-width row */
    .arsp-action-buttons{
        grid-column:1 / -1;
        grid-row:2;

        width:100%;

        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;

        margin-top:2px;
    }

    /* QR = full width */
    .arsp-action-buttons .arsp-qr-btn{
        grid-column:1 / -1;
        width:100%;
    }

    .arsp-action-btn{
        width:100%;
        min-width:0;
        min-height:42px;

        padding:8px 6px;

        border-radius:7px;

        font-size:9px;
        line-height:1.1;
    }

    .arsp-action-btn span{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

}


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

@media(max-width:480px){

    .arsp-header-main{
        grid-template-columns:76px minmax(0,1fr);
        column-gap:12px;
        padding:11px 10px;
    }

    .arsp-logo-section{
        width:76px;
    }

    .arsp-logo-box{
        width:76px;
    }

    .arsp-main-logo{
        width:64px;
        height:64px;
    }

    .arsp-mobile-menu{
        width:44px;
        height:44px;
        font-size:23px;
    }

    .arsp-branding-section{
        padding-top:3px;
    }

    .arsp-branding-content h1{
        font-size:20px;
        line-height:1.08;
    }

    .arsp-action-buttons{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .arsp-action-btn{
        min-height:40px;
        padding:7px 4px;
        font-size:8.5px;
    }

    .arsp-action-btn i{
        font-size:9px;
    }

}

/* =========================================================
   MOBILE MENU — TOP RIGHT
========================================================= */

@media(max-width:768px){

    .arsp-header-main{
        position:relative;
    }

    .arsp-mobile-menu{
        position:absolute;
        top:14px;
        right:14px;
        z-index:50;
    }

    .arsp-logo-section{
        position:relative;
    }

    .arsp-branding-section{
        padding-right:58px;
    }

}

@media(max-width:480px){

    .arsp-mobile-menu{
        top:11px;
        right:10px;
    }

    .arsp-branding-section{
        padding-right:52px;
    }

}

/* =========================================================
   FINAL MOBILE HEADER FIX
   Keep logo + brand aligned, menu at TOP-RIGHT,
   action buttons below in a clean 2-column layout.
   ========================================================= */

@media (max-width: 768px) {

    .arsp-header-main {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 18px 18px 20px !important;
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 14px !important;
        row-gap: 16px !important;
        align-items: start !important;
        box-sizing: border-box !important;
    }

    /* Logo stays in its own column */
    .arsp-logo-section {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 82px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .arsp-logo-box {
        position: relative !important;
        width: 82px !important;
        height: 82px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .arsp-main-logo {
        width: 82px !important;
        height: 82px !important;
        max-width: 82px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    /* Menu is NOT inside/over the logo anymore */
    .arsp-mobile-menu {
        position: fixed !important;
        top: 178px !important;
        right: 18px !important;
        left: auto !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10050 !important;
    }

    /* Branding aligned with the top of the logo */
    .arsp-branding-section {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px 55px 0 0 !important;
        align-self: start !important;
    }

    .arsp-branding-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .arsp-branding-content h1 {
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 1.12 !important;
        text-align: left !important;
    }

    .arsp-branding-content p {
        margin: 5px 0 0 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    /* Action buttons become a proper full-width block */
    .arsp-action-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* QR button occupies the complete first row */
    .arsp-action-buttons .arsp-qr-btn {
        grid-column: 1 / -1 !important;
    }
}

/* Small phones */
@media (max-width: 480px) {

    .arsp-header-main {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        padding: 14px 14px 16px !important;
        row-gap: 14px !important;
    }

    .arsp-logo-section,
    .arsp-logo-box {
        width: 68px !important;
    }

    .arsp-logo-box {
        height: 68px !important;
    }

    .arsp-main-logo {
        width: 68px !important;
        height: 68px !important;
    }

    .arsp-branding-section {
        padding-right: 48px !important;
        padding-top: 2px !important;
    }

    .arsp-branding-content h1 {
        font-size: 20px !important;
        line-height: 1.12 !important;
    }

    .arsp-branding-content p {
        font-size: 9px !important;
    }

    .arsp-mobile-menu {
        top: 170px !important;
        right: 14px !important;
        width: 46px !important;
        height: 46px !important;
    }

    .arsp-action-buttons {
        gap: 8px !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        min-height: 46px !important;
        font-size: 11px !important;
        padding: 8px 6px !important;
    }
}


/* =========================================================
   FINAL MENU POSITION
   Mobile menu belongs to the top-right of the header.
   ========================================================= */

@media (max-width: 768px) {

    .arsp-header-main {
        position: relative !important;
    }

    .arsp-mobile-menu {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        z-index: 10050 !important;
    }

}

@media (max-width: 480px) {

    .arsp-mobile-menu {
        top: 14px !important;
        right: 14px !important;
        width: 46px !important;
        height: 46px !important;
    }

}

/* =========================================================
   FINAL MOBILE MENU ANCHOR FIX
   Menu must be positioned relative to the FULL HEADER,
   not relative to the logo box.
   ========================================================= */

@media (max-width: 768px) {

    .arsp-header-main {
        position: relative !important;
    }

    /* Remove the logo box as the positioning parent */
    .arsp-logo-box {
        position: static !important;
    }

    .arsp-mobile-menu {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;

        width: 52px !important;
        height: 52px !important;

        margin: 0 !important;
        z-index: 10050 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

}

@media (max-width: 480px) {

    .arsp-mobile-menu {
        top: 14px !important;
        right: 14px !important;
        width: 46px !important;
        height: 46px !important;
    }

}

/* =========================================================
   DEFINITIVE MOBILE HEADER MENU POSITION
   ========================================================= */

@media (max-width: 768px) {

    .arsp-header-main {
        position: relative !important;
    }

    .arsp-logo-section {
        position: static !important;
    }

    .arsp-logo-box {
        position: static !important;
    }

    .arsp-mobile-menu {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;

        width: 48px !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 99999 !important;
    }

}

@media (max-width: 480px) {

    .arsp-mobile-menu {
        top: 11px !important;
        right: 10px !important;
        width: 44px !important;
        height: 44px !important;
    }

}

/* =========================================================
   DESKTOP / TABLET HEADER FINAL LAYOUT
   ========================================================= */

@media (min-width: 769px) {

    .arsp-header-main {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 18px 30px !important;

        display: grid !important;
        grid-template-columns: 120px minmax(300px, 1fr) auto !important;
        grid-template-rows: auto auto !important;

        column-gap: 22px !important;
        row-gap: 12px !important;

        align-items: center !important;
        box-sizing: border-box !important;
    }

    /* Logo */
    .arsp-logo-section {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;

        width: 120px !important;
        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
    }

    .arsp-logo-box {
        width: 110px !important;
        height: 110px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;
    }

    .arsp-main-logo {
        width: 105px !important;
        height: 105px !important;
        max-width: 105px !important;
        object-fit: contain !important;
    }

    /* Desktop menu button is hidden */
    .arsp-mobile-menu {
        display: none !important;
    }

    /* Branding */
    .arsp-branding-section {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;
    }

    .arsp-branding-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .arsp-branding-content h1 {
        margin: 0 !important;
        font-size: 32px !important;
        line-height: 1.15 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .arsp-branding-content p {
        margin: 6px 0 0 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }

    /* Action buttons */
    .arsp-action-buttons {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 9px !important;

        align-items: stretch !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;

        padding: 9px 10px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .arsp-action-buttons .arsp-qr-btn {
        grid-column: auto !important;
    }

}

/* =========================================================
   MEDIUM DESKTOP / TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    .arsp-header-main {
        grid-template-columns: 90px minmax(250px, 1fr) auto !important;
        column-gap: 14px !important;
        padding: 14px 18px !important;
    }

    .arsp-logo-section {
        width: 90px !important;
    }

    .arsp-logo-box {
        width: 82px !important;
        height: 82px !important;
    }

    .arsp-main-logo {
        width: 78px !important;
        height: 78px !important;
    }

    .arsp-branding-content h1 {
        font-size: 25px !important;
    }

    .arsp-branding-content p {
        font-size: 12px !important;
    }

    .arsp-action-buttons {
        grid-template-columns: repeat(5, minmax(90px, 1fr)) !important;
        gap: 6px !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        min-height: 38px !important;
        padding: 7px 7px !important;
        font-size: 10px !important;
    }

}

/* =========================================================
   FINAL MOBILE ACTION-BUTTON / HEADER FIX
   Keep logo + branding + menu, but let actions span width.
========================================================= */

@media (max-width: 768px) {

    .arsp-header-main {
        position: relative !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 105px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 14px !important;
        row-gap: 12px !important;
        align-items: start !important;
        padding: 14px 14px 12px !important;
    }

    /*
     * Let logo-box and action-buttons become direct
     * grid items of the header.
     */
    .arsp-logo-section {
        display: contents !important;
    }

    .arsp-logo-box {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 105px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .arsp-main-logo {
        width: 78px !important;
        height: 78px !important;
        object-fit: contain !important;
    }

    /*
     * Branding stays beside the logo.
     */
    .arsp-branding-section {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        align-self: start !important;
        padding: 4px 52px 0 0 !important;
    }

    .arsp-branding-content h1 {
        margin: 0 !important;
        font-size: 23px !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

    .arsp-branding-content p {
        display: none !important;
    }

    /*
     * MENU = top-right.
     */
    .arsp-mobile-menu {
        display: flex !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 100 !important;
        width: 52px !important;
        height: 52px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /*
     * ACTION BUTTONS = full header width.
     */
    .arsp-action-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * QR button spans both columns.
     */
    .arsp-action-buttons .arsp-qr-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 9px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .arsp-action-buttons .arsp-action-btn span {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}


/* Smaller phones */
@media (max-width: 480px) {

    .arsp-header-main {
        grid-template-columns: 86px minmax(0, 1fr) !important;
        column-gap: 12px !important;
        padding: 11px 10px 12px !important;
    }

    .arsp-logo-box {
        width: 86px !important;
    }

    .arsp-main-logo {
        width: 68px !important;
        height: 68px !important;
    }

    .arsp-branding-section {
        padding-right: 48px !important;
        padding-top: 2px !important;
    }

    .arsp-branding-content h1 {
        font-size: 20px !important;
        line-height: 1.08 !important;
    }

    .arsp-mobile-menu {
        top: 10px !important;
        right: 10px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 24px !important;
    }

    .arsp-action-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        min-height: 42px !important;
        padding: 8px 6px !important;
        font-size: 9px !important;
    }
}


/* =========================================================
   FINAL DESKTOP / TABLET HEADER LAYOUT
   Mobile rules are intentionally untouched.
========================================================= */

@media (min-width: 769px) {

    .arsp-header-main {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 16px 24px !important;

        display: grid !important;
        grid-template-columns: 125px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        column-gap: 22px !important;
        row-gap: 12px !important;

        align-items: start !important;
        position: relative !important;
    }

    /*
     * Remove the artificial 90/150/190px restriction.
     * The logo and action buttons become independent
     * grid items while keeping the existing HTML.
     */
    .arsp-logo-section {
        display: contents !important;
    }

    /*
     * LOGO
     */
    .arsp-logo-box {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 125px !important;
        height: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .arsp-main-logo {
        width: 88px !important;
        height: 88px !important;
        object-fit: contain !important;
    }

    /*
     * BRANDING
     */
    .arsp-branding-section {
        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding: 4px 0 0 !important;
    }

    .arsp-branding-content {
        width: 100% !important;
        min-width: 0 !important;
    }

    .arsp-branding-content h1 {
        margin: 0 0 5px !important;

        color: var(--arsp-navy) !important;
        font-size: 32px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
        letter-spacing: -0.5px !important;

        text-align: left !important;
        white-space: normal !important;
    }

    .arsp-branding-content p {
        display: block !important;

        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    /*
     * ACTION BUTTONS
     * Full-width row underneath logo + branding.
     */
    .arsp-action-buttons {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;
        grid-template-columns:
            minmax(120px, 1fr)
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            minmax(120px, 1fr) !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * QR is a normal button on desktop.
     */
    .arsp-action-buttons .arsp-qr-btn {
        grid-column: auto !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;

        padding: 8px 10px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    /*
     * MENU MUST NOT APPEAR ON DESKTOP.
     */
    .arsp-mobile-menu {
        display: none !important;
    }
}


/* =========================================================
   MEDIUM DESKTOP / CHROME "DESKTOP SITE" WIDTH
========================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    .arsp-header-main {
        grid-template-columns: 105px minmax(0, 1fr) !important;
        column-gap: 16px !important;
        padding: 13px 16px !important;
    }

    .arsp-logo-box {
        width: 105px !important;
    }

    .arsp-main-logo {
        width: 76px !important;
        height: 76px !important;
    }

    .arsp-branding-section {
        padding-top: 3px !important;
    }

    .arsp-branding-content h1 {
        font-size: 25px !important;
        line-height: 1.08 !important;
    }

    .arsp-branding-content p {
        font-size: 11px !important;
    }

    .arsp-action-buttons {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .arsp-action-buttons .arsp-action-btn {
        min-height: 36px !important;
        padding: 7px 6px !important;
        font-size: 9px !important;
    }
}