@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root{
  --primary:#2E86AB;
  --secondary:#1B6CA8;
  --accent:#F18F01;
  --bg:#f9f8f6;
  --surface:#fff;
  --text:#1a1a2e;
  --muted:#6b7280;
  --radius:16px;
  --shadow:0 4px 24px rgba(0,0,0,.10);
  --transition:all .3s cubic-bezier(.4,0,.2,1);
}

/* Reset & Global */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:100%;scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* Typography */
h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:1.2;
}
h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:.5em;
}
h3{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,3vw,2rem);
  margin-bottom:.5em;
}
p{margin-bottom:1rem;}
section{padding:4rem 1rem;max-width:1200px;margin:auto;}

/* Sticky Glass Navigation */
.sticky-nav{
  position:sticky;
  top:0;
  z-index:1000;
}
.glass-nav{
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.5rem 1rem;
}
.logo{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,3vw,2rem);
  color:var(--primary);
}
.nav-links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.nav-links a{
  position:relative;
  font-weight:500;
  color:var(--text);
  transition:color .3s;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{
  color:var(--primary);
}
.nav-links a:hover::after{
  transform:scaleX(1);
}

/* Hero Section */
.hero-section{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:-2;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.7));
  z-index:-1;
}
.hero-content h1{
  margin-bottom:.5rem;
}
.hero-content p{
  font-size:clamp(1rem,2.5vw,1.25rem);
  margin-bottom:1.5rem;
}
.hero-buttons{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}

/* Pill Buttons */
.pill-button{
  display:inline-block;
  padding:.75rem 1.5rem;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform .3s,box-shadow .3s,filter .3s;
}
.pill-button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(0,0,0,.2);
  filter:brightness(1.08);
}

/* Service Cards */
.services-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.service-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .3s,var(--transition);
  display:flex;
  flex-direction:column;
}
.service-card:hover{
  transform:translateY(-6px);
}
.service-card img{
  width:100%;
  height:auto;
  object-fit:cover;
}
.service-card h3{
  margin:1rem;
}
.service-card p{
  margin:0 1rem 1rem;
}
.price{
  margin-top:auto;
  font-weight:600;
  color:var(--primary);
}

/* About Section */
.about-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:center;
}
.about-text p{
  margin-bottom:1rem;
}

/* Gallery */
.gallery-grid{
  display:grid;
  gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

/* FAQ */
.faq-section dl{
  display:grid;
  gap:.5rem;
}
.faq-section dt{
  font-weight:600;
  color:var(--primary);
}
.faq-section dd{
  margin-left:0;
  margin-bottom:1rem;
}

/* Testimonials */
.testimonials-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.testimonial-card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem;
  transition:transform .3s;
}
.testimonial-card:hover{
  transform:translateY(-6px);
}

/* Newsletter */
.newsletter-form{
  max-width:500px;
  margin:auto;
  display:grid;
  gap:1rem;
}
.newsletter-form input{
  width:100%;
}

/* Map */
.map-section iframe{
  border:none;
  border-radius:var(--radius);
}

/* Pricing Table */
.pricing-table{
  width:100%;
  border-collapse:collapse;
}
.pricing-table th,
.pricing-table td{
  padding:.75rem;
  border:1px solid var(--muted);
  text-align:left;
}
.pricing-table th{
  background:var(--primary);
  color:#fff;
}

/* Team */
.team-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.team-member{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
  padding:1rem;
  transition:transform .3s;
}
.team-member:hover{
  transform:translateY(-6px);
}
.team-member img{
  border-radius:50%;
  margin-bottom:1rem;
}

/* Blog */
.blog-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.blog-post{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .3s;
}
.blog-post:hover{
  transform:translateY(-6px);
}
.read-more{
  margin-top:auto;
  color:var(--primary);
  font-weight:600;
}

/* Promotions */
.offers-list{
  list-style:disc inside;
  margin-top:1rem;
}

/* Hours Table */
.hours-table{
  width:100%;
  border-collapse:collapse;
}
.hours-table td{
  padding:.75rem;
  border:1px solid var(--muted);
}

/* YouTube */
.youtube-section iframe{
  border:none;
  border-radius:var(--radius);
}

/* Contact */
.contact-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.contact-form{
  display:grid;
  gap:1rem;
}
.contact-form label{
  display:flex;
  flex-direction:column;
  font-weight:500;
}
.contact-form input,
.contact-form textarea{
  width:100%;
}
.contact-details p{
  margin-bottom:.5rem;
}

/* Buttons (generic) */
button,
input[type="submit"]{
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:.75rem 1.5rem;
  cursor:pointer;
  transition:transform .3s,box-shadow .3s;
}
button:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* Inputs */
input,
textarea{
  border:1px solid var(--muted);
  border-radius:var(--radius);
  padding:.75rem;
  background:var(--surface);
  transition:border-color .3s,box-shadow .3s;
}
input:focus,
textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(46,134,171,.2);
}

/* Footer */
.footer-section{
  background:var(--primary);
  color:#fff;
  padding:3rem 1rem;
}
.footer-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.footer-col h3{
  margin-bottom:.5rem;
}
.footer-col a{
  color:#fff;
  text-decoration:underline;
}
.social-links{
  list-style:none;
  display:flex;
  gap:.5rem;
}
.social-links a{
  background:rgba(255,255,255,.2);
  padding:.5rem;
  border-radius:4px;
}
.footer-copy{
  text-align:center;
  margin-top:2rem;
  font-size:.875rem;
}

/* Reveal Animation */
.reveal{
  opacity:0;
  transform:translateY(20px);
}
.reveal.active{
  animation:fadeInUp .6s forwards;
}

/* Keyframes */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Responsive Typography */
html{
  font-size:16px;
}
@media (max-width:768px){
  .hero-content h1{font-size:clamp(2rem,6vw,3rem);}
  .hero-content p{font-size:clamp(0.9rem,3vw,1.1rem);}
}
@media (max-width:480px){
  .nav-links{
    flex-direction:column;
    background:rgba(255,255,255,.9);
    position:absolute;
    top:100%;
    right:0;
    left:0;
    padding:1rem;
    display:none;
  }
  .nav-links.show{display:flex;}
  .sticky-nav .logo{font-size:1.5rem;}
}

/* Utility */
.container{
  max-width:1200px;
  margin:auto;
  padding:0 1rem;
}