/* ---------- Base ---------- */
:root{
  --brand:#7a1b1b;
  --ink:#0f172a;
  --muted:#3b435a;
  --bg:#ffffff;
  --bg-alt:#f6f7fb;
  --card:#ffffff;
  --accent: #c9a34e;
  --radius:1rem;
  --shadow: 0 10px 30px rgba(2,8,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem;
}

img{max-width:100%;display:block}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #eee;
}

.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.04em}
.brand img{height:38px; width:auto}
.brand span{font-family:Montserrat, sans-serif}

.site-nav{display:flex; align-items:center; gap:1rem}
.site-nav a{color:var(--muted); text-decoration:none; font-weight:600}
.site-nav a:hover{color:var(--ink)}

.btn{
  display:inline-block; padding:.8rem 1.1rem; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:700;
  box-shadow:var(--shadow);
}
.btn:hover{opacity:.95}
.btn--ghost{background:transparent; color:var(--brand); border:2px solid var(--brand)}
.btn--sm{padding:.6rem .9rem; font-size:.9rem}

.btn--review{
  background: #6092e2; /* Google blue */
  font-weight: 500;
}
.btn--review:hover{opacity:.65}

/* mobile nav */
.nav-toggle{display:none}
.burger{display:none; cursor:pointer; padding:.25rem}
.burger span{display:block; width:24px; height:2px; background:#111; margin:6px 0; transition:.2s}

@media (max-width: 900px){
  .burger{display:block}
  .site-nav{position:fixed; inset:64px 0 auto 0; background:#fff; padding:1rem; display:none; flex-direction:column; gap:1rem; border-bottom:1px solid #eee}
  .nav-toggle:checked ~ .site-nav{display:flex}
}

/* ---------- Hero ---------- */
.hero{padding:4rem 0 1rem; background:linear-gradient(180deg,#fff 0%, #f8fafc 100%)}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem}
.grid-3{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem}

.hero h1{font-family:Montserrat, sans-serif; font-size:clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.25rem 0 1rem}
.hero p{font-size:1.15rem; color:var(--muted)}
.hero-ctas{display:flex; gap:1rem; margin:1rem 0 1.25rem}
.badges{list-style:none; padding:0; margin:0; display:flex; gap:1rem; flex-wrap:wrap}
.badges li{padding:.35rem .7rem; background:#fff; border:1px solid #eee; border-radius:999px; font-size:.85rem}

.logo-hero{max-width:420px; margin:auto}

.card{background:var(--card); border-radius:var(--radius); padding:1.25rem}
.shadow{box-shadow:var(--shadow)}

.divider path{fill:#fff}

/* ---------- Sections ---------- */
.section{padding:4rem 0}
.section.alt{background:var(--bg-alt)}
.section-title{font-family:Montserrat, sans-serif; font-size:2rem; margin:0 0 .5rem}
.section-intro{color:var(--muted); margin:0 0 1.5rem}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.cards .card{border:1px solid #eceff4}
.cards h3{margin:.25rem 0 .5rem; font-size:1.1rem}
.cards p{margin:0; color:var(--muted)}

/* ---------- Gallery ---------- */
.gallery{
  display:grid; gap:1rem;
  grid-template-columns:repeat(3, 1fr);
}
.gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.shot {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid #e6ebff;
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
}

.shot figcaption {
  padding: 0.75rem;
  text-align: center;
  font-weight: 600;
  color: #334;
  background: #f9fafb;
}

/* ---------- Process ---------- */
.steps{list-style:none; padding:0; margin:0; display:grid; gap:.75rem}
.steps li{display:flex; align-items:center; gap:.75rem; font-weight:600}
.steps span{display:inline-grid; place-items:center; font-weight:800; height:36px; width:36px; border-radius:50%; background:var(--brand); color:#fff}

.cta-card h3{margin-top:0}

/* ---------- About ---------- */
.about-logo{display:grid; place-items:center}
.about-logo img{max-width:360px}

/* ---------- Contact ---------- */
.contact{scroll-margin-top:72px}
.contact-form label{display:block; font-weight:600; margin:.5rem 0}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%; padding:.8rem 1rem; border-radius:.75rem;
  border:1px solid #dce1ea; background:#fff; font:inherit;
}
.form-actions{display:flex; align-items:center; gap:1rem; margin-top:1rem}
.fineprint{color:var(--muted); font-size:.9rem}

/* ---------- Footer ---------- */
.footer-social {
  text-align: center;
}

.footer-social h4 {
  margin: 0 0 .5rem;
  font-family: Montserrat, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #555;
  transition: all 0.2s ease;
}

.social-links a:hover {
  background: #7a1b1b; /* brand color */
  color: #fff;
  transform: scale(1.1);
}
.site-footer{padding:2rem 0 3rem; border-top:1px solid #eee; background:#fff}
.site-footer .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between}
.brand-mini{display:flex; align-items:center; gap:.5rem}
.brand-mini img{height:26px}

/* ---------- Utilities ---------- */
.grid-2>*, .grid-3>*{min-width:0}
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:100}

@media (max-width: 900px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
}