/* Keep the service, gallery and review pages in the deck's visual language. */
:root {
  --ink: #171224;
  --deep: #151026;
  --night: #151026;
  --paper: #fffaf2;
  --cream: #f4efe6;
  --coral: #ff6848;
  --lime: #e0f780;
  --line: #ddd5d0;
}

.rexa-page {
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
}

.rexa-page h1,
.rexa-page h2,
.rexa-page h3 {
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -.07em;
}

.rexa-page h1 em,
.rexa-page h2 em {
  color: var(--coral);
  font-style: normal;
  font-weight: 800;
}

/* Keep the explanation attached to its heading on the site's content pages. */
.rexa-page .section-head {
  display: block;
}

.rexa-page .section-head p {
  max-width: 720px;
  margin: 15px 0 0;
}

.rexa-service .site-header,
.rexa-service .hero,
.rexa-service .section--dark,
.rexa-service .site-footer {
  background: var(--deep);
}

.rexa-service .brand img.wordmark {
  width: 112px;
  height: auto;
  max-height: 29px;
  object-fit: contain;
}

.rexa-service .site-nav a {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.rexa-service .site-nav .nav-cta,
.rexa-gallery .header-cta,
.rexa-reviews .nav-cta {
  border-radius: 4px;
  background: var(--coral);
  color: var(--ink);
}

.rexa-service .hero h1 {
  font-size: clamp(46px, 5.2vw, 84px);
  line-height: 1;
  letter-spacing: -.075em;
}

.rexa-service .hero__lead {
  color: #e4dce4;
  line-height: 1.55;
}

.rexa-service .btn {
  border-color: var(--coral);
  border-radius: 4px;
  background: var(--coral);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.rexa-service .btn--outline {
  border-color: rgba(255, 255, 255, .6);
  background: transparent;
  color: #fff;
}

.rexa-service .detail-copy .btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}

.rexa-service .btn--dark {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.rexa-service .section--tint,
.rexa-service .intro-band {
  background: var(--cream);
}

.rexa-service .final-cta {
  background: var(--coral);
}

.rexa-service .section-head h2,
.rexa-service .final-cta h2 {
  letter-spacing: -.07em;
}

.rexa-service .quicknav a {
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.rexa-gallery .hero h1,
.rexa-reviews .hero h1 {
  line-height: .95;
}

.rexa-gallery .closing-actions a,
.rexa-reviews .button {
  border-radius: 4px;
}

.rexa-reviews .visual-seal,
.rexa-reviews .trust-strip {
  background: var(--lime);
}

.rexa-reviews .quote-card blockquote,
.rexa-reviews .social-comments strong {
  font-family: Manrope, Arial, sans-serif;
  letter-spacing: -.04em;
}

@media (max-width: 1000px) {
  .rexa-service .site-nav a { font-size: 11px; }
}

@media (max-width: 760px) {
  .rexa-service .brand img.wordmark { width: 101px; }
  .rexa-service .hero h1 { font-size: clamp(39px, 10vw, 58px); }
}

/* Keep the call action readable even on narrow phones. */
@media (max-width: 760px) {
  .rexa-page .site-header__inner { gap: 12px; }
  .rexa-page .brand { gap: 8px; min-width: 0; }
  .rexa-page .brand img:first-child { width: 30px; height: 30px; flex: none; }
  .rexa-page .site-nav { gap: 0; flex: none; }
  .rexa-page .site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .rexa-service .brand img.wordmark { width: 82px; }
}

/* The deck's full-bleed opening carries through every service and studio page. */
.rexa-service .site-header {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.rexa-service .site-header__inner { min-height: 90px; }
.rexa-service .site-nav .nav-cta { border-radius: 4px; }

.rexa-service .hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep);
}

.rexa-service .hero__grid {
  position: relative;
  display: block;
  min-height: min(830px, 100svh);
}

.rexa-service .hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  min-height: 0;
  height: auto;
}

.rexa-service .hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
}

.rexa-service .hero__art::after {
  background:
    linear-gradient(90deg, rgba(13, 10, 27, .97) 0%, rgba(17, 13, 31, .9) 27%, rgba(17, 13, 31, .58) 51%, rgba(17, 13, 31, .04) 82%),
    linear-gradient(0deg, rgba(14, 10, 27, .58), transparent 32%);
}

.rexa-service .hero__copy {
  position: relative;
  z-index: 1;
  width: min(920px, 75%);
  min-height: min(830px, 100svh);
  padding: 148px 32px 95px max(72px, calc((100vw - 1320px) / 2));
  align-items: flex-start;
}

.rexa-service .hero h1 {
  max-width: 900px;
  font-size: clamp(62px, 6.25vw, 101px);
  line-height: .96;
  letter-spacing: -.078em;
  text-wrap: balance;
}

.rexa-service .hero h1 em {
  color: var(--coral);
  font-style: normal;
}

.rexa-service .hero__lead {
  max-width: 585px;
  margin-top: 32px;
  color: #f0e9ed;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.55;
  text-wrap: pretty;
}

.rexa-service .hero .actions { margin-top: 34px; }
.rexa-service .hero .btn { min-height: 54px; padding-inline: 23px; }

.rexa-service .hero--school-annual-day-choreography-bangalore h1,
.rexa-service .hero--wedding-choreographer-bangalore h1,
.rexa-service .hero--corporate-choreographer-bangalore h1 {
  font-size: clamp(58px, 5.7vw, 90px);
}

.rexa-service .hero--about-akash-medhe .hero__art { left: 48%; }
.rexa-service .hero--about-akash-medhe .hero__art img { object-position: center 29%; }
.rexa-service .hero--about-akash-medhe .hero__art::after {
  background: linear-gradient(90deg, var(--deep), rgba(21, 16, 38, .55) 18%, transparent 58%);
}

.rexa-service .hero--locations-dance-classes-kudlu .hero__art img,
.rexa-service .hero--locations-dance-classes-haralur .hero__art img { object-position: center center; }

.rexa-gallery .hero-kicker,
.rexa-reviews .eyebrow,
.rexa-gallery .closing .section-kicker,
.rexa-reviews .closing .section-kicker { color: #ffb59e; }
.rexa-gallery .hero-art-stamp { background: var(--paper); }
.rexa-reviews .visual-seal { background: var(--paper); }
.rexa-reviews .trust-strip { background: var(--cream); }
.rexa-reviews .eyebrow span { background: var(--coral); }
.rexa-gallery .closing { background: var(--coral); }
.rexa-gallery .closing h2 em { color: var(--deep); }
.rexa-gallery .lightbox-foot a { color: #ffb59e; }
.rexa-gallery .audience,
.rexa-reviews .social-voice { background: #eee5df; }
.rexa-reviews .social-voice .section-kicker,
.rexa-reviews .social-comments span,
.rexa-reviews .social-comments small { color: #9b3d30; }

@media (max-width: 1000px) {
  .rexa-service .hero__copy {
    width: min(760px, 80%);
    padding-left: 40px;
  }
}

@media (max-width: 760px) {
  .rexa-service .site-header {
    position: relative;
    inset: auto;
    background: var(--deep);
  }
  .rexa-service .site-header__inner { min-height: 70px; }
  .rexa-service .hero__grid,
  .rexa-service .hero__copy { min-height: 740px; }
  .rexa-service .hero__copy {
    width: 100%;
    justify-content: flex-end;
    padding: 188px 22px 66px;
  }
  .rexa-service .hero__art,
  .rexa-service .hero--about-akash-medhe .hero__art { inset: 0; }
  .rexa-service .hero__art img { object-position: 62% center; }
  .rexa-service .hero--about-akash-medhe .hero__art img { object-position: center 23%; }
  .rexa-service .hero__art::after,
  .rexa-service .hero--about-akash-medhe .hero__art::after {
    background:
      linear-gradient(0deg, rgba(16, 12, 31, .98) 3%, rgba(16, 12, 31, .89) 38%, rgba(16, 12, 31, .1) 83%),
      linear-gradient(90deg, rgba(16, 12, 31, .4), transparent 70%);
  }
  .rexa-service .hero h1,
  .rexa-service .hero--school-annual-day-choreography-bangalore h1,
  .rexa-service .hero--wedding-choreographer-bangalore h1,
  .rexa-service .hero--corporate-choreographer-bangalore h1 {
    font-size: clamp(49px, 10.8vw, 68px);
    line-height: .98;
  }
  .rexa-service .hero__lead { margin-top: 23px; font-size: 16px; }
  .rexa-service .hero .actions { margin-top: 26px; }
}

@media (max-width: 390px) {
  .rexa-service .hero__grid,
  .rexa-service .hero__copy { min-height: 770px; }
  .rexa-service .hero h1,
  .rexa-service .hero--school-annual-day-choreography-bangalore h1,
  .rexa-service .hero--wedding-choreographer-bangalore h1,
  .rexa-service .hero--corporate-choreographer-bangalore h1 { font-size: 47px; }
}