@layer styles {
  @font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/roboto-latin-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/roboto-latin-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

  :root {
    --space--extra-small: 1rem;
    --space--small: 1.5rem;
    --space--medium: 3rem;
    --space--large: 5rem;

    --content-width: 1050px;

    --font-family--primary: 'Roboto', sans-serif;
    --font-family--secondary: Helvetica, Arial, sans-serif;
    --page__margin: var(--space--small);

    --color__background--main: #ffffff;
    --color__background--mobile-menu: #fafafa;

    --color__font--dark: #333333;
    --color__font--bright: #ffffff;
    --color__theme--ecovs: #3a7e00;
    --color__theme--secondary: #dee9de;
    --color__cta--theme-green: var(--color__theme--ecovs);
    --color__cta--olive-green: #ccdd91;
    --color__cta--sea-green: #ccdfcb;
    --color__link: var(--color__theme--ecovs);
    --color__heading: var(--color__theme--ecovs);

    --logotype__min-width: 85px;
    --logotype__max-width: 180px;

    --line-height--standard: 161.5%;
    --line-height--heading: 2.5rem;

    --size__font--standard: 22px;
    --size__font--body: 0.863rem;
    --size__font--medium-body: 0.727rem;
    --size__font--small-body: 0.545rem;
    --size__font--subtitle: 0.636rem;

    --size__font--heading-large: 2.045rem;
    --size__font--heading-medium: 0.864rem;
    --size__font--heading-mobile: 1.363rem;

    --size__font--links: 0.591rem;
    --size__font--footer-links: 0.545rem;
    --size__font--footer-social-media-icon: 3.045rem;

    --size__header--max-height: 85px;

    --size__hero-logo--max-height: 175px;
    --size__hero-logo--min-height: 65px;

    --z-index__header: 9;
  }

  /* Must stay in this layer — from @layer reset it would lose to `.paragraph`. */
  p:last-child {
    margin-bottom: 0;
  }

  /* Typography */

  .heading {
    font-size: var(--size__font--heading-mobile);
    color: var(--color__heading);
    font-family: var(--font-family--secondary);
    font-weight: 400;
    line-height: var(--line-height--heading);
    padding-top: var(--space--large);
    text-transform: uppercase;
  }

  @media (min-width: 600px) {
    .heading {
      font-size: var(--size__font--heading-large);
    }
  }

  .heading--title {
    margin-bottom: 1.13rem;
  }

  .paragraph {
    color: var(--color__font--dark);
    font-size: var(--size__font--body);
    margin: 1.5rem 0;
  }

  .paragraph--tiny {
    font-size: var(--size__font--small-body);
  }

  .subtitle {
    color: var(--color__font--dark);
    font-size: var(--size__font--subtitle);
    font-style: italic;
    font-weight: 700;
  }

  .client-name {
    color: var(--color__font--dark);
    font-size: var(--size__font--medium-body);
    font-weight: 400;
    padding-top: 0;
    text-transform: none;
    text-align: center;
  }

  @media (min-width: 600px) {
    .client-name {
      font-size: var(--size__font--medium-body);
      text-align: right;
    }
  }

  /* Shared elements */

  .category-divider {
    display: flex;
    justify-content: center;
    max-width: 85%;
    margin: var(--space--small) auto;
  }

  .cta {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    background-color: var(--color__background--main);
    color: var(--color__link);
    cursor: pointer;
    border: 2px solid var(--color__theme--ecovs);
    font-size: var(--size__font--links);
    height: 2.045rem;
    max-width: 6.45rem;
    padding: 0 var(--space--extra-small);
    transition: background-color 0.3s;
  }

  .cta:hover {
    background-color: var(--color__cta--theme-green);
    color: var(--color__font--bright);
  }

  /* Full-width images at their natural aspect ratio. */
  .intro-section__image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Breakpoint-scoped page margin. Keep last. */

  @media (min-width: 900px) {
    :root {
      --page__margin: var(--space--medium);
    }
  }

  @media (min-width: 1200px) {
    :root {
      --page__margin: 0;
    }
  }
}