/* styles.css — fixed for contact form + image standardization */
:root{
  --max-width:1100px; --accent:#2b7a78; --muted:#666; --bg:#fff;
  --card-bg:#fafafa; --radius:8px; --gap:18px; --text:#222;
  --cta-bg:#2b7a78; --cta-color:#fff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:#f6f7f8;color:var(--text)}
.wrap{max-width:var(--max-width);margin:0 auto;padding:20px;overflow:visible}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px}
.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.site-logo{height:72px;width:auto;display:block}
.site-title{font-weight:700;font-size:1.6rem;color:var(--accent);line-height:1.2}

/* Location tagline */
.service-area-tagline{text-align:center;margin-top:6px;font-size:0.95rem;color:#444}
.location-note{margin:0;padding:4px 0;font-weight:500}

/* Nav */
.main-nav a{margin-left:14px;color:var(--muted);text-decoration:none;font-weight:600}
.main-nav a:hover{color:var(--text)}

/* Index hero */
.hero{background:linear-gradient(180deg,rgba(43,122,120,0.04),rgba(43,122,120,0.02));padding:28px;border-radius:10px;margin:20px 0}
.hero h2{margin:0 0 8px 0;font-size:1.6rem;color:var(--text)}
.hero p{margin:0 0 12px 0;color:var(--muted)}

/* CTAs */
.cta{display:inline-block;background:var(--cta-bg);color:var(--cta-color);padding:10px 14px;border-radius:6px;text-decoration:none;margin-right:8px;font-weight:700}
.cta.alt{background:#fff;color:var(--cta-bg);border:1px solid var(--cta-bg)}

/* Services grid & thumbnails */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);margin-top:20px}
.services-grid article{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,0.03);display:flex;flex-direction:column}
.services-grid h3{margin:12px;font-size:1rem}
.service-thumb{width:100%;height:200px;object-fit:cover;display:block;border-bottom:1px solid #eee;border-radius:6px 6px 0 0}

/* Service hero wrapper (cropping) */
.service-hero-wrapper{width:100%;max-height:360px;overflow:hidden;border-radius:8px;margin-bottom:18px;background:#ddd}
.service-hero-wrapper.compact{max-height:220px}
.service-hero{width:100%;height:100%;object-fit:cover;display:block}

/* Content */
main.wrap{padding-top:20px;padding-bottom:40px}
main h1{margin-top:8px;font-size:1.6rem}
main p{color:var(--muted);line-height:1.5}

/* Contact form — explicit, defensive rules to prevent layout break */
.contact-form{background:var(--card-bg);padding:16px;border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,0.03);overflow:visible;position:relative;z-index:2}
.contact-form label{display:block;font-weight:600;margin-bottom:6px;color:var(--text)}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea, .contact-form select{
  width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;background:#fff;color:var(--text);font-size:1rem;margin-bottom:12px;box-sizing:border-box;
}
.contact-form textarea{min-height:120px;resize:vertical}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row > *{flex:1 1 220px;min-width:160px}
.contact-form .form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.contact-form .form-actions .cta{margin:0}

/* Footer */
.site-footer{background:#fff;border-top:1px solid #eee;padding:18px 0;margin-top:30px}
.site-footer p{margin:6px 0;color:var(--muted)}

/* Utility & responsive */
.small{font-size:0.95rem;color:var(--muted)}
@media(max-width:900px){
  .service-thumb{height:160px}
  .service-hero-wrapper{max-height:280px}
  .service-hero-wrapper.compact{max-height:160px}
}
@media(max-width:600px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .site-logo{height:60px}
  .site-title{font-size:1.3rem;display:block}
  .services-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .service-thumb{height:140px}
  .form-row{flex-direction:column}
}

/* Service two-column layout */
.service-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
  width: 100%;
  overflow: visible;
}

/* Left image column */
.service-image {
  flex: 0 0 40%;
  max-width: 420px;
  min-width: 220px;
  display: block;
}

/* Image inside left column is cropped and fills area */
.service-image .service-hero {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  background: #ddd;
}

/* Right text column */
.service-content {
  flex: 1 1 0;
  min-width: 0;
}

/* Compact variant for pages that need a smaller image */
.service-row.compact .service-image { flex: 0 0 30%; max-width: 360px; }

/* Responsive: stack on small screens */
@media (max-width: 800px) {
  .service-row { flex-direction: column; gap: 14px; }
  .service-image { flex: 0 0 auto; max-width: none; min-width: 0; }
  .service-image .service-hero { aspect-ratio: 3 / 2; }
}

/* Confirmation message */
.form-confirmation {
  color: #b00020;
  background: #fff5f5;
  border-left: 4px solid #b00020;
  padding: 12px;
  margin-bottom: 12px;
  font-weight: 600;
  display: none;
}
.form-confirmation[hidden] { display: none; }