html{transition:background 0.35s ease}
/* ================================================================
   BLOCKHOUSE DESIGN STUDIO — style.css
   Dark/Light mode via CSS custom properties
   ================================================================ */

/* ── DARK MODE VARIABLES (default) ─────────────────────────────── */
:root {
  --bg-primary:      #000000;
  --bg-secondary:    #060606;
  --bg-card:         #0c0c0c;
  --border-main:     #141414;
  --border-sub:      #1a1a1a;
  --text-primary:    #ffffff;
  --text-secondary:  #999999;
  --text-muted:      #666666;
  --text-dim:        #444444;
  --accent:          #A91D1D;
  --accent-hover:    #8B1616;
  --overlay-box-bg:  rgba(0,0,0,0.50);
  --overlay-box-br:  rgba(255,255,255,0.22);
  --menu-overlay:    rgba(0,0,0,0.65);
  --input-bg:        #0d0d0d;
  --input-border:    #1f1f1f;
  --input-focus:     #333333;
  --toggle-border:   #2a2a2a;
  --shadow:          rgba(0,0,0,0.55);
  --grid-dim:        brightness(0.62);
  --grid-dim-hover:  brightness(0.78);
  color-scheme: dark;
}

/* ── LIGHT MODE VARIABLES ───────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:      #F5F5F5;
  --bg-secondary:    #EAEAEA;
  --bg-card:         #F2F2F2;
  --border-main:     #D5D5D5;
  --border-sub:      #E0E0E0;
  --text-primary:    #1a1a1a;
  --text-secondary:  #555555;
  --text-muted:      #777777;
  --text-dim:        #9a9a9a;
  --accent:          #A91D1D;
  --accent-hover:    #8B1616;
  --overlay-box-bg:  rgba(10,10,10,0.55);
  --overlay-box-br:  rgba(255,255,255,0.30);
  --menu-overlay:    rgba(200,200,200,0.55);
  --input-bg:        #ffffff;
  --input-border:    #D0D0D0;
  --input-focus:     #aaaaaa;
  --toggle-border:   #cccccc;
  --shadow:          rgba(0,0,0,0.12);
  --grid-dim:        brightness(0.70);
  --grid-dim-hover:  brightness(0.85);
  color-scheme: light;
}

/* ── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;font-family:'Montserrat',sans-serif;transition:background 0.35s ease,color 0.35s ease}
img{display:block;max-width:100%}
a{text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── HEADER ─────────────────────────────────────────────────────── */
.main-header{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-primary);height:70px;padding:0 28px;
  border-bottom:1px solid var(--border-main);
  position:sticky;top:0;z-index:100;
  transition:background 0.35s ease,border-color 0.35s ease;
}
.header-left{display:flex;align-items:center;gap:0}
.header-right{display:flex;align-items:center;gap:14px}

/* CSS BDS Logo — no image needed */
.logo-container{
  background:var(--accent);height:70px;width:70px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background 0.3s ease;
}
.logo-container:hover{background:var(--accent-hover)}
.bds-mark{font-size:17px;font-weight:600;letter-spacing:2px;color:#fff;pointer-events:none}

.brand-title{padding-left:20px;border-left:1px solid var(--border-sub)}
.brand-name{font-size:13px;font-weight:400;letter-spacing:5px;text-transform:uppercase;color:var(--text-primary);margin:0;line-height:1}
.brand-name a{color:inherit}

/* Theme toggle */
.theme-toggle{
  background:none;border:1px solid var(--toggle-border);
  color:var(--text-primary);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.3s ease;flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--text-primary)}
.theme-toggle svg{width:15px;height:15px;stroke:var(--text-primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.3s}
.icon-sun{display:none}
.icon-moon{display:block}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}

/* Hamburger */
.menu-toggle-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:8px}
.menu-toggle-btn .bar{width:30px;height:1px;background:var(--text-primary);transition:all 0.3s}

/* ── HOME GRID ───────────────────────────────────────────────────── */
.portfolio-container{padding:14px;max-width:1600px;margin:0 auto;width:100%;height:calc(100vh - 70px);display:flex;box-sizing:border-box}
.portfolio-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(3,1fr)!important;gap:10px!important;width:100%!important;height:100%!important}
.grid-item{
  position:relative;width:100%!important;height:100%!important;aspect-ratio:auto!important;
  background:var(--bg-card);border:1px solid var(--border-sub);
  overflow:hidden;cursor:pointer;display:block;
  transition:border-color 0.4s ease;
}
.grid-item::before{will-change:transform,filter;
  content:'';position:absolute;inset:0;
  background-image:var(--bg-image);background-size:cover;background-position:center;
  filter:var(--grid-dim);
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),filter 0.4s ease;z-index:1;
}
.grid-item::after{
  content:'';position:absolute;bottom:0;left:0;
  width:100%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);z-index:3;
}
.grid-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;padding:20px}
.grid-overlay-box{
  border:1px solid var(--overlay-box-br);background:var(--overlay-box-bg);
  padding:13px 0;width:80%;max-width:220px;
  text-align:center;font-size:11px;font-weight:400;letter-spacing:5px;
  text-transform:uppercase;color:#fff;
  transition:all 0.4s ease;
}
@media(min-width:993px){
  .grid-item:hover::before{transform:scale(1.03);filter:var(--grid-dim-hover)}
  .grid-item:hover::after{transform:scaleX(1)}
  .grid-item:hover{border-color:var(--border-main)}
  .grid-item:hover .grid-overlay-box{border-color:rgba(255,255,255,0.7);background:rgba(0,0,0,0.78);letter-spacing:6px;box-shadow:0 0 18px rgba(255,255,255,0.1)}
}

/* ── OVERLAY & SIDEBAR ───────────────────────────────────────────── */
.menu-overlay{
  position:fixed;inset:0;
  background:var(--menu-overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:999;opacity:0;visibility:hidden;transition:all 0.4s ease;
}
.menu-overlay.active{opacity:1;visibility:visible}
.sidebar-nav{
  position:fixed;top:0;right:-100%;width:35%;min-width:280px;height:100vh;
  background:var(--bg-secondary);z-index:1000;
  transition:right 0.4s cubic-bezier(0.16,1,0.3,1);
  padding:80px 50px;display:flex;flex-direction:column;
  border-left:1px solid var(--border-main);
}
.sidebar-nav.active{right:0}
.nav-links{list-style:none;display:flex;flex-direction:column;gap:25px;margin-top:20px}
.nav-links li{list-style:none!important}
.nav-links li a{color:var(--text-primary);text-decoration:none;font-size:22px;font-weight:300;letter-spacing:1px;transition:all 0.3s}
.nav-links li a:hover{text-shadow:0 0 8px rgba(169,29,29,0.5);color:var(--accent)}
.nav-links li a.contact-link{margin-top:15px;display:inline-block;font-weight:400}

/* ── CONTENT DRAWER ──────────────────────────────────────────────── */
.content-drawer{
  position:fixed;top:0;right:-100%;width:50%;min-width:400px;height:100vh;
  background:var(--bg-primary);z-index:1001;
  transition:right 0.6s cubic-bezier(0.16,1,0.3,1);
  padding:80px;overflow-y:auto;border-left:1px solid var(--border-main);
}
.content-drawer.active{right:0}
.drawer-header{margin-bottom:40px}
.back-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;letter-spacing:2px;font-size:12px;transition:color 0.3s;font-family:'Montserrat',sans-serif}
.back-btn:hover{color:var(--text-primary)}
.drawer-panel[hidden]{display:none!important}
.drawer-content h2{font-size:26px;margin-bottom:20px;font-weight:300;letter-spacing:3px;text-transform:uppercase;color:var(--text-primary)}
.drawer-content p{color:var(--text-secondary);line-height:1.85;margin-bottom:18px;font-size:13px;font-weight:300}
.drawer-content a{color:var(--text-secondary);text-decoration:underline;transition:color 0.2s}
.drawer-content a:hover{color:var(--text-primary)}
/* Stats */
.drawer-stats{display:flex;gap:36px;margin:28px 0 32px;flex-wrap:wrap}
.drawer-stat{display:flex;flex-direction:column;gap:5px}
.stat-num{font-size:34px;font-weight:300;color:var(--text-primary);letter-spacing:-1px;line-height:1}
.stat-label{font-size:10px;letter-spacing:2.5px;color:var(--text-dim);text-transform:uppercase}
/* Process */
.drawer-steps{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:26px}
.drawer-steps li{display:flex;align-items:flex-start;gap:18px}
.step-num{font-size:11px;letter-spacing:2px;color:var(--accent);font-weight:600;min-width:26px;padding-top:2px;flex-shrink:0}
.step-title{display:block;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:5px;letter-spacing:0.8px}
.step-desc{display:block;font-size:13px;color:var(--text-muted);line-height:1.65}
/* Subjects */
.drawer-list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column}
.drawer-list li{display:flex;flex-direction:column;gap:5px;padding:18px 0;border-bottom:1px solid var(--border-main)}
.list-title{font-size:13px;font-weight:500;color:var(--text-primary);letter-spacing:0.8px}
.list-desc{font-size:13px;color:var(--text-muted);line-height:1.65}
/* Values */
.drawer-values{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:22px}
.drawer-values li{display:flex;flex-direction:column;gap:6px}
.val-title{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-weight:600}
.val-desc{font-size:13px;color:var(--text-muted);line-height:1.7}
/* Clients */
.drawer-client-types{list-style:none;padding:0;margin:20px 0 22px;display:flex;flex-direction:column;gap:14px}
.drawer-client-types li{display:flex;align-items:flex-start;gap:14px;font-size:13px;color:var(--text-secondary);line-height:1.55}
.client-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.drawer-cta{display:inline-block;margin-top:10px;border:1px solid var(--toggle-border);padding:12px 28px;color:var(--text-primary)!important;text-decoration:none!important;font-size:11px;letter-spacing:3px;text-transform:uppercase;transition:all 0.3s ease}
.drawer-cta:hover{background:rgba(169,29,29,0.1);border-color:var(--accent);color:var(--accent)!important}

/* ── CATEGORY PAGES ──────────────────────────────────────────────── */
.page-content{padding-top:70px;min-height:100vh}
.category-header{text-align:center;margin-bottom:24px;padding:0 20px}
.category-header h1{font-size:22px;letter-spacing:6px;text-transform:uppercase;color:var(--text-primary);font-weight:400;margin:0}
.image-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1400px;margin:0 auto;padding:0 20px 80px}
.gallery-item{position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--border-sub);display:block;cursor:pointer;transition:border-color 0.3s ease}
.gallery-item::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);z-index:2}
.gallery-item:hover::after{transform:scaleX(1)}
.gallery-item img{width:100%;aspect-ratio:16/9;max-height:calc((100vh - 160px) / 2.3);object-fit:cover;object-position:center;display:block;transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),filter 0.4s ease,opacity 0.35s ease;filter:brightness(0.95);opacity:0.1}
.gallery-item img.loaded{opacity:1}
.gallery-item:hover img{transform:scale(1.04);filter:brightness(1)}
.gallery-item::before{content:'⊕';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.6);font-size:26px;color:rgba(255,255,255,0.8);z-index:3;opacity:0;transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none}
.gallery-item:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ── LIGHTBOX ────────────────────────────────────────────────────── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.97);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease}
.lightbox.active{opacity:1;visibility:visible}
.lb-img-wrap{width:90vw;height:88vh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity 0.18s ease;user-select:none;opacity:1!important}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;opacity:0.55;transition:opacity 0.2s;z-index:1;font-family:'Montserrat',sans-serif}
.lb-close:hover{opacity:1}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:52px;cursor:pointer;line-height:1;width:64px;height:80px;display:flex;align-items:center;justify-content:center;opacity:0.35;transition:opacity 0.2s;z-index:1;font-family:sans-serif}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-prev:hover,.lb-next:hover{opacity:1}
.lb-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:3px;color:#555;font-family:'Montserrat',sans-serif}

/* ── CONTACT FORM PAGE ───────────────────────────────────────────── */
.contact-wrap{max-width:820px;margin:0 auto;padding:0 30px 100px}
.contact-intro{margin-bottom:50px}
.contact-intro p{font-size:14px;color:var(--text-secondary);line-height:1.9;font-weight:300}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:70px}
.contact-info h3{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px}
.contact-info p{font-size:13px;color:var(--text-secondary);line-height:2;font-weight:300}
.contact-info a{color:var(--text-secondary);transition:color 0.2s}
.contact-info a:hover{color:var(--accent)}
.contact-info .social-links{display:flex;gap:16px;margin-top:16px}
.contact-info .social-links a{font-size:15px;color:var(--text-muted);transition:color 0.2s}
.contact-info .social-links a:hover{color:#fff!important;text-shadow:0 0 12px rgba(255,255,255,0.75)}
/* Form */
.enquiry-form h2{font-size:20px;letter-spacing:3px;text-transform:uppercase;color:var(--text-primary);font-weight:300;margin-bottom:30px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.form-group label{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim)}
.form-group input,
.form-group select,
.form-group textarea{
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:var(--text-primary);
  padding:13px 16px;
  font-size:13px;font-family:'Montserrat',sans-serif;font-weight:300;
  outline:none;
  transition:border-color 0.3s ease,background 0.3s ease;
  width:100%;
  -webkit-appearance:none;appearance:none;
  border-radius:0;
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--text-dim)}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--input-focus)}
.form-group select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form-group select option{background:var(--bg-primary);color:var(--text-primary)}
.form-group textarea{resize:vertical;min-height:120px}
.form-submit{
  margin-top:10px;
  background:var(--accent);border:none;
  color:#fff;padding:16px 42px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  font-family:'Montserrat',sans-serif;cursor:pointer;
  transition:background 0.3s ease,transform 0.2s ease;
  display:inline-block;
}
.form-submit:hover{background:var(--accent-hover);transform:translateY(-1px)}
.form-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.form-status{margin-top:18px;font-size:13px;letter-spacing:0.5px;font-weight:300}
.form-status.success{color:#4caf50}
.form-status.error{color:#ef5350}
.required-note{font-size:11px;color:var(--text-dim);margin-top:6px;letter-spacing:1px}

/* ── LEGAL PAGES ─────────────────────────────────────────────────── */
.legal-body{max-width:820px;margin:0 auto;padding:0 30px 100px}
.legal-body h2{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-primary);font-weight:500;margin:36px 0 10px}
.legal-body p,.legal-body li{font-size:13px;color:var(--text-secondary);line-height:1.9;font-weight:300;margin-bottom:10px}
.legal-body ul{padding-left:20px;margin-bottom:14px}
.legal-body a{color:var(--text-secondary);text-decoration:underline;transition:color 0.2s}
.legal-body a:hover{color:var(--text-primary)}
.legal-meta{font-size:11px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;margin-bottom:40px!important}
.legal-body strong{color:var(--text-secondary);font-weight:500}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.main-footer{background:var(--bg-primary);padding:80px 40px 40px;border-top:1px solid var(--border-main);transition:background 0.35s ease}
.footer-columns{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:60px}
.footer-col{flex:1;min-width:180px}
.footer-col h3{font-size:10px;letter-spacing:3px;margin-bottom:22px;color:var(--text-primary);font-weight:500;text-transform:uppercase}
.main-footer ul,.main-footer li{list-style:none!important;padding:0!important;margin:0!important}
.main-footer a,.footer-col p,.footer-col a{color:var(--text-muted)!important;text-decoration:none!important;font-size:13px!important;line-height:2!important;font-weight:300!important;transition:color 0.3s ease}
.footer-col ul li a{display:block}
.main-footer a:hover{color:var(--accent)!important}
address{font-style:normal}
.social-icons{display:flex;gap:18px;margin-top:18px}
.social-icons a{font-size:15px!important;display:inline-flex!important;transition:color 0.3s ease,text-shadow 0.3s ease!important}
.social-icons a:hover{color:#fff!important;text-shadow:0 0 12px rgba(255,255,255,0.75)!important}
.footer-bottom{border-top:1px solid var(--border-main);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:var(--text-dim);font-size:11px;letter-spacing:1px}
.footer-legal a{color:var(--text-dim)!important;margin-left:22px!important;font-size:11px!important}
.footer-legal a:hover{color:var(--text-primary)!important}

/* ── WHATSAPP ────────────────────────────────────────────────────── */
.whatsapp-sticky{position:fixed;bottom:24px;right:24px;background:rgba(15,15,15,0.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12);color:#fff!important;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px!important;box-shadow:0 4px 14px var(--shadow);z-index:998;transition:all 0.3s ease}
.whatsapp-sticky:hover{background:#25D366!important;border-color:#25D366;transform:translateY(-3px);box-shadow:0 8px 20px rgba(37,211,102,0.3)}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:992px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr)!important;grid-template-rows:none!important;height:auto!important}
  .portfolio-container{height:auto!important}
  .grid-item{height:240px!important}
  .sidebar-nav{width:60%}
  .image-gallery-grid{grid-template-columns:repeat(2,1fr)}
  .content-drawer{width:65%;min-width:340px;padding:60px 40px}
  .contact-cols{grid-template-columns:1fr}
}
@media(max-width:768px){
  .brand-title{padding-left:14px}
  .brand-name{font-size:10px;letter-spacing:3px}
  .drawer-stats{gap:22px}
  .stat-num{font-size:28px}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .main-header{height:60px;padding:0 14px}
  .logo-container{height:60px;width:60px}
  .bds-mark{font-size:15px}
  .brand-name{font-size:9px;letter-spacing:2px}
  .portfolio-grid{grid-template-columns:1fr!important;grid-template-rows:none!important;height:auto!important}
  .portfolio-container{height:auto!important;padding:10px;min-height:unset}
  .grid-item{height:200px!important;min-height:200px}
  .sidebar-nav{width:100%;padding:55px 24px}
  .content-drawer{width:100%;min-width:100%;padding:36px 18px}
  .main-footer{padding:50px 18px 30px}
  .image-gallery-grid{grid-template-columns:1fr;gap:10px;padding:0 12px 60px}
  .gallery-item img{aspect-ratio:4/3}
  .lb-prev{left:2px}.lb-next{right:2px}
  .category-header h1{font-size:18px}
  .legal-body,.contact-wrap{padding:0 16px 80px}
  .enquiry-form h2{font-size:17px}
  .contact-info .social-links{margin-top:12px}
}