/* ==========================================================================
   AL-BARI GROUP — SHARED DESIGN SYSTEM
   Black + neon green, premium technical/engineering aesthetic.
   Used by: /index.html, /engineering/, /automotive-restoration/, /media/, /calculator/
   ========================================================================== */

:root{
  --bg:#0A0A0A;
  --bg-alt:#101010;
  --surface:#161616;
  --surface-2:#1C1C1C;
  --border:#2A2A2A;
  --border-lime:#1F4D1F;
  --lime:#39FF14;
  --lime-deep:#25b30d;
  --lime-dim:#1c6e0c;
  --white:#F6F6F6;
  --muted:#9C9C9C;
  --muted-2:#6B6B6B;
  --radius:3px;
  --grid-line: rgba(57,255,20,0.055);
  --maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;}
.mono{font-family:'JetBrains Mono',monospace;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;line-height:1.08;letter-spacing:-0.015em;font-optical-sizing:auto;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ---------- background texture ---------- */
.blueprint-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 85%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 85%);
  pointer-events:none;
}
.glow-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.16;background:var(--lime);pointer-events:none;}

/* ---------- corner brackets (signature element) ---------- */
.bracket-frame{position:relative;}
.corner{position:absolute;width:14px;height:14px;pointer-events:none;transition:width .25s ease,height .25s ease;}
.corner.tl{top:-1px;left:-1px;border-top:2px solid var(--lime-dim);border-left:2px solid var(--lime-dim);}
.corner.tr{top:-1px;right:-1px;border-top:2px solid var(--lime-dim);border-right:2px solid var(--lime-dim);}
.corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--lime-dim);border-left:2px solid var(--lime-dim);}
.corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--lime-dim);border-right:2px solid var(--lime-dim);}
.bracket-frame:hover .corner{width:20px;height:20px;border-color:var(--lime);}

/* ---------- eyebrow / dimension divider ---------- */
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:0.18em;color:var(--lime);
  text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--lime);}
.dim-divider{display:flex;align-items:center;gap:16px;margin:96px 0 56px;}
.dim-divider .dim-line{flex:1;height:1px;background-image:linear-gradient(90deg,var(--border) 0 6px, transparent 6px 12px);background-size:12px 1px;}
.dim-divider .dim-label{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.14em;color:var(--muted-2);white-space:nowrap;text-transform:uppercase;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.09em;text-transform:uppercase;
  border-radius:var(--radius);transition:transform .15s ease, box-shadow .15s ease, background .15s ease,border-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--lime);color:#0A0A0A;font-weight:600;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(57,255,20,0.25);}
.btn-ghost{border:1px solid var(--border);color:var(--white);}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.btn-arrow{transition:transform .15s ease;}
.btn:hover .btn-arrow{transform:translateX(3px);}
.btn-sm{padding:11px 20px;font-size:11.5px;}

/* ---------- domain tag pill (shows which business unit you're in) ---------- */
.domain-tag{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--border-lime);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);
  border-radius:20px;
}
.domain-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);}

/* ---------- header / nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:500;background:rgba(10,10,10,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:88px;gap:20px;}
.logo{display:flex;align-items:center;gap:12px;font-family:'Fraunces',serif;font-size:20px;letter-spacing:0.01em;font-weight:600;}
.logo .mark{width:auto;height:48px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 6px rgba(57,255,20,0.55)) drop-shadow(0 0 16px rgba(57,255,20,0.28));transition:filter .2s ease;}
.logo:hover .mark{filter:drop-shadow(0 0 9px rgba(57,255,20,0.75)) drop-shadow(0 0 22px rgba(57,255,20,0.4));}
.founder-card{display:flex;flex-direction:column;gap:20px;border:1px solid var(--border);background:var(--surface);padding:30px;}
.founder-card .f-top{display:flex;gap:24px;align-items:flex-start;}
.founder-card img{width:104px;height:104px;object-fit:cover;border:1px solid var(--border-lime);flex-shrink:0;}
.founder-card .f-role{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--lime);margin-bottom:8px;}
.founder-card h4{font-size:19px;margin-bottom:8px;}
.founder-card .f-credentials{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:0.03em;text-transform:uppercase;}
.founder-card p.f-bio{color:var(--muted);font-size:13.3px;}
.founder-quote{border-left:2px solid var(--lime);padding:2px 0 2px 18px;}
.founder-quote p{color:var(--white);font-size:13.8px;font-style:italic;line-height:1.65;}
.founder-quote .fq-attr{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:0.06em;font-style:normal;}
.leadership-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch;}
@media (max-width:760px){.leadership-grid{grid-template-columns:1fr;}.founder-card .f-top{flex-direction:column;}.founder-card img{width:100%;height:220px;}}
.founder-strip{display:flex;align-items:center;gap:14px;margin-top:18px;width:fit-content;}
.founder-strip:hover .fs-text{color:var(--lime);}
.founder-strip:hover img{border-color:var(--lime);}
.founder-strip img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--border-lime);}
.founder-strip .fs-text{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.founder-strip .fs-text b{color:var(--lime);font-weight:600;}
.hero-photo{position:relative;overflow:hidden;}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.55) 100%), linear-gradient(90deg, rgba(10,10,10,0.35) 0%, transparent 30%);pointer-events:none;}
.logo .sub{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.15em;color:var(--muted-2);font-weight:400;text-transform:uppercase;margin-top:2px;}
nav.primary{display:flex;align-items:center;gap:2px;}
nav.primary a.nav-link, nav.primary button.nav-link{
  padding:10px 15px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;
}
nav.primary a.nav-link:hover, nav.primary button.nav-link:hover{color:var(--white);}
nav.primary a.nav-link.active{color:var(--lime);border-color:var(--lime);}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-phone{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);display:flex;}
.burger{display:none;width:26px;height:20px;position:relative;flex-direction:column;justify-content:space-between;}
.burger span{display:block;height:2px;background:var(--white);width:100%;}

/* domain switcher dropdown */
.domain-switch{position:relative;}
.domain-switch>button{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--white);
}
.domain-switch>button:hover{border-color:var(--lime);}
.domain-switch .caret{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin-top:-3px;}
.domain-menu{
  position:absolute;top:calc(100% + 10px);right:0;background:var(--surface);border:1px solid var(--border);
  min-width:250px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;
}
.domain-switch.open .domain-menu{opacity:1;visibility:visible;transform:translateY(0);}
.domain-menu a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-bottom:1px solid var(--border);}
.domain-menu a:last-child{border-bottom:none;}
.domain-menu a:hover{background:var(--surface-2);}
.domain-menu a .dm-name{font-family:'Fraunces',sans-serif;font-size:14px;font-weight:600;}
.domain-menu a .dm-name .lime{color:var(--lime);}
.domain-menu a .dm-desc{font-size:11.5px;color:var(--muted-2);}

@media (max-width:980px){
  nav.primary{display:none;}
  .nav-phone{display:none;}
  .burger{display:flex;}
}
.mobile-menu{display:none;flex-direction:column;background:var(--bg-alt);border-bottom:1px solid var(--border);}
.mobile-menu.open{display:flex;}
.mobile-menu a, .mobile-menu button{padding:16px 32px;text-align:left;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border);}
.mobile-menu a.active{color:var(--lime);}

main{padding-top:88px;}
section{position:relative;}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding:76px 0 58px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.page-hero h1{font-size:clamp(32px,4.4vw,54px);margin-bottom:16px;}
.page-hero p{color:var(--muted);max-width:600px;font-size:15.5px;}
.breadcrumb{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted-2);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:18px;}
.breadcrumb .lime{color:var(--lime);}

/* ---------- section headers ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(27px,3.3vw,38px);max-width:640px;}
.section-head .sub{color:var(--muted);max-width:420px;font-size:14.5px;}

/* ---------- stat strip ---------- */
.stat-strip{display:grid;border:1px solid var(--border);}
.stat-strip .stat{padding:28px 24px;border-right:1px solid var(--border);}
.stat-strip .stat:last-child{border-right:none;}
.stat-strip .n{font-family:'JetBrains Mono',monospace;font-size:30px;color:var(--lime);margin-bottom:6px;}
.stat-strip .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;font-family:'JetBrains Mono',monospace;}

/* ---------- service / capability cards ---------- */
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--border);border:1px solid var(--border);}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);border:1px solid var(--border);}
.svc-card{background:var(--bg);padding:38px;position:relative;transition:background .2s ease;}
.svc-card:hover{background:var(--surface);}
.svc-card .s-icon{width:42px;height:42px;color:var(--lime);margin-bottom:22px;}
.svc-card h3{font-size:19px;margin-bottom:12px;}
.svc-card p.s-desc{color:var(--muted);font-size:13.8px;margin-bottom:20px;}
.svc-card ul{border-top:1px solid var(--border);padding-top:16px;}
.svc-card ul li{font-family:'JetBrains Mono',monospace;font-size:11.8px;color:var(--muted);letter-spacing:0.02em;padding:6px 0;display:flex;gap:10px;align-items:baseline;}
.svc-card ul li::before{content:"—";color:var(--lime);flex-shrink:0;}
@media (max-width:900px){.card-grid-2{grid-template-columns:1fr;}.card-grid-3{grid-template-columns:1fr;}}

/* ---------- gallery / project cards ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:44px 0 12px;}
.filter-btn{padding:10px 20px;border:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);transition:all .15s ease;}
.filter-btn.active,.filter-btn:hover{border-color:var(--lime);color:var(--lime);}
.filter-count{color:var(--muted-2);font-family:'JetBrains Mono',monospace;font-size:12px;margin-bottom:24px;}

.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:920px){.proj-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.proj-grid{grid-template-columns:1fr;}}
.proj-card{background:var(--surface);border:1px solid var(--border);transition:border-color .2s ease,transform .2s ease;cursor:pointer;}
.proj-card:hover{border-color:var(--border-lime);transform:translateY(-4px);}
.proj-thumb{aspect-ratio:4/3;background:var(--bg-alt);position:relative;overflow:hidden;border-bottom:1px solid var(--border);}
.proj-thumb svg,.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.proj-badge{position:absolute;top:12px;left:12px;background:rgba(10,10,10,0.85);border:1px solid var(--border-lime);color:var(--lime);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;padding:5px 10px;text-transform:uppercase;}
.proj-body{padding:19px 21px 22px;}
.proj-body h3{font-size:16px;margin-bottom:8px;}
.proj-meta{display:flex;gap:14px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:0.03em;}

/* ---------- modal / lightbox ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(5,5,5,0.88);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:80px 20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border-lime);max-width:780px;width:100%;position:relative;}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);z-index:5;background:var(--bg);}
.modal-close:hover{color:var(--lime);border-color:var(--lime);}
.modal-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2px;background:var(--border);}
.modal-gallery svg,.modal-gallery img{width:100%;height:100%;object-fit:cover;display:block;}
.modal-gallery > div:first-child{grid-row:span 2;aspect-ratio:1/1;overflow:hidden;}
.modal-gallery > div{aspect-ratio:1/1;overflow:hidden;background:var(--bg-alt);}
.modal-content{padding:30px 34px 36px;}
.modal-content h3{font-size:22px;margin-bottom:6px;}
.modal-content .modal-meta{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 20px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--lime);text-transform:uppercase;letter-spacing:0.05em;}
.modal-content p.desc{color:var(--muted);font-size:14.3px;}
.modal-specs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border);}
.modal-specs .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}
.modal-specs .val{font-size:13.8px;}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:920px){.review-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.review-grid{grid-template-columns:1fr;}}
.review-card{border:1px solid var(--border);padding:26px;background:var(--surface);}
.stars{color:var(--lime);font-size:13px;letter-spacing:2px;margin-bottom:14px;}
.review-card p.quote{font-size:14px;color:var(--white);margin-bottom:18px;line-height:1.6;}
.review-who{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);padding-top:14px;}
.review-who .name{font-family:'Fraunces',sans-serif;font-weight:600;font-size:13.5px;}
.review-who .proj{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);text-transform:uppercase;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:64px 0;text-align:center;margin:96px 0 0;}
.cta-band h2{font-size:clamp(24px,3vw,36px);margin-bottom:12px;}
.cta-band p{color:var(--muted);margin-bottom:28px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border);background:var(--bg-alt);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-grid h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--muted-2);text-transform:uppercase;margin-bottom:18px;}
.footer-grid ul li{margin-bottom:11px;}
.footer-grid ul li a, .footer-grid ul li button{color:var(--muted);font-size:13.5px;transition:color .15s ease;}
.footer-grid ul li a:hover, .footer-grid ul li button:hover{color:var(--lime);}
.footer-brand p{color:var(--muted);font-size:13.5px;max-width:280px;margin-top:14px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- form elements ---------- */
.form-box{background:var(--surface);border:1px solid var(--border);padding:38px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.form-field{margin-bottom:18px;}
.form-field.full{grid-column:1/-1;}
label{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
input,select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--white);
  padding:13px 14px;font-size:14px;border-radius:var(--radius);transition:border-color .15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--lime);outline:none;}
textarea{resize:vertical;min-height:100px;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239C9C9C'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.form-note{font-size:12px;color:var(--muted-2);margin-top:14px;}
.form-success{display:none;border:1px solid var(--border-lime);background:rgba(57,255,20,0.06);padding:20px;margin-top:18px;font-size:13.5px;color:var(--lime);}
.form-success.show{display:block;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}

.page-section{padding:0 0 40px;}

.page{display:none;}
.page.active{display:block;}

/* ---------- generic responsive helpers ---------- */
@media (max-width:640px){
  .wrap{padding:0 20px;}
}