:root{
  --bg:#05070b;
  --panel:#0b1220;
  --panel2:#0b1426;
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);
  --text:#eaf1ff;
  --muted:#a8b6d2;
  --gold:#f2b21c;
  --gold2:#ffd36a;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -140px, rgba(242,178,28,.15), transparent 60%),
    radial-gradient(900px 520px at 10% 0%, rgba(130,170,255,.12), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(130,170,255,.10), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* ================= NAVBAR (SHORTER) =================
   Keep logo size, reduce all vertical padding and text line-height.
*/
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.40));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 0;            /* reduced more */
  gap:12px;                  /* tighter */
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  padding:4px 8px;           /* reduced more */
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.brand-logo{
  height:64px; width:auto; display:block;   /* unchanged */
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.brand-text{line-height:1.02}
.brand-name{font-weight:900; letter-spacing:.2px; font-size:14px}
.brand-sub{margin-top:2px; color:var(--muted); font-size:11.5px}

.nav-cta{
  display:flex; align-items:center;
  gap:8px;                   /* tighter */
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:8px 12px;          /* reduced more */
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  font-weight:900;
  font-size:12.5px;
  line-height:1;
  white-space:nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.btn:hover{border-color: rgba(255,255,255,.22); transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn-gold{
  border-color: rgba(242,178,28,.55);
  background: linear-gradient(180deg, rgba(242,178,28,.22), rgba(242,178,28,.12));
}
.btn-ghost{background: rgba(0,0,0,.18)}

/* ================= GENERAL ================= */
.toast{
  margin: 18px 0 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.toast.ok{border-color: rgba(0,255,170,.20)}
.toast.bad{border-color: rgba(255,90,90,.25)}

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.card-soft{
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

/* ================= HERO ================= */
.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  margin: 16px 0 18px;
  align-items:stretch;
}

.hero-copy{padding:18px 18px 16px}

.kicker{
  display:flex; align-items:center; gap:10px;
  color: var(--muted);
  font-weight:900;
  text-transform: uppercase;
  font-size:11.5px;
  letter-spacing:.6px;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(242,178,28,.15);
}

.h1{
  margin: 12px 0 8px;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: .2px;
}
.gold{color: var(--gold); text-shadow: 0 12px 40px rgba(242,178,28,.18)}
.lead{margin: 10px 0 14px; color: rgba(234,241,255,.88); font-size: 15.5px; line-height: 1.45}

.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 14px}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,241,255,.9);
  font-weight:900;
  font-size: 12.5px;
}
.pill-dot{width:8px;height:8px;border-radius:999px;background:var(--gold)}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px}
.micro{margin-top: 10px; color: rgba(168,182,210,.95); font-weight:900; font-size:12.5px}

/* Brad/Jimmy image fills box */
.hero-media{
  padding:0;
  overflow:hidden;
  display:flex;
  min-height: 340px;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

/* ================= 4 CTA GRID ================= */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin: 18px 0;
}
.svc{padding:16px 16px 14px}
.svc-top h2{margin:0; font-size:18px; letter-spacing:.2px}
.svc-sub{margin-top:6px; color: var(--muted); font-weight:800; font-size:12.5px}
.svc-list{margin: 12px 0 14px; padding:0 0 0 18px; color: rgba(234,241,255,.9)}
.svc-list li{margin: 7px 0; line-height: 1.35}
.svc-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.svc-note{color: rgba(168,182,210,.95); font-weight:900; font-size:12.5px}

/* ================= SECTIONS ================= */
.section{padding:16px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.section-head h2{margin:0; font-size:18px}
.muted{color: var(--muted)}
.small{font-size:12.5px}

.before-after{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top: 14px;
}
.before-after figure{margin:0; position:relative; overflow:hidden; border-radius: 14px; border:1px solid rgba(255,255,255,.10)}
.before-after img{width:100%; height:320px; object-fit:cover; display:block}
.tag{
  position:absolute; top:12px; left:12px;
  padding:8px 10px;
  border-radius: 10px;
  font-weight:950;
  letter-spacing:.6px;
  font-size:12px;
  border: 1px solid rgba(255,255,255,.15);
}
.tag.before{background: rgba(255, 80, 80, .24)}
.tag.after{background: rgba(0, 255, 170, .18)}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top: 14px;
}
.g{display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10)}
.g img{width:100%; height:160px; object-fit:cover; display:block; transition: transform .2s ease}
.g:hover img{transform: scale(1.03)}

.mini-note{
  margin-top: 12px;
  color: rgba(168,182,210,.95);
  font-weight:800;
  font-size:12.5px;
}

.request-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  margin-top: 14px;
}
.form label{display:block; margin-bottom:12px}
.form span{display:block; margin-bottom:7px; color: rgba(234,241,255,.90); font-weight:900; font-size:12.5px}
.form input,.form select,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline:none;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color: rgba(242,178,28,.55)}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.row-actions{grid-template-columns: 1fr 1fr}
.hp{position:absolute; left:-9999px; top:-9999px}

.contact{padding:16px}
.contact-title{font-weight:950; letter-spacing:.3px; font-size:16px; margin-bottom:12px}
.contact-lines{display:grid; gap:10px; margin-bottom:12px}
.line{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.who{color: var(--gold2); font-weight:950; letter-spacing:.6px}
.num{font-weight:950; font-size:18px}

.qrbox{
  margin: 12px 0 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-align:center;
}
.qrhead{font-weight:950; color: var(--gold2); margin-bottom:10px}
.qr{width:220px; height:220px; border-radius: 14px; border:1px solid rgba(255,255,255,.14)}
.qrfoot{margin-top:10px; color: rgba(168,182,210,.95); font-weight:950}

.foot{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 22px 0 34px;
  color: rgba(168,182,210,.95);
  font-weight:900;
}

@media (max-width: 980px){
  .hero{grid-template-columns: 1fr}
  .h1{font-size: 38px}
  .grid-2{grid-template-columns: 1fr}
  .before-after{grid-template-columns: 1fr}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .request-grid{grid-template-columns: 1fr}
  .hero-media{min-height: 300px}
}
@media (max-width: 560px){
  .wrap{padding:0 14px}
  .brand-logo{height:58px} /* still strong on mobile */
  .h1{font-size: 34px}
  .gallery{grid-template-columns: 1fr}
  .row{grid-template-columns: 1fr}
  .row-actions{grid-template-columns: 1fr}
}