/* ===== DEFAULT HIDE ===== */
.stack-scroll-stra { display: none; }
.energy-section { display: none; }

/* ===== MOBILE (≤768px) ===== */
@media (max-width: 768px) {
  .stack-scroll-stra { display: block; }
}

/* ===== TABLET & DESKTOP (>768px) ===== */
@media (min-width: 769px) {
  .energy-section { display: grid; }
}

/* ==== STYLE UNTUK MOBILE ==== */
.stack-scroll-stra {
  padding: 0 22px;
  font-family:"Switzer";
}
.stack-scroll-section { 
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
.stack-scroll-stra .card {
	display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    border-radius: 1vw;
    padding: 0;
}
.stack-scroll-stra img, .stack-scroll-stra video {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  padding-top: 85px;
}
.stack-scroll-stra .text-block {
  display: flex;
  flex-direction: column;
  padding: 14px;
  /*gap: 0.657rem;*/
  gap: 6px;
}

.stack-scroll-stra .tag-text {
    font-size: clamp(14px, 1.458vw, 21px);
    line-height: 140%;
    letter-spacing: 0.00em;
    font-weight: 500;
    color: black;
}

.stack-scroll-stra .tittle{
	margin: 0;
    font-size: clamp(21px, 3.542vw, 51px);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.015em;
    color: black;
}

.stack-scroll-stra .descp {
    margin: 0;
    font-size: clamp(14px, 1.458vw, 21px);
    line-height: 140%;
    letter-spacing: 0.00em;
    font-weight: 500;
    color: black;
}

/* ==== STYLE UNTUK DESKTOP ==== */
.energy-section {
  /*grid-template-columns: repeat(2, 1fr);*/
  grid-template-columns: 57% 1fr;
  position: relative;
}
.left-sticky {
  position: sticky;
  top: calc(68px - 0px) !important;
  height: calc(100vh - 62px) !important;
  overflow: hidden;
}
.media {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0% 0% 0%);
  padding: 32px 0;
}
.media:first-child { clip-path: inset(0% 0% 0% 0%); }
.media img, .media video {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.right-scroll { padding-left:40px; padding-right:clamp(20px, 5.556vw, 80px); }
.right-scroll .text-block {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px,1.111vw,16px);
}
.progress {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 200px;
  background: #ddd;
  border-radius: 2px;
  opacity: 0;
}
.progress .line {
  width: 100%;
  height: 0%;
  background: #111;
  border-radius: 2px;
}

/*TEXT*/
.energy-section .tittle {
    margin: 0;
    font-family: 'Switzer';
    font-size: clamp(28px, 3.542vw, 51px);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.015em;
    color: black;
}
.energy-section .tag-text {
    font-family: 'Switzer';
    font-size: clamp(14px, 1.458vw, 21px);
    line-height: 140%;
    letter-spacing: 0.00em;
    font-weight: 500;
    color: black;
}
.energy-section .descp {
    margin: 0;
    font-family: 'Switzer';
    font-size: clamp(14px, 1.458vw, 21px);
    line-height: 140%;
    letter-spacing: 0.00em;
    font-weight: 500;
    color: black;
}