/* MANGOSTEEN brand page */

.page-hero.with-image .ms-hero-actions{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.btn-outline-light{
  border-color:rgba(255,255,255,.5);
  color:rgba(255,255,255,.95);
  background:transparent;
}
.btn-outline-light:hover{
  border-color:var(--gold);
  color:var(--gold);
}

.ms-why{
  padding:clamp(88px,12vw,120px) 0;
  background:#fff;
  border-top:1px solid rgba(231,226,215,.5);
}

.ms-why__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(40px,6vw,72px);
  align-items:center;
}

.ms-why__text .eyebrow{
  margin-bottom:14px;
}

.ms-why__text h2{
  font-size:clamp(26px,3vw,34px);
  font-weight:900;
  margin:0 0 24px;
  letter-spacing:.02em;
  line-height:1.25;
}

.ms-why__text p{
  margin:0 0 22px;
  font-size:15px;
  line-height:2;
  color:#444;
}

.ms-why__text p:last-child{margin-bottom:0}

.ms-why__figure{
  margin:0;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 28px 60px rgba(0,0,0,.08);
  aspect-ratio:16 / 9;
}

.ms-why__figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.ms-features{
  padding:clamp(88px,12vw,120px) 0;
  background:#fafaf8;
  border-top:1px solid rgba(231,226,215,.55);
}

.ms-features__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.5vw,26px);
}

.ms-feature-card{
  padding:clamp(28px,3vw,36px) clamp(20px,2vw,26px);
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  transition:border-color .22s ease;
}

.ms-feature-card:hover{
  border-color:rgba(200,169,107,.35);
}

.ms-feature-icon{
  color:var(--gold-dark);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ms-feature-icon svg{
  width:40px;
  height:40px;
}

.ms-feature-icon svg :is(path,circle,line,polyline,polygon,rect){
  stroke-width:1.5;
}

.ms-feature-card h3{
  margin:0;
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--ink);
}

.ms-feature-card p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:#555;
}

.ms-gallery-wrap{
  padding-bottom:clamp(48px,6vw,64px);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.gallery-item{
  overflow:hidden;
  aspect-ratio:4 / 3;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease,filter .5s ease,box-shadow .5s ease;
}

.gallery-item:hover img{
  transform:scale(1.03);
  filter:brightness(1.05);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.ms-gallery-cta{
  margin-top:clamp(36px,5vw,48px);
  text-align:center;
}

.ms-gallery-cta .btn-outline{
  min-width:240px;
}

.ms-official-cta{
  padding:clamp(80px,10vw,100px) 0;
  background:#050505;
  color:#fff;
  text-align:center;
}

.ms-official-cta h2{
  font-size:clamp(20px,2.6vw,26px);
  font-weight:700;
  line-height:1.65;
  margin:0 auto 32px;
  max-width:36ch;
  letter-spacing:.02em;
}

.ms-official-cta .btn-outline-light{
  display:inline-flex;
  min-width:260px;
  padding:15px 32px;
}

@media (max-width:1024px){
  .ms-features__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
  .ms-why__grid{grid-template-columns:1fr}
  .ms-features__grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
}