/* ————————————————————————————————————————  
   Base Reset & Typography  
   ———————————————————————————————————————— */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6; color:#333; background:#fff;
}
a { text-decoration:none; color:inherit; }

/* ————————————————————————————————————————  
   Containers & Layout  
   ———————————————————————————————————————— */
.container {
  max-width:1200px; margin:0 auto; padding:0 1rem;
}

/* ————————————————————————————————————————  
   Header / Nav  
   ———————————————————————————————————————— */
.header, .navbar {
  background:#000; color:#fff;
}
.navbar {
  display:flex; align-items:center; justify-content:flex-start;
  padding:1rem 0;
}
.logo { font-size:1.5rem; font-weight:bold; color:#fff; }
.nav-links {
  display:flex; gap:1.5rem; margin-left:auto;
  list-style:none;
}
.nav-links a,
.nav-links a:link,
.nav-links a:visited {
  font-family:'Inter',sans-serif; font-weight:500; font-size:1rem;
  color:#fff; text-decoration:none; position:relative; padding:.25rem 0;
  transition:color .2s;
}
.nav-links a:hover { color:#e63946; }
.nav-links a::after {
  content:''; display:block; width:0; height:2px; background:#e63946;
  position:absolute; bottom:-4px; left:0; transition:width .2s;
}
.nav-links a:hover::after { width:100%; }
.arrow { margin-left:.25rem; font-size:.8rem; }

.btn-schedule {
  background:#e63946; color:#fff; 
  margin-left:1rem;
  margin-right:1rem;
}
.btn-schedule, .btn-secondary {
  padding:.6rem 1rem; line-height: 1.2;
  border-radius:10px; font-weight:600; white-space: nowrap;
  cursor:pointer; font-size:1rem;
}
.menu-toggle { display:none; font-size:1.5rem; background:none; border:none; color:#fff; cursor:pointer; }

/* Mobile nav */
@media (max-width:768px) {
  .navbar { padding: 1rem 1.5rem; }
  .logo { display:none; };
  .nav-links { 
    display:none; 
    /*
      flex-direction:column; width:100%; background:#000; padding:1rem 0; 
    */
  }
  .nav-links.open { 
    display:flex; 
    flex-direction:column; 
    width:100%; 
    background:#000; 
    padding:1rem 0; 
  }
  .menu-toggle { 
    display:block; 
    margin-left:auto; 
    order:2; 
    color: #e63946; 
    border:none;
    padding: 0.6rem 1rem;
    font-size: 1.25rem;
    cursor: pointer;
  }
  /*
    .btn-schedule { order:1; width:100%; text-align:center; }
  */
  .btn-schedule { 
    margin: 0.5rem 0;
    order:1;}
}

/* ————————————————————————————————————————  
   Hero  
   ———————————————————————————————————————— */
.hero {
  position:relative;
  overflow: hidden;
  background:#000; 
  color:#fff; 
  padding:4rem 0; 
  text-align:left;
}

/* 1) Subtle background layer */
.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%; /* covers half the hero on the right */
  background:
    url('/assets/images/profile.webp') 
    no-repeat center right;
  background-size: cover;
  opacity: 0.7; /* very faint */
  pointer-events: none;
  /* fade out to left edge of the image */
  mask-image: linear-gradient(to left, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%);
}

/* Large laptop/tablet: reveal a bit more → show ~60% */
@media (max-width: 1200px) {
  .hero-bg {
    width: 60%;
    mask-image: linear-gradient(to left, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
  }
}

/* Small tablet: reveal still more → show ~80% */
@media (max-width: 992px) {
  .hero-bg {
    width: 80%;
    mask-image: linear-gradient(to left, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 80%, transparent 100%);
  }
}

/* Phone: reveal almost all → show ~100% */
@media (max-width: 768px) {
  .hero-bg {
    width: 100%;
    mask-image: none;            /* no fade: full image */
    -webkit-mask-image: none;
    opacity: 0.70;               /* keep it subtle */
    background-position: 70% center;
  }
  .hero-content {
    /* Nudge the whole text block downward */
    margin-top: -2rem;
  }
}

.hero-inner {
  position:relative;
  display: flex;  
  display:flex; 
  flex-direction:column; 
  gap:2rem; 
  align-items:flex-start;
  z-index: 1;  
}
@media (min-width:1024px){
  .hero-inner { flex-direction:row; align-items:center; }
  .hero-content, .hero-image { flex:1; }
}
.hero-content h1 { font-size:2.5rem; margin-bottom:1rem; }
.subtitle { color:#aaa; margin:1rem 0; }
.highlight { max-width:600px; margin:1rem 0; line-height:1.4; }
.hero-buttons {
  display:flex; gap:1rem; margin-top:1.5rem; justify-content:flex-start;
}
.hero-buttons .btn-schedule { /* same as nav */ }
.btn-secondary {
  border:2px solid #fff; color:#fff; background:transparent;
  padding:.6rem 1.2rem; border-radius:10px; font-weight:600; font-size: 1rem;
}
.btn-secondary:hover { background:#fff; color:#000; }

/* ————————————————————————————————————————  
   Intro / Cards  
   ———————————————————————————————————————— */
.intro-section {
  background:#fff; padding:4rem 1rem;
}
.intro-section h2 { font-size:2rem; line-height:1.2; margin-bottom:.75rem; }
.intro-sub { color:#666; margin-bottom:2rem; }
.intro-section .cards {
  display:grid; gap:2rem; grid-template-columns:1fr;
}
@media (min-width:600px){ .cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){ .cards { grid-template-columns:repeat(4,1fr); } }
.card {
  background:#fafafa; border:1px solid #ddd; border-radius:1rem;
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.card-icon { font-size:1.8rem; color:#e63946; }
.card h3 { font-size:1.2rem; }

/* ————————————————————————————————————————  
   FAQ / Accordion  
   ———————————————————————————————————————— */
.faq-section {
  padding:4rem 2rem; background:#fff; max-width:800px; margin:0 auto;
  text-align:center;
}
.section-header.center { text-align:center; margin-bottom:2rem; }
.faq-container .faq-item {
  border-bottom:1px solid #ddd; padding:1rem 0;
}
.faq-question {
  background:none; border:none; width:100%; text-align:left;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:500; cursor:pointer; font-size:1.1rem; padding-left: 1rem; padding-right: 1rem;
}
.faq-question:hover { color:#e63946; }
.faq-answer { text-align: left; display:none; padding-top:1rem; font-size:.95rem; }
.faq-question[aria-expanded="true"] + .faq-answer { display:block; }
/* FAQ answer bullet styling */
.faq-answer ul {
  list-style-type: disc;
  list-style-position: outside;
  margin: 0.5rem 0 0.5rem 1.5rem;  /* indent the whole list */
  padding: 0;
}

.faq-answer li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* Optional: lighten the separator line between FAQ items */
.faq-item {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* ————————————————————————————————————————  
   Contact Cards  
   ———————————————————————————————————————— */
.contact-section {
  background:#f9f9fb; padding:4rem 2rem;
}
.contact-cards {
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:center;
}
.contact-card {
  background:#fff; border:1px solid #ddd; border-radius:12px;
  padding:1.5rem; width:300px; display:flex; flex-direction:column;
}
.contact-icon svg {
  width:45px; height:45px; stroke:#e63946; margin-bottom:.5rem;
}
.contact-text p { margin:.5rem 0; font-size:.95rem; line-height:1.4; }
.link-red { color:#e63946; font-weight:500; text-decoration:underline; }

/* ————————————————————————————————————————  
   Footer  
   ———————————————————————————————————————— */
.site-footer {
  background:#fff; padding:3rem 1.5rem; color:#333;
  font-family:'Inter',sans-serif;
}
.footer-top { text-align:center; margin-bottom:2rem; }
.footer-email { color:#777; }
.footer-main {
  display:flex; flex-wrap:wrap; gap:2rem; border-top:1px solid #ddd;
  padding-top:2rem; margin-bottom:2rem;
}
.footer-left { flex:1 1 300px; }
.footer-left p { margin-bottom: 1rem;}
.footer-left .btn-book { 
  margin-top: 5rem !important; }
.footer-right {
  display:grid; gap:2rem; grid-template-columns:1fr;
}
@media(min-width:400px){ .footer-right { grid-template-columns:repeat(2,1fr); } }
@media(min-width:720px){ .footer-right { grid-template-columns:repeat(4,1fr); } }
.footer-col h6 { text-transform:uppercase; font-size:.9rem; color:#888; }
.footer-col ul { list-style:none; margin:0; padding:0; }
.footer-col li { margin:.3rem 0; font-size:.95rem; color:#333; }
.footer-bottom {
  border-top:1px solid #eee; padding-top:1.5rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
}
.footer-logo { display:flex; align-items:center; gap:1rem; }
.footer-socials a img { width:26px; height:26px; border-radius:4px; }
.footer-links { display:flex; gap:1.2rem; }
.footer-links a { color:#777; }
.footer-links a:hover { color:#e63946; }

/* ————————————————————————————————————————  
   Under-Construction Page  
   ———————————————————————————————————————— */
.under-construction main {
  max-width:600px; margin:5rem auto; padding:0 1rem; text-align:center;
}
.under-construction header { background:#000; padding:1rem 0; }
.under-construction nav { max-width:900px; margin:0 auto; display:flex; }
.under-construction nav a {
  color:#fff; margin-right:1.5rem; font-weight:500;
}
.under-construction nav a.active { text-decoration:underline; }