:root{
  --bg:#ffffff;
  --ink:#1b1b1b;
  --muted:#6b7280;
  --accent:#3b82f6;
  --soft:#f5f7fb;
  --border:#e5e7eb;
  --maxw:1100px;
}
/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--ink); background:var(--bg); line-height:1.6;}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(100%, var(--maxw)); margin-inline:auto; padding:0 1rem; }

/* Navbar */
.nav{ border-bottom:1px solid var(--border); background:#fff; }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.9rem 0; }
.brand{ font-weight:700; letter-spacing:.3px; }
.menu{ display:flex; gap:1rem; align-items:center; }
.menu a{ padding:.35rem .5rem; color:var(--muted); }
.menu a:hover, .menu a:focus{ color:var(--ink); }
.nav-toggle{ display:none; background:transparent; border:1px solid var(--border); padding:.4rem .55rem; border-radius:.5rem; }
.bars{ width:20px; height:2px; background:var(--ink); position:relative; display:block; }
.bars::before,.bars::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink); }
.bars::before{ top:-6px; } .bars::after{ top:6px; }

/* Hero */
.hero{ position:relative; min-height:72vh; display:grid; place-items:center; color:#fff; text-align:center; overflow:hidden; isolation:isolate; }
.hero::before{ content:""; position:absolute; inset:0; background:url("assets/heroimg.jpg") center/cover no-repeat; z-index:-2; transform:scale(1.02); }
.hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35)); z-index:-1; }
.hero h1{ font-size:clamp(2rem, 4.5vw, 3.5rem); line-height:1.15; margin:0 0 .6rem; }
.hero p{ margin:0 0 1.2rem; font-size:clamp(1rem, 2.2vw, 1.15rem); opacity:.95; }
.cta{ display:inline-block; background:#fff; color:#111; padding:.7rem 1rem; border-radius:.6rem; font-weight:600; border:1px solid #fff; }
.cta:hover{ background:transparent; color:#fff; }

/* About */
section{ padding:4rem 0; }
.about{ background:var(--soft); }
.section-tag{ color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; }
.section-title{ font-size:clamp(1.6rem, 3.4vw, 2.4rem); margin:.3rem 0 1rem; }
.about-grid{ display:grid; gap:2rem; grid-template-columns: 1fr; }
.about-card{ background:#fff; border:1px solid var(--border); border-radius:1rem; padding:1.25rem; }
.instructor{ display:grid; gap:1.25rem; grid-template-columns: 100px 1fr; align-items:center; }
.avatar{ width:100px; aspect-ratio:1/1; border-radius:50%; object-fit:cover; border:2px solid var(--border); background:#e9eefb url("assets/jane.jpg") center/cover no-repeat; }
.muted{ color:var(--muted); }
.pill{ display:inline-block; padding:.2rem .55rem; border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:var(--muted); }
.stack{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* Responsive */
@media (min-width: 820px){
  .about-grid{ grid-template-columns: 1.2fr .8fr; }
}
@media (max-width: 819.98px){
  .menu{ display:none; flex-direction:column; align-items:flex-start; padding:.5rem 0; }
  .menu.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
}

/* Utilities */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.lead{ font-size:1.05rem; }

/* Services */
.services { background:#fff; }
.cards-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns: 1fr;
  margin-top:1rem;
}
.service-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
}
.service-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.5rem;
}
.service-title{
  margin:0;
  font-size:1.15rem;
  line-height:1.3;
}
.service-points{
  margin:.5rem 0 1rem;
  padding-left:1.1rem;
}
.service-points li{
  margin:.2rem 0;
}
.price-block{
  display:grid;
  gap:.75rem;
  grid-template-columns: 1fr;
  border-top:1px dashed var(--border);
  padding-top:.9rem;
}
.price-item{
  display:flex; flex-direction:column; gap:.15rem;
}
.price-item > span{
  font-size:.85rem; color:var(--muted);
}
.price-item strong{
  font-size:1.05rem;
}
.small{ font-size:.85rem; }

/* Services responsive */
@media (min-width: 720px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .price-block{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px){
  .cards-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Schedule */
.schedule { background: var(--soft); }
.cal-header{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  margin: 1rem 0 .75rem;
}
.cal-title{ font-weight:700; letter-spacing:.2px; }
.cal-btn{
  border:1px solid var(--border); background:#fff; padding:.35rem .65rem; border-radius:.5rem; cursor:pointer;
}
.cal-btn:hover{ background:#f9fafb; }

.cal-legend{
  display:grid; gap:.4rem; grid-template-columns: 1fr;
  margin-bottom: 1rem;
}
.legend-item{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

.cal-grid{
  background:#fff; border:1px solid var(--border); border-radius:1rem; overflow:hidden;
}
.cal-dayname{
  display:grid; place-items:center;
  font-size:.85rem; color:var(--muted);
  background:#fafafa; border-bottom:1px solid var(--border);
  height:40px;
}
.cal-grid{
  display:grid; grid-template-columns: repeat(7, 1fr);
}
.cal-cells{
  display:grid; grid-template-columns: repeat(7, 1fr);
}
.cal-cell{
  min-height:130px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:.5rem; display:flex; flex-direction:column; gap:.35rem;
  background:#fff;
}
.cal-cell:nth-child(7n){ border-right:none; }
.cal-date{
  font-size:.85rem; color:var(--muted); display:flex; align-items:center; justify-content:space-between;
}
.cal-date .today{ padding:.1rem .4rem; border-radius:.4rem; border:1px solid var(--border); }
.cal-date .muted-date{ opacity:.55; }
.cal-events{ display:flex; flex-direction:column; gap:.25rem; margin-top:.1rem; }
.event{
  border:1px solid var(--border); border-left:3px solid var(--accent); background:#f9fafb;
  border-radius:.5rem; padding:.25rem .4rem; font-size:.85rem; line-height:1.2;
}
.event small{ color:var(--muted); display:block; }
.more-chip{
  font-size:.8rem; color:var(--muted);
}

/* Responsive */
@media (min-width: 900px){
  .cal-legend{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ==== Calendar alignment fix ==== */
/* Make the cells container span all 7 columns under the day-name row */
.cal-cells{
  grid-column: 1 / -1;
}

/* Ensure equal track sizing for both header row and cells */
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-cells{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Prevent the first column ("Sun") from stretching */
.cal-grid > *{ min-width: 0; }

/* Center the day names */
.cal-dayname{
  text-align:center;
}

/* Persuasion / Free Class CTA */
.cta-section { background: var(--soft); }
.cta-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.cta-grid{
  display:grid;
  gap:1.25rem;
  grid-template-columns: 1fr;
  margin-top:1rem;
}
.reasons{
  list-style:none;
  padding:0;
  margin:0 0 1rem;
}
.reasons li{
  position:relative;
  padding-left:1.6rem;
  margin:.45rem 0;
}
.reasons li::before{
  content:"✓";
  position:absolute;
  left:0; top:0; line-height:1.2;
  width:1.2rem; text-align:center;
  border:1px solid var(--border);
  border-radius:.4rem;
  font-weight:700;
}
.cta-actions{
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1rem; border-radius:.6rem;
  border:1px solid var(--border); font-weight:600; text-decoration:none;
}
.btn-primary{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn-primary:hover{ filter: brightness(0.95); }
.btn-ghost{
  background:#fff; color:var(--accent);
}
.btn-ghost:hover{ background:#f9fafb; }

.cta-side{
  display:grid; gap:.9rem;
}
.benefit{
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:.9rem;
  background:#fafafa;
}
.benefit h3{
  margin:.1rem 0 .35rem; font-size:1rem;
}

.trustline{
  display:flex; gap:.5rem; flex-wrap:wrap;
  margin-top:1rem; padding-top:1rem;
  border-top:1px dashed var(--border);
}

/* Responsive */
@media (min-width: 860px){
  .cta-grid{
    grid-template-columns: 1.2fr .8fr;
  }
}

/* Contact */
.contact { background:#fff; }
.contact-quick{
  display:grid; gap:.75rem;
  grid-template-columns: 1fr;
  margin: .5rem 0 1.25rem;
}
.contact-pill{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.8rem 1rem;
  border:1px solid var(--border); border-radius:.9rem;
  background:#fff; text-decoration:none; color:inherit;
}
.contact-pill:hover{ background:#f9fafb; }

.contact-grid{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
.contact-card{
  background:#fff; border:1px solid var(--border); border-radius:1rem; padding:1.25rem;
}
.contact-card address{ font-style: normal; line-height:1.55; margin-bottom:.5rem; }
.contact-rows{ display:flex; flex-direction:column; gap:.3rem; margin-top:.25rem; }
.contact-row{ color:var(--accent); text-decoration:none; }
.contact-row:hover{ text-decoration:underline; }

@media (min-width: 720px){
  .contact-quick{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px){
  .contact-grid{ grid-template-columns: repeat(2, 1fr); }
}
.small{ font-size:.9rem; }

/* Gallery / Slider */
.gallery { background:#fff; }
.slider{
  position:relative;
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  background:#fff;
}
.slides{
  display:flex;
  transition: transform .45s ease;
  will-change: transform;
}
.slide{
  min-width:100%;
  aspect-ratio:16 / 9;
  position:relative;
  background:#f3f4f6;
}
.slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.6rem .8rem;
  font-size:.9rem; color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6));
}

/* Arrows */
.s-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--border);
  background:#fff; cursor:pointer;
  user-select:none;
  opacity:.95;
}
.s-arrow:hover{ background:#f9fafb; }
.s-arrow.prev{ left:.5rem; }
.s-arrow.next{ right:.5rem; }

/* Dots */
.dots{
  display:flex; justify-content:center; align-items:center; gap:.4rem;
  padding:.6rem; border-top:1px solid var(--border);
  background:#fff;
}
.dots .dot{
  width:8px; height:8px; border-radius:999px;
  border:1px solid var(--muted);
  background:transparent; cursor:pointer;
}
.dots .dot.active{
  background:var(--accent);
  border-color:var(--accent);
}

/* Navbar CTA button */
.btn-nav{
  display:inline-block;
  padding:.45rem .75rem;
  border-radius:.55rem;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.btn-nav:hover{ filter:brightness(0.95); }

/* Keep nice spacing when menu stacks on mobile */
@media (max-width: 819.98px){
  .menu a{ width:100%; }                 /* full width taps */
  .btn-nav{ margin-top:.25rem; }         /* small breathing room */
}

/* ===== Modal ===== */
body.no-scroll { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: none;
}
.modal.open { display: block; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}

.modal-dialog {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.98);
  width: min(92vw, 400px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0;
}
.modal.open .modal-dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.modal-close {
  position: absolute; right: .5rem; top: .5rem;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff; cursor: pointer;
  font-size: 1.2rem; line-height: 1;
}
.modal-close:hover { background: #f9fafb; }

.modal-media { margin: 0; }
.modal-media img { display: block; width: 100%; height: auto; }

.modal-actions {
  display: flex; gap: .6rem; justify-content: center;
  padding: 1rem; border-top: 1px solid var(--border);
  background: #fff;
}

/* Buttons reuse existing .btn & .btn-primary styles */