/* Homepage sections only. Shared site styles remain in style.css. */


/* =========================================================
   HOMEPAGE HERO
   ========================================================= */

.aespl-home-hero {
  position: relative;
  width: 100%;

  /*
   * Desktop banner ratio.
   * The hero.php now uses responsive <picture> images.
   */
  aspect-ratio: 1920 / 650;

  height: auto;
  min-height: 0;

  overflow: hidden;

  background: #031b11;
  color: #fff;

  isolation: isolate;
}


/* =========================================================
   HERO IMAGE — SHARED
   ========================================================= */

.aespl-home-hero__image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #031b11;

  z-index: -2;
}

.aespl-home-hero__image picture {
  display: block;

  width: 100%;
  height: 100%;
}

.aespl-home-hero__image img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  /*
   * Do not use cover here.
   * Desktop / tablet / mobile assets are supplied separately
   * and are designed for their own breakpoint.
   */
  object-fit: fill;
  object-position: center center;

  transform: none !important;
  transition: none !important;
}


/* =========================================================
   SINGLE HERO OVERLAY
   ========================================================= */

.aespl-home-hero--single
.aespl-home-hero__overlay {
  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(3, 25, 15, 0.98) 0%,
      rgba(3, 25, 15, 0.97) 42%,
      rgba(4, 25, 15, 0.78) 53%,
      rgba(6, 26, 15, 0.28) 72%,
      rgba(5, 19, 12, 0.18) 100%
    );
}


/*
 * Slider banners are finished visual assets.
 * No additional overlay is added.
 */

.aespl-home-hero--slider
.aespl-home-hero__overlay {
  display: none !important;
}


/* =========================================================
   HERO CONTENT — SINGLE BANNER
   ========================================================= */

.aespl-home-hero--single
.aespl-home-hero__content {
  position: relative;

  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex;

  align-items: center;
  justify-content: flex-start;

  padding-top: 48px;
  padding-bottom: 112px;
}

.aespl-home-hero__copy {
  width: min(625px, 56%);
}


/* =========================================================
   HERO EYEBROW
   ========================================================= */

.aespl-home-hero__eyebrow {
  display: flex;

  align-items: center;

  gap: 9px;

  margin: 0 0 13px;

  color: #c5d990;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.aespl-home-hero__eyebrow::before {
  content: '';

  width: 28px;
  height: 1px;

  flex: 0 0 28px;

  background: currentColor;
}


/* =========================================================
   HERO HEADING
   ========================================================= */

.aespl-home-hero h1 {
  max-width: 625px;

  margin: 0;

  color: #fffdf6;

  font-family:
    "Fraunces",
    Georgia,
    serif;

  font-size:
    clamp(
      3rem,
      5vw,
      5.15rem
    );

  font-weight: 600;

  line-height: 0.96;

  letter-spacing: -0.045em;
}


/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.aespl-home-hero__description {
  max-width: 500px;

  margin: 24px 0 31px;

  color: rgba(
    255,
    255,
    255,
    0.88
  );

  font-size: 1.04rem;

  line-height: 1.7;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.aespl-home-hero__button {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  min-height: 52px;

  padding: 0 22px 0 24px;

  border: 1px solid #d0dfaa;

  border-radius: 2px;

  background: #c9d99a;

  color: #123827;

  font-size: 0.76rem;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  text-decoration: none;

  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.aespl-home-hero__button:hover {
  background: #fffdf5;

  color: #0d3d2f;

  transform: translateY(-2px);
}

.aespl-home-hero__button svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   HERO SEAL — SINGLE BANNER ONLY
   ========================================================= */

.aespl-home-hero--single
.aespl-home-hero__seal {
  display: grid;

  place-items: center;

  width: 124px;
  height: 124px;

  margin: 0 6% 34px 0;

  border: 1px solid rgba(
    216,
    233,
    176,
    0.72
  );

  border-radius: 50%;

  background: rgba(
    10,
    49,
    30,
    0.36
  );

  backdrop-filter: blur(3px);

  color: #edf4dc;

  text-align: center;

  text-transform: uppercase;
}

.aespl-home-hero--single
.aespl-home-hero__seal svg {
  width: 38px;
  height: 38px;

  fill: none;

  stroke: #ccdf9a;

  stroke-width: 1.25;
}

.aespl-home-hero--single
.aespl-home-hero__seal span {
  margin-top: -5px;

  font-size: 0.52rem;

  font-weight: 700;

  letter-spacing: 0.13em;
}

.aespl-home-hero--single
.aespl-home-hero__seal strong {
  margin-top: -17px;

  font-size: 0.65rem;

  letter-spacing: 0.14em;
}


/* =========================================================
   HERO SLIDER
   ========================================================= */

.aespl-home-hero--slider {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 0;

  touch-action: pan-y;

  user-select: none;
}


/* ---------------------------------------------------------
   Slider viewport
   --------------------------------------------------------- */

.aespl-home-hero__slides {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  z-index: 0;
}


/* ---------------------------------------------------------
   Individual slide
   --------------------------------------------------------- */

.aespl-home-hero__slide {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 0;

  transition:
    opacity 700ms ease,
    visibility 700ms ease;
}


/* ---------------------------------------------------------
   Active slide
   --------------------------------------------------------- */

.aespl-home-hero__slide.is-active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  z-index: 2;
}


/* ---------------------------------------------------------
   Slider image
   --------------------------------------------------------- */

.aespl-home-hero--slider
.aespl-home-hero__slide
.aespl-home-hero__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;

  background: #031b11;

  overflow: hidden;

  transform: none !important;

  transition: none !important;
}

.aespl-home-hero--slider
.aespl-home-hero__slide
.aespl-home-hero__image picture {
  width: 100%;
  height: 100%;
}

.aespl-home-hero--slider
.aespl-home-hero__slide
.aespl-home-hero__image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;

  object-position: center center;

  transform: none !important;

  transition: none !important;
}


/* ---------------------------------------------------------
   Active image
   --------------------------------------------------------- */

.aespl-home-hero--slider
.aespl-home-hero__slide.is-active
.aespl-home-hero__image,
.aespl-home-hero--slider
.aespl-home-hero__slide.is-active
.aespl-home-hero__image img {
  transform: none !important;
}


/* =========================================================
   SLIDER NAVIGATION — ALL DEVICES
   ========================================================= */

.aespl-home-hero--slider
.aespl-home-hero__navigation {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  transform: none;

  z-index: 50;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Arrow buttons
   --------------------------------------------------------- */

.aespl-home-hero__arrow {
  position: absolute;

  top: 50%;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  padding: 0;

  border: 1px solid rgba(
    225,
    238,
    207,
    0.55
  );

  border-radius: 50%;

  background: rgba(
    8,
    39,
    24,
    0.45
  );

  color: #f4f8e9;

  backdrop-filter: blur(7px);

  -webkit-backdrop-filter: blur(7px);

  cursor: pointer;

  pointer-events: auto;

  transform: translateY(-50%);

  box-shadow:
    0 5px 18px rgba(
      0,
      0,
      0,
      0.14
    );

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}


/* Previous — left center */

.aespl-home-hero--slider
.aespl-home-hero__arrow:first-child {
  left: 28px;
}


/* Next — right center */

.aespl-home-hero--slider
.aespl-home-hero__arrow:last-child {
  right: 28px;
}


/* ---------------------------------------------------------
   Arrow hover / active
   --------------------------------------------------------- */

.aespl-home-hero__arrow:hover {
  background: rgba(
    201,
    217,
    154,
    0.95
  );

  border-color: #c9d99a;

  color: #123827;

  transform:
    translateY(-50%)
    scale(1.06);
}

.aespl-home-hero__arrow:active {
  transform:
    translateY(-50%)
    scale(0.96);
}

.aespl-home-hero__arrow:focus-visible {
  outline: 2px solid #c9d99a;

  outline-offset: 3px;
}

.aespl-home-hero__arrow svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* =========================================================
   SLIDER DOTS — EXACT CENTER
   ========================================================= */

.aespl-home-hero__dots {
  position: absolute;

  left: 50%;
  bottom: 28px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  margin: 0;
  padding: 0;

  transform: translateX(-50%);

  pointer-events: auto;
}

.aespl-home-hero__dot {
  position: relative;

  width: 7px;
  height: 7px;

  flex: 0 0 auto;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: rgba(
    244,
    248,
    233,
    0.58
  );

  cursor: pointer;

  transition:
    width 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}

.aespl-home-hero__dot:hover {
  background: rgba(
    244,
    248,
    233,
    0.9
  );
}

.aespl-home-hero__dot.is-active {
  width: 23px;

  border-radius: 999px;

  background: #c9d99a;
}

.aespl-home-hero__dot:focus-visible {
  outline: 2px solid #c9d99a;

  outline-offset: 4px;
}


/* =========================================================
   DRAGGING
   ========================================================= */

.aespl-home-hero.is-dragging {
  cursor: grabbing;
}

.aespl-home-hero.is-dragging
.aespl-home-hero__slide {
  transition: none;
}

.aespl-home-hero.is-dragging
.aespl-home-hero__image,
.aespl-home-hero.is-dragging
.aespl-home-hero__image img {
  transition: none !important;
}


/* =========================================================
   HERO ASSURANCES — COMMON
   ========================================================= */

.aespl-home-hero__assurances {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 60;

  width: 100%;

  border-top: 1px solid rgba(
    255,
    255,
    255,
    0.2
  );

  background: #fffdf7;

  color: #143d2d;

  box-shadow:
    0 -10px 26px rgba(
      5,
      26,
      16,
      0.11
    );
}

.aespl-home-hero__assurance-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.aespl-home-hero__assurance {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 84px;

  padding: 12px 24px;

  border-right:
    1px solid rgba(
      13,
      61,
      47,
      0.1
    );
}

.aespl-home-hero__assurance:last-child {
  border-right: 0;
}

.aespl-home-hero__assurance svg {
  flex: 0 0 auto;

  width: 32px;
  height: 32px;

  padding: 6px;

  border-radius: 50%;

  background: #eff4e4;

  fill: none;

  stroke: #3f7250;

  stroke-width: 1.45;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.aespl-home-hero__assurance span {
  display: grid;

  gap: 2px;

  font-size: 0.67rem;

  color: #6a756b;

  line-height: 1.35;
}

.aespl-home-hero__assurance strong {
  color: #173f30;

  font-size: 1rem;

  letter-spacing: 0.01em;
}


/* =========================================================
   HOMEPAGE ASSURANCES — STANDALONE SECTION
   =========================================================
   Supports the newer standalone assurances markup:
   .aespl-home-assurances
   .aespl-home-assurances__grid
   .aespl-home-assurance

   IMPORTANT:
   This section is intentionally NOT positioned absolute.
   It can therefore be placed below the hero without being
   trapped inside the hero's fixed/ratio-based height.
   ========================================================= */

.aespl-home-assurances {
  position: relative;

  display: block;

  width: 100%;

  margin: 0;

  padding: 0;

  border-top: 1px solid rgba(
    13,
    61,
    47,
    0.10
  );

  background: #fffdf7;

  color: #143d2d;

  box-shadow:
    0 -10px 26px rgba(
      5,
      26,
      16,
      0.08
    );

  z-index: 5;
}

.aespl-home-assurances__grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  width: 100%;

  margin: 0;

  padding: 0;
}

.aespl-home-assurance {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  min-width: 0;

  min-height: 84px;

  padding: 12px 24px;

  border-right: 1px solid rgba(
    13,
    61,
    47,
    0.10
  );

  background: #fffdf7;

  box-sizing: border-box;
}

.aespl-home-assurance:last-child {
  border-right: 0;
}

.aespl-home-assurance svg {
  display: block;

  flex: 0 0 auto;

  width: 32px;
  height: 32px;

  padding: 6px;

  box-sizing: border-box;

  border-radius: 50%;

  background: #eff4e4;

  fill: none;

  stroke: #3f7250;

  stroke-width: 1.45;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.aespl-home-assurance span {
  display: grid;

  min-width: 0;

  gap: 2px;

  margin: 0;

  color: #6a756b;

  font-size: 0.67rem;

  line-height: 1.35;
}

.aespl-home-assurance strong {
  display: block;

  margin: 0;

  color: #173f30;

  font-size: 1rem;

  font-weight: 700;

  line-height: 1.25;

  letter-spacing: 0.01em;
}

/* Prevent global theme styles from changing assurance text */
.aespl-home-assurance a,
.aespl-home-assurance p {
  margin: 0;
}


/* =========================================================
   STANDALONE ASSURANCES — TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

  .aespl-home-assurance {
    min-height: 76px;

    padding-right: 12px;
    padding-left: 12px;

    gap: 8px;
  }

  .aespl-home-assurance svg {
    width: 30px;
    height: 30px;
  }

  .aespl-home-assurance strong {
    font-size: 0.82rem;
  }

  .aespl-home-assurance span {
    font-size: 0.58rem;
  }

}


/* =========================================================
   STANDALONE ASSURANCES — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .aespl-home-assurances {
    position: relative;

    width: 100%;

    height: auto;

    margin: 0;
  }

  .aespl-home-assurances__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .aespl-home-assurance {
    min-height: 68px;

    justify-content: flex-start;

    padding: 8px 7px;

    gap: 7px;

    border-right: 1px solid rgba(
      13,
      61,
      47,
      0.10
    );

    border-bottom: 1px solid rgba(
      13,
      61,
      47,
      0.10
    );
  }

  .aespl-home-assurance:nth-child(2n) {
    border-right: 0;
  }

  .aespl-home-assurance:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .aespl-home-assurance svg {
    width: 27px;
    height: 27px;

    padding: 5px;
  }

  .aespl-home-assurance strong {
    font-size: 0.68rem;
  }

  .aespl-home-assurance span {
    font-size: 0.50rem;

    line-height: 1.30;
  }

}


/* =========================================================
   STANDALONE ASSURANCES — SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

  .aespl-home-assurance {
    min-height: 64px;

    padding: 7px 5px;

    gap: 6px;
  }

  .aespl-home-assurance svg {
    width: 25px;
    height: 25px;
  }

  .aespl-home-assurance strong {
    font-size: 0.63rem;
  }

  .aespl-home-assurance span {
    font-size: 0.46rem;
  }

}


/* =========================================================
   STANDALONE ASSURANCES — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .aespl-home-assurance {
    min-height: 61px;
  }

  .aespl-home-assurance svg {
    width: 23px;
    height: 23px;
  }

  .aespl-home-assurance strong {
    font-size: 0.59rem;
  }

  .aespl-home-assurance span {
    font-size: 0.43rem;
  }

}


/* =========================================================
   HERO — LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

  .aespl-home-hero {
    aspect-ratio: 1920 / 650;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:first-child {
    left: 42px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:last-child {
    right: 42px;
  }

  .aespl-home-hero__dots {
    bottom: 28px;
  }

  .aespl-home-hero__arrow {
    width: 44px;
    height: 44px;
  }

}


/* =========================================================
   HERO — TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

  .aespl-home-hero {
    /*
     * Tablet image ratio.
     */
    aspect-ratio: 1400 / 750;

    width: 100%;
    height: auto;
    min-height: 0;
  }


  /*
   * Keep image exactly inside the responsive viewport.
   */

  .aespl-home-hero__image,
  .aespl-home-hero__image picture,
  .aespl-home-hero__image img {
    width: 100%;
    height: 100%;
  }


  /*
   * Slider image
   */

  .aespl-home-hero--slider
  .aespl-home-hero__slide
  .aespl-home-hero__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__slide
  .aespl-home-hero__image img {
    object-fit: fill;

    object-position: center center;

    transform: none !important;
  }


  /*
   * Slider navigation
   */

  .aespl-home-hero--slider
  .aespl-home-hero__navigation {
    inset: 0;

    width: 100%;
    height: 100%;

    transform: none;

    pointer-events: none;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow {
    width: 38px;
    height: 38px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:first-child {
    left: 18px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:last-child {
    right: 18px;
  }

  .aespl-home-hero__arrow svg {
    width: 15px;
    height: 15px;
  }

  .aespl-home-hero__dots {
    bottom: 24px;

    gap: 5px;
  }

  .aespl-home-hero__dot {
    width: 6px;
    height: 6px;
  }

  .aespl-home-hero__dot.is-active {
    width: 20px;
  }


  /*
   * Single banner content
   */

  .aespl-home-hero--single
  .aespl-home-hero__content {
    width: 100%;
    height: 100%;
    min-height: 0;

    padding-top: 48px;
    padding-bottom: 110px;
  }

  .aespl-home-hero__copy {
    width: min(
      560px,
      62%
    );
  }

  .aespl-home-hero h1 {
    font-size:
      clamp(
        2.8rem,
        5vw,
        4.25rem
      );
  }

  .aespl-home-hero__description {
    max-width: 460px;

    font-size: 0.94rem;
  }


  /*
   * Single banner seal
   */

  .aespl-home-hero--single
  .aespl-home-hero__seal {
    width: 100px;
    height: 100px;

    margin-right: 3%;
  }


  /*
   * Assurance bar
   */

  .aespl-home-hero__assurance {
    min-height: 76px;

    padding-right: 12px;
    padding-left: 12px;

    gap: 8px;
  }

  .aespl-home-hero__assurance svg {
    width: 30px;
    height: 30px;
  }

  .aespl-home-hero__assurance strong {
    font-size: 0.82rem;
  }

  .aespl-home-hero__assurance span {
    font-size: 0.58rem;
  }

}


/* =========================================================
   HERO — MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .aespl-home-hero {
    /*
     * Mobile image ratio.
     */
    aspect-ratio: 900 / 1100;

    width: 100%;
    height: auto;
    min-height: 0;
  }


  /*
   * Responsive image viewport
   */

  .aespl-home-hero__image,
  .aespl-home-hero__image picture,
  .aespl-home-hero__image img {
    width: 100%;
    height: 100%;
  }


  /*
   * Slider
   */

  .aespl-home-hero--slider {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .aespl-home-hero__slides {
    width: 100%;
    height: 100%;
  }


  /*
   * Slider image
   */

  .aespl-home-hero--slider
  .aespl-home-hero__slide
  .aespl-home-hero__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #031b11;

    transform: none !important;

    transition: none !important;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__slide
  .aespl-home-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    object-position: center center;

    transform: none !important;

    transition: none !important;
  }


  /*
   * Never zoom active image.
   */

  .aespl-home-hero--slider
  .aespl-home-hero__slide.is-active
  .aespl-home-hero__image img {
    transform: none !important;
  }


  /*
   * Single banner
   */

  .aespl-home-hero--single
  .aespl-home-hero__content {
    width: 100%;
    height: 100%;
    min-height: 0;

    align-items: flex-start;

    padding-top: 55px;
    padding-bottom: 180px;
  }

  .aespl-home-hero__copy {
    width: 100%;
    max-width: 100%;
  }

  .aespl-home-hero h1 {
    max-width: 90%;

    font-size:
      clamp(
        2.35rem,
        10.5vw,
        3.25rem
      );

    line-height: 0.96;
  }

  .aespl-home-hero__description {
    max-width: 90%;

    margin-top: 18px;
    margin-bottom: 24px;

    font-size: 0.88rem;

    line-height: 1.65;
  }


  /*
   * Single banner mobile overlay
   */

  .aespl-home-hero--single
  .aespl-home-hero__overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5, 23, 15, 0.9),
        rgba(7, 30, 19, 0.5)
      );
  }


  /*
   * Single banner seal
   */

  .aespl-home-hero--single
  .aespl-home-hero__seal {
    display: none;
  }


  /*
   * Slider navigation
   * Arrows stay at the vertical center.
   * Dots stay at the exact horizontal center.
   */

  .aespl-home-hero--slider
  .aespl-home-hero__navigation {
    inset: 0;

    width: 100%;
    height: 100%;

    transform: none;

    pointer-events: none;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow {
    width: 34px;
    height: 34px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:first-child {
    left: 10px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:last-child {
    right: 10px;
  }

  .aespl-home-hero__arrow svg {
    width: 14px;
    height: 14px;
  }

  .aespl-home-hero__dots {
    bottom: 22px;

    gap: 5px;
  }

  .aespl-home-hero__dot {
    width: 6px;
    height: 6px;
  }

  .aespl-home-hero__dot.is-active {
    width: 18px;
  }


  /*
   * Assurance grid
   */

  .aespl-home-hero__assurances {
    right: 0;
    bottom: 0;
    left: 0;

    height: auto;
  }

  .aespl-home-hero__assurance-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .aespl-home-hero__assurance {
    min-height: 68px;

    justify-content: flex-start;

    padding: 8px 7px;

    gap: 7px;

    border-bottom:
      1px solid rgba(
        13,
        61,
        47,
        0.1
      );
  }

  .aespl-home-hero__assurance:nth-child(2n) {
    border-right: 0;
  }

  .aespl-home-hero__assurance:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .aespl-home-hero__assurance svg {
    width: 27px;
    height: 27px;

    padding: 5px;
  }

  .aespl-home-hero__assurance strong {
    font-size: 0.68rem;
  }

  .aespl-home-hero__assurance span {
    font-size: 0.5rem;

    line-height: 1.3;
  }

}


/* =========================================================
   HERO — SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

  .aespl-home-hero {
    aspect-ratio: 900 / 1100;
  }


  .aespl-home-hero--single
  .aespl-home-hero__content {
    padding-top: 48px;
    padding-bottom: 175px;
  }

  .aespl-home-hero h1 {
    font-size:
      clamp(
        2.2rem,
        11vw,
        3.1rem
      );
  }

  .aespl-home-hero__description {
    margin-top: 18px;
    margin-bottom: 24px;

    font-size: 0.86rem;
  }

  .aespl-home-hero__button {
    min-height: 49px;

    padding-right: 18px;
    padding-left: 20px;

    font-size: 0.68rem;
  }


  /*
   * Slider navigation
   * Keep arrows vertically centered.
   */

  .aespl-home-hero--slider
  .aespl-home-hero__navigation {
    inset: 0;

    width: 100%;
    height: 100%;

    transform: none;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow {
    width: 32px;
    height: 32px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:first-child {
    left: 8px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:last-child {
    right: 8px;
  }

  .aespl-home-hero__dot.is-active {
    width: 17px;
  }


  /*
   * Assurance
   */

  .aespl-home-hero__assurance {
    min-height: 64px;

    padding: 7px 5px;

    gap: 6px;
  }

  .aespl-home-hero__assurance svg {
    width: 25px;
    height: 25px;
  }

  .aespl-home-hero__assurance strong {
    font-size: 0.63rem;
  }

  .aespl-home-hero__assurance span {
    font-size: 0.46rem;
  }

}


/* =========================================================
   HERO — VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  .aespl-home-hero {
    aspect-ratio: 900 / 1100;
  }

  .aespl-home-hero--single
  .aespl-home-hero__content {
    padding-top: 44px;
    padding-bottom: 168px;
  }

  .aespl-home-hero__eyebrow {
    gap: 7px;

    font-size: 0.61rem;
  }

  .aespl-home-hero__eyebrow::before {
    width: 22px;

    flex-basis: 22px;
  }

  .aespl-home-hero h1 {
    font-size: 2.25rem;
  }

  .aespl-home-hero__description {
    font-size: 0.82rem;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__navigation {
    top: 50%;

    left: 0;
    right: 0;

    bottom: auto;

    width: 100%;
    height: 0;

    transform: translateY(-50%);
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:first-child {
    left: 8px;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__arrow:last-child {
    right: 8px;
  }

  .aespl-home-hero__dots {
    bottom: -210px;;
    gap: 5px;
  }

  .aespl-home-hero__assurance {
    min-height: 61px;
  }

  .aespl-home-hero__assurance svg {
    width: 23px;
    height: 23px;
  }

  .aespl-home-hero__assurance strong {
    font-size: 0.59rem;
  }

  .aespl-home-hero__assurance span {
    font-size: 0.43rem;
  }

}


/* =========================================================
   HERO — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .aespl-home-hero__button,
  .aespl-home-hero__arrow,
  .aespl-home-hero__dot {
    transition: none;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__slide {
    transition: none;
  }

  .aespl-home-hero--slider
  .aespl-home-hero__image,
  .aespl-home-hero--slider
  .aespl-home-hero__image img {
    transition: none !important;

    transform: none !important;
  }

}


/* =========================================================
   SHOP BY CATEGORY
   ========================================================= */

.aespl-home-section {
  padding: 62px 0;
}

.aespl-category-section {
  background:
    linear-gradient(
      180deg,
      #f4efe1 0%,
      #f8f3e7 100%
    );
}

.aespl-section-heading {
  max-width: 760px;

  margin: 0 auto 34px;

  text-align: center;
}

.aespl-section-heading__eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

  color: #78915b;

  font-size: 0.64rem;

  font-weight: 800;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.aespl-section-heading__eyebrow::before,
.aespl-section-heading__eyebrow::after {
  content: '';

  width: 18px;
  height: 1px;

  background: currentColor;

  opacity: 0.75;
}

.aespl-section-heading h2 {
  margin: 0;

  color: #133d2c;

  font-family:
    "Fraunces",
    Georgia,
    serif;

  font-size:
    clamp(
      3.2rem,
      5vw,
      6.2rem
    );

  font-weight: 700;

  line-height: 0.9;
}

.aespl-section-heading p {
  max-width: 640px;

  margin: 12px auto 0;

  color: #6c756c;

  font-size: 1.02rem;

  line-height: 1.7;
}

.aespl-category-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 24px;

  align-items: stretch;

  max-width: 1180px;

  width: min(
    100%,
    1180px
  );

  margin: 0 auto;

  padding: 16px 8px 10px;
}

.aespl-category-card {
  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  min-height: 328px;

  padding: 18px 18px 14px;

  overflow: hidden;

  border: 1px solid rgba(
    18,
    52,
    38,
    0.12
  );

  border-radius: 20px;

  background: rgba(
    255,
    255,
    255,
    0.24
  );

  box-shadow:
    0 10px 26px rgba(
      17,
      38,
      28,
      0.06
    );

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;

  text-decoration: none;
}

.aespl-category-card:hover {
  border-color:
    rgba(
      111,
      154,
      97,
      0.55
    );

  box-shadow:
    0 18px 34px rgba(
      17,
      38,
      28,
      0.11
    );

  transform: translateY(-3px);
}

.aespl-category-card__image {
  display: grid;

  place-items: center;

  width: 180px;
  height: 180px;

  overflow: hidden;

  border-radius: 50%;

  border: 1px solid rgba(
    24,
    63,
    45,
    0.1
  );

  background:
    linear-gradient(
      135deg,
      #f7f3ea 0%,
      #edf4e5 100%
    );

  box-shadow:
    inset 0 0 0 8px rgba(
      255,
      255,
      255,
      0.18
    );
}

.aespl-category-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 250ms ease;
}

.aespl-category-card:hover
.aespl-category-card__image img {
  transform: scale(1.03);
}

.aespl-category-card__image svg {
  width: 46px;
  height: 46px;

  fill: none;

  stroke: #598353;

  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.aespl-category-card__content {
  display: grid;

  justify-items: center;

  gap: 6px;

  padding-top: 18px;

  text-align: center;
}

.aespl-category-card strong {
  color: #173e2e;

  font-size: 0.76rem;

  font-weight: 800;

  line-height: 1.25;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.aespl-category-card small {
  color: #7c847a;

  font-size: 0.62rem;

  line-height: 1.35;
}

.aespl-category-card__link {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  margin-top: 8px;

  color: #214f38;

  font-size: 0.63rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.aespl-category-card__link i {
  font-size: 0.9rem;

  font-style: normal;

  transition:
    transform 180ms ease;
}

.aespl-category-card:hover
.aespl-category-card__link i {
  transform: translateX(3px);
}


@media (max-width: 1024px) {

  .aespl-category-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    max-width: 680px;
  }

}


@media (max-width: 760px) {

  .aespl-category-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 14px;

    padding-inline: 2px;
  }

  .aespl-category-card {
    min-height: 250px;

    padding: 14px 12px 12px;

    border-radius: 18px;
  }

  .aespl-category-card__image {
    width: 128px;
    height: 128px;
  }

  .aespl-category-card__content {
    padding-top: 12px;
  }

  .aespl-section-heading p {
    font-size: 0.88rem;
  }

}


@media (max-width: 500px) {

  .aespl-category-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   BRAND STORY
   ========================================================= */

.aespl-brand-story-section {
  background:
    linear-gradient(
      180deg,
      #f5f0e5 0%,
      #f7f2ea 100%
    );
}

.aespl-brand-story {
  display: grid;

  grid-template-columns:
    1.02fr 1.2fr;

  align-items: center;

  gap: 60px;

  max-width: 1180px;

  margin: 0 auto;
}

.aespl-brand-story__media {
  display: flex;

  justify-content: center;
}

.aespl-brand-story__image-wrap {
  position: relative;

  width: min(
    100%,
    540px
  );

  padding: 18px 18px 0 18px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(
        255,
        255,
        255,
        0.45
      ),
      rgba(
        222,
        239,
        208,
        0.5
      )
    );

  box-shadow:
    0 18px 42px rgba(
      18,
      52,
      38,
      0.1
    );
}

.aespl-brand-story__image-wrap::before {
  content: "";

  position: absolute;

  inset: 18px 18px auto auto;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background:
    rgba(
      175,
      201,
      145,
      0.18
    );

  filter: blur(8px);
}

.aespl-brand-story__image-wrap img {
  position: relative;

  display: block;

  width: 100%;
  height: 100%;

  min-height: 440px;

  object-fit: cover;

  border-radius: 24px;

  box-shadow:
    0 22px 38px rgba(
      19,
      61,
      44,
      0.12
    );
}

.aespl-brand-story__content {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.aespl-section-heading--left {
  margin: 0;

  text-align: left;
}

.aespl-brand-story__content
.aespl-section-heading h2 {
  max-width: 500px;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4.3rem
    );
}

.aespl-brand-story__summary {
  margin: 20px 0 28px;

  max-width: 650px;

  color: #54605b;

  font-size: 1.02rem;

  line-height: 1.8;
}

.aespl-brand-story__button {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 20px 12px 24px;

  border: 1px solid rgba(
    18,
    52,
    38,
    0.2
  );

  border-radius: 999px;

  background: #f3f1ea;

  color: #123d2d;

  font-size: 0.73rem;

  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  text-decoration: none;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.aespl-brand-story__button:hover {
  background: #fffdf9;

  box-shadow:
    0 12px 24px rgba(
      18,
      52,
      38,
      0.08
    );

  transform: translateY(-2px);
}

.aespl-brand-story__button span {
  font-size: 1.2rem;

  line-height: 1;
}


/* =========================================================
   FEATURED PRODUCTS
   ========================================================= */

.aespl-featured-section {
  background:
    linear-gradient(
      180deg,
      #edf4e7 0%,
      #f8faf4 100%
    );
}

.aespl-featured-section__header {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  margin-bottom: 32px;
}

.aespl-section-heading--left {
  margin: 0;

  text-align: center;
}

.aespl-text-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #214f38;

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  white-space: nowrap;
}

.aespl-text-link span {
  font-size: 1rem;

  transition:
    transform 180ms ease;
}

.aespl-text-link:hover {
  color: #6a8e4f;
}

.aespl-text-link:hover span {
  transform: translateX(3px);
}


@media (max-width: 980px) {

  .aespl-brand-story {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .aespl-brand-story__content {
    align-items: center;

    text-align: center;
  }

  .aespl-brand-story__content
  .aespl-section-heading h2,
  .aespl-brand-story__summary {
    text-align: center;
  }

}


@media (max-width: 760px) {

  .aespl-home-section {
    padding: 48px 0;
  }

  .aespl-section-heading {
    margin-bottom: 24px;
  }

  .aespl-section-heading p {
    font-size: 0.8rem;
  }

  .aespl-category-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }

  .aespl-category-card {
    border-radius: 14px;
  }

  .aespl-category-card__content {
    padding-top: 14px;
  }

  .aespl-brand-story__image-wrap {
    width: min(
      100%,
      420px
    );

    padding: 12px 12px 0 12px;

    border-radius: 20px;
  }

  .aespl-brand-story__image-wrap img {
    min-height: 300px;

    border-radius: 16px;
  }

  .aespl-brand-story__summary {
    font-size: 0.9rem;

    line-height: 1.7;
  }

  .aespl-brand-story__button {
    font-size: 0.62rem;

    letter-spacing: 0.11em;
  }

  .aespl-featured-section__header {
    margin-bottom: 23px;
  }

  .aespl-text-link {
    font-size: 0.62rem;
  }

}


/* =========================================================
   WHY CHOOSE AESPL
   ========================================================= */

.aespl-why-choose-section {
  background:
    linear-gradient(
      180deg,
      #f8f3e8 0%,
      #f1f5e9 100%
    );
}

.aespl-why-choose-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 20px;

  max-width: 1180px;

  margin: 0 auto;
}

.aespl-why-choose-card {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  min-height: 285px;

  padding: 34px 26px 30px;

  border: 1px solid rgba(
    18,
    52,
    38,
    0.1
  );

  border-radius: 20px;

  background: rgba(
    255,
    255,
    255,
    0.42
  );

  box-shadow:
    0 10px 28px rgba(
      17,
      38,
      28,
      0.05
    );

  text-align: center;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.aespl-why-choose-card:hover {
  border-color:
    rgba(
      111,
      154,
      97,
      0.45
    );

  box-shadow:
    0 18px 36px rgba(
      17,
      38,
      28,
      0.1
    );

  transform: translateY(-4px);
}

.aespl-why-choose-card__icon {
  display: grid;

  place-items: center;

  width: 66px;
  height: 66px;

  margin-bottom: 22px;

  border: 1px solid rgba(
    63,
    114,
    80,
    0.16
  );

  border-radius: 50%;

  background: #edf3e4;

  color: #4e7950;
}

.aespl-why-choose-card__icon svg {
  width: 31px;
  height: 31px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.35;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.aespl-why-choose-card__content {
  display: grid;

  gap: 9px;
}

.aespl-why-choose-card h3 {
  margin: 0;

  color: #173e2e;

  font-size: 0.82rem;

  font-weight: 800;

  line-height: 1.3;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.aespl-why-choose-card p {
  max-width: 230px;

  margin: 0 auto;

  color: #727b72;

  font-size: 0.78rem;

  line-height: 1.65;
}


/* =========================================================
   WHY CHOOSE — TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .aespl-why-choose-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    max-width: 720px;

    gap: 18px;
  }

  .aespl-why-choose-card {
    min-height: 260px;
  }

}


/* =========================================================
   WHY CHOOSE — MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .aespl-why-choose-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }

  .aespl-why-choose-card {
    min-height: 235px;

    padding: 25px 15px 22px;

    border-radius: 15px;
  }

  .aespl-why-choose-card__icon {
    width: 54px;
    height: 54px;

    margin-bottom: 17px;
  }

  .aespl-why-choose-card__icon svg {
    width: 26px;
    height: 26px;
  }

  .aespl-why-choose-card h3 {
    font-size: 0.67rem;

    letter-spacing: 0.07em;
  }

  .aespl-why-choose-card p {
    font-size: 0.7rem;

    line-height: 1.55;
  }

}


@media (max-width: 500px) {

  .aespl-why-choose-grid {
    grid-template-columns: 1fr;

    max-width: 360px;
  }

  .aespl-why-choose-card {
    min-height: auto;

    padding: 25px 22px;
  }

  .aespl-why-choose-card p {
    max-width: 290px;
  }

}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.aespl-newsletter-section {
  padding-top: 70px;
  padding-bottom: 70px;

  background: #f7f3e9;
}

.aespl-newsletter {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  align-items: stretch;

  max-width: 1180px;

  min-height: 390px;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 28px;

  background: #103c2b;

  box-shadow:
    0 22px 50px rgba(
      18,
      52,
      38,
      0.14
    );
}


/* ---------------------------------------------------------
   Newsletter Left Brand
   --------------------------------------------------------- */

.aespl-newsletter__brand {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 48px 46px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(
        190,
        213,
        153,
        0.14
      ),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #123f2d 0%,
      #0c3224 100%
    );
}

.aespl-newsletter__brand::after {
  content: "";

  position: absolute;

  right: -100px;
  bottom: -120px;

  width: 290px;
  height: 290px;

  border: 1px solid rgba(
    203,
    222,
    165,
    0.16
  );

  border-radius: 50%;

  box-shadow:
    0 0 0 35px rgba(
      203,
      222,
      165,
      0.035
    ),
    0 0 0 70px rgba(
      203,
      222,
      165,
      0.025
    );
}

.aespl-newsletter__leaf {
  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 58px;
  height: 58px;

  border: 1px solid rgba(
    213,
    231,
    176,
    0.32
  );

  border-radius: 50%;

  background: rgba(
    213,
    231,
    176,
    0.06
  );
}

.aespl-newsletter__leaf svg {
  width: 29px;
  height: 29px;

  fill: none;

  stroke: #d0dfaa;

  stroke-width: 1.25;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.aespl-newsletter__brand-title {
  position: relative;

  z-index: 1;

  display: grid;

  margin-top: auto;

  margin-bottom: 30px;
}

.aespl-newsletter__brand-title span {
  color: #fffdf5;

  font-family:
    "Fraunces",
    Georgia,
    serif;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4.35rem
    );

  font-weight: 600;

  line-height: 0.88;

  letter-spacing: -0.045em;
}

.aespl-newsletter__brand-title span:last-child {
  color: #c9d99a;
}

.aespl-newsletter__brand-name {
  position: relative;

  z-index: 1;

  width: fit-content;

  padding-top: 14px;

  border-top:
    1px solid rgba(
      221,
      234,
      193,
      0.25
    );

  color: #dce8c5;

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.24em;

  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Newsletter Right Content
   --------------------------------------------------------- */

.aespl-newsletter__content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 52px 58px;

  background: #f5f2e9;
}

.aespl-newsletter__eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 13px;

  color: #78915b;

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.aespl-newsletter__eyebrow::before {
  content: "";

  width: 24px;
  height: 1px;

  background: currentColor;
}

.aespl-newsletter__content h2 {
  max-width: 520px;

  margin: 0;

  color: #143d2d;

  font-family:
    "Fraunces",
    Georgia,
    serif;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4.3rem
    );

  font-weight: 600;

  line-height: 0.94;

  letter-spacing: -0.04em;
}

.aespl-newsletter__description {
  max-width: 500px;

  margin: 19px 0 28px;

  color: #667168;

  font-size: 0.94rem;

  line-height: 1.7;
}


/* ---------------------------------------------------------
   Newsletter Form
   --------------------------------------------------------- */

.aespl-newsletter__form {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  width: 100%;

  max-width: 570px;

  min-height: 56px;

  border: 1px solid rgba(
    18,
    52,
    38,
    0.18
  );

  border-radius: 999px;

  background: #fffdf8;

  overflow: hidden;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.aespl-newsletter__form:focus-within {
  border-color:
    rgba(
      74,
      117,
      75,
      0.55
    );

  box-shadow:
    0 0 0 4px rgba(
      108,
      143,
      80,
      0.08
    );
}

.aespl-newsletter__form input {
  width: 100%;

  min-width: 0;

  padding: 0 22px;

  border: 0;

  outline: 0;

  background: transparent;

  color: #173e2e;

  font: inherit;

  font-size: 0.82rem;
}

.aespl-newsletter__form input::placeholder {
  color: #969d95;
}

.aespl-newsletter__form button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-width: 135px;

  padding: 0 22px;

  border: 0;

  background: #c9d99a;

  color: #173e2e;

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease;
}

.aespl-newsletter__form button:hover {
  background: #b7cb82;
}

.aespl-newsletter__form button svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.aespl-newsletter__disclaimer {
  max-width: 520px;

  margin: 13px 0 0;

  color: #8a9189;

  font-size: 0.63rem;

  line-height: 1.5;
}


/* ---------------------------------------------------------
   Newsletter Tablet
   --------------------------------------------------------- */

@media (max-width: 1024px) {

  .aespl-newsletter {
    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(0, 1.15fr);

    min-height: 360px;
  }

  .aespl-newsletter__brand {
    padding: 40px 34px;
  }

  .aespl-newsletter__content {
    padding: 42px 38px;
  }

  .aespl-newsletter__brand-title span {
    font-size:
      clamp(
        2.3rem,
        4.5vw,
        3.5rem
      );
  }

  .aespl-newsletter__content h2 {
    font-size:
      clamp(
        2.3rem,
        4.5vw,
        3.7rem
      );
  }

}


/* ---------------------------------------------------------
   Newsletter Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .aespl-newsletter-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .aespl-newsletter {
    grid-template-columns: 1fr;

    min-height: 0;

    border-radius: 22px;
  }

  .aespl-newsletter__brand {
    min-height: 300px;

    padding: 30px 26px;
  }

  .aespl-newsletter__brand-title {
    margin-top: 60px;

    margin-bottom: 24px;
  }

  .aespl-newsletter__brand-title span {
    font-size:
      clamp(
        2.65rem,
        12vw,
        4rem
      );
  }

  .aespl-newsletter__content {
    padding: 38px 26px 40px;
  }

  .aespl-newsletter__content h2 {
    font-size:
      clamp(
        2.4rem,
        10vw,
        3.5rem
      );
  }

  .aespl-newsletter__description {
    font-size: 0.86rem;

    margin-top: 16px;

    margin-bottom: 24px;
  }

  .aespl-newsletter__form {
    grid-template-columns: 1fr;

    gap: 8px;

    padding: 7px;

    border-radius: 16px;

    background: #fffdf8;
  }

  .aespl-newsletter__form input {
    min-height: 50px;

    padding: 0 15px;
  }

  .aespl-newsletter__form button {
    min-height: 48px;

    width: 100%;

    border-radius: 11px;
  }

  .aespl-newsletter__disclaimer {
    font-size: 0.6rem;
  }

}


/* ---------------------------------------------------------
   Newsletter Small Mobile
   --------------------------------------------------------- */

@media (max-width: 500px) {

  .aespl-newsletter__brand {
    min-height: 270px;

    padding: 26px 20px;
  }

  .aespl-newsletter__leaf {
    width: 50px;
    height: 50px;
  }

  .aespl-newsletter__leaf svg {
    width: 25px;
    height: 25px;
  }

  .aespl-newsletter__brand-title {
    margin-top: 50px;
  }

  .aespl-newsletter__brand-title span {
    font-size:
      clamp(
        2.35rem,
        13vw,
        3.2rem
      );
  }

  .aespl-newsletter__content {
    padding: 32px 20px 34px;
  }

  .aespl-newsletter__content h2 {
    font-size:
      clamp(
        2.25rem,
        11vw,
        3.15rem
      );
  }

  .aespl-newsletter__eyebrow {
    font-size: 0.59rem;
  }

}


/* ---------------------------------------------------------
   Newsletter Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .aespl-newsletter__form,
  .aespl-newsletter__form button {
    transition: none;
  }

}


/* =========================================================
   FEATURED PRODUCTS GRID
   ========================================================= */

.aespl-featured-section
.aespl-product-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 24px;

  width: 100%;

  align-items: stretch;
}


/* =========================================================
   FEATURED PRODUCTS — TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .aespl-featured-section
  .aespl-product-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 20px;
  }

}


/* =========================================================
   FEATURED PRODUCTS — SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

  .aespl-featured-section
  .aespl-product-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 18px;
  }

}


/* =========================================================
   FEATURED PRODUCTS — MOBILE
   ========================================================= */

@media (max-width: 560px) {

  .aespl-featured-section
  .aespl-product-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

}