:root {
  --safe-height: 100svh;
}

@supports not (height: 100svh) {
  :root {
    --safe-height: 100vh;
  }
}

@font-face {
    font-family: 'Red Hat Text';
    src: url('../fonts/RedHatText-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  body {
    font-family: 'Red Hat Text', sans-serif;
  }
  body, html {
    margin: 0;
    padding: 0;
    height: var(--safe-height);
    background: url('../images/back.jpg') center center / cover no-repeat;
    overflow: hidden;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: var(--safe-height);
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
  }
  
  .hero-image {
    max-height: 30vh;
    max-width: 60vw;
    object-fit: contain;
    margin-top: 30vh;
  }
  
  .tagline {
    font-size: 2rem;
    font-weight: 300;
    margin: 20px 0;
    color: #FFF;
    letter-spacing: 0.05em;
  }
  
  .email-wrapper {
    padding-bottom: 10px;
  }
  
  .footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* iOS safe area support */
  }
  
  .footer p {
    font-size: 0.80rem;
    color: #cac8c8;
    letter-spacing: 0.07em;
    margin: 0;
  }
  
  .contact-email {
    font-size: 1.25rem;
    color: #0EE9F6;
    letter-spacing: 0.07em;
  }

.contact-email a {
    color: inherit;
    text-decoration: none;
}
  @media (max-width: 480px) {
    .hero-image {
        max-height: 30vh;
        max-width: 60vw;
        margin-top: 25vh; /* slightly more breathing room on small screens */
    }
  
    .tagline {
      font-size: 1.5rem;
    }
  
    .contact-email {
      font-size: 1rem;
    }

    .footer p {
      font-size: 0.65rem;
      margin: 0;
  }
  }