/* ============================================================
   SERVICES — MMW-style card grid
   ------------------------------------------------------------
   MMW runs a 3-up grid of white cards, each holding a looping
   Lottie illustration with the service title beneath, on a
   light grey band. Their Lottie JSONs are 200KB+ each.

   We adopt the LAYOUT and the ANIMATION BEHAVIOUR (a looping
   vector illustration that plays when the card scrolls into
   view) but draw our own artwork as lightweight inline SVG
   with CSS/SMIL animation. Same effect, ~2KB instead of
   ~1.4MB, and the art belongs to ETouch.
   ============================================================ */

.svc-band{
  background:var(--mmw-grey-band);
  padding:96px 0 104px;
  position:relative;overflow:hidden;
}
.svc-band__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:40px;align-items:end;
  margin-bottom:56px;
}
.svc-band__head h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.03em;
  color:var(--mmw-heading);margin:0 0 18px;
}
.svc-band__head p{
  font-family:var(--font-body);font-size:18px;line-height:1.72;
  color:var(--mmw-body);margin:0;max-width:520px;
}
.svc-band__cta{
  justify-self:end;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--mmw-black);color:#fff;
  font-family:var(--font-display);font-size:14px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:20px 30px;text-decoration:none;
  transition:background .3s var(--ease),transform .3s var(--ease);
  white-space:nowrap;
}
.svc-band__cta:hover{background:var(--mmw-red);transform:translateY(-2px);}
.svc-band__cta svg{width:15px;height:15px;}

/* ---------- the grid ---------- */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
/* the 7th service spans the full row - 6 cards = 2 clean rows of 3,
   then one wide feature card instead of an orphan in row 3 */
.svc-card--feature{
  grid-column:1/-1;
  flex-direction:row;align-items:center;
  padding:0;
}
.svc-card--feature .svc-card__art{
  width:38%;flex:0 0 38%;aspect-ratio:auto;margin-bottom:0;
  align-self:stretch;min-height:230px;
}
.svc-card--feature .svc-card__art svg{width:56%;}
.svc-card--feature .svc-card__body{
  padding:34px 40px;text-align:left;align-items:flex-start;
}
.svc-card--feature .svc-card__desc{margin-bottom:18px;}
.svc-card--feature .svc-card__link{align-self:flex-start;}

.svc-card{
  position:relative;
  background:var(--mmw-white);
  padding:0 0 34px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  clip-path:inset(0 0 0 0);
}
.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,0,0,.13);
}
.svc-card::before{
  content:'';position:absolute;inset:0 auto auto 0;
  width:100%;height:4px;background:var(--mmw-red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
  z-index:3;
}
.svc-card:hover::before{transform:scaleX(1);}

/* the illustration stage */
.svc-card__art{
  position:relative;
  aspect-ratio:16/11;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 44%, #FFFFFF 0%, #F6F6F6 62%, #EDEDED 100%);
  overflow:hidden;
  margin-bottom:26px;
}
.svc-card__art svg{
  width:66%;height:auto;display:block;
  overflow:visible;
}
/* soft red glow behind the art on hover */
.svc-card__art::after{
  content:'';position:absolute;left:50%;top:50%;
  width:210px;height:210px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.7);
  background:radial-gradient(circle,rgba(237,28,36,.16),transparent 68%);
  opacity:0;transition:opacity .45s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.svc-card:hover .svc-card__art::after{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* the title block */
.svc-card__body{padding:0 30px;text-align:center;flex:1;display:flex;flex-direction:column;}
.svc-card__idx{
  font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.2em;color:var(--mmw-red);margin-bottom:9px;
}
.svc-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:22px;line-height:1.22;letter-spacing:-.015em;
  color:var(--mmw-heading);margin:0 0 12px;
}
.svc-card__desc{
  font-family:var(--font-body);font-size:15.5px;line-height:1.66;
  color:var(--mmw-body);margin:0 0 20px;
}
.svc-card__link{
  margin-top:auto;align-self:center;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--mmw-heading);text-decoration:none;
  border-bottom:2px solid var(--mmw-red);
  padding-bottom:4px;
  transition:color .3s var(--ease),gap .3s var(--ease);
}
.svc-card__link:hover{color:var(--mmw-red);gap:14px;}
.svc-card__link svg{width:13px;height:13px;}

/* ============================================================
   THE ILLUSTRATIONS
   Hand-drawn SVG. Each one loops while its card is on screen
   (the .in class from the reveal observer gates the animation),
   and stops entirely under prefers-reduced-motion.
   ============================================================ */

/* --- shared stroke/fill conventions --- */
.svc-card__art svg [stroke]{stroke-linecap:round;stroke-linejoin:round;}

@keyframes svcFloat   { 0%,100%{transform:translateY(0);}   50%{transform:translateY(-7px);} }
@keyframes svcFloat2  { 0%,100%{transform:translateY(-4px);} 50%{transform:translateY(6px);} }
@keyframes svcSpin    { to{transform:rotate(360deg);} }
@keyframes svcDraw    { to{stroke-dashoffset:0;} }
@keyframes svcPop     { 0%{transform:scale(.4);opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1);opacity:1;} }
@keyframes svcBlink   { 0%,100%{opacity:1;} 50%{opacity:.18;} }
@keyframes svcSlide   { 0%{transform:translateX(0);} 50%{transform:translateX(9px);} }
@keyframes svcType    { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
@keyframes svcBarGrow { 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(.42);} }

.svc-card.in .svc-a{animation:svcFloat 5.5s ease-in-out infinite;}
.svc-card.in .svc-b{animation:svcFloat2 6.5s ease-in-out infinite;}
.svc-card.in .svc-c{animation:svcSpin 14s linear infinite;transform-origin:center;}
.svc-card.in .svc-d{animation:svcDraw 2.6s var(--ease) forwards;}
.svc-card.in .svc-e{animation:svcPop 2.4s var(--ease) both;}
.svc-card.in .svc-f{animation:svcBlink 2.1s ease-in-out infinite;}
.svc-card.in .svc-g{animation:svcSlide 3.2s ease-in-out infinite;}
.svc-card.in .svc-h{animation:svcType 1.6s ease-in-out infinite;}
.svc-card.in .svc-i{animation:svcBarGrow 2.8s ease-in-out infinite;transform-origin:bottom;}
.svc-card.in .svc-j{animation:svcSpin 9s linear infinite;transform-origin:center;}

/* stroke-draw paths need a dash baseline */
.svc-d{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);}
.svc-card.in .svc-d{animation:svcDraw 2.6s var(--ease) forwards;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .svc-band__head{grid-template-columns:1fr;}
  .svc-band__cta{justify-self:start;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .svc-band{padding:68px 0 74px;}
  .svc-grid{grid-template-columns:1fr;gap:20px;}
  .svc-card__art{aspect-ratio:16/9;margin-bottom:20px;}
  .svc-card__body{padding:0 22px;}
  .svc-card__title{font-size:20px;}
}

/* ---------- reduced motion: art holds its pose ---------- */
@media (prefers-reduced-motion:reduce){
  .svc-card.in .svc-a,.svc-card.in .svc-b,.svc-card.in .svc-c,
  .svc-card.in .svc-d,.svc-card.in .svc-e,.svc-card.in .svc-f,
  .svc-card.in .svc-g,.svc-card.in .svc-h,.svc-card.in .svc-i,
  .svc-card.in .svc-j{animation:none !important;}
  .svc-d{stroke-dashoffset:0;}
  .svc-card:hover{transform:none;}
}