/* ======================================
   SYDON CAPITAL MOBILE OPTIMIZATION
====================================== */

@media(max-width:768px) {

    /* GLOBAL */

    html,
    body {
        width:100%;
        min-height:100%;
        overflow-x:hidden;
        overflow-y:auto;
    }

    body {
        background:
            linear-gradient(
                180deg,
                #081B26,
                #0B2433,
                #081B26
            );
    }


    /* REMOVE DESKTOP ABSOLUTE LAYOUT */

    .hero,
    .page,
    .research-page,
    .careers,
    .contact-page {
        position:relative;
        inset:auto;
        min-height:100vh;
        height:auto;
        overflow:visible;
    }


    /* HEADER */

    header {
        position:fixed;
        height:70px;
        background:rgba(8,27,38,.85);
        backdrop-filter:blur(15px);
    }

    .corner-logo {
        top:20px;
        left:20px;
    }

    .corner-logo img {
        height:30px;
    }


    /* NAV */

    nav {
        top:20px;
        right:20px;
    }

    .nav-inner {
        display:none;
        position:fixed;
        top:70px;
        right:15px;
        width:220px;
        padding:20px;
        flex-direction:column;
        gap:15px;
        background:#081B26;
        border:1px solid rgba(63,186,235,.35);
        border-radius:16px;
    }

    .nav-inner.active {
        display:flex;
    }

    .nav-inner a {
        font-size:.9rem;
        padding:10px;
    }


    /* MENU BUTTON */

    .menu-btn {
        display:block;
        position:fixed;
        top:18px;
        right:20px;
        width:35px;
        height:35px;
        z-index:999;
    }


    /* HERO */

    .hero {
        display:flex;
        padding:110px 20px 80px;
    }

    .hero-content {
        padding:0;
    }

    .logo {
        height:80px;
    }

    .statement {
        font-size:1rem;
        line-height:1.7;
    }

    .subtext {
        font-size:.85rem;
    }


    /* PAGE */

    .page {
        padding:100px 20px 80px;
    }

    .page-content {
        text-align:left;
    }

    .page-content h1 {
        font-size:2rem;
    }

    .page-content p,
    .page-content li {
        font-size:.9rem;
    }


    /* ABOUT */

    .about-box {
        padding:25px;
    }

    .about-box li {
        padding-left:0;
    }


    /* RESEARCH */

    .research-page {
        padding:100px 20px;
    }

    .research-header {
        text-align:left;
    }

    .research-header h1 {
        font-size:2rem;
    }

    .research-grid {
        grid-template-columns:1fr;
    }

    .research-card {
        min-height:auto;
        padding:25px;
    }


    /* CAREERS */

    .careers {
        padding:100px 20px;
    }

    .careers-intro h1 {
        font-size:2.2rem;
    }

    .role {
        grid-template-columns:1fr;
        gap:15px;
        padding:30px 0;
    }

    .role:hover {
        padding-left:0;
    }

    .role a {
        text-align:left;
    }


    /* CAREER DETAIL */

    .career-newpage {
        padding:100px 20px;
    }

    .career-newhero h1 {
        font-size:3.5rem;
        letter-spacing:-2px;
    }

    .career-newcard {
        grid-template-columns:1fr;
        gap:20px;
        padding:35px 0;
    }


    /* FORMS */

    .contact-page {
        padding:100px 20px;
    }

    .contact-form,
    .career-form {
        width:100%;
    }

    .input-grid,
    .career-form-row {
        grid-template-columns:1fr;
    }

    .field input,
    .field textarea,
    .verify input,
    .career-form input,
    .career-form textarea {
        font-size:16px;
    }

    .verify {
        padding:20px;
    }

    .verify-row {
        flex-direction:column;
        align-items:stretch;
    }

    .submit-btn,
    .career-form button {
        width:100%;
    }


    /* QUADLEAF */

    .quadleaf-logo {
        width:100px;
    }

    .leaf-card,
    .vision-box {
        padding:20px;
    }


    /* FOOTER */

    footer {
        position:relative;
        bottom:auto;
        margin-top:50px;
        padding:20px;
        font-size:.7rem;
    }


    /* WAVES */

    .waves {
        opacity:.06;
    }
}


/* SMALL PHONES */

@media(max-width:420px) {

    .statement {
        font-size:.9rem;
    }

    .logo {
        height:70px;
    }

    .career-newhero h1 {
        font-size:2.8rem;
    }

    .page-content h1 {
        font-size:1.7rem;
    }
}


/* =====================================
   CAREER DETAIL PAGE MOBILE
===================================== */

@media(max-width:768px) {

    .career-newpage {
        position:relative;
        min-height:100vh;
        padding:100px 20px 60px;
        overflow:visible;
    }

    .career-newhero {
        margin-bottom:60px;
    }

    .career-newhero h1 {
        font-size:3rem;
        line-height:.95;
        letter-spacing:-2px;
    }

    .career-newhero p {
        font-size:.95rem;
        line-height:1.7;
        margin-top:25px;
    }

    .career-newgrid {
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .career-newcard {
        display:block;
        padding:35px 0;
        border-top:1px solid rgba(100,210,255,.15);
    }

    .career-newcard h2 {
        font-size:1.3rem;
        margin-bottom:18px;
    }

    .career-newcard p,
    .career-newcard li {
        font-size:.9rem;
        line-height:1.8;
    }

    .career-newapply {
        margin-top:50px;
        padding-top:35px;
    }

    .career-newapply a {
        font-size:1.4rem;
    }

    .career-footer {
        position:relative;
        padding:30px 20px;
        text-align:center;
        font-size:.7rem;
    }
}


/* =====================================
   APPLY PAGE MOBILE
===================================== */

@media(max-width:768px) {

    .career-application {
        margin-top:40px;
        padding-top:30px;
    }

    .career-application h2 {
        font-size:1.5rem;
    }

    .career-application p {
        font-size:.9rem;
    }

    .career-form {
        width:100%;
    }

    .career-form-row {
        display:block;
    }

    .career-form label {
        font-size:.85rem;
    }

    .career-form input,
    .career-form textarea {
        width:100%;
        font-size:16px;
        padding:15px;
    }

    .career-form textarea {
        min-height:150px;
    }

    .career-file input {
        height:auto;
    }

    .career-form button {
        width:100%;
        padding:16px;
        border-radius:30px;
    }

    .career-newpage + footer {
        margin-top:30px;
    }
}


@media(max-width:420px) {

    .career-newhero h1 {
        font-size:2.5rem;
    }

    .career-newhero p {
        font-size:.85rem;
    }

    .career-newcard h2 {
        font-size:1.15rem;
    }
}


/* ===========================
   MOBILE HAMBURGER MENU
=========================== */

.menu-btn {
    display:none;
    position:fixed;
    top:18px;
    right:20px;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(100,210,255,.35);
    background:rgba(8,27,38,.85);
    color:white;
    font-size:22px;
    cursor:pointer;
    z-index:99999;
}


@media(max-width:768px) {

    .menu-btn {
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav-inner {
        display:none;
        position:fixed;
        top:75px;
        right:20px;
        width:220px;
        padding:20px;
        flex-direction:column;
        gap:12px;
        background:rgba(8,27,38,.95);
        border:1px solid rgba(63,186,235,.35);
        border-radius:18px;
        backdrop-filter:blur(20px);
        z-index:99998;
    }

    .nav-inner.active {
        display:flex;
    }

    .nav-inner a {
        color:white;
        padding:12px;
        border-radius:10px;
    }

    .nav-inner a:hover {
        background:rgba(63,186,235,.15);
    }

    .menu-btn.open {
        transform:rotate(90deg);
    }
}


.menu-btn {
    display:none;
    position:fixed;
    top:18px;
    right:20px;
    width:42px;
    height:42px;
    background:#081B26;
    border:1px solid rgba(63,186,235,.4);
    border-radius:12px;
    color:white;
    font-size:22px;
    z-index:999999;
}


@media(max-width:768px) {

    .menu-btn {
        display:flex;
        align-items:center;
        justify-content:center;
    }

    nav {
        position:static;
    }

    .nav-inner {
        display:none !important;
        position:fixed;
        top:75px;
        right:20px;
        width:220px;
        flex-direction:column;
        gap:5px;
        padding:20px;
        background:#081B26;
        border:1px solid rgba(63,186,235,.35);
        border-radius:16px;
        z-index:999998;
    }

    .nav-inner.active {
        display:flex !important;
    }

    .nav-inner a {
        display:block;
        width:100%;
        padding:14px;
        color:white;
    }
}