/* CPM 3D — Customer Care page styles (extends home-pop.css, shop-pop.css, story-pop.css) */

/* ===== Care topics ===== */
.care-topics { padding: 64px 0 96px; }
.tcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.tcard {
  background: var(--paper); border: var(--ow) solid var(--ink);
  border-radius: var(--radius-md); box-shadow: 5px 5px 0 var(--ink);
  padding: 30px 32px; display: flex; gap: 22px; align-items: flex-start;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tcard:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.tcard .t-ic {
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  border: var(--ow) solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.tcard:nth-child(1) .t-ic { background: var(--yellow); }
.tcard:nth-child(2) .t-ic { background: var(--red); color: #FFFFFF; }
.tcard:nth-child(3) .t-ic { background: var(--mint); }
.tcard:nth-child(4) .t-ic { background: var(--teal); color: #FFFFFF; }
.tcard h3 { font-size: 22px; margin-bottom: 8px; }
.tcard p { font-size: 14px; font-weight: 500; color: var(--text-soft); line-height: 1.65; }
.tcard p a { color: var(--teal); font-weight: 700; }
.tcard p a:hover { color: var(--red); }
.tcard .btn { margin-top: 14px; font-size: 15px; padding: 11px 22px; }

/* ===== Studio visits (reuses sustain split) ===== */
.visits { padding: 20px 0 110px; }
.hours-pill {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 18px; letter-spacing: 0.03em;
  background: var(--yellow); color: var(--ink); border: var(--ow) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); border-radius: var(--radius-pill); padding: 12px 26px;
  transform: rotate(-1.5deg);
}
.hours-pill .hp-ic { display: inline-flex; }

@media (max-width: 1080px) {
  .tcard-grid { grid-template-columns: 1fr; }
}