:root{
  --accent:#ef7a1a;
  --accent-dark:#cf600f;
  --dark:#111213;
  --muted:#676a6d;
  --card:#ffffff;
  --bg:#faf9f7;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    linear-gradient(180deg, rgba(245,244,241,1), rgba(250,249,247,1));
  color:var(--dark);
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  align-items:stretch;
  gap:8px;
  padding-bottom:18px;
}

/* Header */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  border-bottom:3px solid rgba(239,122,26,0.08);
  box-shadow:0 6px 20px rgba(14,14,14,0.04);
  border-radius:14px;
  margin:6px 12px 0 12px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:52px;height:52px;object-fit:contain;border-radius:10px;border:2px solid rgba(239,122,26,0.12);padding:6px;background:#fff}
.brand-text .name{font-weight:900;letter-spacing:0.4px;font-size:18px}
.brand-text .tag{font-size:12px;color:var(--muted)}
.menu-btn{
  font-size:20px;
  background:transparent;
  border:0;
  padding:8px;
  width:44px;height:44px;
  border-radius:10px;
}

/* Nav (hidden by default on mobile) */
.nav{
  position:fixed;
  top:80px;
  right:12px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#ffffff,#fffefc);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(12,12,12,0.08);
  padding:8px;
  gap:6px;
  z-index:60;
  transform-origin:top right;
  transition:all .18s cubic-bezier(.2,.9,.2,1);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px) scale(.98);
}
.nav a{
  text-decoration:none;
  color:var(--dark);
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  border-left:3px solid transparent;
}
.nav a:hover{background:#fbf8f6; border-left-color:var(--accent)}
.nav.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}

/* Hero */
.hero{position:relative;height:48vh;min-height:300px;border-radius:14px;margin:12px;overflow:hidden;border:1px solid rgba(0,0,0,0.04)}
/* Mask baked-in text on the left of the hero image and focus image to the right,
   so overlay copy remains the visible text */
.hero::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250,249,247,1) 0%, rgba(250,249,247,0.0) 60%);
  mix-blend-mode: normal;
  z-index: 2;
  border-radius: 0 0 12px 0;
}
/* shift image focus to the right to avoid any baked-in text on the left */
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: right center;
  display:block;
  filter:contrast(1.02) saturate(1.05) brightness(.98);
}
.hero-overlay{
  position:absolute;left:18px;bottom:18px;
  max-width:84%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%);
  color:#fff;padding:18px;border-radius:12px;
  display:flex;flex-direction:column;gap:8px;
  backdrop-filter: blur(4px);
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
}
.hero-overlay h1{margin:0;font-size:22px;line-height:1.02;font-weight:900;letter-spacing:0.2px}
.lead{margin:0;opacity:.95;font-weight:600}
.hero-cta{display:flex;gap:10px;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(14,14,14,0.06)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff;border-color:rgba(0,0,0,0.04)}
.btn.outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.18)}

/* Accent bar under hero */
.hero-accent{
  height:6px;
  width:140px;
  border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  margin-top:6px;
}

/* Sections */
.section-title{margin:6px 0 12px;font-size:16px;font-weight:900;color:var(--dark)}
.card-grid{padding:12px}

/* Section divider */
.section-divider{
  height:22px;
  margin:18px 12px;
  border-radius:12px;
  background:linear-gradient(90deg, rgba(239,122,26,0.06) 0%, rgba(239,122,26,0.16) 30%, rgba(255,255,255,0) 100%);
  box-shadow:0 8px 20px rgba(15,15,15,0.04);
  display:block;
}
@media (min-width:720px){
  .section-divider{height:18px;margin:20px 24px}
}
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
.card{background:var(--card);padding:14px;border-radius:14px;box-shadow:0 14px 36px rgba(12,12,12,0.06);display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,box-shadow .18s ease;border-left:6px solid rgba(239,122,26,0.06)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(12,12,12,0.08);border-left-color:var(--accent)}
.icon{font-size:24px}
.projects{padding:12px}

/* Gallery */
.gallery{padding:12px}
.gallery-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
.thumb{background:transparent;border:0;padding:0;border-radius:12px;overflow:hidden;display:block;cursor:pointer;box-shadow:0 10px 30px rgba(12,12,12,0.04)}
.thumb img{width:100%;height:140px;object-fit:cover;display:block;transition:transform .18s ease}
.thumb:active img,.thumb:focus img,.thumb:hover img{transform:scale(1.03)}
/* Lightbox overlay */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.8);z-index:120;padding:20px;
}
.lightbox img{max-width:100%;max-height:86vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.lightbox .close{position:absolute;right:18px;top:18px;background:rgba(255,255,255,0.06);border:0;color:#fff;padding:10px;border-radius:10px;font-weight:900;cursor:pointer}
.lightbox .caption{position:absolute;left:18px;bottom:18px;color:rgba(255,255,255,0.9);font-weight:700;background:rgba(0,0,0,0.32);padding:8px 12px;border-radius:8px}

/* Reuse existing projects styles */
.projects-row{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.proj{flex:1;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(12,12,12,0.04)}
.proj img{width:100%;height:140px;object-fit:cover;display:block}
.proj figcaption{padding:10px;font-size:13px;color:var(--muted)}

/* About & Contact */
.about{padding:14px;margin:12px;border-radius:14px;background:var(--card);box-shadow:0 12px 30px rgba(10,10,10,0.05)}
.vision-mission{display:flex;flex-direction:column;gap:12px;margin:12px 0}
.vm-block{background:linear-gradient(180deg,#ffffff,#fbf9f7);border-radius:12px;padding:12px;border:1px solid #f3f2f0}
.vm-block h3{margin:0 0 6px 0;font-size:14px;color:var(--dark);font-weight:900}
.vm-block p{margin:0;color:var(--muted);font-size:13px}

.features{display:flex;gap:10px;padding:0;margin:8px 0 0 0;list-style:none;flex-wrap:wrap}
.features li{background:#fff6f1;padding:8px;border-radius:8px;font-weight:700;color:var(--accent)}

/* Contact */
.contact{padding:14px;margin:12px;border-radius:14px;background:var(--card);box-shadow:0 12px 30px rgba(10,10,10,0.05)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:12px}
.contact-info .big{font-weight:900;margin:0 0 8px 0}
.smallnote{margin-top:8px;color:var(--muted);font-size:13px}

/* Responsive tweak: show vision & mission side-by-side on larger screens */
@media (min-width:720px){
  .vision-mission{flex-direction:row}
  .vm-block{flex:1}
}

/* Form */
.contact-form label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.contact-form input,.contact-form textarea,.contact-form select{
  padding:12px;border-radius:12px;border:1px solid #eee;background:#fff;font-size:14px;box-shadow:inset 0 1px 0 rgba(0,0,0,0.02)
}
.form-actions{display:flex;gap:8px;margin-top:8px}
.form-msg{margin-top:8px;color:var(--muted);font-size:13px}

/* Footer */
.site-footer{margin-top:auto;padding:10px 12px;background:transparent}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.mini-cta{margin-left:8px;text-decoration:none;color:var(--accent);font-weight:800}

/* Floating quick-call button */
.float-call{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:80;
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff;
  border:0;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(15,15,15,0.18);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  min-height:48px;
  min-width:48px;
  justify-content:center;
}

/* Responsive */
@media (min-width:720px){
  .nav{position:static;transform:none;opacity:1;pointer-events:auto;flex-direction:row;background:transparent;padding:0;box-shadow:none}
  .menu-btn{display:none}
  .site-header{padding:16px 24px;margin:12px 24px 0 24px}
  .hero{height:56vh}
  .grid{grid-template-columns:repeat(3,1fr)}
  .projects-row .proj img{height:160px}
  .contact-grid{grid-template-columns:1fr 420px}
  .hero-overlay{left:32px;bottom:32px;max-width:52%}
  .hero-overlay h1{font-size:28px}
}