/* Services page */
body[data-page-title="Services"]{--services-overshoot-right:7px}
.services .hero{margin-top:70px}
.services .hero-frame{position:relative;width:calc(100% + var(--services-overshoot-right));margin-right:calc(-1 * var(--services-overshoot-right));aspect-ratio:var(--services-ar-w)/var(--services-ar-h);overflow:hidden}
.services .hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.services .hero-caption{position:absolute;top:50%;right:100px;transform:translateY(-50%);max-width:min(620px, 68ch);color:var(--color-bg);text-align:right}
.services .hero-caption h1{margin:0 0 8px;font-weight:400;font-size:var(--services-title-size)}
.services .hero-caption h3{color:var(--color-bg)}
.services .hero-caption p{margin:0;font-size:var(--services-text-size);line-height:1.5;opacity:.9;white-space:pre-line}

@media (max-width: 1900px){
  .services .hero-caption{max-width:350px}
}

@media (max-width: 1200px){
  .services .hero{position:static;padding-bottom:0}
  .services .hero-frame{position:relative;overflow:visible;aspect-ratio:auto}
  .services .hero-frame img{position:static;width:calc(100% + var(--services-overshoot-right));margin-right:calc(-1 * var(--services-overshoot-right));height:auto}
  .services .hero-caption{position:static;max-width:calc(100% - 2*var(--site-pad));color:var(--color-text);text-align:left;margin-top:46px;margin-bottom:50px;transform:none}
}

@media (max-width: 620px){
  .services .hero-caption{
    width:calc(100% + var(--services-overshoot-right));
    max-width:none;
    margin-right:calc(-1 * var(--services-overshoot-right));
  }
}

.services.feature{margin-top:70px}
.services .feature-image img{width:100%;height:100%;display:block;object-fit:cover}
.services .feature-content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.services .feature .feature-title{display:block;margin:0 0 24px}
.services .hero-caption .feature-title{display:block;margin:0 0 24px}
.services .feature-title,
.services .stack .item-title{
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size: 29px;
  font-weight: 600;
}
.services .feature-content p,
.services .stack .item-sub{font-size:19px}

.services .stack-section-title{
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size:29px;
  margin:0 0 10px;
  padding:0 var(--site-pad);
  font-weight:700;
}

.services .hero-caption h1{font-size:29px}

.services.center{margin-top:90px; margin-bottom:70px}
.services .center-text{font-size:var(--services-center-size); line-height:1.5; text-align:center; white-space:pre-line; font-family: Garamond, "EB Garamond", Georgia, serif}
.services .case-study-link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.services.stack{margin-top:var(--services-stack-gap);width:calc(100% + var(--services-overshoot-right));margin-right:calc(-1 * var(--services-overshoot-right));display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--services-stack-gap)}
.services .stack-item .item-title{font-size:29px;font-weight:600}
.services.stack .stack-item:nth-child(3) .item-image img{transform:none}

@media (max-width: 1200px){
  .services.stack{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 720px){
  .services.stack{grid-template-columns:1fr}
}

@media (max-width: 480px){
  .services .hero-caption{
    width:min(100%, calc(100vw - 20px));
    max-width:calc(100% - 20px);
    margin:46px auto 50px;
    text-align:center;
  }
  .services .hero-caption h1,
  .services .hero-caption p{ margin-left:auto; margin-right:auto }
  .services .hero-caption p{ width:var(--mobile-text-w); max-width:var(--mobile-text-w); display:block }
  .services.feature .feature-frame{overflow:hidden}
  .services.feature .feature-image{overflow:hidden}
  .services.feature .feature-image img{width:100% !important; height:auto !important; object-fit:cover}
  .services.stack{width:100% !important; margin-left:auto; margin-right:auto}
  .services .stack .item-sub{ width:var(--mobile-text-w); max-width:var(--mobile-text-w); margin-left:auto; margin-right:auto; display:block }
  .services.feature .feature-content{align-items:center; text-align:center; padding-left:0; padding-right:0; display:block}
  .services.feature .feature-title{width:var(--mobile-text-w); max-width:var(--mobile-text-w); margin-left:auto; margin-right:auto; display:block}
  .services.feature .feature-content p{width:var(--mobile-text-w); max-width:var(--mobile-text-w); margin-left:auto; margin-right:auto; display:block}
}