.services-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }

    .section-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 8px;
    }

    .section-title {
      font-size: 22px;
      font-weight: 500;
      color: #1a1a1a;
    }

    .service-count {
      font-size: 13px;
      color: #888780;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
    }

    .service-card {
      background: #ffffff;
      border: 0.5px solid rgba(0,0,0,0.12);
      border-radius: 12px;
      padding: 1rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color 0.15s;
    }

    .service-card:hover {
      border-color: rgba(0,0,0,0.25);
    }

    .service-tag {
      display: inline-block;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 99px;
      font-weight: 500;
    }

    .tag-skin   { background: #E1F5EE; color: #085041; }
    .tag-laser  { background: #EEEDFE; color: #3C3489; }
    .tag-hair   { background: #FAEEDA; color: #633806; }
    .tag-brow   { background: #FBEAF0; color: #72243E; }
    .tag-body   { background: #EAF3DE; color: #27500A; }
    .tag-dental { background: #E6F1FB; color: #0C447C; }

    .service-name {
      font-size: 14px;
      font-weight: 500;
      color: #1a1a1a;
      line-height: 1.4;
      flex: 1;
    }

    .service-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
    }

    .service-price {
      font-size: 15px;
      font-weight: 500;
      color: #1a1a1a;
    }

    .service-duration {
      font-size: 12px;
      color: #888780;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .service-duration svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }

    .hidden-card { display: none; }

    .toggle-wrap {
      display: flex;
      justify-content: center;
      margin-top: 1.75rem;
    }

    .toggle-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 500;
      color: #1a1a1a;
      background: transparent;
      border: 0.5px solid rgba(0,0,0,0.25);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.12s;
    }

    .toggle-btn:hover { background: #f1efe8; }

    .toggle-btn svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s;
    }

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