/* ============================================================================
   Services overview
   Markup: pages/services.php
   Loaded only on this page (see the route's "css" key in config.php).
   Shared blocks such as buttons, heroes and closing CTAs live in components.css.
   ========================================================================= */

/* Hero */
.rp-hero.rp-hero--services{ padding:clamp(120px,15vw,200px) 0 clamp(130px,16vw,240px); }
.rp-hero--services .rp-hero__title{ letter-spacing:-.005em; }
.rp-hero--services .rp-hero__lead{ max-width:660px; }

/* Service list */
.rp-section.rp-offer{ background:#01132B; padding-block:clamp(80px,9vw,120px) clamp(90px,10vw,130px); }
.rp-offer__intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding-bottom:clamp(36px,4vw,50px);
  margin-bottom:clamp(64px,8vw,96px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rp-offer__title{
  font-size:clamp(2.2rem,4vw,3.1rem);
  font-weight:400;
  line-height:1.16;
  letter-spacing:0;
  color:#fff;
  margin:0;
}
.rp-offer__lead{
  max-width:384px;
  margin:0 0 8px;
  font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.2;
  color:#D1D5DB;
}
.rp-offer__row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:center;
  gap:clamp(36px,8vw,96px);
  scroll-margin-top:110px;
}
.rp-offer__row + .rp-offer__row{ margin-top:clamp(64px,8vw,96px); }
.rp-offer__row--flip .rp-offer__copy{ order:2; }
.rp-offer__tag{
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--rp-gold-bright);
  margin:0 0 20px;
}
.rp-offer__name{
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:0;
  color:#fff;
  margin:0 0 30px;
}
.rp-offer__text{ max-width:540px; font-size:16px; line-height:1.65; color:#8B94A5; margin:0 0 36px; }
.rp-offer__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:500;
  color:var(--rp-gold-bright);
}
.rp-offer__link svg{ width:23px; height:16px; transition:transform .3s var(--rp-ease); }
.rp-offer__link:hover{ color:#F0C55A; }
.rp-offer__link:hover svg{ transform:translateX(4px); }
.rp-figure.rp-offer__figure{ aspect-ratio:530/443; background:#0B1D38; }
.rp-offer__figure img{ width:100%; height:100%; object-fit:cover; filter:brightness(.88); }

/* Start with your challenge */
.rp-section.rp-needs{ background:#F5F2EB; padding-block:clamp(80px,10vw,125px) clamp(56px,6vw,60px); }
.rp-needs__header{ margin-bottom:clamp(48px,6vw,80px); }
.rp-needs__header .rp-eyebrow,
.rp-route__header .rp-eyebrow{
  font-size:14px;
  font-weight:500;
  letter-spacing:.34em;
  color:#6B7280;
  margin-bottom:14px;
}
.rp-needs__header .rp-heading,
.rp-route__header .rp-heading{
  font-size:clamp(1.8rem,2.8vw,2.25rem);
  font-weight:400;
  color:var(--rp-ink-blue);
}
.rp-needs__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.rp-needs__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:0 1 calc((100% - 48px) / 3);
  min-height:383px;
  padding:clamp(28px,3vw,40px);
  background:#fff;
  border:1px solid #D6D6D6;
  transition:border-color .3s var(--rp-ease), box-shadow .3s var(--rp-ease);
}
.rp-needs__card:hover{ border-color:rgba(232,182,62,.6); box-shadow:0 20px 40px -30px rgba(9,29,54,.35); }
.rp-needs__label{
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#6B7280;
  margin:0 0 36px;
}
.rp-needs__title{
  font-size:clamp(1.35rem,2vw,1.65rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:0;
  color:var(--rp-ink-blue);
  margin:0 0 36px;
}
.rp-needs__text{ font-size:16px; line-height:1.5; color:#374151; margin:0 0 32px; max-width:18em; }
.rp-needs__link{
  margin-top:auto;
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--rp-bronze);
}
.rp-needs__link span{ display:inline-block; margin-left:4px; font-size:.85em; transition:transform .3s var(--rp-ease); }
.rp-needs__link:hover{ color:var(--rp-ink-blue); }
.rp-needs__link:hover span{ transform:translateX(4px); }

/* How we work */
.rp-section.rp-route{ background:#F9F8F6; padding-block:clamp(90px,14vw,200px) clamp(90px,13vw,160px); }
.rp-route__header{ margin-bottom:clamp(48px,7vw,90px); }
.rp-route__steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
  max-width:1115px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.rp-route__no{
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--rp-bronze);
  margin:0 0 4px;
}
.rp-route__title{
  font-size:clamp(1.4rem,2vw,1.65rem);
  font-weight:400;
  letter-spacing:0;
  color:var(--rp-ink-blue);
  margin:0 0 20px;
}
.rp-route__text{ font-size:16px; line-height:1.5; color:#374151; margin:0; }


@media (max-width:1024px){
  .rp-needs__card{ flex-basis:calc((100% - 24px) / 2); }
  .rp-route__steps{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:44px; }
}
@media (max-width:760px){
  .rp-offer__intro{ flex-direction:column; align-items:flex-start; }
  .rp-offer__row{ grid-template-columns:1fr; gap:28px; }
  /* Image first, then copy, on every row — flipped ones included. */
  .rp-offer__copy,
  .rp-offer__row--flip .rp-offer__copy{ order:2; }
  .rp-needs__card{ flex-basis:100%; min-height:0; }
  .rp-needs__label,
  .rp-needs__title{ margin-bottom:22px; }
}
@media (max-width:600px){
  .rp-hero.rp-hero--services{ padding:88px 0 96px; }
}
@media (max-width:560px){
  .rp-route__steps{ grid-template-columns:1fr; }
}