/* Nritya with Dipshi — shared styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Bricolage Grotesque', sans-serif; color: #fff; background: #000; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ---------- Nav (subpages) ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 4vw, 80px);
}
.site-nav .brand { display: inline-flex; align-items: center; }
.brand-logo { height: clamp(42px, 4.2vw, 48px); width: auto; }
.footer-logo img { height: clamp(60px, 6vw, 88px); width: auto; }
.site-nav .links { display: flex; gap: clamp(18px, 3.5vw, 56px); }
.site-nav .links a { color: #fff; font-size: clamp(13px, 1.2vw, 18px); }
.site-nav .links a:hover, .site-nav .links a.active { opacity: .7; }

/* ---------- Dropdown Menu ---------- */
/* Mobile-only accordion controls — desktop keeps the hover dropdown. */
.cls-toggle, .dropdown-label { display: none; }
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.dropdown-toggle {
  cursor: pointer;
  position: relative;
}
/* Arrow lives on ::before — ::after is taken by the nav underline. */
.dropdown-toggle::before {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  opacity: 0.7;
  transition: transform 0.3s ease;
}
.nav-dropdown:hover .dropdown-toggle::before {
  transform: translateY(-50%) rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  /* Frosted glass, iOS-style: panel must stay see-through or the blur reads
     as a flat black slab over the hero. Keep alpha well under 0.6. */
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 12px 0;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 100;
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(8px);
}
.dropdown-menu a {
  display: block;
  padding: 10px 24px;
  color: #fff;
  font-size: clamp(13px, 1.2vw, 15px);
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  padding-left: 28px;
}

/* Home nav dropdown */
.home-nav .nav-dropdown {
  display: flex;
}
.home-nav .dropdown-toggle::before {
  right: -14px;
}
.home-nav .dropdown-menu {
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

/* Mobile: disable dropdown in drawer */
@media (max-width: 900px) {
  .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* collapsed submenu must not leave a hole in the drawer */
  }
  /* "Classes" becomes a tap-to-expand label; the link version is desktop-only */
  .dropdown-toggle { display: none; }
  .dropdown-label {
    display: inline-block;
    position: relative;
    padding-right: 24px;
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    cursor: pointer;
  }
  .dropdown-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #fff;
    transition: transform .3s ease;
  }
  .cls-toggle:checked ~ .dropdown-label::after { transform: rotate(180deg); }
  /* .home-nav .dropdown-menu (0,2,0) outranks a bare .dropdown-menu here,
     so the drawer resets must be scoped just as tightly. */
  .dropdown-menu,
  .home-nav .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: none;
    padding: 0;
    min-width: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    /* collapsed until the label is tapped */
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease;
    opacity: 0;
  }
  .cls-toggle:checked ~ .dropdown-menu {
    max-height: 320px;
    opacity: 1;
    margin-top: 14px;
  }
  .dropdown-menu a {
    padding: 0;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.75);
    width: auto;
  }
  .dropdown-menu a:hover {
    background: transparent;
    color: #fff;
    padding-left: 0;
  }
  .nav-dropdown:hover .dropdown-menu {
    transform: none;
  }
}

/* ---------- Hero (home) ---------- */
/* scroll distance = how long the video scrubs before page continues */
.hero-scroll { height: 300vh; }
.hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;   /* video covers it; no hero still image to download */
  border-radius: 0 0 28px 28px;
}
.hero-canvas { display: none; }   /* phones only — see js/site.js */
.hero-video,
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);   /* own GPU layer — stops repaints during scrub */
}
.home-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 6vw, 110px);
  padding: 28px 16px;
}
.home-nav a {
  color: #fff;
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 400;
}
.hero-title {
  display: none; /* branding baked into Nritya.webp hero image */
  position: absolute;
  left: 13%;
  top: 28%;
  color: #fff;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 54px);
  line-height: 1;
}
.hero-title span {
  font-size: .5em;
  font-weight: 400;
  margin-left: 6px;
}
/* ---------- Hamburger (CSS-only) ---------- */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; padding: 10px; z-index: 5; }
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .25s, top .25s;
}
.nav-burger span { position: relative; }
.nav-burger span::before,
.nav-burger span::after { content: ''; position: absolute; left: 0; }
.nav-burger span::before { top: -8px; }
.nav-burger span::after { top: 8px; }
.nav-toggle:checked ~ .nav-burger span { transform: rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span::before { top: 0; transform: rotate(90deg); }
.nav-toggle:checked ~ .nav-burger span::after { top: 0; opacity: 0; }
.home-burger { position: fixed; top: 20px; right: 18px; z-index: 21; }

/* ---------- Page hero (subpages) ---------- */
.page-hero { background: #000; color: #fff; text-align: center; padding: clamp(56px, 8vw, 120px) 24px; border-radius: 0 0 28px 28px; }
.page-hero h1 { font-size: clamp(34px, 4.5vw, 68px); font-weight: 600; }
.page-hero p { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(22px, 2.6vw, 40px); color: #d6d6d6; margin-top: 10px; }

/* ---------- Proof / stats ---------- */
.proof { text-align: center; padding: 48px 24px 60px; }
.mentored {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.mentored-avatars { height: 48px; width: auto; }
.mentored p { font-size: clamp(14px, 1.3vw, 18px); font-weight: 400; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 5vw, 90px);
  margin-top: 64px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.stat h3 { font-size: clamp(34px, 3.4vw, 56px); font-weight: 700; line-height: 1; }
.stat p { font-size: clamp(13px, 1.2vw, 18px); margin-top: 8px; color: #bdbdbd; }

/* ---------- Section headings ---------- */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; }
.section-head p { font-size: clamp(15px, 1.5vw, 21px); margin-top: 8px; }
.section-head .script { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(20px, 2vw, 30px); }

/* ---------- Dance Style ---------- */
.styles { padding: 40px 24px 110px; max-width: 1760px; margin: 0 auto; }
.style-stack { max-width: 1200px; margin: 0 auto; }
.style-card {
  position: sticky;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  background: #141414;
  border: 1px solid #262626;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 56px);
  min-height: 62vh;
  margin-bottom: 32px;
  overflow: hidden;
}
/* All cards stick at the same point so each fully covers the one before it. */
.style-card { top: 96px; }
.style-media { position: relative; cursor: pointer; }
.style-media .style-vid {
  width: 100%;
  aspect-ratio: 388 / 400;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  background: #141414;
}
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 82px; height: 82px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  pointer-events: none;          /* clicks/hover pass to the video underneath */
  transition: opacity .25s, transform .25s;
  z-index: 2;
}
/* Hide the play badge while the clip is playing on hover. */
.style-media:hover .play-btn { opacity: 0; }
.play-btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #111;
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.play-btn:hover::before { border-left-color: #007AFF; }
.style-text h3 { font-size: clamp(26px, 3vw, 46px); font-weight: 500; }
.style-text p { font-size: clamp(15px, 1.4vw, 20px); margin-top: 16px; line-height: 1.55; color: #d6d6d6; }
.style-more { display: inline-block; margin-top: 24px; color: #fff; font-size: clamp(14px, 1.2vw, 18px); border-bottom: 1px solid #444; padding-bottom: 3px; transition: border-color .3s; }
.style-card:hover .style-more { border-color: #fff; }

/* ---------- Classes & Services ---------- */
.classes { padding: 40px 24px 120px; }
.classes-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
}
.classes-inner > img {
  width: 100%;
  aspect-ratio: 1624 / 1006;
  object-fit: cover;
  border-radius: 18px;
}
.classes-text p {
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.65;
  margin-bottom: 1.2em;
}
.btn {
  display: block;
  width: 100%;
  background: #fff;
  color: #000;
  text-align: center;
  font-family: inherit;
  font-size: clamp(16px, 1.5vw, 22px);
  padding: 22px 32px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 36px;
  font-weight: 500;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.btn:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}
.btn.inline { display: inline-block; width: auto; margin-top: 0; }

.style-links {
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.7;
  color: #b8b8b8;
}
.style-links a {
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid #007AFF;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}
.style-links a:hover {
  color: #007AFF;
  border-bottom-color: #0056CC;
}

.btn.ios {
  background: linear-gradient(180deg, #007AFF 0%, #0056CC 100%);
  color: #fff;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 500;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}
.btn.ios:hover {
  background: linear-gradient(180deg, #0066E6 0%, #004BB5 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn.ios:active {
  background: linear-gradient(180deg, #0056CC 0%, #003D99 100%);
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 122, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn.ios.whatsapp {
  background: linear-gradient(180deg, #25D366 0%, #1DA851 100%);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn.ios.whatsapp:hover {
  background: linear-gradient(180deg, #20C857 0%, #179646 100%);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn.ios.whatsapp:active {
  background: linear-gradient(180deg, #1DA851 0%, #128A3D 100%);
  box-shadow: 0 1px 4px rgba(37, 211, 102, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ---------- Service cards ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 36px);
  max-width: 1360px;
  margin: 0 auto;
}
.service-card {
  background: #141414;
  border: 1px solid #262626;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.service-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card:hover img {
  transform: scale(1.05);
}
.service-card-content {
  padding: clamp(28px, 3vw, 44px);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card h3 {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}
.service-card p {
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.7;
  color: #b8b8b8;
  flex: 1;
}

/* ---------- About ---------- */
.about { background: #000; color: #fff; padding: clamp(60px, 8vw, 130px) 24px; }
.about-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
  max-width: 1560px;
  margin: 0 auto;
}
.about h2 {
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 700;
  margin-bottom: 32px;
}
.about-text p {
  color: #d6d6d6;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.65;
  margin-bottom: 1em;
}
.signature {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(34px, 3.4vw, 52px);
  color: #fff;
  margin-top: 48px;
}
.founder { font-size: clamp(15px, 1.4vw, 20px); margin-top: 10px; }
.about-inner > img {
  width: 100%;
  aspect-ratio: 683 / 1024;
  max-height: 640px;
  object-fit: cover;
  border-radius: 18px;
  justify-self: end;
}

/* ---------- Achievements ---------- */
.achievements { padding: 100px 24px 120px; }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.2vw, 40px);
  max-width: 1360px;
  margin: 0 auto;
}
.ach-card {
  background: transparent;
  border: 0;
  padding: 0;
}
.ach-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.ach-media img { width: 100%; height: 100%; object-fit: cover; }
.ach-num {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: 15px;
}
.ach-card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.2;
  margin-top: 22px;
  margin-bottom: 8px;
}
.ach-card p { font-size: clamp(14px, 1.25vw, 17px); line-height: 1.6; color: #bdbdbd; }

/* ---------- Gallery ---------- */
.gallery { padding: 60px 24px 120px; max-width: 1560px; margin: 0 auto; }
.gallery-grid { columns: 3; column-gap: clamp(16px, 2vw, 28px); }
.gallery-grid img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: clamp(16px, 2vw, 28px);
  break-inside: avoid;
}

/* ---------- Contact ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 36px);
  max-width: 1160px;
  margin: 0 auto;
}
.contact-card {
  background: #141414;
  border: 1px solid #262626;
  border-radius: 18px;
  padding: clamp(32px, 3.5vw, 52px);
  text-align: center;
}
.contact-card h3 { font-size: clamp(18px, 1.7vw, 25px); font-weight: 600; margin-bottom: 10px; }
.contact-card p { font-size: clamp(14px, 1.3vw, 18px); color: #bdbdbd; margin-bottom: 20px; line-height: 1.6; }

/* ---------- Professional Contact Page ---------- */
.contact-section {
  padding: clamp(48px, 6vw, 90px) 24px 120px;
  max-width: 1560px;
  margin: 0 auto;
}
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.contact-details {
  background: #141414;
  border: 1px solid #262626;
  border-radius: 18px;
  padding: clamp(40px, 5vw, 60px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.contact-details h2 {
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}
.contact-intro {
  font-size: clamp(15px, 1.4vw, 18px);
  color: #b8b8b8;
  line-height: 1.6;
  margin-bottom: 40px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #262626;
}
.contact-item:last-child {
  border-bottom: none;
}
.contact-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 1px solid #333;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.contact-info h3 {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff;
}
.contact-info p {
  font-size: clamp(14px, 1.3vw, 16px);
  color: #b8b8b8;
  line-height: 1.5;
}
.location-sub {
  font-size: clamp(13px, 1.2vw, 15px);
  color: #888;
  margin-top: 4px;
}
.contact-buttons {
  display: flex;
  gap: 16px;
  margin-top: clamp(28px, 3vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
}
.btn.ios.mail {
  background: linear-gradient(180deg, #2b2b2b 0%, #171717 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn.ios.mail:hover {
  background: linear-gradient(180deg, #383838 0%, #202020 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* ---------- Booking (Cal.com inline) ---------- */
.booking-section {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) 24px 0;
}
.booking-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
}
.booking-head h1,
.booking-head h2 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 600;
  margin-bottom: 14px;
  color: #fff;
}
.booking-head p {
  font-size: clamp(15px, 1.4vw, 19px);
  color: #b8b8b8;
  line-height: 1.65;
}
.booking-container {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
}
.booking-embed {
  background: radial-gradient(120% 140% at 0% 0%, #10233d 0%, #141414 55%);
  border: 1px solid #263b57;
  border-radius: 18px;
  padding: clamp(10px, 1.2vw, 18px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
#cal-inline {
  width: 100%;
  min-height: 660px;
  overflow: auto;
}
@media (max-width: 980px) {
  .booking-container { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  #cal-inline { min-height: 560px; }
}
.demo-badge {
  display: inline-block;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.4px;
  color: #7fb6ff;
  border: 1px solid #2c4a72;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.contact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.contact-strip .contact-item {
  background: #141414;
  border: 1px solid #262626;
  border-radius: 18px;
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.contact-map {
  min-height: 660px;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 980px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
  .contact-map {
    min-height: 380px;
  }
}

/* ---------- Footer ---------- */
footer {
  background: #000;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: clamp(56px, 7vw, 110px) clamp(24px, 4vw, 80px);
  gap: 24px;
}
.footer-logo { font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; }
.footer-logo span { font-weight: 400; font-size: .5em; }
.footer-logo .grey { color: #c9c9c9; }
.footer-mid { text-align: center; font-size: clamp(14px, 1.3vw, 19px); line-height: 1.9; }
.footer-mid a:hover { opacity: .75; }
.footer-right { text-align: right; font-size: clamp(14px, 1.3vw, 19px); }
.footer-right .socials { display: flex; justify-content: flex-end; gap: 18px; margin-top: 14px; }
.footer-right .socials a { display: inline-flex; }
.footer-right .socials svg { width: 30px; height: 30px; fill: #fff; }
.footer-right .socials a:hover svg { fill: #c9c9c9; }

/* ---------- Instagram reels + scroll-converge headline ---------- */
.reels { max-width: 1560px; margin: 0 auto; padding: 60px 24px 120px; }
.reel-headline {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
  font-size: clamp(34px, 8vw, 92px);
  color: #fff;
  margin-bottom: clamp(40px, 6vw, 80px);
  perspective: 500px;
  overflow: hidden;            /* spread chars never cause sideways scroll */
  white-space: nowrap;         /* keep "FOLLOW THE RHYTHM" on one line, never split a word */
}
.reel-headline span { display: inline-block; will-change: transform; }
.reel-headline span.sp { width: .3em; }   /* preserved space */
.reel-carousel { overflow: hidden; }
.reel-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  width: max-content;
  animation: reel-marquee 44s linear infinite;
}
/* Pause the drift when the pointer is over the strip so a reel can be watched. */
.reel-carousel:hover .reel-track { animation-play-state: paused; }
@keyframes reel-marquee { to { transform: translateX(-50%); } }
.reel {
  flex: 0 0 auto;
  width: clamp(200px, 20vw, 240px);
  aspect-ratio: 9 / 16;
  border: 1px solid #262626;
  border-radius: 16px;
  background: #141414;
  overflow: hidden;
  object-fit: cover;      /* video fills the frame, no letterbox */
}

/* ---------- Testimonials (auto-scrolling columns) ---------- */
.tst { max-width: 1180px; margin: 0 auto; padding: 40px 24px 120px; }
.tst-tag { display: inline-block; border: 1px solid #262626; border-radius: 8px; padding: 4px 14px; font-size: 14px; margin-bottom: 16px; }
.tst-cols {
  display: flex;
  justify-content: center;
  gap: 24px;
  max-height: 740px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.tst-col { flex: 1; max-width: 340px; }
.tst-track { display: flex; flex-direction: column; gap: 24px; animation: tst-scroll var(--dur, 36s) linear infinite; }
.tst-cols:hover .tst-track { animation-play-state: paused; }
@keyframes tst-scroll { to { transform: translateY(-50%); } }
.tst-card {
  background: #141414;
  border: 1px solid #262626;
  border-radius: 24px;
  padding: 32px;
}
.tst-card p { font-size: 16px; line-height: 1.55; color: #e2e2e2; }
.tst-card footer { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.tst-card footer img { width: 40px; height: 40px; border-radius: 50%; }
.tst-card footer span { display: flex; flex-direction: column; line-height: 1.3; }
.tst-card footer b { font-weight: 500; }
.tst-card footer i { font-style: normal; opacity: .6; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .tst-track, .reel-track { animation: none; } }
@media (max-width: 1024px) { .tst-col.hide-lg { display: none; } }
@media (max-width: 768px)  { .tst-col.hide-md { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .style-card { grid-template-columns: 1fr; min-height: 0; }
  .style-media { order: -1; }
  .style-media .style-vid { aspect-ratio: 16 / 11; }
  .style-text { text-align: center; }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .classes-inner, .about-inner { grid-template-columns: 1fr; }
  .about-inner > img { justify-self: center; }
  .gallery-grid { columns: 2; }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer-right, .footer-mid { text-align: center; }
  .footer-right .socials { justify-content: center; }
  .hero-scroll { height: 250vh; }
  .hero { border-radius: 0 0 18px 18px; }
  .hero-video { display: none; }
  .hero-canvas { display: block; }   /* frames are pre-padded to ~9:19.5, so cover barely crops */
  .hero-title { display: none; } /* title baked into mobile photo */

  /* hamburger takes over */
  .nav-burger { display: block; }
  .site-nav { flex-wrap: nowrap; }
  .site-nav.scrolled { padding: 14px clamp(20px, 5vw, 28px); }

  /* burger button floats above the drawer so it can also close it */
  .nav-burger, .home-burger {
    position: fixed;
    top: 20px;
    right: 18px;
    z-index: 45;
  }

  /* full-screen glass drawer, slides in from the right */
  .site-nav .links, .home-nav {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 80px 32px 40px;
    margin: 0;
    background: rgba(16, 16, 16, .55);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border-left: 1px solid rgba(255, 255, 255, .1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
    border-radius: 0;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    z-index: 40;
  }
  /* neutralise desktop nav props that would fight the drawer */
  .home-nav { top: 0; right: 0; }
  .site-nav .links a, .home-nav a { font-size: 30px; font-weight: 400; width: auto; }
  /* submenu stays a step down from the top-level items */
  .dropdown-menu a { font-size: 22px; font-weight: 400; }
  .nav-toggle:checked ~ .links,
  .nav-toggle:checked ~ .home-nav { transform: translateX(0); }

  /* Stats responsive */
  .stats {
    gap: clamp(20px, 4vw, 32px);
    margin-top: 48px;
  }
  .stat h3 { font-size: clamp(28px, 3vw, 42px); }
  .stat p { font-size: clamp(12px, 1.1vw, 16px); }
}
@media (max-width: 520px) {
  .ach-grid { grid-template-columns: 1fr; }
  .mentored { flex-direction: column; }
  .gallery-grid { columns: 1; }
  /* scale headline to viewport so the full "FOLLOW THE RHYTHM" fits one line */
  .reel-headline { font-size: 7.6vw; }

  /* Stats mobile responsive */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .stat h3 { font-size: clamp(24px, 5vw, 32px); }
  .stat p { font-size: clamp(11px, 2.5vw, 14px); }
}

/* ==================================================================
   Micro-interactions — clean, Apple-style. Progressive: JS adds the
   .reveal / .scrolled hooks, so with JS off nothing is hidden.
   ================================================================== */

/* --- Nav contracts into a floating glassmorphism pill on scroll --- */
/* Both states use interpolatable length units (margin / left / right),
   so top -> pill morphs smoothly instead of snapping. */
.site-nav {
  border: 1px solid transparent;
  transition: background .5s ease, backdrop-filter .5s ease,
              box-shadow .5s ease, padding .5s cubic-bezier(.22, 1, .36, 1),
              border-radius .5s ease, border-color .5s ease,
              margin .5s cubic-bezier(.22, 1, .36, 1), top .5s cubic-bezier(.22, 1, .36, 1);
}
.home-nav {
  border: 1px solid transparent;
  transition: background .5s ease, backdrop-filter .5s ease,
              box-shadow .5s ease, padding .5s cubic-bezier(.22, 1, .36, 1),
              border-radius .5s ease, border-color .5s ease,
              left .5s cubic-bezier(.22, 1, .36, 1), right .5s cubic-bezier(.22, 1, .36, 1),
              top .5s cubic-bezier(.22, 1, .36, 1);
}
/* Pill morph is a desktop feature — keep it off mobile so it can't fight
   the slide-in drawer (which reuses .home-nav / .site-nav .links). */
@media (min-width: 901px) {
  .site-nav.scrolled, .home-nav.scrolled {
    background: rgba(22, 22, 22, .55);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 12px 40px rgba(0, 0, 0, .5);
    border-radius: 100px;
  }
  /* subpage nav: sticky — inset via horizontal margin (a length, so it animates) */
  .site-nav.scrolled {
    top: 14px;
    margin: 14px max(16px, calc((100% - 1120px) / 2)) 0;
    padding: 11px clamp(24px, 2.6vw, 36px);
  }
  /* home nav: fixed — inset via left/right (lengths, so they animate) */
  .home-nav.scrolled {
    top: 14px;
    left: max(16px, calc((100% - 940px) / 2));
    right: max(16px, calc((100% - 940px) / 2));
    padding: 13px clamp(24px, 3vw, 40px);
  }
}

/* --- Animated underline on nav links --- */
.site-nav .links a, .home-nav a { position: relative; }
.site-nav .links a::after, .home-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.site-nav .links a:hover::after, .site-nav .links a.active::after,
.home-nav a:hover::after { transform: scaleX(1); }

/* --- Scroll reveal --- */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s),
              transform .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* --- Card hover polish --- */
.style-media .style-vid { transition: box-shadow .4s ease; }
.style-card:hover .style-media .style-vid { box-shadow: 0 20px 44px rgba(0, 0, 0, .35); }

/* --- Video lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lightbox[hidden] { display: none; }
.lb-video {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  background: #000;
}
.lb-close {
  position: absolute;
  top: 20px; right: 24px;
  width: 48px; height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 30px; line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.lb-close:hover { background: rgba(255, 255, 255, .28); }

.service-card, .contact-card {
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
.service-card:hover, .contact-card:hover {
  transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ach-media { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
.ach-card:hover .ach-media { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, .5); }

.gallery-grid img { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
.gallery-grid img:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }

/* --- Button micro-interaction --- */
.btn { transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .3s ease, box-shadow .3s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.btn:active { transform: translateY(0) scale(.99); }

/* --- Stat numbers: steady width during count-up --- */
.stat h3 { font-variant-numeric: tabular-nums; }

/* ==================================================================
   Page loader — black veil, then a Kathak dancer drawing herself in light.
   One SVG path traced off the hero footage, inlined here so it costs no
   extra request. Pure CSS, every page.
   ================================================================== */
/* Only play on first arrival in the session; the inline head script adds
   .no-loader on every later page so internal navigation skips it. */
html.no-loader::before,
html.no-loader body::before,
html.no-loader body::after { display: none !important; animation: none !important; }

/* .waiting = home page holding the loader open until the hero video is
   buffered. Veil and glow sit still, she keeps drawing. */
html.waiting::before { animation: none; opacity: 1; }
html.waiting body::before { animation: none; opacity: 1; }
html.waiting body::after { animation: none; opacity: 1; }

html::before {   /* the veil */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  animation: loaderVeil .85s cubic-bezier(.6, 0, .2, 1) forwards;
}

/* Stage light behind her — the warm backlit look of the hero film, so she
   reads as lit from upstage rather than pasted onto flat black. */
body::before {
  content: '';
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 50%;
  width: min(440px, 84vw);
  height: min(440px, 84vw);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(226, 178, 128, .20), rgba(226, 178, 128, .07) 45%, transparent 72%);
  animation: loaderGlow .85s ease-out forwards;
}

/* The dancer. Three poses traced off the hero footage, inline in the page as
   real SVG -- Chrome will not run animation inside a background-image, so a
   data URI silently renders nothing at all. Each pose draws itself fully,
   holds, wipes away, and only then does the next one start. */
.ldr {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: clamp(150px, 26vh, 210px);
  animation: dancerFade .6s ease-out forwards;
}
.ldr svg { display: block; width: 100%; height: auto; }
.ldr path:nth-child(2) { animation-delay: 2.6s; }
.ldr path:nth-child(3) { animation-delay: 5.2s; }
.ldr path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ldrDraw 7.8s linear infinite;
}
html:not(.waiting) .ldr { display: none; }
html.waiting .ldr { animation: none; opacity: 1; }

/* Each pose owns 2.6s of the 7.8s cycle: 1.3s drawing on end to end, 0.5s held
   complete, 0.4s wiping away, then 0.4s of empty screen before the next pose
   begins. Outside its slot the stroke sits fully offset, i.e. blank, so exactly
   one pose is ever on screen. Paths carry pathLength="1000" so dasharray 1000
   is exactly one full outline -- without it the dash pattern repeats and two
   copies draw at once. */
@keyframes ldrDraw {
  0%     { stroke-dashoffset: 1000; }
  16.7%  { stroke-dashoffset: 0; }
  23.1%  { stroke-dashoffset: 0; }
  28.2%  { stroke-dashoffset: -1000; }
  100%   { stroke-dashoffset: -1000; }
}

@keyframes loaderVeil {
  0%   { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes loaderGlow {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes dancerFade {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  html::before, body::before, body::after { display: none; }
}