/* Soft-touch редизайн секції послуг на головній (вкладки Residential/Commercial).
   Пастельні картки на м'яких кольорових тінях, тонкі іконки, заокруглений Fraunces.
   Таб-механіка лишається на TabsCollection.js (data-js-tabs* + is-active). */

.hs {
  background: #fbfcfb;
  padding-top: clamp(2.75rem, 2rem + 3vw, 5rem);
  padding-bottom: clamp(3rem, 2.2rem + 3vw, 5.5rem);
}
.hs__tabs {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}
.hs__tabs-inner {
  display: inline-flex;
  gap: 5px;
  background: #eef3f0;
  padding: 5px;
  border-radius: 999px;
}
.hs__tab {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(12px, 11.4px + .3vw, 13.5px);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7c8c86;
  padding: 11px 26px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}
.hs__tab:hover { color: #41514b; }
.hs__tab.is-active {
  background: #fff;
  color: #233f39;
  box-shadow: 0 5px 16px rgba(44, 80, 70, .12);
}

.hs__panel { display: none; }
.hs__panel.is-active { display: block; }

.hs__head { text-align: center; max-width: 60ch; margin: 0 auto; }
.hs__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: #23332f;
  margin: 0;
}
.hs__title em { font-style: italic; color: var(--ac); }
.hs__sub {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(14px, 13.4px + .3vw, 16px);
  line-height: 1.7;
  color: #74837d;
  font-weight: 400;
  margin: 16px auto 0;
  max-width: 62ch;
}

.hs__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 12px + .6vw, 20px);
  margin: clamp(2rem, 1.6rem + 1.6vw, 3.25rem) auto 0;
  max-width: 1100px;
}
.hs__card {
  box-sizing: border-box;
  width: 204px;
  background: #fff;
  border-radius: 22px;
  padding: 26px 16px 22px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 30px rgba(var(--shc), .14), 0 2px 7px rgba(20, 35, 30, .04);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.hs__ic {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--icbg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .4s ease, background .4s ease;
}
.hs__ic svg {
  width: 27px; height: 27px;
  fill: none; stroke: var(--ac);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.hs__nm {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #283f39;
  letter-spacing: .005em;
}
.hs__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(var(--shc), .22), 0 5px 12px rgba(20, 35, 30, .06);
}
.hs__card:hover .hs__ic { transform: scale(1.09); background: var(--ichov); }
.hs__card:focus-visible { outline: 3px solid var(--ac); outline-offset: 4px; }

.hs__foot {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 14px + .4vw, 18px);
  color: var(--acd);
  margin: clamp(2rem, 1.6rem + 1.4vw, 3rem) auto 0;
  max-width: 50ch;
}

.hs__panel--mint  { --ac: #4f9e8c; --acd: #2c6456; --icbg: #e7f4ef; --ichov: #dbeee7; --shc: 79,158,140; }
.hs__panel--peach { --ac: #df894c; --acd: #a85f28; --icbg: #fbecdd; --ichov: #f7e1cb; --shc: 223,137,76; }

.hs__panel.is-active .hs__card {
  opacity: 0;
  transform: translateY(16px);
  animation: hsRise .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hs__panel.is-active .hs__card:nth-child(1) { animation-delay: .05s; }
.hs__panel.is-active .hs__card:nth-child(2) { animation-delay: .11s; }
.hs__panel.is-active .hs__card:nth-child(3) { animation-delay: .17s; }
.hs__panel.is-active .hs__card:nth-child(4) { animation-delay: .23s; }
.hs__panel.is-active .hs__card:nth-child(5) { animation-delay: .29s; }
.hs__panel.is-active .hs__card:nth-child(6) { animation-delay: .35s; }
.hs__panel.is-active .hs__card:nth-child(7) { animation-delay: .41s; }
@keyframes hsRise { to { opacity: 1; transform: none; } }

@media (max-width: 30rem) {
  .hs__card { width: calc(50% - 8px); padding: 22px 10px 18px; }
  .hs__tab { padding: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs__panel.is-active .hs__card { opacity: 1; transform: none; animation: none; }
  .hs__card, .hs__ic { transition: none; }
}