/* ==========================================================================
   M A BUILDERS & TECHNOLOGIES — Design System
   Palette:  Obsidian #0B1320 / #080E18 · Panel #131F33 · Gold #D4AF37/#C5A059
             Cream #F8F9FA · Charcoal #1C1F26
   Type:     Display — 'Playfair Display'  ·  Body — 'Plus Jakarta Sans'
   Signature: architectural blueprint grid + gold drawing-sheet labels
   ========================================================================== */

:root{
  --obsidian:#0B1320;
  --obsidian-2:#080E18;
  --panel:#131F33;
  --panel-line:#22314d;
  --gold:#D4AF37;
  --gold-2:#C5A059;
  --gold-soft:rgba(212,175,55,.14);
  --cream:#F8F9FA;
  --charcoal:#1C1F26;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  background:var(--obsidian);
  color:var(--white);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.font-display{font-family:'Playfair Display',ui-serif,Georgia,serif;}

::selection{background:var(--gold); color:var(--obsidian);}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--obsidian-2);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-2),var(--gold)); border-radius:6px;}

/* ---------- Blueprint grid signature ---------- */
.blueprint-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(212,175,55,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.09) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, transparent 75%);
  pointer-events:none;
}
.blueprint-corner{
  position:absolute; width:26px; height:26px; border:1.5px solid var(--gold); opacity:.55;
}
.blueprint-corner.tl{top:18px; left:18px; border-right:none; border-bottom:none;}
.blueprint-corner.tr{top:18px; right:18px; border-left:none; border-bottom:none;}
.blueprint-corner.bl{bottom:18px; left:18px; border-right:none; border-top:none;}
.blueprint-corner.br{bottom:18px; right:18px; border-left:none; border-top:none;}

/* Drawing-sheet section label e.g. "DRG. 02 — SERVICES" */
.drg-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:.28em;
  font-size:.7rem;
  font-weight:600;
  color:var(--gold);
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.drg-label::before{
  content:"";
  width:28px; height:1px; background:var(--gold); display:inline-block;
}

/* ---------- Nav ---------- */
#navbar{
  background:rgba(11,19,32,.55);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(212,175,55,.15);
  transition:background .4s ease, box-shadow .4s ease, padding .3s ease;
}
#navbar.scrolled{
  background:rgba(8,14,24,.86);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.nav-link{
  position:relative; font-size:.86rem; letter-spacing:.04em; color:#E7E9EE;
  transition:color .25s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .3s ease;
}
.nav-link:hover{color:var(--gold);}
.nav-link:hover::after{width:100%;}

.btn-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--obsidian-2); font-weight:700;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow:0 6px 20px -6px rgba(212,175,55,.55);
}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 26px -6px rgba(212,175,55,.7);}
.btn-gold:active{transform:translateY(0);}

.btn-outline-gold{
  border:1px solid var(--gold); color:var(--gold); background:transparent;
  transition:all .25s ease;
}
.btn-outline-gold:hover{background:var(--gold-soft); transform:translateY(-2px);}

.btn-whatsapp{
  background:#25D366; color:#08150c; font-weight:700;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 6px 20px -6px rgba(37,211,102,.55);
}
.btn-whatsapp:hover{transform:translateY(-2px); box-shadow:0 10px 26px -6px rgba(37,211,102,.7);}

/* ---------- Hero ---------- */
.hero-bg{
  background-image:linear-gradient(180deg, rgba(8,14,24,.55) 0%, rgba(8,14,24,.78) 55%, rgba(8,14,24,1) 100%), url('../assets/hero/hero-bg.webp');
  background-size:cover; background-position:center 30%;
}
.hero-tagline{
  letter-spacing:.35em;
}
.hero-headline{
  font-family:'Playfair Display',serif;
  line-height:1.05;
}
.text-gold-grad{
  background:linear-gradient(135deg,#F3DE8A,var(--gold) 45%,var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@keyframes fadeUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);} }
.reveal{opacity:0; animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.2s}.d3{animation-delay:.35s}.d4{animation-delay:.5s}.d5{animation-delay:.65s}

@keyframes floatSlow{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float-slow{animation:floatSlow 5s ease-in-out infinite;}

.scroll-cue{
  width:22px; height:36px; border:1.5px solid var(--gold); border-radius:12px; position:relative;
}
.scroll-cue::before{
  content:""; position:absolute; top:6px; left:50%; width:3px; height:8px; background:var(--gold);
  border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{opacity:1; top:6px;} 70%{opacity:0; top:18px;} 100%{opacity:0; top:6px;} }

/* Scroll reveal (JS-triggered) */
.reveal-on-scroll{opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal-on-scroll.in-view{opacity:1; transform:translateY(0);}

/* ---------- Cards / panels ---------- */
.panel{
  background:linear-gradient(180deg, var(--panel), rgba(19,31,51,.7));
  border:1px solid rgba(212,175,55,.14);
}
.glass-card{
  background:rgba(19,31,51,.55);
  border:1px solid rgba(212,175,55,.16);
  backdrop-filter:blur(10px);
}

.service-card{
  position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.25) inset;
}
.service-card .icon-wrap{
  transition:transform .4s ease, background .4s ease;
}
.service-card:hover .icon-wrap{transform:rotate(-6deg) scale(1.06); background:var(--gold);}
.service-card:hover .icon-wrap svg{stroke:var(--obsidian-2);}

/* ---------- Portfolio ---------- */
.filter-btn{
  border:1px solid rgba(212,175,55,.35); color:#cfd6e4;
  transition:all .25s ease;
}
.filter-btn.active, .filter-btn:hover{
  background:var(--gold); color:var(--obsidian-2); border-color:var(--gold);
}

.project-card{
  position:relative; overflow:hidden; cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.project-card img{
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(.92);
}
.project-card:hover img{transform:scale(1.08); filter:saturate(1.05);}
.project-overlay{
  background:linear-gradient(180deg, transparent 30%, rgba(8,14,24,.94) 100%);
  opacity:.85; transition:opacity .4s ease;
}
.project-card:hover .project-overlay{opacity:1;}
.project-tag{
  border:1px solid var(--gold); color:var(--gold); font-size:.66rem; letter-spacing:.12em;
}

.hidden-item{display:none !important;}

/* ---------- Before / After slider ---------- */
.ba-slider{
  position:relative; overflow:hidden; user-select:none; touch-action:pan-y;
  cursor:ew-resize;
}
.ba-slider img{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba-after{position:absolute; inset:0; overflow:hidden;}
.ba-divider{
  position:absolute; top:0; bottom:0; width:2px; background:var(--gold);
  box-shadow:0 0 12px rgba(212,175,55,.8);
}
.ba-handle{
  position:absolute; top:50%; width:44px; height:44px; border-radius:999px;
  background:var(--gold); color:var(--obsidian-2); display:flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%); box-shadow:0 6px 20px rgba(0,0,0,.5); border:2px solid var(--obsidian);
}
.ba-label{
  position:absolute; top:14px; font-size:.68rem; letter-spacing:.14em; padding:4px 10px;
  background:rgba(8,14,24,.7); border:1px solid var(--gold); color:var(--gold); text-transform:uppercase;
}

/* ---------- Lightbox ---------- */
#lightbox{background:rgba(5,9,16,.94); backdrop-filter:blur(6px);}
#lightbox img{box-shadow:0 30px 80px rgba(0,0,0,.6);}

/* ---------- Documents ---------- */
.doc-card{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.doc-card:hover{transform:translateY(-6px); border-color:var(--gold); box-shadow:0 18px 36px -16px rgba(0,0,0,.55);}

/* ---------- Testimonials ---------- */
.stars{color:var(--gold); letter-spacing:2px;}
.testi-track{display:flex; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.testi-slide{flex:0 0 100%;}

/* ---------- Form ---------- */
.field{
  background:rgba(8,14,24,.55); border:1px solid rgba(212,175,55,.25); color:#fff;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field::placeholder{color:#8993a8;}
.field:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.15); outline:none;}

/* ---------- WhatsApp floating badge ---------- */
#wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:60px; height:60px; border-radius:999px; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.55);
  animation:waPulse 2.6s ease-in-out infinite;
}
#wa-float:hover{transform:scale(1.08);}
@keyframes waPulse{
  0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.5), 0 0 0 0 rgba(37,211,102,.5);}
  50%{box-shadow:0 10px 30px rgba(37,211,102,.5), 0 0 0 12px rgba(37,211,102,0);}
}

/* Mobile drawer */
#mobile-drawer{
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  transform:translateX(100%);
}
#mobile-drawer.open{transform:translateX(0);}
#drawer-backdrop{
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
#drawer-backdrop.open{opacity:1; pointer-events:auto;}

/* Utility */
.text-cream{color:var(--cream);}
.bg-cream{background:var(--cream);}
.divider-gold{height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);}

.marquee-wrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);}
.marquee{display:flex; gap:3rem; width:max-content; animation:marquee 28s linear infinite;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* Mobile-first clamps */
h1.hero-headline{font-size:clamp(1.8rem, 6vw, 4.5rem);}
h2.section-title{font-size:clamp(1.6rem, 4vw, 2.75rem);}

@media (max-width: 480px){
  .container-px{padding-left:1.1rem; padding-right:1.1rem;}
}

/* ==========================================================================
   Admin Dashboard additions
   ========================================================================== */
.admin-nav-link{
  display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; border-radius:.65rem;
  color:#aeb6c7; font-size:.86rem; transition:background .2s ease, color .2s ease;
}
.admin-nav-link:hover{background:rgba(212,175,55,.08); color:#fff;}
.admin-nav-link.active-nav{background:var(--gold-soft); color:var(--gold); border:1px solid rgba(212,175,55,.3);}

.status-pill{font-size:.68rem; padding:.2rem .6rem; border-radius:999px; letter-spacing:.02em; white-space:nowrap;}
.status-new{background:rgba(212,175,55,.15); color:var(--gold);}
.status-contacted{background:rgba(96,165,250,.15); color:#93c5fd;}
.status-closed{background:rgba(74,222,128,.15); color:#86efac;}

#admin-mobile-drawer{transform:translateX(-100%); transition:transform .35s ease;}
#admin-mobile-drawer.open{transform:translateX(0);}

/* Portfolio loading skeleton */
.portfolio-skeleton{
  background:linear-gradient(110deg, var(--panel) 8%, #1b2942 18%, var(--panel) 33%);
  background-size:200% 100%;
  animation:skeletonShine 1.6s linear infinite;
  border:1px solid rgba(212,175,55,.1);
}
@keyframes skeletonShine{
  to{ background-position-x:-200%; }
}

/* Admin backend-status badge */
.status-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; padding:.35rem .8rem;
  border-radius:999px; font-weight:600;
}
.status-badge.remote{ background:rgba(74,222,128,.12); color:#86efac; border:1px solid rgba(74,222,128,.3); }
.status-badge.local{ background:rgba(212,175,55,.12); color:var(--gold); border:1px solid rgba(212,175,55,.3); }
.status-dot{ width:7px; height:7px; border-radius:999px; background:currentColor; }