/* -------- ROOT COLORS -------- */
:root{
  --primary:#6b4f3a;
  --primary-600:#5f4633;
  --accent:#c5a880;
  --bg:#f9f6f2;
  --ink:#2b2b2b;
  --muted:#7a7a7a;
  --card:#fff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* NAV colors A */
  --nav-bg:#fff;
  --nav-ink:#2a1e1a;
  --nav-primary:#7b4b2a;
  --nav-accent:#9b6944;
  --nav-shadow:0 2px 12px rgba(0,0,0,.05);
  --nav-height:72px;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ max-width:1200px; margin:auto; padding:0 16px; }

/* Header base */
.site-header{
  position:sticky;
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--nav-bg);
  border-bottom:1px solid #eee2da;
  box-shadow:var(--nav-shadow);
  transition:background .3s ease;
}

/* Homepage hero overlay */
.hero-page .site-header{
  position:fixed;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 60%,transparent);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;
  backdrop-filter:blur(4px);
}

.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  gap:16px;
}

.brand-logo{
  width:48px; height:48px;
  border-radius:12px;
  border:2px solid var(--nav-accent);
  background:#fff;
  object-fit:contain;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
}

/* Desktop menu */
.menu{
  display:flex;
  align-items:center;
  gap:20px;
}

.menu a,
.menu .dropbtn{
  padding:10px 14px;
  border-radius:999px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-weight:700;
  color:#3a332c;
}

.menu a:hover,
.menu .dropbtn:hover{
  background:var(--nav-primary);
  color:#fff;
}

.menu a.active{
  background:var(--nav-primary);
  color:#fff;
}

/* Hero overlay nav text */
.hero-page .menu a,
.hero-page .menu .dropbtn{
  color:#fff;
}
.hero-page .menu a.active{
  color:#ffdca8;
}

/* Dropdown */
.dropdown{ position:relative; }
.dropbtn::after{
  content:"▾";
  margin-left:6px;
  font-size:12px;
  opacity:.8;
}
.dropmenu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid #eee2da;
  border-radius:14px;
  padding:8px 0;
  display:none;
  z-index:2000;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.dropmenu a{
  display:block;
  padding:10px 16px;
  border-radius:8px;
}
.dropmenu a:hover{
  background:#f7ede4;
  color:var(--nav-primary);
}

/* Show dropdown on desktop hover */
@media (hover:hover){
  .dropdown:hover .dropmenu{
    display:block;
  }
}

/* Hamburger */
.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  padding:8px;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  z-index:3001;
}

.nav-toggle .bar{
  display:none;
}

.nav-toggle::before{
  content:"";
  display:block;
  width:24px;
  height:3px;
  background:var(--nav-ink);
  border-radius:3px;
  box-shadow:
    0 -7px 0 var(--nav-ink),
    0 7px 0 var(--nav-ink);
}

/* Mobile */
@media (max-width:860px){

  .nav-row{
    position:relative;
    min-height:72px;
  }

  .nav-toggle{
    display:flex;
  }

.hero-page .nav-toggle::before{
  background:#fff;
  box-shadow:
    0 -7px 0 #fff,
    0 7px 0 #fff;
}

  .menu{
    display:none;
    position:absolute;
    top:72px;
    left:16px;
    right:16px;

    flex-direction:column;
    gap:8px;

    padding:16px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.18);

    z-index:3000;
  }

  .menu.open{
    display:flex;
  }

  .menu a,
  .menu .dropbtn{
    width:100%;
    color:#3a332c !important;
    text-align:center;
  }

  /* Disable desktop hover */
  .dropdown:hover .dropmenu{
    display:none !important;
  }

  /* Mobile dropdown */
  .dropdown.open .dropmenu{
    display:block !important;
    position:static;
    min-width:0;
    padding-left:12px;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .dropdown.open .dropmenu a{
    color:#2b2b2b !important;
  }
}

.hero-cover{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background-size:cover;
  background-position:center;
}
.hero-cover .hero-inner{
  max-width:960px;
  padding:clamp(56px,6vw,96px) 16px 24px;
}
.hero-cover .eyebrow{
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-cover h1{
  font-size:clamp(28px,6vw,56px);
  font-weight:900;
}
.hero-cover .sub{
  font-size:clamp(14px,2.1vw,22px);
  opacity:.95;
}
.hero-cover .cta{
  margin-top:16px;
  display:flex;
  gap:10px;
  justify-content:center;
}

.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media(max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .svc-grid{ grid-template-columns:1fr;} }

.svc-card{
  background:#f7f4ef;
  border:1px solid #eee;
  border-radius:16px;
  padding:16px;
  transition:.2s;
}
.svc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.06);
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 16px;
}
.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #ddd;
  cursor:pointer;
}
.chip.active{
  background:var(--primary);
  color:#fff;
}

.proj-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media(max-width:980px){ .proj-grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .proj-grid{ grid-template-columns:1fr;} }

.proj{
  position:relative;
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.proj img{
  height:220px;
  width:100%;
  object-fit:cover;
  filter:brightness(.92);
  transition:.3s;
}
.proj:hover img{
  transform:scale(1.05);
  filter:brightness(.98);
}
.proj .label{
  position:absolute;
  left:12px;
  bottom:10px;
  color:#fff;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  justify-content:center;
  align-items:center;
  padding:20px;
  z-index:2000;
}
.modal.open{ display:flex; }

.modal .dialog{
  background:#111;
  border-radius:16px;
  max-width:960px;
  width:100%;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  color:#f3f3f3;
}

.modal .top{
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
}

.modal .close{
  background:#fff;
  border:0;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.slider{
  position:relative;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  justify-content:center;
}
.slider img{
  max-width:100%;
  max-height:70vh;
  object-fit:contain;
}
.slider .nav{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.slider .nav button{
  pointer-events:all;
  background:rgba(255,255,255,.9);
  border:0;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.team-card{text-align:center;}
.team-card .avatar{
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  margin:auto;
  border:2px solid var(--accent);
}

/* Simple footer */
.site-footer{
  margin:40px 0 20px;
  text-align:center;
  color:#6b6b6b;
  font-size:14px;
}

/* ============================================================
   LIGHTBOX (Gallery)
   ============================================================ */

.lb{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  z-index:3000;
}
.lb[aria-hidden="false"]{
  display:grid; place-items:center;
}
.lb__frame{
  width:min(1100px,96vw);
  background:#000;
  border-radius:14px;
  overflow:hidden;
}
.lb__img{
  width:100%;
  height:70vh;
  object-fit:contain;
}

/* FIX — About dropdown text readable */
.menu .dropmenu a {
  color: #2b2b2b !important;
}

.menu .dropmenu a:hover {
  background: #f7ede4;
  color: #7b4b2a !important;
}

/* Ensure the dropdown panel stays light even on hero overlay */
.hero-page .dropmenu {
  background: #ffffff !important;
  border: 1px solid #eee2da;
}