:root{
    --ink:#101312;
    --paper:#faf8f4;
    --paper-2:#f2eee6;
    --brass:#b08d4f;
    --brass-bright:#c2a368;
    --muted:#8b867d;
    --line-dark:rgba(194,163,104,.26);
    --line-light:rgba(16,19,18,.16);
    --soft-black:#171918;
    --white:#f6f2e9;
}

*{
    box-sizing:border-box;margin:0;padding:0
}

html {
    scroll-behavior:smooth;background:var(--ink)
}
body {
    font-family:'Archivo',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision
}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .serif{font-family:'Fraunces',serif}
  .page{overflow:hidden}

  /* NAV */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    height:78px;display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(24px,5vw,72px);color:var(--white);
    background:linear-gradient(to bottom,rgba(16,19,18,.72),rgba(16,19,18,.08));
    backdrop-filter:blur(2px);
  }
  .brand{display:flex;align-items:center;line-height:0}
  .vs-logo-svg{display:block;height:auto}
  .nav-logo-svg{width:235px}
  .footer-logo-svg{width:187px}
  .nav-links{display:flex;gap:42px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
  .nav-links a{opacity:.9}
  .nav-links a:hover{color:var(--brass-bright)}

/* Hamburger Button */
.menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-btn span {
    width: 26px;
    height: 3px;
    background: #222;
    border-radius: 5px;
}

/* Close Button */
.close-btn {
    display: none;
}

/* Mobile */
@media (max-width:768px) {

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        position: relative;
    }

    .menu-btn {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 80px 30px;
        gap: 25px;
        transition: right .35s ease;
        box-shadow: -5px 0 15px rgba(0,0,0,.1);
        z-index: 1000;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 20px;
        opacity: 1;
        color: #b08d4f;
    }

    .close-btn {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 38px;
        border: none;
        background: none;
        cursor: pointer;
        line-height: 1;
    }

    body.menu-open {
        overflow: hidden;
    }
}


/* ==========================
    footer css start here 
    ========================== */

footer{background:var(--ink);border-top:1px solid var(--line-dark);color:rgba(250,248,244,.55);padding:34px clamp(24px,6vw,96px) 28px}
.footer-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;width:100%}
.footer-brand{display:flex;align-items:center;line-height:0}
.footer-center{grid-column:2;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.footer-nav{display:flex;justify-content:center;align-items:center;gap:34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.footer-nav a{color:rgba(250,248,244,.78)}.footer-nav a:hover{color:var(--brass-bright)}
.footer-bottom{text-align:center;font-size:12px;letter-spacing:.03em;color:rgba(250,248,244,.55)}
.footer-spacer{width:187px}

/* ==========================
   Tablet
   ========================== */
   @media (max-width: 1024px) {

    footer {
        padding: 32px 32px 24px;
    }

    .footer-top {
        gap: 24px;
    }

    .footer-nav {
        gap: 22px;
        flex-wrap: wrap;
        text-align: center;
    }

    .footer-spacer {
        width: 140px;
    }

}


/* ==========================
   Mobile
   ========================== */
@media (max-width: 768px) {

    .navbar {
        position: fixed;
    }

    .page-header, .hero {
        margin-top: 78px;
    }

    footer {
        padding: 32px 20px 24px;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        text-align: center;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-center {
        width: 100%;
        gap: 20px;
    }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px 24px;
        line-height: 1.8;
    }

    .footer-bottom {
        line-height: 1.6;
        padding: 0 12px;
    }

    .footer-spacer {
        display: none;
    }

}


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

    .footer-nav {
        flex-direction: column;
        gap: 16px;
        letter-spacing: .12em;
    }

    .footer-bottom {
        font-size: 11px;
    }

    .footer-logo-svg
    {
        width: 230px;
        margin-left: 20%;
    }
}

/* ==========================
    footer css ends here 
    ========================== */