:root{
  --bg:#e7e6df;
  --text:#1b1b1b;
  --muted:#6f6f6f;
  --border:#cfcfc8;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  /* font-family:'Inter',sans-serif; */
   font-family:'Playfair Display',serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* FADE */
.fade-up{
  opacity:0;
  transform:translateY(24px);
  animation:fadeUp .9s ease forwards;
}
@keyframes fadeUp{
  to{opacity:1;transform:none}
}

/* CONTAINER */
.container{
  max-width:1200px;
  margin:auto;
  padding:20px;
}

/* ================= HEADER ================= */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:50;
}

.logo{
  font-weight:600;
  letter-spacing:1px;
}

/* MENU BUTTON */
.menu-btn{
  width:42px;
  height:42px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:transparent;
  transition:.3s;
}

.menu-btn.active{
  background:#111;
  color:#fff;
}

/* ================= SLIDE MENU ================= */
.full-menu{
  position:fixed;
  inset:0;
  background:rgba(231,230,223,.96);
  display:flex;
  opacity:0;
  pointer-events:none;
  transition:.5s ease;
  z-index:40;
}

.full-menu.active{
  opacity:1;
  pointer-events:auto;
}

.menu-wrapper{
  width:420px;
  height:100%;
  padding:120px 60px;
  display:flex;
  flex-direction:column;
  gap:28px;
  position:relative;
}

.menu-line{
  position:absolute;
  left:30px;
  top:120px;
  bottom:120px;
  width:2px;
  background:var(--border);
}

.menu-wrapper a{
  font-family:'Playfair Display',serif;
  font-size:38px;
  text-decoration:none;
  color:var(--text);
  display:flex;
  gap:16px;
  align-items:flex-start;
  transform:translateX(40px);
  opacity:0;
  transition:.5s ease;
}

.full-menu.active .menu-wrapper a{
  transform:none;
  opacity:1;
}

.menu-wrapper a em{
  font-style:normal;
  font-size:14px;
  color:var(--muted);
  margin-top:6px;
}

/* ================= HERO ================= */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 420px 1fr;
  gap:40px;
  align-items:center;
  margin-top:60px;
}

.hero-left h1{
  font-family:'Playfair Display',serif;
  font-size:32px;
  line-height:1.15;
  margin:10px 0 18px;
}

.hero-left p{
  font-size:15px;
  color:var(--muted);
}

.cta a{
  display:inline-block;
  margin-top:24px;
  padding:12px 24px;
  background:#111;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
}

/* IMAGE */
.hero-img{
  height:620px;
  margin-top:-165px;
  border-bottom-left-radius:30%;
  border-bottom-right-radius:30%;
  overflow:hidden;
}

.hero-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* SOCIALS */
.hero-socials{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:16px;
  background:rgba(255,255,255,.85);
  padding:10px 18px;
  border-radius:30px;
}

/* STATS */
.stats{
  display:flex;
  flex-direction:column;
  gap:32px;
}

.stat{
  display:flex;
  flex-direction:column;
  align-items:end;
  text-align:center;
}

.stat i{
  font-size:20px;
  margin-bottom:4px;
}

.stat strong{
  font-size:22px;
}

.stat span{
  font-size:13px;
  color:var(--muted);
}

/* ARROW */
.hero-arrow{
  position:absolute;
  bottom:-80px;
  right:20px;
  width:46px;
  height:46px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  animation:arrowMove 1.4s ease-in-out infinite;
}

@keyframes arrowMove{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(8px)}
}

/* ================= BRAND SLIDE SECTION ================= */
.brand-intro-section{
  position:fixed;
  left:0;
  right:0;
  bottom:-100%;
  height:100vh;
  background:#e9e9e3;
  overflow-y:auto;
  padding:80px 100px;
  z-index:60;
  transition:bottom .9s cubic-bezier(.77,0,.18,1);
}

.brand-intro-section.active{
  bottom:0;
}

/* BACK BUTTON */
.brand-close{
  position:fixed;
  top:24px;
  right:24px;
  background:#111;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:30px;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:70;
}

/* TRUSTED */
.trusted-by{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  text-transform:uppercase;
  color:#666;
  margin-bottom:24px;
}

.trusted-logos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:80px;
}

.logo-box{
  border:1px solid #d0d0ca;
  padding:18px;
  text-align:center;
  font-size:13px;
  color:#777;
}

/* CONTENT */
.brand-content{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
}

.brand-content h1{
  font-size:42px;
  line-height:1.1;
}

.brand-text{
  font-size:15px;
  line-height:1.7;
  color:#444;
}
/* Hide back button by default */
.brand-close{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* Show back button ONLY when brand is active */
.brand-intro-section.active .brand-close{
  opacity: 1;
  pointer-events: auto;
}

/* MOBILE */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center}
  .stats{flex-direction:row;justify-content:center}
  .hero-img{margin-top:0;height:380px}
  .brand-intro-section{padding:60px 24px}
  .brand-content{grid-template-columns:1fr}
  .trusted-logos{grid-template-columns:repeat(2,1fr);margin-bottom: 0px;}
  
}
/*  */
/* ================= TRUSTED MARQUEE ================= */

.trusted-marquee-section{
  padding:80px 0;
  background:#e9e9e3;
  overflow:hidden;
}

.trusted-title{
  text-align:center;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#666;
  margin-bottom:40px;
  font-weight: 800;
  font-weight: bold;
}

/* MARQUEE */
.marquee{
  position:relative;
  width:100%;
  overflow:hidden;
}

.marquee-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 30s linear infinite;
}

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

.marquee-item{
  flex:0 0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
}

.marquee-item img{
  height:48px;
  width:auto;
  /* opacity:.75; */
  transition:.3s ease;
}

.marquee-item img:hover{
  opacity:1;
  transform:scale(1.05);
}

/* ANIMATION */
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* MOBILE */
@media(max-width:768px){
  .marquee-item{
    padding:0 24px;
  }

  .marquee-item img{
    height:36px;
  }
  .menu-wrapper a {
    font-size: 18px;
  }
  
 
}

/* SERVICES */
.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin:70px 0;
  border-top:1px solid var(--border);
  padding-top:40px;
}

.service h4{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
}

.service p{
  font-size:13px;
  color:var(--muted);
}
/* ================= SERVICES RESPONSIVE ================= */

/* TABLET */
@media (max-width:1024px){
  .services{
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin:50px 0;
  }
}

/* MOBILE */
@media (max-width:767px){
  .services{
    grid-template-columns:1fr;
    gap:20px;
    margin:40px 0;
    padding-top:30px;
    text-align: center;
  }

  .service h4{
    font-size:15px;
  }

  .service p{
    font-size:14px;
    line-height:1.6;
  }
  .brand-content h1 {
font-size: 20px;
  }
  .brand-content {
gap: 35px;
  }
  .mobile-view{
    text-align: center;
  }
}
.we-build-section{
  background:#d9d9d7;
  padding:120px 0;
   font-family:'Playfair Display',serif;
  color:#111;
}

.we-build-container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
}

/* TOP */
.we-build-top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:flex-start;
}

.we-build-left h1{
  font-size:72px;
  line-height:1;
  font-weight:300;
}

.we-build-left h1 span{
  display:block;
  font-weight:300;
}

.we-build-left h1 strong{
  display:block;
  font-weight:800;
}

/* RIGHT TEXT */
.we-build-right p{
  font-size:14px;
  line-height:1.8;
  color:#555;
  max-width:420px;
  margin-bottom:24px;
}

.read-more-btn{
  display:inline-block;
  padding:10px 22px;
  background:#d59a52;
  color:#fff;
  font-size:12px;
  letter-spacing:1px;
  text-decoration:none;
}

/* DIVIDER */
.we-divider{
  height:1px;
  background:#111;
  margin:80px 0;
}

/* BOTTOM */
.we-build-bottom{
  text-align:center;
}

.we-build-bottom p{
  font-size:20px;
  line-height:1.7;
  margin-bottom:32px;
}

.portfolio-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:2px;
}

.portfolio-link .arrow{
  font-size:24px;
}

/* MOBILE */
@media(max-width:900px){
  .we-build-top{
    grid-template-columns:1fr;
    gap:40px;
  }

  .we-build-left h1{
    font-size:48px;
  }

  .we-build-right p{
    max-width:100%;
  }
}
/* .brand-content{
  position:relative;
} */

.brand-arrow{
  position:absolute;
  bottom:-60px; 
  /* left:50%; */
  transform:translateX(-50%);
}
.brand-arrow-second{
 position:absolute;
  bottom:-60px; 
  /* left:50%; */
  transform:translateX(-50%);
}
/* ================= WE BUILD SLIDE ================= */
.we-build-slide{
  position:fixed;
  left:0;
  right:0;
  bottom:-100%;
  height:100vh;
  background:var(--bg);
  overflow-y:auto;
  z-index:65;
  transition:bottom .9s cubic-bezier(.77,0,.18,1);
}

.we-build-slide.active{
  bottom:0;
}

/* Back button for we-build */
.we-build-close{
  position:fixed;
  top:24px;
  right:24px;
  background:#111;
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:30px;
  cursor:pointer;
  z-index:80;
}
/* Back button hidden by default */
.brand-close,
.we-build-close{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

/* Show back button only when slide is active */
.brand-intro-section.active .brand-close{
  opacity:1;
  pointer-events:auto;
}

.we-build-slide.active .we-build-close{
  opacity:1;
  pointer-events:auto;
}
.portfolio-showcase{
  background:var(--bg);
  padding:120px 20px;
}

.portfolio-wrapper{
  max-width:1200px;
  margin:auto;
  position:relative;
}

/* BACKGROUND BLOCKS */
.bg-block{
  position:absolute;
  z-index:1;
}

.bg-red{
  width:520px;
  height:300px;
  background:var(--muted);
  top:-40px;
  left:140px;
}

.bg-yellow{
  width:520px;
  height:300px;
  background:#d59a52;
  bottom:-40px;
  left:140px;
}

/* GRID */
.portfolio-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  width:720px;
}

.grid-item{
  background:#000;
  overflow:hidden;
}

.grid-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* INFO CARD */
.portfolio-card{
  position:absolute;
  right:0;
  bottom:-100px;
  z-index:3;
  width:517px;
  background:var(--muted);
  border-radius:22px;
  padding:28px;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.portfolio-card h3{
  font-size:26px;
  margin-bottom:12px;
  color: #d59a52;
  /* color: white; */
}

.portfolio-card p{
  font-size:14px;
  line-height:1.6;
  color:white;
  margin-bottom:12px;
}

.portfolio-card small{
  display:block;
  font-size:12px;
  color:white;
  margin-bottom:18px;
}

.portfolio-btn{
  display:inline-block;
  padding:10px 20px;
  background:#d59a52;
  color:#fff;
  font-size:12px;
  border-radius:20px;
  text-decoration:none;
  letter-spacing:1px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .portfolio-grid{
    width:100%;
    grid-template-columns:repeat(2,1fr);
  }

  .bg-red,
  .bg-yellow{
    display:none;
  }

  .portfolio-card{
    position:relative;
    width:100%;
    margin-top:0px;
  }
}
@media (max-width:1024px){
  
}
.brand-showcase-section{
  font-family:'Inter',sans-serif;
}

/* ================= TOP ================= */
.brand-top{
  background:#d59a52;
  padding:80px 0;
}

.brand-top-inner{
  max-width:1200px;
  margin:auto;
  background:#e6e6e6;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:60px;
  padding:40px;
}

.brand-image{
  position:relative;
  margin-top: -110px;
}

.brand-image img{
  width:100%;
  display:block;
}

.img-credit{
  position:absolute;
  bottom:12px;
  left:12px;
  font-size:12px;
  color:#fff;
}

.brand-text-box h2{
  font-size:36px;
  font-weight:300;
}

.brand-text-box h2 strong{
  font-weight:800;
}

.tags{
  margin:24px 0;
  font-size:13px;
  color:#555;
}

.dark-btn{
  display:inline-block;
  background:#000;
  color:#fff;
  padding:10px 22px;
  font-size:12px;
  letter-spacing:1px;
  text-decoration:none;
}

/* ================= MIDDLE ================= */
.brand-middle{
  background:#000;
  color:#fff;
  padding:100px 0;
}

.brand-middle-inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

.left-title h3{
  font-size:48px;
  font-weight:300;
  line-height:1.1;
}

.dot{
  display:inline-block;
  width:18px;
  height:18px;
  background:#d59a52;
  border-radius:50%;
  margin-bottom:20px;
}

.right-text p{
  font-size:14px;
  line-height:1.7;
  margin-bottom:20px;
  color:#ccc;
}

.gold-btn{
  display:inline-block;
  margin-top:10px;
  background:#d59a52;
  color:#000;
  padding:10px 22px;
  font-size:12px;
  text-decoration:none;
}

/* ================= BOTTOM ================= */
.brand-bottom{
  background:#e6e6e6;
  padding:100px 0;
}

.brand-bottom-inner{
  max-width:1200px;
  margin:auto;
  position:relative;
  display:grid;
  grid-template-columns:1fr 380px;
  gap:40px;
}

.image-stack{
  position:relative;
}

.image-stack img:first-child{
  width:100%;
}

.image-stack img:last-child{
  position:absolute;
  bottom:-40px;
  left:40px;
  width:240px;
}

.brand-card{
  background:#ededed;
  padding:30px;
}

.brand-card h4{
  font-size:22px;
  margin-bottom:16px;
}

.brand-card ul{
  list-style:none;
  padding:0;
  margin-bottom:16px;
}

.brand-card li{
  font-size:14px;
  margin-bottom:8px;
}

.brand-card small{
  display:block;
  font-size:12px;
  margin-bottom:16px;
}
/* BRAND SHOWCASE SLIDE */
.brand-showcase-section{
  position:fixed;
  left:0;
  right:0;
  bottom:-100%;
  height:100vh;
  background:var(--bg);
  overflow-y:auto;
  z-index:55;
  transition:bottom .9s cubic-bezier(.77,0,.18,1);
}

.brand-showcase-section.active{
  bottom:0;
}
.brand-arrow{
  position: absolute;
  bottom: -400px;         
  /* left: 50%; */
  transform: translateX(-50%);
  z-index: 50;
  cursor: pointer;
}
.brand-arrow-second{
  position: absolute;
  bottom: -1100px;         
  /* left: 50%; */
  transform: translateX(-50%);
  z-index: 50;
  cursor: pointer; 
}
.brand-close{
  position: fixed;
  top: 24px;
  right: 24px;
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 30px;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* ✅ THIS LINE IS CRITICAL */
.brand-showcase-section.active .brand-close{
  opacity: 1;
  pointer-events: auto;
}
/* ================= MOBILE ================= */
@media (max-width: 768px){

  /* TOP */
  .brand-top{
    padding:50px 16px;
  }

  .brand-top-inner{
    grid-template-columns:1fr;
    gap:30px;
    padding:24px;
  }

  .brand-text-box h2{
    font-size:26px;
  }

  .tags{
    font-size:12px;
  }

  /* MIDDLE */
  .brand-middle{
    padding:70px 16px;
  }

  .brand-middle-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .left-title h3{
    font-size:32px;
  }

  .right-text p{
    font-size:13px;
  }

  /* BOTTOM */
  .brand-bottom{
    padding:70px 16px;
  }

  .brand-bottom-inner{
    grid-template-columns:1fr;
    gap:40px;
  }

  .image-stack img:last-child{
    position:relative;
    bottom:0;
    left:0;
    width:100%;
    margin-top:20px;
  }

  .brand-card{
    padding:24px;
  }

  

  .brand-close{
    top:16px;
    right:16px;
    padding:8px 14px;
    font-size:12px;
  }
}
/* ================= TABLET ================= */
@media (min-width: 769px) and (max-width: 1024px){

  /* TOP */
  .brand-top-inner{
    grid-template-columns:340px 1fr;
    gap:40px;
    padding:32px;
  }

  .brand-text-box h2{
    font-size:30px;
  }

  /* MIDDLE */
  .brand-middle{
    padding:80px 24px;
  }

  .brand-middle-inner{
    gap:50px;
  }

  .left-title h3{
    font-size:38px;
  }

  /* BOTTOM */
  .brand-bottom{
    padding:80px 24px;
  }

  .brand-bottom-inner{
    grid-template-columns:1fr 320px;
    gap:32px;
  }

  .image-stack img:last-child{
    width:200px;
    bottom:-30px;
    left:30px;
  }

  /* SHOWCASE */
  .brand-arrow{
    bottom:-650px;
  }
  .brand-arrow-second{
    bottom: -800px;
  }
}
/* ================= BACK BUTTON ================= */
.back-btn{
  position: fixed;
  top: 24px;
  right: 24px;
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 14px;
  display: none; /* hidden by default */
  align-items: center;
  gap: 8px;
  z-index: 70;
  transition: background .25s ease, transform .2s ease;
}

.brand-showcase-section.active .back-btn{
  display: flex; /* visible only in showcase */
}

.back-btn:hover{
  background: #000;
  transform: translateY(-1px);
}

.back-btn:active{
  transform: translateY(0);
}

@media (max-width: 768px){
  .back-btn{
    top: 16px;
    right: 16px;
    padding: 8px 14px;
    font-size: 12px;
  }
}


/* ===== SECTION ===== */
/* ================= CONTACT SLIDE ================= */
.contact-section{
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%;
  height: 100vh;
  background:#1f1f1f;
  color:#fff;
  overflow-y:auto;
  z-index: 90;
  transition: bottom .9s cubic-bezier(.77,0,.18,1);
  padding: 80px;
}

/* ACTIVE STATE */
.contact-section.active{
  bottom: 0;
}

.contact-wrapper{
  max-width:1100px;
  margin:auto;
  padding:0 24px;
}

/* ===== TOP ===== */
.contact-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
}

.contact-left h1{
  font-size:42px;
  letter-spacing:1px;
}

.subtitle{
  font-size:14px;
  opacity:.7;
  margin-top:6px;
}

.desc{
  max-width:420px;
  font-size:14px;
  line-height:1.7;
  opacity:.65;
  margin-top:14px;
}

.contact-right{
  text-align:right;
}

.social-pill{
  display:inline-flex;
  gap:14px;
  padding:10px 18px;
  border:1px solid #444;
  border-radius:40px;
  margin-bottom:10px;
}

.social-pill span{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #555;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  opacity:.8;
}

.contact-right small{
  font-size:11px;
  opacity:.5;
}

/* ===== LOCATIONS ===== */
.locations{
  display:flex;
  justify-content:space-between;
  margin-top:80px;
  gap:40px;
}

.small-title{
  font-size:11px;
  letter-spacing:1px;
  opacity:.6;
}

.locations-left h2{
  font-size:32px;
  margin-top:8px;
}

.locations-right{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.location h4{
  font-size:14px;
  margin-bottom:6px;
}

.location p{
  font-size:13px;
  line-height:1.6;
  opacity:.6;
}

/* ===== IMAGE ===== */
.contact-image{
  margin:80px 0;
}

.contact-image img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:6px;
  opacity:.9;
}

/* ===== FORM ===== */
.contact-form-wrap h2{
  font-size:28px;
}

.form-sub{
  font-size:13px;
  opacity:.6;
  margin:10px 0 30px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:520px;
}

.contact-form input,
.contact-form textarea{
  background:#1f1f1f;
  border:1px solid #444;
  border-radius:20px;
  padding:14px 18px;
  color:#fff;
  font-size:13px;
}

.contact-form textarea{
  min-height:120px;
  resize:none;
}

.contact-form button{
  align-self:flex-start;
  background:transparent;
  border:1px solid #555;
  color:#fff;
  padding:10px 22px;
  border-radius:30px;
  font-size:12px;
  cursor:pointer;
  transition:.3s;
}

.contact-form button:hover{
  background:#fff;
  color:#000;
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .contact-top,
  .locations{
    flex-direction:column;
  }

  .locations-right{
    grid-template-columns:1fr;
  }

  .contact-right{
    text-align:left;
  }
}
/* ================= PORTFOLIO CONTROLS ================= */

/* Reuse existing back button style */
#portfolioBack{
  display:flex;
}

/* Arrow positioning */
.portfolio-next{
  position:absolute;
  /* bottom:-80px; */
  bottom: -230px;
  right:20px;
  width:46px;
  height:46px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  animation:arrowMove 1.4s ease-in-out infinite;
  z-index:90;
}

/* Mobile fix */
@media(max-width:768px){
  .portfolio-next{

    right:16px;
  }
  .contact-section{
    padding: 0px;
  }
}
/* Back button hidden everywhere by default */
.back-btn{
  display: none !important;
}

/* ================= BACK BUTTON VISIBILITY FIX ================= */

/* Hide ALL back buttons by default */
.back-btn{
  display: none !important;
}

/* Show ONLY showcase back button when showcase is active */
.brand-showcase-section.active #showcaseBack{
  display: flex !important;
}

/* Show ONLY contact back button when contact is active */
.contact-section.active #contactBack{
  display: flex !important;
}
/* ================= FORM + MAP LAYOUT ================= */
/* ================= CONTACT FORM + MAP (SIDE BY SIDE) ================= */

.contact-map-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-top: 40px;
}

/* FORM */
.contact-form{
  max-width: 100%;
}

/* MAP */
.contact-map{
  width: 100%;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #444;
}

.contact-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* MOBILE */
@media (max-width: 900px){
  .contact-map-form{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
/* =========================================================
   MOBILE SLIDE FIX (CRITICAL)
   ========================================================= */
@media (max-width: 768px){

  /* Use transform instead of bottom */
  .brand-intro-section,
  .brand-showcase-section,
  .we-build-slide{
  
    bottom: auto;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.77,0,.18,1);
  }
.contact-section{

    bottom: auto;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.77,0,.18,1);
  }
  .brand-intro-section.active,
  .brand-showcase-section.active,
  .we-build-slide.active,
  .contact-section.active{
    transform: translateY(0);
  }

  /* Allow smooth scrolling */
  .brand-intro-section,
  .brand-showcase-section,
  .we-build-slide,
  .contact-section{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Normalize arrows */
  .hero-arrow,
  .brand-arrow,
  .brand-arrow-second,
  .portfolio-next{
    position: fixed;
    bottom: 16px;
    right: 16px;
    transform: none;
    z-index: 120;
  }
}
/* =====================================================
   MOBILE ARROW NORMALIZATION (FINAL FIX)
   ===================================================== */
@media (max-width: 768px){

  /* Reset all slide arrows */
  .hero-arrow,
  .brand-arrow,
  .brand-arrow-second,
  .portfolio-next{
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 120;
  }

  /* Hide arrows by default on mobile */
  .hero-arrow,
  .brand-arrow,
  .brand-arrow-second,
  .portfolio-next{
    opacity: 0;
    pointer-events: none;
  }

  /* Show arrow ONLY when its slide is active */
  .brand-intro-section.active .brand-arrow,
  .brand-showcase-section.active .brand-arrow,
  .brand-showcase-section.active .brand-arrow-second,
  .we-build-slide.active .brand-arrow,
  .portfolio-showcase.active .portfolio-next,
  .contact-section.active .portfolio-next{
    opacity: 1;
    pointer-events: auto;
  }
}
/* ================= MOBILE CONTAINER ================= */
@media (max-width: 768px){
  .container{
    max-width: 100%;
    padding: 16px;
  }
}