:root{
    --bg:#ffffff;
    --surface:#f8f8f9;
    --accent:#b76e79;
    --accent-2:#264653;
    --text:#222;
    --muted:#6b6b6b;
    --max-width:1100px;
    --radius:8px;
    --container-padding:1rem;
    --transition:200ms ease;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    line-height:1.45;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* layout */
.container{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    padding:0 var(--container-padding);
}

/* header */
.site-header{
    background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
    position:sticky;
    top:0;
    z-index:40;
}
.site-header.hair-banner {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("assets/images/header-inner-l.jpg") no-repeat center;
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.75rem 0;
}
.logo{
    font-weight:700;
    color:var(--accent-2);
    text-decoration:none;
    font-size:1.1rem;
}
.logo img {
    display:block;
    max-height:60px;
}
.logo img.logo-full{display:block}
.logo img.logo-mini{display:none}

.nav-toggle{
    background:none;
    border:1px solid transparent;
    padding:0.5rem 0.75rem;
    border-radius:6px;
    display:inline-block;
    color:#FFF;
}
.main-nav{display:none}
.main-nav.open{display:block}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.nav-list a{color:var(--text);text-decoration:none;display:inline-block;}

/* Inner pages: ensure nav items are visible over banners */
.site-header.hair-banner .nav-list a, .hero-banner .nav-list a {color:#FFF;}

/* Active nav (replicates old site: gold bg + black text) */
.nav-list a.activeNav {
    background: none;
    color: #CFAA2A !important;
}

.nav-list a.inactiveNav:hover {
    color: #CFAA2A;
}

/* hero */
.hero{
    background:linear-gradient(120deg, rgba(183,110,121,0.06), rgba(38,70,83,0.04)), url('assets/images/hero.jpg') center/cover no-repeat;
    padding:3.5rem 0;
    color:var(--accent-2);
    text-align:center;
}
.hero.hero-banner {
    background: url("assets/images/banner2.jpg") no-repeat center;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px; /* Adjust as needed */
}
.header-container {
    width: 100%;
}
.banner-logo {
    max-width: 100%;
    height: auto;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
}
.hero-inner{max-width:900px;margin:0 auto}
.hero-title{font-size:clamp(1.6rem, 4vw, 2.6rem);margin:0 0 .5rem}
.hero-sub{margin:0 0 1.25rem;color:var(--muted)}

/* buttons */
.btn{display:inline-block;text-decoration:none;border:none;cursor:pointer;padding:.55rem .9rem;border-radius:6px;transition:transform var(--transition)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(183,110,121,0.12)}
.btn-primary:hover{transform:translateY(-3px)}

/* sections */
.section{padding:2rem 0}
.welcome-section{text-align:center;padding:2rem 0}
.section h2{margin-top:0}
.services-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));margin-top:1rem}
.service{background:var(--surface);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(30,30,30,0.03)}
.serviceTitle {
    border-bottom: 3px solid #CAA62C;
}
/* gallery */
.gallery-grid{
    display: grid;
    gap: 1rem; /* Increased gap for better spacing */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Creates responsive columns */
    justify-items: center; /* Center images within their grid cell */
    align-items: start; /* Align items to the start of the cell */
}
.gallery-grid img{
    width: 100%;
    max-width: 350px; /* Prevents images from becoming too large */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-radius: 6px;
    display: block;
}

.gold-border{border:2px solid #CFAA2A}

/* about */
.about-inner{display:grid;gap:1rem}
.about-image img{width:100%;height:auto;border-radius:6px;display:block}

/* contact */
.contact-grid{display:grid;gap:1rem}
.contact-card{background:var(--surface);padding:1rem;border-radius:var(--radius)}
.contact-form{display:flex;flex-direction:column;gap:.5rem}
.contact-form input,.contact-form textarea,.contact-form select{padding:.55rem;border-radius:6px;border:1px solid #e6e6e6;font:inherit}
.contact-form button{align-self:flex-start;margin-top:.5rem}

/* footer */
.site-footer{padding:2rem 0;background-color:#404041;color:#fff;border-top:1px solid #f0f0f0}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:start;text-align:left}
.footer-inner a{color:#CFAA2A}
.footer-logo{text-align:center}
.social-icons img{max-height:30px;margin-right:0.5rem}
.social-icons-container{text-align:center;padding:1rem 0}

/* responsive: >= 768px */
@media (min-width:768px){
    .nav-toggle{display:none}
    .main-nav{display:block}
    .nav-list{flex-direction:row;gap:1rem}
    .hero{padding:5rem 0}
    .about-inner{grid-template-columns:1fr 360px;align-items:center}
    .contact-grid{grid-template-columns:1fr 420px}
}

@media only screen and (max-width: 850px){
    .logo img.logo-full{display:none}
    .logo img.logo-mini{display:block}
    .footer-inner{grid-template-columns:1fr;text-align:center}
}