@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://fonts.gstatic.com/s/golostext/v7/q5uXsoe9Lv5t7Meb31EcOR9UdVTNs822plVRRQ5c.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("https://fonts.gstatic.com/s/golostext/v7/q5uXsoe9Lv5t7Meb31EcOR9UdVTNs822plVjRQ5c.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("https://fonts.gstatic.com/s/golostext/v7/q5uXsoe9Lv5t7Meb31EcOR9UdVTNs822plWPQg5c.ttf") format("truetype");
}
@font-face {
  font-family: "Golos Text"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("https://fonts.gstatic.com/s/golostext/v7/q5uXsoe9Lv5t7Meb31EcOR9UdVTNs822plW2Qg5c.ttf") format("truetype");
}
.clinic {
  --clinic-design-system-version: "3.0";
  --white: #ffffff;
  --teal: #2eaa9b;
  --teal-ink: #237d73;
  --teal-deep: #216f68;
  --teal-button-end: #248476;
  --bg-page: var(--white);
  --bg-gray: #f7f7f7;
  --bg-mint: #eff8f5;
  --bg-mint-strong: #e3f2ee;
  --bg-header-yellow: #fdfbbe;
  --bg-warm: #fffdee;
  --text-heading: #3e4342;
  --text-body: #4d5452;
  --text-muted: #666d6b;
  --text-section-description: #444c4a;
  --text-card-description: #6b7472;
  --border-soft: #c5ddd7;
  --border-accent: #8bbfb4;
  --border-control: #718c85;
  --error: #b33d3d;
  --success: #246b50;
  --focus: #155f57;

  --font-body: "Golos Text", "Golos", Arial, sans-serif;
  --font-heading: var(--font-body);
  /* Ordinary blocks: intentionally smaller than Hero. rem respects user font settings. */
  --font-h1: clamp(1.75rem, 1.239rem + 2.095vw, 3.125rem);
  --font-h2: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);
  --font-h3: clamp(1.25rem, 1.11rem + .571vw, 1.625rem);
  --font-lead: clamp(1.125rem, 1.032rem + .381vw, 1.375rem);
  --font-text: clamp(1rem, .9536rem + .1905vw, 1.125rem);
  --font-small: clamp(.875rem, .8286rem + .1905vw, 1rem);
  --font-caption: clamp(.75rem, .7036rem + .1905vw, .875rem);
  --font-eyebrow: clamp(.75rem, .7036rem + .1905vw, .875rem);
  --font-description: var(--font-text);
  --font-section-title: var(--font-h2);
  --font-section-description: clamp(17px, calc(15.76px + .318vw), 20px);
  --section-title-leading: var(--leading-heading);
  --section-description-leading: 1.45;

  /* Standard cards: readable on a real 320–479px viewport. */
  --font-card-title:
  calc(
    clamp(
      1.125rem,
      1.085rem + .17vw,
      1.1875rem
    ) + 3px
  );
  --font-card-text: clamp(.96875rem, .93rem + .16vw, 1rem);
  --font-card-meta: var(--font-small);
  --font-slider-card-title: clamp(18px, calc(16.5px + .32vw), 22px);
  --font-slider-card-text: var(--font-card-text);
  --weight-heading: 600;
  --weight-card-title: 500;
  --weight-button: 500;
  --leading-display: 1.12;
  --leading-h1: 1.14;
  --leading-heading: 1.18;
  --leading-text: 1.55;
  --leading-small: 1.45;
  --leading-card-title: 1.32;
  --leading-card-text: 1.55;
  --tracking-heading: -.025em;
  --tracking-eyebrow: .12em;

  --space-unit: clamp(4px, 2.51px + .381vw, 8px);
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-7: calc(var(--space-unit) * 7);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --space-14: calc(var(--space-unit) * 14);
  --space-16: calc(var(--space-unit) * 16);
  --section-space: var(--space-12);
  --section-space-small: var(--space-8);
  --section-space-large: var(--space-16);
  --header-gap: var(--space-6);
  --content-gap: var(--space-3);
  --block-gap: var(--space-6);
  --grid-gap: clamp(16px, 1.667vw, 40px);
  --split-gap: var(--space-6);
  --card-gap: var(--space-3);
  --card-padding-top: clamp(28px, 7.5vw, 36px);
  --card-padding-inline: clamp(22px, 6vw, 32px);
  --card-padding-bottom: clamp(32px, 8vw, 40px);
  --card-icon-size: clamp(82px, 21vw, 118px);
  --card-icon-content-gap: clamp(18px, 4vw, 24px);
  --card-title-text-gap: clamp(10px, 2.6vw, 14px);
  /* Reusable section header + carousel navigation pattern. */
  --section-head-row-gap: clamp(22px, 6vw, 28px);
  --section-head-bottom-gap: clamp(42px, 10vw, 48px);
  --section-controls-top-gap: clamp(20px, 5vw, 24px);
  --slider-arrow-size: clamp(40px, calc(37.12px + .738vw), 56px);
  --slider-arrow-gap: var(--space-2);
  --slider-arrow-icon-size: 38%;
  --slider-arrow-passive-opacity: .38;
  --slider-card-title-text-gap: clamp(14px, 1.1vw, 28px);
  --slider-card-media-gap: clamp(24px, 1.56vw, 40px);
  --page-gutter: 15px;
  --container-max: none;
  --grid-columns: 12;
  --measure-text: 65ch;
  --measure-lead: 48ch;
  --measure-title: 18ch;
  --measure-title-wide: 24ch;
  --radius-card: clamp(16px, 12px + .56vw, 28px);
  --radius-photo: clamp(14px, 10px + .55vw, 24px);
  --radius-field: 12px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-card: 0 8px 28px rgb(32 66 60 / 6%);
  --shadow-hover: 0 12px 32px rgb(32 66 60 / 10%);

  /* Shared buttons: 52px mobile / 60px at 1440 / 72px at 1920 / 88px at 2560. */
  --font-button: clamp(.9375rem, .8795rem + .238vw, 1.09375rem);
  --button-height: clamp(52px, 49.03px + .762vw, 60px);
  --button-padding-x: clamp(22px, 18.286px + .9524vw, 32px);
  --button-padding-y: 12px;
  --button-gradient: linear-gradient(110deg, var(--teal), var(--teal-button-end));
  --button-gradient-hover: linear-gradient(110deg, #278f83, #216f68);
  --control-height: var(--button-height);
  /* Compatibility aliases: the former 'large' modifier no longer changes size. */
  --font-button-lg: var(--font-button);
  --button-height-lg: var(--button-height);
  --button-padding-x-lg: var(--button-padding-x);
  --button-padding-y-lg: var(--button-padding-y);

  --icon-size: clamp(20px, 16px + .56vw, 32px);
  --icon-stroke: 1.5;
  --line-width: clamp(36px, 29.31px + 1.714vw, 72px);
  --line-height: 3px;
  --line-gap: var(--space-2);
  --ratio-default: 4 / 3;
  --ratio-landscape: 16 / 10;
  --ratio-wide: 1.42 / 1;
  --ratio-square: 1;
  --ratio-portrait: 4 / 5;
  --image-position: center;
  --duration: 180ms;
  --duration-reveal: 800ms;
  --ease: ease-out;
  --ease-reveal: cubic-bezier(.22,.61,.36,1);
  --z-sticky: 20;
  --z-overlay: 80;
  --z-dialog: 100;

  /* HERO PATTERN: these do not increase headings/body text in ordinary blocks. */
  --hero-title-size: clamp(1.875rem, 1.3158rem + 2.807vw, 3.375rem);
  --hero-description-size: clamp(1rem, .9071rem + .381vw, 1.25rem);
  --hero-eyebrow-size: clamp(.75rem, .6804rem + .2857vw, .9375rem);
  --hero-padding-top: clamp(36px, 16px + 3.333vw, 72px);
  --hero-padding-bottom: clamp(48px, 24px + 4vw, 96px);
  --hero-eyebrow-gap: clamp(18px, 10px + 1.389vw, 30px);
  --hero-title-gap: clamp(24px, 16px + 1.111vw, 32px);
  --hero-actions-gap: clamp(28px, 17px + 1.597vw, 40px);
  --hero-action-column-gap: clamp(20px, 1.667vw, 40px);
  --hero-media-gap: clamp(32px, 20px + 2vw, 48px);
  --hero-description-gap: clamp(24px, 16px + 1.667vw, 40px);
  --hero-badge-size: clamp(104px, 94px + 2.56vw, 128px);
  --hero-badge-inset: 16px;
  --hero-photo-ratio: 16 / 10;
  --hero-photo-position: center;
  /* Legacy semantic classes use the correct Hero roles. */
  --font-display: var(--hero-title-size);
  --font-eyebrow-lg: var(--hero-eyebrow-size);
  --font-description-lg: var(--hero-description-size);

  margin: 0;
  color: var(--text-body);
  background: var(--bg-page);
  font-family: var(--font-body);
  font-size: var(--font-text);
  line-height: var(--leading-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 480px) { .clinic { --page-gutter: 30px; } }
@media (min-width: 480px) and (max-width: 639px) {
  .clinic {
    --font-card-title:
      calc(
        clamp(
          1.125rem,
          1.08rem + .15vw,
          1.1875rem
        ) + 3px
      );

    --font-card-text: clamp(.96875rem, .92rem + .16vw, 1rem);
    --card-padding-top: clamp(28px, 5vw, 32px);
    --card-padding-inline: clamp(24px, 4.5vw, 30px);
    --card-padding-bottom: clamp(30px, 5.5vw, 36px);
    --card-icon-size: 92px;
    --card-icon-content-gap: clamp(20px, 4vw, 28px);
    --card-title-text-gap: clamp(10px, 2vw, 13px);
    --section-head-row-gap: clamp(24px, 5vw, 30px);
    --section-head-bottom-gap: clamp(30px, 7vw, 38px);
    --section-controls-top-gap: clamp(22px, 4.5vw, 26px);
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .clinic {
    --font-card-title: clamp(1.125rem, 1.0625rem + .15625vw, 1.1875rem);
    --font-card-text: clamp(.9375rem, .8958rem + .10417vw, 1rem);
    --card-padding-top: clamp(30px, 4vw, 36px);
    --card-padding-inline: clamp(24px, 3.5vw, 32px);
    --card-padding-bottom: clamp(34px, 4.5vw, 40px);
    --card-icon-size: clamp(92px, 14vw, 104px);
    --card-icon-content-gap: clamp(18px, 2.4vw, 24px);
    --card-title-text-gap: clamp(10px, 1.5vw, 14px);
    --section-head-row-gap: var(--space-4);
    --section-head-bottom-gap: var(--space-6);
    --section-controls-top-gap: var(--space-4);
  }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .clinic {
    --font-card-title: clamp(1.1875rem, 1.0625rem + .20833vw, 1.21875rem);
    --font-card-text: clamp(1rem, .9375rem + .10417vw, 1.03125rem);
    --card-padding-top: clamp(32px, 3vw, 36px);
    --card-padding-inline: clamp(26px, 2.6vw, 32px);
    --card-padding-bottom: clamp(36px, 3.25vw, 40px);
    --card-icon-size: 104px;
    --card-icon-content-gap: clamp(20px, 2vw, 24px);
    --card-title-text-gap: clamp(11px, 1.2vw, 14px);
    --section-head-row-gap: var(--space-4);
    --section-head-bottom-gap: var(--space-6);
    --section-controls-top-gap: var(--space-4);
  }
}
@media (min-width: 1200px) {
  .clinic {
    /* Four-column cards need a compact scale while remaining readable. */
    --font-card-title: clamp(1.09375rem, .8594rem + .3125vw, 1.21875rem);
    --font-card-text: clamp(.90625rem, .7305rem + .2344vw, 1rem);
    --font-slider-card-text: clamp(16px, calc(11.5px + .375vw), 18px);
    --card-padding-top: clamp(30px, 2vw, 40px);
    --card-padding-inline: clamp(20px, 1.6vw, 30px);
    --card-padding-bottom: clamp(34px, 2.3vw, 44px);
    --card-icon-size: clamp(88px, 5vw, 116px);
    --card-icon-content-gap: clamp(18px, 1.45vw, 24px);
    --card-title-text-gap: clamp(10px, .9vw, 14px);
    --section-head-row-gap: var(--space-4);
    --section-head-bottom-gap: var(--space-6);
    --section-controls-top-gap: var(--space-4);
    --hero-title-size: clamp(3rem, 1.5rem + 2vw, 4.7rem);
    --hero-photo-ratio: 1.42 / 1;
    --hero-badge-size: clamp(144px, 16px + 10vw, 272px);
    --hero-badge-inset: clamp(28px, 2.5vw, 64px);
  }
}
@media (min-width: 1440px) {
  .clinic {
    --page-gutter: 50px;
    --space-unit: clamp(8px, 2.857px + .35714vw, 12px);
    --font-h1: clamp(3.125rem, 1.3571rem + 1.9643vw, 4.5rem);
    --font-h2: clamp(2.5rem, 1.2143rem + 1.42857vw, 3.5rem);
    --font-h3: clamp(1.625rem, .9821rem + .7143vw, 2.125rem);
    --font-lead: clamp(1.375rem, .8929rem + .5357vw, 1.75rem);
    --font-text: clamp(1.125rem, .8036rem + .35714vw, 1.375rem);
    --font-small: clamp(1rem, .8393rem + .17857vw, 1.125rem);
    --font-caption: clamp(.875rem, .7143rem + .17857vw, 1rem);
    --font-eyebrow: clamp(.875rem, .5536rem + .35714vw, 1.125rem);
    --font-section-description: clamp(21px, calc(12px + .625vw), 24px);
    --font-button: clamp(1.09375rem, .57143rem + .580357vw, 1.5rem);
    --button-height: clamp(60px, 24px + 2.5vw, 88px);
    --button-padding-x: clamp(32px, 11.429px + 1.42857vw, 48px);
    --button-padding-y: clamp(12px, 4.286px + .5357vw, 18px);
    --hero-title-size: clamp(3.3rem, .47143rem + 3.142857vw, 5.5rem);
    --hero-description-size: clamp(1.25rem, .60714rem + .714286vw, 1.75rem);
    --hero-eyebrow-size: clamp(.9375rem, .375rem + .625vw, 1.375rem);
    --hero-padding-top: clamp(72px, 20.571px + 3.57143vw, 112px);
    --hero-padding-bottom: clamp(96px, 34.286px + 4.2857vw, 144px);
    --hero-eyebrow-gap: clamp(30px, 6.857px + 1.60714vw, 48px);
    --hero-title-gap: clamp(32px, 11.429px + 1.42857vw, 48px);
    --hero-actions-gap: clamp(40px, 9.143px + 2.142857vw, 64px);
  }
}
@media (min-width: 1920px) { .clinic { --page-gutter: 90px; } }
@media (min-width: 1920px) {
  .clinic {
    /* 1920 → 2560: title 20 → 32px, text 16 → 22px. */
    --font-section-description: clamp(24px, calc(6px + .9375vw), 30px);
    --slider-arrow-size: clamp(52px, calc(16px + 1.875vw), 64px);
    --slider-arrow-icon-size: 40%;
    --font-card-title: clamp(20px, calc(-16px + 1.875vw), 32px);
    --font-card-text: clamp(16px, calc(-2px + .9375vw), 22px);
    --font-slider-card-title: clamp(24px, 1.25vw, 32px);
    --font-slider-card-text: clamp(18px, calc(6px + .625vw), 22px);
    --card-padding-top: clamp(38px, 2vw, 46px);
    --card-padding-inline: clamp(26px, 1.4vw, 34px);
    --card-padding-bottom: clamp(42px, 2.1vw, 52px);
    --card-icon-size: clamp(108px, calc(-24px + 6.875vw), 152px);
    --card-icon-content-gap: clamp(24px, calc(12px + .625vw), 28px);
    --card-title-text-gap: clamp(12px, calc(0px + .625vw), 16px);
  }
}
@media (min-width: 2560px) { .clinic { --page-gutter: 120px; } }

/* =========================================================
   RESET
   ========================================================= */

.clinic *,
.clinic *::before,
.clinic *::after {
  box-sizing: border-box;
}


.clinic :where(
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote
) {
  margin: 0;
}


.clinic :where(
  button,
  input,
  select,
  textarea
) {
  font: inherit;
}


.clinic :where(
  img,
  video
) {
  display: block;
  max-width: 100%;
}


.clinic [hidden] {
  display: none !important;
}


.clinic :where(
  a,
  button,
  input,
  select,
  textarea,
  summary
):focus-visible {

  outline:
    3px solid var(--focus);

  outline-offset: 4px;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.clinic-container {

  width: 100%;

  max-width: var(--container-max);

  margin-inline: auto;

  padding-inline: var(--page-gutter);

}


/* =========================================================
   SECTIONS
   ========================================================= */

.clinic-section {

  padding-block:
    var(--section-space);

}


.clinic-section--small {

  padding-block:
    var(--section-space-small);

}


.clinic-section--large {

  padding-block:
    var(--section-space-large);

}


.clinic-section--gray {

  background:
    var(--bg-gray);

}


.clinic-section--mint {

  background:
    var(--bg-mint);

}


.clinic-section--warm {

  background:
    var(--bg-warm);

}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.clinic :where(
  h1,
  h2,
  h3,
  h4
),
.clinic-title,
.clinic .clinic-display {

  color:
    var(--text-heading);

  font-family:
    var(--font-heading);

  font-weight:
    var(--weight-heading);

  letter-spacing:
    var(--tracking-heading);

  overflow-wrap:
    break-word;

}


/* Largest visual accent. Use deliberately, not on every section. */
.clinic-display {

  font-size:
    var(--font-display);

  line-height:
    var(--leading-display);

}


.clinic h1,
.clinic-h1 {

  font-size:
    var(--font-h1);

  line-height:
    var(--leading-h1);

}


.clinic h2,
.clinic-h2 {

  font-size:
    var(--font-section-title);

  line-height:
    var(--leading-heading);

}


.clinic h3,
.clinic-h3 {

  font-size:
    var(--font-h3);

  line-height:
    1.25;

}


.clinic h4,
.clinic-h4 {

  font-size:
    var(--font-text);

  line-height:
    1.35;

}


.clinic-lead {

  font-size:
    var(--font-lead);

  line-height:
    1.5;

}


.clinic-description {

  font-size:
    var(--font-description);

  line-height:
    var(--leading-text);

}


.clinic-description--large {

  font-size:
    var(--font-description-lg);

}


.clinic-small {

  font-size:
    var(--font-small);

  line-height:
    var(--leading-small);

}


.clinic-caption {

  font-size:
    var(--font-caption);

  line-height:
    1.45;

}


.clinic-muted {

  color:
    var(--text-muted);

}


.clinic-accent {

  color:
    var(--teal-ink);

}


/* =========================================================
   TEXT WIDTHS
   ========================================================= */

.clinic-prose {

  max-width:
    var(--measure-text);

}


.clinic-prose--lead {

  max-width:
    var(--measure-lead);

}


.clinic-title--measure {

  max-width:
    var(--measure-title);

}


.clinic-title--wide {

  max-width:
    var(--measure-title-wide);

}


/* =========================================================
   EYEBROW / OVERLINE
   ========================================================= */

.clinic-eyebrow {

  color:
    var(--teal);

  font-size:
    var(--font-eyebrow);

  font-weight:
    600;

  line-height:
    1.3;

  letter-spacing:
    var(--tracking-eyebrow);

  text-transform:
    uppercase;

}


.clinic-eyebrow--large {

  font-size:
    var(--font-eyebrow-lg);

}


/* =========================================================
   STACK
   ========================================================= */

.clinic-stack {

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(
      --stack-gap,
      var(--space-3)
    );

}


/* =========================================================
   ROW
   ========================================================= */

.clinic-row {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(
      --row-gap,
      var(--space-3)
    );

}


/* =========================================================
   RESPONSIVE ROW

   Mobile = column
   640+   = row
   ========================================================= */

.clinic-row-responsive {
  display: flex;
  flex-wrap: wrap;

  flex-direction:
    column;

  /*
    Do not stretch buttons/links to full width on phones.
    Components keep their natural content width.
  */

  align-items:
    flex-start;

  gap:
    var(
      --row-gap,
      var(--space-3)
    );

}


@media (min-width: 640px) {

  .clinic-row-responsive {

    flex-direction:
      row;

    align-items:
      center;

  }

}


/* =========================================================
   12 COLUMN GRID
   ========================================================= */

.clinic-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      12,
      minmax(0, 1fr)
    );

  gap:
    var(--grid-gap);

}


.clinic-grid > * {

  min-width: 0;

  grid-column:
    span var(--span-mobile, 12);

}


/*
  Example:

  style="
    --span-mobile:12;
    --span-tablet:6;
    --span-laptop:6;
    --span-desktop:4;
  "
*/


@media (min-width: 640px) {

  .clinic-grid > * {

    grid-column:
      span var(
        --span-tablet,
        var(--span-mobile, 12)
      );

  }

}


@media (min-width: 960px) {

  .clinic-grid > * {

    grid-column:
      span var(
        --span-laptop,
        var(--span-tablet, 6)
      );

  }

}


@media (min-width: 1440px) {

  .clinic-grid > * {

    grid-column:
      span var(
        --span-desktop,
        var(--span-laptop, 6)
      );

  }

}


/* =========================================================
   GENERIC 2 COLUMN LAYOUT
   ========================================================= */

.clinic-split {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr);

  gap:
    var(--split-gap);

  align-items:
    start;

}


.clinic-split > * {

  min-width: 0;

}


/*
  1200–1439:
  equal columns.

  960 remains one-column so text/buttons get enough width
  and media moves below the text, like the tablet layout.
*/

@media (min-width: 1200px) {

  .clinic-split {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

  }

}


/*
  1440+:
  можно использовать 5/7 как основную композицию.
*/

@media (min-width: 1440px) {

  .clinic-split {

    grid-template-columns:
      minmax(0, 5fr)
      minmax(0, 7fr);

  }

}


/* =========================================================
   BALANCED SPLIT
   ========================================================= */

.clinic-split--equal {

  grid-template-columns:
    minmax(0, 1fr);

}


@media (min-width: 1200px) {

  .clinic-split--equal {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


/* =========================================================
   REVERSE SPLIT
   ========================================================= */

@media (min-width: 1440px) {

  .clinic-split--reverse {

    grid-template-columns:
      minmax(0, 7fr)
      minmax(0, 5fr);

  }

}


/* =========================================================
   SIMPLE GRIDS
   ========================================================= */

.clinic-grid--2 > *, .clinic-grid--3 > *, .clinic-grid--4 > * { grid-column: auto; }

.clinic-grid--2,
.clinic-grid--3,
.clinic-grid--4 {

  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    var(--grid-gap);

}


/* 2 columns */

@media (min-width: 640px) {

  .clinic-grid--2 {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


/* 3 columns */

@media (min-width: 640px) {

  .clinic-grid--3 {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


@media (min-width: 1200px) {

  .clinic-grid--3 {

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

  }

}


/* 4 columns */

@media (min-width: 640px) {

  .clinic-grid--4 {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }

}


@media (min-width: 1200px) {

  .clinic-grid--4 {

    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );

  }

}


/* =========================================================
   AUTO GRID

   Отлично подходит для карточек,
   чтобы почти не писать media queries.
   ========================================================= */

.clinic-grid-auto {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        min(
          100%,
          var(--card-min, 260px)
        ),
        1fr
      )
    );

  gap:
    var(--grid-gap);

}


/* =========================================================
   CARDS
   ========================================================= */

.clinic-card {

  padding:
    var(--card-padding-top)
    var(--card-padding-inline)
    var(--card-padding-bottom);

  background:
    var(--white);

  border:
    var(--border-width)
    solid
    var(--border-soft);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--shadow-card);

}


.clinic .clinic-card__title,
.clinic .clinic-card-title {

  color:
    var(--text-heading);

  font-family:
    var(--font-heading);

  font-size:
    var(--font-card-title);

  font-weight:
    var(--weight-card-title);

  line-height:
    var(--leading-card-title);

  letter-spacing:
    -.015em;

}


.clinic .clinic-card__text,
.clinic .clinic-card-text {

  margin-top:
    var(--card-title-text-gap);

  color:
    var(--text-muted);

  font-size:
    var(--font-card-text);

  line-height:
    var(--leading-card-text);

}


.clinic-card--flat {

  box-shadow:
    none;

}


.clinic-card--gray {

  background:
    var(--bg-gray);

}


.clinic-card--mint {

  background:
    var(--bg-mint);

}


/* =========================================================
   MEDIA
   ========================================================= */

.clinic-media {

  position:
    relative;

  width:
    100%;

  min-width:
    0;

}


.clinic-photo {

  display:
    block;

  width:
    100%;

  height:
    auto;

  aspect-ratio:
    var(
      --media-ratio,
      var(--ratio-default)
    );

  object-fit:
    cover;

  object-position:
    var(
      --media-position,
      var(--image-position)
    );

  border-radius:
    var(--radius-photo);

}


/* =========================================================
   MEDIA RATIOS
   ========================================================= */

.clinic-photo--landscape {

  --media-ratio:
    var(--ratio-landscape);

}


.clinic-photo--wide {

  --media-ratio:
    var(--ratio-wide);

}


.clinic-photo--square {

  --media-ratio:
    var(--ratio-square);

}


.clinic-photo--portrait {

  --media-ratio:
    var(--ratio-portrait);

}


/* =========================================================
   FRAMED IMAGE
   ========================================================= */

.clinic-photo--framed {

  border:
    var(--border-width)
    solid
    var(--border-accent);

  padding:
    4px;

}


/* =========================================================
   BUTTON
   ========================================================= */

.clinic-button {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-2);

  min-height:
    var(--button-height);

  max-width:
    100%;

  padding:
    var(--button-padding-y)
    var(--button-padding-x);

  border:
    1px solid transparent;

  border-radius:
    var(--radius-pill);

  background:
    var(--button-gradient);

  color:
    var(--white);

  cursor:
    pointer;

  font-size:
    var(--font-button);

  font-weight:
    var(--weight-button);

  line-height:
    1.35;

  text-align:
    center;

  text-decoration:
    none;

  white-space:
    normal;

  overflow-wrap:
    anywhere;

  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);

}


/* =========================================================
   LARGE BUTTON
   ========================================================= */

.clinic-button--large {

  min-height:
    var(--button-height-lg);

  padding:
    var(--button-padding-y-lg)
    var(--button-padding-x-lg);

  font-size:
    var(--font-button-lg);

}


/* =========================================================
   BUTTON VARIANTS
   ========================================================= */

.clinic-button--outline {

  background:
    transparent;

  color:
    var(--teal-ink);

  border-color:
    var(--teal-ink);

}


.clinic-button--text {
  min-height: var(--button-height);
  padding: var(--button-padding-y) 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-heading);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .45em;
}
/* Underline follows the label, not the bottom edge of a shorter button. */
.clinic-button--text:has(.clinic-button__label) { text-decoration: none; }
.clinic-button__label {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding-block: .18em;
  border-bottom: 1px solid currentColor;
}


/* =========================================================
   MOBILE BUTTON BEHAVIOUR
   ========================================================= */

/*
  Default responsive buttons remain content-width at
  390 / 480 / 640 and above.
*/

.clinic-button--responsive {

  width:
    fit-content;

  max-width:
    100%;

  align-self: auto;

}


/*
  Use this modifier only where a deliberately full-width
  mobile CTA is required.
*/

.clinic-button--full-mobile {

  width:
    100%;

}


@media (min-width: 640px) {

  .clinic-button--full-mobile {

    width:
      fit-content;

  }

}


/* =========================================================
   LINKS
   ========================================================= */

.clinic-link {

  color:
    var(--teal-ink);

  text-decoration:
    underline;

  text-underline-offset:
    .2em;

}


/* =========================================================
   ICON
   ========================================================= */

.clinic-icon {

  width:
    var(--icon-size);

  height:
    var(--icon-size);

  flex:
    0 0 auto;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    var(--icon-stroke);

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* =========================================================
   ROUND ICON BUTTON
   ========================================================= */

.clinic-icon-button {

  display:
    inline-grid;

  place-items:
    center;

  width:
    var(--button-height);

  height:
    var(--button-height);

  padding:
    0;

  border:
    1px solid var(--teal-ink);

  border-radius:
    50%;

  background:
    transparent;

  color:
    var(--teal-ink);

}


/* =========================================================
   REUSABLE SECTION HEADER + CAROUSEL NAVIGATION
   Use these classes in later sections to keep identical
   title, description and round-arrow scaling.
   ========================================================= */

.clinic-section-title {

  font-size:
    var(--font-section-title);

  line-height:
    var(--section-title-leading);

}


.clinic-section-description {

  color:
    var(--text-section-description);

  font-size:
    var(--font-section-description);

  line-height:
    var(--section-description-leading);

}


.clinic-slider-card-text {

  color:
    var(--text-card-description);

  font-size:
    var(--font-slider-card-text);

  line-height:
    var(--leading-card-text);

}


.clinic-slider-controls {

  display:
    flex;

  align-items:
    center;

  gap:
    var(--slider-arrow-gap);

}


.clinic-slider-arrow {

  display:
    inline-grid;

  place-items:
    center;

  width:
    var(--slider-arrow-size);

  height:
    var(--slider-arrow-size);

  min-width:
    var(--slider-arrow-size);

  min-height:
    var(--slider-arrow-size);

  flex:
    0 0 var(--slider-arrow-size);

  padding:
    0;

  border:
    1px solid var(--border-accent);

  border-radius:
    50%;

  background:
    transparent;

  color:
    var(--teal-ink);

  cursor:
    pointer;

  opacity:
    1;

  transform:
    scale(1);

  transition:
    color var(--duration) ease,
    background-color var(--duration) ease,
    border-color var(--duration) ease,
    opacity var(--duration) ease,
    transform 120ms ease;

}


.clinic-slider-arrow__icon {

  display:
    block;

  width:
    var(--slider-arrow-icon-size);

  height:
    var(--slider-arrow-icon-size);

  background:
    currentColor;

  -webkit-mask:
    url("https://static.tildacdn.com/tild3530-6638-4465-b561-613865663965/arrow-right.png")
    center / contain no-repeat;

  mask:
    url("https://static.tildacdn.com/tild3530-6638-4465-b561-613865663965/arrow-right.png")
    center / contain no-repeat;

}


.clinic-slider-arrow--prev .clinic-slider-arrow__icon {

  transform:
    rotate(180deg);

}


.clinic-slider-arrow.is-active {

  color:
    var(--teal-ink);

  border-color:
    var(--teal);

}


.clinic-slider-arrow.is-passive,
.clinic-slider-arrow:disabled {

  opacity:
    var(--slider-arrow-passive-opacity);

  color:
    var(--border-control);

  border-color:
    var(--border-soft);

  background:
    transparent;

  cursor:
    default;

  pointer-events:
    none;

}


@media (hover: hover) and (pointer: fine) {

  .clinic-slider-arrow.is-active:hover {

    color:
      var(--white);

    background:
      var(--teal);

    border-color:
      var(--teal);

    transform:
      translateY(-1px);

  }

}


.clinic-slider-arrow.is-active:active {

  color:
    var(--white);

  background:
    var(--teal-deep);

  border-color:
    var(--teal-deep);

  transform:
    scale(.94);

}


/* =========================================================
   TAG
   ========================================================= */

.clinic-tag {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    6px
    12px;

  border:
    1px solid var(--border-accent);

  border-radius:
    var(--radius-pill);

  color:
    var(--teal-ink);

  background:
    transparent;

  font-size:
    var(--font-caption);

  line-height:
    1.4;

}


/* =========================================================
   FORMS
   ========================================================= */

.clinic-field {

  display:
    grid;

  gap:
    var(--space-1);

}


.clinic-label {

  font-size:
    var(--font-small);

  font-weight:
    500;

}


.clinic-input {

  display:
    block;

  width:
    100%;

  min-width:
    0;

  min-height:
    var(--control-height);

  padding:
    12px
    16px;

  border:
    1px solid var(--border-control);

  border-radius:
    var(--radius-field);

  background:
    var(--white);

  color:
    var(--text-body);

  font-size:
    var(--font-text);

  line-height:
    1.5;

}


.clinic-input::placeholder {

  color:
    var(--text-muted);

  opacity:
    1;

}


.clinic-input[aria-invalid="true"] {

  border-color:
    var(--error);

}


.clinic-field-error {

  color:
    var(--error);

  font-size:
    var(--font-small);

}


/* =========================================================
   NOTICE
   ========================================================= */

.clinic-notice {

  padding:
    var(--space-3);

  background:
    var(--bg-mint);

  border-radius:
    var(--radius-field);

}


/* =========================================================
   FAQ
   ========================================================= */

.clinic-faq {

  border-bottom:
    1px solid var(--border-soft);

}


.clinic-faq > summary {

  padding-block:
    var(--space-3);

  cursor:
    pointer;

  font-weight:
    500;

  color:
    var(--text-heading);

}


.clinic-faq > .clinic-prose {

  padding-bottom:
    var(--space-3);

}


/* =========================================================
   DECORATIVE TITLE LINE
   ========================================================= */

.clinic-title--line::after {

  content:
    "";

  display:
    block;

  width:
    var(--line-width);

  height:
    var(--line-height);

  margin-top:
    var(--line-gap);

  background:
    var(--teal);

  border-radius:
    var(--radius-pill);

}


/* =========================================================
   VISIBILITY HELPERS
   ========================================================= */

.clinic-mobile-only {

  display:
    block;

}


.clinic-desktop-only {

  display:
    none;

}


@media (min-width: 1200px) {

  .clinic-mobile-only {

    display:
      none;

  }


  .clinic-desktop-only {

    display:
      block;

  }

}


/* =========================================================
   ORDER HELPERS
   ========================================================= */

.clinic-order-1 {

  order:
    1;

}


.clinic-order-2 {

  order:
    2;

}


@media (min-width: 1200px) {

  .clinic-order-desktop-1 {

    order:
      1;

  }


  .clinic-order-desktop-2 {

    order:
      2;

  }

}


/* =========================================================
   ALIGNMENT
   ========================================================= */

.clinic-align-start {

  align-items:
    start;

}


.clinic-align-center {

  align-items:
    center;

}


.clinic-align-end {

  align-items:
    end;

}


.clinic-justify-start {

  justify-content:
    start;

}


.clinic-justify-center {

  justify-content:
    center;

}


.clinic-justify-between {

  justify-content:
    space-between;

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.clinic-sr-only {

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip-path:
    inset(50%);

  white-space:
    nowrap;

  border:
    0;

}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .clinic-button:not(:disabled):not(
    [aria-disabled="true"]
  ):hover {

    background:
      var(--button-gradient-hover);

    box-shadow:
      none;

  }


  .clinic-button--outline:not(:disabled):not(
    [aria-disabled="true"]
  ):hover {

    background:
      var(--bg-mint);

    color:
      var(--teal-ink);

  }


  .clinic-button--text:not(:disabled):not(
    [aria-disabled="true"]
  ):hover {

    background:
      transparent;

    color:
      var(--teal-ink);

  }


  .clinic-link:hover {

    text-decoration-thickness:
      2px;

  }

}


/* =========================================================
   DISABLED
   ========================================================= */

.clinic-button:disabled,
.clinic-button[aria-disabled="true"] {

  opacity:
    .5;

  cursor:
    not-allowed;

  box-shadow:
    none;

}

/* =========================================================
   SLIDER CARD TITLES — MOBILE
   +3px только на мобильных диапазонах
   ========================================================= */

/* до 479 */
@media (max-width: 479px) {
  .clinic {
    --font-slider-card-title:
      clamp(
        21px,
        calc(19.5px + .32vw),
        25px
      );
  }
}


/* 480–639 */
@media (min-width: 480px) and (max-width: 639px) {
  .clinic {
    --font-slider-card-title:
      clamp(
        21px,
        calc(19.5px + .32vw),
        25px
      );
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .clinic {

    --duration:
      0ms;

    --duration-reveal:
      0ms;

  }


  .clinic *,
  .clinic *::before,
  .clinic *::after {

    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;

  }

}

.clinic-topbar { background: var(--bg-header-yellow); color: var(--text-heading); }