/* ── Service page layout (PC-first) ── */

/* Hero — centered on all screens */
.service-page .page-hero{
  text-align:center !important;
}
.service-page .page-hero > div{
  position:relative;
  max-width:800px;
  margin:0 auto !important;
  text-align:center !important;
}
.service-page .page-hero h1{
  margin-left:auto !important;
  margin-right:auto !important;
}
.service-page .page-hero .hero-lead{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* SNS channel cards — 3 columns × 2 rows on PC */
.service-page .svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.service-page .svc-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  height:100%;
  min-height:320px;
  background:#131316;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:36px 28px;
  gap:18px;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.service-page .svc-card:hover{
  background:#17171b;
  border-color:rgba(255,212,0,.28);
  transform:translateY(-3px);
}
.service-page .svc-card__logo{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:72px !important;
  height:72px !important;
  padding:14px !important;
}
.service-page .svc-card__title{
  margin:0;
  width:100%;
  font-size:24px;
  font-weight:700;
  color:#fff;
  line-height:1.3;
}
.service-page .svc-card__sub{
  display:block;
  margin-top:8px;
  font-size:15px;
  font-weight:500;
  color:#9a9aa0;
}
.service-page .svc-card__desc{
  margin:0;
  font-size:16px;
  line-height:1.75;
  color:#b8b8bd;
  word-break:keep-all;
}
.service-page .svc-card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:auto;
  padding-top:4px;
}
.service-page .svc-card__tags span{
  font-size:14px;
  color:#d4d4d8;
  background:#1c1c20;
  border:1px solid rgba(255,255,255,.08);
  padding:7px 14px;
  border-radius:100px;
  white-space:nowrap;
}

/* WHAT YOU GET — 3×2 on PC */
.service-page .deliverables .inner-pad{
  text-align:center;
}
.service-page .deliverables h2{
  max-width:720px;
  margin-left:auto !important;
  margin-right:auto !important;
}
.service-page .deliverables .grid-3{
  grid-template-columns:repeat(3,1fr) !important;
  gap:20px !important;
}
.service-page .deliverables .grid-3 > div{
  padding:36px 28px !important;
  text-align:center !important;
  border-radius:20px !important;
}
.service-page .deliverables .grid-3 > div > div:nth-child(2){
  font-size:20px !important;
  margin-bottom:12px !important;
}
.service-page .deliverables .grid-3 > div p{
  font-size:16px !important;
  line-height:1.75 !important;
}

@media(max-width:1024px){
  .service-page .svc-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .service-page .deliverables .grid-3{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:768px){
  .service-page .svc-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .service-page .svc-card{min-height:0;padding:32px 24px}
  .service-page .svc-card__title{font-size:22px !important}
  .service-page .svc-card__desc{font-size:17px !important;line-height:1.85 !important}
  .service-page .deliverables .grid-3{
    grid-template-columns:1fr !important;
  }
}