.arc-services { padding: 0 0 var(--arc-section); }
.arc-services__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 56px; }
.arc-services__grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 36px; }
.arc-service { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 530px; padding: 0 20px 19px; border-left: 1px solid #000; }
.arc-service:nth-child(2n) { border-right: 1px solid #000; }
.arc-service__num { position: relative; z-index: 1; font-family: var(--arc-font-serif); font-size: 30px; line-height: 1; color: #231f20; }
.arc-service__title { position: relative; z-index: 1; margin: 16px 0 0; max-width: 693px; font-family: var(--arc-font-serif); font-weight: 400; font-size: clamp(34px, 2.9vw, 56px); line-height: 1.2; letter-spacing: 0; text-transform: uppercase; color: #000; }
.arc-service__title a { color: inherit; text-decoration: none; transition: opacity .25s ease; }
.arc-service__title a:hover { color: inherit; opacity: .6; }
.arc-service__text { position: relative; z-index: 1; margin: 31px 0 0; max-width: 693px; font-family: var(--arc-font-sans); font-size: 16px; line-height: 1.37; color: var(--arc-text-body); }
.arc-service:nth-child(n+3) .arc-service__text { max-width: 421px; }
.arc-service__media { position: relative; margin: auto 0 0; padding-top: 40px; }
.arc-service__media img { display: block; width: 100%; aspect-ratio: 691 / 225; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.arc-service__media::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 70% 70% at 39% 47%, rgba(0, 0, 0, .27) 36%, rgba(0, 0, 0, 0) 100%); }
@media (max-width: 991.98px) {
  .arc-services__grid { grid-template-columns: 1fr; }
  .arc-service { min-height: 0; }
  .arc-service:nth-child(2n) { border-right: 0; }
  .arc-service__media { padding-top: 32px; }
}

/* Hover (Figma smart-animate, .8s ease-in-out): the thumbnail grows to fill the card, regains its colour under a soft
   radial shade, and the copy turns white. Needs container units; older browsers keep the static card. */
@supports (width: 1cqw) {
  /* cqw on the card itself would resolve against the viewport, so the space for the thumbnail is reserved by a child spacer. */
  .arc-service { container-type: inline-size; }
  .arc-service::after { content: ''; display: block; flex: none; margin-top: auto; height: calc(40px + 100cqw * .3256); } /* 100cqw = the card's content box = the thumbnail width */
  .arc-service__media { position: absolute; z-index: 0; margin: 0; padding: 0; overflow: hidden; top: calc(100% - 19px - 100cqw * .3256); right: 20px; bottom: 19px; left: 20px; transition: top .8s ease-in-out, right .8s ease-in-out, bottom .8s ease-in-out, left .8s ease-in-out; }
  .arc-service__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transition: filter .8s ease-in-out; }
  .arc-service__media::after { transition: opacity .8s ease-in-out; }
  .arc-service__num, .arc-service__title, .arc-service__text { transition: color .8s ease-in-out; }
  @media (hover: hover) {
    .arc-service:hover .arc-service__media { top: 0; right: 0; bottom: 0; left: 0; }
    .arc-service:hover .arc-service__media img { filter: grayscale(0) contrast(1.02); }
    .arc-service:hover .arc-service__media::after { opacity: 1; }
    .arc-service:hover .arc-service__num, .arc-service:hover .arc-service__title, .arc-service:hover .arc-service__text { color: #fff; }
  }
  @media (prefers-reduced-motion: reduce) {
    .arc-service__media, .arc-service__media img, .arc-service__media::after, .arc-service__num, .arc-service__title, .arc-service__text { transition: none; }
  }
}