/*--------------------------------------------------------------------------
  Basement Actors Academy - custom sections

  Components that don't exist in the Eston template: the hero's secondary
  link, the Vision statement band and the closing call to action.
  Colours come from the brand variables in baa-theme.css.
--------------------------------------------------------------------------*/

/* --- Menu: active and hover state in cream ------------------------------
   The template colours the current/hovered menu item with --eston-base
   (brand green), which is hard to read on the dark header. Use the brand
   cream instead - covers the main menu, the sticky header and the second
   header variant, plus the little dropdown caret.                          */
.main-menu .main-menu__list>li.current>a,
.main-menu .main-menu__list>li:hover>a,
.main-menu .main-menu__list>li.current>a::after,
.main-menu .main-menu__list>li:hover>a::after,
.stricky-header .main-menu__list>li.current>a,
.stricky-header .main-menu__list>li:hover>a,
.stricky-header .main-menu__list>li.current>a::after,
.stricky-header .main-menu__list>li:hover>a::after,
.main-menu-two .main-menu__list>li.current>a,
.main-menu-two .main-menu__list>li:hover>a,
.main-menu-two .main-menu__list>li.current>a::after,
.main-menu-two .main-menu__list>li:hover>a::after,
.stricky-header.main-menu-two .main-menu__list>li.current>a,
.stricky-header.main-menu-two .main-menu__list>li:hover>a,
.stricky-header.main-menu-two .main-menu__list>li.current>a::after,
.stricky-header.main-menu-two .main-menu__list>li:hover>a::after {
  color: var(--baa-cream);
}

/* --- BAA logo sizing ----------------------------------------------------
   The template's slots were built for a wide 106x27 wordmark; the BAA mark is
   a square badge, so it needs an explicit height or it renders at full size.
   One asset is used everywhere and scaled per placement.                    */
.main-menu__logo img,
.main-menu-two__logo img,
.main-menu-three__logo img,
.mobile-nav__content .logo-box img,
.xs-sidebar-group .content-inner .logo img,
.baa-footer__logo img {
  width: auto;
  max-width: none;
}

.main-menu__logo img,
.main-menu-two__logo img,
.main-menu-three__logo img {
  height: 66px;
}

.main-menu__logo,
.main-menu-two__logo,
.main-menu-three__logo {
  padding: 18px 0;
}

.baa-footer__logo img {
  height: 104px;
}

.mobile-nav__content .logo-box img {
  height: 72px;
}

.xs-sidebar-group .content-inner .logo img {
  height: 88px;
}

@media only screen and (max-width: 991px) {
  .main-menu__logo img,
  .main-menu-two__logo img,
  .main-menu-three__logo img {
    height: 56px;
  }

  .baa-footer__logo img {
    height: 88px;
  }
}

@media only screen and (max-width: 767px) {
  .main-menu__logo img,
  .main-menu-two__logo img,
  .main-menu-three__logo img {
    height: 48px;
  }

  .baa-footer__logo img {
    height: 76px;
  }

  .mobile-nav__content .logo-box img {
    height: 64px;
  }
}

/* --- Hero: fill the first screen and centre the content ----------------
   The template sizes each slide with fixed padding (389px top / 295px
   bottom), so on a normal laptop the headline sits low and the buttons fall
   below the fold. Make the slide fill the viewport and centre its content
   instead. The top padding clears the transparent header, the bottom one
   keeps the "Follow Us" bar (absolute, 50px up) from crowding the buttons. */
.main-slider .item {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: 130px;
  padding-bottom: 130px;
}

/* svh tracks the visible area on phones, where browser chrome shows and
   hides; browsers without it keep the 100vh above */
@supports (min-height: 100svh) {
  .main-slider .item {
    min-height: 100svh;
  }
}

.main-slider .item > .container {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .main-slider .item {
    padding-top: 110px;
    padding-bottom: 120px;
  }
}

/* --- Hero: readable before the carousel boots ---------------------------
   The template hides slide copy (opacity:0) until Owl Carousel adds .active.
   If JS is slow or blocked that leaves the hero blank, so until the carousel
   reports itself loaded we show the first slide and its text outright.      */
.main-slider__carousel:not(.owl-loaded) .item + .item {
  display: none;
}

.main-slider__carousel:not(.owl-loaded) .main-slider__sub-title,
.main-slider__carousel:not(.owl-loaded) .main-slider__title,
.main-slider__carousel:not(.owl-loaded) .main-slider__btn-box {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0ms;
}

/* --- Hero: secondary "Watch Our Story" link -----------------------------
   The button box is a flex row, so spacing is handled with gap rather than a
   margin: that keeps the two apart when they sit side by side and supplies
   the row spacing when they wrap on narrow screens.                        */
.main-slider__btn-box {
  flex-wrap: wrap;
  gap: 16px 30px;
}

.baa-slider__btn-alt {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: var(--eston-white);
  font-family: var(--eston-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 400ms ease;
}

.baa-slider__btn-alt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--baa-cream);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 400ms ease;
}

.baa-slider__btn-alt:hover {
  color: var(--baa-cream);
}

.baa-slider__btn-alt:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* --- Vision band -------------------------------------------------------- */
.baa-vision {
  position: relative;
  display: block;
  background-color: var(--baa-cream);
  padding: 120px 0;
}

.baa-vision__inner {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.baa-vision__quote {
  font-size: 46px;
  line-height: 1;
  color: var(--baa-green);
  opacity: 0.28;
  margin-bottom: 26px;
}

.baa-vision__text {
  font-family: var(--eston-font-two);
  font-size: 40px;
  line-height: 1.35em;
  font-weight: 500;
  font-style: italic;
  color: var(--baa-ink);
  margin: 0 0 26px;
}

.baa-vision__by {
  font-family: var(--eston-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baa-green);
  margin: 0;
}

/* --- Closing call to action --------------------------------------------- */
.baa-cta {
  position: relative;
  display: block;
  background-color: var(--baa-cream);
  padding: 130px 0;
  overflow: hidden;
}

.baa-cta::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background-color: var(--baa-green);
  opacity: 0.09;
}

.baa-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.baa-cta__title {
  font-family: var(--eston-font);
  font-size: 70px;
  line-height: 1.1em;
  font-weight: 700;
  color: var(--baa-ink);
  margin: 0 0 22px;
}

.baa-cta__text {
  font-size: 18px;
  line-height: 32px;
  color: #5d5548;
  margin: 0 0 38px;
}

.baa-cta__btn-box {
  display: flex;
  justify-content: center;
}

.baa-cta .baa-cta__btn {
  background-color: var(--baa-green);
  border-color: var(--baa-green);
  color: var(--eston-white);
}

/* --- Responsive --------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .baa-vision {
    padding: 90px 0;
  }

  .baa-vision__text {
    font-size: 30px;
  }

  .baa-cta {
    padding: 100px 0;
  }

  .baa-cta__title {
    font-size: 48px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-vision {
    padding: 70px 0;
  }

  .baa-vision__text {
    font-size: 24px;
  }

  .baa-cta {
    padding: 80px 0;
  }

  .baa-cta__title {
    font-size: 36px;
  }

  .baa-cta__text {
    font-size: 16px;
    line-height: 28px;
  }
}

/* --- Remove the decorative ghost word -----------------------------------
   Every section heading in the template carries a second, large faded word
   ("Our method", "About BAA", "Your path") absolutely positioned at
   z-index:-1. It is meant to sit behind the heading as a watermark, but at
   these type sizes it lands on top of the heading instead, and it only
   repeats the tagline directly above it. Hiding it leaves a clean
   tagline -> heading pair. Delete this rule to bring it back.              */
.section-title__title-box p {
  display: none;
}

.section-title__title-box {
  margin-top: 22px;
}

/* --- Section taglines, a size up ----------------------------------------
   With the ghost word gone the italic tagline is the only label above each
   heading, so the template's 14px is too quiet for it. The colour and the
   italic serif face stay as they are.                                      */
.section-title__tagline {
  font-size: 27px;
  line-height: 36px;
}

@media only screen and (max-width: 991px) {
  .section-title__tagline {
    font-size: 23px;
    line-height: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .section-title__title-box {
    margin-top: 14px;
  }

  .section-title__tagline {
    font-size: 20px;
    line-height: 28px;
  }
}

/* --- Why BAA strip: stop the desktop bleed eating the phone layout ------
   .awards-one__bottom uses margin-right:-375px so the strip runs off the
   right edge on wide screens (clipped by .page-wrapper's overflow:hidden).
   On a phone that pushes nearly the whole strip out of view, so square it
   up below desktop.                                                        */
@media only screen and (max-width: 991px) {
  .awards-one__bottom {
    margin-right: 0;
  }
}

/* --- Why BAA carousel dots ---------------------------------------------
   Shown on phones, where the strip advances one card at a time and needs a
   position indicator. Hidden from tablet up, where the whole row is visible
   at once (switched off per breakpoint in the carousel's own options).     */
.awards-one__carousel.owl-carousel .owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
}

.awards-one__carousel.owl-carousel .owl-dot span {
  display: block;
  width: 9px;
  height: 9px;
  margin: 0;
  border-radius: 50%;
  background-color: rgba(28, 86, 50, 0.28);
  transition: all 300ms ease;
}

.awards-one__carousel.owl-carousel .owl-dot.active span {
  width: 26px;
  border-radius: 5px;
  background-color: var(--baa-green);
}

/* --- Why BAA: centre the heading and cards on phones --------------------
   .awards-one__img is a fixed-width flex box, so once a slide is wider than
   the circle (which it is as soon as we show one card at a time) it hugs the
   left edge while the caption centres. Auto margins line them back up.     */
@media only screen and (max-width: 991px) {
  .awards-one__single {
    text-align: center;
  }

  .awards-one__img {
    margin-left: auto;
    margin-right: auto;
  }

  .awards-one__content h3 {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .awards-one .section-title {
    text-align: center;
  }

  .awards-one .section-title__tagline {
    margin-left: 0;
  }

  .awards-one .section-title__title br {
    display: none;
  }
}

/* --- Why BAA circles: scale down on small screens ----------------------
   .awards-one__img is a fixed 200x200 circle in the template with no mobile
   override, so two of them need 400px - wider than a phone. Scale with the
   viewport instead.                                                        */
@media only screen and (max-width: 991px) {
  .awards-one__img {
    width: 150px;
    height: 150px;
  }

  .awards-one__img img {
    max-width: 60px;
  }

  .awards-one__content h3 {
    margin-top: 24px;
    font-size: 14px;
    line-height: 22px;
  }
}

/* One card fills the slide on phones, so the circle can be much larger than
   it was when two were squeezed side by side. */
@media only screen and (max-width: 767px) {
  .awards-one__img {
    width: 190px;
    height: 190px;
  }

  .awards-one__img img {
    max-width: 78px;
  }

  .awards-one__content h3 {
    margin-top: 22px;
    font-size: 15px;
    line-height: 24px;
  }
}

/* --- Fixed widths that overflow narrow screens -------------------------
   Two template rules use a hard pixel width and never get a mobile override,
   so they push the page sideways on phones. Capping rather than rewriting
   keeps the desktop design exactly as designed.                            */
.contact-one__bg {
  max-width: 100%;
}

.news-details__img-two {
  max-width: 100%;
}

/* --- Page banner: keep the heading clear of the breadcrumb --------------
   The breadcrumb is absolutely positioned bottom-right while the heading is
   full width at 80px, so a long title like "Professional Acting Program"
   runs straight underneath it. Cap the heading, and on smaller screens drop
   the breadcrumb into normal flow instead.                                 */
.page-header__inner h2 {
  max-width: calc(100% - 320px);
}

@media only screen and (max-width: 991px) {
  .page-header__inner h2 {
    max-width: 100%;
  }

  .thm-breadcrumb__inner {
    position: static;
    margin-top: 22px;
  }
}

/* --- About page cinematic band -----------------------------------------
   The template pulls .video-three up 360px so it overlaps the milestones
   timeline that used to sit above it. That timeline is gone (it needed real
   dates), so the offset has to go with it. It also never had a headline
   style, because it only ever held a play button.                          */
.video-three {
  margin-top: 0;
}

/* Those two values were a pair: .services-four reserves 397px at the bottom so
   the band above could pull up into it. With the pull removed, that reserve is
   just empty space, so it comes back to a normal section gap. */
.services-four {
  padding-bottom: 120px;
}

/* --- Four pillars on dark ----------------------------------------------
   The founder block above is cream and this section was cream too, so the
   two ran together as one long beige stretch. The pillar cards are white
   circles, so the background can't go white - taking it dark separates the
   sections and gives the pillars more presence.                           */
.services-four {
  background-color: var(--baa-ink);
}

.services-four .section-title__tagline {
  color: var(--baa-cream);
}

.services-four .section-title__title {
  color: var(--eston-white);
}

.services-four .services-two__title a {
  color: var(--baa-ink);
}

.services-four .services-two__text {
  color: rgba(19, 42, 28, 0.7);
}

.services-four .services-two__btn {
  background-color: transparent;
  border: 2px solid rgba(var(--eston-white-rgb), 0.35);
  color: var(--eston-white);
}

.services-four .services-two__btn:hover {
  border-color: var(--baa-cream);
  color: var(--baa-ink);
}

@media only screen and (max-width: 767px) {
  .services-four {
    padding-bottom: 80px;
  }
}

.video-three__inner {
  padding: 170px 0;
  text-align: center;
}

.video-three__title {
  position: relative;
  z-index: 1;
  font-size: 54px;
  line-height: 66px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eston-white);
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .video-three__inner {
    padding: 130px 0;
  }

  .video-three__title {
    font-size: 40px;
    line-height: 52px;
  }
}

@media only screen and (max-width: 767px) {
  .video-three__inner {
    padding: 100px 0;
  }

  .video-three__title {
    font-size: 30px;
    line-height: 42px;
  }

  .video-three__title br {
    display: none;
  }
}

/* --- Founder ------------------------------------------------------------
   Dark by default (homepage), where the black-and-white portrait sits best.
   The --light modifier flips it for the About page, where the layout is also
   mirrored so the two pages don't read as the same block twice.            */
.baa-founder {
  position: relative;
  display: block;
  background-color: var(--baa-ink);
  padding: 120px 0;
}

.baa-founder__img {
  position: relative;
  overflow: hidden;
}

.baa-founder__img img {
  width: 100%;
  height: auto;
  display: block;
}

.baa-founder__content {
  padding-left: 30px;
}

.baa-founder--light .baa-founder__content {
  padding-left: 0;
  padding-right: 30px;
}

.baa-founder__tagline {
  font-family: var(--eston-font-two);
  font-style: italic;
  font-size: 27px;
  line-height: 36px;
  color: var(--baa-cream);
  margin: 0 0 10px;
}

.baa-founder__name {
  font-size: 46px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eston-white);
  margin: 0 0 8px;
}

.baa-founder__role {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 229, 200, 0.85);
  margin: 0 0 26px;
}

.baa-founder__text {
  font-size: 17px;
  line-height: 30px;
  color: rgba(var(--eston-white-rgb), 0.75);
  margin: 0 0 20px;
}

.baa-founder__quote {
  position: relative;
  font-family: var(--eston-font-two);
  font-style: italic;
  font-size: 24px;
  line-height: 36px;
  color: var(--baa-cream);
  border-left: 2px solid rgba(247, 229, 200, 0.5);
  padding-left: 26px;
  margin: 30px 0 34px;
}

.baa-founder .baa-founder__btn {
  background-color: transparent;
  border: 2px solid rgba(var(--eston-white-rgb), 0.35);
  color: var(--eston-white);
}

.baa-founder .baa-founder__btn:hover {
  border-color: var(--baa-cream);
  color: var(--baa-ink);
}

/* --- light variant, used on the About page ------------------------------ */
.baa-founder--light {
  background-color: var(--baa-cream);
}

.baa-founder--light .baa-founder__tagline {
  color: var(--baa-green);
}

.baa-founder--light .baa-founder__name {
  color: var(--baa-ink);
}

.baa-founder--light .baa-founder__role {
  color: var(--baa-green);
}

.baa-founder--light .baa-founder__text {
  color: #5d5548;
}

@media only screen and (max-width: 991px) {
  .baa-founder {
    padding: 90px 0;
  }

  .baa-founder__content,
  .baa-founder--light .baa-founder__content {
    padding-left: 0;
    padding-right: 0;
    margin-top: 40px;
  }

  .baa-founder__name {
    font-size: 38px;
    line-height: 48px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-founder {
    padding: 70px 0;
  }

  .baa-founder__name {
    font-size: 30px;
    line-height: 40px;
  }

  .baa-founder__quote {
    font-size: 20px;
    line-height: 32px;
    padding-left: 20px;
  }
}

/* --- Student Journey: photo cards --------------------------------------
   Replaces the template's hover-reveal row list. Each step is a self-
   contained card, so nothing depends on hover and it reflows to one column
   on a phone without any special casing.                                   */
.baa-journey {
  position: relative;
  display: block;
  background-color: var(--baa-green);
  padding: 120px 0;
}

.baa-journey__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.baa-journey__head .section-title {
  margin-bottom: 0;
}

.baa-journey__head .section-title__tagline,
.baa-journey__head .section-title__title {
  color: var(--eston-white);
}

.baa-journey .baa-journey__btn {
  background-color: transparent;
  border: 2px solid rgba(var(--eston-white-rgb), 0.35);
  color: var(--eston-white);
  flex-shrink: 0;
}

.baa-journey .baa-journey__btn:hover {
  border-color: var(--baa-cream);
  color: var(--baa-ink);
}

/* Seven steps into a three-column grid leaves one card alone on the last
   line. Centring the row only affects lines that aren't full, so the full
   rows above stay exactly as they are. */
.baa-journey .row {
  justify-content: center;
}

.baa-step {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(var(--eston-white-rgb), 0.12);
  overflow: hidden;
  transition: transform 500ms ease, border-color 500ms ease,
    background-color 500ms ease;
}

.baa-step:hover {
  transform: translateY(-8px);
  border-color: rgba(247, 229, 200, 0.45);
  background-color: rgba(0, 0, 0, 0.26);
}

.baa-step__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 8 / 5;
}

.baa-step__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms ease;
}

.baa-step:hover .baa-step__img img {
  transform: scale(1.06);
}

.baa-step__body {
  padding: 28px 30px 32px;
}

.baa-step__num {
  display: inline-block;
  font-family: var(--eston-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--baa-cream);
  margin-bottom: 10px;
}

.baa-step__title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--eston-white);
  margin: 0 0 10px;
}

.baa-step__text {
  font-size: 16px;
  line-height: 27px;
  color: rgba(var(--eston-white-rgb), 0.72);
  margin: 0;
}

@media only screen and (max-width: 991px) {
  .baa-journey {
    padding: 90px 0;
  }

  .baa-journey__head {
    margin-bottom: 45px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-journey {
    padding: 70px 0;
  }

  .baa-step__body {
    padding: 24px 24px 28px;
  }

  .baa-step__title {
    font-size: 21px;
    line-height: 29px;
  }
}

/* --- Contact cards: let the long email fit -----------------------------
   .contact-page__title is a 30px heading sized for "Tel: [800]-456-789".
   The real address is a full gmail address, which runs past the column, so
   allow it to wrap and ease the size down a little.                        */
.contact-page__title {
  font-size: 26px;
  line-height: 34px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media only screen and (max-width: 1199px) {
  .contact-page__title {
    font-size: 22px;
    line-height: 30px;
  }
}

/* --- Floating contact buttons ------------------------------------------
   The template's scroll-to-top button is gone, so WhatsApp sits in the
   bottom-right corner on its own. On phones a call button joins it on the
   opposite side: tap-to-dial is only useful on a device that can dial.
   WhatsApp keeps its own green - people recognise the button by colour.    */
.baa-whatsapp,
.baa-call {
  position: fixed;
  bottom: 50px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 300ms ease, box-shadow 300ms ease,
    background-color 300ms ease;
}

.baa-whatsapp {
  right: 50px;
  background-color: #25d366;
}

/* call button is mobile-only */
.baa-call {
  left: 50px;
  background-color: var(--baa-green);
  font-size: 25px;
  display: none;
}

.baa-call:hover {
  color: #ffffff;
  background-color: var(--baa-green-dark);
  transform: translateY(-3px);
}

.baa-call:focus-visible {
  outline: 3px solid var(--baa-cream);
  outline-offset: 3px;
}

.baa-whatsapp:hover {
  color: #ffffff;
  background-color: #1ebe5b;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

.baa-whatsapp:focus-visible {
  outline: 3px solid var(--baa-cream);
  outline-offset: 3px;
}

/* label slides out on hover; hidden from narrow screens where it would
   cover content */
.baa-whatsapp__label {
  position: absolute;
  right: 74px;
  white-space: nowrap;
  background-color: var(--baa-ink);
  color: var(--eston-white);
  font-family: var(--eston-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: all 300ms ease;
  pointer-events: none;
}

.baa-whatsapp:hover .baa-whatsapp__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* a soft outward pulse so it reads as "live", paused for anyone who has
   asked the system to reduce motion */
.baa-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #25d366;
  opacity: 0.55;
  z-index: -1;
  animation: baa-whatsapp-pulse 2.4s ease-out infinite;
}

@keyframes baa-whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  70% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .baa-whatsapp::before {
    animation: none;
  }

  .baa-whatsapp {
    transition: none;
  }
}

@media only screen and (max-width: 767px) {
  /* phones get both: call on the left thumb, WhatsApp on the right */
  .baa-whatsapp,
  .baa-call {
    bottom: 22px;
    width: 54px;
    height: 54px;
    font-size: 26px;
  }

  .baa-whatsapp {
    right: 20px;
  }

  .baa-call {
    left: 20px;
    display: flex;
    font-size: 22px;
  }

  /* the hover label has nowhere to go on a phone, and touch has no hover */
  .baa-whatsapp__label {
    display: none;
  }
}

/* --- Footer credit line (agency attribution) ---------------------------- */
.baa-credit {
  display: inline-block;
  margin-left: 6px;
  opacity: 0.65;
  font-size: 13px;
}

.baa-credit a {
  color: inherit;
  text-decoration: underline;
}

/* --- Vision band: optional button ---------------------------------------- */
.baa-vision__btn-box {
  margin-top: 30px;
}

/*--------------------------------------------------------------------------
  Pillar pages - Acting / Dubbing / Casting / Productions

  Replaces the template's boxed "service details" layout (image + sidebar +
  bullet list) with something closer to the brief: full-bleed cinematic bands,
  an editorial intro, a numbered syllabus on dark, and alternating image blocks.
--------------------------------------------------------------------------*/

/* --- Editorial intro ---------------------------------------------------- */
.baa-intro {
  padding: 120px 0 100px;
  background-color: var(--eston-white);
}

.baa-intro__lead {
  font-size: 40px;
  line-height: 52px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--baa-ink);
  margin: 0;
}

.baa-intro__body p {
  font-size: 17px;
  line-height: 31px;
  color: #5d5548;
  margin: 0 0 20px;
}

.baa-intro__body p:last-child {
  margin-bottom: 0;
}

.baa-intro__body p span {
  color: var(--baa-green);
  font-weight: 700;
}

/* --- Full-bleed cinematic band ------------------------------------------ */
.baa-band {
  position: relative;
  display: block;
  min-height: 520px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.baa-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 22, 15, 0.88) 0%,
      rgba(10, 22, 15, 0.15) 55%, rgba(10, 22, 15, 0.05) 100%);
}

.baa-band__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 66px;
}

.baa-band__text {
  font-family: var(--eston-font-two);
  font-style: italic;
  font-size: 34px;
  line-height: 48px;
  color: var(--eston-white);
  max-width: 780px;
  margin: 0;
}

/* --- Numbered syllabus on dark ------------------------------------------ */
.baa-syllabus {
  background-color: var(--baa-ink);
  padding: 110px 0;
}

.baa-syllabus__head {
  margin-bottom: 54px;
}

.baa-syllabus__tagline {
  font-family: var(--eston-font-two);
  font-style: italic;
  font-size: 27px;
  line-height: 36px;
  color: var(--baa-cream);
  margin: 0 0 10px;
}

.baa-syllabus__title {
  font-size: 44px;
  line-height: 54px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eston-white);
  margin: 0;
}

.baa-syllabus__item {
  position: relative;
  padding: 26px 0 24px;
  border-top: 1px solid rgba(var(--eston-white-rgb), 0.14);
  transition: border-color 400ms ease;
}

.baa-syllabus__item:hover {
  border-color: rgba(247, 229, 200, 0.5);
}

.baa-syllabus__num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--baa-cream);
  opacity: 0.7;
  margin-bottom: 8px;
}

.baa-syllabus__label {
  font-size: 21px;
  line-height: 29px;
  font-weight: 700;
  color: var(--eston-white);
  margin: 0;
}

/* --- Alternating image + text blocks ------------------------------------ */
.baa-blocks {
  padding: 120px 0;
  background-color: var(--eston-white);
}

.baa-block + .baa-block {
  margin-top: 96px;
}

.baa-block__img img {
  width: 100%;
  height: auto;
  display: block;
}

.baa-block__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--baa-green);
  margin-bottom: 14px;
}

.baa-block__title {
  font-size: 34px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--baa-ink);
  margin: 0 0 18px;
}

.baa-block__text {
  font-size: 17px;
  line-height: 31px;
  color: #5d5548;
  margin: 0;
}

/* --- Closing call to action --------------------------------------------- */
.baa-pillar-cta {
  background-color: var(--baa-cream);
  padding: 100px 0;
  text-align: center;
}

.baa-pillar-cta__title {
  font-size: 44px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--baa-ink);
  margin: 0 0 16px;
}

.baa-pillar-cta__text {
  font-size: 17px;
  line-height: 30px;
  color: #5d5548;
  margin: 0 0 34px;
}

.baa-pillar-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  justify-content: center;
}

.baa-pillar-cta .thm-btn {
  background-color: var(--baa-green);
  border-color: var(--baa-green);
  color: var(--eston-white);
}

.baa-pillar-cta__alt {
  display: inline-flex;
  align-items: center;
  padding: 0 42px;
  height: 60px;
  border: 2px solid rgba(19, 42, 28, 0.25);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--baa-ink);
  transition: all 400ms ease;
}

.baa-pillar-cta__alt:hover {
  background-color: var(--baa-ink);
  border-color: var(--baa-ink);
  color: var(--eston-white);
}

/* --- Responsive --------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .baa-intro {
    padding: 90px 0 70px;
  }

  .baa-intro__lead {
    font-size: 32px;
    line-height: 44px;
    margin-bottom: 26px;
  }

  .baa-band {
    min-height: 420px;
  }

  .baa-band__text {
    font-size: 26px;
    line-height: 38px;
  }

  .baa-syllabus,
  .baa-blocks {
    padding: 90px 0;
  }

  .baa-syllabus__title,
  .baa-pillar-cta__title {
    font-size: 34px;
    line-height: 44px;
  }

  .baa-block + .baa-block {
    margin-top: 64px;
  }

  .baa-block__img {
    margin-bottom: 28px;
  }

  .baa-block__title {
    font-size: 28px;
    line-height: 38px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-intro {
    padding: 70px 0 56px;
  }

  .baa-intro__lead {
    font-size: 26px;
    line-height: 36px;
  }

  .baa-band {
    min-height: 340px;
  }

  .baa-band__inner {
    padding-bottom: 44px;
  }

  .baa-band__text {
    font-size: 21px;
    line-height: 32px;
  }

  .baa-syllabus,
  .baa-blocks,
  .baa-pillar-cta {
    padding: 70px 0;
  }

  .baa-syllabus__title,
  .baa-pillar-cta__title {
    font-size: 27px;
    line-height: 37px;
  }

  .baa-block__title {
    font-size: 24px;
    line-height: 33px;
  }
}

/* --- Mobile menu contact rows -------------------------------------------
   The icon is a flex item sized with width:30px but nothing stops it
   shrinking, so a long address ("basementactorsacademy@gmail.com") squeezes
   the circle into a sliver and then overflows the 300px panel. Pin the icon
   and let the address wrap instead.                                        */
.mobile-nav__contact li {
  align-items: flex-start;
}

.mobile-nav__contact li > i {
  flex: 0 0 30px;
  margin-top: 1px;
}

.mobile-nav__contact li a {
  min-width: 0;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.mobile-nav__contact li + li {
  margin-top: 12px;
}

/*--------------------------------------------------------------------------
  Contact page
--------------------------------------------------------------------------*/

/* --- Quick actions ------------------------------------------------------ */
.baa-quick {
  background-color: var(--eston-white);
  padding: 100px 0 20px;
}

.baa-quick__tile {
  display: block;
  height: 100%;
  padding: 38px 34px;
  border: 1px solid var(--baa-border);
  transition: transform 400ms ease, border-color 400ms ease,
    background-color 400ms ease;
}

.baa-quick__tile:hover {
  transform: translateY(-6px);
  border-color: var(--baa-green);
  background-color: var(--baa-cream);
}

.baa-quick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: var(--baa-green);
  color: var(--eston-white);
  font-size: 20px;
  margin-bottom: 22px;
}

.baa-quick__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baa-green);
  margin-bottom: 8px;
}

.baa-quick__value {
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: var(--baa-ink);
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.baa-quick__note {
  font-size: 14px;
  line-height: 22px;
  color: #6e6558;
  margin: 0;
}

/* --- Form + details split ----------------------------------------------- */
.baa-reach {
  background-color: var(--eston-white);
  padding: 90px 0 110px;
}

.baa-reach__title {
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--baa-ink);
  margin: 0 0 12px;
}

.baa-reach__lead {
  font-size: 17px;
  line-height: 30px;
  color: #5d5548;
  margin: 0 0 34px;
}

.baa-field {
  margin-bottom: 18px;
}

/* The reCAPTCHA checkbox is a fixed-width iframe from Google, so it gets a
   little more air than a text field and is allowed to shrink on narrow
   phones rather than push the form wider than the screen. */
.baa-field--captcha {
  margin-bottom: 26px;
}

@media (max-width: 400px) {
  .baa-field--captcha .g-recaptcha {
    transform: scale(0.85);
    transform-origin: 0 0;
  }
}

.baa-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--baa-green);
  margin-bottom: 8px;
}

.baa-field input,
.baa-field select,
.baa-field textarea {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border: 1px solid var(--baa-border);
  background-color: var(--eston-white);
  color: var(--baa-ink);
  font-family: var(--eston-font);
  font-size: 15px;
  outline: none;
  transition: border-color 300ms ease;
}

.baa-field textarea {
  height: 140px;
  padding: 16px 18px;
  resize: vertical;
}

.baa-field input:focus,
.baa-field select:focus,
.baa-field textarea:focus {
  border-color: var(--baa-green);
}

.baa-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231C5632'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px;
  padding-right: 44px;
}

/* --- Side panel --------------------------------------------------------- */
.baa-side {
  background-color: var(--baa-cream);
  padding: 44px 40px;
  height: 100%;
}

.baa-side__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baa-green);
  margin: 0 0 14px;
}

.baa-side__text {
  font-size: 16px;
  line-height: 28px;
  color: #5d5548;
  margin: 0 0 34px;
}

.baa-side__text a {
  color: var(--baa-ink);
  font-weight: 700;
}

.baa-next {
  position: relative;
  padding-left: 46px;
  margin-bottom: 24px;
}

.baa-next:last-child {
  margin-bottom: 0;
}

.baa-next__n {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--baa-green);
  color: var(--eston-white);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.baa-next__t {
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  color: var(--baa-ink);
  margin: 0 0 4px;
}

.baa-next__d {
  font-size: 15px;
  line-height: 25px;
  color: #6e6558;
  margin: 0;
}

/* --- Full-bleed map ----------------------------------------------------- */
.baa-map {
  position: relative;
  display: block;
  line-height: 0;
}

.baa-map iframe {
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(35%) contrast(1.05);
}

/* --- Responsive --------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .baa-quick {
    padding: 80px 0 10px;
  }

  .baa-reach {
    padding: 70px 0 90px;
  }

  .baa-reach__title {
    font-size: 32px;
    line-height: 42px;
  }

  .baa-side {
    margin-top: 34px;
  }

  .baa-map iframe {
    height: 380px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-quick {
    padding: 64px 0 8px;
  }

  .baa-quick__tile {
    padding: 30px 26px;
  }

  .baa-reach {
    padding: 56px 0 70px;
  }

  .baa-reach__title {
    font-size: 27px;
    line-height: 37px;
  }

  .baa-side {
    padding: 34px 28px;
  }

  .baa-map iframe {
    height: 320px;
  }
}

/*--------------------------------------------------------------------------
  Team page
--------------------------------------------------------------------------*/

/* --- Cards --------------------------------------------------------------- */
.baa-team {
  background-color: var(--eston-white);
  padding: 20px 0 120px;
}

.baa-team__card {
  display: block;
  height: 100%;
}

.baa-team__img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.baa-team__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 600ms ease, transform 600ms ease;
}

.baa-team__card:hover .baa-team__img img {
  filter: grayscale(0);
  transform: scale(1.04);
}

/* an open slot, drawn as a slot - not a fake person */
.baa-team__soon {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--baa-cream);
  border: 1px dashed rgba(28, 86, 50, 0.45);
  padding: 30px;
}

.baa-team__soon span {
  font-family: var(--eston-font-two);
  font-style: italic;
  font-size: 24px;
  line-height: 34px;
  color: var(--baa-green);
  text-align: center;
}

.baa-team__meta {
  border-top: 2px solid var(--baa-ink);
  margin-top: 20px;
  padding-top: 16px;
  transition: border-color 400ms ease;
}

.baa-team__card:hover .baa-team__meta {
  border-color: var(--baa-green);
}

.baa-team__role {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--baa-green);
  margin-bottom: 6px;
}

.baa-team__name {
  font-size: 25px;
  line-height: 33px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--baa-ink);
  margin: 0;
}

.baa-team__name a {
  color: inherit;
}

.baa-team__name a:hover {
  color: var(--baa-green);
}

/* --- Syllabus items with a supporting line ------------------------------- */
.baa-syllabus__desc {
  font-size: 15px;
  line-height: 26px;
  color: rgba(var(--eston-white-rgb), 0.66);
  margin: 8px 0 0;
}

/* --- Responsive ---------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .baa-team {
    padding-bottom: 90px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-team {
    padding-bottom: 70px;
  }

  .baa-team__name {
    font-size: 22px;
    line-height: 30px;
  }
}

/*--------------------------------------------------------------------------
  Site footer

  Replaces the template's site-footer (whose three sparse columns left the
  right half of the band empty). Four columns on the brand ink background:
  brand + social, two link lists, and a contact column with icon rows, then
  a hairline bottom bar. Decorated with the same oversized-circle motif as
  the closing CTA band.
--------------------------------------------------------------------------*/
.baa-footer {
  position: relative;
  display: block;
  background-color: var(--baa-ink);
  overflow: hidden;
  z-index: 1;
}

/* Circle motifs, echoing .baa-cta::before */
.baa-footer::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background-color: var(--baa-green);
  opacity: 0.18;
}

.baa-footer::after {
  content: "";
  position: absolute;
  bottom: -140px;
  left: -100px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background-color: var(--baa-cream);
  opacity: 0.05;
}

.baa-footer__main,
.baa-footer__bottom {
  position: relative;
  z-index: 1;
}

.baa-footer__main {
  padding: 100px 0 50px;
}

.baa-footer__col {
  margin-bottom: 50px;
}

/* --- Brand column -------------------------------------------------------- */
.baa-footer__tagline {
  font-family: var(--eston-font-two);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4em;
  color: var(--baa-cream);
  margin: 24px 0 12px;
}

.baa-footer__blurb {
  font-size: 15px;
  line-height: 26px;
  color: rgba(247, 229, 200, 0.66);
  margin: 0;
  max-width: 300px;
}

.baa-footer__social {
  display: flex;
  align-items: center;
  margin-top: 28px;
}

.baa-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247, 229, 200, 0.35);
  border-radius: 50%;
  color: var(--baa-cream);
  font-size: 16px;
  transition: all 400ms ease;
}

.baa-footer__social a:hover {
  background-color: var(--baa-cream);
  border-color: var(--baa-cream);
  color: var(--baa-green-dark);
}

.baa-footer__social a + a {
  margin-left: 12px;
}

/* --- Column headings ------------------------------------------------------ */
.baa-footer__heading {
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--baa-cream);
  margin: 14px 0 28px;
}

.baa-footer__heading::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background-color: var(--baa-green-light);
  margin-top: 14px;
}

/* --- Link lists ----------------------------------------------------------- */
.baa-footer__links li + li {
  margin-top: 14px;
}

.baa-footer__links li a {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 24px;
  color: var(--baa-green-pale);
  transition: all 400ms ease;
}

.baa-footer__links li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: var(--baa-cream);
  transition: width 400ms ease;
}

.baa-footer__links li a:hover {
  color: var(--baa-cream);
  padding-left: 22px;
}

.baa-footer__links li a:hover::before {
  width: 14px;
}

/* --- Contact column ------------------------------------------------------- */
.baa-footer__contact li {
  display: flex;
  align-items: flex-start;
}

.baa-footer__contact li + li {
  margin-top: 20px;
}

.baa-footer__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247, 229, 200, 0.35);
  border-radius: 50%;
  color: var(--baa-cream);
  font-size: 15px;
  margin-right: 16px;
}

.baa-footer__contact li p {
  font-size: 15px;
  line-height: 26px;
  color: var(--baa-green-pale);
  margin: 9px 0 0;
}

.baa-footer__contact li p a {
  color: inherit;
  transition: all 400ms ease;
}

.baa-footer__contact li p a:hover {
  color: var(--baa-cream);
}

/* --- Bottom bar ----------------------------------------------------------- */
.baa-footer__bottom {
  border-top: 1px solid rgba(247, 229, 200, 0.16);
  padding: 24px 0;
}

.baa-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.baa-footer__copy {
  font-size: 14px;
  line-height: 24px;
  color: rgba(247, 229, 200, 0.55);
  margin: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media only screen and (max-width: 991px) {
  .baa-footer__main {
    padding: 80px 0 30px;
  }
}

@media only screen and (max-width: 767px) {
  .baa-footer__main {
    padding: 70px 0 20px;
  }

  /* Stacked left-aligned blocks read as a ragged list - centre the stack. */
  .baa-footer__col {
    text-align: center;
  }

  .baa-footer__logo {
    display: flex;
    justify-content: center;
  }

  .baa-footer__blurb {
    max-width: none;
  }

  .baa-footer__social {
    justify-content: center;
  }

  .baa-footer__heading::after {
    margin-left: auto;
    margin-right: auto;
  }

  .baa-footer__contact li {
    flex-direction: column;
    align-items: center;
  }

  .baa-footer__contact-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .baa-footer__contact li p {
    margin-top: 0;
  }

  .baa-footer__bottom-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .baa-credit {
    margin-left: 0;
  }
}