/* ===============================
   GRID / CONTAINER
================================ */
.page__top { 
  grid-area: page__top; 
  text-align: center;
}

.page__left { 
  grid-area: page__left; 
}

.page__right { 
  grid-area: page__right; 
}

.page__bottom { 
  grid-area: page__bottom; 
  text-align: center;
}

.sink__vid .sinkMedia {
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   GRID CORE
================================ */
.grid__container {
  display: grid;
  grid-template-areas:
    "page__top page__top"
    "page__left page__right"
    "page__bottom page__bottom";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1em;
  margin: 0 auto;
  justify-items: center;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  z-index: 100;
  opacity: 1;
  position: absolute;
  transform: translateX(-2rem);

}

/* ===============================
   POSITION OFFSETS (DESKTOP)
================================ */
.page__left { margin-top: -4.5rem; }
.page__right { margin-top: -1rem; }
.page__top { margin-top: 0; }

/* ===============================
   HEADLINE
================================ */
.head__txt {
  font-family: 'ICA Rubrick';
  color: white;
  -webkit-text-stroke: 1.5px black;
  paint-order: stroke fill;
  font-weight: 900;
  text-align: center;
  padding-bottom: 0.2rem;
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* ===============================
   HERO BUTTON
================================ */
.hero__btn {
  display: block;
  text-align: center;
  transform: none;
  z-index: 10;
}

/* Desktop ≥1280px */
@media (min-width: 1280px) {
  .hero__btn {
    margin-top: -8rem;
    margin-right: 4.5rem;

  }
}
/* ===============================
   SINK MEDIA — DESKTOP BASE
================================ */
.page__left .sinkMedia {
  width: clamp(790px, 45vw, 890px);
  margin-left: -1rem;
}

/* ===============================
   TABLET / MOBILE ≤1024px
================================ */
@media (max-width: 1024px) {
  .grid__container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-areas:
      "page__top"
      "page__left"
      "page__bottom"
      "page__right";
       transform: translateX(0rem);
  }

  .page__left {
    margin-top: 0;
  }

  .page__left .sinkMedia {
    width: clamp(800px, 65vw, 900px);
    margin-top: -3rem;
    margin-right: 1.6rem;
  }

  .page__bottom {
    margin-top: -6rem;
    margin-right: 1rem;
  }

  .hero__btn {
    margin: 4rem auto 0 auto;
  }

  .head__txt {
    margin-top: 1rem;
      font-size: clamp(2.2rem, 6vw, 3.1rem);
  }
}

@media (max-width: 898px) {
  .page__left .sinkMedia {
    width: clamp(750px, 63vw, 850px);
    margin-top: -2.5rem;
    margin-right: 1.2rem;
  }

  .page__bottom {
    margin-top: -7rem;
    margin-right: 0.8rem;
  }

  .hero__btn {
    margin-top: 4.5rem;
  }

  .head__txt {
    font-size: clamp(2.1rem, 5.5vw, 3rem);
  }
}

/* ==========================
   PORTRAIT SCALE BAND 2 ≤598px
=========================== */
@media (max-width: 598px) {
  .page__left .sinkMedia {
    width: clamp(680px, 80vw, 750px);
    margin-top: -2rem;
    margin-right: 0.5rem;
  }

  .page__bottom {
    margin-top: -6rem;
    margin-right: 0.5rem;
  }

  .hero__btn {
    margin-top: 3rem auto 0 auto;
  }

  .head__txt {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
  }
}

/* ==========================
   PORTRAIT SCALE BAND 3 ≤398px
=========================== */
@media (max-width: 369px) {
  .page__left .sinkMedia {
    width: clamp(560px, 85vw, 660px);
    margin-top: -2rem;
    margin-right: 0;
  }

  .page__bottom {
    margin-top: -3rem;
    margin-right: 0;
  }

  .hero__btn {
    margin-top: 2rem ;
  }

  .head__txt {
    font-size: clamp(1.2rem, 7.1vw, 2.1rem);
  }
}
/* ================}===============
   LANDSCAPE BEHAVIOR
================================ */

@media (max-width: 1100px) and (orientation: landscape) {
   .hero__btn{
    display: none !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .head__txt {
    display: none !important;
  }

  .page__left .sinkMedia {
    width: clamp(800px, 90vw, 950px);
    margin-left:2.7rem;
    margin-top: -3.7rem;
  }
   .hero__btn {
  margin-left: 1rem;
    margin-top: 1.6rem;
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  .page__left .sinkMedia {
    width: clamp(650px, 92vw, 820px);
    margin-left: 2rem;
    margin-top: -3rem;
  }

   .hero__btn {
  margin-left: 1.3rem;
    margin-top: 3rem;
  }
}

@media (max-width: 798px) and (orientation: landscape) {
.page__left .sinkMedia {
    width: clamp(550px, 92vw, 720px);
    margin-left: 1.5rem;
  }

  .hero__btn {
    margin-top: 5rem;
  }
}