:root {
  --expertise-rail: var(--content-gutter, 11.1vw);
  --expertise-copy: min(46vw, 49rem);
}

/* Areas of Expertise: Banda-style portrait grid contained by the header rule. */
.services-overview-page .expertise-grid-container {
  max-width: none;
  padding-inline: 0;
}

.services-overview-page .expertise-project-grid {
  column-gap: 12.5vw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: start;
  padding: 0 var(--expertise-rail) clamp(7rem, 11vw, 11rem);
  row-gap: clamp(5.5rem, 7.8125vw, 8.5rem);
}

.services-overview-page .expertise-project-grid .service-card-link .page-photo {
  aspect-ratio: 614 / 830;
}

.services-overview-page .expertise-project-grid .service-copy h2 {
  font-family: var(--font-brand);
  font-size: 18px !important;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 27px;
  margin: 0;
  padding-top: 5px;
  text-transform: none;
}

.services-overview-page .service-card-link:hover h2,
.services-overview-page .service-card-link:focus-visible h2 {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

/* Detail heroes begin at the viewport edge, with the existing header overlaid. */
.service-detail-page > .editorial-header {
  background: transparent;
  color: #fff;
}

.service-detail-page > .editorial-header::after {
  background: rgba(255, 255, 255, 0.82);
}

.service-detail-page > .editorial-header.is-on-white {
  background: rgba(255, 255, 255, 0.97);
  color: #000;
}

.service-detail-page > .editorial-header.is-on-white::after {
  background: #575756;
}

.service-detail-main {
  overflow: clip;
  padding-top: 0;
}

.service-detail-hero {
  height: 100svh;
  max-height: 810px;
  min-height: 500px;
}

.service-detail-hero::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 30%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 28%);
}

.service-detail-page .service-scroll-cue {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--albion-utility-font);
  font-size: 12px;
  font-style: normal;
  gap: 0.65rem;
  height: 6.6rem;
  justify-content: flex-start;
  left: 50%;
  letter-spacing: 0.08em;
  line-height: 18px;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.service-detail-page .service-scroll-cue::after {
  animation: expertise-scroll-line 1500ms ease-in-out infinite;
  background: currentColor;
  content: "";
  display: block;
  height: 4.25rem;
  transform: scaleY(1);
  transform-origin: top center;
  width: 1px;
}

@keyframes expertise-scroll-line {
  0% { transform: scaleY(1); transform-origin: top center; }
  50% { transform: scaleY(0); transform-origin: top center; }
  50.1% { transform-origin: bottom center; }
  100% { transform: scaleY(1); transform-origin: bottom center; }
}

/* Albion-style editorial rhythm: title and copy, one landscape, then a pair. */
.service-detail-intro {
  max-width: var(--expertise-copy);
  padding: clamp(6rem, 10.15vw, 10.85rem) 0;
  text-align: left;
}

.service-detail-page .service-back-link {
  font-family: var(--albion-utility-font);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.service-detail-page .service-detail-intro h1 {
  color: var(--service-ink);
  font-family: var(--albion-utility-font);
  font-size: var(--albion-h4-size) !important;
  letter-spacing: normal;
  line-height: 1.3 !important;
  margin: 0 0 1.25rem;
  text-transform: none;
}

.service-detail-page .service-detail-intro p,
.service-detail-page .service-editorial-copy p {
  font-family: var(--font-brand);
  font-size: var(--albion-body-size);
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.32;
  margin: 0 0 1.3em;
}

.service-detail-page .service-detail-intro p:last-child,
.service-detail-page .service-editorial-copy p:last-child {
  margin-bottom: 0;
}

.service-wide-image {
  aspect-ratio: 3 / 2;
  margin: 0 auto clamp(8rem, 13.02vw, 13.9rem);
  width: 77.38vw;
}

.service-image-pair {
  column-gap: 0;
  grid-template-columns: 30.16vw 30.16vw;
  justify-content: space-between;
  padding: 0 11.31vw clamp(8rem, 13.02vw, 13.9rem);
}

.service-image {
  aspect-ratio: 3 / 4;
}

.service-editorial-copy {
  margin: 0 auto;
  max-width: var(--expertise-copy);
  padding: 0 0 clamp(8rem, 13.02vw, 13.9rem);
}

.service-editorial-copy--closing {
  padding-bottom: clamp(7rem, 10vw, 10.5rem);
}

/* The reference transition is a calm opacity change, without image zoom. */
@media (prefers-reduced-motion: no-preference) {
  .service-detail-page.service-page-entering .service-detail-hero picture {
    opacity: 0;
    transform: none;
  }

  .service-detail-page.service-page-entering.service-page-entered .service-detail-hero picture {
    opacity: 1;
    transform: none;
    transition: opacity 700ms cubic-bezier(0.77, 0, 0.175, 1);
  }

  .service-detail-page .unhid-reveal,
  .service-detail-page .unhid-develop {
    opacity: 0;
    transform: none !important;
    transition: opacity 700ms cubic-bezier(0.77, 0, 0.175, 1) !important;
  }

  .service-detail-page .unhid-reveal.is-visible,
  .service-detail-page .unhid-develop.is-visible {
    opacity: 1;
    transform: none !important;
  }

  html.service-route-transition::view-transition-old(root) {
    animation: 350ms cubic-bezier(0.77, 0, 0.175, 1) both trophy-route-out;
  }

  html.service-route-transition::view-transition-new(root) {
    animation: 700ms cubic-bezier(0.77, 0, 0.175, 1) both trophy-route-in;
  }

  html.service-route-transition.service-route-requesting body > .editorial-header {
    transform: translateY(-100%);
    transition: transform 650ms cubic-bezier(0.77, 0, 0.175, 1);
  }
}

@media (max-width: 64rem) {
  :root {
    --expertise-copy: min(76vw, 42rem);
    --expertise-rail: var(--content-gutter, clamp(1.25rem, 3.25vw, 3.75rem));
  }

  .services-overview-page .expertise-project-grid {
    column-gap: clamp(3rem, 8vw, 5rem);
    row-gap: clamp(4.5rem, 8vw, 6rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--expertise-rail);
  }

  .service-image-pair {
    grid-template-columns: 35.5vw 35.5vw;
    padding-inline: var(--expertise-rail);
  }
}

@media (max-width: 47.9375rem) {
  :root {
    --expertise-copy: calc(100vw - 2.5rem);
    --expertise-rail: 1.25rem;
  }

  .services-overview-page .expertise-project-grid {
    grid-template-columns: 1fr;
    padding-inline: var(--expertise-rail);
    row-gap: 4rem;
  }

  .services-overview-page .expertise-project-grid .service-copy h2 {
    font-size: 16px !important;
    line-height: 24px;
  }

  .service-detail-hero {
    height: 100svh;
    max-height: 810px;
    min-height: 500px;
  }

  .service-detail-page .service-scroll-cue {
    height: 5.75rem;
  }

  .service-detail-page .service-scroll-cue::after {
    height: 3.5rem;
  }

  .service-detail-intro {
    padding: 6.5rem 0;
  }

  .service-wide-image {
    aspect-ratio: 4 / 3;
    margin-bottom: 6.5rem;
    width: calc(100vw - 2.5rem);
  }

  .service-image-pair {
    gap: 2.75rem;
    grid-template-columns: 1fr;
    padding: 0 var(--expertise-rail) 6.5rem;
  }

  .service-image,
  .service-image:nth-child(2) {
    aspect-ratio: 3 / 4;
    margin-left: 0;
  }

  .service-editorial-copy {
    padding-bottom: 6.5rem;
  }

  .service-editorial-copy--closing {
    padding-bottom: 6rem;
  }
}

@media (max-width: 23rem) {
  :root {
    --expertise-copy: calc(100vw - 2rem);
    --expertise-rail: 1rem;
  }

  .service-detail-hero {
    min-height: 460px;
  }
}

@media (orientation: landscape) and (max-height: 40rem) {
  .service-detail-hero {
    height: 100svh;
    min-height: 31rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-page .service-scroll-cue::after {
    animation: none;
  }
}

/* Keep the index and every image inside the same header rails. */
.services-overview-page .expertise-heading { padding-inline: var(--expertise-rail); }
.services-overview-page .page-intro { max-width: 100%; padding-inline: 0; }
@media (max-width: 767px) {
 .services-overview-page .service-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem .8rem; }
 .services-overview-page .service-index > span { display: none; }
 .services-overview-page .service-index a { display: flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1.6; padding: .3rem 0; }
}
@media (max-width: 359px) {
 .services-overview-page .service-index { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
 .services-overview-page .service-index a { display: inline-block; white-space: nowrap; line-height: 1.8; }
}

/* Inset detail photography must stay within the shared header margins. */
.service-detail-page .service-wide-image {
  max-width: calc(100% - 2 * var(--content-gutter));
}
@media (max-width: 47.9375rem) {
  .service-detail-page .service-image-pair {
    padding-inline: max(var(--expertise-rail), var(--content-gutter));
  }
}