.services-section { position: relative; z-index: 2; background: #0d0f0e; color: #fff; padding-top: clamp(56px, 7vw, 104px); }
.services-heading { padding-bottom: 44px; }
.services-heading p { margin: 0 0 18px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #ffffff99; }
.services-heading h2 { margin: 0; color: inherit; font-family: var(--sans); font-size: clamp(30px, 4vw, 54px); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; }
.service-row { position: relative; display: block; isolation: isolate; overflow: hidden; color: #fff; }
/* Rules sit above the photo and remain undimmed when other rows are active. */
.service-row::after, .service-rows::before { content: ''; display: block; height: 1px; background: rgba(255,255,255,.12); }
.service-row::after { position: absolute; inset: auto 0 0; z-index: 3; }
.service-visual { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s ease; }
.service-visual::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.service-visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform .9s ease-out; }
.service-row[data-service="buy"] .service-visual img { object-position: 75% 45%; }
.service-row[data-service="sell"] .service-visual img { object-position: 78% 46%; }
.service-row[data-service="invest"] .service-visual img { object-position: 70% 55%; }
.service-content { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 20px; min-height: clamp(160px, 17.2vw, 260px); transition: opacity .5s ease; }
.service-intro { grid-column: 1 / 5; display: flex; align-items: flex-start; gap: 22px; }
.service-number { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #ffffff80; border-radius: 50%; font-size: 11px; }
.service-description { max-width: 280px; margin: 0; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.service-title { grid-column: 6 / 11; justify-self: start; position: relative; margin: 0 0 10px; font-family: var(--sans); font-size: clamp(72px, 10vw, 160px); font-weight: 400; line-height: 1.1; letter-spacing: -.03em; }
.service-title::after { content: ''; position: absolute; inset: auto 0 -10px; height: 4px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.service-arrow { grid-column: 12; justify-self: end; width: clamp(36px, 5vw, 76px); fill: none; stroke: currentColor; stroke-width: 1; opacity: 0; transform: translateX(-24px); transition: opacity .5s ease .1s, transform .5s ease .1s; }
.service-row:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.service-row:focus-visible .service-visual { opacity: 1; }
.service-row:focus-visible .service-visual img { transform: scale(1); }
.service-row:focus-visible .service-title::after { transform: scaleX(1); transform-origin: left; }
.service-row:focus-visible .service-arrow { opacity: 1; transform: none; }
.service-rows:has(.service-row:focus-visible) .service-row:not(:focus-visible) .service-content { opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .service-row:hover .service-visual { opacity: 1; }
  .service-row:hover .service-visual img { transform: scale(1); }
  .service-row:hover .service-title::after { transform: scaleX(1); transform-origin: left; }
  .service-row:hover .service-arrow { opacity: 1; transform: none; }
  .service-rows:has(.service-row:hover) .service-row:not(:hover):not(:focus-visible) .service-content { opacity: .5; }
}
.services-outro { padding-block: clamp(64px, 9vw, 140px); }
.services-reveal { margin: 0; max-width: 1020px; font-size: clamp(26px, 3.5vw, 48px); line-height: 1.4; letter-spacing: -.025em; font-weight: 400; }
.services-reveal-word { color: rgba(255,255,255,var(--word-alpha, 1)); }
.services-cta { display: inline-flex; gap: 24px; align-items: center; margin-top: 36px; padding: 13px 20px; border: 1px solid var(--cta-fg); border-radius: 999px; background: var(--cta-fg); color: var(--cta-bg); font-size: 14px; font-weight: 600; }
.services-cta.cta-button:is(:hover,:focus-visible) { color: var(--cta-bg); border-color: #e9e9e9; background: #e9e9e9; transform: translateY(-3px); }
@media (max-width: 700px) {
  .service-content { min-height: 260px; padding-block: 28px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 8px; }
  .service-intro { grid-column: 1 / -1; gap: 16px; }
  .service-description { max-width: 280px; }
  .service-title { grid-column: 1 / 11; font-size: clamp(72px, 15vw, 104px); }
  .service-arrow { grid-column: 11 / -1; width: 40px; }
}
@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .service-title::after { transform: scaleX(1); }
  .service-arrow { opacity: 1; transform: none; }
}
/* Touch has no hover: the row closest to the viewport centre reveals its photo. */
@media (hover: none), (pointer: coarse) {
  .service-visual { opacity: 1; }
  .service-visual img { transform: none; }
  .touch-service-ready .service-row:not(.is-touch-active):not(:focus-visible) .service-visual { opacity: 0; }
  .touch-service-ready .service-row:not(.is-touch-active):not(:focus-visible) .service-visual img { transform: scale(1.08); }
  .touch-service-ready .service-row:not(.is-touch-active):not(:focus-visible) .service-title::after { transform: scaleX(0); transform-origin: right; }
  .touch-service-ready .service-row:not(.is-touch-active):not(:focus-visible) .service-arrow { opacity: .65; transform: translateX(-6px); }
  .touch-service-ready .service-row.is-touch-active .service-title::after { transform: scaleX(1); transform-origin: left; }
}
@media (prefers-reduced-motion: reduce) {
  .service-visual img, .service-row .service-arrow { transform: none; }
  .service-title::after { transform: none; opacity: 0; transition: opacity .5s ease; }
  .service-row:hover .service-title::after, .service-row:focus-visible .service-title::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px), (prefers-reduced-motion: reduce) and (hover: none), (prefers-reduced-motion: reduce) and (pointer: coarse) {
  .service-title::after { opacity: 1; }
}