/*
  LaVi Bloom Academy - homepage brand layer (minimal).
  Loaded AFTER style.css. Only re-points Kiddino's own CSS variables to the LaVi palette
  and adds a handful of small helpers. All Kiddino components keep their original styling.
  Palette: Purple #48165F | Pink #C23872 | Green #23543B | Gold #B58A35 | Ivory #FFF9EF
*/

body.lavi-home {
  --theme-color: #c23872;          /* Kiddino red  -> Bloom Pink */
  --theme-color2: #b58a35;         /* Kiddino yellow -> Antique Gold */
  --vs-secondary-color: #48165f;   /* Kiddino purple -> Primary Purple */
  --smoke-color: #fff9ef;          /* light section bg -> Warm Ivory */
  --title-color: #2f0d40;          /* darker tone of Primary Purple */
  --yellow-color: #b58a35;
}

/* Hard-coded Kiddino colours that bypass the variables (vendor CSS left untouched) */
.lavi-home .footer-layout4 { background: rgba(47, 13, 64, 0.97); }
.lavi-home .menu-style4 > ul > li > a::before,
.lavi-home .banner-content4 .banner-title span::before { background-color: var(--theme-color2); }

/* ---- logos: lavi-logo.png (unmodified PNG) ---- */
.lavi-home .lv-logos { display: flex; align-items: center; gap: 14px; }
.lavi-home .lv-logo { display: block; line-height: 0; }
.lavi-home .lv-logo img { display: block; width: auto; height: 100%; object-fit: contain; }
.lavi-home .lv-logos--mobile { justify-content: center; }
.lavi-home .lv-logos--mobile .lv-logo { height: 110px; }
.lavi-home .lv-logos--footer { gap: 16px; flex-wrap: wrap; }
.lavi-home .lv-logos--footer .lv-logo { height: 110px; width: 110px; background: #fff9ef; border-radius: 16px; padding: 6px; }

/* sticky (compact) state */

/* ---- hero: button row (original banner-slide4 untouched) ---- */
.lavi-home .banner-content4 .lv-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- programs: keep Kiddino class cards ---- */
.lavi-home .cls-layout6 .class-img img { width: 100%; aspect-ratio: 37 / 27; object-fit: cover; }

/* ---- activities: Font Awesome glyph inside the original .activity-icon ---- */
.lavi-home .activity-icon i { color: #fff; font-size: 40px; line-height: 110px; }

/* ---- facilities: Font Awesome glyph inside the original .service-icon shapes ---- */
.lavi-home .service-style2 .service-icon i {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 30px;
  line-height: 78px;
}


/* ---- enquiry form (original form-style4, brand colour + accessibility) ---- */
.lavi-home .form-style4 { background: var(--vs-secondary-color); }
.lavi-home .form-style4 .form-group input,
.lavi-home .form-style4 .form-group select { height: 56px; border-radius: 10px; }
.lavi-home .form-style4 .form-group textarea { min-height: 110px; border-radius: 10px; }
.lavi-home .form-style4 .form-group select { padding-right: 30px; }
.lavi-home .form-style4 .form-group .required { color: #f4ead3; }
.lavi-home .form-style4 .lv-field-error { display: block; min-height: 0; margin-top: 6px; color: #ffd9e6; font-size: 14px; line-height: 1.4; }
.lavi-home .form-style4 .lv-field-error:empty { display: none; }
.lavi-home .form-style4 .is-invalid { border-color: #ff9dbf; }
.lavi-home .form-style4 .form-group input:focus-visible,
.lavi-home .form-style4 .form-group select:focus-visible,
.lavi-home .form-style4 .form-group textarea:focus-visible,
.lavi-home .form-style4 .lv-consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 2px; }
.lv-enquiry-status { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: #fff; }
.lv-enquiry-status:empty { display: none; }
.lv-enquiry-status.is-info,
.lv-enquiry-status.is-error { background: rgba(255, 255, 255, 0.12); border-left: 4px solid var(--theme-color2); padding: 12px 16px; border-radius: 8px; text-align: left; }
.lv-enquiry-status.is-success { background: rgba(35, 84, 59, 0.55); border-left: 4px solid #7a8550; padding: 12px 16px; border-radius: 8px; text-align: left; }
html { scroll-behavior: smooth; }
#enquiry, #programs { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- enquiry consent checkbox ----
   Root cause: style.css hides every checkbox (input[type=checkbox]{display:none;width:0}) and paints a
   fake box with `label:before` + `padding-left:30px`. With the input out of layout, the grid I used put the
   label in the 22px first column. Here the real checkbox is shown again, scoped to .lv-consent only. */
.lavi-home .form-style4 .lv-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 12px;
  width: 100%;
}
.lavi-home .form-style4 .lv-consent input[type="checkbox"] {
  display: block;
  visibility: visible;
  opacity: 1;
  position: static;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--theme-color2);
  cursor: pointer;
}
.lavi-home .form-style4 .lv-consent input[type="checkbox"] ~ label {
  display: block;
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding-left: 0;
  float: none;
  position: static;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}
.lavi-home .form-style4 .lv-consent input[type="checkbox"] ~ label::before { content: none; display: none; }
.lavi-home .form-style4 .lv-consent .lv-field-error { flex: 0 0 100%; padding-left: 34px; }

/* ---- get-in-touch CTA: two-column panel (text left, image right) ---- */
.lavi-home .lv-cta { background: var(--smoke-color); }
.lavi-home .lv-cta__box {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 64px;
  border-radius: 40px;
  background: linear-gradient(115deg, #48165f 0%, #5a1e75 70%, #7a2a74 100%);
  box-shadow: 0 24px 50px rgba(72, 22, 95, 0.22);
}
.lavi-home .lv-cta__content { position: relative; z-index: 2; }
.lavi-home .lv-cta__label {
  display: inline-block;
  background: var(--theme-color2);
  color: #fff;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.lavi-home .lv-cta__title {
  color: #fff;
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}
.lavi-home .lv-cta__text { color: #eadff0; font-size: 18px; line-height: 1.65; max-width: 540px; margin-bottom: 30px; }
.lavi-home .lv-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.lavi-home .lv-cta__media { position: relative; text-align: center; margin: -90px 0 -56px; }
.lavi-home .lv-cta__circle {
  position: absolute;
  left: 50%; top: 50%;
  width: 82%; aspect-ratio: 1;
  transform: translate(-50%, -48%);
  border-radius: 50%;
  background: var(--smoke-color);
  box-shadow: 0 0 0 10px rgba(181, 138, 53, 0.45);
}
.lavi-home .lv-cta__img { position: relative; z-index: 2; width: 100%; max-width: 420px; height: auto; }
.lavi-home .lv-cta__plane { position: absolute; z-index: 3; top: 6%; right: 0; width: 70px; height: auto; }
@media (max-width: 991px) {
  .lavi-home .lv-cta__box { padding: 40px 36px; }
  .lavi-home .lv-cta__media { margin: -80px auto 24px; max-width: 360px; }
}
@media (max-width: 575px) {
  .lavi-home .lv-cta__box { padding: 32px 22px; border-radius: 28px; }
  .lavi-home .lv-cta__media { margin-top: -64px; max-width: 280px; }
  .lavi-home .lv-cta__plane { width: 54px; }
  .lavi-home .lv-cta__btns .vs-btn { flex: 1 1 100%; }
}
@keyframes lv-cta-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.lavi-home .lv-cta__plane { animation: lv-cta-float 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lavi-home .lv-cta__plane { animation: none; } }

/* ---- header: top announcement bar removed, so the main header starts at the very top ---- */
.lavi-home .header-lower4 { margin-top: 0; }
.lavi-home .vs-hero-wrapper4 { margin-top: 0; }


/* =====================================================================
   HEADER (homepage): logos left | nav centre | Enquire Now right
   Scoped overrides of Kiddino header-layout4; vendor CSS untouched.
   ===================================================================== */
.lavi-home .sticky-active { background: #fff; box-shadow: 0 6px 24px rgba(72, 22, 95, 0.08); }
.lavi-home .header-lower4 { padding: 10px 0; margin-top: 0; border-radius: 0; background: transparent; }
.lavi-home .header-lower4::before,
.lavi-home .header-lower4::after { display: none; }
.lavi-home .header-lower4 > .row { flex-wrap: nowrap; align-items: center; }

/* logos: sized by height only, width follows the artwork (no tiny fixed boxes) */
.lavi-home .header-logo2 { display: block; }

/* nav: centred, dark purple, roomy spacing */
.lavi-home .menu-style4 { margin-left: 0; padding-top: 0; }
.lavi-home .menu-style4 > ul { text-align: center; }
.lavi-home .menu-style4 > ul > li { margin: 0 28px; }
.lavi-home .menu-style4 > ul > li > a { color: var(--vs-secondary-color); padding: 8px 0; }
.lavi-home .menu-style4 > ul > li > a:hover { color: var(--theme-color); }
/* separator dots sit in the middle of each 56px gap, never touching the text */
.lavi-home .menu-style4 > ul > li::before { right: -32px; width: 6px; height: 6px; margin-top: 0; background: #cbbfd3; }
.lavi-home .menu-style4 > ul > li:last-child::before { display: none; }
/* active + hover underline (pink) */
.lavi-home .menu-style4 > ul > li > a::before {
  bottom: 0; width: 100%; height: 3px; border-radius: 3px; background-color: var(--theme-color);
}
.lavi-home .menu-style4 > ul > li.is-current > a::before,
.lavi-home .menu-style4 > ul > li > a:hover::before { opacity: 1; visibility: visible; }

/* Enquire Now pill with arrow */
.lavi-home .vs-btn.lv-header-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; line-height: 1; margin-top: 0; padding: 0 32px;
  white-space: nowrap;
}
@media (max-width: 575px) { .lavi-home .vs-btn.lv-header-btn { display: none; } }

/* responsive */
@media (max-width: 1399px) {
  .lavi-home .menu-style4 > ul > li { margin: 0 20px; }
  .lavi-home .menu-style4 > ul > li::before { right: -24px; }
}
@media (max-width: 1199px) {
  .lavi-home .header-lower4 > .row > .col { display: none; }
  .lavi-home .header-lower4 > .row { justify-content: space-between; }
}
/* compact sticky state */

/* =====================================================================
   HEADER LOGOS - sized by WIDTH; height follows the artwork (aspect ratio kept)
   Root cause of "too small": sizes were driven by a fixed height on the parent
   container; the PNGs are square with built-in padding, so they rendered tiny.
   ===================================================================== */
.lavi-home .lv-logos--header { display: flex; align-items: center; gap: 16px; }
.lavi-home .lv-logos--header .lv-logo { flex: 0 0 auto; height: auto; padding: 0; border: 0; line-height: 0; }
.lavi-home .lv-logos--header .lv-logo--primary { width: 185px; }
.lavi-home .lv-logos--header .lv-logo img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; }
.lavi-home .header-lower4 { padding: 4px 0; }

/* compact sticky state */
.lavi-home .sticky-active.active .lv-logos--header .lv-logo--primary { width: 120px; }

@media (max-width: 1399px) {
  .lavi-home .lv-logos--header .lv-logo--primary { width: 165px; }
}
/* nav is hidden (hamburger shown) from 1199px down, so the big logos never collide with it */
@media (max-width: 1199px) {
  .lavi-home .lv-logos--header .lv-logo--primary { width: 150px; }
}
@media (max-width: 767px) {
  .lavi-home .lv-logos--header { gap: 12px; }
  .lavi-home .lv-logos--header .lv-logo--primary { width: 120px; }
  .lavi-home .sticky-active.active .lv-logos--header .lv-logo--primary { width: 100px; }
}
@media (max-width: 420px) {
  .lavi-home .lv-logos--header { gap: 8px; }
  .lavi-home .lv-logos--header .lv-logo--primary { width: 96px; }
  .lavi-home .sticky-active.active .lv-logos--header .lv-logo--primary { width: 84px; }
}

/* tighter nav spacing on narrower desktops so the larger logos never push into the menu */
@media (max-width: 1399px) {
  .lavi-home .menu-style4 > ul > li { margin: 0 13px; }
  .lavi-home .menu-style4 > ul > li::before { right: -19px; }
  .lavi-home .menu-style4 > ul > li > a { font-size: 17px; }
  .lavi-home .vs-btn.lv-header-btn { padding: 0 24px; }
}
/* the container is capped at 1320px, so trim the gaps a little from 1400px to 1549px */
@media (min-width: 1400px) and (max-width: 1549px) {
  .lavi-home .menu-style4 > ul > li { margin: 0 21px; }
  .lavi-home .menu-style4 > ul > li::before { right: -27px; }
}

/* =====================================================================
   HERO content (original banner-slide4 background, image, wave and title size untouched)
   ===================================================================== */
.lavi-home .banner-content4 { max-width: 640px; }
.lavi-home .banner-content4 .lv-hero-welcome { font-size: 24px; margin-bottom: 14px; padding-right: 0; }
.lavi-home .banner-content4 .lv-hero-intro { text-shadow: 0 1px 10px rgba(47, 13, 64, 0.35); padding-right: 0; }
.lavi-home .banner-content4 .lv-hero-intro { font-size: 18px; line-height: 1.65; margin-bottom: 16px; max-width: 560px; }

/* short viewports: let the hero grow instead of squeezing the content */
.lavi-home .banner-slide4 { height: auto; min-height: max(85vh, 640px); }

/* tablet: keep text clear of the child */
@media (max-width: 991px) {
  .lavi-home .banner-slide4 { background-position: 68% bottom; }
  .lavi-home .banner-slide4::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(47, 13, 64, 0.72) 0%, rgba(72, 22, 95, 0.5) 55%, rgba(72, 22, 95, 0) 85%);
  }
  .lavi-home .banner-content4 { max-width: 520px; }
}
/* mobile: normal flow so nothing is clipped, with a readable overlay */
@media (max-width: 767px) {
  .lavi-home .banner-slide4 { min-height: 0; }
  .lavi-home .banner-slide4::before {
    background: linear-gradient(180deg, rgba(47, 13, 64, 0.78) 0%, rgba(72, 22, 95, 0.6) 60%, rgba(72, 22, 95, 0.25) 100%);
  }
  .lavi-home .banner-slide4-content { position: relative; top: auto; transform: none; padding: 60px 0 110px; }
  .lavi-home .banner-content4 { max-width: none; }
  .lavi-home .banner-content4 .lv-hero-welcome { font-size: 20px; }
  .lavi-home .banner-content4 .lv-hero-intro { font-size: 16.5px; }
  .lavi-home .banner-content4 .lv-hero-points { font-size: 15px; margin-bottom: 24px; }
  .lavi-home .lv-hero-btns .vs-btn.banner { padding: 0 32px; }
}

/* =====================================================================
   HERO readability / alignment fixes
   ===================================================================== */
/* one left edge + a width that stays clear of the child */
.lavi-home .banner-content4 { max-width: 540px; }
.lavi-home .banner-content4 > * { margin-left: 0; }
.lavi-home .banner-content4 .lv-hero-intro { max-width: 480px; color: #fff; }
@media (max-width: 1199px) { .lavi-home .banner-content4 { max-width: 470px; } }
@media (max-width: 991px)  { .lavi-home .banner-content4 { max-width: 460px; } }
@media (max-width: 767px)  { .lavi-home .banner-content4 { max-width: none; } }

/* highlights: flex-wrap list, two per line, white text, gold separators */
.lavi-home .banner-content4 .lv-hero-points {
  list-style: none; padding: 0; margin: 0 0 30px; max-width: 100%;
  display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 12px; row-gap: 6px;
  font-family: var(--title-font); font-weight: 500; font-size: 16px; line-height: 1.5;
  color: #fff; text-shadow: 0 1px 10px rgba(47, 13, 64, 0.45);
}
.lavi-home .banner-content4 .lv-hero-points li { display: flex; align-items: center; gap: 12px; color: #fff; margin: 0; }
.lavi-home .banner-content4 .lv-hero-points li:nth-child(odd) { justify-content: space-between; }
.lavi-home .banner-content4 .lv-hero-points li:nth-child(odd)::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color2); flex: none;
}
@media (max-width: 767px) { .lavi-home .banner-content4 .lv-hero-points { max-width: none; font-size: 15px; } }

/* hero buttons: remove the Kiddino half-pill hover layers (the dark rectangle) and use a clean colour change */
.lavi-home .lv-hero-btns .vs-btn::before,
.lavi-home .lv-hero-btns .vs-btn::after { content: none; display: none; }
.lavi-home .lv-hero-btns .vs-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.lavi-home .lv-hero-btns .vs-btn:hover { background-color: #a02c5c; color: #fff; }
.lavi-home .lv-hero-btns .vs-btn.style2:hover { background-color: #9a7329; color: #fff; }
/* narrow phones: a single tidy column with a gold bullet before each highlight (no overflow) */
@media (max-width: 480px) {
  .lavi-home .banner-content4 .lv-hero-points { grid-template-columns: 1fr; }
  .lavi-home .banner-content4 .lv-hero-points li:nth-child(odd) { justify-content: flex-start; }
  .lavi-home .banner-content4 .lv-hero-points li:nth-child(odd)::after { content: none; }
  .lavi-home .banner-content4 .lv-hero-points li::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color2); flex: none;
  }
}

/* ---- section rhythm: tighter vertical spacing (template default was 120px / 80px mobile) ---- */
body.lavi-home {
  --section-space: 80px;
  --section-space-mobile: 56px;
}
/* components with their own hard-coded 120px / 103px spacing in style.css */
.lavi-home .cls-layout6 { padding: var(--section-space) 0; }
.lavi-home .form-box4 { padding-bottom: 40px; }
@media (max-width: 991px) { .lavi-home .cls-layout6 { padding: var(--section-space-mobile) 0; } }

/* ---- enquiry form: children illustration ----
   Cause: style.css hides .form-box4::before (the children + grass artwork) at viewport widths <= 1399px.
   A 1920px screen at 100% browser zoom with Windows scaling is only ~1280-1366 CSS px, so it vanished
   there and reappeared at 90% zoom (>= 1400px). Show it at 992-1399px, scaled to the container. */
.lavi-home .form-section4 { overflow-x: clip; }
.lavi-home .form-style4 { position: relative; z-index: 1; }
@media (min-width: 992px) and (max-width: 1399px) {
  .lavi-home .form-box4 { padding-bottom: 80px; }
  .lavi-home .form-box4::before {
    display: block;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1512 / 750;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

/* footer: both logos identical size (110px square plates); copyright row + credit link */
.lavi-home .lv-logos--footer { align-items: center; }
.lavi-home .lv-logos--footer .lv-logo img { width: 100%; height: 100%; object-fit: contain; }
.lavi-home .footer-bottom5 .copyright-wrap-five p { margin-bottom: 0; }
.lavi-home .footer-bottom5 .lv-credit a { color: #fff; }
.lavi-home .footer-bottom5 .lv-credit a:hover { color: #fff; }

/* =====================================================================
   HERO background: new preschool photo (replaces hero-bg-4-1.png)
   assets/img/hero/lavi-hero.webp (+ -mobile.webp). The bottom wave that was baked into the old
   PNG is rebuilt below as a repeating SVG scallop in the ivory of the next section.
   ===================================================================== */
.lavi-home .banner-slide4 {
  background: #8f74d6 url(../img/hero/lavi-hero.webp) no-repeat 72% 28% / cover;
}
/* purple readability overlay on the (light) left side where the text sits */
.lavi-home .banner-slide4::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(72, 22, 95, 0.82) 0%, rgba(72, 22, 95, 0.6) 34%, rgba(72, 22, 95, 0.12) 58%, rgba(72, 22, 95, 0) 70%);
}
/* wave divider */
.lavi-home .banner-slide4::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 64' preserveAspectRatio='none'%3E%3Cpath fill='%23fff9ef' d='M0 64V40a65 36 0 0 1 130 0a65 36 0 0 1 130 0V64z'/%3E%3C/svg%3E") repeat-x left bottom / 260px 64px;
}
@media (max-width: 991px) {
  .lavi-home .banner-slide4 { background-position: 76% 30%; }
  .lavi-home .banner-slide4::before {
    background: linear-gradient(90deg, rgba(72, 22, 95, 0.82) 0%, rgba(72, 22, 95, 0.6) 55%, rgba(72, 22, 95, 0.1) 90%);
  }
  .lavi-home .banner-slide4::after { height: 48px; background-size: 200px 48px; }
}
@media (max-width: 767px) {
  .lavi-home .banner-slide4 {
    background: #8f74d6 url(../img/hero/lavi-hero-mobile.webp) no-repeat 82% center / cover;
  }
  .lavi-home .banner-slide4::before {
    background: linear-gradient(180deg, rgba(47, 13, 64, 0.8) 0%, rgba(72, 22, 95, 0.62) 60%, rgba(72, 22, 95, 0.2) 100%);
  }
  .lavi-home .banner-slide4::after { height: 36px; background-size: 150px 36px; }
}
/* footer copyright row: no underlines on links */
.lavi-home .footer-bottom5 .copyright-wrap-five a,
.lavi-home .footer-bottom5 .copyright-wrap-five a:hover { text-decoration: none; }

/* footer copyright: one centred line, credit after a thin separator */
.lavi-home .footer-bottom5 .copyright-wrap-five { justify-content: center; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; text-align: center; }
.lavi-home .footer-bottom5 .lv-credit::before { content: "|"; margin-right: 14px; opacity: 0.55; font-weight: 400; }
@media (max-width: 767px) {
  .lavi-home .footer-bottom5 .copyright-wrap-five { flex-direction: column; }
  .lavi-home .footer-bottom5 .lv-credit::before { display: none; }
}

/* =====================================================================
   FOOTER SOCIAL ICONS (template .vs-social social-style1 v2, inside the Enquiries block; shared by all five pages)
   ===================================================================== */
.lavi-home .lv-contact5--social { align-items: flex-start; }
.lavi-home .lv-contact5--social .footer-icon { flex: none; }
.lavi-home .lv-footer-social { --icon-size: 42px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.lavi-home .lv-footer-social a { margin: 0; line-height: 38px; font-size: 17px; }
.lavi-home .lv-footer-social a:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 3px; }

/* =====================================================================
   FLOATING WHATSAPP + CALL BUTTONS (left side, all five pages)
   ===================================================================== */
.lv-float { position: fixed; left: 18px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; gap: 12px; }
.lv-float__btn {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 26px; line-height: 1; text-decoration: none;
  box-shadow: 0 8px 22px rgba(47, 13, 64, 0.3); border: 3px solid #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.lv-float__btn--wa { background: #23543b; font-size: 30px; }
.lv-float__btn--call { background: #c23872; }
.lv-float__btn:hover { transform: translateY(-3px) scale(1.06); color: #fff; box-shadow: 0 12px 26px rgba(47, 13, 64, 0.38); }
.lv-float__btn--wa:hover { background: #1c4430; }
.lv-float__btn--call:hover { background: #a02c5c; }
.lv-float__btn:focus-visible { outline: 3px solid #b58a35; outline-offset: 3px; }
@media (max-width: 575px) {
  .lv-float { left: 12px; bottom: 16px; gap: 10px; }
  .lv-float__btn { width: 50px; height: 50px; font-size: 22px; }
  .lv-float__btn--wa { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .lv-float__btn { transition: none; } }

/* =====================================================================
   WHY CHOOSE US: all four geometric photos shown at the same height (widths follow each shape)
   ===================================================================== */
.lavi-home .feature-style2 .feature-img { height: 290px; display: flex; align-items: center; justify-content: center; }
.lavi-home .feature-style2 .feature-img img { height: 290px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 575px) {
  .lavi-home .feature-style2 .feature-img { height: 270px; }
  .lavi-home .feature-style2 .feature-img img { height: 270px; }
}

/* =====================================================================
   HOME WELCOME: "Read More" button (pill with a gold arrow disc, soft shadow, hover slide)
   ===================================================================== */
.lavi-home .vs-btn.lv-readmore {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 34px; height: 58px; line-height: 1; font-size: 18px;
  background: linear-gradient(120deg, #c23872 0%, #a02c5c 100%);
  box-shadow: 0 10px 24px rgba(194, 56, 114, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lavi-home .vs-btn.lv-readmore::before,
.lavi-home .vs-btn.lv-readmore::after { content: none; display: none; }
.lavi-home .lv-readmore__icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #b58a35; color: #fff; font-size: 16px; transition: transform 0.3s ease, background-color 0.3s ease;
}
.lavi-home .vs-btn.lv-readmore:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(194, 56, 114, 0.45); color: #fff; background: linear-gradient(120deg, #c23872 0%, #a02c5c 100%); }
.lavi-home .vs-btn.lv-readmore:hover .lv-readmore__icon { transform: translateX(4px); background: #48165f; }
.lavi-home .vs-btn.lv-readmore:focus-visible { outline: 3px solid #b58a35; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .lavi-home .vs-btn.lv-readmore, .lavi-home .lv-readmore__icon { transition: none; } }

/* =====================================================================
   HOME PROGRAMS: compact card text area (the template left ~50px of padding plus paragraph margin)
   ===================================================================== */
.lavi-home .cls-layout6 .class-style2.v2 .class-body { padding: 30px 36px 28px 40px; }
.lavi-home .cls-layout6 .class-style2.v2 .class-title { margin: 0 0 10px; }
.lavi-home .cls-layout6 .class-style2.v2 .class-text { margin: 0; }
@media (max-width: 1199px) {
  .lavi-home .cls-layout6 .class-style2.v2 .class-body { padding: 26px 24px 26px 24px; }
}

/* tablet/phone: small stacked pair in the bottom-left corner (WhatsApp above Call) */
@media (max-width: 991px) {
  .lv-float { flex-direction: column; left: 10px; bottom: 10px; gap: 8px; }
  .lv-float__btn { width: 44px; height: 44px; font-size: 19px; border-width: 2px; opacity: 0.94; }
  .lv-float__btn--wa { font-size: 23px; }
}

/* Beyond the Classroom on phones/tablets: keep the icon beside the text at every width (the template stacks it under 417px) */
@media (max-width: 991px) {
  .lavi-home .activity-box { padding-left: 106px; min-height: 88px; margin-bottom: 28px; padding-bottom: 0; }
  .lavi-home .activity-box:last-child { margin-bottom: 28px; }
  .lavi-home .activity-icon { position: absolute; top: 0; left: 0; width: 88px; height: 88px; line-height: 88px; margin-bottom: 0; }
  .lavi-home .activity-icon i { font-size: 32px; line-height: 88px; }
  .lavi-home .activity-content .title { font-size: 22px; margin-bottom: 8px; }
  .lavi-home .activity-content p { font-size: 16px; margin-bottom: 0; }
}

/* floating WhatsApp/Call: hidden at the top of the page, they slide in once the visitor scrolls (see main.js). Without JS they stay visible. */
.lv-float.lv-float--armed { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.lv-float.lv-float--armed.lv-float--on { opacity: 1; visibility: visible; transform: none; }

/* header menu: gaps and text scale with the screen width, so the menu fills the space between logos and button without wrapping */
@media (min-width: 1200px) {
  .lavi-home .menu-style4 { --lv-g: clamp(14px, 2.2vw, 34px); }
  .lavi-home .menu-style4 > ul > li { margin: 0 var(--lv-g); }
  .lavi-home .menu-style4 > ul > li::before { right: calc(-1 * var(--lv-g) - 3px); }
  .lavi-home .menu-style4 > ul > li > a { font-size: clamp(17px, 1.3vw, 20px); }
}

/* header: breathing room on the right of the button (the logos' artwork already has padding on the left) */
@media (min-width: 1200px) and (max-width: 1399px) { .lavi-home .sticky-active .container-style4 { padding-right: 40px; } }


/* =====================================================================
   MOBILE HEADER BRAND (767px and below only): small LaVi logo with "LaVi Bloom Academy" on ONE line directly below it.
   Tablet/desktop keep the plain logo at its original size, with no text.
   ===================================================================== */
.lavi-home .lv-brand__line { display: none; }
@media (max-width: 767px) {
  .lavi-home .lv-logos--header .lv-logo--primary.lv-brand {
    width: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none;
  }
  .lavi-home .lv-logos--header .lv-brand > img { width: 50px; height: auto; flex: 0 0 auto; }
  .lavi-home .sticky-active.active .lv-logos--header .lv-brand > img { width: 44px; }
  .lavi-home .lv-logos--header .lv-brand__line {
    display: block; white-space: nowrap; text-align: center; line-height: 1.1; letter-spacing: 0.01em;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700;
    font-size: clamp(12px, 4.4vw, 18px);
  }
  .lavi-home .sticky-active.active .lv-logos--header .lv-brand__line { font-size: clamp(11px, 3.9vw, 16px); }
  .lavi-home .lv-brand__line span { font-family: inherit; font-weight: inherit; }
  .lavi-home .lv-bn-la { color: #4e1a72; }
  .lavi-home .lv-bn-vi { color: #e5207f; }
  .lavi-home .lv-bn-bloom { color: #1f6a41; }
  .lavi-home .lv-bn-ac { color: #c4922f; }
}
@media (max-width: 420px) {
  .lavi-home .lv-logos--header .lv-brand > img { width: 46px; }
}

/* mobile header: the six activity icons, centred below the brand name (hidden from 768px up, where the logo image already shows them) */
.lavi-home .lv-brand__icons { display: none; }
@media (max-width: 767px) {
  .lavi-home .lv-logos--header .lv-brand__icons { display: block; width: 0; min-width: 100%; max-width: 150px; line-height: 0; margin-top: 1px; }
  .lavi-home .lv-logos--header .lv-brand__icons img { display: block; width: 100%; height: auto; }
}

/* mobile header: the small LaVi logo sits at the left edge of the brand unit (name and icons stay centred under each other) */
@media (max-width: 767px) { .lavi-home .lv-logos--header .lv-brand > img { align-self: flex-start; } }

/* sticky (scrolled) mobile header: the old fixed width of the compact logo (100px / 84px) was squeezing the brand unit and clipping the name on the left */
@media (max-width: 767px) { .lavi-home .sticky-active.active .lv-logos--header .lv-logo--primary.lv-brand { width: auto; } }

/* mobile menu panel (hamburger open): same brand unit as the header, centred - logo, name on one line, activity icons */
.lavi-home .lv-logos--mobile .lv-logo--primary.lv-brand {
  width: auto; height: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;
}
.lavi-home .lv-logos--mobile .lv-brand > img { width: 74px; height: auto; }
.lavi-home .lv-logos--mobile .lv-brand__line {
  display: block; white-space: nowrap; text-align: center; line-height: 1.1; letter-spacing: 0.01em;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 21px;
}
.lavi-home .lv-logos--mobile .lv-brand__line span { font-family: inherit; font-weight: inherit; }
.lavi-home .lv-logos--mobile .lv-brand__icons { display: block; width: 0; min-width: 100%; line-height: 0; }
.lavi-home .lv-logos--mobile .lv-brand__icons img { display: block; width: 100%; height: auto; }