/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

/* ================= VARIABLES ================= */
:root{
  --brand-gold:#c4a96f;
  --dark-bg:#0e0e0e;
  --dark-section:#141414;
  --box-bg:#1c1c1c;
}

/* ================= BASE ================= */
body{
  background:var(--dark-bg);
  color:#ffffff;
  line-height:1.6;
}

a{
  color:#ffffff;
  text-decoration:none;
}

/* ================= WRAPPER ================= */
.wrap{
  max-width:1100px;
  margin:auto;
  padding:80px 20px;
}

/* ================= HEADER ================= */
header{
  background:#000000;
  position:sticky;
  top:0;
  z-index:999;
}

.header-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px;
}

/* ================= BRAND ================= */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  height:48px;
}

/* ================= COMPANY NAME ================= */
.company-name{
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:1px;
  color:var(--brand-gold);
}

.brand-main{
  display:inline-block;
}

.company-name sup{
  font-size:11px;
  vertical-align:super;
  margin-left:2px;
}

.brand-sub{
  display:block;
  font-size:14px;
  font-weight:400;
  color:#ffffff;
  margin-top:2px;
}

/* ================= NAV ================= */
nav a{
  margin-left:22px;
  font-size:16px;
  opacity:0.9;
  transition:0.3s;
}

nav a:hover{
  opacity:1;
  color:var(--brand-gold);
}

/* ================= HERO ================= */
.hero{
  background:url('../assets/images/hero.jpg') center/cover no-repeat;
  padding:180px 20px;
}

.hero h2{
  font-size:56px;
  margin-bottom:15px;
}

.hero span{
  color:var(--brand-gold);
}

.hero p{
  font-size:18px;
  max-width:600px;
}

/* ================= SECTION HEADINGS ================= */
section h3{
  font-size:32px;
  margin-bottom:25px;
}

/* ================= SERVICES GRID ================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.grid div{
  background:var(--box-bg);
  padding:30px;
  border-radius:6px;
  text-align:center;
  transition:0.3s;
}

.grid div:hover{
  background:#242424;
  transform:translateY(-4px);
}

.grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:6px;
}

/* ================= DARK SECTION ================= */
.dark{
  background:var(--dark-section);
}

/* ================= ABOUT ================= */
.about-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:60px;
}

.about-intro{
  font-size:18px;
  margin-bottom:18px;
}

.about-intro strong{
  font-size:19px;
  font-weight:600;
}

.about-intro strong span{
  color:var(--brand-gold);
}

.about-text p{
  max-width:560px;
}

.about-list{
  list-style:none;
  margin-bottom:30px;
}

.about-list li{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:16px;
  transition:color 0.3s ease, padding-left 0.3s ease;
}

.about-list li:hover{
  color:var(--brand-gold);
  padding-left:6px;
}

.about-timeline{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.about-timeline div{
  border-left:2px solid var(--brand-gold);
  padding-left:12px;
  font-size:15px;
  line-height:1.45;
}

.about-timeline span{
  color:var(--brand-gold);
  font-weight:700;
}

/* ================= PROJECT / WORK ================= */
#work .wrap{
  padding-top:40px;
  padding-bottom:40px;
}

.work-title{
  font-size:32px;
  margin-bottom:10px;
}

.work-filter{
  display:flex;
  gap:18px;
  margin-bottom:14px;
}

.work-filter button{
  background:none;
  border:none;
  color:#ffffff;
  opacity:0.6;
  cursor:pointer;
  font-size:15px;
  position:relative;
}

.work-filter button.active,
.work-filter button:hover{
  opacity:1;
}

.work-filter button.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:var(--brand-gold);
}

.work-more{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.see-more-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--brand-gold);
  color:var(--brand-gold);
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  transition:0.25s;
}

.see-more-btn:hover{
  background:var(--brand-gold);
  color:#111111;
}

/* Case grid */
.case-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px;
  margin-top:0;
}

.case-item{
  background:#141414;
  border-radius:10px;
  overflow:hidden;
  transition:0.4s;
}

.case-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}

.case-item img{
  width:100%;
  height:320px;
  object-fit:cover;
}

.case-info{
  padding:22px;
}

.case-info h4{
  font-size:20px;
  margin-bottom:6px;
}

.case-info p{
  font-size:15px;
  opacity:0.85;
}

.case-catalog{
  display:inline-block;
  margin-top:10px;
  padding:4px 10px;
  border:1px solid rgba(196,169,111,0.6);
  border-radius:999px;
  color:var(--brand-gold);
  font-size:12px;
  opacity:1;
}

/* ================= FOOTER – PERFECT LOCKED PATTERN ================= */
/* ================= FOOTER – FINAL LOCKED VERSION ================= */

.site-footer{
  position:relative;
  background:linear-gradient(90deg,#0b0b0b 0%, #000000 55%);
  overflow:hidden;
}

/* 🔒 Pattern layer */
.site-footer::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:url('../assets/images/footer-pattern.png');
  background-repeat:no-repeat;

  /* Fixed visual size */
  background-size:880px;

  /* ⬇️ Top breathing space + correct alignment */
  background-position:right -60px top 10px;

  opacity:0.45;
  pointer-events:none;

  /* ⬇️ Darker, premium bottom fade */
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0.45) 80%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0.45) 80%,
    rgba(0,0,0,0) 100%
  );
}

/* Content */
.footer-content{
  position:relative;
  max-width:1100px;
  margin:auto;
  padding:100px 20px 80px;
  z-index:2;
}

.footer-left{
  max-width:420px;
}

.footer-left h3{
  font-size:34px;
  margin-bottom:22px;
  line-height:1.2;
}

.footer-left p{
  font-size:16px;
  line-height:1.45;
  margin-bottom:6px;
  opacity:0.9;
}

.footer-left p strong{
  display:inline-block;
  margin-bottom:6px;
}

/* Bottom bar */
.footer-bottom{
  position:relative;
  background:#000000;
  text-align:center;
  padding:20px;
  font-size:14px;
  color:#777777;
  border-top:1px solid rgba(255,255,255,0.06);
  z-index:3;
}

/* ================= MID SCREENS (1340px → 769px) ================= */
@media (max-width:1340px) and (min-width:769px){
  .site-footer::after{
    background-size:760px;
    background-position:right -40px top 20px;
    opacity:0.42;
  }
}

/* ================= MOBILE ================= */
@media (max-width:768px){
  .site-footer::after{
    background-size:520px;
    background-position:center top;
    opacity:0.22;
  }

  .footer-content{
    padding:70px 20px 60px;
  }

  .footer-left h3{
    font-size:28px;
  }

  .footer-left p{
    font-size:15px;
  }
}



/* ================= PROJECT SECTION – HEIGHT FIX ================= */

/* Reduce overall padding for Project section only */
#work .wrap{
  padding-top:32px;   /* was 40px+ */
  padding-bottom:32px;
}

/* Reduce space under "Project" title */
.work-title{
  margin-bottom:6px;  /* tighter */
}

/* Reduce space between filters and cards */
.work-filter{
  margin-bottom:10px; /* key fix */
}

/* Remove extra gap above cards */
.case-grid{
  margin-top:0;
}

.case-item{
  transition:opacity 0.35s ease, transform 0.35s ease;
}
/* ================= MOBILE NAV FIX ================= */
@media (max-width:768px){

  .header-wrap{
    flex-direction:column;     /* logo on top */
    align-items:flex-start;
    gap:18px;
  }

  nav{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    padding-left:4px;          /* align with logo text */
  }

  nav a{
    margin:0;
    font-size:15px;
    opacity:0.85;
  }
}
/* ================= ABOUT – MOBILE FIX ================= */
@media (max-width: 768px){

  /* Stack layout */
  .about-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Reduce title size */
  #about h3{
    font-size: 26px;
    margin-bottom: 14px;
  }

  /* Intro text tighter */
  .about-intro{
    font-size: 16px;
    margin-bottom: 12px;
  }

  .about-text p{
    font-size: 15px;
    line-height: 1.55;
    max-width: 100%;
  }

  /* Services list compact */
  .about-list{
    margin-bottom: 24px;
  }

  .about-list li{
    font-size: 15px;
    padding: 8px 0;
  }

  /* Timeline becomes single column */
  .about-timeline{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-timeline div{
    font-size: 14px;
    padding-left: 10px;
  }

  /* Reduce section padding */
  #about .wrap{
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
@media (max-width: 768px){

  /* Improve paragraph readability */
  .about-text p{
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.9;
  }

  /* Add breathing space before services */
  .about-list{
    margin-top: 28px;
  }

  /* Stronger separation between services */
  .about-list li{
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  /* Timeline spacing */
  .about-timeline{
    margin-top: 30px;
  }

  .about-timeline div{
    padding-left: 12px;
    font-size: 14px;
  }
}

/* ================= DASHBOARD ================= */
.dashboard-page{
  min-height:100vh;
}

.auth-wrap{
  padding-top:70px;
}

.auth-card{
  max-width:460px;
  margin:0 auto;
}

.auth-error{
  margin-top:12px;
  color:#ff8f8f;
  font-size:14px;
}

.dashboard-wrap{
  padding-top:50px;
}

.dashboard-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.dashboard-topbar-actions{
  display:flex;
  gap:8px;
}

.dashboard-wrap h1{
  margin-bottom:18px;
}

.dashboard-card{
  background:#171717;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:24px;
  margin-bottom:26px;
}

.dashboard-card h2{
  margin-bottom:16px;
  font-size:24px;
}

.dashboard-section-title{
  margin:12px 0 10px;
  font-size:18px;
  color:var(--brand-gold);
}

.dashboard-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.dashboard-split-col{
  min-width:0;
}

.dashboard-form{
  display:grid;
  gap:10px;
}

.dashboard-form label{
  font-size:14px;
  opacity:0.9;
}

.dashboard-form input[type="text"],
.dashboard-form input[type="password"],
.dashboard-form input[type="file"],
.dashboard-form textarea,
.dashboard-form select{
  background:#0f0f0f;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:8px;
  padding:12px;
  font-size:15px;
}

.dashboard-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.toggle-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}

.toggle-row input{
  width:18px;
  height:18px;
}

.image-preview{
  width:100%;
  max-width:360px;
  height:180px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
}

.btn-primary,
.btn-secondary,
.btn-danger{
  border:none;
  border-radius:8px;
  padding:10px 14px;
  font-size:14px;
  cursor:pointer;
}

.btn-primary{
  background:var(--brand-gold);
  color:#111111;
  font-weight:700;
}

.btn-secondary{
  background:#2c2c2c;
  color:#ffffff;
}

.btn-danger{
  background:#8b2f2f;
  color:#ffffff;
}

.dashboard-list{
  display:grid;
  gap:14px;
}

.dashboard-item{
  display:grid;
  grid-template-columns:160px 1fr auto;
  gap:14px;
  align-items:center;
  background:#101010;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:12px;
}

.dashboard-item img{
  width:100%;
  height:100px;
  object-fit:cover;
  border-radius:8px;
}

.dashboard-item-content h3{
  margin-bottom:5px;
  font-size:18px;
}

.dashboard-item-content p{
  margin-bottom:6px;
  font-size:14px;
  opacity:0.9;
}

.dashboard-item-content small{
  opacity:0.75;
}

.dashboard-item-actions{
  display:grid;
  gap:8px;
}

.empty-state{
  opacity:0.7;
}

.home-limit-notice{
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid rgba(196, 169, 111, 0.45);
  background:rgba(196, 169, 111, 0.12);
  color:#f0dcb1;
  border-radius:8px;
  font-size:14px;
}

.portfolio-wrap{
  padding-top:60px;
}

.portfolio-wrap h1{
  margin-bottom:8px;
}

.portfolio-subtitle{
  opacity:0.85;
  margin-bottom:24px;
}

@media (max-width:768px){
  .dashboard-split{
    grid-template-columns:1fr;
  }

  .dashboard-topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .dashboard-topbar-actions{
    width:100%;
  }

  .dashboard-wrap h1{
    margin-bottom:0;
  }

  .dashboard-item{
    grid-template-columns:1fr;
  }

  .dashboard-item-actions{
    grid-template-columns:1fr 1fr;
  }
}