.services-page { background: var(--white); color: var(--black); }
.services-page .site-header { position: relative; grid-template-columns: 160px 1fr; background: var(--white); color: var(--black); border-bottom-color: transparent; }
.services-page .site-header.is-scrolled { background: rgba(245,243,239,.94); border-bottom-color: var(--line-light); }
.services-page .primary-nav { background: rgba(255,255,255,.72); border-color: rgba(5,5,5,.08); box-shadow: 0 6px 18px rgba(5,5,5,.08), inset 0 1px 0 rgba(255,255,255,.8); }
.services-page .nav-link { color: rgba(5,5,5,.82); }
.services-page .nav-link:hover { color: var(--black); background: rgba(5,5,5,.06); }
.services-page .nav-link.is-active { color: var(--black); border-color: rgba(5,5,5,.1); background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(5,5,5,.08); }
.services-page .menu-toggle span { background: var(--black); }

.services-main { background: var(--white); color: var(--black); }
.services-hero { min-height: 470px; display: flex; flex-direction: column; align-items: center; padding: clamp(112px, 12vw, 168px) 20px 62px; text-align: center; }
.services-hero h1 { margin: 0; color: var(--black); font-size: clamp(46px, 6.2vw, 94px); font-weight: 500; line-height: .98; letter-spacing: -.075em; }
.services-gradient-line { width: min(370px, 64vw); height: 10px; margin: 25px auto 21px; background: linear-gradient(90deg, var(--cyan) 0%, var(--green) 49%, var(--yellow) 100%); }
.services-hero p { margin: 0; color: var(--black); font-size: clamp(18px, 2vw, 28px); font-weight: 500; letter-spacing: -.04em; }
.services-scroll { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 47px; color: var(--black); font-size: 34px; line-height: .7; transition: transform .25s var(--ease); }
.services-scroll:hover { transform: translateY(4px); }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 38px; padding-bottom: clamp(110px, 12vw, 180px); }
.service-card { position: relative; display: block; min-height: clamp(190px, 19vw, 280px); overflow: hidden; border-radius: 12px; background: var(--black); color: inherit; text-decoration: none; isolation: isolate; }
.service-card::before { position: absolute; z-index: 1; inset: 0; content: ""; background: linear-gradient(180deg, rgba(0,0,0,.02) 35%, rgba(0,0,0,.8) 100%); pointer-events: none; }
.service-card::after { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 12px; content: ""; background: linear-gradient(90deg, var(--yellow) 0%, var(--green) 48%, var(--cyan) 100%); }
.service-card--hero { grid-column: 1 / -1; min-height: clamp(290px, 34vw, 460px); }
.service-card img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), filter .55s var(--ease); }
.service-card h2 { position: absolute; z-index: 2; right: 28px; bottom: 33px; left: 28px; margin: 0; color: var(--pure-white); font-size: clamp(22px, 3.2vw, 54px); font-weight: 600; line-height: 1; letter-spacing: -.06em; text-align: center; }
.service-card:not(.service-card--hero) h2 { font-size: clamp(19px, 2.2vw, 34px); }
.service-card:hover img, .service-card:focus-within img { transform: scale(1.045); filter: saturate(1.08) contrast(1.03); }

@media (max-width: 850px) {
  .services-page .site-header { grid-template-columns: 1fr auto; }
  .services-hero { min-height: 390px; padding-block: 96px 46px; }
  .services-grid { gap: 18px; }
  .service-card { min-height: 190px; }
  .service-card--hero { min-height: 280px; }
}

@media (max-width: 550px) {
  .services-page .site-header { padding: 16px 20px; }
  .services-hero { min-height: 350px; padding: 86px 20px 36px; }
  .services-hero h1 { font-size: clamp(40px, 11vw, 58px); }
  .services-gradient-line { height: 8px; margin-top: 20px; }
  .services-hero p { font-size: 18px; }
  .services-scroll { margin-top: 34px; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 84px; }
  .service-card, .service-card--hero { grid-column: auto; min-height: 210px; }
  .service-card--hero { min-height: 260px; }
  .service-card h2, .service-card:not(.service-card--hero) h2 { right: 18px; bottom: 29px; left: 18px; font-size: 25px; }
  .service-card::after { height: 9px; }
}