/* source_agent=codex / machine=mac-mini. Keep five complete services; compact only the existing mobile layout. */
#service .service-card h3>.service-title-phrase{display:inline}
@media (max-width:599px){
 #service .section-heading{margin-bottom:28px}
 #service .section-heading>p{margin-top:16px}
 #service .service-grid{gap:28px}
 #service .service-card{grid-template-columns:clamp(80px,24vw,112px) minmax(0,1fr);column-gap:16px;row-gap:0}
 #service .service-card figure{grid-column:1;grid-row:1/3;align-self:start;aspect-ratio:1;margin:0;border-radius:10px}
 #service .service-card figure img{object-position:50% 50%}
 #service .service-card .card-label{grid-column:2;grid-row:1;align-self:end;min-height:0;margin:0 0 4px;font-size:12px;line-height:1.5}
 #service .service-card h3{grid-column:2;grid-row:2;align-self:start;min-height:0;margin:0;font-size:clamp(18px,4.9vw,21px);line-height:1.5;text-wrap:balance}
 #service .service-card h3>.service-title-phrase{display:inline-block}
 #service .service-description{grid-column:1/-1;grid-row:3;line-height:1.75;margin:14px 0}
 #service .service-tools{grid-column:1/-1;font-size:12px;line-height:1.7;margin:0 0 14px}
 #service .service-tools strong{display:inline;margin:0 8px 0 0}
 #service .service-card .service-button{grid-column:1/-1;min-height:44px;margin-top:0;padding:12px 18px;font-size:14px}
}

/* source_agent=codex / machine=mac-mini. Group each complete service in the existing single-column mobile layout. */
@media(max-width:699px){
 #service .service-grid{gap:20px}
 #service .service-card{padding:20px 16px;border:1px solid #d2dff2;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#eef4ff)}
}