:root {
  --fg:#f9fafb;           /* light text */
  --bg:#111827;           /* dark background */
  --muted:#9ca3af;        /* muted grey */
  --card:#1f2937;         /* dark grey for cards/sections */
  --accent:#f97316;       /* orange accent */
}

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

/* Header + logo */
.site-header { text-align:center; padding: 24px 16px 8px }
.logo {
  display:block;
  margin:0 auto 8px;
  width: min(560px, 85vw);     /* bigger logo */
  height:auto;
}
h1 {
  font-size: clamp(1.1rem, 2.2vw + .8rem, 1.6rem);
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

/* Sections */
main section { padding: 28px 16px }
h2 { font-size: clamp(1.2rem, 2.4vw + .8rem, 1.6rem); margin: 0 0 12px }

/* Services */
.service-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px }
.service {
  background: var(--card);
  border-radius: 14px;
  padding: 14px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Polished gallery */
.polished-gallery { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:20px }
.gallery-pair {
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  text-align: center;
}
.gallery-pair h3 { margin: 0 0 12px; font-size: 1.1rem; color: var(--accent) }

.pair-images { display:grid; grid-template-columns: 1fr 1fr; gap:10px }
.pair-images figure { margin:0 }
.pair-images img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
.pair-images figcaption { font-size: 0.9rem; margin-top: 4px; color: var(--muted) }

/* Old simple grid (kept in case any single images exist) */
.gallery-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px }
.gallery-grid img { width:100%; height:auto; border-radius:10px; display:block }

.hint { color: var(--muted); font-size: .95rem }

/* Contact */
.contact-form { display:grid; gap:10px; max-width:460px; margin:12px auto 0 }
.contact-form input, .contact-form textarea {
  border:1px solid #374151;
  border-radius:10px;
  padding:12px 14px;
  font-size:1rem;
  background:#111827;
  color:#f9fafb;
}
.contact-form button {
  border:none; border-radius:10px; padding:12px 14px;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
}
.contact-form button:hover { opacity:.9 }

/* Footer */
.site-footer {
  background: var(--card);
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
}

/* Thank-you page helper */
.thankyou { max-width:720px; margin:80px auto; text-align:center; padding:0 16px }
.btn { display:inline-block; background:var(--accent); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none }

/* Responsive tweaks */
@media (max-width: 640px) {
  .logo { width: min(92vw, 620px); }          /* nice and big on phones */
  .site-header { padding: 20px 12px 6px; }
  .polished-gallery { grid-template-columns: 1fr; }
  .gallery-pair { max-width: 480px; margin: 0 auto; padding: 12px; }
  .pair-images { grid-template-columns: 1fr; gap: 8px; }
  .pair-images img { max-height: 230px; object-fit: cover; }  /* keep mobile images tidy */
}

@media (min-width: 900px) { main section { padding: 36px 24px } }

/* Subtle animations */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform }
  .reveal.is-visible { opacity:1; transform: none }

  .service, .gallery-pair { transition: transform .25s ease, box-shadow .25s ease }
  .service:hover, .gallery-pair:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.35) }

  .pair-images img, .gallery-grid img { transition: transform .25s ease }
  .pair-images figure:hover img, .gallery-grid a:hover img { transform: scale(1.015) }

  .btn, .contact-form button { transition: transform .15s ease, opacity .2s ease }
  .btn:hover, .contact-form button:hover { transform: translateY(-1px) }
  .btn:active, .contact-form button:active { transform: translateY(0); opacity: .9 }

  .site-header .logo, .site-header h1 { opacity:0; transform: translateY(6px); animation: fadeUp .6s ease .1s forwards }
  .site-header h1 { animation-delay: .2s }
  @keyframes fadeUp { to { opacity:1; transform:none } }
}