/* ==========================================================
   Urban Customs - style.css
   Production Base Styles
   ========================================================== */

:root{
  --primary:#d4af37;
  --secondary:#1b1b1b;
  --bg:#ffffff;
  --surface:#f8f8f8;
  --text:#222;
  --muted:#666;
  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --transition:.3s ease;
  --container:1200px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Montserrat",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:var(--container);margin:auto;padding:0 20px}

.skip-link{
 position:absolute;left:-9999px;top:0;
}
.skip-link:focus{
 left:20px;top:20px;background:#000;color:#fff;padding:.75rem 1rem;z-index:9999;
}

header{
 position:sticky;top:0;z-index:1000;
 background:rgba(255,255,255,.92);
 backdrop-filter:blur(12px);
 transition:var(--transition);
}
header.scrolled{box-shadow:var(--shadow)}

.logo{font-weight:800;font-size:1.6rem}
.logo span{color:var(--primary)}

.navbar-nav .nav-link{
 padding:.75rem 1rem;
 font-weight:600;
 transition:var(--transition);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
 color:var(--primary);
}

.theme-toggle{
 border:none;
 background:none;
 font-size:1.2rem;
 cursor:pointer;
 margin-left:1rem;
}

.hero{
 position:relative;
 min-height:100vh;
 display:flex;
 align-items:center;
 overflow:hidden;
}
.hero-overlay{
 position:absolute;inset:0;
 background:rgba(0,0,0,.55);
}
.hero-content{
 position:relative;
 z-index:2;
 color:#fff;
}
.hero h1{
 font-size:clamp(2.5rem,6vw,5rem);
 font-weight:900;
}
.hero-buttons{
 display:flex;
 gap:1rem;
 flex-wrap:wrap;
}

.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:999px;
 padding:.9rem 1.6rem;
 transition:var(--transition);
 font-weight:700;
}
.btn-primary{
 background:var(--primary);
 color:#111;
}
.btn-outline{
 border:2px solid #fff;
 color:#fff;
}
.btn:hover{
 transform:translateY(-2px);
}

.section-padding{padding:100px 0}

.section-title{
 max-width:760px;
 margin:0 auto 3rem;
 text-align:center;
}
.section-tag{
 color:var(--primary);
 font-weight:700;
 letter-spacing:.12em;
}

.service-card,
.why-card,
.feature-box,
.portfolio-card{
 background:#fff;
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 overflow:hidden;
 transition:var(--transition);
}
.service-card:hover,
.why-card:hover,
.feature-box:hover,
.portfolio-card:hover{
 transform:translateY(-6px);
}

.gallery-filter{
 border:none;
 background:#eee;
 padding:.75rem 1.2rem;
 border-radius:999px;
 cursor:pointer;
 margin:.25rem;
}
.gallery-filter.active{
 background:var(--primary);
 color:#111;
}

.gallery-item{
 transition:.35s ease;
}

.back-to-top{
 position:fixed;
 right:20px;
 bottom:20px;
 width:48px;
 height:48px;
 border:none;
 border-radius:50%;
 background:var(--primary);
 color:#111;
 opacity:0;
 visibility:hidden;
 transition:var(--transition);
 z-index:999;
}
.back-to-top.show{
 opacity:1;
 visibility:visible;
}

form .form-control,
form .form-select{
 border-radius:12px;
 padding:.85rem 1rem;
}
.field-error{
 color:#d62828;
 font-size:.875rem;
 margin-top:.35rem;
}
.error{
 border-color:#d62828!important;
}

.footer{
 background:#111;
 color:#ddd;
 padding:70px 0 30px;
}
.footer a:hover{
 color:var(--primary);
}
.footer-bottom{
 text-align:center;
 border-top:1px solid rgba(255,255,255,.1);
 margin-top:2rem;
 padding-top:1rem;
}