/*
 * DUPLICATE of styles/aslan-marketing-shell.css — keep in sync when editing.
 * Linked after Webflow’s CDN stylesheet on `/` only so these rules win over Webflow.
 */

.aslan-marketing-root {
  background-color: var(--background) !important;
}

/* --- Header --- */

.aslan-marketing-header {
  display: block !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-auto-columns: unset !important;
  grid-auto-rows: unset !important;
  grid-column-gap: unset !important;
  grid-row-gap: unset !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
  background-color: #fff !important;
  background-image: none !important;
  font-size: 1rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  border-bottom: 2px solid #000 !important;
}

.aslan-marketing-header > div {
  min-width: 0;
}

.aslan-marketing-header .aslan-marketing-header__row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 4.25rem;
}

@media (min-width: 1024px) {
  .aslan-marketing-header nav[aria-label='Main'] {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
}

@media (min-width: 1280px) {
  .aslan-marketing-header nav[aria-label='Main'] {
    gap: 2rem !important;
  }
}

@media (max-width: 1023px) {
  .aslan-marketing-header nav[aria-label='Main'] {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .aslan-marketing-header .aslan-marketing-header__mobile-tools {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
}

@media (min-width: 1024px) {
  .aslan-marketing-header .aslan-marketing-header__mobile-tools {
    display: none !important;
  }
}

.aslan-marketing-header form.aslan-marketing-header__search {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  align-self: auto !important;
  justify-content: flex-start !important;
  flex: none !important;
}

.aslan-marketing-header form.aslan-marketing-header__search > div {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  border: 2px solid #000 !important;
  border-radius: 9999px !important;
  background-color: #fff !important;
  box-shadow: 2px 2px 0 0 rgb(0, 0, 0) !important;
  padding: 0.25rem 0.5rem !important;
}

.aslan-marketing-header form.aslan-marketing-header__search input[type='search'] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.875rem !important;
  color: var(--foreground) !important;
}

.aslan-marketing-header nav[aria-label='Main'] a:not(.aslan-header-cta),
.aslan-marketing-header nav[aria-label='Main'] button {
  color: var(--foreground) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 1.125rem !important;
}

.aslan-marketing-header .aslan-header-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border: 2px solid #000 !important;
  border-radius: 9999px !important;
  background-color: #f2e99a !important;
  box-shadow: 3px 3px 0 0 rgb(0, 0, 0) !important;
  color: #000 !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
}

/* --- Footer --- */

.aslan-site-footer {
  font-size: 1rem !important;
  line-height: normal !important;
}

.aslan-site-footer h2 {
  font-family: var(--font-heading) !important;
}

.aslan-site-footer nav[aria-label='Footer'] h2 {
  color: var(--foreground) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  .aslan-site-footer nav[aria-label='Footer'] h2 {
    font-size: 1.125rem !important;
  }
}

.aslan-site-footer nav[aria-label='Footer'] > div > ul {
  margin-top: 1rem !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
}

.aslan-site-footer nav[aria-label='Footer'] li {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.aslan-site-footer nav[aria-label='Footer'] a:not([data-aslan-footer-see-all]) {
  color: rgb(61 61 61) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  margin-left: 0 !important;
}

.aslan-site-footer nav[aria-label='Footer'] a:not([data-aslan-footer-see-all]):hover {
  color: var(--foreground) !important;
  text-decoration: underline !important;
}

.aslan-site-footer nav[aria-label='Footer'] a[data-aslan-footer-see-all] {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  margin-left: 0 !important;
}

.aslan-site-footer nav[aria-label='Footer'] a[data-aslan-footer-see-all]:hover {
  text-decoration: underline !important;
}

.aslan-site-footer a[data-aslan-footer-say-hi] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border: 2px solid #000 !important;
  border-radius: 9999px !important;
  background-color: #add8e6 !important;
  box-shadow: 3px 3px 0 0 rgb(0, 0, 0) !important;
  color: #000 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.75rem !important;
  text-decoration: none !important;
}

.aslan-site-footer .aslan-footer-legal a {
  text-decoration: none !important;
}

.aslan-site-footer .aslan-footer-legal a:hover {
  text-decoration: underline !important;
}


/* ========== Home layout overrides (after Webflow; moved from styles/webflow-home-overrides.css) ========== */

/*
 * Loaded after Webflow shared CSS on `/` only.
 * Legacy `.site-header` rules kept for any remaining MakerKit usage.
 */
.site-header .button,
.site-header .w-button,
.site-header button {
  background-color: unset;
  box-shadow: none;
  border: unset;
  border-radius: unset;
  outline: unset;
  padding: unset;
  font-weight: unset;
  transform: none;
  filter: none;
}

.site-header .button:hover,
.site-header .w-button:hover,
.site-header button:hover {
  box-shadow: none;
  transform: none;
  filter: none;
}

.reviewer-photo--empty {
  min-width: 4.5rem;
  min-height: 4.5rem;
  border-radius: 9999px;
  background: #e8e8e8;
}

/* Multi-column testimonial track: allow slides to shrink evenly */
.slider1.pill .splide__slide {
  min-width: 0;
}

/*
 * Webflow’s shared CSS sets `.splide.slider1.pill { padding-right: 14em }` (then 6vw)
 * to reserve space for a single-slide layout. That clips 3–4-up carousels.
 */
main.main-wrapper .section_home-testimonials .splide.slider1.pill {
  padding-right: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/*
 * Webflow sets `.splide__list { column-gap: 1rem }` and `.splide__slide { width: 90% }`.
 * Extra gap widens the track past the viewport and clips the last testimonial card.
 */
main.main-wrapper .section_home-testimonials .splide__list {
  column-gap: 0 !important;
  gap: 0 !important;
  grid-column-gap: 0 !important;
}

/* Undo Webflow’s 90% slide width so Splide’s inline slide widths control the layout */
main.main-wrapper .section_home-testimonials .slider1 .splide__slide {
  width: auto;
  align-self: stretch;
  display: flex;
  box-sizing: border-box;
  padding: 2px 4px 6px 2px;
}

/* Webflow: `.testimonials-wrapper:hover { transform: scale(1.02) }` — disable grow */
main.main-wrapper .section_home-testimonials .testimonials-wrapper {
  transition: none !important;
  height: 100%;
  overflow: visible !important;
}

main.main-wrapper .section_home-testimonials .testimonials-wrapper:hover {
  transform: none !important;
}

/* Splide fade slider: fill Webflow `section_home-vision` height */
.home-slider,
.home-slider .splide__track,
.home-slider .splide__list,
.home-slider .splide__slide {
  height: 100%;
}

/* Hero: headline and CTAs first on small screens; Webflow grid may assume image-first — enforce reading order. */
@media screen and (max-width: 991px) {
  .aslan-hero-layout.home-hero-component {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .aslan-hero-layout .aslan-hero-copy {
    order: 1;
  }

  .aslan-hero-layout .aslan-hero-photos {
    order: 2;
  }
}

@media screen and (min-width: 992px) {
  .aslan-hero-layout.home-hero-component {
    align-items: center;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .aslan-hero-layout.home-hero-component .aslan-hero-copy {
    order: 1;
    align-self: center;
  }

  .aslan-hero-layout.home-hero-component .aslan-hero-photos {
    order: 2;
    align-self: center;
    overflow: visible !important;
  }

  .aslan-hero-layout.home-hero-component .aslan-hero-photos .grid-3 {
    align-items: start !important;
  }
}

/* Hero copy uses Tailwind + theme tokens; Webflow’s utility classes are removed from markup. */
.section_home-hero .aslan-hero-copy h1 {
  font-family: var(--font-heading);
}

.section_home-hero .aslan-hero-copy p {
  font-family: var(--font-sans);
}

/* Webflow `.button` / `.w-button` must not restyle marketing CTAs in the hero */
.section_home-hero .aslan-hero-copy a[href] {
  text-decoration: none;
}

/* Hero CTAs: Webflow global link/button rules can strip pill backgrounds — restore tokens */
.section_home-hero .aslan-hero-copy a.aslan-hero-cta-primary,
.section_home-hero .aslan-hero-copy a.aslan-hero-cta-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border: 2px solid #000 !important;
  border-radius: 9999px !important;
  box-shadow: 3px 3px 0 0 rgb(0, 0, 0) !important;
  color: #000 !important;
  font-weight: 600 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.section_home-hero .aslan-hero-copy a.aslan-hero-cta-primary {
  background-color: #f2e99a !important;
}

.section_home-hero .aslan-hero-copy a.aslan-hero-cta-secondary {
  background-color: #cde9d6 !important;
}

.section_home-hero .aslan-hero-copy a.aslan-hero-cta-primary:hover,
.section_home-hero .aslan-hero-copy a.aslan-hero-cta-secondary:hover {
  transform: translate(1px, 1px) !important;
  box-shadow: 2px 2px 0 0 rgb(0, 0, 0) !important;
}

/* Hero top spacing — keep content close to header */
main.main-wrapper .section_home-hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: clamp(0.5rem, 1.2vw, 1rem) !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

@media screen and (min-width: 768px) {
  main.main-wrapper .section_home-hero {
    padding-top: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  main.main-wrapper .section_home-hero {
    padding-top: 0 !important;
  }
}

/* Hero decorative stars — very slow rotation */
@keyframes aslan-hero-star-drift {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.section_home-hero .sparkle-star-orange .icon-1x1-large,
.section_home-hero .sparkle-star-yellow .icon-1x1-large {
  animation: aslan-hero-star-drift 140s linear infinite;
  transform-origin: center center;
}

.section_home-hero .sparkle-star-yellow .icon-1x1-large {
  animation-duration: 180s;
  animation-direction: reverse;
}

/* Lion section: same slow star rotation as the hero */
.section_home-lionhead .sparkle-star-orange .icon-1x1-large,
.section_home-lionhead .sparkle-star-yellow .icon-1x1-large {
  animation: aslan-hero-star-drift 140s linear infinite;
  transform-origin: center center;
}

.section_home-lionhead .sparkle-star-yellow .icon-1x1-large {
  animation-duration: 180s;
  animation-direction: reverse;
}

/*
 * Testimonials → “Say Hi” → featured block: Webflow pulls the green featured
 * section up (negative margin). Extra bottom space keeps copy readable.
 */
main.main-wrapper .section_home-testimonials {
  overflow: hidden;
  padding-bottom: 2rem !important;
  margin-bottom: clamp(2.25rem, 6vw, 4rem) !important;
}

@media screen and (min-width: 768px) {
  main.main-wrapper .section_home-testimonials {
    padding-bottom: 2.5rem !important;
    margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem) !important;
  }
}

/* Keep testimonial cards / track paint inside the section (no yellow bleed below) */
main.main-wrapper .section_home-testimonials .splide__viewport {
  overflow: hidden;
}

main.main-wrapper .container-medium.notification {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
}

/*
 * Webflow: `.home-topics-featured-item-single { margin-top: -2.1rem }` pulls the
 * featured gallery over the “Say Hi” banner. Reset and lower stacking so the
 * notice stays visible.
 */
main.main-wrapper .section_featured-resources {
  z-index: 0 !important;
}

main.main-wrapper .home-topics-featured-item-single.w-dyn-item,
main.main-wrapper .home-topics-featured-item-single {
  margin-top: 0 !important;
}

/* Side margins on the green featured panel (Webflow full-bleeds with inset 0) */
main.main-wrapper .section_featured-resources .section-bg.green {
  left: clamp(1rem, 4vw, 2.5rem) !important;
  right: clamp(1rem, 4vw, 2.5rem) !important;
  width: auto !important;
}

/* Lion face: center pupils inside eye sockets */
.section_home-lionhead .home-logo-eye {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.section_home-lionhead .lion-head-eye-left,
.section_home-lionhead .lion-head-eye-right {
  position: static !important;
  inset: unset !important;
}

/* Vision / photo slider: full-bleed in section + kill Webflow 90% slide width (causes side bars) */
main.main-wrapper .section_home-vision .home-slider {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: min(70vh, 720px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  inset: auto !important;
  position: relative !important;
}

main.main-wrapper .section_home-vision .home-slider .splide__viewport {
  width: 100% !important;
  height: 100% !important;
  min-height: min(70vh, 720px) !important;
}

main.main-wrapper .section_home-vision .home-slider .splide__list {
  column-gap: 0 !important;
  gap: 0 !important;
  grid-column-gap: 0 !important;
}

main.main-wrapper .section_home-vision .home-slider .splide__track,
main.main-wrapper .section_home-vision .home-slider .splide__list,
main.main-wrapper .section_home-vision .home-slider .splide__slide {
  width: 100% !important;
  height: 100% !important;
  min-height: min(70vh, 720px) !important;
}

main.main-wrapper .section_home-vision .home-slider .splide__slide {
  align-self: stretch !important;
}

main.main-wrapper .section_home-vision .home-slider .splide__slide > div {
  position: relative !important;
  width: 100% !important;
  min-height: min(70vh, 720px) !important;
  height: 100% !important;
}

main.main-wrapper .section_home-vision .home-slider .home-slider-image,
main.main-wrapper .section_home-vision .home-slider img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
}

/*
 * Extra specificity + !important so these win over Webflow and Splide (this file loads last).
 * “Say Hi” sits as a sibling directly under testimonials when the carousel is shown.
 */
.aslan-marketing-root main.main-wrapper .section_home-testimonials {
  overflow: hidden !important;
  contain: layout paint !important;
}

.aslan-marketing-root main.main-wrapper .section_home-testimonials .splide.slider1.pill,
.aslan-marketing-root main.main-wrapper .section_home-testimonials .splide__track,
.aslan-marketing-root main.main-wrapper .section_home-testimonials .splide__viewport {
  overflow: hidden !important;
}

/* Tighter card shadow so less paints past the clip (Webflow uses 3px 3px 1px) */
.aslan-marketing-root main.main-wrapper .section_home-testimonials .testimonials-wrapper {
  box-shadow: 3px 3px 0 0 #000 !important;
  height: 100%;
  overflow: visible !important;
}

.aslan-marketing-root main.main-wrapper .section_home-testimonials + .container-medium.notification {
  margin-top: clamp(1rem, 2.5vw, 1.75rem) !important;
}

.aslan-marketing-root main.main-wrapper .container-medium.notification {
  position: relative !important;
  z-index: 5 !important;
  margin-bottom: clamp(4rem, 9vw, 6rem) !important;
}

.aslan-marketing-root main.main-wrapper .section_featured-resources {
  z-index: 0 !important;
}

.aslan-marketing-root main.main-wrapper .home-topics-featured-item-single.w-dyn-item,
.aslan-marketing-root main.main-wrapper .home-topics-featured-item-single {
  margin-top: 0 !important;
}

/* Green band: clear Webflow `inset` shorthand, then inset from edges */
.aslan-marketing-root main.main-wrapper .section_featured-resources .section-bg.green {
  inset: unset !important;
  top: auto !important;
  left: clamp(1rem, 5vw, 3rem) !important;
  right: clamp(1rem, 5vw, 3rem) !important;
  bottom: 0 !important;
  width: auto !important;
}

/* Featured row: match gutters (Webflow padding-global is easy to miss visually) */
.aslan-marketing-root main.main-wrapper .section_featured-resources > .padding-global {
  padding-left: clamp(1rem, 5vw, 3rem) !important;
  padding-right: clamp(1rem, 5vw, 3rem) !important;
}