/* Shared editorial hero for the five main expertise pages. */
.service-page .page-shell::before,
.service-page .page-shell > .site-header::before{
  content:"";
}

.service-page .page-shell::before{
  width:min(25vw,330px);
  height:clamp(590px,72svh,720px);
  opacity:.13;
}

.service-page .page-shell > .site-header::before{
  width:min(25vw,330px);
  background-size:auto clamp(590px,72svh,720px);
  opacity:.13;
}

.service-page .service-hero{
  position:relative;
  z-index:1;
  padding:0;
  background:transparent;
}

.service-page .service-hero-layout,
.service-page .work-hero .service-hero-layout,
.service-page .orientation-hero .service-hero-layout,
.service-page .tests-hero .service-hero-layout,
.service-page .legal-hero .service-hero-layout{
  display:grid;
  width:calc(100% - max(var(--gutter), (100vw - var(--container)) / 2));
  max-width:none;
  min-height:clamp(480px,58svh,610px);
  margin:0 0 0 max(var(--gutter), (100vw - var(--container)) / 2);
  grid-template-columns:minmax(0,1.02fr) minmax(480px,.98fr);
  align-items:stretch;
  gap:0;
}

.service-page .service-hero-copy,
.service-page .work-hero .service-hero-copy,
.service-page .orientation-hero .service-hero-copy,
.service-page .tests-hero .service-hero-copy,
.service-page .legal-hero .service-hero-copy{
  display:flex;
  max-width:700px;
  flex-direction:column;
  justify-content:center;
  padding:clamp(3.2rem,5vw,5.5rem) clamp(3rem,6vw,6rem) clamp(3.2rem,5vw,5.5rem) 0;
}

.service-page .service-hero-copy h1,
.service-page .work-hero .service-hero-copy h1,
.service-page .orientation-hero .service-hero-copy h1,
.service-page .tests-hero .service-hero-copy h1,
.service-page .legal-hero .service-hero-copy h1{
  max-width:680px;
  font-size:clamp(3.15rem,4.15vw,4.3rem);
  line-height:1.02;
}

.service-page .service-hero-photo{
  position:relative;
  min-height:0;
  margin:0;
  overflow:hidden;
  border-radius:0;
}

.service-page .service-hero-photo::before{
  position:absolute;
  z-index:1;
  inset:0 auto 0 0;
  width:26%;
  content:"";
  background:linear-gradient(90deg,var(--cream) 0%,rgba(249,247,241,.82) 24%,rgba(249,247,241,.34) 62%,rgba(249,247,241,0) 100%);
  pointer-events:none;
}

.service-page .service-hero-photo img{
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
}

@media(max-width:1024px){
  .service-page .service-hero-layout,
  .service-page .work-hero .service-hero-layout,
  .service-page .orientation-hero .service-hero-layout,
  .service-page .tests-hero .service-hero-layout,
  .service-page .legal-hero .service-hero-layout{
    grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
  }

  .service-page .service-hero-copy,
  .service-page .work-hero .service-hero-copy,
  .service-page .orientation-hero .service-hero-copy,
  .service-page .tests-hero .service-hero-copy,
  .service-page .legal-hero .service-hero-copy{
    padding-right:clamp(2rem,4vw,3.5rem);
  }

  .service-page .service-hero-copy h1,
  .service-page .work-hero .service-hero-copy h1,
  .service-page .orientation-hero .service-hero-copy h1,
  .service-page .tests-hero .service-hero-copy h1,
  .service-page .legal-hero .service-hero-copy h1{
    font-size:clamp(3rem,5.5vw,3.8rem);
  }
}

@media(max-width:820px){
  .service-page .page-shell::before{
    left:-36px;
    width:220px;
    height:520px;
    opacity:.09;
  }

  .service-page .page-shell > .site-header::before{
    left:-36px;
    width:220px;
    background-size:auto 520px;
    opacity:.09;
  }

  .service-page .service-hero-layout,
  .service-page .work-hero .service-hero-layout,
  .service-page .orientation-hero .service-hero-layout,
  .service-page .tests-hero .service-hero-layout,
  .service-page .legal-hero .service-hero-layout{
    width:100%;
    min-height:0;
    margin:0;
    grid-template-columns:1fr;
  }

  .service-page .service-hero-copy,
  .service-page .work-hero .service-hero-copy,
  .service-page .orientation-hero .service-hero-copy,
  .service-page .tests-hero .service-hero-copy,
  .service-page .legal-hero .service-hero-copy{
    width:min(calc(100% - (2 * var(--gutter))),var(--container));
    max-width:none;
    margin-inline:auto;
    padding:3.4rem 0 3rem;
  }

  .service-page .service-hero-photo{
    height:clamp(340px,52vw,430px);
  }

  .service-page .service-hero-photo::before{
    inset:0 0 auto;
    width:auto;
    height:20%;
    background:linear-gradient(180deg,var(--cream) 0%,rgba(249,247,241,.68) 34%,rgba(249,247,241,0) 100%);
  }
}

@media(max-width:520px){
  .service-page .page-shell::before{
    left:-40px;
    width:185px;
    height:460px;
    opacity:.075;
  }

  .service-page .page-shell > .site-header::before{
    left:-40px;
    width:185px;
    background-size:auto 460px;
    opacity:.075;
  }

  .service-page .service-hero-copy,
  .service-page .work-hero .service-hero-copy,
  .service-page .orientation-hero .service-hero-copy,
  .service-page .tests-hero .service-hero-copy,
  .service-page .legal-hero .service-hero-copy{
    padding:2.65rem 0 2.4rem;
  }

  .service-page .service-hero-copy h1,
  .service-page .work-hero .service-hero-copy h1,
  .service-page .orientation-hero .service-hero-copy h1,
  .service-page .tests-hero .service-hero-copy h1,
  .service-page .legal-hero .service-hero-copy h1{
    max-width:23rem;
    font-size:clamp(2.42rem,10.8vw,2.9rem);
    line-height:1.02;
  }

  .service-page .service-hero-photo{
    height:300px;
  }
}