/* =========================
   HERO (match prototype)
========================= */
.hero{
  padding-top:150px;
  padding-bottom:100px;
  border-bottom:1px solid var(--border-color);
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr; /* kasih ruang lebih ke teks */
  gap:70px;
  align-items:start; /* sejajar atas seperti prototype */
}

.hero-title{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  line-height: 1.03;
  margin: 0;
}

/* kunci supaya baris kedua tidak pecah */
.hero-line{
  white-space: nowrap;
  display: inline-block;
}

.hero-em{
  color: var(--primary-olive);
  font-style: italic;
  white-space: nowrap;
}

.hero-desc{
  max-width: 620px;
  font-size: 1.15rem;
  margin: 18px 0 34px;
  color: #555;
}

.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* kanan: kolase nempel atas & lebih besar */
.hero-media{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.hero-collage{
  width: min(640px, 100%); /* perbesar gambar */
  height: auto;
  object-fit: contain;
  transform: rotate(-2deg) translateY(-8px); /* naik sedikit biar sama seperti prototype */
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.18));
}

/* Responsive */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-line{ white-space: normal; } /* di layar kecil boleh pecah */
  .hero-media{ justify-content:center; margin-top: 24px; }
  .hero-collage{ transform: rotate(-2deg); width: min(560px, 100%); }
}

/* =========================
   MARQUEE
========================= */
.marquee-container{
  border-bottom:1px solid var(--border-color);
  overflow:hidden;
  background:var(--text-main);
  color:#fff;
  padding:14px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:50px;
  white-space:nowrap;
  animation:marquee 22s linear infinite;
  padding-left:50px;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee-item{
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:.9rem;
}


/* =========================
   ABOUT
========================= */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.ceo-card{
  background:#fff;
  border:1px solid var(--border-color);
  padding:18px;
  position:relative;
}
.ceo-card::after{
  content:"";
  position:absolute;
  top:10px;
  left:10px;
  width:100%;
  height:100%;
  background:var(--primary-olive);
  z-index:-1;
}
.ceo-img{
  width:100%;
  height:380px;
  object-fit:cover;
  filter:sepia(20%);
}
.ceo-quote{
  margin-top:18px;
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1.05rem;
  border-left:3px solid var(--primary-red);
  padding-left:14px;
}
.vision-mission{
  margin-top:26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.vm-box{
  border:1px dashed var(--border-color);
  padding:18px;
}
.vm-box h3{
  color:var(--primary-red);
  margin-bottom:10px;
}
@media (max-width:768px){
  .about-grid{grid-template-columns:1fr}
}


/* =========================
   FOOTER (override jadi 3 kolom rapi)
========================= */
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:48px;
  align-items:start;
}
.footer-left{ text-align:left; }
.footer-center{
  text-align:center;
  justify-self:center;
}
.footer-right{
  justify-self:end;
  text-align:left;
}
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .footer-center,
  .footer-right{
    justify-self:start;
    text-align:left;
  }
}