.home-release-20260924-page section.hn-service-spectrum {
  margin: 0;
  padding: 0;
  background: #f6f4ed;
  color: #203529;
  scroll-margin-top: 110px;
}

.hn-service-spectrum__intro {
  padding-top: clamp(76px, 8vw, 130px);
  padding-bottom: clamp(42px, 5vw, 76px);
}

.hn-service-spectrum__title {
  max-width: 980px;
  margin: 0 auto;
  color: #203529;
  font: 400 clamp(44px, 5.2vw, 76px)/1.04 'Forum', serif;
  letter-spacing: -.025em;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
}

.hn-service-spectrum__brush {
  position: relative;
  display: inline-block;
  padding: .06em .17em;
  white-space: nowrap;
  isolation: isolate;
}

.hn-service-spectrum__brush-outline {
  position: absolute;
  z-index: -1;
  top: 25%;
  left: 0;
  width: 100%;
  height: 68%;
  transform: rotate(-1.2deg);
  overflow: visible;
  pointer-events: none;
}

.hn-service-spectrum__brush-outline path {
  fill: none;
  stroke: #d8e1cb;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.hn-service-spectrum__title.next-reveal:not(.is-revealed) .hn-service-spectrum__brush-outline path {
  stroke-dashoffset: 100;
}

.hn-service-spectrum__title.is-revealed .hn-service-spectrum__brush-outline path {
  animation: hn-spectrum-outline-in 1100ms cubic-bezier(.45, .1, .2, 1) 220ms both;
}

@keyframes hn-spectrum-outline-in {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

.hn-service-spectrum__groups { width: 100%; }

.hn-service-spectrum__group {
  --tile-bg: #e8ddcc;
  --tile-alt: #f0e7d8;
  width: 100%;
  min-width: 0;
  padding: clamp(76px, 7vw, 110px) clamp(20px, 5vw, 88px) clamp(84px, 8vw, 124px);
  border-top: 1px solid rgba(32, 53, 41, .13);
  background: #f6f4ed;
  box-sizing: border-box;
}

.hn-service-spectrum__group:nth-child(even) { background: #ecefe8; }
.hn-service-spectrum__group--body { --tile-bg: #d2d0c5; --tile-alt: #dedbd1; }
.hn-service-spectrum__group--figure { --tile-bg: #e5cdbb; --tile-alt: #eedbcb; }
.hn-service-spectrum__group--cosmetology { --tile-bg: #d3d5c3; --tile-alt: #e0e1d1; }
.hn-service-spectrum__group-inner { width: 100%; min-width: 0; }

.hn-service-spectrum__group-heading {
  margin-bottom: clamp(34px, 3.5vw, 50px);
  text-align: center;
}

.hn-service-spectrum__group h3 {
  min-width: 0;
  margin: 0;
  color: #203529;
  font: 400 clamp(42px, 4.5vw, 68px)/.96 'Forum', Georgia, serif;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.hn-service-spectrum__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hn-service-spectrum__group--body .hn-service-spectrum__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hn-service-spectrum__group--figure .hn-service-spectrum__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hn-service-spectrum__tile {
  min-width: 0;
}

.hn-service-spectrum__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: clamp(132px, 12vw, 188px);
  padding: clamp(18px, 2.1vw, 32px);
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--tile-bg);
  color: #263a2c;
  font: 500 clamp(17px, 1.55vw, 23px)/1.2 'Jost', sans-serif;
  box-sizing: border-box;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: transform .25s ease, filter .25s ease;
}

.hn-service-spectrum__link:visited,
.hn-service-spectrum__link:hover,
.hn-service-spectrum__link:focus-visible { color: #263a2c; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .hn-service-spectrum__link:hover {
    position: relative;
    z-index: 1;
    transform: translateY(-2px) scale(1.01);
    filter: brightness(.97);
  }
}

.hn-service-spectrum__link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #566d4d;
  outline-offset: 3px;
}

.hn-service-spectrum__group--body .hn-service-spectrum__link {
  padding: clamp(16px, 1.6vw, 24px);
  font-size: clamp(15px, 1.3vw, 19px);
}

/* Близкие оттенки чередуются по сетке без резкого контраста. */
.hn-service-spectrum__group--face .hn-service-spectrum__tile:nth-child(8n + 1) .hn-service-spectrum__link,
.hn-service-spectrum__group--face .hn-service-spectrum__tile:nth-child(8n + 3) .hn-service-spectrum__link,
.hn-service-spectrum__group--face .hn-service-spectrum__tile:nth-child(8n + 6) .hn-service-spectrum__link,
.hn-service-spectrum__group--face .hn-service-spectrum__tile:nth-child(8n + 8) .hn-service-spectrum__link,
.hn-service-spectrum__group--cosmetology .hn-service-spectrum__tile:nth-child(odd) .hn-service-spectrum__link,
.hn-service-spectrum__group--body .hn-service-spectrum__tile:nth-child(odd) .hn-service-spectrum__link,
.hn-service-spectrum__group--figure .hn-service-spectrum__tile:nth-child(odd) .hn-service-spectrum__link {
  background: var(--tile-alt);
}

@media (max-width: 1100px) {
  .hn-service-spectrum__tiles,
  .hn-service-spectrum__group--body .hn-service-spectrum__tiles,
  .hn-service-spectrum__group--figure .hn-service-spectrum__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hn-service-spectrum__link { min-height: 140px; }

  .hn-service-spectrum__group .hn-service-spectrum__tile:nth-child(n) .hn-service-spectrum__link { background: var(--tile-bg); }
  .hn-service-spectrum__group .hn-service-spectrum__tile:nth-child(4n + 1) .hn-service-spectrum__link,
  .hn-service-spectrum__group .hn-service-spectrum__tile:nth-child(4n + 4) .hn-service-spectrum__link { background: var(--tile-alt); }
}

@media (max-width: 620px) {
  .home-release-20260924-page section.hn-service-spectrum { scroll-margin-top: 88px; }
  .hn-service-spectrum__intro { padding-top: 72px; padding-bottom: 34px; }
  .hn-service-spectrum__title { font-size: clamp(30px, 9.2vw, 58px); }
  .hn-service-spectrum__group { padding: 64px 16px 74px; }
  .hn-service-spectrum__group-heading { margin-bottom: 32px; }
  .hn-service-spectrum__group h3 { font-size: clamp(34px, 8vw, 48px); }
  .hn-service-spectrum__tiles { gap: 8px; }
  .hn-service-spectrum__link { min-height: 116px; padding: 14px; border-radius: 18px; font-size: clamp(14px, 3.8vw, 17px); }
  .hn-service-spectrum__group--body .hn-service-spectrum__link { padding: 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-service-spectrum__link { transition: none; }
  .hn-service-spectrum__link:hover { transform: none; }
}

/* Фотографии процедур для всех четырёх направлений. */
:is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(200px, 19vw, 240px);
  background: #544c42;
  color: #fff;
}

:is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 75% 90% at center, rgba(26, 34, 28, .60), rgba(27, 32, 27, .38));
  pointer-events: none;
}

.hn-service-spectrum__group--body .hn-service-spectrum__link::after {
  background: radial-gradient(ellipse 75% 90% at center, rgba(28, 43, 43, .64), rgba(34, 47, 47, .40));
}

.hn-service-spectrum__group--figure .hn-service-spectrum__link::after {
  background: radial-gradient(ellipse 75% 90% at center, rgba(59, 38, 35, .66), rgba(62, 46, 41, .42));
}

.hn-service-spectrum__group--cosmetology .hn-service-spectrum__link::after {
  background: radial-gradient(ellipse 75% 90% at center, rgba(37, 49, 40, .64), rgba(39, 49, 40, .39));
}

.hn-service-spectrum__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.18) saturate(.8);
  transition: transform .35s ease;
}

:is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__label {
  position: relative;
  z-index: 2;
}

.hn-service-spectrum__group--cosmetology .hn-service-spectrum__label {
  hyphens: none;
}

:is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link:visited,
:is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link:hover,
:is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link:focus-visible {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  :is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link:hover .hn-service-spectrum__photo {
    transform: scale(1.04);
  }
}

@media (max-width: 1100px) {
  :is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link { min-height: 190px; }
}

@media (max-width: 620px) {
  :is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .hn-service-spectrum__title.is-revealed .hn-service-spectrum__brush-outline path { animation: none; }
  .hn-service-spectrum__photo { transition: none; }
  :is(.hn-service-spectrum__group--face, .hn-service-spectrum__group--body, .hn-service-spectrum__group--figure, .hn-service-spectrum__group--cosmetology) .hn-service-spectrum__link:hover .hn-service-spectrum__photo { transform: none; }
}