/* ============================================================
   Riben Hopper Pte Ltd — Services page
   Loaded AFTER style.css + about.css (reuses .page-banner, .contact).
   ============================================================ */

/* ============================================================
   BANNER + INTRO (single section, gradient bg — same pattern as About/Products)
   ============================================================ */
.svc-intro{ padding-block:var(--page-header-offset) clamp(36px,5vw,64px); }
.svc-intro .grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,80px);
  align-items:center; text-align:left; margin-top:clamp(24px,4vw,44px);
}
.svc-intro h2{ font-weight:700; line-height:1.12; letter-spacing:-.01em;
  font-size:clamp(2rem,4.4vw,3.4rem); max-width:13ch; }
.svc-intro p{ color:#56606e; margin-top:1.3rem; line-height:1.5; font-size:17px; }
.svc-intro p + p{ margin-top:1.1rem; }
.svc-intro .media .ph{ width:100%; aspect-ratio:16/10; border-radius:12px; }

/* ============================================================
   FULL-BLEED SPLIT ROWS (Management / Installation / Sole Distributor)
   ============================================================ */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.svc-row .svc-media{ min-height:clamp(380px,40vw,560px); }
.svc-row .svc-media .ph{ width:100%; height:100%; }
.svc-row .svc-media.duo{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.svc-row .svc-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(48px,6vw,96px) clamp(28px,5vw,80px);
}
.svc-row .svc-copy h2{ font-weight:700; line-height:1.1; letter-spacing:-.01em;
  font-size:clamp(2rem,4.4vw,3.4rem); }
.svc-row .svc-copy p{ color:#56606e; margin-top:1.3rem; line-height:1.5; font-size:17px; }
.svc-row .svc-copy p + p{ margin-top:1.1rem; }

/* background variants */
.svc-row.cream .svc-copy{ background:var(--cream); }
.svc-row.dark{ background:var(--navy-deep); }
.svc-row.dark .svc-copy h2{ color:#fff; }
.svc-row.dark .svc-copy p{ color:#c4cad3; }

/* place image on the right */
.svc-row.media-right .svc-media{ order:2; }

/* ============================================================
   WHY WORK WITH (red band)
   ============================================================ */
.why-work{ position:relative; overflow:hidden; color:#fff; text-align:center;
  background-color:var(--red-prod-a);
  background-image:linear-gradient(135deg,var(--red-prod-a),var(--red-prod-b));
  background-position:center;
  background-size:cover; }
.why-work::before{ content:'R'; position:absolute; right:6%; top:50%;
  transform:translateY(-50%); font-size:28rem; line-height:.7; font-weight:800;
  color:rgba(255,255,255,.05); pointer-events:none; }
.why-work .wrap{ position:relative; z-index:1; }
.why-work h2{ color:#fff; max-width:16ch; margin-inline:auto; }
.why-work .grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3vw,48px); margin-top:clamp(40px,5vw,64px); text-align:left; }
.why-work .ww-ic{ width:46px; height:46px; color:#fff; margin-bottom:1.1rem; }
.why-work .ww-ic .icon{ width:100%; height:100%; stroke-width:1.4; }
.why-work .ww-ic img,
.proc-ic img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.why-work h3{ font-size:1.2rem; font-weight:700; line-height:1.25; }
.why-work .grid p{ color:rgba(255,255,255,.82); margin-top:.7rem;
  font-size:17px; line-height:1.5; }

/* ============================================================
   OUR WORKING PROCESS
   ============================================================ */
.process{ text-align:center; background:#fff; }
.process .grid{ display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,26px); margin-top:clamp(40px,5vw,64px); text-align:left; }
.proc-card{ position:relative; overflow:visible; background:var(--cream);
  border:1px solid rgba(0,0,0,.05); border-radius:14px;
  padding:clamp(22px,2.2vw,30px); }
.proc-card .ghost{ position:absolute; top:.2rem; right:1rem; font-size:3.6rem;
  font-weight:800; color:rgba(0,0,0,.07); line-height:1; }
.proc-step-mark{
  position:absolute; left:-10px; top:50%; transform:translate(-50%,-50%);
  width:36px; height:14px; display:grid; place-items:center; z-index:5;
}
.proc-step-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.proc-ic{ width:40px; height:40px; color:var(--red); margin-bottom:1.4rem; }
.proc-ic .icon{ width:100%; height:100%; stroke-width:1.5; }
.proc-card h3{ font-size:1.25rem; font-weight:700; }
.proc-card p{ color:#56606e; margin-top:.55rem; font-size:17px; line-height:1.5; }

/* ============================================================
   SPEAK WITH OUR TEAM
   ============================================================ */
.services-contact{
  background-position:center right;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  isolation:isolate;
}

.services-contact .inner{ position:relative; z-index:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .svc-intro .grid{ grid-template-columns:1fr; max-width:620px; }
  .svc-row{ grid-template-columns:1fr; }
  .svc-row.media-right .svc-media{ order:-1; }
  .svc-row .svc-media{ min-height:320px; }
  .why-work .grid{ grid-template-columns:repeat(2,1fr); row-gap:38px; }
  .process .grid{ grid-template-columns:repeat(2,1fr); }
  .proc-step-mark{ display:none; }
  .services-contact::before{
  content:''; position:absolute; inset:0;
      background: rgb(203 203 203 / 50%);
  z-index:0;
}
}
@media (max-width:560px){
  .why-work .grid, .process .grid, .svc-intro .media .ph{ }
  .why-work .grid, .process .grid{ grid-template-columns:1fr; }
  .svc-row .svc-media.duo{ grid-template-columns:1fr 1fr; }
}