/* 1. The first block stays in place, the rest of the page slides over it */
/* The site sets overflow-x: hidden on html and body; that makes body a scroll container and
   switches sticky off. clip cuts horizontal overflow the same way without breaking sticky */
html, body { overflow-x: clip !important; }
.home .hs-wrap { position: sticky; top: 0; z-index: 0; }
.home .hs-wrap.is-covered { visibility: hidden; }
.home .hs-over {
  position: relative;
  z-index: 1;
  /* Starts exactly at the bottom of the screen: the first block fills the whole window */
  margin-top: 0;
  padding-top: 28px;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px rgba(10, 30, 24, .22);}
.home .hs-over > section:first-child { margin-top: 0 !important; }

/* Three navigation columns; progressively collapsible on smaller screens. */
.hp {
  width: min(100% - 64px, 1320px);
  margin: 0 auto 20px;
  padding-block: var(--space-48, 48px) 0;
}
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.home .hp-card { position: relative; min-width: 0; height: auto; padding-inline: var(--space-32, 32px); border-radius: 0 !important; }
.home .hp-card:first-child { padding-left: 0; }
.home .hp-card:last-child { padding-right: 0; }
.home .hp-card + .hp-card { border-left: 1px solid var(--color-border, #E4DED3); }
.hp-face {
  position: relative; display: flex; height: 100%; min-width: 0;
  color: var(--color-text-link, #1E4D41);
  background: transparent; border-radius: 0 !important; box-shadow: none;
}
.hp-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; text-align: left; padding: 0;
}
.home .hp .hp-title {
  margin: 0; color: inherit; text-align: left !important;
  font-family: var(--font-family-heading, "Montserrat", sans-serif);
  font-size: var(--text-h3-size, 26px) !important;
  font-weight: var(--font-weight-display, 300);
  line-height: var(--text-h3-line, 1.23); letter-spacing: -.015em;
  transition: color .2s ease;
}
.hp-more { display: flex; flex: 1; opacity: 1; }
.hp-more > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.home .hp .hp-more p {
  max-width: none; margin: var(--space-16, 16px) 0 var(--space-24, 24px);
  color: var(--color-text-secondary, #626B65);
  font: 400 var(--text-body-size, 16px)/1.5 var(--font-family-body, "Golos Text", sans-serif);
}
.hp-link {
  display: inline-flex; align-items: center; margin-top: auto;
  padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0 !important; background: none; box-shadow: none;
  color: inherit; font: 600 var(--text-body-size, 16px)/1.5 var(--font-family-body, "Golos Text", sans-serif);
  text-decoration: none; cursor: pointer;
}
/* One genuine link and one keyboard stop per item. */
.hp-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hp-card:has(.hp-link:focus-visible) .hp-face { outline: 2px solid var(--color-text-link, #1E4D41); outline-offset: 8px; }
.hp-link:focus-visible { outline: none; }

.home .hp-card:hover .hp-title, .home .hp-card:focus-within .hp-title { color: var(--color-brand-accent, #B3502F); }
@media (max-width: 860px) {
  .hp { padding-block: var(--space-24, 24px) 0; }
  .hp-grid { grid-template-columns: minmax(0, 1fr); }
  .home .hp-card { padding: var(--space-24, 24px) 0; }
  .home .hp-card:first-child { padding-top: 0; }
  .home .hp-card:last-child { padding-bottom: 0; }
  .home .hp-card + .hp-card { border-left: 0; border-top: 1px solid var(--color-border, #E4DED3); }
  .hp-link::after { display: none; }
  .home .hp .hp-more[hidden] { display: none; }
  .home .hp[data-mobile-accordion] .hp-title { width: 100%; }
  .home .hp .hp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
  .home .hp .hp-toggle::after { content: '+'; flex: 0 0 24px; text-align: center; font-size: 24px; font-weight: 400; }
  .home .hp .hp-toggle[aria-expanded="true"]::after { content: '−'; }
  .home .hp .hp-toggle:focus-visible { outline: 2px solid var(--color-text-link, #1E4D41); outline-offset: 4px; }
  .home .hp[data-mobile-accordion] .hp-card { padding-block: 16px; }
  .home .hp[data-mobile-accordion] .hp-card:first-child { padding-top: 0; }
  .home .hp[data-mobile-accordion] .hp-card:last-child { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .hp { width: calc(100% - 32px); }
  .home .hs-over { border-radius: 22px 22px 0 0; padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .hp .hp-title { transition: none !important; }
}

html[data-font="pair"], html[data-font="pair"] body { --font-heading:var(--site-heading-font,"Montserrat",Arial,sans-serif)!important; --hs-weight-title: 300; --hs-weight-label: 300; }
/* Montserrat is wide: slightly tighter tracking keeps headings from looking bulky */
html[data-font="pair"] :is(h1, h2, h3, .hs-stat) { letter-spacing: -.025em !important; }

/* «Клиника на Солянке» was set to 1380 px in the earlier preview; put it on the site grid too */
.home .hs-over > #space { width: min(100% - 64px, 1320px) !important; margin-inline: auto !important; }
@media (max-width: 760px) { .home .hs-over > #space { width: calc(100% - 32px) !important; } }

/* One vertical rhythm for the whole page: the same gap between every two blocks, instead of
   the paddings each block brought from the site (they added up to 140–230 px). The site sets
   these margins through ids with !important, hence :is(#…) to match that specificity */
.home .hs-over { --block-gap: clamp(64px, 6.5vw, 104px); background: #f4f0e7; }
.home .hs-over > :is(#specialists, #reviews, #space, #blog, #events, #faq, .final-cta) { margin-top: var(--block-gap) !important; margin-bottom: 0 !important; }
.home .hs-over > :is(#specialists, #reviews) { padding-top: 0 !important; padding-bottom: 0 !important; background: transparent !important; }
/* the clinic gallery and the FAQ panel draw a little outside their boxes; keep that inside */
.home .hs-over > #space { padding-bottom: 34px !important; }
.home .hs-over > :is(#specialists, #reviews, #space, #blog, #events, #faq, .final-cta):last-child { margin-bottom: var(--block-gap) !important; }
.home #specialists .section-head { margin-bottom: 0; }
@media (max-width: 760px) { .home .hs-over { --block-gap: 56px; } }