/* Home update (test.abc-design.kz only). 12 Nov 2026: rebuilt from the current abc-home.pages.dev css files, in the order of the reference page.
   Test-only deltas that were agreed earlier are marked «TEST:» and listed at the end. */
/* ==== cases.css ==== */
/* Блок кейсов на главной: 8 проектов, 2 в ряд.
   Карточка: обводка без заливки, тег типа проекта на фото, ячейки фактов, теги. */
.cases {
  --c-brand: #cc3358; --c-brand-dark: #a42447; --c-brand-soft: rgba(204, 51, 88, .45);
  --c-ink: #1d2226; --c-text: #5b6168; --c-muted: #848c93; --c-line: #e2e7eb;
  /* Сохраняем отступы и прозрачный фон текущей секции .porffolio. */
  padding: 0 0 40px; background: transparent;
}
.cases__wrap { width: calc(100% - 48px); max-width: 1320px; margin: 0 auto; }

/* Шапка блока: надзаголовок и заголовок по центру */
.cases__head { max-width: 860px; margin: 0 auto; text-align: center; }
.cases__kicker { display: block; margin-bottom: 14px; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-brand); }
.cases h2.cases__title { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: normal; color: #343434; text-transform: none; }

/* Сетка */
.cases-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }

/* Карточка: обводка, без заливки */
.case-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: 24px; background: transparent; transition: border-color .3s; }
.case-card:hover, .case-card:focus-within { border-color: var(--c-brand-soft); }

/* Фото и вынесенный тег типа проекта */
.case-card__media { position: relative; aspect-ratio: 1200 / 785; overflow: hidden; border-bottom: 1px solid var(--c-line); background: #eef2f4; }
.case-card__media picture, .case-card__media img { display: block; width: 100%; height: 100%; }
.case-card__media img { object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.case-card:hover .case-card__media img { transform: scale(1.04); }

/* Заголовок и кнопка */
.case-card__head { padding: 28px 32px 0; }
.case-card__title { margin: 0; font-size: 26px; line-height: 34px; font-weight: 700; color: var(--c-ink); white-space: normal; overflow-wrap: anywhere; }
.case-card__link, .case-card__link:hover, .case-card__link:focus { color: inherit; text-decoration: none; }
.case-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 24px; }
.case-card__link:focus-visible { outline: none; }
.case-card__link:focus-visible::after { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.case-card:hover .case-card__title { color: var(--c-brand); }
.case-card__title { transition: color .25s; }
.case-card__go { position: absolute; top: 14px; right: 18px; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-brand); color: #fff; transition: background-color .25s; }
.case-card__go svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.case-card:hover .case-card__go { background: var(--c-brand-dark); }
.case-card:hover .case-card__go svg { transform: rotate(-45deg); }
.case-card__text { margin: 0; padding: 18px 32px 26px; border-top: 1px solid var(--c-line); font-size: 13px; line-height: 21px; color: #6b737a; }

/* Дробление: ячейки фактов */
.case-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.case-card__facts div { min-width: 0; padding: 18px 20px 18px 32px; }
.case-card__facts div + div { border-left: 1px solid var(--c-line); padding-left: 24px; }
.case-card__facts dt { display: flex; align-items: flex-end; min-height: 36px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--c-muted); }
.case-card__facts dd { margin: 4px 0 0; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--c-ink); overflow-wrap: anywhere; }

/* Теги: что разработали */
.case-card__tags { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 8px; flex: 1; margin: 0; padding: 20px 32px 22px; list-style: none; }
.case-card__tags li { flex: none; max-width: 100%; padding: 6px 12px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; color: #6b737a; transition: border-color .3s; }
.case-card:hover .case-card__tags li { border-color: var(--c-brand-soft); }

/* Публикации в СМИ: скругления как у карточек кейсов.
   Скругляется вся ссылка-превью, чтобы затемнение (a::before), картинка и подпись обрезались вместе. */
.smionas .videoowl .item a.glightbox { position: relative; display: block; overflow: hidden; border-radius: 20px; }
.smionas .videoowl .item a.glightbox > img { display: block; width: 100%; }
.smionas .videoowl .item a.glightbox::before { top: 0; left: 0; }
.smionas .videoowl .kanal { top: 14px; left: 14px; }
.smionas .smiowl .item { overflow: hidden; border-radius: 20px; }

@media (max-width: 1199px) {
  .cases-grid { gap: 24px; }
  .case-card__head { padding: 24px 24px 0; }
  .case-card__title { white-space: normal; }
  .case-card__text { padding: 16px 24px 22px; }
  .case-card__title { font-size: 23px; line-height: 31px; }
  .case-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card__facts div { padding: 16px 12px 16px 24px; }
  .case-card__facts div + div { padding-left: 16px; }
  .case-card__facts div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--c-line); padding-left: 24px; }
  .case-card__facts dt { min-height: 0; }
  .case-card__facts dd { font-size: 15px; line-height: 22px; }
  .case-card__tags { flex-wrap: wrap; align-content: flex-start; padding: 18px 24px 20px; }
}
@media (max-width: 767px) {
  .smionas .videoowl .item a.glightbox, .smionas .smiowl .item { border-radius: 16px; }
  .cases__wrap { width: calc(100% - 32px); }
  .cases__kicker { margin-bottom: 10px; font-size: 14px; line-height: 20px; }
  .cases { padding-bottom: 24px; }
  .cases-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .case-card { border-radius: 20px; }
  .case-card__link::after { border-radius: 20px; }
  .case-card__head { padding: 20px 18px 0; }
  .case-card__title { font-size: 21px; line-height: 28px; }
  .case-card__go { top: 12px; right: 12px; width: 44px; height: 44px; }
  .case-card__text { padding: 14px 18px 18px; font-size: 13px; line-height: 20px; }
  .case-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card__facts div { padding: 14px 12px 14px 18px; }
  .case-card__facts div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--c-line); padding-left: 18px; }
  .case-card__facts dd { font-size: 15px; line-height: 22px; }
  .case-card__tags { padding: 16px 18px 18px; }
}
@container (max-width: 520px) {
  .case-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card__facts div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--c-line); }
  .case-card__facts dt { min-height: 0; overflow-wrap: anywhere; }
}
@container (max-width: 280px) {
  .case-card__facts { grid-template-columns: minmax(0, 1fr); }
  .case-card__facts div + div { border-left: 0; border-top: 1px solid var(--c-line); }
}
@media (prefers-reduced-motion: reduce) { .case-card__media img, .case-card__go svg { transition: none; } }

/* Мобильная версия: два кейса в ряд, весь текст показан, уменьшены шрифты и отступы */
@media (max-width: 600px) {
  .cases-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }
  .case-card { border-radius: 14px; }
  .case-card__link::after { border-radius: 14px; }
  .case-card__go { top: 8px; right: 8px; width: 30px; height: 30px; }
  .case-card__go svg { width: 14px; height: 14px; }
  .case-card__go, .case-card__tags { display: none; }
  .case-card__head { padding: 12px 12px 0; }
  .case-card__title { font-size: 20px; line-height: 26px; text-wrap: balance; }
  .case-card__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .case-card__facts div, .case-card__facts div:nth-child(n) { grid-column: auto; padding: 10px 8px 10px 12px; border-top: 0; border-left: 1px solid var(--c-line); }
  .case-card__facts div:nth-child(1) { border-left: 0; }
  .case-card__facts dt { min-height: 0; font-size: 11px; line-height: 14px; }
  .case-card__facts dd { margin-top: 2px; font-size: 13px; line-height: 18px; }
  .case-card__tags { gap: 4px; padding: 10px 12px; }
  .case-card__tags li { padding: 3px 8px; font-size: 12px; line-height: 16px; }
  .case-card__text { padding: 10px 12px 14px; font-size: 12px; line-height: 14px; }
}

/* Заголовок H2 по стандарту сайта: те же брейкпоинты, что у остальных секций */
@media (max-width: 830px) { .cases h2.cases__title { font-size: 36px; line-height: 48px; } }
@media (max-width: 480px) { .cases h2.cases__title { font-size: 22px; line-height: 30px; } }

/* ==== home-layout.css ==== */
/* A single continuous wave at each blue section boundary. */
#layout-content { --home-wave-height: clamp(64px, 10vw, 144px); }
#layout-content > :is(.otzyvy, .nasha-komanda2) {
  position: relative;
  isolation: isolate;
  background: #e8f9ff;
}
#layout-content > :is(.otzyvy, .nasha-komanda2)::before,
#layout-content > :is(.otzyvy, .nasha-komanda2)::after {
  content: none;
  display: none;
}
#layout-content > :is(.otzyvy, .nasha-komanda2) > :is(.before, .after) {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: var(--home-wave-height);
  object-fit: fill;
  z-index: 0;
  pointer-events: none;
}
#layout-content > :is(.otzyvy, .nasha-komanda2) > .before {
  top: calc(1px - var(--home-wave-height)) !important;
  bottom: auto;
}
#layout-content > :is(.otzyvy, .nasha-komanda2) > .after {
  top: auto !important;
  bottom: calc(1px - var(--home-wave-height)) !important;
  transform: rotate(180deg);
}
#layout-content > :is(.otzyvy, .nasha-komanda2) > .container {
  position: relative;
  z-index: 1;
}
#layout-content > .slider-home + .services { margin-top: 96px; } /* TEST: moderate spacing, agreed 12 Nov (reference 128px) */
#layout-content > .services + .cases { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)); }
#layout-content > .news + .doverie { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)); }
#layout-content > .otzyvy {
  margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px));
  padding-block: 40px;
}
#layout-content > .otzyvy + .nasha-komanda { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)) !important; }
#layout-content > .nasha-komanda + .abilities { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)); }
#layout-content > .abilities + .clients { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)); }
#layout-content > .clients + .smionas { margin-top: 16px; }
#layout-content > .abc-home-faq { padding-bottom: 80px; }
#layout-content > .doverie + .exlusive { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)); }
#layout-content > .nasha-komanda2 + .abc-home-faq { margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px)); }
#layout-content > .nasha-komanda2 {
  margin-top: calc(var(--home-wave-height) + var(--home-wave-gap, 64px));
  padding-block: 40px;
}
@media (max-width: 767px) {
  #layout-content > .slider-home + .services { margin-top: 64px; } /* TEST: reference 80px */
}

/* Карточки команды: без подпрыгивания, подсветка рамки, без теней */
/* TEST: the reference turns off the hover lift (.ncomblock:hover margin-top 0); on test the original lift -15px stays by Timur's instruction of 11 Nov, so that rule is not carried over */
@media (max-width: 480px) { .ncomblock:hover { margin-top: 20px; } }
.ncomblock .comminfo { transition: border-color .3s; }
.ncomblock:hover .comminfo { border-color: #cc3358; }
.ncomblock img { transition: filter .3s; }
.ncomblock:hover > img { filter: saturate(1.12) contrast(1.03); }

/* FAQ: заголовок H2 по стандарту сайта */
#layout-content .abc-home-faq > h2 { font-size: 40px; line-height: 48px; font-weight: 700; }
@media (max-width: 830px) { #layout-content .abc-home-faq > h2 { font-size: 36px; line-height: 48px; } }
@media (max-width: 480px) { #layout-content .abc-home-faq > h2 { font-size: 22px; line-height: 30px; } }

/* Наша команда на телефоне: слайдер. Все 8 карточек лежат в HTML сразу, свайп листает по одной (scroll-snap, без JS) */
@media (max-width: 767px) {
  .newcomand {
    display: flex;
    gap: 16px;
    margin: 0 calc(50% - 50vw);
    padding: 0 20px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .newcomand::-webkit-scrollbar { display: none; }
  /* Фиксированные размеры, чтобы карточка влезала в один экран: фото квадратное (обрезка сверху), плашка с текстом 400 px (с наездом -40 px на фото), карточка = фото + 360 px */
  .newcomand { --team-w: min(80vw, 340px); --team-h: calc(var(--team-w) + 360px); align-items: flex-start; height: calc(var(--team-h) + 8px); overflow-y: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .newcomand .ncomblock,
  .newcomand .ncomblock:hover { flex: 0 0 var(--team-w); width: var(--team-w); height: var(--team-h); min-width: 0; max-width: var(--team-w); display: flex; flex-direction: column; margin-top: 0; scroll-snap-align: start; }
  /* Размеры фото считаются прямо из ширины карточки, без авто-расчёта и aspect-ratio: WebKit на iPhone раздувал высоту */
  .newcomand .ncomblock > img { flex: 0 0 auto; display: block; width: var(--team-w); max-width: var(--team-w) !important; height: var(--team-w); object-fit: cover; object-position: center 12%; }
  .newcomand .comminfo { flex: 0 0 400px; height: 400px; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; border-radius: 0 0 30px 0; }
  .newcomand .cominfobottom { margin-top: auto; }
  /* Самые узкие телефоны: текст переносится чаще, плашке нужно больше места */
}
@media (max-width: 359px) {
  .newcomand { --team-h: calc(var(--team-w) + 400px); }
  .newcomand .comminfo { flex-basis: 440px; height: 440px; }
}

/* ==== services.css ==== */
/* Услуги на главной: 6 карточек, на десктопе 3 в ряд, на телефоне слайдер со свайпом. Вид повторяет прайс-лист страницы таргетированной рекламы. */
.services {
  --s-brand: #cc3358; --s-brand-soft: #fdf0f3; --s-ink: #151515; --s-text: #444; --s-muted: #6b7280;
  --s-line: #e3e6ec; --s-line-soft: #eef0f3; --s-crown: #d8ad37;
  --s-wave: var(--home-wave-height, 144px); --s-fill: #e8f9ff; --s-lift: 192px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  margin-top: 80px;
  padding-bottom: 64px;
  scroll-margin-top: 96px;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
  align-items: stretch;
  position: relative;
  grid-template-rows: repeat(2, auto);
}
/* Голубая волна под вторым рядом карточек: гребень у начала ряда, заливка до конца секции, нижняя волна */
.services__grid::before, .services__grid::after {
  content: "";
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}
.services__grid::before { top: calc(var(--s-lift) * -1); height: var(--s-wave); background: url("../img/home-wave.svg") center / 100% 100% no-repeat; }
.services__grid::after { top: calc(var(--s-wave) - var(--s-lift) - 1px); bottom: -64px; background: var(--s-fill); }
.services::after {
  content: "";
  position: absolute;
  /* TEST: 4 px underlay of the same colour over the joint, removes the light seam above the lower wave in WebKit 3x; the wave contour stays at 100% - 1px */
  top: calc(100% - 4px);
  left: 50%;
  width: 100vw;
  height: calc(var(--s-wave) + 3px);
  background: linear-gradient(var(--s-fill), var(--s-fill)) 0 100% / 100% 4px no-repeat, url("../img/home-wave.svg") 0 0 / 100% var(--s-wave) no-repeat;
  transform: translateX(-50%) rotate(180deg);
  z-index: -1;
  pointer-events: none;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--s-line);
  border-radius: 20px;
  background: #fff;
  text-align: left;
}
.service-card--featured { border-color: var(--s-brand); outline: 1px solid var(--s-brand); outline-offset: -2px; }
.service-card__crown { position: absolute; top: 16px; right: 24px; width: 32px; height: 32px; color: var(--s-crown); pointer-events: none; }
.service-card__header { padding: 28px 24px 16px; border-bottom: 1px solid var(--s-line-soft); }
.service-card--featured .service-card__header { border-bottom-color: #f2d3dc; }
.service-card--featured .service-card__title { padding-right: 48px; }
.service-card__title { margin: 0 0 16px; color: var(--s-ink); font-size: 28px; line-height: 36px; font-weight: 600; text-transform: none; }
.service-card--featured .service-card__title { color: var(--s-brand); }
.service-card__text { min-height: 40px; margin: 0 -16px 0 0; color: #666666; font-size: 13px; line-height: 20px; font-weight: 400; }
.service-card__price { margin: 16px 0 0; color: var(--s-ink); font-size: 30px; line-height: 40px; font-weight: 400; white-space: nowrap; }
.service-card__body { display: flex; flex: 1; flex-direction: column; padding: 16px 24px 20px; }
.service-card__list { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.service-card__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 0;
  padding: 0;
  color: #151515;
  font-size: 14px;
  line-height: 20px;
  background: none;
}
.service-card__list li::before {
  content: "";
  display: block;
  width: 14px;
  height: 7px;
  margin: 5px 0 0 3px;
  border-bottom: 2px solid #a3a9b3;
  border-left: 2px solid #a3a9b3;
  transform: rotate(-45deg);
}
.service-card--featured .service-card__list li::before { border-color: var(--s-brand); }
.service-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin-top: auto;
  padding: 0 16px;
  border: 2px solid var(--s-brand);
  border-radius: 60px;
  background: #fff;
  color: var(--s-brand);
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.service-card__action:hover { background: var(--s-brand-soft); color: var(--s-brand); }
.service-card--featured .service-card__action { background: var(--s-brand); color: #fff; }
.service-card--featured .service-card__action:hover { background: #a42447; border-color: #a42447; color: #fff; }
.service-card__action:focus-visible { outline: 2px solid var(--s-brand); outline-offset: 4px; }

@media (min-width: 1024px) and (max-width: 1199px) {
  .services__grid { gap: 24px; }
  .service-card__header { padding-inline: 20px; }
  .service-card--featured .service-card__title { padding-right: 44px; }
  .service-card__body { padding-inline: 20px; }
  .service-card__title { font-size: 22px; line-height: 32px; }
  .service-card__text { min-height: 60px; }
  .service-card__price { font-size: 26px; }
  .service-card__crown { right: 20px; }
}
@media (max-width: 1023px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); margin-top: 40px; }
  .service-card__title { font-size: 24px; line-height: 32px; }
  .service-card__text { min-height: 40px; }
}
@media (max-width: 767px) {
  .service-card__text { min-height: 0; }
}
@media (max-width: 480px) {
  .services { margin-top: 56px; }
  .service-card__title { font-size: 24px; line-height: 32px; }
  .service-card__price { font-size: 26px; }
}

/* Мобильная версия: компактные карточки услуг, текст остаётся читаемым */
@media (max-width: 767px) {
  .service-card__header { padding: 24px 20px 20px; }
  .service-card__crown { top: 16px; right: 16px; width: 28px; height: 28px; }
  .service-card--featured .service-card__title { padding-right: 40px; }
  .service-card__title { margin-bottom: 8px; font-size: 22px; line-height: 28px; }
  .service-card__text { font-size: 14px; line-height: 20px; }
  .service-card__price { margin-top: 12px; font-size: 24px; line-height: 32px; }
  .service-card__body { padding: 20px; }
  .service-card__list { gap: 8px; margin-bottom: 0; }
  .service-card__list li { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 20px; }
  .service-card__list li::before { width: 14px; height: 7px; margin: 5px 0 0 3px; }
  .service-card__action { min-height: 44px; font-size: 14px; line-height: 20px; }
}

/* Цена и срок в одной строке */
.service-card__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 8px; }
.service-card__row .service-card__price { margin: 0; }
@media (min-width: 768px) { .service-card__row { flex-direction: column; align-items: flex-start; gap: 0; } }
.service-card__term { margin: 0; color: var(--s-text); font-size: 15px; line-height: 24px; white-space: nowrap; }
@media (max-width: 767px) {
  /* Порядок на телефоне: название, цена | срок, что входит, внизу описание */
  .service-card { padding: 24px 20px; }
  .service-card__header, .service-card__body { display: contents; }
  .service-card__title { order: 1; margin: 0; }
  .service-card__row { order: 2; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; margin: 12px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--s-line-soft); }
  .service-card__row .service-card__price { padding-right: 0; }
  .service-card__term { padding-left: 0; border-left: 0; font-size: 15px; line-height: 24px; }
  .service-card__list { order: 3; margin: 16px 0 0; }
  .service-card__action { display: none; }
  /* Описание всегда внизу карточки, линия над ним на одной высоте во всех карточках слайдера */
  .service-card__list { margin-bottom: 16px; }
  .service-card__text { order: 4; box-sizing: border-box; min-height: 76px; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--s-line-soft); }
  .service-card--featured .service-card__row, .service-card--featured .service-card__text { border-color: #f2d3dc; }
}
@media (max-width: 380px) {
  .service-card__text { min-height: 96px; }
  .service-card__row .service-card__price { font-size: 22px; }
}

/* Корона-бейдж на верхней границе премиум-карточки (от планшета), название занимает всю ширину */
@media (min-width: 768px) {
  .service-card__crown { top: -18px; right: 20px; width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: #fff; box-sizing: border-box; }
  .service-card--featured .service-card__title { padding-right: 0; }
}

/* Телефон: слайдер. Все 6 карточек лежат в HTML сразу, свайп листает по одной (scroll-snap, без JS) */
@media (max-width: 767px) {
  .services__grid {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 12px;
    max-width: none;
    margin: 32px calc(50% - 50vw) 0;
    padding: 0 20px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .services__grid::before, .services__grid::after { display: none; }
  .service-card { flex: 0 0 min(79vw, 340px); scroll-snap-align: start; }
  /* 12 Nov 2026, CORP-FEATURE-20261112 (Timur): in the mobile ribbon the corporate card (service-2) goes first, the others keep their order; desktop grid unchanged */
  .services__grid > .service-card[aria-labelledby="service-2-title"] { order: -1; }
  /* Голубая заливка с волной уходит с сетки на саму секцию, чтобы её не обрезал слайдер */
  .services { --s-top: 220px; background: linear-gradient(var(--s-fill), var(--s-fill)) 0 calc(var(--s-top) + var(--s-wave) - 1px) / 100% 100% no-repeat; }
  .services::before {
    content: "";
    position: absolute;
    top: var(--s-top);
    left: 0;
    width: 100%;
    height: var(--s-wave);
    background: url("../img/home-wave.svg") center / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
  }
}

/* ==== section-head.css ==== */
/* Общая шапка секции: заголовок H2 по стандарту сайта, надзаголовок, при необходимости кнопка справа. */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; text-align: left; }
.section-head__intro { min-width: 0; }
.section-head__kicker { display: block; margin-bottom: 14px; color: #cc3358; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.section-head__title { margin: 0; color: #343434; font-size: 40px; line-height: 48px; font-weight: 700; }
.section-head__title + .section-head__kicker { margin: 14px 0 0; }

/* Кнопка-ссылка в шапке секции */
.head-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 24px;
  border: 1px solid #dfe3e8;
  border-radius: 60px;
  background: #fff;
  color: #151515;
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s;
}
.head-link svg { flex: 0 0 32px; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: #cc3358; color: #fff; transition: transform .2s; }
.head-link:hover { border-color: #cc3358; }
.head-link:hover svg { transform: translateX(2px); }
.head-link:focus-visible { outline: 2px solid #cc3358; outline-offset: 4px; }

@media (max-width: 830px) {
  .section-head__title { font-size: 36px; line-height: 48px; }
  .section-head__kicker { font-size: 16px; }
}
@media (max-width: 767px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .section-head__kicker { margin-bottom: 10px; }
  .section-head__title + .section-head__kicker { margin: 10px 0 0; }
}
@media (max-width: 480px) {
  .section-head__title { font-size: 22px; line-height: 30px; }
  .section-head__kicker { font-size: 15px; line-height: 20px; }
}

/* Старые шапки секций (.newzagolovki): тот же отступ надзаголовок-H2, что у «Наших последних работ» */
#layout-content .newzagolovki > :is(span, h1, h2, h3):first-child { display: block; margin: 0 0 14px; line-height: 24px; }
@media (max-width: 767px) {
  #layout-content .newzagolovki > :is(span, h1, h2, h3):first-child { margin-bottom: 10px; }
}

/* Мобильная версия: шапка секции по центру, кнопка «Смотреть еще» уходит под ленту на всю ширину сетки */
@media (max-width: 767px) {
  :is(.smionas, .news, .clients) > .container { display: flex; flex-direction: column; }
  :is(.smionas, .news, .clients) > .container > * { min-width: 0; }
  :is(.smionas, .news, .clients) .section-head { display: contents; }
  :is(.smionas, .news, .clients) .section-head__intro { margin-bottom: 32px; text-align: center; }
  :is(.smionas, .news, .clients) .head-link { order: 2; align-self: stretch; justify-content: space-between; margin-top: 24px; }
  .newsmi.owl-carousel .owl-nav { display: none; }
  .abilities .section-head__intro { text-align: center; }
}

/* ==== clients.css ==== */
/* Наши клиенты: заголовок слева, кнопка справа, бегущая лента из логотипов в светло-серых плитках. */
.clients {
  --k-brand: #cc3358; --k-ink: #151515; --k-tile: #f7fafb; --k-line: #dfe3e8;
  --k-gap: 16px; --k-count: 5; --k-height: 88px;
  --k-pitch: calc((100cqw - (var(--k-count) - 1) * var(--k-gap)) / var(--k-count) + var(--k-gap));
  margin-top: 96px;
  padding-bottom: 80px;
}
.clients__marquee {
  container-type: inline-size;
  overflow: hidden;
}
.clients__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: clients-step 84s infinite;
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }
.clients__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100cqw - (var(--k-count) - 1) * var(--k-gap)) / var(--k-count));
  height: var(--k-height);
  margin: 0 var(--k-gap) 0 0;
  padding: 0;
  border-radius: 12px;
  background: var(--k-tile);
}
.clients__logo { display: block; object-fit: contain; }
.clients__logo--banner { width: 78%; height: auto; }
.clients__logo--wide { width: 66%; height: auto; }
.clients__logo--square { width: auto; height: 56%; max-width: 62%; }
.clients__logo--tall { width: auto; height: 62%; }
/* Лента листается по одной плитке: пауза, когда 5 плиток стоят ровно по краям контейнера, затем сдвиг */
@keyframes clients-step {
  0.0000%, 4.0476% { transform: translateX(calc(-1 * 0 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  4.7619%, 8.8095% { transform: translateX(calc(-1 * 1 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  9.5238%, 13.5714% { transform: translateX(calc(-1 * 2 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  14.2857%, 18.3333% { transform: translateX(calc(-1 * 3 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  19.0476%, 23.0952% { transform: translateX(calc(-1 * 4 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  23.8095%, 27.8571% { transform: translateX(calc(-1 * 5 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  28.5714%, 32.6190% { transform: translateX(calc(-1 * 6 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  33.3333%, 37.3810% { transform: translateX(calc(-1 * 7 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  38.0952%, 42.1429% { transform: translateX(calc(-1 * 8 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  42.8571%, 46.9048% { transform: translateX(calc(-1 * 9 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  47.6190%, 51.6667% { transform: translateX(calc(-1 * 10 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  52.3810%, 56.4286% { transform: translateX(calc(-1 * 11 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  57.1429%, 61.1905% { transform: translateX(calc(-1 * 12 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  61.9048%, 65.9524% { transform: translateX(calc(-1 * 13 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  66.6667%, 70.7143% { transform: translateX(calc(-1 * 14 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  71.4286%, 75.4762% { transform: translateX(calc(-1 * 15 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  76.1905%, 80.2381% { transform: translateX(calc(-1 * 16 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  80.9524%, 85.0000% { transform: translateX(calc(-1 * 17 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  85.7143%, 89.7619% { transform: translateX(calc(-1 * 18 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  90.4762%, 94.5238% { transform: translateX(calc(-1 * 19 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  95.2381%, 99.2857% { transform: translateX(calc(-1 * 20 * var(--k-pitch))); animation-timing-function: ease-in-out; }
  100% { transform: translateX(calc(-1 * 21 * var(--k-pitch))); }
}

@media (max-width: 1023px) {
  .clients { --k-count: 4; }
}
@media (min-width: 1024px) {
  .clients__logo--wide { width: 70%; }
  .clients__logo--square { height: 60%; max-width: 64%; }
  .clients__logo--tall { height: 66%; }
}
@media (max-width: 767px) {
  .clients { --k-count: 3; --k-gap: 12px; --k-height: 72px; margin-top: 64px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients__marquee { overflow-x: auto; }
  .clients__track { animation: none; }
  .clients__item[aria-hidden="true"] { display: none; }
}

/* ==== news.css ==== */
/* Статьи и советы: карточки без рамки, фото со скруглением, круглые стрелки по бокам. Высота подстраивается под видимые карточки. Тексты не изменены. */
.news { --n-brand: #cc3358; --n-ink: #151515; margin-top: 96px; }
.newsmi.owl-carousel { width: 100%; margin: 0; }
.newsmi .owl-stage { display: flex; align-items: flex-start; }
.newsmi .item {
  width: 100%;
  padding: 0;
  color: #555;
  font-size: 14px;
  line-height: 19px;
}
.newsmi.owl-carousel .owl-item .item img { display: block; width: 100%; height: 235px; margin: 0 0 20px; border-radius: 20px; object-fit: cover; transition: opacity .25s; }
.newsmi .item:hover img { opacity: .88; }
.newsmi .excerpt { margin: 0 0 12px; color: var(--n-ink); font-size: 18px; line-height: 26px; transition: color .25s; }
.newsmi .item:hover .excerpt { color: var(--n-brand); }

.newsmi .owl-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -64px;
  right: -64px;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
}
.newsmi.owl-carousel .owl-nav button:is(.owl-prev, .owl-next) {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #dfe3e8;
  border-radius: 50%;
  background: #fff;
  color: var(--n-ink);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .2s, color .2s, border-color .2s;
}
.newsmi.owl-carousel .owl-nav button:is(.owl-prev, .owl-next) span { display: none; }
.newsmi.owl-carousel .owl-nav button:is(.owl-prev, .owl-next)::before {
  content: "";
  position: absolute;
  inset: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.newsmi.owl-carousel .owl-nav button.owl-next::before { transform: scaleX(-1); }
.newsmi.owl-carousel .owl-nav button:is(.owl-prev, .owl-next):hover { border-color: var(--n-brand); background: var(--n-brand); color: #fff; }
.newsmi.owl-carousel .owl-nav button:is(.owl-prev, .owl-next):focus-visible { outline: 2px solid var(--n-brand); outline-offset: 4px; }

/* Нет места по бокам контейнера: стрелки под лентой по центру */
@media (max-width: 1339px) {
  .newsmi.owl-carousel .owl-nav { position: static; margin-top: 24px; justify-content: center; gap: 16px; }
}
@media (max-width: 767px) {
  .news { margin-top: 64px; }
}

/* ==== section-waves.css ==== */
/* Фирменная голубая волна на секции: гребень начинается выше контента, заливка до низа, нижняя волна после секции. */
.abilities, .doverie {
  --w-wave: var(--home-wave-height, 144px); --w-fill: #e8f9ff; --w-lift: var(--home-wave-height, 144px);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-block: 40px 64px;
  background: linear-gradient(var(--w-fill), var(--w-fill)) left bottom / 100% calc(100% - var(--w-wave) + var(--w-lift) + 1px) no-repeat;
}
:is(.abilities, .doverie)::before,
:is(.abilities, .doverie)::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--w-wave);
  background: url("../img/home-wave.svg") center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
:is(.abilities, .doverie)::before { top: calc(var(--w-lift) * -1); }
:is(.abilities, .doverie)::after { top: calc(100% - 1px); transform: rotate(180deg); }

/* ==== abilities.css ==== */
/* Также мы можем: компактная таблица услуг на белом фоне, 3 колонки, ряд на каждую группу услуг. */
.abilities {
  --a-brand: #cc3358; --a-ink: #151515; --a-muted: #8a909b; --a-line: rgba(21, 21, 21, .1); --a-soft: #fdf1f4; --a-mark: #eceef2;
  margin-top: 96px;
}
.abilities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--a-line);
}
.abilities__item { margin: 0; padding: 0; border-bottom: 1px solid var(--a-line); }
.abilities__item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--a-line); }
.abilities__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 16px;
  color: var(--a-ink);
  text-decoration: none;
  transition: background-color .2s;
}
.abilities__mark {
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #fff;
  color: #8a97a6;
  transition: border-color .2s, color .2s, background-color .2s;
}
.abilities__check { display: block; width: 16px; height: 16px; }
.abilities__text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.abilities__name { font-size: 16px; line-height: 24px; font-weight: 600; transition: color .2s; }
.abilities__group { color: var(--a-muted); font-size: 13px; line-height: 24px; }
.abilities__arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 4px;
  margin-left: -4px;
  border-radius: 6px;
  color: var(--a-muted);
  transition: background-color .2s, color .2s;
}
.abilities__link:hover, .abilities__link:focus-visible { background: var(--a-soft); }
.abilities__link:hover .abilities__name, .abilities__link:focus-visible .abilities__name { color: var(--a-brand); }
.abilities__link:hover .abilities__mark, .abilities__link:focus-visible .abilities__mark { border-color: var(--a-brand); background: #fff; color: var(--a-brand); }
.abilities__link:hover .abilities__arrow, .abilities__link:focus-visible .abilities__arrow { background: var(--a-brand); color: #fff; }
.abilities__link:focus-visible { outline: 2px solid var(--a-brand); outline-offset: -2px; }

@media (max-width: 899px) {
  .abilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abilities__item:not(:nth-child(3n + 1)) { border-left: 0; }
  .abilities__item:nth-child(even) { border-left: 1px solid var(--a-line); }
}
@media (max-width: 599px) {
  .abilities { margin-top: 64px; }
  .abilities__link { gap: 6px; min-height: 0; padding: 12px 6px; }
  .abilities__mark { flex-basis: 26px; width: 26px; height: 26px; }
  .abilities__check { width: 14px; height: 14px; }
  .abilities__name { font-size: 14px; line-height: 18px; }
  .abilities__group { font-size: 11px; line-height: 16px; white-space: nowrap; }
  .abilities__arrow { display: none; }
}

/* Ручной перенос названий только на телефоне */
.abilities__br { display: none; }
@media (max-width: 599px) { .abilities__br { display: inline; } }
@media (max-width: 380px) { .abilities__name { font-size: 13px; } .abilities__group { font-size: 10px; } }

/* ==== TEST: deltas kept on test.abc-design.kz ==== */
/* Moderate spacing between blocks with waves (agreed 12 Nov): 32 px on PC, 24 px on phones instead of 64 px */
#layout-content { --home-wave-gap: 32px; }
@media (max-width: 767px) { #layout-content { --home-wave-gap: 24px; } }
/* Home FAQ: full width of its container on phones (the shared revision rule adds a 60px right margin meant for the service pages) */
#layout-content > .abc-home-faq .abc-faq-details { margin-right: 0; }
/* Team ribbon: lazy tool icons are not yet loaded in the off-screen cards; WebKit blew them up to the card width (253x253) */
@media (max-width: 767px) { .newcomand .socialcomand img { width: 40px; height: 40px; } }
/* Tariff names on narrow phones wrap only between whole words (the reference shows «Корпоративны / й» at 320 px) */
@media (max-width: 767px) { .service-card__title { overflow-wrap: break-word; word-break: normal; hyphens: manual; } }
@media (max-width: 380px) { .service-card--featured .service-card__title { padding-right: 32px; font-size: 21px; } }

/* ==== TEST: 12 Nov, second round ==== */
/* Lower wave of the tariffs: the reference centring (left:50% + translateX(-50%)) combined with the animated scale/translate of waves.css
   left a white rectangular notch at the right edge. Same geometry as before the transfer: left edge at the viewport edge, no translateX. */
.services__grid::before, .services__grid::after { left: calc(50% - 50vw); transform: none; }
.services::after { left: calc(50% - 50vw); transform: rotate(180deg); }

/* Timur: no carousel arrows on the home page on PC (all pairs, incl. both in the media block); phones keep them */
@media (min-width: 768px) {
  #layout-content .abc-nav { display: none !important; }
  #layout-content .newsmi .owl-nav { display: none !important; }
  .abc-news-dots { display: none !important; }
}
@media (max-width: 767px) {
  /* red media cards (Qazaqstan/Tengri/Forbes): no arrows on phones either, the dots and swipe stay */
  #layout-content .smiowl + .abc-nav { display: none !important; }
  /* video carousel: more room after its arrows before the red cards */
  #layout-content .videoowl + .abc-nav { margin-bottom: 32px; }
  /* articles: dots instead of arrows */
  #layout-content .newsmi ~ .abc-nav { display: none !important; }
  .abc-news-dots { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
  .abc-news-dots__dot { position: relative; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .abc-news-dots__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #d6d9df; transition: background-color .2s, transform .2s; }
  .abc-news-dots__dot[aria-current="true"]::before { background: #cc3358; transform: scale(1.25); }
  .abc-news-dots__dot:focus-visible { outline: 2px solid #cc3358; outline-offset: 0; border-radius: 50%; }

  /* Timur: smaller spaces between the wavy sections on phones (desktop unchanged) */
  #layout-content { --home-wave-gap: 16px; }
  #layout-content > :is(.otzyvy, .nasha-komanda2) { padding-block: 24px; }
  #layout-content > :is(.abilities, .doverie) { padding-block: 24px 32px; }
  .services { padding-bottom: 32px; }
}

/* ==== TEST: 12 Nov, item 12. Home only (this file is loaded only on the home page): the space between the last FAQ question and the
   blue footer was the sum of the last question's margin (40/80), the FAQ padding (80) and the footer margin (20/60) = 140/220 px.
   Now one value: 64 px on PC, 48 px on phones. The footer itself is unchanged. ==== */
#layout-content > .abc-home-faq .abc-faq-details:last-of-type,
#layout-content > .abc-home-faq .abc-faq-details:last-of-type > details:last-of-type { margin-bottom: 0; }
#layout-content > .abc-home-faq { padding-bottom: 64px; }
.abc-classic-footer > .footer { margin-top: 0; }
@media (max-width: 767px) { #layout-content > .abc-home-faq { padding-bottom: 48px; } }

/* 12 Nov 2026, heading map: the former H2/H3 kickers of «Почему заказать сайт…» and «Создание веб-сайтов по авторской методике»
   are now plain paragraphs (.abc-kicker) with the same look as the former headings */
.exlusive .newzagolovki p.abc-kicker, .nasha-komanda2 .newzagolovki p.abc-kicker { font-weight: 700; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: #cc3358; }
#layout-content .newzagolovki > p.abc-kicker:first-child { display: block; margin: 0 0 14px; line-height: 24px; }
@media (max-width: 830px) {
  .exlusive .newzagolovki p.abc-kicker, .nasha-komanda2 .newzagolovki p.abc-kicker { font-size: 16px; }
}
@media (max-width: 767px) {
  #layout-content .newzagolovki > p.abc-kicker:first-child { margin-bottom: 10px; }
}
@media (max-width: 480px) {
  .exlusive .newzagolovki p.abc-kicker, .nasha-komanda2 .newzagolovki p.abc-kicker { font-size: 15px; }
}

/* 12 Nov 2026: the new longer service descriptions (Timur's texts) wrap on phones instead of running into the next column */
@media (max-width: 599px) {
  .abilities__group { white-space: normal; overflow-wrap: break-word; }
}

/* TEST: 12 Nov 2026, ROW-ORDER-20261112. Services ribbon arrows only: the disabled arrow at the start/end stays fully visible
   (was opacity .35 from the shared nav.css). It stays disabled, nothing else of the shared carousel buttons changes. */
.services__grid + .abc-nav .abc-nav__btn:disabled { opacity: 1; }

/* 12 Nov 2026, test home only: share intrinsic header tracks within each
   service-card row, keeping the title, description, price/term and separator
   aligned without fixed heights. The mobile ribbon keeps its existing flow.
   Four tracks per card replace one former row; the wave still begins at the
   second visual row and ends at the existing grid bottom. */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    #services .services__grid {
      grid-template-rows: repeat(8, auto);
    }
    #services .services__grid > .service-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 4;
      row-gap: 0;
    }
    #services .service-card > .service-card__header {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 3;
      row-gap: 0;
      min-width: 0;
    }
    #services .services__grid::before,
    #services .services__grid::after {
      grid-row: 5 / -1;
    }
    @media (max-width: 1023px) {
      #services .services__grid {
        grid-template-rows: repeat(12, auto);
      }
    }
  }
}