/* ======================================================
   GLOBAL RESET
====================================================== */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter', sans-serif;
  background:#0d0d0d;
  color:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}


/* ======================================================
   NAVBAR
====================================================== */

.navbar{
  position:fixed;
  top:0;
  width:100%;
  height:130px;                    
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:0 8%;
  z-index:2000;
  transition:all .4s ease;
}

/* Background when scrolled */
.navbar.scrolled{
  background:rgba(0,0,0,.50);
  height:90px;
}

.navbar.scrolled::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:-1;
}

.nav-links a{
  position:relative;
  text-decoration:none;
  color:#fff;
  font-size:13px;
  letter-spacing:1px;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:1px;
  background:#fff;
  transition:.3s;
}

.nav-links a:hover::after{
  width:100%;
}

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

.logo{
  justify-self:start;
  position:static;
  transform:none;
}

.logo-link{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
}

.logo img{
  height:120px;
  width:auto;
  display:block;
  transition:all .4s ease;
}

.navbar.scrolled .logo img{
  height:75px;
}

.logo img:hover{
  transform:scale(1.03);
}

.logo-text{
  font-family:'Inter', sans-serif;   
  font-size:16px;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff;
  transition:all .4s ease;
}


.navbar.scrolled .logo-text{
  font-size:16px;
}

/* ================= CENTER NAV ================= */

.nav-center{
  display:flex;
  gap:32px;
  justify-content:center;
}

.nav-center a{
  text-decoration:none;
  color:#fff;
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  opacity:.85;
  transition:opacity .3s ease;
}

.nav-center a:hover{
  opacity:1;
}

/* ================= RIGHT BUTTON ================= */

.nav-right{
  justify-self:end;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  padding:10px 24px;
  border-radius:50px;
  border:1px solid #fff;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:1px;
  transition:all .3s ease;
}

.nav-btn:hover{
  background:#fff;
  color:#000;
}

/* NAV BUTTON */

.nav-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 26px;
  border-radius:50px;
  border:1px solid #fff;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  transition:all .3s ease;
}

.nav-btn:hover{
  background:#fff;
  color:#000;
}

/* NAV ARROW SUPPORT */

.nav-arrow{
  font-size:14px;
  opacity:.7;
  transition:.3s ease;
}

.nav-btn:hover .nav-arrow{
  transform:translateY(3px);
  opacity:1;
}

/* ======================================================
   MOBILE MENU BUTTON
====================================================== */

.mobile-menu-toggle{

    display:none;
    margin-left: auto;
    position:relative;

    width:48px;
    height:48px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:50%;

    background:transparent;

    cursor:pointer;

    z-index:1300;

    transition:.35s ease;

}

.mobile-menu-toggle span{

    position:absolute;

    left:50%;
    top:50%;

    width:20px;
    height:2px;
  
    background:#fff;

    border-radius:999px;

    transition:.35s ease;

}

.mobile-menu-toggle span:first-child{

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

}

.mobile-menu-toggle span:last-child{

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

}

.mobile-menu-toggle.active span:first-child{

    transform:
        translate(-50%,0)
        rotate(45deg);

}

.mobile-menu-toggle.active span:last-child{

    transform:
        translate(-50%,0)
        rotate(-45deg);

}

/* ======================================================
   FULLSCREEN MOBILE MENU
====================================================== */

.mobile-menu{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    background:rgba(15,15,17,.98);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .45s cubic-bezier(.22,.61,.36,1),
        visibility .45s;

    z-index:1900;
}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* ======================================================
   MOBILE MENU INNER
====================================================== */

.mobile-menu-inner{

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        130px
        clamp(24px,8vw,70px)
        55px;
}


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

.mobile-menu-links{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:100%;

    max-width:760px;
}

.mobile-menu-links a{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:20px;

    width:100%;

    padding:10px 0;

    font-family:'Playfair Display',serif;

    font-size:clamp(42px,7vw,72px);

    font-weight:500;

    line-height:1;

    letter-spacing:-2px;

    color:#fff;

    text-decoration:none;

    opacity:0;

    transform:translateY(30px);

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

.mobile-menu-links a span{

    margin-top:8px;

    min-width:24px;

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

    font-size:10px;

    font-weight:500;

    letter-spacing:1px;

    color:rgba(255,255,255,.3);
}

.mobile-menu-links a:hover{

    color:rgba(255,255,255,.55);
}


/* ======================================================
   LINK REVEAL
====================================================== */

.mobile-menu.active .mobile-menu-links a{

    opacity:1;

    transform:translateY(0);
}

.mobile-menu.active .mobile-menu-links a:nth-child(1){
    transition-delay:.08s;
}

.mobile-menu.active .mobile-menu-links a:nth-child(2){
    transition-delay:.12s;
}

.mobile-menu.active .mobile-menu-links a:nth-child(3){
    transition-delay:.16s;
}

.mobile-menu.active .mobile-menu-links a:nth-child(4){
    transition-delay:.20s;
}

.mobile-menu.active .mobile-menu-links a:nth-child(5){
    transition-delay:.24s;
}

.mobile-menu.active .mobile-menu-links a:nth-child(6){
    transition-delay:.28s;
}


/* ======================================================
   MOBILE MENU BOTTOM
====================================================== */

.mobile-menu-bottom{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    width:100%;

    margin-top:auto;

    padding-top:30px;

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

    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .5s ease .32s,
        transform .5s ease .32s;
}

.mobile-menu.active .mobile-menu-bottom{

    opacity:1;

    transform:translateY(0);
}

.mobile-menu-bottom p{

    margin:0;

    font-size:13px;

    color:rgba(255,255,255,.4);
}

.mobile-menu-cta{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:14px;

    text-decoration:none;
}

.mobile-menu-cta span{

    transition:transform .3s ease;
}

.mobile-menu-cta:hover span{

    transform:
        translate(3px,-3px);
}


/* ======================================================
   TABLET + MOBILE NAVBAR
====================================================== */

@media(max-width:1024px){

    .navbar{

        display:flex;

        align-items:center;

        justify-content:space-between;

        height:96px;

        padding:0 28px;

    }

    .navbar.scrolled{

        height:78px;
    }


    /* Hide desktop navigation */

    .nav-center,
    .nav-right{

        display:none;
    }


    /* Show hamburger */

    .mobile-menu-toggle{

        display:flex;

        justify-content:center;

        align-items:center;

        margin-left:auto;

        width:48px;

        height:48px;

    }


    /* Logo */
    
    .logo{

        position:absolute;

        left:50%;

        top:50%;

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

        z-index:2100;

    }


    .logo img{

        height:96px;

        width:auto;

    }

    .navbar.scrolled .logo img{

        height:88px;
    }

    .logo-link{

        gap:10px;
    }

    .logo-text{

      display: none;
    }

}


/* ======================================================
   IPAD LANDSCAPE + MACBOOK — DESKTOP NAVBAR
====================================================== */

@media (min-width:1300px) and (max-width:1500px){

    .navbar{
        height:110px;
        padding:0 4%;
    }

    .logo img{
        height:90px;
    }

    .navbar.scrolled .logo img{
        height:70px;
    }

    .logo-text{
        font-size:13px;
        letter-spacing:2px;
        white-space:nowrap;
    }

    .nav-center{
        gap:22px;
    }

    .nav-center a{
        font-size:12px;
        letter-spacing:.5px;
    }

    .nav-btn{
        padding:9px 20px;
        font-size:12px;
    }

}


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

@media(max-width:600px){

    .navbar{

        height:88px;

        padding:0 20px;

    }


    .navbar.scrolled{

        height:72px;
    }

    .logo img{

        height:86px; 

    }

    .navbar.scrolled .logo img{

        height:76px;

    }

    .logo-text{

        font-size:11px;

        letter-spacing:1.6px;
    }

    .mobile-menu-toggle{

        width:42px;
        height:42px;
    }

    .mobile-menu-inner{

        padding:
            110px
            24px
            35px;
    }

    .mobile-menu-links a{

        gap:14px;

        padding:8px 0;

        font-size:clamp(38px,12vw,54px);

        letter-spacing:-1.5px;
    }

    .mobile-menu-links a span{

        margin-top:5px;

        font-size:9px;
    }

    .mobile-menu-bottom{

        align-items:flex-start;

        flex-direction:column;

        gap:15px;
    }

}


/* ======================================================
   SMALL PHONES
====================================================== */

@media(max-width:380px){

    .navbar{

        padding:0 18px;
    }

    .logo-text{

        display:none;
    }

    .mobile-menu-links a{

        font-size:37px;

        padding:7px 0;
    }

}


/* ======================================================
   SHORT SCREENS
====================================================== */

@media(max-height:700px) and (max-width:1024px){

    .mobile-menu-inner{

        justify-content:flex-start;

        overflow-y:auto;
    }

    .mobile-menu-links a{

        font-size:36px;

        padding:6px 0;
    }

    .mobile-menu-bottom{

        margin-top:40px;
    }

}

/* ================= HERO FADE ================= */

.hero-fade{
  opacity:0;
  transform:translateY(40px);
  animation:heroFade 1s cubic-bezier(.22,.61,.36,1) forwards;
}

.delay-1{ animation-delay:.2s; }
.delay-2{ animation-delay:.6s; }
.delay-3{ animation-delay:1s; }

@keyframes heroFade{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ================= ARROW  ================= */
.scroll-wrapper{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
}

.scroll-arrow{
  width:20px;
  height:20px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

.arrow-bounce{
  animation:bounce 2s infinite;
}

@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(10px); }
}


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

.nav-dropdown{
  position:relative;
}

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

.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
}

/* ARROW */

.dropdown-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  color:#fff;
  opacity:.55;
  transition:
    transform .35s ease,
    opacity .35s ease;
}

.dropdown-arrow svg{
  width:100%;
  height:100%;
}

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

.dropdown-menu{
  position:absolute;
  isolation:isolate;
  top:calc(100% + 34px);
  left:50%;
  transform:
    translateX(-50%)
    translateY(12px);

  width:calc(100vw - 16%);
  max-width:1400px;
  padding:50px 60px;
  border-radius:28px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.45);

  display:grid;
  grid-template-columns:
    1fr
    1fr
    1fr;
  gap:100px;
  opacity:0;
  visibility:hidden;
  transition:
    opacity .35s ease,
    transform .35s ease;
  z-index:9999;
}



/* OPEN */

.nav-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:
    translateX(-50%)
    translateY(0);
}

/* HOVER BRIDGE */

.nav-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:40px;
}

/* ARROW HOVER */

.nav-dropdown:hover .dropdown-arrow{
  transform:rotate(180deg);
  opacity:1;
}

/* ======================================================
   LEFT COLUMN
====================================================== */

.dropdown-left{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:8px;
}

/* ======================================================
   VIEW ALL SERVICES CARD
====================================================== */

.view-services{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:320px;
  height:220px;
  padding:34px;
  border-radius:26px;
  text-decoration:none;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.015)
    );

  border:1px solid rgba(255,255,255,0.06);
  transition:
    transform .7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color .5s ease,
    background .5s ease,
    box-shadow .7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* TITLE */

.view-services::before{
  content:"Explore Every Service";
  position:absolute;
  top:34px;
  left:34px;
  right:34px;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:500;
  font-size:42px;
  line-height:.95;
  color:#fff;
  transition:
    transform .4s ease,
    opacity .4s ease;
}

/* LABEL */

.view-services::after{
  content:"View All Services →";
  position:absolute;
  left:34px;
  bottom:34px;
  font-size:14px;
  letter-spacing:1px;
  opacity:.7;
  transition:
    transform .4s ease,
    opacity .4s ease;
}

/* HOVER */

.view-services:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.12);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.02)
    );
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 30px rgba(255,255,255,0.04);
}

.view-services:hover::before{
  transform:translateY(-2px);
}

.view-services:hover::after{
  transform:translateX(8px);
  opacity:1;
}

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

.dropdown-column{
  display:flex;
  flex-direction:column;
}

/* HEADERS */

.dropdown-column h4{
  margin-bottom:30px;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:500;
  font-size:36px;
}

/* NORMAL LINKS */

.dropdown-column > a:not(.service-card){
  padding:12px 0;
  text-decoration:none;
  font-size:16px;
  opacity:.65;
  transition:.3s ease;
}

.dropdown-column > a:not(.service-card):hover{
  opacity:1;
  transform:translateX(5px);
}

/* ======================================================
   SERVICE CARDS
====================================================== */

.service-card{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  width:fit-content;
  min-width:330px;
  min-height:72px;
  padding:0 24px 0 20px;
  border-radius:16px;
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  transition:
    transform .7s cubic-bezier(0.16, 1, 0.3, 1),
    background .5s ease,
    border-color .5s ease,
    box-shadow .7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ICON */

.service-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:6px;
  flex-shrink:0;
  color:rgba(255,255,255,0.38);
  transition:
    color .35s ease,
    transform .35s ease;
}

/* SVG */

.service-icon svg{
  width:100%;
  height:100%;
}

/* TEXT */

.service-card span{
  font-size:16px;
  opacity:.82;
  transition:.35s ease;
}

/* HOVER */

.service-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
  box-shadow:
    0 14px 34px rgba(0,0,0,.22);
}

.service-card:hover .service-icon{
  color:rgba(255,255,255,.7);
}

.service-card:hover span{
  opacity:1;
}

/* ======================================================
   SECTION DIVIDER
====================================================== */

.section-divider{
  width:100%;
  height:1px;
  background:rgba(255, 255, 255, 0.100);
}


/* ======================================================
   GLOBAL FADE SYSTEM
====================================================== */

.fade-item{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s cubic-bezier(.22,.61,.36,1);
}

.fade-item.show{
  opacity:1;
  transform:translateY(0);
}


/* ======================================================
   LEGACY REVEAL (FOR HOW-RECT ETC.)
====================================================== */

.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:.8s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}


/* ======================================================
   FOOTER
====================================================== */

.footer{
  background:#151518;
  padding:100px 8% 60px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-top{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:120px;
  padding-bottom:80px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.footer-column h4{
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:20px;
  opacity:.6;
  text-transform:uppercase;
}

.footer-column a{
  display:block;
  text-decoration:none;
  color:#fff;
  font-size:15px;
  margin-bottom:12px;
  opacity:.75;
  transition:.3s ease;
}

.footer-column a:hover{
  opacity:1;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:40px;
  padding-top:40px;
  font-size:14px;
  opacity:.5;
  flex-wrap:wrap;
}


/* ======================================================
   BUTTON BASE
====================================================== */

.contact-primary-btn{
  padding:16px 34px;
  border-radius:50px;
  background:#fff;
  color:#000;
  border:1px solid #fff;
  text-decoration:none;
  font-size:14px;
  transition:.3s ease;
}

.contact-primary-btn:hover{
  background:transparent;
  color:#fff;
  transform:translateY(-4px);
}

.contact-secondary-btn{
  padding:16px 34px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  transition:.3s ease;
}

.contact-secondary-btn:hover{
  border-color:#fff;
  transform:translateY(-4px);
}


/* ======================================================
   REMOVE DEFAULT BLUE LINKS
====================================================== */

a{
  color:inherit;
}

/* ======================================================
   MEGA MENU — IPAD LANDSCAPE + MACBOOK
====================================================== */

@media (min-width:1025px) and (max-width:1500px){

    .dropdown-menu{

        position:fixed;

        top:90px;

        left:4vw;

        right:auto;

        width:92vw;

        max-width:none;

        transform:translateY(12px);

    }

    .nav-dropdown:hover .dropdown-menu{

        transform:translateY(0);

    }

}

/* ======================================================
   FOOTER — TABLET
====================================================== */

@media (min-width:601px) and (max-width:1024px){

    .footer{

        padding:90px 7% 50px;

    }

    .footer-top{

        grid-template-columns:repeat(3, 1fr);

        gap:50px;

        padding-bottom:60px;

    }

    .footer-column h4{

        font-size:13px;

        margin-bottom:18px;

    }

    .footer-column a{

        font-size:14px;

        margin-bottom:10px;

    }

    .footer-bottom{

        padding-top:30px;

        font-size:13px;

        gap:25px;

    }

}


/* ======================================================
   FOOTER — MOBILE
====================================================== */

@media (max-width:600px){

    .footer{

        padding:80px 7% 40px;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:45px;

        padding-bottom:50px;

    }

    .footer-column h4{

        font-size:12px;

        margin-bottom:16px;

    }

    .footer-column a{

        font-size:14px;

        margin-bottom:10px;

    }

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        padding-top:25px;

        font-size:12px;

    }

}

/* ======================================================
   IPAD PORTRAIT — FOOTER
====================================================== */

@media (min-width:601px) and (max-width:1024px){

    .footer{

        display:block;

        padding:120px 7% 220px;

        min-height:500px;

    }

    .footer-top{

        display:grid;

        grid-template-columns:repeat(3, 1fr);

        gap:50px;

        padding-bottom:60px;

    }

    .footer-bottom{

        display:flex;

        justify-content:space-between;

        align-items:flex-start;

        gap:30px;

        padding-top:30px;

        padding-bottom:40px;

        width:100%;

    }

}