/* Four-pillar pages use explicit component styles because the original site CSS
   was compiled before these components existed. */

.home-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.home-pillars-grid > a {
  display: flex;
  min-height: 20rem;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid rgba(27, 67, 50, 0.12);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 16px 38px rgba(8, 32, 23, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-pillars-grid > a:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(8, 32, 23, 0.22);
}

.home-pillars-grid > a > div:first-child,
article:has([data-i18n^="ecology_"]) > div:first-child {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.5rem;
  place-items: center;
  border-radius: 1rem;
  background: rgba(82, 183, 136, 0.13);
  font-size: 0;
  line-height: 1;
}

.home-pillars-grid > a > div:first-child::before,
article:has([data-i18n^="ecology_"]) > div:first-child::before {
  width: 1.75rem;
  height: 1.75rem;
  background: #1b4332;
  content: "";
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.home-pillars-grid > a[href$="/ecology/"] > div:first-child::before,
article:has([data-i18n="ecology_restore_title"]) > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 3.2C14 3.5 8.5 5.8 5.2 10c-2.4 3.1-2.2 6.5-.7 8.4 1.8-4.2 5.3-7.5 10.2-9.7-4.1 3-7 6.5-8.6 10.6 2.5 1.4 6 .8 8.4-1.6 3.7-3.7 5.5-8.8 6.3-14.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.8 3.2C14 3.5 8.5 5.8 5.2 10c-2.4 3.1-2.2 6.5-.7 8.4 1.8-4.2 5.3-7.5 10.2-9.7-4.1 3-7 6.5-8.6 10.6 2.5 1.4 6 .8 8.4-1.6 3.7-3.7 5.5-8.8 6.3-14.5Z'/%3E%3C/svg%3E");
}

.home-pillars-grid > a[href$="/education/"] > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5c3.3-.7 6.2-.1 9 1.8v14c-2.8-1.9-5.7-2.5-9-1.8v-14Zm18 0c-3.3-.7-6.2-.1-9 1.8v14c2.8-1.9 5.7-2.5 9-1.8v-14Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5c3.3-.7 6.2-.1 9 1.8v14c-2.8-1.9-5.7-2.5-9-1.8v-14Zm18 0c-3.3-.7-6.2-.1-9 1.8v14c2.8-1.9 5.7-2.5 9-1.8v-14Z'/%3E%3C/svg%3E");
}

.home-pillars-grid > a[href$="/retreat/"] > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 10 8h-3v11h-6v-6h-2v6H5V10H2L12 2Zm-5 9v8h2v-6h6v6h2v-8l-5-4-5 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 10 8h-3v11h-6v-6h-2v6H5V10H2L12 2Zm-5 9v8h2v-6h6v6h2v-8l-5-4-5 4Z'/%3E%3C/svg%3E");
}

.home-pillars-grid > a[href$="/animals/"] > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.3 10.2c1.3-.5 1.7-2.4.9-4.2S6.8 3.1 5.5 3.7 3.8 6 4.6 7.8s2.4 2.9 3.7 2.4Zm7.4 0c1.3.5 2.9-.6 3.7-2.4s.4-3.6-.9-4.1S15.6 4.2 14.8 6s-.4 3.7.9 4.2ZM12 9.5c-3.8 0-7 3.8-7 7.1 0 2.7 2.3 4.1 4.6 3.1 1.6-.7 3.2-.7 4.8 0 2.3 1 4.6-.4 4.6-3.1 0-3.3-3.2-7.1-7-7.1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.3 10.2c1.3-.5 1.7-2.4.9-4.2S6.8 3.1 5.5 3.7 3.8 6 4.6 7.8s2.4 2.9 3.7 2.4Zm7.4 0c1.3.5 2.9-.6 3.7-2.4s.4-3.6-.9-4.1S15.6 4.2 14.8 6s-.4 3.7.9 4.2ZM12 9.5c-3.8 0-7 3.8-7 7.1 0 2.7 2.3 4.1 4.6 3.1 1.6-.7 3.2-.7 4.8 0 2.3 1 4.6-.4 4.6-3.1 0-3.3-3.2-7.1-7-7.1Z'/%3E%3C/svg%3E");
}

article:has([data-i18n="ecology_water_title"]) > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2S5 10.1 5 15a7 7 0 0 0 14 0c0-4.9-7-13-7-13Zm0 17a4 4 0 0 1-4-4c0-2.3 2.4-6.1 4-8.3 1.6 2.2 4 6 4 8.3a4 4 0 0 1-4 4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2S5 10.1 5 15a7 7 0 0 0 14 0c0-4.9-7-13-7-13Zm0 17a4 4 0 0 1-4-4c0-2.3 2.4-6.1 4-8.3 1.6 2.2 4 6 4 8.3a4 4 0 0 1-4 4Z'/%3E%3C/svg%3E");
}

article:has([data-i18n="ecology_solar_title"]) > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 1h2v3h-2V1Zm0 19h2v3h-2v-3ZM1 11h3v2H1v-2Zm19 0h3v2h-3v-2ZM4.2 2.8l2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4Zm13.5 13.5 2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4Zm.7-13.5 1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1ZM4.9 17.7l1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1ZM12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 1h2v3h-2V1Zm0 19h2v3h-2v-3ZM1 11h3v2H1v-2Zm19 0h3v2h-3v-2ZM4.2 2.8l2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4Zm13.5 13.5 2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4Zm.7-13.5 1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1ZM4.9 17.7l1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1ZM12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/%3E%3C/svg%3E");
}

article:has([data-i18n="ecology_recycle_title"]) > div:first-child::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 3.5 6h-2.8l2.4 4.2 2.8-4.8H16L12 1 8.4 7h2.3L12 5l1.2 2H12V3ZM5.8 9 2 15.5h7v-2H5.5l1.4-2.4L8.3 13l1.6-1.2L6.7 7.5 5.8 9Zm12.4 5H16v2h3.4L18 18.5H9v-2.3L4 19l5 2.8v-1.3h10.2l3.8-6.5h-4.8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 3.5 6h-2.8l2.4 4.2 2.8-4.8H16L12 1 8.4 7h2.3L12 5l1.2 2H12V3ZM5.8 9 2 15.5h7v-2H5.5l1.4-2.4L8.3 13l1.6-1.2L6.7 7.5 5.8 9Zm12.4 5H16v2h3.4L18 18.5H9v-2.3L4 19l5 2.8v-1.3h10.2l3.8-6.5h-4.8Z'/%3E%3C/svg%3E");
}

.home-pillars-grid > a h3 {
  margin-bottom: 0.75rem;
  font-size: 1.65rem;
}

.home-pillars-grid > a p {
  margin-bottom: 1.5rem;
  font-size: 0.96rem;
}

.home-pillars-grid > a > span:last-child {
  margin-top: auto;
}

body:has([data-i18n="ecology_title"]) main section:nth-of-type(2) .content-width > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

article:has([data-i18n^="ecology_"]) {
  position: relative;
  min-height: 13.5rem;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid rgba(27, 67, 50, 0.1);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(27, 67, 50, 0.1);
}

article:has([data-i18n^="ecology_"])::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 0 0 0 100%;
  background: rgba(82, 183, 136, 0.08);
  content: "";
}

article:has([data-i18n^="ecology_"]) h2 {
  margin-bottom: 0.65rem;
  font-size: 1.45rem;
}

article:has([data-i18n^="ecology_"]) p {
  font-size: 0.98rem;
  line-height: 1.65;
}

article:has([data-i18n="ecology_solar_title"]) > div:first-child {
  background: rgba(227, 167, 47, 0.15);
}

article:has([data-i18n="ecology_recycle_title"]) > div:first-child {
  background: rgba(47, 119, 96, 0.13);
  color: #1b4332;
  font-family: Arial, "Segoe UI Symbol", sans-serif;
  font-size: 1.8rem;
}

article:has([data-i18n="ecology_recycle_title"]) > div:first-child::before {
  display: none;
}

article:has([data-i18n="ecology_restore_title"]) > div:first-child {
  background: rgba(231, 111, 81, 0.12);
}

article:has([data-i18n^="retreat_"]),
article:has([data-i18n^="wildlife_"]) {
  min-height: 12rem;
  padding: 2rem;
  border: 1px solid rgba(27, 67, 50, 0.1);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 10px 26px rgba(27, 67, 50, 0.08);
}

article:has([data-i18n^="retreat_"]) h3,
article:has([data-i18n^="wildlife_"]) h3 {
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
}

.animal-residents-panel,
.retreat-stay-panel {
  position: relative;
  align-self: stretch;
  padding: 2.25rem;
  overflow: hidden;
  border: 1px solid rgba(27, 67, 50, 0.12);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #f8f5df 0%, #eef4e8 100%);
  box-shadow: 0 18px 42px rgba(27, 67, 50, 0.11);
}

.animal-residents-panel::after,
.retreat-stay-panel::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(82, 183, 136, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(82, 183, 136, 0.055), 0 0 0 4rem rgba(82, 183, 136, 0.035);
  content: "";
}

.animal-residents-panel__tag,
.retreat-stay-panel__tag {
  position: relative;
  z-index: 1;
  margin-bottom: 0.55rem;
  color: #e76f51;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.animal-residents-panel h3,
.retreat-stay-panel h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
  color: #1b4332;
  font-size: 1.7rem;
}

.animal-residents-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.animal-residents-grid li,
.retreat-stay-panel li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(27, 67, 50, 0.09);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  color: #1b4332;
  font-size: 0.9rem;
  font-weight: 600;
}

.animal-resident-marker,
.retreat-stay-marker {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border: 2px solid #52b788;
  border-radius: 50%;
}

.animal-residents-panel__note {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(27, 67, 50, 0.12);
  color: rgba(45, 52, 54, 0.7);
  font-size: 0.85rem;
  line-height: 1.6;
}

.retreat-stay-panel {
  display: flex;
  min-height: 23rem;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, #173f30 0%, #245b46 100%);
}

.retreat-stay-panel::after {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 2rem rgba(255, 255, 255, 0.035), 0 0 0 4rem rgba(255, 255, 255, 0.02);
}

.retreat-stay-panel h3 {
  color: #fff;
}

.retreat-stay-panel ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.8rem;
}

.retreat-stay-panel li {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
}

/* Shared CTA treatment. The original utility bundle does not contain every
   spacing class used by newer pages, so buttons get explicit dimensions. */
a.bg-forest.text-white,
a.bg-terracotta.text-white,
a.border.border-forest\/20.font-semibold,
button.bg-forest.text-white,
button.bg-terracotta.text-white {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem !important;
  border-radius: 0.75rem;
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

a.bg-forest.text-white:hover,
a.bg-terracotta.text-white:hover,
a.border.border-forest\/20.font-semibold:hover,
button.bg-forest.text-white:hover,
button.bg-terracotta.text-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(27, 67, 50, 0.16);
}

a.bg-forest.text-white:focus-visible,
a.bg-terracotta.text-white:focus-visible,
a.border.border-forest\/20.font-semibold:focus-visible,
button.bg-forest.text-white:focus-visible,
button.bg-terracotta.text-white:focus-visible {
  outline: 3px solid rgba(82, 183, 136, 0.42);
  outline-offset: 3px;
}

a.block.w-full.bg-forest.text-white,
button.w-full.bg-forest.text-white,
button.w-full.bg-terracotta.text-white {
  display: flex;
  width: 100%;
}

@media (max-width: 63.99rem) {
  .home-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-pillars-grid > a {
    min-height: 17rem;
  }
}

@media (max-width: 39.99rem) {
  .home-hero {
    min-height: auto;
    align-items: flex-start;
  }

  .home-hero > .content-width {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .home-hero-title {
    font-size: clamp(2.55rem, 11.3vw, 2.9rem);
    line-height: 0.99;
    letter-spacing: -0.015em;
  }

  header nav > a {
    gap: 0.5rem;
  }

  header nav > a > span {
    font-size: 1.05rem;
  }

  .header-name-lockup .site-name-kicker {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
  }

  .header-name-lockup .site-name-primary {
    font-size: 1rem;
  }

  .header-language-switcher {
    gap: 0.15rem;
    margin-right: 0.4rem;
    padding: 0.2rem;
  }

  .header-language-switcher .flag-btn {
    width: 1.65rem;
    height: 1.5rem;
  }

  #menu-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .home-pillars-grid,
  body:has([data-i18n="ecology_title"]) main section:nth-of-type(2) .content-width > .grid {
    grid-template-columns: 1fr;
  }

  .home-pillars-grid > a,
  article:has([data-i18n^="ecology_"]),
  article:has([data-i18n^="retreat_"]),
  article:has([data-i18n^="wildlife_"]),
  .animal-residents-panel,
  .retreat-stay-panel {
    min-height: 0;
    padding: 1.5rem;
  }

  .animal-residents-grid {
    grid-template-columns: 1fr;
  }

  a.bg-forest.text-white,
  a.bg-terracotta.text-white,
  a.border.border-forest\/20.font-semibold,
  button.bg-forest.text-white,
  button.bg-terracotta.text-white {
    min-height: 3.1rem;
    padding-inline: 1.25rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-pillars-grid > a {
    transition: none;
  }
}

/* The homepage research note sits over changing rainforest imagery. */
.home-research-note {
  display: block;
  padding: 1rem 1.25rem;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(7, 38, 27, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.875rem;
  box-shadow: 0 10px 28px rgba(4, 23, 16, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.header-brand-logo,
header nav > a > .header-brand-logo {
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.header-brand-logo img,
.footer-brand-logo img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.site-name-lockup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.site-name-kicker {
  font-family: Inter, sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-name-primary {
  margin-top: 0.18rem;
  font-family: "DM Serif Display", serif;
  font-size: 1.18rem;
}

.header-name-lockup {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.header-name-lockup .site-name-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.footer-name-lockup {
  color: #fff;
}

.footer-name-lockup .site-name-kicker {
  color: rgba(255, 255, 255, 0.58);
}

/* Mobile navigation */
body.mobile-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.desktop-nav-panel {
  transform: translateY(0.25rem);
}

.desktop-nav-group:hover > .desktop-nav-panel,
.desktop-nav-group:focus-within > .desktop-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.desktop-nav-group > a:focus-visible {
  outline: 2px solid #2d6a4f;
  outline-offset: 0.35rem;
  border-radius: 0.15rem;
}

#menu-toggle {
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  background: rgba(7, 38, 27, 0.78);
  box-shadow: 0 4px 12px rgba(4, 23, 16, 0.26);
  cursor: pointer;
}

.header-language-switcher {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  margin-right: 0.75rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.65rem;
  background: rgba(7, 38, 27, 0.58);
}

.header-language-switcher .flag-btn {
  display: grid;
  width: 1.9rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 0.3rem;
}

[data-i18n="home_four_tagline"] {
  display: block;
  white-space: nowrap;
}

.home-scroll-split__frame {
  aspect-ratio: 627 / 527;
}

#menu-toggle span {
  transform-origin: center;
  transition: transform 180ms ease, opacity 150ms ease;
}

#menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

#menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

#menu-toggle:focus-visible,
#menu-close:focus-visible,
#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
  outline: 3px solid #8ed8b3;
  outline-offset: 3px;
}

@media (max-width: 63.99rem) {
  #mobile-menu {
    z-index: 70;
    height: 100vh;
    height: 100dvh;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: max(5.25rem, calc(env(safe-area-inset-top) + 4.25rem)) 1.5rem max(2rem, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 15% 5%, rgba(82, 183, 136, 0.18), transparent 34%),
      linear-gradient(155deg, #153c2c 0%, #0f3023 100%);
    opacity: 0;
    visibility: hidden;
    translate: 100% 0;
    pointer-events: none;
    transition: translate 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease,
      visibility 0s linear 260ms;
  }

  #mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    pointer-events: auto;
    transition-delay: 0s;
  }

  #menu-close {
    top: max(1rem, env(safe-area-inset-top));
    right: 1.25rem;
    display: grid;
    width: 2.9rem;
    height: 2.9rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
  }

  #mobile-menu > a,
  #mobile-menu > .mobile-nav-group {
    width: 100%;
    max-width: 22rem;
  }

  #mobile-menu > a {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    padding: 0.65rem 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
  }

  #mobile-menu > a:first-of-type {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
  }

  #mobile-menu .mobile-nav-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  #mobile-menu .mobile-nav-trigger {
    min-height: 3.25rem;
    padding: 0.65rem 0.35rem;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
  }

  #mobile-menu .mobile-nav-trigger > span[aria-hidden="true"] {
    display: inline-block;
    color: #8ed8b3;
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    transition: transform 180ms ease;
  }

  #mobile-menu .mobile-nav-trigger[aria-expanded="true"] > span[aria-hidden="true"] {
    transform: rotate(180deg);
  }

  #mobile-menu .mobile-submenu {
    padding-left: 0.85rem;
    transition: max-height 220ms ease;
  }

  #mobile-menu .mobile-submenu a {
    display: flex;
    min-height: 2.7rem;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-left: 2px solid rgba(142, 216, 179, 0.3);
    color: rgba(255, 255, 255, 0.76);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
  }

  [data-i18n="home_four_tagline"] {
    font-size: clamp(0.6rem, 2.7vw, 0.78rem);
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-menu,
  #menu-toggle span,
  #mobile-menu .mobile-nav-trigger > span[aria-hidden="true"],
  #mobile-menu .mobile-submenu {
    transition: none;
  }
}