/*
Theme Name: Rising Star Dance Studio - Modern Dance Academy
Theme URI: https://risingstardancestudio.co.za/
Author: Homeward Connect
Description: Approved Rising Star Dance Studio design, with interactive month calendar beginning September 2025, classes, albums and WhatsApp enquiry.
Version: 12.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rising-star-modern
*/


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap');


/* =========================================================
   ROOT
========================================================= */

:root {
  --bg: #000;
  --bg-elevated: #0a0a0a;
  --bg-card: #111;

  --pink: #ff2d95;
  --cyan: #00e5ff;
  --lime: #b8ff3c;
  --yellow: #ffe566;

  --cream: #f4f4f4;
  --muted: #b0b0b0;
  --dim: #7a7a7a;

  --border: rgba(255,255,255,.12);

  --rainbow:
    linear-gradient(
      90deg,
      #00e5ff,
      #b8ff3c,
      #ffe566,
      #ff2d95,
      #7c4dff
    );

  --ease: .35s ease;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--cream);
  line-height: 1.6;
  font-weight: 300;
}

body.gallery-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}


/* =========================================================
   GENERAL
========================================================= */

.eyebrow {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .7rem;
  font-weight: 500;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: .9rem;
}

.section-title em,
.hero-title em,
.offer h2 em {
  font-style: italic;
  background: var(--rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-desc,
.lead {
  color: var(--muted);
}

.section {
  padding: 4.2rem 0;
}

.section-header {
  margin-bottom: 2.4rem;
}

.center {
  text-align: center;
}

.section-desc {
  max-width: 520px;
  margin: 0 auto;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .75rem 1.4rem;

  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;

  border: 1px solid transparent;

  cursor: pointer;

  background: transparent;
  color: #fff;

  font-family: var(--sans);

  transition:
    transform var(--ease),
    filter var(--ease),
    border-color var(--ease),
    color var(--ease);
}

.btn-primary {
  background: var(--rainbow);
  color: #000;
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: #555;
}

.btn-ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn-full {
  width: 100%;
}


/* =========================================================
   HEADER
========================================================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  padding: .85rem 0;

  transition:
    background .35s ease,
    border-color .35s ease,
    backdrop-filter .35s ease;
}

.header.scrolled {
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.logo-text {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.nav {
  display: flex;
  gap: 1.25rem;
}

.nav-link {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);

  position: relative;

  transition: color .25s ease;
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 1px;

  background: var(--pink);

  transition: width .25s ease;
}

.nav-link:hover {
  color: #fff;
}

.nav-link:hover::after {
  width: 100%;
}

.header-cta {
  padding: .55rem 1rem;
  font-size: .62rem;
}

.nav-toggle {
  display: none;

  background: none;
  border: none;

  cursor: pointer;
}

.nav-toggle span {
  display: block;

  width: 20px;
  height: 1.5px;

  background: #fff;

  margin: 4px 0;

  transition:
    transform .3s ease,
    opacity .3s ease;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 88vh;

  display: flex;
  align-items: center;

  padding: 6.5rem 0 4rem;

  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: brightness(.38);

  animation: heroZoom 14s ease-in-out infinite alternate;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.3),
      #000
    );
}

.hero-content {
  position: relative;
  z-index: 2;

  max-width: 640px;

  animation: heroReveal 1s ease forwards;
}

.hero-title {
  font-family: var(--serif);

  font-size: clamp(2.4rem, 6vw, 4.2rem);

  font-weight: 400;
  line-height: 1.08;

  margin-bottom: 1rem;
}

.hero-sub {
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.hero-actions {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

.hero-badge {
  margin-top: 1.1rem;

  display: inline-block;

  padding: .4rem .9rem;

  border: 1px solid var(--pink);

  color: var(--pink);

  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* =========================================================
   ABOUT
========================================================= */

.about-grid {
  display: grid;

  grid-template-columns: 1.15fr .85fr;

  gap: 3rem;

  align-items: center;
}

.about-content p {
  color: var(--muted);
  margin-bottom: .9rem;
}

.stats {
  display: flex;
  gap: 2rem;

  margin-top: 1.6rem;

  padding-top: 1.4rem;

  border-top: 1px solid var(--border);
}

.stat-num {
  display: block;

  font-family: var(--serif);

  font-size: 2rem;

  color: var(--cyan);

  line-height: 1;
}

.stat-label {
  font-size: .65rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--dim);
}

.about-img-wrap {
  width: min(280px, 100%);

  aspect-ratio: 1;

  margin: 0 auto;

  border-radius: 50%;

  overflow: hidden;

  border: 3px solid transparent;

  background:
    linear-gradient(#000,#000) padding-box,
    var(--rainbow) border-box;

  animation: floatingLogo 5s ease-in-out infinite;
}

.about-img-wrap img {
  width: 100%;
  height: 100%;
}


/* =========================================================
   CLASSES
========================================================= */

.classes {
  background: var(--bg-elevated);
}

.classes-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.1rem;
}

.class-card {
  background: var(--bg-card);

  border: 1px solid var(--border);

  overflow: hidden;

  transition:
    transform var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}

.class-card:hover {
  transform: translateY(-5px);

  border-color: var(--pink);

  box-shadow:
    0 15px 40px rgba(0,0,0,.3);
}

.class-img {
  aspect-ratio: 16/10;

  overflow: hidden;
}

.class-img img {
  width: 100%;
  height: 100%;

  transition: transform .6s ease;
}

.class-card:hover .class-img img {
  transform: scale(1.06);
}

.class-body {
  padding: 1.1rem;
}

.class-body h3 {
  font-family: var(--serif);

  font-size: 1.25rem;

  margin-bottom: .4rem;
}

.class-body p {
  font-size: .88rem;

  color: var(--muted);

  margin-bottom: .7rem;
}

.class-meta {
  font-size: .65rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--cyan);
}


/* =========================================================
   SCHEDULE
========================================================= */

.schedule-tabs {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: .4rem;

  margin-bottom: 1.4rem;
}

.tab-btn {
  padding: .45rem 1rem;

  font-size: .7rem;

  letter-spacing: .08em;

  text-transform: uppercase;

  background: transparent;

  border: 1px solid var(--border);

  color: var(--muted);

  cursor: pointer;

  font-family: var(--sans);

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background: var(--pink);

  color: #fff;

  border-color: var(--pink);
}

.schedule-panel {
  display: none;

  max-width: 520px;

  margin: 0 auto;

  animation: fadeUp .4s ease;
}

.schedule-panel.active {
  display: block;
}

.schedule-item {
  display: flex;

  gap: 1.2rem;

  padding: .85rem 0;

  border-bottom: 1px solid var(--border);

  align-items: baseline;
}

.time {
  min-width: 105px;

  color: var(--lime);

  font-size: .85rem;
}

.info h4 {
  font-family: var(--serif);

  font-size: 1.05rem;
}

.info span {
  font-size: .82rem;

  color: var(--muted);
}

.schedule-note {
  text-align: center;

  margin-top: 1.3rem;

  font-size: .82rem;

  color: var(--dim);
}


/* =========================================================
   CALENDAR
========================================================= */

.calendar-section {
  background: var(--bg-elevated);
}

.calendar-months {
  max-width: 860px;

  margin: 0 auto;
}

.cal-month-block {
  margin-bottom: 2rem;
}

.month-title {
  font-family: var(--serif);

  font-size: 1.3rem;

  color: var(--yellow);

  margin-bottom: .9rem;

  padding-bottom: .4rem;

  border-bottom: 1px solid var(--border);
}

.events-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: .8rem;
}

.event-item {
  background: var(--bg-card);

  border: 1px solid var(--border);

  padding: 1rem .8rem;

  text-align: center;

  cursor: pointer;

  min-height: 140px;

  transition:
    transform var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}

.event-item:hover {
  border-color: var(--cyan);

  transform: translateY(-4px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.event-date-box {
  width: 52px;

  margin: 0 auto .7rem;

  background: rgba(255,45,149,.14);

  border-radius: 8px;

  padding: .4rem;
}

.event-date-box .day {
  display: block;

  font-size: 1.25rem;

  font-weight: 600;

  color: var(--pink);

  line-height: 1;
}

.event-date-box .month {
  display: block;

  font-size: .6rem;

  letter-spacing: .1em;

  color: var(--muted);

  margin-top: .1rem;
}

.event-info h3 {
  font-family: var(--serif);

  font-size: 1rem;

  margin-bottom: .25rem;
}

.event-info p {
  font-size: .75rem;

  color: var(--muted);
}

 .event-item.has-image {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-thumb-wrap {
  width: 100%;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080808;
  border-bottom: 1px solid var(--border);
  padding: .55rem;
  overflow: hidden;
}

.event-thumb {
  width: 100%;
  height: 230px;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0;
  background: #080808;
}

.event-item .event-date-box {
  margin-top: .9rem;
}

.event-item .event-info {
  width: 100%;
  text-align: center;
  padding: 0 .4rem .8rem;
}

.event-item .event-info h3,
.event-item .event-info p {
  text-align: center;
}

.event-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 0 auto 1.4rem;
  width: 100%;
}

.event-gallery figure {
  margin: 0;
  padding: .5rem;
  background: #080808;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.event-gallery img {
  width: 100%;
  height: 235px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #080808;
  border-radius: 5px;
}

.event-gallery-title {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
  text-align: center;
}

.ach-card {
  position: relative;
  overflow: hidden;
}

.ach-logo {
  width: 110px;
  height: 70px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  overflow: hidden;
}

.ach-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff;
}

@media (max-width: 720px) {
  .event-gallery { grid-template-columns: 1fr; }
  .event-gallery figure { min-height: 260px; }
  .event-gallery img { height: 255px; }
  .event-thumb-wrap, .event-thumb { height: 240px; min-height: 240px; }
}


.modal-event-hero {
  width: 100%;
  min-height: 250px;
  max-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080808;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  overflow: hidden;
}

.modal-event-hero img {
  width: 100%;
  height: 350px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #080808;
}

/* =========================================================
   EVENT MODAL
========================================================= */

.modal {
  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.88);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 200;

  opacity: 0;

  visibility: hidden;

  padding: 1.2rem;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.modal.open {
  opacity: 1;

  visibility: visible;
}

.modal-content {
  background: #111;

  border: 1px solid var(--border);

  max-width: 920px;

  width: 100%;

  max-height: 82vh;

  overflow: auto;

  padding: 1.6rem;

  position: relative;

  transform: translateY(20px) scale(.97);

  transition: transform .35s ease;
}

.modal.open .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;

  top: .7rem;

  right: 1rem;

  background: none;

  border: none;

  color: #fff;

  font-size: 1.6rem;

  cursor: pointer;
}

#modalBody h3 {
  font-family: var(--serif);

  font-size: 1.3rem;

  margin-bottom: .25rem;
}

.modal-date {
  color: var(--cyan);

  font-size: .82rem;

  margin-bottom: .9rem;
}

#modalBody li {
  padding: .35rem 0;

  border-bottom: 1px solid var(--border);

  font-size: .9rem;
}

.highlight {
  color: var(--yellow);

  font-weight: 500;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio-section {
  position: relative;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(255,45,149,.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(0,229,255,.07),
      transparent 30%
    ),
    #000;

  overflow: hidden;
}


/* portfolio intro */

.portfolio-intro {
  max-width: 650px;

  margin: 0 auto 2.5rem;

  text-align: center;
}


/* portfolio feature */

.portfolio-feature {
  max-width: 1000px;

  margin: 0 auto 1.2rem;

  display: grid;

  grid-template-columns: .85fr 1.15fr;

  background: var(--bg-card);

  border: 1px solid var(--border);

  overflow: hidden;

  position: relative;

  box-shadow:
    0 25px 70px rgba(0,0,0,.3);
}

.portfolio-feature-content {
  padding: 3rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  position: relative;

  z-index: 2;
}

.portfolio-feature-content::before {
  content: "";

  position: absolute;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background: rgba(255,45,149,.07);

  filter: blur(20px);

  top: -50px;
  left: -50px;

  pointer-events: none;
}

.portfolio-tag {
  display: inline-block;

  width: fit-content;

  padding: .45rem .8rem;

  margin-bottom: 1rem;

  border: 1px solid rgba(255,45,149,.4);

  background: rgba(255,45,149,.08);

  color: var(--pink);

  font-size: .62rem;

  letter-spacing: .15em;

  font-weight: 500;
}

.portfolio-feature-content h3 {
  font-family: var(--serif);

  font-size: clamp(1.8rem, 3vw, 2.6rem);

  line-height: 1.05;

  margin-bottom: 1rem;
}

.portfolio-feature-content p {
  color: var(--muted);

  line-height: 1.75;

  margin-bottom: 1.5rem;

  max-width: 430px;
}

.portfolio-feature-image {
  position: relative;

  min-height: 390px;

  padding: 0;

  border: 0;

  background: #080808;

  cursor: pointer;

  overflow: hidden;
}

.portfolio-feature-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .5s ease;
}

.portfolio-feature-image:hover img {
  transform: scale(1.06);

  filter: brightness(.65);
}

.portfolio-feature-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: .5rem;

  background: rgba(0,0,0,.28);

  opacity: 0;

  transition: opacity .35s ease;
}

.portfolio-feature-image:hover .portfolio-feature-overlay {
  opacity: 1;
}


/* portfolio grid */

.portfolio-grid {
  max-width: 1000px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: .8rem;
}

.portfolio-card {
  position: relative;

  padding: 0;

  background: var(--bg-card);

  border: 1px solid var(--border);

  overflow: hidden;

  cursor: pointer;

  text-align: left;

  color: #fff;

  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity .6s ease,
    transform .6s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.portfolio-card.visible {
  opacity: 1;

  transform: translateY(0);
}

.portfolio-card:hover {
  border-color: var(--pink);

  transform: translateY(-5px);

  box-shadow:
    0 16px 40px rgba(0,0,0,.3);
}

.portfolio-card-image {
  position: relative;

  aspect-ratio: 1 / 1.08;

  overflow: hidden;

  background: #080808;
}

.portfolio-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .6s cubic-bezier(.2,.8,.2,1),
    filter .4s ease;
}

.portfolio-card:hover .portfolio-card-image img {
  transform: scale(1.08);

  filter: brightness(.62);
}

.portfolio-card-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0,0,0,.18);

  opacity: 0;

  transition: opacity .3s ease;
}

.portfolio-card:hover .portfolio-card-overlay {
  opacity: 1;
}

.portfolio-plus {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255,255,255,.7);

  background: rgba(0,0,0,.5);

  color: #fff;

  font-size: 1.5rem;

  font-weight: 300;

  transition:
    transform .35s ease,
    background .35s ease;
}

.portfolio-card:hover .portfolio-plus {
  transform: rotate(90deg);

  background: rgba(255,45,149,.25);
}

.portfolio-card-info {
  padding: .75rem .8rem .85rem;
}

.portfolio-card-info span {
  display: block;

  font-size: .58rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--pink);

  margin-bottom: .2rem;
}

.portfolio-card-info h3 {
  font-family: var(--serif);

  font-size: .98rem;

  font-weight: 400;
}


/* portfolio label */

.portfolio-count {
  text-align: center;

  margin-top: 1.5rem;

  color: var(--dim);

  font-size: .65rem;

  letter-spacing: .12em;

  text-transform: uppercase;
}


/* =========================================================
   PORTFOLIO LIGHTBOX
========================================================= */

.portfolio-lightbox {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.2rem;

  background: rgba(0,0,0,.96);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.portfolio-lightbox.open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.portfolio-lightbox-backdrop {
  position: absolute;

  inset: 0;

  cursor: pointer;
}

.portfolio-lightbox-content {
  position: relative;

  z-index: 2;

  width: min(1200px, 94vw);

  height: min(90vh, 850px);

  display: flex;

  align-items: center;

  justify-content: center;

  transform: scale(.94);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1);
}

.portfolio-lightbox.open
.portfolio-lightbox-content {
  transform: scale(1);
}

.portfolio-lightbox-image-wrap {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;
}

.portfolio-lightbox-image-wrap img {
  max-width: 100%;
  max-height: 88vh;

  width: auto;
  height: auto;

  object-fit: contain;

  box-shadow:
    0 30px 90px rgba(0,0,0,.6);

  transition:
    opacity .2s ease;
}

.portfolio-lightbox-close,
.portfolio-lightbox-prev,
.portfolio-lightbox-next {
  position: absolute;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255,255,255,.2);

  background: rgba(10,10,10,.8);

  color: #fff;

  cursor: pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.portfolio-lightbox-close:hover,
.portfolio-lightbox-prev:hover,
.portfolio-lightbox-next:hover {
  background: rgba(255,45,149,.2);

  border-color: var(--pink);
}

.portfolio-lightbox-close {
  top: 10px;
  right: 10px;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  font-size: 1.7rem;
}

.portfolio-lightbox-close:hover {
  transform: rotate(90deg);
}

.portfolio-lightbox-prev,
.portfolio-lightbox-next {
  top: 50%;

  width: 50px;
  height: 50px;

  border-radius: 50%;

  font-size: 1.1rem;
}

.portfolio-lightbox-prev {
  left: 5px;

  transform: translateY(-50%);
}

.portfolio-lightbox-next {
  right: 5px;

  transform: translateY(-50%);
}

.portfolio-lightbox-prev:hover,
.portfolio-lightbox-next:hover {
  transform:
    translateY(-50%)
    scale(1.08);
}

.portfolio-lightbox-caption {
  position: absolute;

  left: 50%;
  bottom: 0;

  transform: translateX(-50%);

  width: 100%;

  padding: 2rem 4rem 1rem;

  text-align: center;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.9),
      transparent
    );

  pointer-events: none;
}

.portfolio-lightbox-caption span {
  display: block;

  color: var(--cyan);

  font-size: .62rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  margin-bottom: .2rem;
}

.portfolio-lightbox-caption strong {
  font-family: var(--serif);

  font-size: 1.15rem;

  font-weight: 400;
}


/* =========================================================
   FOUNDER
========================================================= */

.founder-grid {
  display: grid;

  grid-template-columns: .8fr 1.2fr;

  gap: 2.4rem;

  align-items: center;
}

.founder-img {
  width: min(240px, 100%);

  aspect-ratio: 1;

  margin: 0 auto;

  border-radius: 50%;

  overflow: hidden;

  border: 3px solid transparent;

  background:
    linear-gradient(#000,#000) padding-box,
    var(--rainbow) border-box;
}

.founder-img img {
  width: 100%;
  height: 100%;

  object-position: top;
}

.founder-content h3 {
  font-family: var(--serif);

  font-size: 1.6rem;
}

.founder-role {
  font-size: .7rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--pink);

  margin: .3rem 0 1rem;
}

.founder-content p {
  color: var(--muted);

  margin-bottom: .8rem;
}

.quote {
  color: var(--yellow) !important;

  font-style: italic;
}


/* =========================================================
   ACHIEVEMENTS
========================================================= */

.ach-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;
}

.ach-card {
  background: var(--bg-card);

  border: 1px solid var(--border);

  text-align: center;

  transition:
    transform .3s ease,
    border-color .3s ease;
}

.ach-card:hover {
  transform: translateY(-4px);

  border-color: var(--pink);
}

.medal {
  padding: 1.1rem .8rem;

  font-size: .78rem;

  font-weight: 600;

  letter-spacing: .1em;

  text-transform: uppercase;
}

.ach-card.gold .medal {
  background: rgba(255,229,102,.12);

  color: var(--yellow);
}

.ach-card.highgold .medal {
  background: rgba(255,45,149,.14);

  color: var(--pink);
}

.ach-card.silver .medal {
  background: rgba(255,255,255,.08);

  color: #c0c0c0;
}

.ach-body {
  padding: .8rem .9rem 1rem;
}

.ach-body h4 {
  font-family: var(--serif);

  font-size: 1.05rem;
}

.ach-body span {
  font-size: .72rem;

  color: var(--muted);
}


/* =========================================================
   OFFER
========================================================= */

.offer {
  text-align: center;

  padding: 3.2rem 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,45,149,.12),
      rgba(0,229,255,.08)
    );

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);
}

.offer h2 {
  font-family: var(--serif);

  font-size: clamp(1.6rem, 3.5vw, 2.3rem);

  margin-bottom: .6rem;
}

.offer p {
  color: var(--muted);

  margin-bottom: 1.1rem;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;
}

.contact-details {
  margin-top: 1.4rem;

  display: flex;

  flex-direction: column;

  gap: 1.1rem;
}

.detail .label {
  display: block;

  font-size: .65rem;

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--pink);

  margin-bottom: .25rem;
}

.detail span,
.detail a {
  color: var(--muted);
}

.detail a:hover {
  color: var(--cyan);
}

.contact-form {
  background: var(--bg-card);

  border: 1px solid var(--border);

  padding: 1.5rem;
}

.form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .9rem;
}

.form-group {
  margin-bottom: .95rem;
}

.form-group label {
  display: block;

  font-size: .65rem;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--dim);

  margin-bottom: .3rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  background: transparent;

  border: none;

  border-bottom: 1px solid var(--border);

  padding: .55rem 0;

  color: #fff;

  font-family: var(--sans);

  outline: none;
}

.form-group select option {
  background: #111;

  color: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-bottom-color: var(--pink);
}

.form-note {
  text-align: center;

  font-size: .7rem;

  color: var(--dim);

  margin-top: .7rem;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  background: var(--bg-elevated);

  border-top: 1px solid var(--border);

  padding: 2.4rem 0 1.3rem;
}

.footer-inner {
  display: grid;

  grid-template-columns: 1.3fr 1fr;

  gap: 1.6rem;
}

.footer-brand p {
  margin-top: .7rem;

  font-size: .85rem;

  color: var(--dim);

  max-width: 260px;
}

.footer-links {
  display: flex;

  gap: 2.6rem;

  justify-content: flex-end;
}

.footer-links h4 {
  font-size: .65rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--cyan);

  margin-bottom: .7rem;
}

.footer-links a {
  display: block;

  font-size: .85rem;

  color: var(--muted);

  margin-bottom: .35rem;
}

.footer-links a:hover {
  color: var(--pink);
}

.footer-bottom {
  grid-column: 1 / -1;

  padding-top: 1.3rem;

  margin-top: .6rem;

  border-top: 1px solid var(--border);

  text-align: center;
}

.footer-bottom p {
  font-size: .7rem;

  color: var(--dim);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroReveal {

  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

@keyframes heroZoom {

  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }

}

@keyframes floatingLogo {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}

@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

  .about-grid,
  .founder-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .classes-grid,
  .ach-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}


@media (max-width: 900px) {

  .portfolio-feature {
    grid-template-columns: 1fr;
  }

  .portfolio-feature-image {
    min-height: 350px;

    grid-row: 1;
  }

  .portfolio-feature-content {
    padding: 2rem;
  }

}


@media (max-width: 800px) {

  .events-grid {
    grid-template-columns: 1fr 1fr;
  }

}


@media (max-width: 700px) {

  .nav {
    position: fixed;

    top: 0;
    right: 0;

    width: min(260px, 82vw);

    height: 100vh;

    background: #0a0a0a;

    flex-direction: column;

    padding: 4.5rem 1.4rem;

    gap: 1rem;

    transform: translateX(100%);

    transition:
      transform var(--ease);

    border-left: 1px solid var(--border);
  }

  .nav.open {
    transform: translateX(0);
  }

  .nav-toggle {
    display: block;

    z-index: 120;
  }

  .header-cta {
    display: none;
  }

  .classes-grid,
  .ach-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 3.2rem 0;
  }

  .hero {
    min-height: 78vh;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: .6rem;
  }

  .portfolio-card-info {
    padding: .65rem;
  }

  .portfolio-card-info h3 {
    font-size: .9rem;
  }

  .portfolio-feature-image {
    min-height: 270px;
  }

}


@media (max-width: 520px) {

  .events-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .schedule-item {
    flex-direction: column;

    gap: .2rem;
  }

  .time {
    min-width: auto;
  }

  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }

  .portfolio-card-image {
    aspect-ratio: 1 / 1.12;
  }

  .portfolio-lightbox {
    padding: .4rem;
  }

  .portfolio-lightbox-content {
    width: 100%;
    height: 90vh;
  }

  .portfolio-lightbox-prev,
  .portfolio-lightbox-next {
    width: 42px;
    height: 42px;
  }

  .portfolio-lightbox-prev {
    left: 2px;
  }

  .portfolio-lightbox-next {
    right: 2px;
  }

  .portfolio-lightbox-close {
    top: 3px;
    right: 3px;
  }

  .portfolio-lightbox-caption {
    padding:
      2rem
      2.8rem
      .8rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .portfolio-card {
    opacity: 1;
    transform: none;
  }

}


@media (max-width: 600px) {
  .ach-logo {
    width: 100px;
    height: 64px;
  }
}


/* Competition Results - text-only cards */
.achievement-card,
.result-card,
.ach-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.achievement-card img,
.result-card img,
.ach-card img {
  display: none !important;
}

.achievement-card .ach-logo,
.achievement-card .ach-profile,
.result-card .ach-logo,
.result-card .ach-profile,
.ach-card .ach-logo,
.ach-card .ach-profile {
  display: none !important;
}


/* Updated class images - consistent crop */
.class-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.class-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}



/* MODERN DANCE ACADEMY — demo design system; all source content preserved */
:root{--bg:#f8f7f5;--bg-elevated:#fff;--bg-card:#fff;--cream:#1b1a21;--muted:#5d5a66;--dim:#6d6873;--border:rgba(29,26,34,.12);--pink:#b82b70;--cyan:#267f95;--lime:#779246;--yellow:#b4883b;--rainbow:linear-gradient(90deg,#b82b70,#8161a5,#267f95,#779246,#b4883b);--serif:Georgia,'Times New Roman',serif;--sans:'Outfit',Arial,sans-serif}
body{background:#f8f7f5;color:#1b1a21;font-weight:400}
.header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e9e5e4!important;box-shadow:0 3px 24px rgba(0,0,0,.035)}
.header .nav-link,.header .logo-text{color:#22202a!important}
.header .nav-link:hover{color:#a33170!important}
.header .logo-img{object-fit:contain}
.header .header-cta,.btn-primary{background:#22202a!important;color:#fff!important;border-color:#22202a!important;border-radius:2px!important;box-shadow:none!important}
.btn-ghost{border-color:#f4f0ed!important;color:#fff!important;background:rgba(255,255,255,.1)!important}
.hero{background:#201d27!important;min-height:680px}
.hero .hero-img{filter:saturate(.65) contrast(.97)}
.hero .hero-overlay{background:linear-gradient(90deg,rgba(20,18,27,.94),rgba(20,18,27,.7) 45%,rgba(20,18,27,.22))!important}
.hero .eyebrow{color:#e8cfdb!important;letter-spacing:.25em}
.hero-title{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.055em!important;font-size:clamp(62px,7.2vw,112px)!important;line-height:.99!important}
.hero-title em{font-style:italic!important;color:#f3d6e6!important;-webkit-text-fill-color:#f3d6e6!important;background:none!important}
.hero-sub{color:#f1edf0!important;max-width:610px}
.hero-badge{color:#fff!important;border:1px solid rgba(255,255,255,.38)!important;background:rgba(255,255,255,.1)!important}
.hero .btn-primary{background:#fff!important;color:#22202a!important;border-color:#fff!important}
.academy-band{background:#fff;border-bottom:1px solid #e8e4e5}
.academy-band-inner{display:grid;grid-template-columns:1fr 1fr 1.3fr 1.25fr;gap:20px;padding-top:32px;padding-bottom:32px}
.academy-band-inner>div{display:flex;flex-direction:column;border-right:1px solid #e7e3e5;padding-right:20px}
.academy-band-inner>div:last-child{border:0}
.band-number{font:400 42px/1.1 Georgia,serif;letter-spacing:-.05em;color:#22202a}
.band-label,.band-action span{font-size:12px;color:#69646c;letter-spacing:.07em;text-transform:uppercase}
.band-action{justify-content:center}.band-action a{font-size:16px;font-weight:600;color:#a12e71;margin-top:7px}
.section{background:#f8f7f5!important;color:#24212a!important}
.section:nth-of-type(even){background:#fff!important}
.section-title{font-family:Georgia,serif!important;font-weight:400!important;letter-spacing:-.045em!important;line-height:1.08!important}
.section-title em{color:#9d3674!important;background:none!important;-webkit-text-fill-color:#9d3674!important}
.eyebrow{color:#9d3674!important;letter-spacing:.2em!important}
.section p,.section li{color:#57535e}
.section .lead{color:#302d36}
.classes,.calendar-section,.achievements{background:#fff!important}
.class-card,.achievement-card,.result-card,.ach-card,.event-card,.portfolio-card{border-radius:3px!important;box-shadow:0 10px 30px rgba(29,24,37,.055)!important}
.class-card{background:#fff!important;border:1px solid #e8e3e5!important;overflow:hidden}
.class-card:hover{transform:translateY(-3px)}
.class-card img{filter:saturate(.82)}
.schedule{background:#f4f1ee!important}
.schedule table,.schedule-card,.day-panel,.calendar-grid{background:#fff!important}
.calendar-section{background:#fff!important}
.calendar-section .event-thumb{border-radius:2px}
.portfolio-section{background:#f7f5f3!important}
#founder{background:#fff!important}
.achievements{background:#f7f5f3!important}
.offer{background:#29232d!important;color:#fff!important}
.offer p,.offer h2,.offer .section-title{color:#fff!important}
.contact{background:#fff!important}
.contact input,.contact textarea,.contact select{background:#fff!important;color:#29242c!important;border:1px solid #c9c4ca!important}
.footer{background:#211d25!important;color:#fff!important}
.footer p,.footer a,.footer .logo-text{color:#f1ebf0!important}
.nav-toggle span{background:#25212b!important}
@media(max-width:900px){.academy-band-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.academy-band-inner>div:nth-child(2){border:0}.header .nav{background:#fff!important}.header .nav a{color:#24212b!important}}
@media(max-width:560px){.academy-band-inner{grid-template-columns:1fr 1fr;gap:20px}.band-number{font-size:33px}.band-label{font-size:10px}.hero{min-height:660px}.hero-title{font-size:clamp(53px,13vw,78px)!important}}


/* Year-at-a-glance calendar: names, dates, no thumbnails */
.year-calendar-section{background:#faf9f7!important}
.year-switch{display:flex;gap:8px;justify-content:center;margin:20px auto 38px}
.year-choice{padding:12px 32px;border:1px solid #c8c3ca;background:#fff;color:#27212c;cursor:pointer;font:600 15px Outfit,Arial,sans-serif}
.year-choice.active{background:#29232d;color:#fff;border-color:#29232d}
.annual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.annual-grid[hidden]{display:none!important}
.annual-month{background:#fff;border:1px solid #e5e0e4;box-shadow:0 8px 28px rgba(34,24,36,.045);padding:18px;min-width:0}
.annual-month h3{font:400 27px/1.2 Georgia,serif;color:#241e29;margin:0 0 17px;display:flex;justify-content:space-between;align-items:center}
.annual-month h3 span{font:500 12px Outfit,Arial,sans-serif;color:#817a83}
.month-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;align-items:stretch}
.weekday{text-align:center;font:600 11px Outfit,Arial,sans-serif;color:#88808a;padding:6px 0}
.calendar-date,.date-empty{min-height:48px;min-width:0;border:1px solid #f2eef1;padding:5px 3px;background:#fcfbfc}
.calendar-date .date-num{display:block;font:500 11px Outfit,Arial,sans-serif;color:#5c5560;text-align:right}
.calendar-date.has-event{grid-column:span 1;background:#f9f1f6;border-color:#e4bfd3}
.calendar-date.has-event .date-num{color:#9d326d;font-weight:700}
.calendar-event{display:block;width:100%;margin:4px 0 0;padding:5px 3px;border:0;border-left:2px solid #a33572;background:#f1dce9;color:#532341;text-align:left;cursor:pointer;border-radius:0;font:600 9px/1.3 Outfit,Arial,sans-serif;overflow-wrap:anywhere;box-shadow:none!important;transform:none!important}
.calendar-event:hover,.calendar-event:focus-visible{background:#eac3d9;outline:2px solid #b04a83;outline-offset:1px}
.calendar-event span{display:block}
.calendar-note{font-size:13px!important;color:#6b626c!important;margin-top:22px;text-align:center}
@media(max-width:1050px){.annual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.annual-grid{grid-template-columns:1fr}.annual-month{padding:20px}.calendar-date,.date-empty{min-height:53px}.calendar-event{font-size:10px}}



:root{--bg:#f8f7f5;--bg-elevated:#fff;--bg-card:#fff;--cream:#211d25;--muted:#58535e;--dim:#6a6470;--border:#e4dfe3;--pink:#a42f71;--cyan:#267f95;--lime:#779246;--yellow:#a9803a}
body{background:#f8f7f5!important;color:#211d25!important}
section.section,section.about,section.classes,section.schedule,section.calendar-section,section.portfolio-section,section.achievements,section.contact,section#founder{background:#f8f7f5!important;color:#211d25!important}
section.classes,section.calendar-section,section#founder,section.contact{background:#fff!important}
section .section-title,section .section-title span,section h1,section h2,section h3,section h4,section .class-body h3,section .class-body h4,section .schedule-title,section .calendar-title{color:#211d25!important}
section .section-title em{color:#a42f71!important;-webkit-text-fill-color:#a42f71!important;background:none!important}
section p,section li,section .section-desc,section .class-body p,section .portfolio-card-info p{color:#59535f!important}
section .eyebrow,section .class-meta{color:#a42f71!important}
section .class-card,section .portfolio-card,section .achievement-card,section .ach-card,section .result-card{background:#fff!important;color:#211d25!important;border-color:#e5e0e4!important}
.portfolio-card{opacity:1!important;transform:none!important;visibility:visible!important}
.portfolio-card-info,.portfolio-card-info h3,.portfolio-card-info h4{color:#211d25!important}
.hero,.offer{color:#fff!important}
.hero h1,.hero h2,.hero p,.hero .hero-title,.offer h1,.offer h2,.offer p,.offer .section-title{color:#fff!important}
.hero .hero-title em{color:#f4d4e6!important;-webkit-text-fill-color:#f4d4e6!important}
.hero .eyebrow{color:#e9c9da!important}
.hero .btn-primary{background:#fff!important;color:#211d25!important}
.offer .btn-primary{background:#fff!important;color:#211d25!important}
.footer,.footer *{color:#f4eef2!important}
.header .logo-text,.header a:not(.header-cta){color:#211d25!important}
.header .header-cta{color:#fff!important}
.contact input,.contact textarea,.contact select{color:#211d25!important;background:#fff!important}
.modal,.lightbox{color:#fff}
.modal h2,.modal p,.lightbox h2,.lightbox p{color:#fff}
.academy-band{background:#fff}
@media(max-width:900px){.header .nav{background:#fff!important}.header .nav a{color:#211d25!important}}


/* polished academic editorial design, high contrast and responsive layout */
html{scroll-behavior:smooth}body{overflow-x:hidden} .section{scroll-margin-top:88px}
.academy-class-detail{padding:0 23px 24px;background:#fff;color:#28232d}.academy-class-tag{font:600 13px/1.4 Outfit,Arial,sans-serif!important;letter-spacing:.025em;color:#a03270!important;margin:0 0 9px}.academy-class-copy{font:400 14px/1.7 Outfit,Arial,sans-serif!important;color:#5a5561!important;margin:0 0 18px}.academy-class-cta,.academy-inline-link{display:inline-flex;align-items:center;gap:10px;font:600 13px/1.5 Outfit,Arial,sans-serif;color:#8d2d67!important;text-decoration:none;border-bottom:1px solid #c99bb8;padding-bottom:4px}.academy-class-cta:hover,.academy-inline-link:hover{color:#28232d!important}
.academy-note{margin:40px 0 0;padding:28px 30px;background:#f1edee;border-left:3px solid #a03371;display:flex;align-items:center;justify-content:space-between;gap:24px}.academy-note strong{font:500 23px Georgia,serif;color:#29242d}.academy-note p{margin:9px 0 0;font:400 14px/1.6 Outfit,Arial,sans-serif;color:#59535f}.academy-note a{color:#7e245c;font:600 14px Outfit,Arial,sans-serif;white-space:nowrap}
.founder-milestones{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}.founder-milestones>div{padding:19px;border-top:2px solid #b6769b;background:#f7f4f5}.founder-milestones strong{display:block;font:400 32px Georgia,serif;color:#25202a}.founder-milestones span{display:block;font:400 12px/1.5 Outfit,Arial,sans-serif;color:#57515b;margin-top:5px}
.album-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;border-top:1px solid #ded7dc;padding:30px 0 23px;margin-top:10px}.album-heading h3{font:400 37px Georgia,serif;color:#241f29;margin:5px 0 10px}.album-heading p{font:400 14px/1.65 Outfit,Arial,sans-serif;color:#5c5660;max-width:640px;margin:0}.album-heading .album-kicker{font:600 11px Outfit,Arial,sans-serif;color:#9d346e;letter-spacing:.16em}.album-count{font:600 12px Outfit,Arial,sans-serif;color:#716975;white-space:nowrap}
.portfolio-grid .portfolio-card{opacity:1!important;transform:none!important;visibility:visible!important}.portfolio-grid{gap:15px!important}.portfolio-card-image img{filter:saturate(.88)}
#achievements .ach-card{background:#fff!important;border:1px solid #e9e4e6!important}#achievements .ach-body h4{color:#28222d!important}#achievements .ach-body span{color:#625a65!important}
#contact .contact-form{background:#f7f5f4!important;border:1px solid #e9e3e6!important;border-radius:4px!important}#contact .contact-form label{color:#2c2630!important}#contact .form-note{color:#655e67!important}
.year-calendar-section .annual-month{border-radius:3px}.year-calendar-section .calendar-event{font-size:10px!important;line-height:1.35!important}.year-calendar-section .calendar-date{min-height:50px}
@media(max-width:1000px){.classes-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:720px){.classes-grid,.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.academy-note{flex-direction:column;align-items:flex-start}.album-heading{align-items:flex-start;flex-direction:column}.founder-milestones{grid-template-columns:1fr 1fr}.contact-grid,.founder-grid{grid-template-columns:1fr!important}.section{padding-top:64px!important;padding-bottom:64px!important}}
@media(max-width:520px){.classes-grid,.portfolio-grid{grid-template-columns:1fr!important}.academy-band-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.academy-class-detail{padding:0 20px 22px}.annual-grid{grid-template-columns:1fr!important}.album-heading h3{font-size:30px}.founder-milestones{grid-template-columns:1fr 1fr}.hero-title{overflow-wrap:normal}.contact-form{padding:20px!important}}

.annual-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}.month-tile{position:relative;min-height:88px;padding:17px 42px 16px 18px;text-align:left;background:#f5f4f4;color:#25212a;border:1px solid #eee9ec;border-radius:9px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;box-shadow:none!important;transition:background .2s,border-color .2s}.month-tile strong{font:600 17px/1.3 Outfit,Arial,sans-serif}.month-sub{font:400 12px/1.6 Outfit,Arial,sans-serif;color:#77707b;margin-top:4px}.month-arrow{position:absolute;right:16px;top:18px;font-size:20px;color:#a13a75}.month-tile:hover,.month-tile:focus-visible{background:#f4eaf0;border-color:#cfa8bd;outline:2px solid transparent}.month-detail-region{max-width:790px;margin:26px auto 0}.month-detail-region[hidden],.month-detail-region .annual-month[hidden]{display:none!important}.month-detail-region .annual-month{padding:26px!important}.month-detail-heading{margin-bottom:18px}.month-back{background:none;border:0;padding:6px 0;color:#a02c71;font:600 14px Outfit,Arial,sans-serif;cursor:pointer}.month-detail-region .calendar-date,.month-detail-region .date-empty{min-height:72px}.month-detail-region .calendar-event{font-size:12px!important;padding:7px!important}.year-calendar-section .calendar-note{margin-top:18px}@media(max-width:680px){.annual-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.month-tile{min-height:80px;padding:13px 25px 13px 12px}.month-tile strong{font-size:14px}.month-sub{font-size:11px}.month-arrow{right:8px;top:14px;font-size:16px}.month-detail-region .annual-month{padding:12px!important}.month-detail-region .calendar-date,.month-detail-region .date-empty{min-height:54px}.month-detail-region .calendar-event{font-size:9px!important}}
/* Ensure closed calendar months stay hidden regardless of layout display rules */
[hidden] { display: none !important; }