/* Services page — extends the shared quiet-luxury design system */

.services-hero {
  background: var(--deep);
  color: var(--white);
  min-height: 86svh;
  overflow: hidden;
  position: relative;
}

.services-hero__image,
.services-hero__media,
.services-hero__shade {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.services-hero__image {
  animation: hero-reveal 1.4s cubic-bezier(.2,.8,.2,1) both;
  object-fit: cover;
  object-position: center;
}
.services-hero__media { display: block; }
.services-hero__media .services-hero__image { position: static; }

body.page-template-service-details .interior-hero__media {
  display: block;
  inset: 0;
  position: absolute;
}
body.page-template-service-details .interior-hero__media .interior-hero__image { position: static; }

.services-hero__shade {
  background:
    linear-gradient(90deg,rgba(8,13,12,.82) 0%,rgba(8,13,12,.2) 65%,rgba(8,13,12,.38) 100%),
    linear-gradient(0deg,rgba(8,13,12,.78),transparent 64%);
}

.services-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 86svh;
  padding-bottom: clamp(70px,9vw,135px);
  padding-top: 120px;
  position: relative;
  z-index: 2;
}

.services-hero__content h1 {
  font-size: clamp(3.8rem,5.7vw,6.8rem);
  line-height: .78;
  max-width: 1200px;
}

.services-hero__content p {
  color: #e1e1dc;
  font-size: clamp(1rem,1.45vw,1.3rem);
  line-height: 1.85;
  margin-top: 42px;
  max-width: 760px;
}

.services-hero__content .hero-cta {
  align-self: flex-start;
  margin-top: 42px;
  width: fit-content;
}
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Overview */
.services-overview {
  align-items: end;
  display: grid;
  gap: clamp(50px,9vw,150px);
  grid-template-columns: 1fr 1fr;
}

.services-overview h2 { font-size: clamp(3.8rem,6.5vw,7.5rem); }
.services-overview p { color: #4b504e; font-size: clamp(1rem,1.3vw,1.22rem); line-height: 1.9; max-width: 700px; }

/* Service detail introductions retain their original ACF copy while sharing
   the same measured, editorial spacing as the redesigned service hubs. */
.service-intro {
  align-items: end;
  display: grid;
  gap: clamp(50px,9vw,150px);
  grid-template-columns: 1fr 1fr;
}
.service-intro h2 {
  font-size: clamp(3.8rem,6.5vw,7.5rem);
  max-width: 760px;
}
.service-intro__copy,
.service-editorial__copy {
  color: #4b504e;
  font-size: clamp(1rem,1.3vw,1.22rem);
  line-height: 1.9;
}
.service-intro__copy { max-width: 700px; }
.service-editorial {
  border-top: 1px solid rgba(25,32,30,.18);
  padding-top: clamp(64px,7vw,112px);
}
.service-editorial__copy {
  margin-inline: auto;
  max-width: 980px;
}
.service-editorial__copy > * + * { margin-top: 1.25em; }

/* Service details */
.service-details { background: var(--white); }
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(580px,48vw,760px);
}

.service-detail__image {
  background: #d8d3c9;
  display: block;
  min-height: 100%;
  overflow: hidden;
}

.service-detail__image img {
  height: 100%;
  object-fit: cover;
  object-position: var(--service-image-position, center);
  transition: transform 800ms cubic-bezier(.2,.8,.2,1);
  width: 100%;
}

.service-detail__image:hover img,
.service-detail__image:focus-visible img { transform: scale(1.025); }

.service-detail__copy {
  align-items: flex-start;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px,8vw,130px);
}

.service-detail--reverse .service-detail__image { grid-column: 2; }
.service-detail--reverse .service-detail__copy { background: #ebe5da; grid-column: 1; grid-row: 1; }
.service-detail:first-child .service-detail__copy,
.service-detail:last-child .service-detail__copy { background: var(--forest); color: var(--white); }
.service-detail:first-child .service-detail__copy p,
.service-detail:last-child .service-detail__copy p { color: #ced0ca; }
.service-detail:first-child .arrow-link,
.service-detail:last-child .arrow-link { border-color: rgba(255,255,255,.35); }

.service-detail__number {
  color: var(--brass);
  font-family: var(--serif);
  font-size: 1rem;
}

.service-detail__copy h2 {
  font-size: clamp(3.3rem,5.2vw,6.4rem);
  margin: 28px 0 32px;
  max-width: 740px;
}

.service-detail__copy p {
  color: #555a57;
  font-size: 1.04rem;
  line-height: 1.85;
  max-width: 650px;
}

.service-detail__copy .arrow-link { margin-top: 38px; }
.service-detail--no-image { grid-template-columns: 1fr; min-height: 0; }
.service-detail--no-image .service-detail__copy {
  min-height: clamp(460px,38vw,620px);
  padding-inline: max(32px,calc((100vw - 1440px)/2));
}

.services-reviews { background: #e7dfd3; }
.services-awards { grid-template-columns: repeat(6,1fr); }

@media (max-width: 1080px) {
  .service-detail { min-height: 610px; }
  .service-detail__copy { padding: clamp(44px,6vw,74px); }
  .services-awards { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 760px) {
  .services-hero { min-height: 90svh; }
  .services-hero__content { min-height: 90svh; padding-bottom: 64px; padding-top: 92px; }
  .services-hero__content h1 { font-size: clamp(3.2rem,12.5vw,4.6rem); }
  .services-hero__content p { margin-top: 30px; }
  .services-overview { align-items: start; grid-template-columns: 1fr; }
  .service-intro { align-items: start; grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; min-height: 0; }
  .service-detail__image,
  .service-detail--reverse .service-detail__image { grid-column: 1; grid-row: 1; height: 72vw; min-height: 360px; }
  .service-detail__copy,
  .service-detail--reverse .service-detail__copy { grid-column: 1; grid-row: 2; padding: 66px 28px; }
  .service-detail__copy h2 { font-size: clamp(3rem,14vw,4.9rem); }
  .services-awards { grid-template-columns: repeat(2,1fr); }
}