/* Services page: the index under the hero and the eight service panels, which
   slide in as they come into view and back out once they have left.

   Panels are visible by default. The hidden starting state only applies once
   services.js has put services-motion on <html>, and only for visitors who have
   not asked for reduced motion, so nobody is left looking at an empty page. */

/* ---------- index under the hero ---------- */
.service-index{display:grid;grid-template-columns:repeat(2, minmax(0, 320px));gap:40px;margin-top:44px;}
.service-index div{display:grid;gap:10px;align-content:start;}
.service-index a{font-size:12.6px;color:var(--text-soft);transition:color var(--t) var(--ease-out);}
.service-index .service-index-group{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line-strong);font-size:var(--fs-h4);font-weight:200;letter-spacing:-0.02em;color:var(--text);}

/* ---------- service panels ---------- */
/* Clipped at the section, which spans the screen, so a sliding panel is never cut
   at the content edge. clip, not hidden: hidden would make the section a scroll
   container and upset anchor links. */
.service-group{overflow-x:clip;}
.service-panels h3{font-size:clamp(19px, 1vw + 13px, 26.6px);font-weight:200;letter-spacing:-0.02em;line-height:1.15;}
.service-panels .includes{margin:24px 0 0;font-size:var(--fs-title);font-weight:600;color:var(--text);}
.service-panels .fit-list{margin-top:12px;gap:10px;font-size:12px;}

/* For a photo whose subject sits at its right edge: crop from the left instead of both sides. */
.service-panels img.crop-right{object-position:right center;}

/* The arrival ring (below) is an outline set just inside the photo's rounded edge. */
.service-panels .feature-media{outline:2px solid transparent;outline-offset:-2px;}

@media (hover:hover){
  .service-index a:hover{color:var(--text);}
}

@media (max-width:900px){
  .service-index{grid-template-columns:1fr;gap:32px;}
  /* A 44px row per link on touch screens; the rows replace the gap. */
  .service-index div{gap:0;}
  .service-index a{display:flex;align-items:center;min-height:44px;}
}

/* ---------- slide in and out ---------- */
@media (prefers-reduced-motion:no-preference){
  .services-motion .service-panels .feature-media,
  .services-motion .service-panels .feature > div{transition:transform 350ms var(--ease-out), opacity 350ms var(--ease-out);}
  .services-motion .service-panels .feature.is-in .feature-media,
  .services-motion .service-panels .feature.is-in > div{transition-duration:650ms;}
  .services-motion .service-panels .feature.is-in > div{transition-delay:80ms;}

  /* Phones: a short rise, so nothing can slide past the edge of the screen. */
  .services-motion .service-panels .feature:not(.is-in) .feature-media{opacity:0;transform:translateY(24px) scale(1.03);}
  .services-motion .service-panels .feature:not(.is-in) > div{opacity:0;transform:translateY(24px);}

  /* The service a visitor was linked to: a ring that fades over a second and a half. */
  .service-panels .feature.is-target .feature-media{animation:service-arrival 1.6s ease-out;}
  @keyframes service-arrival{
    from{outline-color:var(--accent);}
    to{outline-color:transparent;}
  }
}

/* Two sides: each half slides in from its own side, and the sides swap on every
   other panel, matching the image flip in site.css. */
@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .services-motion .service-panels .feature:not(.is-in) .feature-media{transform:translateX(-40px) scale(1.03);}
  .services-motion .service-panels .feature:not(.is-in) > div{transform:translateX(40px);}
  .services-motion .service-panels .feature:nth-child(even):not(.is-in) .feature-media{transform:translateX(40px) scale(1.03);}
  .services-motion .service-panels .feature:nth-child(even):not(.is-in) > div{transform:translateX(-40px);}
}