html {
      font-size: 17px;
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }

    body {
      color: #182A24;
      font-size: 1.0625rem;
      line-height: 1.68;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    p {
      line-height: 1.7;
    }

    ::selection {
      background: #d6f279
    }

    input {
      min-width: 0;
    }

    input:focus {
      outline: 2px solid #92b44e;
      outline-offset: 2px;
    }

    select {
      min-width: 0;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23153E31' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1.15rem center;
      background-size: 16px 16px;
      padding-right: 2.75rem !important;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    select::-ms-expand {
      display: none;
    }

    select:hover {
      border-color: #cbd5e1;
    }

    select:focus {
      outline: 2px solid #92b44e;
      outline-offset: 2px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-radius: 8px;
      padding: 14px 22px;
      font-weight: 600;
      transition: .2s
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .bin {
      position: relative;
      width: 85px;
      height: 125px;
      background: var(--bin);
      border-radius: 5px 5px 14px 14px;
      transform: rotate(var(--angle));
      border: 2px solid #143728
    }

    .bin:before {
      content: '';
      position: absolute;
      height: 12px;
      background: var(--bin);
      border: 2px solid #143728;
      left: -8px;
      right: -8px;
      top: -8px;
      border-radius: 4px
    }

    .bin:after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #183c30;
      bottom: -8px;
      right: 8px
    }

    .bin-line {
      position: absolute;
      inset: 22px 15px;
      border: 2px solid #ffffff50;
      border-radius: 3px
    }

    .small-bin {
      display: inline-block;
      width: 12px;
      height: 19px;
      border-radius: 2px 2px 3px 3px;
      position: relative;
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @media (min-width: 640px) {
      .small-bin {
        width: 10px;
        height: 16px;
      }
    }

    /* Bin Lid (Hinged at top-left corner) */
    .small-bin:before {
      content: '';
      position: absolute;
      left: -2px;
      right: -2px;
      top: -3px;
      height: 3px;
      background: inherit;
      border-radius: 1.5px;
      transform-origin: 2px bottom;
      transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.12);
      z-index: 2;
    }

    /* Subtle dark interior opening visible under the open lid */
    .small-bin:after {
      content: '';
      position: absolute;
      top: 0;
      left: 1px;
      right: 1px;
      height: 2px;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 1px;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 1;
    }

    /* Hover State: Open the lids of all three bins */
    .group:hover .small-bin:before,
    .small-bin:hover:before {
      transform: rotate(-38deg);
    }

    .group:hover .small-bin:after,
    .small-bin:hover:after {
      opacity: 1;
    }

    /* Micro-staggered lid flip across green, yellow, and red bins */
    .group:hover .small-bin:nth-child(1):before {
      transform: rotate(-40deg);
      transition-delay: 0ms;
    }

    .group:hover .small-bin:nth-child(2):before {
      transform: rotate(-34deg);
      transition-delay: 35ms;
    }

    .group:hover .small-bin:nth-child(3):before {
      transform: rotate(-42deg);
      transition-delay: 70ms;
    }

    .faq[aria-expanded=true] .plus {
      transform: rotate(45deg);
    }

    /* Mobile Drawer & Overlay Styles */
    #drawer-overlay {
      background-color: rgba(21, 62, 49, 0.7);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    #mobile-menu {
      background-color: #ffffff !important;
      height: 100vh;
      height: 100dvh;
      max-height: 100dvh;
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto;
      }

      .btn,
      .small-bin,
      .small-bin:before,
      .small-bin:after {
        transition: none;
      }
    }