/* style.css — responsive layout and simple animations */
:root{
  --accent:#1976d2;
  --accent-2:#0b6fb3;
  --muted:#666;
  --bg:#d4e7fa;
  --card:#fff;
  --radius:12px;
  --max-width:1100px;
  --gap:1rem;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-size:16px;
  color:#222;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-header{background:#fff;border-bottom:1px solid #e6eef6;position:sticky;top:0;z-index:1000}
.logo{font-weight:700;text-decoration:none;color:var(--accent);font-size:1.25rem}
.logo span{color:#222}
#nav-toggle{display:none;background:none;border:0;font-size:1.4rem;padding:0.25rem}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem;align-items:center}
.main-nav a{display:inline-block;padding:0.6rem 0.8rem;text-decoration:none;color:#333;border-radius:8px}
.main-nav a:hover,.main-nav a:focus{background:#eef6ff;color:var(--accent)}
.main-nav .cta{background:var(--accent);color:#fff;padding:0.6rem 0.9rem}
.hero{padding:2rem 0;background:linear-gradient(180deg,#ffffff00,#f4fbff)}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:center}
.hero-text h1{font-size:1.9rem;margin:0 0 .5rem}
.hero-text p{margin:0 0 1rem;color:var(--muted)}
.hero-image img{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 20px rgba(20,50,80,0.08)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:10px;text-decoration:none}
.hero-highlights{margin-top:.75rem;color:var(--muted);font-size:.95rem}
.features{padding:2rem 0}
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 18px rgba(20,50,80,0.04)}
.services-list{display:flex;flex-wrap:wrap;gap:.75rem;padding:0;list-style:none}
.services-list li{background:#fff;padding:.5rem .75rem;border-radius:10px;box-shadow:0 4px 10px rgba(22,55,85,0.03)}

.features h2, .quick-services h2, .services-page h1 {margin-top:0}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.service-card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 8px 22px rgba(18,40,80,0.04)}

/* Booking */
.booking-grid{display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start}
.booking-form{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 10px 28px rgba(20,50,80,0.06)}
.booking-form label{display:block;margin-top:.75rem;font-weight:600}
.booking-form input, .booking-form textarea{width:100%;padding:.6rem;border:1px solid #e6eef6;border-radius:8px;margin-top:.25rem}
.contact-card{background:linear-gradient(180deg,#fff,#f6fbff);padding:1rem;border-radius:10px;box-shadow:0 8px 22px rgba(18,40,80,0.03)}
.form-error{color:#b00020;margin-top:.75rem}

/* Footer */
.site-footer{background:#ffffff;border-top:1px solid #e6eef6;padding:1.25rem 0;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.copyright{border-top:1px solid #f0f6fb;margin-top:.75rem;padding-top:.75rem;text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-image{order:-1}
  .feature-cards{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .booking-grid{grid-template-columns:1fr}
  .header-inner{align-items:center}
}

/* Mobile nav */
@media (max-width:720px){
  #nav-toggle{display:block}
  .main-nav{position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid #e6eef6;display:none;padding:1rem}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:.5rem}
  .feature-cards{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* small animations */
.card, .service-card, .booking-form, .contact-card{transform:translateY(0);transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .45s}
.reveal{transform:translateY(-6px)}