:root {
  --bg: #031a1a;
  --panel: #0E2B2A;
  --text: #F7F7F5;
  --muted: #9fc0ba;
  --accent: #ffef02;
  --accent2: #C49BE6;
  --radius: 1.1rem;
  --shadow: 0 8px 30px rgba(0,0,0,.28);
  --maxw: 1180px;
  --step--1: clamp(14px, 1.1vw, 16px);
  --step-0: clamp(18px, 1.35vw, 20px);
  --step-1: clamp(22px, 2.2vw, 28px);
  --step-2: clamp(26px, 3vw, 36px);
  --step-3: clamp(34px, 4vw, 48px);
  --carousel-h: 250px;
  --spv: 3;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  font-size: var(--step-0);
}
img { max-width: 100%; display: block; }
.container { width: min(var(--maxw), 92%); margin-inline: auto; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(3,26,26,.95); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.nav { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding: .8rem 0; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text); }
.brand .logo { width: fit-content; height: 65px; object-fit: cover; }
.primary-nav { display: flex; align-items: center; justify-content: space-evenly; width: 100%; }
.primary-nav a { position: relative; color: var(--text); text-decoration: none; padding: .6rem .4rem; font-weight: 700; font-size: var(--step-0); }
.primary-nav a::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: .2rem; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
.primary-nav a:hover::after, .primary-nav a.active::after { transform: scaleX(1); }

/* Footer */
.site-footer { margin-top: 4rem; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.08); background: #041F1E; }
.site-footer p { margin: 0; color: #cfe2dc; font-size: var(--step--1); }

/* Hero */
.hero { padding: 2.2rem 0 1.2rem; }
.hero h1 { font-size: var(--step-2); margin: 0 0 .5rem; }
.hero p { margin: 0; color: #cfe2dc; font-size: var(--step-0); }

/* Full-bleed Carousel */
.carousel-fullbleed .carousel-viewport{ position: relative; width: 100vw; height: var(--carousel-h); overflow: hidden; cursor: pointer; }
.carousel-track{ display: flex; height: 100%; gap: 0; align-items: stretch; will-change: transform; transition: transform .5s ease; }
figure, .slide { margin: 0; padding: 0; border: 0; }
.slide{ flex: 0 0 calc(100% / var(--spv)); max-width: calc(100% / var(--spv)); height: 100%; position: relative; }
.slide img{ width: 100%; height: 100%; object-fit: cover; }
.slide figcaption{ position: absolute; left: 1rem; right: 1rem; bottom: 1rem; background: rgba(0,0,0,.35); padding: .6rem .9rem; border-radius: .6rem; }

/* Cards and grids */
.panels { margin-top: 2.2rem; }
.panels h2, .testimonials h2 { margin-bottom: .8rem; font-size: var(--step-1); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: var(--panel); padding: 1rem 1rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); font-size: var(--step-0); }

.prose h1 { margin-top: 2rem; font-size: var(--step-2); }
.prose h2 { margin-top: 1.4rem; color: var(--accent); font-size: var(--step-1); }
.prose p, .prose li { font-size: var(--step-0); color: #e3efe9; }

/* Simple overlap utility */
.center{ min-height: 60vh; display: grid; place-items: center; }
.overlap{ display: grid; width: 320px; }
.overlap img{ grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.overlap img:first-child{ transform: translateX(135px); }
.overlap img:last-child{  transform: translateX(-135px); }
.qr { border-radius: 10px; }

/* POPUP — bottom-right, image only */
.teacher-float{
  position: fixed; right: 16px; left: auto; bottom: 16px;
  z-index: 20; pointer-events: auto;
}
.teacher-left{
  width: var(--pop-size, 160px); height: auto;
  transform: scaleX(-1) translateY(24px); transform-origin: center;
  opacity: 0; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35));
  transition: transform .45s cubic-bezier(.22,.89,.34,1.11), opacity .45s;
  cursor: pointer;
}
.teacher-float.show .teacher-left{ transform: scaleX(-1) translateY(0); opacity: 1; }

/* Optional quote styles (used elsewhere) */
.motto-right{ max-width: 48ch; background: rgba(0,0,0,.35); padding: .75rem .9rem; border-radius: .7rem; border: 1px solid rgba(255,255,255,.1); transform: translateX(-24px); opacity: 0; transition: transform .45s cubic-bezier(.22,.89,.34,1.11) .06s, opacity .45s .06s; font-size: var(--step-1); }
.motto-right q{ quotes: "“" "”"; font-weight: 800; }
.motto-right q::before, .motto-right q::after{ color: var(--accent); }

/* ===== About page ===== */
.bio-grid{ display: grid; grid-template-columns: min(40vw, 320px) 1fr; gap: 1.2rem; align-items: start; }
.bio-intro-photo{ height: 300px; margin:auto; }
.teacher-bio .bio-photo{ height: max-content; }
.assistant-bio .bio-photo.sm{ height: min(36vw, 240px); }
.assistant-bio{ padding-block: .75rem; }
.assistant-bio + .assistant-bio{ margin-top: 1.25rem; padding-top: 1rem; }
@media (max-width: 680px){
  .assistant-bio + .assistant-bio{ margin-top: 1rem; padding-top: .8rem; }
  .bio-grid{ grid-template-columns: 1fr; }
  .teacher-bio .bio-photo, .assistant-bio .bio-photo.sm{ height: auto; max-height: 360px; }
}
.bio-photo{ width: 100%; object-fit: cover; background: #0b2221; display: block; }
.bio-text h3{ margin: 0 0 .4rem; }
.char-slot img{ width: 120px; margin-top: .6rem; display: block; }

/* ===== Masonry gallery ===== */
.gallery-masonry{ column-count: 4; column-gap: .75rem; }
@media (max-width: 1024px){ .gallery-masonry{ column-count: 3; } }
@media (max-width: 680px){  .gallery-masonry{ column-count: 2; column-gap: .5rem; } }
.masonry-item{ break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 .75rem; }
.masonry-item img{ width: 100%; height: auto; display: block; border-radius: .5rem; box-shadow: var(--shadow); }

/* ===== Lightbox ===== */
.lightbox{ position: fixed; inset: 0; background: rgba(0,0,0,.8); display: grid; place-items: center; z-index: 100; }
.lightbox[hidden]{ display: none; }
.lightbox-img{ max-width: min(92vw, 1400px); max-height: 88vh; border-radius: .5rem; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox-close{ position: fixed; top: 12px; right: 16px; font-size: 32px; background: transparent; border: 0; color: #fff; cursor: pointer; }
.lightbox-nav{ position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: 0; color: #fff; font-size: 42px; width: 48px; height: 64px; border-radius: .6rem; cursor: pointer; }
.lightbox-nav.prev{ left: 20px; }
.lightbox-nav.next{ right: 20px; }
.lightbox-counter{ position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; background: rgba(0,0,0,.35); padding: .3rem .6rem; border-radius: .4rem; }

/* ===== Bottom CTA — one line: quote LEFT, image RIGHT ===== */
.cta-quote{ padding: 2rem 0 3rem; }
.cta-grid{
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap;
}
.cta-text{
  order: 1; flex: 1 1 auto; margin: 0; text-align: left; color: var(--text);
  font-size: clamp(26px, 3.6vw, 48px); line-height: 1.2; font-weight: 800; quotes: "“" "”";
  transform: translateX(-24px); opacity: 0;
  transition: transform .7s cubic-bezier(.22,.89,.34,1.11) .06s, opacity .7s .06s;
}
.cta-text q::before{
  content: "“"; display: block; line-height: .7;
  font-size: clamp(64px, 10vw, 120px); color: var(--accent); margin-bottom: .2rem;
}
.cta-char-wrap{ order: 2; flex: 0 0 clamp(280px, 42vw, 440px); max-width: 100%; }
.cta-char{
  width: 100%; height: auto; transform: translateY(40px); opacity: 0;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.35));
  transition: transform .7s cubic-bezier(.22,.89,.34,1.11), opacity .7s;
}
.cta-quote.is-inview .cta-text{ transform: translateX(0); opacity: 1; }
.cta-quote.is-inview .cta-char{ transform: translateY(0); opacity: 1; }
@media (max-width: 420px){
  .cta-grid{ flex-wrap: wrap; }
  .cta-char-wrap{ flex-basis: 100%; order: 2; }
}

/* ===== Contact page: overlapped QR (left) + quote (right) ===== */
.contact-grid{
  margin-top: 5vw; display: flex; align-items: center; gap: 1.5rem;
  padding-left: var(--overlap-shift, 135px); /* reserve for left-shift */
}
.contact-qr.overlap{
  width: clamp(280px, 40vw, 360px); overflow: visible;
  margin-right: var(--overlap-shift, 135px); /* reserve so overlap never hits text */
}
.contact-qr.overlap img{ grid-area: 1 / 1; width: 100%; height: auto; display: block; }
.contact-qr.overlap img.bg{ z-index: 1; }
.contact-qr.overlap img.fg{ z-index: 2; border-radius: 10px; }
.contact-grid .cta-text{
  flex: 1 1 auto; margin: 0; transform: none; opacity: 1;
}
@media (max-width: 640px){
  .contact-grid{ flex-wrap: wrap; padding-left: 0; }
  .contact-qr.overlap{ margin-right: 0; width: min(82vw, 360px); }
  .contact-grid .cta-text{ flex-basis: 100%; }
}  /* ← CLOSES the media query properly */

/* ===== Collapsible (About teacher) — BIG arrow + “more” label ===== */
/* Collapsible */
.collapse { position: relative; }
.collapse .more { display: none; }
.collapse.is-open .more { display: contents; }

/* Big arrow first, text second */
.collapse-toggle{
  margin-top: .6rem;
  background: transparent;
  border: 0;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
}

.collapse-toggle .chev{
  width: 56px;              /* larger arrow */
  height: 56px;
  transition: transform .25s ease;
}

.collapse.is-open .collapse-toggle .chev{ transform: rotate(180deg); }

.collapse-toggle .label{
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===== Contact: mobile QR fix ===== */
@media (max-width: 680px){
  .contact-grid{
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-left: 0;
  }
  .contact-qr.overlap{
    width: min(84vw, 420px);
    margin: 0 auto;
    justify-items: center;
  }
  .contact-qr.overlap img{ transform: none !important; }
  .contact-qr.overlap .bg{ display: none; } /* hide hi.png so QR is primary */
  .cta-text{ text-align: center; }
}

/* keep hover */
.primary-nav a:hover::after { transform: scaleX(1); }

/* stay-on underline when on the page */
.primary-nav a.active::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}