/* Shared responsive imagery for the three service pages. */
.page-hero{
  min-height:780px;
  isolation:isolate;
}

.page-hero.page-hero > figure.service-hero-image.service-hero-image{
  position:absolute!important;
  z-index:0!important;
  inset:0 0 0 34%;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}

.service-hero-image picture,
.service-hero-image img{
  display:block;
  width:100%;
  height:100%;
}

.service-hero-image img{
  object-fit:cover;
  object-position:58% center;
}

.service-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#0a0a0a 0%,rgba(10,10,10,.96) 8%,rgba(10,10,10,.62) 34%,rgba(10,10,10,.12) 68%,rgba(10,10,10,.03) 100%),
    linear-gradient(0deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.2) 38%,transparent 65%);
}

.page-hero > .service-tag,
.page-hero > h1,
.page-hero > .hero-bottom-grid{
  position:relative;
  z-index:2;
}

.page-hero .hero-intro{
  color:rgba(244,241,234,.72);
}

.page-hero .hero-meta-box{
  background:rgba(10,10,10,.74);
  border-color:rgba(244,241,234,.2);
  backdrop-filter:blur(14px);
}

.page-hero .hero-meta-box .meta-row{
  gap:24px;
}

.page-hero .hero-meta-box .meta-row .k{
  flex:0 0 auto;
}

.page-hero .hero-meta-box .meta-row .v{
  min-width:0;
  text-align:right;
  line-height:1.35;
}

.service-feature-visual{
  position:relative;
  width:calc(100% - 80px);
  max-width:1280px;
  aspect-ratio:16 / 9;
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
}

.service-feature-visual picture,
.service-feature-visual img{
  display:block;
  width:100%;
  height:100%;
}

.service-feature-visual img{
  object-fit:cover;
  object-position:center;
}

.service-feature-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.2) 34%,transparent 58%);
}

.service-feature-visual figcaption{
  position:absolute;
  z-index:2;
  left:clamp(22px,4vw,56px);
  right:clamp(22px,4vw,56px);
  bottom:clamp(20px,3.5vw,46px);
  display:grid;
  grid-template-columns:minmax(180px,.55fr) minmax(280px,1fr);
  gap:40px;
  align-items:end;
}

.service-feature-visual figcaption span{
  font-family:var(--mono);
  font-size:10px;
  line-height:1.5;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}

.service-feature-visual figcaption strong{
  max-width:720px;
  font-family:var(--serif);
  font-size:clamp(23px,2.7vw,38px);
  font-weight:300;
  line-height:1.12;
  letter-spacing:0;
  color:var(--ink);
}

.seo-reading{
  padding:92px 40px;
  border-top:1px solid var(--line);
  background:#0d0d0d;
}

.seo-reading-head{
  display:grid;
  grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr);
  gap:50px;
  align-items:start;
  margin-bottom:48px;
}

.seo-reading-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.seo-reading h2{
  max-width:900px;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(42px,5.5vw,78px);
  font-weight:300;
  line-height:1;
  letter-spacing:0;
}

.seo-reading h2 i{
  color:var(--accent);
  font-weight:300;
}

.seo-reading-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.seo-reading-card{
  min-height:250px;
  display:flex;
  flex-direction:column;
  padding:24px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  transition:background .2s;
}

.seo-reading-card:hover{
  background:#161616;
}

.seo-reading-card span{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.seo-reading-card strong{
  margin:auto 0 14px;
  font-family:var(--serif);
  font-size:clamp(24px,2.3vw,34px);
  font-weight:350;
  line-height:1.08;
}

.seo-reading-card p{
  margin:0;
  color:var(--ink-dim);
  font-size:14px;
  line-height:1.55;
}

@media(max-width:960px){
  .page-hero{
    min-height:720px;
  }

  .page-hero.page-hero > figure.service-hero-image.service-hero-image{
    inset:0 0 0 18%;
  }

  .service-hero-image::after{
    background:
      linear-gradient(90deg,#0a0a0a 0%,rgba(10,10,10,.9) 15%,rgba(10,10,10,.42) 54%,rgba(10,10,10,.08) 100%),
      linear-gradient(0deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.42) 48%,transparent 76%);
  }

  .service-feature-visual{
    width:calc(100% - 40px);
    margin-bottom:0;
  }

  .seo-reading-grid{
    grid-template-columns:1fr;
  }

  .seo-reading-card{
    min-height:210px;
  }
}

@media(max-width:650px){
  .page-hero{
    min-height:805px;
    padding-top:96px!important;
    padding-bottom:36px!important;
  }

  .page-hero.page-hero > figure.service-hero-image.service-hero-image{
    inset:0 0 42% 0;
  }

  .service-hero-image img{
    object-position:66% center;
  }

  .service-hero-image::after{
    background:
      linear-gradient(0deg,#0a0a0a 0%,rgba(10,10,10,.88) 28%,rgba(10,10,10,.18) 72%),
      linear-gradient(90deg,rgba(10,10,10,.5),transparent 65%);
  }

  .page-hero .service-tag{
    margin-top:270px;
    margin-bottom:18px!important;
  }

  .page-hero h1{
    font-size:clamp(45px,13.4vw,58px)!important;
    line-height:.91!important;
    margin-bottom:24px!important;
  }

  .page-hero .hero-bottom-grid{
    gap:20px!important;
  }

  .page-hero .hero-intro{
    font-size:15px;
    line-height:1.5;
  }

  .page-hero .hero-meta-box{
    display:none;
  }

  .service-feature-visual{
    width:100%;
    aspect-ratio:auto;
    margin-bottom:0;
    border-left:0;
    border-right:0;
  }

  .service-feature-visual picture{
    height:auto;
    aspect-ratio:16 / 9;
  }

  .service-feature-visual img{
    object-fit:cover;
    object-position:center;
  }

  .service-feature-visual::after{
    display:none;
  }

  .service-feature-visual figcaption{
    position:static;
    grid-template-columns:1fr;
    gap:12px;
    padding:20px;
    background:#080808;
  }

  .service-feature-visual figcaption strong{
    font-size:24px;
  }

  .seo-reading{
    padding:72px 20px;
  }

  .seo-reading-head{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:34px;
  }

  .seo-reading h2{
    font-size:43px;
  }
}