:root{
  --black:#0A0A0B;
  --black-2:#131417;
  --steel:#1C1F23;
  --steel-line:#2A2E33;
  --blue-hi:#4FA8E8;
  --blue-lo:#1D6FB0;
  --silver:#B9C0C6;
  --silver-dim:#7C838A;
  --white:#F3F5F6;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Barlow', sans-serif;
  background:var(--black);
  color:var(--white);
  line-height:1.5;
}
h1,h2,h3,.brand{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

header{
  background:var(--black-2);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--steel-line);
}
header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-size:17px; font-weight:700; color:var(--white);
  text-decoration:none;
}
.brand img{width:44px; height:44px; border-radius:50%; flex:none;}
nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:20px; justify-content:flex-end;}
nav a{
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:1px;
  text-decoration:none; color:var(--silver);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
}
nav a:hover, nav a.active{color:var(--blue-hi); border-color:var(--blue-hi);}
.nav-toggle{display:none; background:none; border:none; color:var(--white); font-size:26px; cursor:pointer;}

.hero{background:var(--black); border-bottom:1px solid var(--steel-line);}
.hero img{width:100%; height:auto;}

.hero-cta{
  background:var(--black-2); text-align:center; padding:26px 0;
  border-bottom:1px solid var(--steel-line);
}
.btn{
  display:inline-block; font-family:'Oswald',sans-serif; letter-spacing:1px;
  text-decoration:none; padding:13px 30px; border-radius:2px; font-size:14px;
  font-weight:600; transition:transform .15s, box-shadow .15s; border:none; cursor:pointer;
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue-hi),var(--blue-lo));
  color:#08131c;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(79,168,232,.3);}
.btn-ghost{
  border:1.5px solid var(--silver-dim); color:var(--white); margin-left:14px; background:none;
}
.btn-ghost:hover{border-color:var(--blue-hi); color:var(--blue-hi);}
.btn-small{padding:10px 20px; font-size:12.5px;}

.discount-band{
  background:var(--blue-lo); color:var(--white);
  padding:13px 0; text-align:center; font-family:'Oswald',sans-serif;
  letter-spacing:.5px; font-size:14.5px;
}
.discount-band strong{color:#fff;}

section{padding:64px 0;}
.section-head{text-align:center; margin-bottom:40px;}
.section-head .eyebrow{
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:3px;
  color:var(--blue-hi); font-weight:600; margin-bottom:8px;
}
.section-head h2{font-size:clamp(24px,3.5vw,32px); color:var(--white);}

.page-hero{background:var(--black-2); border-bottom:1px solid var(--steel-line); padding:52px 0 44px; text-align:center;}
.page-hero .eyebrow{
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:3px;
  color:var(--blue-hi); font-weight:600; margin-bottom:8px;
}
.page-hero h1{font-size:clamp(28px,4vw,40px); color:var(--white); margin-bottom:12px;}
.page-hero p{color:var(--silver); max-width:640px; margin:0 auto;}

.svc-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
}
.svc-card{
  background:var(--steel); border:1px solid var(--steel-line); border-left:4px solid var(--blue-hi);
  padding:24px 22px; border-radius:4px;
}
.svc-card h3{font-size:17px; color:var(--white); margin-bottom:6px;}
.svc-card .price{
  font-family:'Oswald',sans-serif; color:var(--blue-hi); font-weight:700;
  font-size:15px; margin-bottom:10px;
}
.svc-card p{font-size:14.5px; color:var(--silver);}
.price-note{
  text-align:center; font-size:13.5px; color:var(--silver-dim); margin-top:26px; font-style:italic;
}

.gallery{background:var(--black-2); border-top:1px solid var(--steel-line); border-bottom:1px solid var(--steel-line);}
.gal-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.gal-item{
  aspect-ratio:4/3; border-radius:4px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,var(--steel),#22262b);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--blue-lo);
}
.gal-item img{width:100%; height:100%; object-fit:cover;}
.gal-item span{
  font-family:'Oswald',sans-serif; color:var(--silver); font-size:13px;
  letter-spacing:.5px; text-align:center; padding:0 16px;
}
.gal-item .cap{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color:var(--white); font-family:'Oswald',sans-serif; font-size:12.5px;
  letter-spacing:.5px; padding:18px 10px 8px; text-align:center;
}
.gal-item.placeholder::after{
  content:"PHOTO"; position:absolute; top:8px; right:10px;
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:1px;
  color:var(--blue-hi); opacity:.8;
}
.gal-note{text-align:center; margin-top:24px; font-size:13.5px; color:var(--silver-dim);}

.product-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.product-card{
  background:var(--steel); border:1px solid var(--steel-line); border-radius:4px;
  overflow:hidden; display:flex; flex-direction:column;
}
.product-img{aspect-ratio:4/3; overflow:hidden; background:var(--black-2);}
.product-img img{width:100%; height:100%; object-fit:cover;}
.product-body{padding:20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.product-body h3{font-size:17px; color:var(--white);}
.product-body .price{
  font-family:'Oswald',sans-serif; color:var(--blue-hi); font-weight:700; font-size:15px;
}
.product-body p{font-size:14.5px; color:var(--silver); flex:1;}
.product-body .btn{margin-top:10px; align-self:flex-start;}

.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
}
.founder-photos{display:flex; flex-direction:column; gap:20px;}
.founder-photos figure{margin:0;}
.founder-photos img{border-radius:4px; border:1px solid var(--steel-line); width:100%;}
.founder-photos figcaption{
  margin-top:8px; text-align:center; font-family:'Oswald',sans-serif;
  font-size:12.5px; letter-spacing:.5px; color:var(--silver-dim);
}
.about h2{color:var(--white); font-size:26px; margin-bottom:14px;}
.about p{margin-bottom:14px; color:var(--silver);}
.steps{list-style:none;}
.steps li{
  display:flex; gap:14px; margin-bottom:18px; align-items:flex-start;
}
.steps .num{
  font-family:'Oswald',sans-serif; font-weight:700; color:#08131c;
  background:var(--blue-hi); width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none; font-size:14px;
}
.steps h4{font-size:15px; color:var(--white); margin-bottom:2px;}
.steps p{font-size:14px; color:var(--silver-dim); margin:0;}

.values-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px; margin-top:8px;
}
.value-card{
  background:var(--steel); border:1px solid var(--steel-line); border-radius:4px;
  padding:22px; text-align:center;
}
.value-card h3{font-size:15.5px; color:var(--white); margin-bottom:8px;}
.value-card p{font-size:14px; color:var(--silver);}

.contact{background:var(--black-2); border-top:1px solid var(--steel-line);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
.contact-info div{margin-bottom:22px;}
.contact-info h4{font-family:'Oswald',sans-serif; color:var(--blue-hi); font-size:14px; letter-spacing:1px; margin-bottom:4px;}
.contact-info p{color:var(--silver);}
form{display:flex; flex-direction:column; gap:14px;}
form input, form select, form textarea{
  background:var(--steel); color:var(--white); border:1px solid var(--steel-line);
  padding:12px 14px; border-radius:3px; font-family:'Barlow',sans-serif; font-size:14.5px;
}
form textarea{resize:vertical; min-height:100px;}
form label{font-size:12.5px; letter-spacing:.5px; color:var(--silver-dim); margin-bottom:-8px; font-family:'Oswald',sans-serif;}
form button{
  font-family:'Oswald',sans-serif; letter-spacing:1px; background:linear-gradient(180deg,var(--blue-hi),var(--blue-lo));
  color:#08131c; border:none; padding:13px; font-weight:700; font-size:14.5px; border-radius:3px; cursor:pointer;
  margin-top:6px;
}
form button:hover{filter:brightness(1.08);}
#formMsg{font-size:13.5px; color:var(--blue-hi); display:none;}

footer{
  background:var(--black); color:var(--silver-dim); text-align:center;
  padding:26px 0; font-size:13px; border-top:1px solid var(--steel-line);
}
footer .accent-line{color:var(--blue-hi); font-family:'Oswald',sans-serif; letter-spacing:1px; margin-bottom:6px;}

@media(max-width:760px){
  nav{position:fixed; top:69px; left:0; right:0; background:var(--black-2); flex-direction:column; padding:10px 0; display:none; border-bottom:1px solid var(--steel-line);}
  nav.open{display:block;}
  nav ul{flex-direction:column; align-items:center; gap:16px; padding:14px 0;}
  .nav-toggle{display:block;}
  .about, .contact-grid{grid-template-columns:1fr;}
  .btn-ghost{margin-left:0; margin-top:12px; display:block;}
}