:root{
  --bg:#fff9f4;
  --text:#171717;
  --muted:#6b7280;

  /* GOLD + NAVY THEME */
  --brand:#d4af37;         /* gold */
  --brand-2:#f6e7b3;       /* light sand gold */

  --card:#ffffff;
  --border:#f0e4db;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Poppins',system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#fff;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.75rem}

/* Fixed logo styling */
.brand img {
  width: 55px;
  height: 55px;
  border-radius: 8px;             /* No circle = more corporate look */
  border: 2px solid var(--brand); /* Gold border matches theme */
  object-fit: cover;
  background: #fff;
}

.brand-text{display:flex;flex-direction:column;font-size:.9rem;color:var(--text)}
#hamburger{display:none;background:none;border:1px solid var(--border);padding:.5rem .6rem;border-radius:.75rem;font-size:1.2rem}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{padding:.5rem .8rem;border-radius:.65rem}

/* NAV LINK ACTIVE + CTA */
.nav a:hover,
.nav a.active{
  color: var(--brand);
}

.nav a.cta{
  background:var(--brand);
  color:#fff;
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
  padding:3rem 1.25rem;

  /* GOLD GRADIENT */
  background:linear-gradient(90deg, var(--brand-2), #fff);
}

.hero h1{font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.15;margin:0 0 .5rem}
.hero p{max-width:60ch;margin:.25rem 0 1rem;color:var(--muted)}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap}

.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:.7rem 1rem;
  border-radius:.8rem;
  font-weight:600;
  border:none;
  cursor:pointer;
}

.btn-outline{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.btn.small{padding:.55rem .9rem;font-size:.9rem}

.badges{display:flex;gap:.5rem;list-style:none;padding:0;margin:1rem 0 0;flex-wrap:wrap}
.badges li{background:#fff;border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

.hero-media{
  border:8px solid #fff;
  border-radius:1.25rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  overflow:hidden;
}

/* Sections */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:2rem 1.25rem}
.card{
  background:var(--card);
  border:1px solid var(--border);
  padding:1.25rem;
  border-radius:1rem;
  box-shadow:0 6px 18px rgba(212,175,55,.12); /* gold tint shadow */
}

.split{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem;padding:2rem 1.25rem}
.checklist{list-style:'✓ ';padding-left:1rem}
.link{font-weight:600}

/* Page Hero */
.page-hero.small{
  padding:2.5rem 1.25rem;

  /* SOFT GOLD TONE */
  background:linear-gradient(90deg,#fff,var(--brand-2));

  border-bottom:1px solid var(--border)
}

.page-hero h1{margin:0}

/* Layout helpers */
.container{padding:2rem 1.25rem}
.columns{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem}
.info{background:#fff;border:1px solid var(--border);padding:1rem;border-radius:1rem}

/* PRODUCT GRID */
/* ========================
   Product Grid  (GOLD + NAVY)
======================== */
.container {
  max-width: 1200px;
  margin: auto;
  padding: 2rem 1rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.p-card {
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.p-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.p-card div {
  padding: 1rem;
}

/* Product Title – NAVY */
.p-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: #0A1A3A;       /* Deep Navy */
}

/* Product Description */
.p-card p {
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

/* Specs */
.specs {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  padding-left: 15px;
  list-style: disc;
  color: #333;
}

/* Button – GOLD + NAVY */
.btn.small {
  display: inline-block;
  background: #D4AF37;     /* Gold */
  color: #0A1A3A;          /* Deep Navy Text */
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: 0.3s;
  border: 2px solid transparent;
}

.btn.small:hover {
  background: #0A1A3A;     /* Navy Hover */
  color: #FFFFFF;          /* White text */
  border-color: #D4AF37;   /* Gold Border */
}

/* Filter Buttons */
.category-filter{text-align:center;margin-bottom:2rem}

.filter-btn{
  padding:.6rem 1.2rem;
  border-radius:50px;
  border:1px solid var(--brand);
  background:#fff;
  color:var(--brand);
  cursor:pointer;
  font-weight:500;
  margin:.3rem;
  transition:0.3s;
}

.filter-btn.active,
.filter-btn:hover{
  background:var(--brand);
  color:#fff;
}


/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.gallery figure{margin:0;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;background:#fff}
.gallery figcaption{padding:.5rem .75rem;font-size:.9rem;color:var(--muted)}
.gallery .placeholder{display:flex;align-items:center;justify-content:center;min-height:180px}
.gallery .placeholder>div{padding:1rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.25rem}
#contactForm{
  display:grid;
  gap:.75rem;
  background:#fff;
  border:1px solid var(--border);
  padding:1rem;
  border-radius:1rem;
}
#contactForm input,#contactForm textarea{
  width:100%;
  padding:.65rem;
  border:1px solid var(--border);
  border-radius:.65rem;
  font:inherit;
}
#contactForm .status{margin-top:.35rem;color:var(--muted)}

.map-wrap{margin-top:1rem;border-radius:1rem;overflow:hidden;border:1px solid var(--border)}
.map-wrap iframe{width:100%;height:260px;border:0}

/* Footer */
.site-footer{
  padding:2rem 1.25rem;
  border-top:1px solid var(--border);
  background:#fff;
}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.site-footer h4{color:var(--brand)}
.site-footer a:hover{color:var(--brand)}

.copyright{text-align:center;color:var(--muted);margin-top:1rem}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr}
  .p-card{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width: 820px){
  #hamburger{display:block}
  .nav{
    position:fixed;
    inset:64px 0 auto 0;
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:1rem;
    display:none;
    flex-direction:column;
    gap:.25rem;
  }
  .nav.open{display:flex}
}

/* Lightbox Products */
.product-gallery{cursor:pointer}
.product-gallery .main-img{width:100%;border-radius:8px;margin-bottom:8px}
.thumb-container{display:flex;gap:6px}
.thumb-container .thumb{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:6px;
  opacity:.7;
  cursor:pointer;
  transition:.2s;
}
.thumb:hover{opacity:1}

.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  justify-content:center;
  align-items:center;
  z-index:99999;
}

.lightbox img{
  max-width:70%;
  max-height:80%;
  border-radius:10px;
}

.lightbox .close{
  position:absolute;
  top:25px;
  right:40px;
  font-size:40px;
  cursor:pointer;
  color:white;
}

.lightbox .nav{
  position:absolute;
  top:50%;
  font-size:50px;
  cursor:pointer;
  color:white;
  user-select:none;
}

.lightbox .left{left:5%}
lightbox .right{right:5%}










/* ---------- Lightbox: mobile-friendly override (paste at end of your CSS) ---------- */

/* ensure the lightbox shows as a centered flex container even if inline style is present */
.lightbox,
.lightbox[style*="display:flex"],
.lightbox[style*="display: flex"] {
  display: none;            /* default hidden */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: 16px;            /* breathing room on small screens */
  -webkit-overflow-scrolling: touch;
}

/* if JS toggles a class 'open' or uses inline display:flex, this ensures it's visible */
.lightbox.open,
.lightbox[style*="display:flex"],
.lightbox[style*="display: flex"] {
  display: flex !important;
}

/* responsive image sizing: fit inside viewport and preserve aspect ratio */
.lightbox img {
  width: auto !important;
  max-width: 95vw !important;   /* at most viewport width */
  max-height: 90vh !important;  /* at most viewport height */
  object-fit: contain !important;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* close and nav buttons: keep them accessible on mobile */
.lightbox .close {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 34px;
  cursor: pointer;
  color: #fff;
  z-index: 100000;
}

.lightbox .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 44px;
  cursor: pointer;
  color: white;
  user-select: none;
  z-index: 100000;
}
.lightbox .left { left: 5%; }
.lightbox .right { right: 5%; }   /* fixed selector (leading dot) */

/* slightly smaller controls on very small screens */
@media (max-width: 420px) {
  .lightbox img { max-width: 92vw; max-height: 80vh; }
  .lightbox .close { font-size: 28px; right: 12px; top: 10px; }
  .lightbox .nav { font-size: 34px; }
}




/* Clients Section */
.clients{
  text-align:center;
  padding:2rem 1.25rem;
  background:#ffffff;
  border:1px solid #d4af37;   /* soft gold border */
  border-radius:1rem;
  margin-top:2rem;
}

.clients h2{
  margin-bottom:1rem;
  font-size:1.6rem;
  color:#0a1a3b;              /* deep navy for heading */
  font-weight:700;
}

/* Client name list */
.client-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}

.client-list li{
  background:#d4af37;         /* gold pill background */
  color:#0a1a3b;              /* navy text */
  padding:.6rem 1.4rem;
  border-radius:999px;
  font-weight:600;
  border:1px solid #b8952f;   /* deeper gold border */
  font-size:1rem;
  letter-spacing:0.3px;       /* subtle premium touch */
  text-transform:capitalize;  /* makes names look pro */
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:0.25s ease;
}

/* Hover effect */
.client-list li:hover{
  background:#0a1a3b;         /* navy hover */
  color:#d4af37;              /* gold text on hover */
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
}




.hidden {
  display: none !important;
}



/* ===============================
   LOGO VISIBILITY FIX (ONLY)
================================ */

.site-header .brand img {
  background: #ffffff;                 /* clean white base */
  padding: 6px;                        /* breathing space */
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); /* subtle contrast */
  border: 1px solid rgba(0,0,0,0.08);    /* soft outline */
}


/* =====================================
   LOGO VISIBILITY + RESPONSIVE FIX
   (NO layout or structure changes)
===================================== */

.site-header .brand {
  align-items: center;
}

.site-header .brand img {
  background: #ffffff;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.12);

  /* RESPONSIVE SIZE CONTROL */
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);

  object-fit: contain;
}

/* Mobile-specific clarity */
@media (max-width: 600px) {
  .site-header .brand img {
    width: 56px;
    height: 56px;
    padding: 10px;
  }
}

/* Very small screens */
@media (max-width: 400px) {
  .site-header .brand img {
    width: 52px;
    height: 52px;
    padding: 10px;
  }
}




/* =====================================
   FOOTER MOBILE RESPONSIVE FIX
   (SAFE – ONLY FOOTER)
===================================== */

/* Default footer grid improvement */
.footer-grid {
  align-items: flex-start;
}

/* Tablet & below */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

/* Mobile view */
@media (max-width: 600px) {
  .site-footer {
    padding: 2rem 1rem;
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .site-footer h4 {
    margin-bottom: 0.5rem;
  }

  .site-footer ul {
    padding: 0;
    list-style: none;
  }

  .site-footer li {
    margin-bottom: 0.4rem;
  }

  .site-footer a {
    display: inline-block;
    padding: 0.25rem 0;
  }

  .copyright {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
  }
}







/* =====================================
   CLIENT LOGOS – PRO LOOK (SAFE UPGRADE)
===================================== */

.client-list.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.client-list.logos li {
  background: #ffffff;
  border: 1px solid #f0e4db;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 90px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.client-list.logos li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.client-list.logos img {
  max-width: 120px;
  max-height: 50px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: 0.3s ease;
}

.client-list.logos li:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Mobile friendly */
@media (max-width: 600px) {
  .client-list.logos {
    gap: 1.2rem;
  }

  .client-list.logos li {
    min-width: 140px;
    min-height: 80px;
    padding: 0.8rem 1rem;
  }

  .client-list.logos img {
    max-width: 100px;
    max-height: 45px;
  }
}


/* =========================
   MULTI IMAGE PRODUCT CARD
========================= */

.product-gallery {
  width: 100%;
}

.product-gallery .main-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 10px;
}

/* Thumbnails */
.thumb-container {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: 0.25s ease;
}

.thumb:hover,
.thumb.active {
  opacity: 1;
  border-color: #d4af37;
}

/* Mobile */
@media (max-width: 600px) {
  .product-gallery .main-img {
    height: 200px;
  }

  .thumb {
    width: 48px;
    height: 48px;
  }
}











/* ===== SIMPLE MOBILE GALLERY ===== */
.mobile-gallery {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  z-index: 99999;
  padding: 1rem;
  overflow-y: auto;
}

.mobile-gallery .close {
  position: fixed;
  top: 15px;
  right: 20px;
  font-size: 34px;
  color: #fff;
  cursor: pointer;
  z-index: 100000;
}

.mobile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 60px;
}

.mobile-gallery-grid img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  background: #fff;
}

/* Desktop: do nothing */
@media (min-width: 768px) {
  .mobile-gallery {
    display: none !important;
  }
}








/* ===== FULL IMAGE VIEWER ===== */
.image-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  z-index: 100000;
  justify-content: center;
  align-items: center;
}

.image-viewer img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
}

.image-viewer .close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}





.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 10px;
}

.lightbox .close {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

.lightbox .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 44px;
  color: white;
  cursor: pointer;
  user-select: none;
}

.lightbox .left { left: 5%; }
.lightbox .right { right: 5%; }

/* Mobile: hide arrows, tap image instead */
@media (max-width: 768px) {
  .lightbox .nav {
    display: none;
  }
}