.demo-main {
    overflow: clip;
  }
  
  .demo-eyebrow {
    opacity: .5;
    margin-bottom: 0;
    font-size: 1.3125em;
    font-weight: 600;
  }
  
  .demo-p {
    max-width: 19em;
    margin-bottom: 0;
    font-size: 1.3125em;
    font-weight: 600;
  }
  
  .demo-header {
    grid-column-gap: 7.5em;
    grid-row-gap: 7.5em;
    letter-spacing: -.02em;
    border-bottom: 1px solid #201d1d26;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100svh;
    padding: 2.5em;
    font-weight: 600;
    display: flex;
    position: relative;
  }
  
  .demo-header__nav-row {
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }
  
  .demo-header__title-row {
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    padding-left: calc(33.3333% + .833333em);
    display: flex;
  }
  
  .demo-header__info-row {
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    display: flex;
  }
  
  .demo-header__col {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    flex-flow: column;
    justify-content: space-between;
    width: calc(33.3333% - 1.66667em);
    display: flex;
  }
  
  .demo-header__h1 {
    letter-spacing: -.03em;
    max-width: 11em;
    font-size: 4em;
    font-weight: 600;
    line-height: .95;
  }
  
  .demo-header__img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
  }
  
  .demo-header__logo {
    width: 15em;
  }
  
  .demo-header__nav-a {
    margin-bottom: 0;
    font-size: 1.3125em;
    font-weight: 600;
  }
  
  .footer-wrap {
    position: relative;
    overflow: hidden;
  }
  
  .demo-footer {
    grid-column-gap: 7.5em;
    grid-row-gap: 7.5em;
    letter-spacing: -.02em;
    flex-flow: column;
    justify-content: space-between;
    min-height: 100svh;
    padding: 2.5em;
    font-weight: 600;
    display: flex;
    position: relative;
  }
  
  .demo-footer__links-row {
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    display: flex;
  }
  
  .demo-footer__logo-row {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    flex-flow: column;
    display: flex;
  }
  
  .demo-footer__col {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    flex-flow: column;
    width: calc(33.3333% - 1.66667em);
    display: flex;
  }
  
  .demo-footer__links {
    grid-column-gap: .25em;
    grid-row-gap: .25em;
    flex-flow: column;
    align-items: flex-start;
    display: flex;
  }
  
  .demo-footer__a {
    color: inherit;
    font-size: 2.75em;
    line-height: 1;
    text-decoration: none;
  }
  
  .footer-wrap__dark {
    opacity: 0;
    pointer-events: none;
    background-color: #201d1d;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  @media screen and (max-width: 991px) {
    .demo-header__title-row {
      padding-left: 0;
    }
  
    .demo-header__info-row {
      flex-flow: column;
    }
  
    .demo-header__col {
      width: 100%;
    }
  
    .demo-header__logo {
      width: 50vw;
    }
  
    .demo-footer__links-row {
      flex-flow: column;
    }
  
    .demo-footer__logo-row {
      grid-column-gap: 1.5em;
      grid-row-gap: 1.5em;
    }
  
    .demo-footer__col {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 767px) {
    .demo-eyebrow {
      font-size: 1em;
    }
  
    .demo-p {
      max-width: 100%;
      font-size: 1.25em;
    }
  
    .demo-header {
      grid-column-gap: 5em;
      grid-row-gap: 5em;
      padding-left: 1em;
      padding-right: 1em;
    }
  
    .demo-footer {
      padding-left: 1em;
      padding-right: 1em;
    }
  
    .demo-eyebrow {
      font-size: 1em;
    }
  
    .demo-footer__col {
      grid-column-gap: 1em;
      grid-row-gap: 1em;
    }
  
    .demo-footer__a {
      font-size: 1.75em;
    }
  
    .demo-header__info-row {
      grid-column-gap: 1em;
      grid-row-gap: 1em;
    }
  
    .demo-header__h1 {
      font-size: 3em;
    }
  
    .demo-header__nav-a {
      max-width: 100%;
      font-size: 1em;
    }
  }
  
  /* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */
  
  /* Desktop */
  :root {
    --size-unit: 16; /* body font-size in design - no px */
    --size-container-ideal: 1440; /* screen-size in design - no px */
    --size-container-min: 992px;
    --size-container-max: 1920px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  }
  
  /* Tablet */
  @media screen and (max-width: 991px) {
    :root {
      --size-container-ideal: 834; /* screen-size in design - no px */
      --size-container-min: 768px;
      --size-container-max: 991px;
    }
  }
  
  /* Mobile Landscape */
  @media screen and (max-width: 767px) {
    :root {
      --size-container-ideal: 390; /* screen-size in design - no px */
      --size-container-min: 480px;
      --size-container-max: 767px;
    }
  }
  
  /* Mobile Portrait */
  @media screen and (max-width: 479px) {
    :root {
      --size-container-ideal: 390; /* screen-size in design - no px */
      --size-container-min: 320px;
      --size-container-max: 479px;
    }
  }
  
  /* ------------------------- Underline Link [https://osmo.supply/] -------------------------  */
  
  [data-underline-link] {
    text-decoration: none;
    position: relative;
  }
  
  [data-underline-link]::before {
    content: "";
    position: absolute;
    bottom: -0.0625em;
    left: 0;
    width: 100%;
    height: 0.1em;
    background-color: currentColor;
    transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
  }
  
  @media (hover: hover) and (pointer: fine) {
    [data-hover]:hover [data-underline-link]::before,
    [data-underline-link]:hover::before {
      transform-origin: left;
      transform: scaleX(1) rotate(0.001deg);
    }  
  }