:root {
      --font-gloock: "Gloock", serif;
      --color-light-green: #ACC91E;
      --color-green: #00853F;
      --color-purple: #974597;
      --color-pink: #DB66AA;
      --color-turquoise: #3AA9A9;
      --color-black: #121212;
      --color-white: #FFFFFF;
      --color-gray: #3B3B3B;

      --padding-x: 44px;
      --padding-y: 64px;
      --padding-z: 96px;

      --gap-xs: 6px;
      --gaps: 10px;
      --gap-m: 24px;
      --gap-l: 44px;

      --title-l: 120px;
      --title-m: 60px;
      --title-s: 44px;
      --title-xs: 20px;
      --body-xl: 24px;
      --body-l: 18px;
      --body-m: 16px;
      --body-s: 14px;
      --body-xs: 12px;

      --line-height-title-l: 106px;
      --line-height-title-m: 64px;
      --line-height-title-s: 48px;
      --line-height-title-xs: 28px;
      --line-height-body-xl: 32px;
      --line-height-body-l: 26px;
      --line-height-body-m: 24px;
      --line-height-body-s: 18px;
      --line-height-body-xs: 16px;

      --max-width: 1280px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: var(--color-white);
      color: var(--color-black);
      font-family: "Helvetica Neue", Helvetica, "Open Sans", sans-serif;
    }

    .header {
      width: 100%;
      height: 64px;
      display: flex;
      justify-content: center;
    }

    .header-container {
      width: 100%;
      max-width: var(--max-width);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px var(--padding-x);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--gap-m);
      font-weight: 700;
      text-transform: uppercase;
    }

    .language-button {
      text-decoration: none;
      color: var(--color-black);
      font-size: var(--body-m);
      line-height: 16px;
      cursor: pointer;
    }

    .header-cta {
      text-decoration: none;
      padding: 6px 20px;
      border: 1px solid var(--color-black);
      background: var(--color-light-green);
      color: var(--color-black);
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
      cursor: pointer
    }

    .mobile-text {
      display: none;
    }

    .language-dropdown {
      display: none;
    }

    .lang-options {
      position: absolute;
      background: var(--color-white);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 100;
      width: 46px;
      gap: 10px;
      padding: 6px;
      font-weight: 700;
    }

    .lang-options>a {
      text-decoration: none;
      color: var(--color-black)
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary {
      list-style: none;
    }

    summary::marker {
      display: none;
      content: "";
    }

    .hero {
      background-image: url('./assets/bg-hero.jpg');
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    .hero-container {
      width: 100%;
      max-width: var(--max-width);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 80px var(--padding-x);
    }

    .hero-image {
      mix-blend-mode: multiply;
      max-width: 50%;
      height: auto;
      position: absolute;
      right: 53%;
      top: 20px;
      z-index: 1;
    }

    .hero-content {
      width: 100%;
      max-width: 700px;
      display: flex;
      flex-direction: column;
      gap: var(--gap-m);
      text-align: right;
      position: relative;
      z-index: 2;
      mix-blend-mode: multiply;
    }

    .hero-title {
      font-family: var(--font-gloock);
      color: var(--color-green);
      font-size: var(--title-l);
      line-height: var(--line-height-title-l);
      font-weight: 400;
    }

    .hero-description {
      color: var(--color-black);
      font-size: var(--body-xl);
      line-height: var(--line-height-body-xl);
      margin-left: -10%;
      font-weight: 300;
    }

    .restoration-years {
      background-image: url('./assets/bg-footer-gray.jpg');
      background-repeat: repeat-x;
      background-position: left top;
      background-size: auto;
      padding: 96px var(--padding-x) var(--padding-y) var(--padding-x);
      background-color: var(--color-white);
      display: flex;
      justify-content: center;
      gap: var(--padding-x);
    }

    .container {
      max-width: var(--max-width);
      padding: 0 var(--padding-x);
      display: flex;
      flex-direction: column;
      gap: var(--padding-x);
    }

    .section-title-alt {
      font-family: var(--font-gloock);
      font-size: var(--title-s);
      line-height: var(--line-height-title-s);
      font-weight: 400;
    }

    .restoration-grid {
      display: grid;
      grid-template-columns: 0.47fr 0.47fr 0.06fr;
      gap: 44px;
    }

    .restoration-item {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .restoration-item>img {
      max-width: 50%;
      height: auto;
      display: block;
      flex: 0 1 285px;
    }


    .metric-text p {
      font-size: var(--body-s);
      line-height: var(--line-height-body-s);
    }

    .big-number {
      display: block;
      font-family: var(--font-gloock);
      font-size: var(--title-s);
      line-height: var(--line-height-title-s);
      color: var(--color-purple);
      margin: 6px 0;
      min-width: 150px;
    }

    .importance-section {
      background-image: url('./assets/bg-light-green.png');
      display: flex;
    }

    .importance-content {
      max-width: 724px;
      padding: var(--padding-y) var(--padding-x);
    }

    .importance-title {
      font-family: var(--font-gloock);
      font-size: var(--title-m);
      line-height: var(--line-height-title-m);
      color: var(--color-green);
      margin-bottom: 24px;
      mix-blend-mode: multiply;
      font-weight: 400;
    }

    .importance-content p {
      font-size: var(--body-l);
      line-height: var(--line-height-body-l);
      padding-bottom: 24px;
    }

    .metrics-grid {
      display: flex;
      justify-content: space-between;
      padding-top: var(--padding-x);
    }

    .metric-item {
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: 186px;
    }

    .metric-item img {
      width: 82px;
      height: 90px;
    }

    .metric-info {
      display: flex;
      flex-direction: column;
    }

    .metric-info .number {
      font-family: var(--font-gloock);
      font-size: var(--title-m);
      line-height: var(--line-height-title-m);
      color: var(--color-green);
      mix-blend-mode: multiply;
    }

    .metric-info .label {
      font-size: var(--body-xs);
      line-height: var(--line-height-body-xs);
      font-weight: 700;
    }

    .future-forests {
      background:
        url('./assets/bg-footer-green.png') repeat-x top center / auto;
      padding: 96px var(--padding-x) var(--padding-y) var(--padding-x);
      background-color: var(--color-white);
      display: flex;
      justify-content: center;
    }

    .forests-container {
      max-width: 1280px;
      display: flex;
      gap: var(--padding-x);
      align-items: center;
    }

    .comparison-slider {
      position: relative;
      width: 100%;
      max-width: 800px;
      overflow: hidden;
    }

    .comparison-slider>img {
      width: 100%;
      height: auto;
      display: block;
    }

    .overlay-image {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      border-right: 2px solid var(--color-white);
      overflow: hidden;
    }

    .overlay-image img {
      height: 100%;
      width: auto;
      display: block;
      max-width: none;
    }

    .slider-divider {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background-color: var(--color-white);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .slider-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 64px;
      background-color: var(--color-purple);
      border: 2px solid var(--color-white);
      border-radius: 100px;
    }

    .slider {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: ew-resize;
      margin: 0;
      z-index: 10;
    }

    .overlay-image img {
      height: 100%;
      width: 800px;
      max-width: none;
      object-fit: cover;
      object-position: left;
      display: block;
    }

    .visual-caption {
      background-image: url('./assets/bg-gray.png');
      padding: 16px;
      border: 1px solid var(--color-black);
    }

    .visual-caption h3 {
      font-weight: 700;
      font-size: var(--title-xs);
      line-height: var(--line-height-title-xs);
      margin-bottom: 4px;
    }

    .visual-caption p {
      font-size: var(--body-s);
      line-height: var(--line-height-body-s);
      color: var(--color-black);
    }

    .forests-content {
      flex: 1;
    }

    .forests-title {
      font-family: var(--font-gloock);
      font-size: var(--title-m);
      line-height: var(--line-height-title-m);
      color: var(--color-purple);
      margin-bottom: 12px;
      font-weight: 400;
    }

    .forests-subtitle {
      font-weight: 300;
      font-size: var(--body-xl);
      line-height: var(--line-height-body-xl);
      margin-bottom: 24px;
    }

    .forests-text p {
      font-size: var(--body-l);
      line-height: var(--line-height-body-l);
    }

    .clipping-section {
      background: url('./assets/bg-pink.png');
      padding: var(--padding-y) var(--padding-x);
    }

    .clipping-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      max-width: 1192px;
      margin: 0 auto;
    }

    .header-card {
      color: var(--color-white);
    }

    .clipping-grid .section-title {
      font-family: var(--font-gloock);
      font-size: var(--title-m);
      line-height: var(--line-height-title-m);
      margin-bottom: 12px;
      font-weight: 400;
    }

    .clipping-grid .section-subtitle {
      font-size: var(--body-xl);
      line-height: var(--line-height-body-xl);
      color: var(--color-black);
    }

    .quote-card {
      background: var(--color-white);
      padding: 12px;
      color: var(--color-black);
      font-size: var(--body-l);
      line-height: var(--line-height-body-l);
      background-image:
        url('./assets/torn-paper-left.png'),
        url('./assets/torn-paper-right.png');
      background-position: left center, right center;
      background-repeat: repeat-y;
      background-size: 10px auto, 10px auto;
    }

    .quote-card::before {
      content: '';
      display: block;
      width: 43px;
      height: 38px;
      background: url('./assets/quote.svg');
      margin-top: -30px;
      margin-left: -30px;
    }

    .quote-card a {
      color: var(--color-pink);
      text-decoration: underline;
      font-weight: 700;
    }

    .restoration-section {
      background:
        url('./assets/bg-footer-pink.png') repeat-x top center / auto,
        url('./assets/bg-green.jpeg') no-repeat center / cover;
      padding: 96px var(--padding-x) var(--padding-y) var(--padding-x);
      color: var(--color-white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .section-title {
      max-width: 712px;
      font-size: var(--title-m);
      line-height: var(--line-height-title-m);
      font-family: var(--font-gloock);
      margin-bottom: var(--padding-x);
      font-weight: 400;
    }

    .section-description {
      max-width: 712px;
      font-size: var(--body-xl);
      line-height: var(--line-height-body-xl);
      margin-bottom: 44px;
    }

    .btn-primary {
      background-color: var(--color-light-green);
      color: var(--color-black);
      padding: 18px 24px;
      text-decoration: none;
      font-size: 24px;
      line-height: 24px;
      font-family: var(--font-gloock);
      border: 1px solid var(--color-black);
    }

    .main-footer {
      background-color: var(--color-gray);
      color: var(--color-white);
      text-align: center;
      font-size: var(--body-m);
      line-height: var(--line-height-body-m);
    }

    .footer-container {
      max-width: 1278px;
      margin: 0 auto;
      padding: var(--padding-y) var(--padding-x) var(--padding-x) var(--padding-x);
    }

    .social-links {
      margin-bottom: 44px;
    }

    .social-links a {
      margin: 0 12px;
      text-decoration: none;
    }

    .company-name {
      font-weight: 700;
      margin-bottom: 4px;
    }

    .address {
      text-decoration: none;
      color: var(--color-white);
    }

    .footer-bottom {
      background-color: var(--color-black);
      padding: 96px 0 var(--padding-y) 0;
      background-image: url('./assets/bg-footer.png');
      background-repeat: repeat-x;
      background-position: top center;
      background-size: auto;
    }

    .credits {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .credits span {
      font-size: 10px;
    }

    @media (max-width: 1500px) {
      .importance-map > img {
        max-width: 630px;
      }
    }

    @media (max-width: 1279px) {
      :root {
        --title-l: 96px;
        --title-m: 54px;
        --title-s: 40px;
        --body-xl: 18px;

        --line-height-title-l: 84px;
        --line-height-title-m: 64px;
        --line-height-title-s: 44px;
        --line-height-title-xs: 28px;
        --line-height-body-xl: 26px;

        --max-width: 730px;
      }

      .hero-container {
        max-width: unset;
      }

      .hero-image {
        max-width: 40%;
        left: 0;
        top: 40px;
      }

      .hero-content {
        max-width: 550px;
      }

      .section-title {
        max-width: 658px;
      }

      .section-description {
        max-width: 658px;
      }

      .importance-content {
        max-width: 760px;
      }

      .clipping-grid {
        grid-template-columns: 1fr;
      }

      .quote-card:nth-child(2),
      .quote-card:nth-child(3),
      .quote-card:nth-child(6) {
        margin-right: 15%;
      }

      .quote-card:nth-child(4) {
        margin-left: 20%;
      }

      .quote-card:nth-child(5) {
        margin-left: 14%;
      }

      .forests-container {
        flex-direction: column;
      }

      .importance-section {
        flex-direction: column;
      }

      .restoration-grid {
        grid-template-columns: 1fr;
      }

      .restoration-item img {
        max-width: 276px;
        margin: 0 auto;
        flex: none;
      }

      .metric-text {
        max-width: 150px;
      }

       .importance-map > img {
        max-width: unset;
      }

    }

    @media (max-width: 736px) {
      :root {
        --title-l: 54px;
        --title-m: 36px;
        --title-s: 36px;
        --body-xl: 14px;
        --body-l: 16px;
        --body-m: 14px;

        --line-height-title-l: 54px;
        --line-height-title-m: 44px;
        --line-height-title-s: 40px;
        --line-height-body-xl: 20px;
        --line-height-body-m: 18px;

        --padding-x: 24px;
        --padding-y: 54px;

        --max-width: 375px;
      }

      .desktop-text {
        display: none;
      }

      .mobile-text {
        display: inline;
      }

      .language-dropdown {
        display: inline-block;
      }

      .desktop-languages {
        display: none;
      }

      .hero-container {
        display: flex;
        flex-direction: column;
        padding: 0 24px 44px 24px;
        overflow: visible;
      }

      .hero-image {
        position: relative;
        max-width: 70%;
        left: -30%;
        top: -20px;
        margin-bottom: -10%;
      }

      .hero-content {
        max-width: 100%;
        text-align: right;
        align-items: flex-end;
      }

      .hero-title {
        max-width: 310px;
      }

      .hero-description {
        max-width: 327px;
      }

      .section-title {
        max-width: 279px;
      }

      .section-description {
        max-width: 279px;
      }

      .metrics-grid {
        flex-direction: column;
        gap: 44px;
        align-items: center;
      }

      .restoration-item {
        flex-direction: column;
      }

      .restoration-item img {
        max-width: 260px;
        margin: 0 auto;
        flex: none;
      }

      .metric-text {
        text-align: center;
      }

      .section-title-alt {
        text-align: center;
      }

      .quote-card {
        margin: 0 !important;
      }

      .credits > a >img {
        max-width: 72px;;
      }
    }