body {
  color:#111;
  background:#fff;
  line-height:1.5;
  height:100%
}
section {
  min-height:50vh;
  width:100%;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.hero {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:2rem
}
    .background-gif {
      height: 110%;  /* Full viewport height */
      background-image: url('/assets/Website_header.gif'); /* path to your GIF */
      background-size: cover;
      background-position: center; /* Centered */
      background-repeat: no-repeat; /* Prevent tiling */
    }
.card {
  text-align:center;
  max-width:32rem
}
.card h1 {
  font-size:clamp(2.2rem,8vw,3.6rem);
  font-weight:700;
  letter-spacing:-.03em
}
.card p {
  margin:.5rem 0 2rem;
  font-weight: bold;
  font-size:clamp(1rem,4vw,1.25rem);
  color:#555
}
.card a {
  color:#0066ee;
  text-decoration:none;
  font-weight:500
}
.projects {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1rem;
  padding:2.5rem 1rem;
  background:#fff
}
.projects h1,
.projects h2 {
  padding: 0 1.5rem;
}
.project {
  background:#fff;
  border-radius:1rem;
  padding: 1.5rem 1.5rem;
  box-shadow:0 4px 12px rgba(0,0,0,.06)
}
.projects-result {
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
  }

.project h2 {
  font-size:1rem;
  margin-bottom:.25rem;
  line-height:1.2;
  padding: 0;
}
@media(min-width:768px) {
  .projects {
    flex-direction:row;
    flex-wrap:wrap;
    align-content:center;
    max-width: 50rem;
  }
  .project { 
    flex:1 1 calc(100% - 1rem);
  }
  .projects-result {
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
  }
}
/* ——— Desktop wrapper and centering ——— */

@media (min-width: 768px) {
  /* constrain all regular sections to a max width and center them */
  section:not(.reel-section),
  .projects {
    max-width: 36rem;      /* roughly 576px; adjust to taste */
    margin: 1rem auto;        /* center on large screens */
    padding: 0 1rem;       /* keep a little breathing room */
  }
  .article {
width: 100%;
  }
}
/* 1) Let the article fill its parent (100dvh) */
.projects-result .project {
  display: flex;
  flex-direction: column;
}

/* 2) Make the “main” panel expand and center itself */
.projects-result .project .cta,
.projects-result .project h2,
.projects-result .project ul {
  /* we’ll wrap h2+ul+cta in a .main block—or target them all together */
}

/* 3) Stick the footer to the bottom */
.projects-result .project .footer {
  /* margin-top:auto pushes it down */
  margin-top: auto;
  text-align: center;
}
/* Make the section a column-flex container */
section.projects-result {
  display: flex;
  flex-direction: column;
  /* height: 100dvh;       same snap height */
}

/* Let the article fill the section */
section.projects-result .project {
  flex: 0 0 auto;             /* grow to fill */
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem;
  margin: 0.4rem 0;
}

/* Center the .main block vertically & horizontally */
section.projects-result .main {
  flex: 1;                   /* take all available space */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical center */
  text-align: left;
  padding: 1rem;             /* optional breathing room */
}
section.projects-result .main .project {
  height: fit-content;
}
.main h2 {
  padding-left: 0;
}

/* Push footer down */
section.projects-result .footer {
  margin-top: auto;
  text-align: center;
  padding: 1rem;
}

.cta {
  margin-top: 1.5rem;
  text-align: center;
}

.cta h2 {
  margin-bottom: 1rem;
}

/* your CTA button styling */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: bold;
}


/* ——— Video sections with black gutters ——— */
@media (min-width: 768px) {
  .reel-section {
    background: #000;              /* black background behind the video */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reel {
    width: 100%;
    max-width: 36rem;              /* same max width as content sections */
    height: auto;                  /* let height adjust to preserve aspect ratio */
    aspect-ratio: 16/9;            /* modern browsers only; remove if unsupported */
    object-fit: cover;
  }
}
      .reel-section {
        display:flex;
        align-items:center;
        justify-content:center;
        background:#000
      }
      .reel {
        width:100%;
        height:100%;
        object-fit:cover
      }

      /* ---------- hint ----------------------------------------------------- */
      #soundHint {
        position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
        background:rgba(0,0,0,.8);color:#fff;font-size:.9rem;
        padding:.5rem .9rem;border-radius:1rem;z-index:1000;
        pointer-events:none;opacity:0;transition:opacity .35s ease}
      #soundHint.show {opacity:1}
      #cta2 {
        position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
        background:rgba(0,0,0,.8);color:#fff;font-size:.9rem;
        padding:.5rem .9rem;border-radius:1rem;z-index:1000;
        pointer-events:none;opacity:0;transition:opacity .35s ease}
      #cta2.show {opacity:1}

      .legal {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;             /* or whatever spacing you need */

}
.imprint, .privacy {
  text-decoration: none;
color: #afafaf;
}

.grid-image {
     width: 15rem;
     object-fit: cover; /* ensures the image covers the box without distortion */
     display: block;     /* remove any inline whitespace/margin */
     padding: 1rem;
}
@media (max-width: 768px) {
.grid-image {
width: 10rem;
}
}
#backToTop {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 44px;
  height: 44px;
  background: #333;
  padding-top: 0.5rem;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 1000;
}

#backToTop.show {
  opacity: 0.7;
  visibility: visible;
}

#backToTop:hover {
  opacity: 1;
}