:root {
  --terracotta: #b5553c;
  --terracotta-dark: #8f3f2b;
  --sage: #7e8f6f;
  --cream: #fbf6ee;
  --cream-dark: #f1e8d8;
  --ink: #2c2620;
  --ink-soft: #5b5248;
  --border: #e4d8c4;
  --focus: #1457a8;
  --font-heading: Georgia, 'Noto Serif', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--ink);
  line-height: 1.2;
}

a { color: var(--terracotta-dark); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.section {
  padding: 2.5rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.section--alt { background: var(--cream-dark); max-width: none; }
.section--alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.section--alt .card-grid,
.section--alt .fee-grid,
.section--alt .gallery-grid,
.section--alt .teacher-block { max-width: 1100px; margin-left: auto; margin-right: auto; }

h2 { font-size: 1.6rem; margin-top: 0; }

/* ---------- sticky sample-site banner ---------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
}
.demo-banner p { margin: 0; }
.demo-banner__cta {
  background: var(--terracotta);
  color: #fff;
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.demo-banner__book {
  color: #fff; opacity: 0.8; font-size: 0.8rem; text-decoration: underline;
  min-height: 44px; display: inline-flex; align-items: center;
}
.demo-banner__book:hover { opacity: 1; }
.demo-banner__link-short { display: none; }
@media (max-width: 1023px) {
  .demo-banner__link-full { display: none; }
  .demo-banner__link-short { display: inline; }
}.demo-banner__link {
  color: #fff;
  opacity: 0.8;
  font-size: 0.8rem;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.demo-banner__link:hover { opacity: 1; }
.demo-region-select { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 4px 8px; font-size: 0.86rem; font-family: inherit; min-height: 24px; cursor: pointer; }
.demo-region-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }.demo-region-select option{color:var(--ink);background:var(--cream)}.footer-region-note{margin:0 0 8px;font-size:.86rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark { color: var(--terracotta); flex-shrink: 0; }
.brand__name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.9rem; }
.site-nav a { text-decoration: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--terracotta-dark); }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; }
.hero__image { width: 100%; object-fit: cover; max-height: 70vh; }
/* The <img>'s own width/height attributes (836x471) describe the DESKTOP
   source, since that's the element's default/fallback src — but the mobile
   <source> below 641px swaps in a differently-cropped, portrait image
   (1122x1402). Browsers reserve space from the HTML attributes before the
   chosen source decodes, so without this override the box is landscape-
   shaped on mobile and snaps to portrait once the real image decodes —
   .hero__content overlays this box (position:absolute; inset:0) and is
   bottom-anchored, so the box resizing moves the h1/promise/scope text on
   screen exactly as if it were pushed, same bug class fixed on every other
   demo's home hero this session, just missed here since yoga was out of
   that pass's scope (no critical.css/self-hosted fonts). */
.hero__image { aspect-ratio: 1122 / 1402; }
@media (min-width: 641px) { .hero__image { aspect-ratio: 836 / 471; } }
.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(20, 15, 10, 0.78), rgba(20, 15, 10, 0.1) 60%);
}
.hero__content h1 { color: #fff; margin: 0; font-size: 1.9rem; }
.hero__promise { margin: 0; font-size: 1.05rem; max-width: 40ch; }
.hero__scope { margin: 0; font-size: 0.85rem; opacity: 0.9; }

.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn--primary { background: var(--terracotta); color: #fff; }
.btn--primary:hover { background: var(--terracotta-dark); }
.btn--secondary { background: transparent; border-color: #fff; color: #fff; }
.btn--secondary:hover { background: rgba(255, 255, 255, 0.15); }
.section .btn--secondary { border-color: var(--terracotta); color: var(--terracotta-dark); }
.section .btn--secondary:hover { background: rgba(181, 85, 60, 0.1); }

/* ---------- classes ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card picture, .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card h3, .card p { margin: 0.5rem 1rem 0; }
.card p:last-child { margin-bottom: 1rem; }
.card__time { font-weight: 600; color: var(--terracotta-dark); font-size: 0.9rem; }

.timetable { width: 100%; border-collapse: collapse; background: #fff; }
.timetable caption { text-align: left; font-weight: 700; margin-bottom: 0.5rem; font-family: var(--font-heading); }
.timetable th, .timetable td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.7rem;
  text-align: left;
  font-size: 0.9rem;
}
.timetable thead th { background: var(--cream-dark); }

/* ---------- fees ---------- */
.fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.fee-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
}
.fee-card--highlight { border-color: var(--terracotta); border-width: 2px; }
.fee-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.fee-card__price { font-size: 1.6rem; font-weight: 700; color: var(--terracotta-dark); margin: 0 0 0.5rem; }

/* ---------- teacher / story ---------- */
.teacher-block, .story-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.teacher-block picture, .story-block picture { flex-shrink: 0; }
.teacher-block img { border-radius: 10px; max-width: 260px; }
.story-block img { border-radius: 10px; max-width: 100%; }
@media (min-width: 720px) {
  .teacher-block { flex-direction: row; align-items: center; }
  .story-block { flex-direction: row-reverse; align-items: center; }
  .story-block img { max-width: 420px; }
}

/* ---------- gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.gallery-item {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  min-height: 44px;
}
.gallery-item img { aspect-ratio: 1 / 1; object-fit: cover; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox__image { max-width: 100%; max-height: 85vh; border-radius: 6px; }
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- FAQ ---------- */
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.faq-item summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.faq-item p { margin: 0.5rem 0 0.25rem; }

/* ---------- contact ---------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 420px;
}
.contact-form label { font-weight: 600; margin-top: 0.5rem; }
.contact-form input, .contact-form select {
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}
.contact-form button { margin-top: 1rem; align-self: flex-start; }
.contact-form__note { font-size: 0.82rem; color: var(--ink-soft); max-width: 420px; }

/* ---------- demo note toast ---------- */
.demo-note {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  max-width: 90vw;
  text-align: center;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.demo-note[hidden] { display: none; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: #efe6d8;
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: 0.9rem;
}
.site-footer p { margin: 0.3rem 0; }
.site-footer a { color: #fff; }
.site-footer__name { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; }
.site-footer__credit { margin-top: 1rem; opacity: 0.8; }

@media (min-width: 640px) {
  .hero__content h1 { font-size: 2.6rem; }
  .hero__promise { font-size: 1.2rem; }
}