/* Scoped to the services section; existing page components are untouched. */
.rk-services {
   --service-green: #0b963f;
   --service-forest: #103c30;
   --service-muted: #52615e;
   padding: 105px 0;
   background: #fcfbf7;
   color: var(--service-forest);
   font-family: 'DM Sans', sans-serif
}

.rk-services-header {
   display: flex;
   justify-content: space-between;  
   align-items: center;
   gap: 40px;
   margin-bottom: 48px
}

.rk-services-eyebrow {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 2.5px;
   color: var(--service-green);
   margin: 0 0 14px
}

.rk-services h2 {
   font-family: Georgia, serif;
   font-weight: 700;
   font-size: clamp(32px, 3.2vw, 45px);
   line-height: 1.12;
   letter-spacing: -1px;
   color: var(--service-forest);
   margin: 0 0 18px
}

.rk-services h2 span {
   color: var(--service-green)
}

.rk-services-intro {
   max-width: 630px;
   font-size: 16px;
   line-height: 1.7;
   margin: 0;
   color: var(--service-muted)
}

.rk-service-link {
   display: inline-flex;
   align-items: center;
   gap: 15px;
   width: fit-content;
   padding: 0 0 8px;
   border-bottom: 1px solid #a8c9ae;
   color: var(--service-forest);
   font-size: 14px;
   font-weight: 700;
   transition: border-color .2s, color .2s
}

.rk-services-all {
   flex-shrink: 0
}

.rk-service-link span {
   display: inline-block;
   transition: transform .25s
}

.rk-service-link:hover {
   color: var(--service-green);
   border-color: var(--service-green)
}

.rk-service-link:hover span,
.rk-service-card:hover .rk-service-link span {
   transform: translateX(5px)
}

.rk-services-all:hover span {
   transform: translate(3px, -3px)
}

.rk-service-card {
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border-radius: 7px;
   background: white;
   border: 1px solid #efefea;
   box-shadow: 0 6px 18px #173b2510
}

.rk-service-photo {
   position: relative;
   aspect-ratio: 508/270;
   overflow: hidden;
   background: #edf2e5
}

/* Display only the approved mockup's photographs. Replace these with standalone
   photography when available; the card copy and interactions are native HTML. */
.rk-service-photo img {
   max-width: none;
   width: 100%;
   height: auto;
   transform-origin: 50% 45%;
   transition: transform 450ms ease
}

.rk-service-photo-corporate img {
   left: -120.7%
}

.rk-service-photo-private img {
   left: -222%
}

.rk-service-card:hover .rk-service-photo img {
   transform: scale(1.03)
}

.rk-service-body {
   padding: 24px 28px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.rk-service-category {
   font-size: 11px;
   letter-spacing: 1.3px;
   font-weight: 700;
   color: var(--service-green);
   margin: 0 0 5px
}

.rk-services h3 {
   font-family: 'Jost', sans-serif;
   color: var(--service-forest);
   font-size: clamp(23px, 1.9vw, 28px);
   font-weight: 600;
   line-height: 1.2;
   margin: 0 0 10px
}

.rk-service-description {
   font-size: 15px;
   line-height: 1.65;
   color: var(--service-muted);
   margin: 0 0 20px
}

.rk-service-body .rk-service-link {
   margin-top: auto
}

.rk-services-secondary {
   margin-top: 8px
}

.rk-service-compact {
   height: 100%;
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 23px 20px;
   background: #fff;
   border-radius: 6px;
   color: var(--service-forest);
   transition: background .2s
}

.rk-service-icon {
   display: grid;
   place-items: center;
   flex-shrink: 0;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #eff5df;
   color: #07823a
}

.rk-service-icon svg {
   width: 35px;
   height: 35px
}

.rk-service-compact h3 {
   font-size: 20px;
   margin-bottom: 7px
}

.rk-service-compact p {
   font-size: 13px;
   line-height: 1.6;
   color: var(--service-muted);
   margin: 0
}

.rk-compact-arrow {
   border-left: 1px solid #e1e6da;
   padding: 15px 0 15px 17px;
   font-size: 23px;
   margin-left: auto;
   transition: transform .25s
}

.rk-service-compact:hover {
   background: #f2f7eb
}

.rk-service-compact:hover .rk-compact-arrow {
   transform: translateX(4px)
}

.rk-services a:focus-visible {
   outline: 3px solid var(--service-green);
   outline-offset: 5px
}

@media(max-width:1199px) {
   .rk-services {
      padding: 80px 0
   }

   .rk-services-header {
      gap: 25px
   }

   .rk-services-intro {
      max-width: 560px
   }

   .rk-service-body {
      padding: 24px
   }
}

@media(max-width:767px) {
   .rk-services {
      padding: 55px 0
   }

   .rk-services .container {
      padding-left: 22px;
      padding-right: 22px
   }

   .rk-services-header {
      display: block;
      margin-bottom: 32px
   }

   .rk-services-all {
      margin-top: 23px
   }

   .rk-services h2 {
      font-size: clamp(30px, 8vw, 40px)
   }

   .rk-services-intro {
      font-size: 15px
   }

   .rk-service-body {
      padding: 22px
   }

   .rk-service-compact {
      padding: 20px 16px;
      gap: 14px
   }

   .rk-service-compact h3 {
      font-size: 19px
   }

   .rk-service-icon {
      width: 54px;
      height: 54px
   }
}

@media(prefers-reduced-motion:reduce) {
   .rk-services * {
      transition: none !important
   }

   .rk-service-card:hover img,
   .rk-services a:hover span {
      transform: none !important
   }
}