#enf-hero-sqs,
  #enf-hero-sqs * {
    box-sizing: border-box;
  }

  #enf-hero-sqs {
    position: relative;
    width: 100%;
    min-height: 720px;
    height: 100svh;
    overflow: hidden;
    background: #f5f5f7;
    font-family: 'Montserrat', Arial, sans-serif;
    isolation: isolate;
  }

  #enf-canvas-sqs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  #enf-hero-sqs .enf-ui {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.25rem 3rem;
    pointer-events: none;
  }

  #enf-hero-sqs .enf-sub {
    font-weight: 100;
    font-size: 0.58rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    margin: 0 0 1.4rem 0;
    opacity: 0;
    animation: enf-up-sqs 1.2s ease 1s forwards;
    text-align: center;
  }

  #enf-hero-sqs .enf-nav {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: auto;
    opacity: 0;
    animation: enf-up-sqs 1s ease 1.3s forwards;
  }

  #enf-hero-sqs .enf-nav a {
    font-weight: 200;
    font-size: 0.52rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
  }

  #enf-hero-sqs .enf-nav a:hover {
    color: rgba(0,0,0,0.85);
    opacity: 1;
  }

  #enf-hero-sqs .enf-c {
    position: absolute;
    z-index: 20;
    font-size: 0.44rem;
    letter-spacing: 0.22em;
    color: rgba(0,0,0,0.18);
    text-transform: uppercase;
    opacity: 0;
    animation: enf-fi-sqs 1s ease 1.6s forwards;
    pointer-events: none;
    white-space: nowrap;
  }

  #enf-hero-sqs .enf-tl { top: 2rem; left: 2.5rem; }
  #enf-hero-sqs .enf-tr { top: 2rem; right: 2.5rem; }
  #enf-hero-sqs .enf-bl { bottom: 1rem; left: 2.5rem; }
  #enf-hero-sqs .enf-br { bottom: 1rem; right: 2.5rem; }

  @keyframes enf-up-sqs {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes enf-fi-sqs {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @media (max-width: 767px) {
    #enf-hero-sqs {
      min-height: 620px;
      height: 88svh;
    }

    #enf-hero-sqs .enf-sub {
      font-size: 0.5rem;
      letter-spacing: 0.35em;
    }

    #enf-hero-sqs .enf-nav {
      gap: 1.1rem;
    }

    #enf-hero-sqs .enf-nav a {
      font-size: 0.48rem;
      letter-spacing: 0.18em;
    }

    #enf-hero-sqs .enf-c {
      font-size: 0.38rem;
      letter-spacing: 0.16em;
    }

    #enf-hero-sqs .enf-tl,
    #enf-hero-sqs .enf-tr {
      top: 1.2rem;
    }

    #enf-hero-sqs .enf-tl,
    #enf-hero-sqs .enf-bl {
      left: 1.2rem;
    }

    #enf-hero-sqs .enf-tr,
    #enf-hero-sqs .enf-br {
      right: 1.2rem;
    }

    #enf-hero-sqs .enf-bl,
    #enf-hero-sqs .enf-br {
      bottom: 0.8rem;
    }
  }