/* =========================================================
   POST.CSS
   VBlink HR Consultants
   Responsive Blog Article Stylesheet
========================================================= */


/* =========================================================
   1. GLOBAL RESET
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    margin:0;
    padding:0;

    font-family:'Inter',sans-serif;

    color:#102033;

    background:
        linear-gradient(
            180deg,
            #f5f8ff 0%,
            #ffffff 55%,
            #f7f9fc 100%
        );

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

body.modal-open{
    overflow:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea{
    font-family:inherit;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.container{
    width:min(1200px,92%);
    margin:0 auto;
}


/* =========================================================
   2. SITE HEADER
========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    background:rgba(255,255,255,.94);

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

    border-bottom:
        1px solid rgba(16,32,51,.08);

    box-shadow:
        0 6px 20px rgba(16,32,51,.06);
}


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

.header-inner{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    min-height:66px;

    padding:.55rem 0;

    flex-wrap:nowrap;
}


/* =========================================================
   BRAND
========================================================= */

.brand{
    display:flex;

    align-items:center;

    gap:.65rem;

    min-width:max-content;

    flex-shrink:0;
}

.brand-logo{
    width:46px;
    height:46px;

    border-radius:14px;

    object-fit:contain;

    background:#fff;

    padding:4px;

    box-shadow:
        0 6px 16px rgba(37,99,235,.14);

    flex-shrink:0;
}

.brand-text{
    display:flex;

    flex-direction:column;

    line-height:1.1;

    min-width:max-content;
}

.brand-name{
    font-size:.98rem;

    font-weight:800;

    letter-spacing:.15px;

    white-space:nowrap;
}

.brand-tagline{
    font-size:.78rem;

    color:#60738d;

    margin-top:.18rem;

    white-space:nowrap;
}


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

.header-contact{
    display:flex;

    align-items:center;

    gap:.7rem;

    margin-left:auto;

    flex-shrink:0;
}

.phone-link{
    display:inline-flex;

    align-items:center;

    gap:.4rem;

    color:#102033;

    font-weight:700;

    white-space:nowrap;

    font-size:.92rem;
}


/* =========================================================
   PHONE ICON
========================================================= */

.phone-icon-btn{
    width:30px;
    height:30px;

    display:inline-flex;

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

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#fff;

    box-shadow:
        0 8px 18px rgba(37,99,235,.25);

    animation:
        ringPulse 1.4s ease-in-out infinite;

    flex-shrink:0;
}

.phone-icon-btn svg{
    width:18px;
    height:18px;

    fill:currentColor;
}


/* =========================================================
   PHONE RING
========================================================= */

@keyframes ringPulse{

    0%{
        transform:translateY(0);
    }

    20%{
        transform:translateY(-1px);
    }

    40%{
        transform:translateY(1px);
    }

    60%{
        transform:translateY(-1px);
    }

    80%{
        transform:translateY(1px);
    }

    100%{
        transform:translateY(0);
    }
}

.phone-number{
    display:inline-block;
}


/* =========================================================
   APPLY BUTTON
========================================================= */

.apply-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.68rem .95rem;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#fff;

    font-weight:700;

    white-space:nowrap;

    box-shadow:
        0 10px 22px rgba(37,99,235,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    overflow:hidden;

    flex-shrink:0;
}

.apply-btn:hover{

    transform:translateY(-1px);

    box-shadow:
        0 14px 30px rgba(37,99,235,.28);
}


/* =========================================================
   APPLY BUTTON PULSE
========================================================= */

.apply-btn.pulse-cta{

    border:
        2px solid rgba(255,255,255,.7);

    box-shadow:
        0 0 0 0 rgba(37,99,235,.4),
        0 10px 22px rgba(37,99,235,.22);

    animation:
        pulseGrow 1.8s ease-in-out infinite;
}

.apply-btn.pulse-cta::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:inherit;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.45) 0%,
            rgba(37,99,235,0) 60%
        );

    opacity:0;

    pointer-events:none;

    animation:
        pulseGlow 1.8s ease-in-out infinite;
}

@keyframes pulseGrow{

    0%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(37,99,235,.4),
            0 10px 22px rgba(37,99,235,.22);
    }

    50%{

        transform:scale(1.06);

        box-shadow:
            0 0 0 5px rgba(37,99,235,0),
            0 14px 30px rgba(37,99,235,.28);
    }

    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(37,99,235,.4),
            0 10px 22px rgba(37,99,235,.22);
    }
}

@keyframes pulseGlow{

    0%{
        opacity:0;
        transform:scale(.9);
    }

    50%{
        opacity:1;
        transform:scale(1.1);
    }

    100%{
        opacity:0;
        transform:scale(1.2);
    }
}

.apply-btn.pulse-cta:hover{
    animation:none;
}

.apply-btn.pulse-cta:hover::before{

    animation:none;

    opacity:1;
}


/* =========================================================
   3. DESKTOP NAVIGATION
========================================================= */

.main-nav{

    display:flex;

    align-items:center;

    gap:.35rem;

    margin-left:1.5rem;

    flex-shrink:1;
}

.nav-item{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:84px;

    padding:.6rem .85rem;

    color:#102033;

    font-weight:700;

    background:#edf4ff;

    border:
        1px solid rgba(37,99,235,.12);

    transform:skewX(-14deg);

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;

    overflow:hidden;

    font-size:.86rem;

    white-space:nowrap;
}

.nav-item span{

    display:inline-block;

    transform:skewX(14deg);

    position:relative;

    z-index:2;
}


/* =========================================================
   DESKTOP DOUBLE-LINE EFFECT
========================================================= */

.nav-item::before,
.nav-item::after{

    content:"";

    position:absolute;

    left:16%;

    width:68%;

    height:2px;

    background:#2563eb;

    transform:scaleX(0);

    transition:
        transform .3s ease;

    pointer-events:none;
}

.nav-item::before{

    top:6px;

    transform-origin:left;
}

.nav-item::after{

    bottom:6px;

    transform-origin:right;
}

.nav-item:hover,
.nav-item.active{

    background:#dfeaff;

    color:#1746a2;

    transform:
        skewX(-14deg)
        translateY(-1px);
}

.nav-item:hover::before,
.nav-item:hover::after,
.nav-item.active::before,
.nav-item.active::after{

    transform:scaleX(1);
}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.menu-toggle{

    display:none;

    width:42px;
    height:42px;

    align-items:center;

    justify-content:center;

    border:
        1px solid rgba(37,99,235,.15);

    border-radius:12px;

    background:#edf4ff;

    color:#1746a2;

    cursor:pointer;

    font-size:1.25rem;

    flex-shrink:0;

    transition:
        background .25s ease,
        transform .25s ease;
}

.menu-toggle:hover{

    background:#dfeaff;

    transform:translateY(-1px);
}


/* =========================================================
   4. HERO
========================================================= */

.hero{

    padding:
        3.6rem
        0
        2.4rem;

    background:
        radial-gradient(
            circle at top left,
            #dbe7ff 0,
            #f5f8ff 35%,
            transparent 60%
        ),
        linear-gradient(
            135deg,
            rgba(37,99,235,.08),
            rgba(124,58,237,.08)
        );
}

.hero-inner{
    max-width:780px;
}

.eyebrow{

    display:inline-block;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#5b6b86;

    background:#edf4ff;

    padding:
        .55rem
        .85rem;

    border-radius:999px;

    margin-bottom:1rem;
}

.hero h1{

    font-size:
        clamp(
            2.2rem,
            4.5vw,
            3.2rem
        );

    line-height:1.05;

    margin:
        .2rem
        0
        1rem;
}

.hero p{

    color:#52637c;

    line-height:1.7;

    margin:.6rem 0;
}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:
        .6rem
        1.4rem;

    margin-top:1.1rem;

    font-size:.92rem;

    color:#60738d;
}


/* =========================================================
   5. ARTICLE LAYOUT
========================================================= */

.article-layout{

    padding:
        2.8rem
        0
        4.2rem;
}

.article-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.7fr)
        minmax(280px,.9fr);

    gap:1.6rem;

    align-items:start;
}


/* =========================================================
   ARTICLE MAIN
========================================================= */

.article-main{

    min-width:0;

    background:#fff;

    border-radius:24px;

    padding:
        1.8rem
        1.9rem
        2.1rem;

    border:
        1px solid rgba(16,32,51,.08);

    box-shadow:
        0 20px 50px rgba(16,32,51,.07);
}


/* =========================================================
   ARTICLE IMAGE
========================================================= */

.article-hero-image{

    border-radius:20px;

    overflow:hidden;

    margin-bottom:1.4rem;

    background:#e0e8ff;

    max-height:320px;
}

.article-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:14px;

    cursor:zoom-in;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.article-hero-image img:hover{

    transform:scale(1.02);

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);
}


/* =========================================================
   ARTICLE TYPOGRAPHY
========================================================= */

.article-main h2{

    margin:
        1.6rem
        0
        .8rem;

    font-size:1.3rem;

    line-height:1.35;

    color:#102033;
}

.article-main p{

    color:#36475f;

    line-height:1.8;

    margin:.6rem 0;
}


/* =========================================================
   ARTICLE QUOTE
========================================================= */

.article-quote{

    margin:
        1.8rem
        0;

    padding:
        1.1rem
        1.4rem;

    border-left:
        4px solid #2563eb;

    border-radius:
        0
        18px
        18px
        0;

    background:#f0f4ff;

    color:#264067;

    font-style:italic;

    line-height:1.7;
}


/* =========================================================
   6. SHARE BAR
========================================================= */

.share-bar{

    margin:
        1.4rem
        0
        1.8rem;

    padding:
        .9rem
        1.1rem;

    border-radius:16px;

    background:#f4f7ff;

    display:flex;

    flex-wrap:wrap;

    gap:
        .6rem
        .9rem;

    align-items:center;
}

.share-label{

    font-size:.9rem;

    font-weight:700;

    color:#264067;
}

.share-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;
}

.share-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        .45rem
        .9rem;

    border-radius:999px;

    font-size:.78rem;

    font-weight:700;

    color:#fff;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

    white-space:nowrap;
}

.share-btn span{
    white-space:nowrap;
}

.share-facebook{
    background:#1877f2;
}

.share-linkedin{
    background:#0a66c2;
}

.share-whatsapp{
    background:#25d366;
}

.share-twitter{
    background:#000;
}

.share-btn:hover{

    transform:translateY(-1px);

    box-shadow:
        0 6px 14px rgba(0,0,0,.18);
}


/* =========================================================
   7. PREVIOUS / NEXT NAVIGATION
========================================================= */

.article-footer-nav{

    margin-top:70px;

    padding-top:15px;

    border-top:
        1px solid rgba(37,99,235,.12);

    display:grid;

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

    gap:24px;
}


/* =========================================================
   NAV CARD
========================================================= */

.article-nav{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-width:0;

    padding:
        12px
        14px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fbff
        );

    border:
        1px solid rgba(37,99,235,.15);

    border-radius:18px;

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

    box-shadow:
        0 8px 24px rgba(0,0,0,.05);
}

.article-nav::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            rgba(37,99,235,.08),
            rgba(96,165,250,.18)
        );

    opacity:0;

    transition:
        opacity .4s ease;

    pointer-events:none;
}

.article-nav::after{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #4f8dfd,
            #7ab6ff
        );

    pointer-events:none;
}

.article-nav:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:
        0 18px 45px rgba(37,99,235,.18);

    background:#fff;
}

.article-nav:hover::before{

    opacity:1;
}


/* =========================================================
   NAV ICON
========================================================= */

.nav-icon{

    position:relative;

    z-index:2;

    flex-shrink:0;

    width:38px;
    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f8dfd
        );

    color:#fff;

    font-size:1.25rem;

    transition:
        transform .35s ease;

    box-shadow:
        0 10px 25px rgba(37,99,235,.30);
}

.article-nav:hover .nav-icon{

    transform:
        rotate(-8deg)
        scale(1.08);
}


/* =========================================================
   NAV CONTENT
========================================================= */

.nav-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    flex:1;

    min-width:0;
}

.nav-content small{

    color:#64748b;

    font-size:.82rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:8px;
}

.nav-content strong{

    color:#0f172a;

    font-size:1rem;

    line-height:1.55;

    font-weight:700;

    transition:
        color .3s ease;
}

.article-nav:hover strong{

    color:#2563eb;
}

.prev{
    text-align:left;
}

.next{
    text-align:right;
}

.article-nav:active{

    transform:scale(.98);
}

.article-nav:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.25);
}


/* =========================================================
   8. SIDEBAR
========================================================= */

.article-sidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

    padding:10px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );

    border:
        1px solid rgba(37,99,235,.12);

    box-shadow:
        0 20px 45px rgba(37,99,235,.08),
        0 10px 25px rgba(15,23,42,.05);

    position:sticky;

    top:120px;

    min-width:0;
}


/* =========================================================
   SIDEBAR SECTION
========================================================= */

.article-sidebar-section{

    background:#fff;

    padding:10px;

    border-radius:18px;

    border-left:
        5px solid #2563eb;

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.article-sidebar-section:hover{

    transform:translateY(-6px);

    box-shadow:
        0 18px 35px rgba(37,99,235,.12);
}


/* =========================================================
   SIDEBAR HEADING
========================================================= */

.article-sidebar-section h3{

    margin:
        0
        0
        15px;

    font-size:1.18rem;

    font-weight:700;

    color:#0f172a;

    position:relative;

    padding-bottom:10px;
}

.article-sidebar-section h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    border-radius:50px;
}

.article-sidebar-section:nth-child(1) h3::before{
    content:"👤 ";
}

.article-sidebar-section:nth-child(2) h3::before{
    content:"📚 ";
}

.article-sidebar-section:nth-child(3) h3::before{
    content:"🤝 ";
}


/* =========================================================
   SIDEBAR TEXT
========================================================= */

.article-sidebar p{

    margin:0;

    color:#52637c;

    line-height:1.9;

    font-size:.96rem;
}


/* =========================================================
   SIDEBAR LIST
========================================================= */

.article-sidebar ul{

    list-style:none;

    padding:0;

    margin:0;
}

.article-sidebar li{

    margin:14px 0;

    padding-left:28px;

    position:relative;

    line-height:1.6;

    color:#52637c;
}

.article-sidebar li::before{

    content:"➜";

    position:absolute;

    left:0;

    top:1px;

    color:#2563eb;

    font-size:16px;

    font-weight:bold;

    transition:
        transform .3s ease,
        color .3s ease;
}

.article-sidebar li:hover::before{

    transform:translateX(5px);

    color:#1d4ed8;
}

.article-sidebar li a{

    display:inline-block;

    color:#1e40af;

    font-weight:600;

    transition:
        color .3s ease,
        transform .3s ease;
}

.article-sidebar li a:hover{

    color:#2563eb;

    transform:translateX(5px);
}


/* =========================================================
   9. FOOTER
========================================================= */

.site-footer{

    background:#102033;

    color:#d8e2f1;

    margin-top:3rem;
}

.footer-grid{

    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap:2rem;

    padding:3rem 0;
}

.footer-col{
    min-width:0;
}

.footer-col h3{

    margin:
        0
        0
        1rem;

    font-size:1.1rem;

    color:#fff;
}

.footer-brand{

    display:flex;

    align-items:center;

    gap:.8rem;

    margin-bottom:1rem;

    font-weight:800;

    color:#fff;
}

.footer-logo{

    width:44px;
    height:44px;

    border-radius:14px;

    object-fit:contain;

    background:#fff;

    padding:4px;
}

.footer-text{

    margin:
        0
        0
        1rem;

    color:#b8c6d8;

    line-height:1.7;
}

.footer-contact,
.footer-links{

    list-style:none;

    padding:0;

    margin:0;
}

.footer-contact li{

    margin:.55rem 0;

    color:#c8d4e3;

    line-height:1.6;
}

.footer-links li{

    margin:.6rem 0;
}

.footer-links a{

    color:#d8e2f1;

    transition:
        color .2s ease;
}

.footer-links a:hover{
    color:#7db4ff;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icons{

    display:flex;

    flex-wrap:wrap;

    gap:.8rem;

    margin-top:.4rem;
}

.social-icon{

    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.08);

    color:#fff;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}

.social-icon:hover{

    background:#eaf1ff;

    color:#1746a2;

    transform:translateY(-2px);
}

.social-icon svg{

    width:20px;
    height:20px;

    fill:currentColor;
}

.footer-bottom{

    border-top:
        1px solid rgba(255,255,255,.08);

    text-align:center;

    padding:1rem;

    color:#a9b7c7;
}


/* =========================================================
   10. POPUP
========================================================= */

.popup-overlay{

    position:fixed;

    inset:0;

    background:
        rgba(16,32,51,.62);

    backdrop-filter:blur(6px);

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

    z-index:999;
}

.popup-modal{

    position:fixed;

    top:50%;
    left:50%;

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

    width:min(92%,640px);

    max-height:90vh;

    overflow:auto;

    background:#fff;

    border-radius:28px;

    padding:1.5rem;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28);

    z-index:1000;

    border:
        1px solid rgba(16,32,51,.08);
}

.popup-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:1rem;

    margin-bottom:1rem;
}

.popup-badge{

    display:inline-block;

    padding:
        .35rem
        .7rem;

    border-radius:999px;

    background:#edf4ff;

    color:#1746a2;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:.7rem;
}

.popup-header h2{

    margin:
        0
        0
        .4rem;

    font-size:1.7rem;
}

.popup-header p{

    margin:0;

    color:#60738d;
}

.popup-close{

    width:42px;
    height:42px;

    border:0;

    border-radius:12px;

    background:#f1f5fb;

    color:#102033;

    font-size:1.8rem;

    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.popup-close:hover{

    background:#e5edfb;

    transform:rotate(90deg);
}

.popup-form{
    margin-top:1rem;
}

.form-grid{

    display:grid;

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

    gap:1rem;
}

.field-full{
    grid-column:1 / -1;
}

.field{

    display:flex;

    flex-direction:column;

    gap:.45rem;
}

.field label{

    font-weight:700;

    color:#102033;

    font-size:.9rem;
}

.field input,
.field textarea{

    width:100%;

    padding:
        1rem
        1.05rem;

    border-radius:14px;

    border:
        1px solid #cbd7ea;

    font:inherit;

    background:#fff;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.field textarea{

    min-height:120px;

    resize:vertical;
}

.field input:focus,
.field textarea:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.12);
}

.popup-submit{

    margin-top:1.2rem;

    width:100%;
}


/* =========================================================
   11. GO TOP BUTTON
========================================================= */

.go-top-btn{

    position:fixed;

    right:1.4rem;

    bottom:1.4rem;

    width:32px;
    height:32px;

    border-radius:50%;

    border:0;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color:#fff;

    font-size:1.2rem;

    font-weight:700;

    box-shadow:
        0 12px 30px rgba(37,99,235,.35);

    cursor:pointer;

    display:none;

    align-items:center;

    justify-content:center;

    z-index:800;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.go-top-btn.show{

    display:flex;

    opacity:1;
}

.go-top-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 40px rgba(37,99,235,.45);
}


/* =========================================================
   12. IMAGE MODAL
========================================================= */

.image-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:
        rgba(0,0,0,.90);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:99999;
}

.image-modal.show{

    opacity:1;

    visibility:visible;
}

.modal-image{

    max-width:95%;

    max-height:92vh;

    width:auto;

    height:auto;

    display:block;

    border-radius:10px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.5);

    animation:
        zoomImage .35s ease;

    object-fit:contain;
}

@keyframes zoomImage{

    from{

        transform:scale(.6);

        opacity:0;
    }

    to{

        transform:scale(1);

        opacity:1;
    }
}

.close-image{

    position:absolute;

    top:18px;

    right:28px;

    font-size:48px;

    line-height:1;

    color:#fff;

    cursor:pointer;

    transition:
        color .25s ease,
        transform .25s ease;

    user-select:none;

    z-index:2;
}

.close-image:hover{

    color:#5b8cff;

    transform:rotate(90deg);
}


/* =========================================================
   13. LARGE TABLET
   1024px
========================================================= */

@media (max-width:1024px){

    .container{
        width:94%;
    }

    .header-inner{
        gap:.7rem;
    }

    .main-nav{

        margin-left:.6rem;

        gap:.25rem;
    }

    .nav-item{

        min-width:76px;

        padding:
            .55rem
            .65rem;

        font-size:.82rem;
    }

    .article-grid{

        grid-template-columns:
            minmax(0,1.5fr)
            minmax(270px,.9fr);
    }

    .footer-grid{

        grid-template-columns:
            1.5fr
            1fr
            1fr
            1fr;
    }
}


/* =========================================================
   14. TABLET / MOBILE NAVIGATION
   900px
========================================================= */

@media (max-width:900px){

    .header-inner{

        flex-wrap:wrap;

        min-height:auto;
    }

    .brand{
        margin-right:auto;
    }

    .header-contact{

        margin-left:auto;

        gap:.6rem;
    }

    .menu-toggle{

        display:inline-flex;
    }


    /* -----------------------------------------
       MOBILE NAV CONTAINER
    ----------------------------------------- */

    .main-nav{

        width:100%;

        display:none;

        flex-direction:row;

        flex-wrap:wrap;

        align-items:center;

        justify-content:flex-start;

        gap:8px;

        margin-left:0;

        padding:
            .85rem
            0
            .35rem;

        order:3;
    }

    .main-nav.show{

        display:flex;
    }


    /* -----------------------------------------
       IMPORTANT:
       Keep mobile menu items around 100px wide
    ----------------------------------------- */

    .nav-item{

        width:100px;

        min-width:100px;

        max-width:100px;

        height:40px;

        flex:0 0 100px;

        justify-content:center;

        padding:
            .5rem
            .55rem;

        font-size:.82rem;

        border-radius:8px;

        transform:skewX(-10deg);

        overflow:hidden;

        white-space:nowrap;
    }

    .nav-item span{

        transform:skewX(10deg);

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

        max-width:90px;
    }


    /* -----------------------------------------
       REMOVE DESKTOP DOUBLE LINES ON MOBILE
    ----------------------------------------- */

    .nav-item::before,
    .nav-item::after{

        display:none !important;

        content:none !important;
    }


    /* -----------------------------------------
       MOBILE HOVER
    ----------------------------------------- */

    .nav-item:hover,
    .nav-item.active{

        transform:
            skewX(-10deg)
            translateY(-1px);

        background:#dfeaff;

        color:#1746a2;
    }


    .article-grid{

        grid-template-columns:1fr;
    }

    .article-sidebar{

        position:static;

        margin-top:10px;
    }

    .footer-grid{

        grid-template-columns:
            1fr
            1fr;
    }

    .share-bar{

        flex-direction:column;

        align-items:flex-start;
    }
}


/* =========================================================
   15. TABLET
   768px
========================================================= */

@media (max-width:768px){

    /* -----------------------------------------
       COMPANY TITLE + TAGLINE
       REMAIN VISIBLE
    ----------------------------------------- */

    .site-header .brand{

        display:flex;

        align-items:center;

        gap:.55rem;

        min-width:0;

        flex:1;
    }

    .site-header .brand-text{

        display:flex !important;

        flex-direction:column;

        min-width:0;

        max-width:
            calc(100vw - 190px);
    }

    .site-header .brand-name{

        display:block !important;

        font-size:.88rem;

        line-height:1.15;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;
    }

    .site-header .brand-tagline{

        display:block !important;

        font-size:.68rem;

        line-height:1.2;

        margin-top:.15rem;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;
    }


    /* -----------------------------------------
       HIDE PHONE ON MOBILE
    ----------------------------------------- */

    .site-header .phone-link,
    .site-header .phone-number,
    .site-header .phone-icon-btn{

        display:none !important;
    }


    .header-inner{

        padding:
            .55rem
            0;

        gap:.6rem;
    }

    .brand-logo{

        width:42px;
        height:42px;

        border-radius:12px;
    }

    .header-contact{

        width:auto;

        margin-left:auto;

        display:flex;

        align-items:center;

        gap:.45rem;

        flex-shrink:0;
    }

    .apply-btn{

        padding:
            .63rem
            .82rem;

        font-size:.82rem;

        border-radius:10px;
    }

    .menu-toggle{

        width:40px;
        height:40px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero{

        padding:
            2.8rem
            0
            2rem;
    }

    .hero h1{

        font-size:
            clamp(
                2rem,
                7vw,
                2.8rem
            );
    }


    /* -----------------------------------------
       ARTICLE
    ----------------------------------------- */

    .article-layout{

        padding:
            2rem
            0
            3rem;
    }

    .article-main{

        padding:
            1.4rem
            1.35rem
            1.8rem;

        border-radius:20px;
    }

    .article-hero-image{

        max-height:none;

        border-radius:16px;
    }

    .article-hero-image img{

        height:auto;

        object-fit:contain;
    }


    /* -----------------------------------------
       PREVIOUS / NEXT
    ----------------------------------------- */

    .article-footer-nav{

        grid-template-columns:1fr;

        gap:16px;

        margin-top:45px;
    }

    .article-nav{

        padding:18px;

        gap:15px;
    }

    .next{

        text-align:left;
    }

    .nav-icon{

        width:34px;
        height:34px;

        font-size:1.05rem;
    }

    .nav-content strong{

        font-size:.94rem;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .article-sidebar{

        padding:20px;

        border-radius:20px;
    }

    .article-sidebar-section{

        padding:20px;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid{

        grid-template-columns:1fr;

        gap:1.6rem;

        padding:
            2.4rem
            0;
    }


    /* -----------------------------------------
       POPUP
    ----------------------------------------- */

    .popup-modal{

        width:
            min(
                94%,
                640px
            );

        padding:1.25rem;

        border-radius:22px;
    }


    /* -----------------------------------------
       IMAGE MODAL
    ----------------------------------------- */

    .image-modal{

        padding:20px;
    }

    .modal-image{

        max-width:96%;

        max-height:88vh;
    }

    .close-image{

        top:12px;

        right:18px;

        font-size:40px;
    }
}


/* =========================================================
   16. MOBILE
   640px
========================================================= */

@media (max-width:640px){

    /* -----------------------------------------
       BRAND
    ----------------------------------------- */

    .site-header .brand-text{

        display:flex !important;

        max-width:
            calc(100vw - 170px);
    }

    .site-header .brand-name{

        display:block !important;

        font-size:.78rem;
    }

    .site-header .brand-tagline{

        display:block !important;

        font-size:.61rem;
    }


    /* -----------------------------------------
       PHONE REMAINS HIDDEN
    ----------------------------------------- */

    .site-header .phone-link,
    .site-header .phone-number,
    .site-header .phone-icon-btn{

        display:none !important;
    }


    .header-inner{

        min-height:58px;

        padding:
            .45rem
            0;

        gap:.45rem;
    }

    .brand{

        gap:.45rem;
    }

    .brand-logo{

        width:40px;
        height:40px;
    }

    .header-contact{

        gap:.4rem;
    }

    .apply-btn{

        padding:
            .58rem
            .72rem;

        font-size:.76rem;

        border-radius:9px;
    }

    .menu-toggle{

        width:37px;
        height:37px;

        font-size:1.1rem;
    }


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

    .main-nav{

        gap:7px;

        padding:
            .7rem
            0
            .3rem;
    }

    .nav-item{

        width:70px;

        min-width:70px;

        max-width:70px;

        flex:0 0 70px;

        height:25px;

        font-size:.68rem;

        border-radius:7px;
    }

    .nav-item span{

        max-width:88px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero{

        padding:
            2.2rem
            0
            1.8rem;
    }

    .eyebrow{

        font-size:.72rem;

        padding:
            .45rem
            .7rem;

        margin-bottom:.8rem;
    }

    .hero h1{

        font-size:
            clamp(
                1.8rem,
                8vw,
                2.35rem
            );

        line-height:1.1;
    }

    .hero p{

        font-size:.94rem;

        line-height:1.7;
    }

    .article-meta{

        flex-direction:column;

        gap:.35rem;

        font-size:.82rem;
    }


    /* -----------------------------------------
       ARTICLE
    ----------------------------------------- */

    .article-layout{

        padding:
            1.5rem
            0
            2.5rem;
    }

    .article-main{

        padding:
            1.05rem
            1rem
            1.4rem;

        border-radius:17px;
    }

    .article-hero-image{

        margin-bottom:1rem;

        border-radius:13px;
    }

    .article-main h2{

        margin:
            1.3rem
            0
            .65rem;

        font-size:1.15rem;
    }

    .article-main p{

        font-size:.93rem;

        line-height:1.75;
    }

    .article-quote{

        margin:
            1.3rem
            0;

        padding:
            .9rem
            1rem;

        font-size:.92rem;
    }


    /* -----------------------------------------
       SHARE
    ----------------------------------------- */

    .share-bar{

        margin:
            1.2rem
            0
            1.4rem;

        padding:.8rem;

        border-radius:13px;
    }

    .share-label{

        font-size:.82rem;
    }

    .share-buttons{

        width:100%;

        display:grid;

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

        gap:.45rem;
    }

    .share-btn{

        width:100%;

        padding:
            .5rem
            .55rem;

        font-size:.72rem;
    }


    /* -----------------------------------------
       PREVIOUS / NEXT
    ----------------------------------------- */

    .article-footer-nav{

        margin-top:35px;

        gap:12px;
    }

    .article-nav{

        padding:15px;

        border-radius:15px;
    }

    .nav-icon{

        width:32px;
        height:32px;

        font-size:1rem;
    }

    .nav-content small{

        font-size:.7rem;

        margin-bottom:5px;
    }

    .nav-content strong{

        font-size:.88rem;

        line-height:1.45;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .article-sidebar{

        padding:14px;

        gap:16px;

        border-radius:17px;
    }

    .article-sidebar-section{

        padding:16px;

        border-radius:14px;

        border-left-width:4px;
    }

    .article-sidebar-section h3{

        font-size:1rem;

        margin-bottom:12px;
    }

    .article-sidebar p{

        font-size:.88rem;

        line-height:1.75;
    }

    .article-sidebar li{

        margin:11px 0;

        padding-left:24px;

        font-size:.88rem;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer-grid{

        padding:
            2rem
            0;

        gap:1.4rem;
    }

    .footer-text{

        font-size:.9rem;
    }

    .footer-bottom{

        font-size:.78rem;

        padding:
            .9rem
            .7rem;
    }

    .social-icons{

        gap:.55rem;
    }

    .social-icon{

        width:38px;
        height:38px;
    }

    .social-icon svg{

        width:18px;
        height:18px;
    }


    /* -----------------------------------------
       POPUP
    ----------------------------------------- */

    .popup-modal{

        width:94%;

        max-height:92vh;

        padding:1rem;

        border-radius:18px;
    }

    .popup-header{

        gap:.6rem;
    }

    .popup-header h2{

        font-size:1.35rem;
    }

    .popup-header p{

        font-size:.85rem;
    }

    .popup-close{

        width:36px;
        height:36px;

        font-size:1.5rem;
    }

    .form-grid{

        grid-template-columns:1fr;

        gap:.8rem;
    }

    .field-full{

        grid-column:auto;
    }

    .field input,
    .field textarea{

        padding:
            .8rem
            .85rem;

        border-radius:11px;

        font-size:.9rem;
    }


    /* -----------------------------------------
       GO TOP
    ----------------------------------------- */

    .go-top-btn{

        right:.9rem;

        bottom:.9rem;

        width:34px;
        height:34px;
    }


    /* -----------------------------------------
       IMAGE MODAL
    ----------------------------------------- */

    .image-modal{

        padding:15px;
    }

    .modal-image{

        max-width:98%;

        max-height:85vh;

        border-radius:7px;
    }

    .close-image{

        top:10px;

        right:13px;

        font-size:36px;
    }
}


/* =========================================================
   17. VERY SMALL MOBILE
   480px
========================================================= */

@media (max-width:480px){

    .container{
        width:94%;
    }


    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    .site-header .brand{

        gap:.4rem;
    }

    .site-header .brand-logo{

        width:38px;
        height:38px;
    }

    .site-header .brand-text{

        max-width:
            calc(100vw - 160px);
    }

    .site-header .brand-name{

        font-size:.70rem;
    }

    .site-header .brand-tagline{

        font-size:.55rem;
    }

    .site-header .apply-btn{

        padding:
            .54rem
            .63rem;

        font-size:.71rem;
    }

    .site-header .menu-toggle{

        width:35px;
        height:35px;
    }


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

    .main-nav{

        gap:6px;
    }

    .nav-item{

        width:80px;

        min-width:80px;

        max-width:80px;

        flex-basis:80px;

        height:26px;

        font-size:.75rem;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero h1{

        font-size:
            clamp(
                1.65rem,
                9vw,
                2.05rem
            );
    }


    /* -----------------------------------------
       ARTICLE
    ----------------------------------------- */

    .article-main{

        padding:
            .9rem
            .85rem
            1.2rem;
    }


    /* -----------------------------------------
       SHARE
    ----------------------------------------- */

    .share-buttons{

        grid-template-columns:1fr;
    }

    .share-btn{

        justify-content:flex-start;

        padding:
            .55rem
            .75rem;
    }


    /* -----------------------------------------
       NAVIGATION
    ----------------------------------------- */

    .article-nav{

        gap:12px;

        padding:14px;
    }

    .nav-icon{

        width:30px;
        height:30px;

        font-size:.9rem;
    }

    .nav-content strong{

        font-size:.83rem;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .article-sidebar{

        padding:10px;
    }

    .article-sidebar-section{

        padding:14px;
    }


    /* -----------------------------------------
       POPUP
    ----------------------------------------- */

    .popup-modal{

        width:96%;

        padding:.9rem;

        border-radius:16px;
    }

    .popup-header h2{

        font-size:1.2rem;
    }

    .popup-badge{

        font-size:.7rem;
    }
}


/* =========================================================
   18. EXTRA SMALL MOBILE
   360px
========================================================= */

@media (max-width:360px){

    .site-header .brand-logo{

        width:35px;
        height:35px;
    }

    .site-header .brand{

        gap:.3rem;
    }

    .site-header .brand-text{

        max-width:
            calc(100vw - 145px);
    }

    .site-header .brand-name{

        font-size:.64rem;
    }

    .site-header .brand-tagline{

        font-size:.50rem;
    }

    .site-header .apply-btn{

        padding:
            .50rem
            .54rem;

        font-size:.66rem;
    }

    .site-header .menu-toggle{

        width:33px;
        height:33px;
    }


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

    .main-nav{

        gap:5px;
    }

    .nav-item{

        width:80px;

        min-width:80px;

        max-width:80px;

        flex-basis:80px;

        height:25px;

        font-size:.72rem;
    }

    .nav-item span{

        max-width:88px;
    }


    .hero{

        padding-top:1.8rem;
    }

    .hero h1{

        font-size:1.55rem;
    }

    .hero p{

        font-size:.88rem;
    }

    .article-main p{

        font-size:.88rem;
    }

    .nav-content strong{

        font-size:.8rem;
    }
}


/* =========================================================
   19. REDUCED MOTION
========================================================= */

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;
    }
}


/* =========================================================
   20. FINAL MOBILE NAV SAFETY OVERRIDE
   Prevents desktop decorative lines from appearing
   in mobile menu.
========================================================= */

@media (max-width:900px){

    .main-nav .nav-item::before,
    .main-nav .nav-item::after{

        content:none !important;

        display:none !important;

        width:0 !important;

        height:0 !important;

        transform:none !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;
    }

    .main-nav .nav-item{

        overflow:hidden;

        position:relative;
    }

    .main-nav .nav-item span{

        position:relative;

        z-index:2;
    }
}


/* =========================================================
   21. FINAL MOBILE BRAND SAFETY OVERRIDE
========================================================= */

@media (max-width:768px){

    .site-header .brand-text{
        display:flex !important;
    }

    .site-header .brand-name{
        display:block !important;
    }

    .site-header .brand-tagline{
        display:block !important;
    }

    .site-header .phone-link{
        display:none !important;
    }

    .site-header .phone-number{
        display:none !important;
    }

    .site-header .phone-icon-btn{
        display:none !important;
    }
}