/* Homepage services: paper cards on the kraft band. The whole card is the link. */
#services.core-services .wrap{max-width:1160px}
#services.core-services .sh{display:block;max-width:760px;margin-bottom:38px}
#services.core-services .sh h2{margin-bottom:.5em}

.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-card{display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;min-width:0;padding:22px 22px 24px;
  color:var(--c-text);text-decoration:none;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);
  transition:border-color .35s ease,background-color .35s ease}
.service-card:hover{color:var(--c-text);text-decoration:none;border-color:var(--c-accent);background:var(--c-bg)}
.service-card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--c-accent)}
.service-art{display:flex;align-items:center;justify-content:flex-start;min-height:36px;margin:0 0 14px}
.service-scene{display:block;width:54px;height:36px;flex:0 0 54px;overflow:visible;color:var(--c-text);stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service-scene *{vector-effect:non-scaling-stroke}
.service-scene .scene-paper{fill:var(--c-card)}
.service-scene .scene-soft{fill:var(--c-bg-alt)}
.service-scene .scene-denim{stroke:var(--c-accent)}
.service-scene .scene-motion{transform-box:fill-box;transform-origin:center;transition:transform .28s ease,opacity .28s ease}
.service-card:hover .scene-motion,.service-card:focus-visible .scene-motion{transform:translateX(2px) rotate(1deg)}
.js-service-scenes .service-card:not(.is-seen) .scene-motion{opacity:.28;transform:translateY(3px)}
.js-service-scenes .service-card:not(.is-seen) .scene-draw{stroke-dasharray:1;stroke-dashoffset:1}
.js-service-scenes .service-card.is-seen .scene-motion{animation:service-scene-settle .58s ease-out}
.js-service-scenes .service-card.is-seen .scene-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .68s ease-out .08s}
.service-card h3{margin:0 0 8px;font-size:23px;line-height:1.2}
.service-card p{margin:0;color:var(--c-text);font-size:18px;line-height:1.48}
.service-cta{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:44px;margin-top:20px;padding:8px 14px;
  color:var(--c-cta-text);background:var(--c-cta);border:2px solid var(--c-cta);border-radius:var(--radius);
  font-family:var(--f-display);font-size:19px;font-weight:700;line-height:1.2;transition:background-color .28s ease,border-color .28s ease}
.service-card:hover .service-cta,.service-card:focus-visible .service-cta{background:var(--c-cta-hover);border-color:var(--c-cta-hover)}
.service-card:nth-child(7){grid-column:2}

@keyframes service-scene-settle{
  from{opacity:.28;transform:translateY(3px)}
  to{opacity:1;transform:none}
}

@media (max-width:900px){
  .service-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card:nth-child(7){grid-column:1/-1;width:calc(50% - 9px);justify-self:center}
}

@media (max-width:560px){
  #services.core-services .sh{margin-bottom:28px}
  .service-cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .service-card{display:block;padding:20px}
  .service-art{min-height:32px;margin-bottom:12px}
  .service-scene{width:48px;height:32px;flex-basis:48px}
  .service-card h3{font-size:22px}
  .service-card p{font-size:18px}
  .service-card:nth-child(7){grid-column:auto;width:auto;justify-self:stretch}
}

@media (prefers-reduced-motion:reduce){
  .service-card,.service-scene .scene-motion,.js-service-scenes .service-card.is-seen .scene-motion,
  .js-service-scenes .service-card.is-seen .scene-draw{animation:none;transition:none}
  .service-card .scene-motion,.service-card:hover .scene-motion,.service-card:focus-visible .scene-motion{opacity:1;transform:none}
  .service-card .scene-draw{stroke-dasharray:1;stroke-dashoffset:0}
}
