/* ==========================================================================
   Kuumba Code — brand overrides layered on top of style.css
   Palette: Plum #4A1E3D · Orange #EB672D · Gold #FFC84C · Indigo #2F40F1
            Green #4BA970 · Ink #0C0C0C · Cream #FBF7F2 · Peach #FFF4EC · Taupe #C9BEB6
   ========================================================================== */

/* Text wordmark logo -------------------------------------------------------- */
.kuumba_wordmark {
  font-family: 'Barlow', sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.4px;
  color: #4A1E3D;
  text-decoration: none;
  white-space: nowrap;
}
.kuumba_wordmark span {
  color: #EB672D;
  margin-left: 6px;
}
.kuumba_wordmark:hover { color: #4A1E3D; }
.kuumba_wordmark.on_dark { color: #ffffff; }
.kuumba_wordmark.on_dark:hover { color: #ffffff; }
.kuumba_wordmark.on_dark span { color: #FFC84C; }

/* Small caps eyebrow labels, matching the brief ---------------------------- */
.kuumba_eyebrow {
  display: block;
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #EB672D;
  margin-bottom: 18px;
}
.kuumba_eyebrow.on_dark { color: #FFC84C; }

/* The card-equalizing rule `.courses_section .row > [class*="col"]` sets the
   columns to display:flex, which also hits the section heading's own row and
   shrink-wraps the title to its widest word. Keep the heading columns as normal
   blocks so the title fills its column and wraps naturally. */
.courses_section .section_heading .row > [class*="col"] {
  display: block;
  margin-bottom: 0;
}

/* Gold rule used under headings in the brief ------------------------------- */
.kuumba_rule {
  width: 96px;
  height: 3px;
  background: #FFC84C;
  border: 0;
  margin: 22px 0 0;
}

/* Give / support highlight card ------------------------------------------- */
.kuumba_ask_amount {
  color: #FFC84C;
  font-family: 'Barlow', sans-serif;
  font-weight: 800;
}

/* Footer contact list ------------------------------------------------------ */
.contact_info_list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.contact_info_list li i { color: #FFC84C; width: 16px; }
.contact_info_list a { color: inherit; }
.contact_info_list a:hover { color: #FFC84C; }

/* "Most impact" pricing ribbon --------------------------------------------- */
/* Original sat flush at top:0 with square top corners, so it read as cut off.
   Float it as a rounded pill straddling the card's top edge instead. */
.pricing_card .card_badge {
  top: -13px;
  padding: 5px 18px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #0C0C0C;
  background-color: #FFC84C;
  border-radius: 40px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(31, 29, 13, 0.22);
}

/* Country / focus chips ---------------------------------------------------- */
.kuumba_chip {
  display: inline-block;
  padding: 6px 16px;
  margin: 4px 6px 4px 0;
  border-radius: 40px;
  background: #FFF4EC;
  border: 1px solid #C9BEB6;
  color: #4A1E3D;
  font-weight: 600;
  font-size: 14px;
}

/* Hero image — crop landscape stock photo to a clean portrait/square ------- */
.hero_banner .banner_image_1 .image_wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Why Now grid — keep the 4 stock photos a uniform square so they align ---- */
.advertisement_section .images_group .image_wrap img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Pilot-cohort avatars — fill the 50px circle, centered on faces ----------- */
.banner_image_1 .satisfied_student .students_thumbnail span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Abby's photo is full-body — crop to the top so her face shows */
.banner_image_1 .satisfied_student .students_thumbnail > li:last-child span img {
  object-position: center top;
}

/* Intro video — taller 16:9 frame instead of the wide/short poster ratio -- */
.intro_video .video_wrap {
  aspect-ratio: 16 / 9;
}
.intro_video .video_wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  object-position: center;
  display: block;
}

/* Mentor/team cards — uniform portrait crop, top-aligned on faces --------- */
.mentor_item .mentor_image > a {
  aspect-ratio: 3 / 4;
}
.mentor_item .mentor_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  object-position: center top;
  display: block;
}

/* Course listing/archive cards — uniform image crop + equal-height -------- */
.courses_archive_section .row > [class*="col"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.courses_archive_section .course_card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
.courses_archive_section .course_card .item_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.courses_archive_section .course_card .item_content .btn_unfill {
  margin-top: auto;
}
.courses_archive_section .course_card .item_image > a {
  display: block;
  aspect-ratio: 4 / 3;
}
.courses_archive_section .course_card .item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Closing quote band (BeatMaster Lab). Deep plum with animated equaliser bars —
   a music page should feel like one. No buttons: the page's call to action is
   the application form above it. No imagery: the page is already heavy. */
.kc_quote_band {
  background: #4A1E3D;
  padding: 72px 0 64px;
  overflow: hidden;
  position: relative;
}
.kc_pullquote {
  margin: 0;
  text-align: center;
  padding: 34px 0;
}
.kc_pullquote p {
  margin: 0 0 20px;
  font-size: 52px;
  line-height: 1.14;
  font-weight: 700;
  color: #FBF7F2;
  letter-spacing: -0.02em;
}
.kc_quote_accent { color: #FFC84C; }
.kc_pullquote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 247, 242, 0.6);
}

/* Equaliser bars */
.kc_eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  height: 46px;
}
.kc_eq--flip { align-items: flex-start; }
.kc_eq span {
  display: block;
  width: 7px;
  border-radius: 4px;
  background: #FFC84C;
  height: 30%;
  animation: kc_eq_pulse 1.15s ease-in-out infinite;
}
.kc_eq span:nth-child(3n)   { background: #EB672D; }
.kc_eq span:nth-child(4n)   { background: rgba(251, 247, 242, 0.5); }
.kc_eq span:nth-child(2)    { animation-delay: -.10s }
.kc_eq span:nth-child(3)    { animation-delay: -.62s }
.kc_eq span:nth-child(4)    { animation-delay: -.31s }
.kc_eq span:nth-child(5)    { animation-delay: -.85s }
.kc_eq span:nth-child(6)    { animation-delay: -.22s }
.kc_eq span:nth-child(7)    { animation-delay: -.70s }
.kc_eq span:nth-child(8)    { animation-delay: -.42s }
.kc_eq span:nth-child(9)    { animation-delay: -.95s }
.kc_eq span:nth-child(10)   { animation-delay: -.15s }
.kc_eq span:nth-child(11)   { animation-delay: -.55s }
.kc_eq span:nth-child(12)   { animation-delay: -.78s }
.kc_eq span:nth-child(13)   { animation-delay: -.36s }
.kc_eq span:nth-child(14)   { animation-delay: -.90s }
.kc_eq span:nth-child(15)   { animation-delay: -.48s }
@keyframes kc_eq_pulse {
  0%, 100% { height: 22%; opacity: .75; }
  50%      { height: 100%; opacity: 1; }
}
/* Respect visitors who ask for less motion — bars hold a static pattern. */
@media (prefers-reduced-motion: reduce) {
  .kc_eq span { animation: none; height: 55%; }
  .kc_eq span:nth-child(odd) { height: 85%; }
}
@media (max-width: 767px) {
  .kc_quote_band { padding: 52px 0 46px; }
  .kc_pullquote p { font-size: 32px; }
  .kc_eq { gap: 5px; height: 34px; }
  .kc_eq span { width: 5px; }
  .kc_eq span:nth-child(n+12) { display: none; }
}

/* Per-photo crop corrections. Card images cover a 4/3 box and default to
   centre, which cuts off subjects who aren't centred in the original frame.
   The "Course 4 — Build" portrait sits in the left third, so bias it left. */
img[src*="small-business-entrepreneur-and-portrait-of-a-wom"] {
  -o-object-position: 32% center;
     object-position: 32% center;
}

/* The Students carousel — equal-height cards with full-height photos ------- */
.testimonial_carousel .slick-track {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.testimonial_carousel .slick-slide {
  height: auto !important;
  float: none;
}
.testimonial_carousel .slick-slide > div,
.testimonial_carousel .carousel_item,
.testimonial_carousel .testimonial_item {
  height: 100%;
}
.testimonial_item .testimonial_image {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 160px;
          flex: 0 0 160px;
  max-width: 160px;
  min-height: 240px;
}
.testimonial_item .testimonial_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.testimonial_item .testimonial_image img.img_top {
  object-position: center top;
}

/* Application form embed (Google Forms) */
.apply_form_embed {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);
}
.apply_form_embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .apply_form_embed {
    border-radius: 12px;
  }
  .apply_form_embed iframe {
    height: 1600px;
  }
}

/* Apply page — country selector tabs */
.apply_country_tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.apply_country_tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 26px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
}
.apply_country_tab:hover {
  border-color: rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.apply_country_tab.active {
  background: #1c1c1c;
  border-color: #1c1c1c;
  color: #fff;
}
.apply_country_tab small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.65;
  text-transform: uppercase;
}
.apply_country_tab.is_soon:not(.active) {
  border-style: dashed;
}

.apply_panel_intro {
  text-align: center;
  margin-bottom: 22px;
}

/* Apply page — "opening soon" panel */
.apply_soon {
  text-align: center;
  padding: 56px 28px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.02);
}
.apply_soon h3 {
  margin-bottom: 12px;
}
.apply_soon p {
  max-width: 460px;
  margin: 0 auto 26px;
}

/* Bootcamp hero — the gold "FREE" badge (only custom bit kept; page otherwise
   uses the template's native section designs) */
.bootcamp_free_badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #FFC84C;
  color: #4A1E3D;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Bootcamp callout on the courses page — self-contained flex, does not
   rely on the template's overridden .row/.col */
.course_bootcamp_callout {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 10px 0 40px;
  padding: 34px 38px;
  border-radius: 18px;
  background: #FBF7F2;
  border: 1px solid rgba(74, 30, 61, 0.12);
  border-left: 5px solid #FFC84C;
}
.course_bootcamp_text {
  flex: 1 1 auto;
  min-width: 0;
}
.course_bootcamp_badge {
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 14px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #FFC84C;
  color: #4A1E3D;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.course_bootcamp_title {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.25;
  color: #4A1E3D;
}
.course_bootcamp_desc {
  margin: 0;
  color: rgba(74, 30, 61, 0.85);
}
.course_bootcamp_action {
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .course_bootcamp_callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 26px 22px;
  }
  .course_bootcamp_title { font-size: 22px; }
}

/* Apply page — fee disclosure note */
.apply_fee_note {
  max-width: 620px;
  margin: 0 auto 24px;
  padding: 14px 20px;
  text-align: center;
  font-size: 14px;
  background: #FBF7F2;
  border: 1px solid rgba(74, 30, 61, 0.12);
  border-radius: 10px;
}
.apply_fee_note strong { color: #EB672D; }

/* Home hero (desktop): lower the "pilot cohort" card so it clears the
   "Fund a Student" CTA button instead of overlapping it. */
@media (min-width: 1200px) {
  .banner_image_1 .satisfied_student { bottom: -96px; }
}

/* Page-banner hero buttons (e.g. bootcamp): the template only spaces
   .hero_banner buttons, so .page_banner ones touched. Add a gap.
   Same applies to CTA sections (e.g. the BeatMaster Lab footer CTA). */
.page_banner .banner_btns_group,
.course_deals_section .banner_btns_group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}