/* ============================================================
   Riben Hopper Pte Ltd — About Us page
   Section-specific styles. Loaded AFTER style.css (reuses tokens).
   ============================================================ */

/* ---------- Page banner ---------- */
.page-banner{
  text-align:center;
  background:radial-gradient(120% 130% at 50% -20%, #A7A7C6 0%, #eef0f3 60%, #e7eaef 100%);
  padding-block:var(--page-header-offset) 0;
}
.page-banner .crumb{
  font-size:.95rem; font-weight:600; color:var(--ink);
}
.page-banner .crumb .sep{ color:var(--muted); margin-inline:.4em; font-weight:400; }
.page-banner h1{
  font-weight:800; letter-spacing:-.02em; line-height:1;
  font-size:clamp(2.6rem,6vw,4.4rem); margin-top:.7rem;
}
.page-banner .rule{
  border:none; border-top:1px solid #E8E8E8;
  margin-top:clamp(26px,4vw,44px);
}

/* ============================================================
   ABOUT + VISION / MISSION
   ============================================================ */
.about-intro{ padding-bottom:clamp(56px,7vw,96px); }
.about-intro .grid{
  display:grid; grid-template-columns:1fr 1.1fr 1fr;
  gap:clamp(28px,4vw,56px); align-items:center;
  text-align:left; margin-top:clamp(40px,5vw,72px);
}
.about-intro h2{
  font-weight:700; line-height:1.1; letter-spacing:-.01em;
  font-size: clamp(2rem, 4.4vw, 3.4rem); max-width:11ch;
}
.about-intro p{ color:#263040; margin-top:1.3rem; line-height:1.5; font-size:17px; }
.about-intro p + p{ margin-top:1.2rem; }

.about-intro .product-media{ aspect-ratio:3/4; }
.about-intro .product-media .ph{ width:100%; height:100%; border-radius:8px; }

.vm-block + .vm-block{ margin-top:2.6rem; }
.vm-block .vm-ic{
  width:46px; height:46px; color:var(--red); margin-bottom:1rem;
}
.vm-block .vm-ic .icon{ width:100%; height:100%; stroke-width:1.4; }
.vm-block .vm-ic img,
.expect .value-item .v-ic img,
.why-choose .wc-ic img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.vm-block h3{ font-size:2rem; font-weight:700; }
.vm-block p{ color:#263040; margin-top:.8rem; line-height:1.5; font-size:17px; }

/* ============================================================
   WHAT TO EXPECT (Our Values)
   ============================================================ */
.expect{
  display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch;
  background:var(--cream);
}
.expect .copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,6vw,96px) clamp(28px,5vw,80px);
}
.expect h2{ margin-top:1rem; max-width:14ch; }
.expect .value-list{ margin-top:clamp(28px,3vw,40px); display:grid; gap:14px; }
.expect .value-item{
  display:flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.06);
  border-radius:10px; padding:.95em 1.2em;
  font-weight:600; font-size:17px; color:var(--ink);
  transition:transform .15s ease, box-shadow .2s ease;
}
.expect .value-item:hover{ transform:translateX(4px);
  box-shadow:0 12px 26px -22px rgba(0,0,0,.5); }
.expect .value-item .v-ic{ width:30px; height:30px; color:var(--red); flex:none; }
.expect .value-item .v-ic .icon{ width:100%; height:100%; stroke-width:1.6; }
.expect .media{ min-height:480px; }
.expect .media .ph{ width:100%; height:100%; }

/* ============================================================
   OUR EXPERTISE
   ============================================================ */
.expertise{
  position:relative; color:#fff; overflow:hidden; background:var(--navy-deep);
}
.expertise .bg{ position:absolute; inset:0; z-index:0; }
.expertise .bg .ph{ width:100%; height:100%; }
.expertise .wrap{ position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,5vw,80px);
  align-items:center; }
.expertise .chute-media{ aspect-ratio:4/5; max-width:420px; }
.expertise .copy{ max-width:52rem; }
.expertise .copy h2{ color:#fff; }
.expertise .copy p{ color:#fff; margin-top:1.4rem; line-height:1.5; max-width:52ch; }
.expertise .copy p + p{ margin-top:1.2rem; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-choose{ background:var(--cream-2); text-align:center; }
.why-choose .h-section{ }
.why-choose .grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,44px); margin-top:clamp(40px,5vw,64px);
  text-align:left;
}
.why-choose .wc-ic{ width:42px; height:42px; color:var(--red); margin-bottom:1.1rem; }
.why-choose .wc-ic .icon{ width:100%; height:100%; stroke-width:1.5; }
.why-choose .wc-item h3{ font-size:1.18rem; font-weight:700; line-height:1.25; min-height:50px; }
.why-choose .wc-item p{ color:#56606e; margin-top:.7rem; font-size:17px; line-height:1.5; }

/* ============================================================
   CERTIFICATIONS  (reuses .certs from style.css with building bg)
   ============================================================ */
.certs .eyebrow.centered{ margin-bottom:.4rem; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner{
  position:relative; overflow:hidden; color:#fff;
  min-height:clamp(420px,46vw,560px); display:flex; align-items:center;
}
.cta-banner .bg{ position:absolute; inset:0; z-index:0; }
.cta-banner .bg .ph{ width:100%; height:100%; }
.cta-banner .wrap{ position:relative; z-index:2;
  display:flex; justify-content:flex-end; }
.cta-banner .copy{ max-width:36rem; }
.cta-banner h2{ color:#fff; font-weight:700; line-height:1.08;
  font-size:clamp(2rem,3.6vw,3rem); }
.cta-banner p{ color:#fff; margin-top:1.2rem; line-height:1.5; max-width:36ch; }
.cta-banner .btn{ margin-top:2rem; padding-inline:2.2em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .about-intro .grid{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .about-intro .product-media{ aspect-ratio:4/3; order:-1; }
  .expertise .wrap{ grid-template-columns:1fr; }
  .expertise .chute-media{ max-width:360px; margin-inline:auto; }
  .why-choose .grid{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
}
@media (max-width:860px){
  .expect{ grid-template-columns:1fr; }
  .expect .media{ min-height:340px; order:-1; }
  .cta-banner .wrap{ justify-content:center; text-align:center; }
  .cta-banner .copy{ max-width:34rem; }
  .cta-banner p{ margin-inline:auto; }
}
@media (max-width:560px){
  .why-choose .grid{ grid-template-columns:1fr; }
  .why-choose .wc-item h3{ min-height:0; }
}