@media (max-width: 1440px) {
  .floating-cta {
    bottom: 16px;
  }
}

@media (max-width: 1280px) {
  .container {
    padding-left: 48px;
    padding-right: 48px;
  }

  .about__layout {
    grid-template-columns: 700px minmax(0, 1fr);
  }

  .doctor-page {
    padding-top: 133px;
    padding-bottom: 72px;
  }

  .doctor-page .breadcrumbs {
    margin-bottom: 40px;
  }

  .doctor-page .doctor-page__profile {
    margin-bottom: 72px;
  }

  .doctor-page .doctor-card {
    max-width: 982px;
    gap: 28px;
  }

  .doctor-page .doctor-card__media {
    flex-basis: 377px;
  }

  .doctor-page .doctor-card__media img {
    width: 377px;
    height: 377px;
  }

  .doctor-page .doctor-card__content {
    padding-right: 28px;
  }

  .doctor-page .cv {
    max-width: 982px;
  }

  .service-page {
    padding-top: 133px;
    padding-bottom: 72px;
  }

  .service-page__breadcrumbs {
    margin-bottom: 40px;
  }

  .service-page__hero {
    grid-template-columns: minmax(360px, 470px) minmax(0, 1fr);
    gap: 32px;
    margin-bottom: 72px;
  }

  .service-page__title {
    font-size: 34px;
  }

  .service-page__actions {
    margin-bottom: 72px;
  }
}

@media (max-width: 1100px) {
  .about__layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .about .splide__slide img {
    width: 100%;
    height: 420px;
  }
}

@media (max-width: 991px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .topbar {
    height: 72px;
    padding: 10px 24px;
  }

  .topbar__inner {
    gap: 24px;
  }

  .topbar__right {
    gap: 18px;
  }

  .topbar__item {
    font-size: 16px;
  }

  .topbar__lang {
    font-size: 16px;
  }

  .hero {
    padding-top: 114px;
    padding-bottom: 56px;
  }

  .hero__content,
  .hero .container {
    --hero-gap: 40px;
    gap: var(--hero-gap);
  }

  .hero-nav__list {
    gap: 16px 20px;
  }

  .hero__title {
    max-width: 620px;
    font-size: 32px;
  }

  .doctor-page {
    padding-top: 100px;
  }

  .doctor-page .breadcrumbs {
    margin-bottom: 30px;
  }

  .service-page {
    padding-top: 100px;
  }

  .service-page__hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-page__hero .service-page__media {
    margin: 0 auto;
  }

  .service-page__media {
    max-width: 720px;
    max-height: 350px;
  }
}

@media (max-width: 898px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section-title {
    font-size: 20px;
  }

  .topbar {
    height: 55px;
    padding: 0 16px;
  }

  .topbar .container {
    padding-left: 0;
    padding-right: 0;
  }

  .topbar__inner {
    gap: 16px;
  }

  .topbar__left {
    gap: 12px;
  }

  .topbar__brand {
    display: none;
  }

  .topbar__right {
    gap: 12px;
  }

  .topbar__item {
    gap: 0;
  }

  .topbar__item span {
    display: none;
  }

  .topbar__item--icon {
    display: flex;
  }

  .topbar__icon {
    width: 24px;
    height: 24px;
  }

  .topbar__lang-dropdown {
    width: 50px;
    flex: 0 0 50px;
  }

  .topbar__lang {
    width: 50px;
    height: 28px;
    padding: 0 4px;
    font-size: 13px;
    gap: 4px;
  }

  .topbar__lang-dropdown.is-open .topbar__lang {
    width: 50px;
    height: 28px;
    padding: 0 4px;
  }

  .topbar__lang-menu {
    top: 28px;
    width: 100px;
  }

  .topbar__lang-option {
    height: 28px;
    padding: 0 4px;
    font-size: 14px;
  }

  .topbar__menu-btn {
    display: inline-flex;
  }

  .topbar__contact-desktop {
    display: none;
  }

  .topbar__contact-trigger--mobile {
    display: inline-flex;
  }

  .topbar__right {
    gap: 16px;
  }

  main {
    margin-top: 0;
    transition: none;
  }

  .hero-wrap {
    padding-top: var(--header-reveal-shift);
    transition: padding-top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .topbar__reveal {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    will-change: height;
    transition: height 0.68s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .topbar__reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0E332C;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
    z-index: 0;
  }

  .site-header.is-reveal-open .topbar__reveal {
    pointer-events: auto;
  }

  .topbar__reveal-inner {
    position: relative;
    z-index: 1;
    transform: translateY(-14px);
    transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .site-header.is-reveal-open .topbar__reveal-inner {
    transform: translateY(0);
  }

  .topbar__reveal-viewport {
    position: relative;
  }

  .topbar__reveal-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
  
    transition:
      opacity 0.20s ease,
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.28s;
  }

  .topbar__reveal-item.is-active,
  .topbar__reveal-item.is-measuring {
    display: block;
  }

  .topbar__reveal-item.is-visible,
  .topbar__reveal-item.is-leaving,
  .topbar__reveal-item.is-measuring {
    visibility: visible;
  }

  .topbar__reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .topbar__reveal-item.is-leaving {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }

  .topbar__reveal-item.is-measuring {
    position: relative;
    opacity: 0;
    transform: none;
    pointer-events: none;
  }

  .topbar__reveal-item--phone {
    font-size: 20px;
    padding: 12px 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--c-white);
    text-decoration: none;
    text-align: center;
  }

  .topbar__reveal-item--address {
    color: var(--c-white);
  }
  
  .topbar__reveal-address-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
  }

  .topbar__reveal-address-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
  }

  .topbar__reveal-map {
    height: 120px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }

  .topbar__reveal-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .hero {
    min-height: 189px;
    padding-top: 92px;
    padding-bottom: 48px;
  }

  .hero__content,
  .hero .container {
    --hero-gap: 18px;
    gap: var(--hero-gap);
  }

  .hero-nav {
    display: none;
  }

  .hero__mobile-logo {
    display: block;
    width: 122px;
    max-width: 60vw;
    height: auto;
  }

  .hero__title {
    max-width: 470px;
    font-size: 24px;
    line-height: 1.2;
  }

  .hero__decoration {
    bottom: -33px;
    width: min(100%, 100px);
  }

  .mobile-menu__logo {
    width: 122px;
  }

  .doctor {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .doctor-card {
    margin: 40px auto 0;
  }

  .doctor-card__content {
    gap: 10px;
  }

  .doctor-card__media {
    flex: 0 0 339px;
  }

  .doctor-card__media img {
    height: 339px;
    width: 339px;
  }

  .doctor-card__actions {
    margin-top: 10px;
  }

  .doctor-card__name {
    font-size: 18px;
  }

  .doctor-card__degree, .doctor-card__specialty {
    font-size: 16px;
  }

  .doctor-card__contact, .doctor-card__city  {
    font-size: 16px;
  }

  .services, .about {
    padding-bottom: 64px;
  }

  .services__link {
    font-size: 16px;
  }

  .about .splide__slide img {
    height: 332px;
  }

  .about__content {
    padding: 0 16px;
  }

  .about__content p {
    font-size: 14px;
  }

  .why__panel {
    max-width: none;
    width: calc(100% - 24px);
    margin: 40px auto 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
  }

  .why__panel::before,
  .why__panel::after {
    width: 80px;
    height: 14px;
  }

  .why__panel::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/icons/benefits-edge-top.svg");
  }

  .why__panel::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background-image: url("../assets/icons/benefits-edge-bot.svg");
  }

  .why__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 20px 24px;
  }

  .why__item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    min-height: 132px;
    padding: 24px 20px;
  }

  .why__item + .why__item {
    border-left: 0;
    border-top: 0;
  }

  .why__item:nth-child(2n) {
    border-left: 2px solid var(--c-white-20);
  }

  .why__item:nth-child(n + 3) {
    border-top: 2px solid var(--c-white-20);
  }

  .why__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
  }

  .health {
    display: none;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;

    grid-template-areas:
      "blog"
      "contacts"
      "links";
  }

  .footer__title {
    text-align: center;
  }
  
  .footer__column--contacts, 
  .footer__column--links { 
    max-width: 400px;
  }

  .footer__articles { 
    max-width: 650px;
    flex-direction: row;
  }

  .footer__column {
    margin: 0 auto;
  }

  .footer__column--links h3 {
    display: none;
  }

  .footer__links {
    align-items: center;
  }

  .footer__map-wrap,
  .footer__map-wrap iframe {
    width: 100%;
  }

  .footer__label,
  .footer__value,
  .footer__address {
    font-size: 18px;
  }

  .doctor-page {
    padding-top: 80px;
  }

  .doctor-page .breadcrumbs {
    margin-bottom: 32px;
  }

  .doctor-page .doctor-page__profile {
    margin-bottom: 56px;
  }

  .doctor-page .doctor-card {
    gap: 20px;
    margin-top: 0;
  }

  .doctor-page .doctor-card__media {
    flex-basis: 320px;
  }

  .doctor-page .doctor-card__media img {
    width: 320px;
    height: 320px;
  }

  .doctor-page .cv__title,
  .doctor-page .cv__item {
    font-size: 16px;
  }

  .service-page {
    padding-top: 80px;
    padding-bottom: 64px;
  }

  .service-page__breadcrumbs {
    margin-bottom: 32px;
  }

  .service-page__hero {
    margin-bottom: 56px;
  }

  .service-page__content {
    gap: 24px;
  }

  .service-page__title {
    font-size: 28px;
  }

  .service-page__price {
    font-size: 22px;
  }

  .service-page__actions {
    margin-bottom: 64px;
  }
}

@media (max-width: 670px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .btn {
    font-size: 14px;
  }

  .doctor-card {
    gap: 15px;
  }

  .doctor-card__header {
    gap: 0;
  }

  .doctor-card__details {
    gap: 0;
  }

  .doctor-card__media {
    flex: 0 0 250px;
  }

  .doctor-card__media img {
    width: 250px;
  }

  .why {
    padding-bottom: 64px;
  }

  .why__panel {
    max-width: 343px;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
  }

  .why__panel::before,
  .why__panel::after {
    width: 80px;
    height: 14px;
  }

  .why__panel::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("../assets/icons/benefits-edge-top.svg");
  }
  
  .why__panel::after {
    top: auto;
    right: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background-image: url("../assets/icons/benefits-edge-bot.svg");
  }

  .why__list {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px 24px;
  }

  .why__item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 24px 0;
    gap: 16px;
  }

  .why__item + .why__item {
    border-left: 0;
    border-top: 2px solid var(--c-white-20);
  }

  .why__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
  }

  .service-page__media {
    max-height: 250px;
  }
}

@media (max-width: 500px) {
  /* Hero: фото полосой сверху, текст на сплошном зелёном под ней.
     Раньше фото здесь убиралось совсем, потому что cover на таком высоком
     блоке зумит в середину кадра. Полоса фиксированной высоты показывает
     лицо и не мешает тексту. */
  .hero-wrap {
    background-color: #113f36;
    background-image:
      linear-gradient(
        to bottom,
        rgba(17, 63, 54, 0.28) 0px,
        rgba(17, 63, 54, 0.32) 170px,
        rgba(17, 63, 54, 0.93) 310px,
        rgba(17, 63, 54, 1) 380px
      ),
      url("../assets/img/hero-bg-mobile.jpg") !important;
    background-size: auto 400px, auto 400px !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  .hero {
    min-height: auto;
    padding-top: 272px;
    padding-bottom: 32px;
  }

  .hero__title {
    font-size: 26px;
    line-height: 1.25;
    max-width: 100%;
  }

  .hero__subtitle {
    font-size: 15px;
  }

  .hero__decoration {
    display: none;
  }

  .doctor {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .doctor__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 343px;
    margin: 0 auto 24px;
  }

  .doctor__mobile-btn {
    width: 100%;
  }

  .doctor__title {
    margin-top: 48px;
    text-align: center;
  }

  .doctor-card {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    padding: 0 0 24px;
    background: none;
    max-width: 100%;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
  }

  .doctor-card__media {
    flex: none;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
  }

  .doctor-card__media img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center center !important;
    border-radius: 20px;
  }

  .edge-decor--all::after {
    background-image: url("../assets/icons/benefits-edge-bot.svg");
    background-position: 50% 100%;
  }

  .doctor-card__content {
    width: 100%;
    padding: 0 8px;
    align-items: flex-start;
    gap: 16px;
  }

  .doctor-card__header {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .doctor-card__header-text {
    gap: 4px;
  }

  .doctor-card__exp-badge {
    padding: 6px 12px;
    font-size: 13px;
  }

  .doctor-card__name {
    font-size: 16px;
    line-height: 1.25;
  }

  .doctor-card__degree {
    font-size: 14px;
    line-height: 1.35;
  }

  .doctor-card__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--c-main-15);
    border-radius: 50%;
    background: #fff;
    text-decoration: none;
  }

  .doctor-card__more-icon img {
    width: 24px;
    height: 24px;
  }

  .doctor-card__actions {
    display: none;
  }

  /* Показываем резюме врача на мобилке */
  .doctor-card {
    max-width: 100% !important;
  }

  .doctor-card__details {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0;
  }

  .doctor-card__bio {
    font-size: 14px;
    line-height: 1.6;
  }

  .doctor-card__facts {
    font-size: 13px;
    line-height: 1.5;
    padding-left: 0;
    list-style: none;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .doctor-card__facts li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(17,63,54,0.1);
    font-size: 13px;
  }

  .doctor-card__row {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  /* Floating CTA - показываем на мобилке, ведёт на звонок */
  .floating-cta {
    display: flex;
  }

  .services__grid {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .services__list {
    width: 100%;
    flex: none;
    margin: 0;
    padding: 0;
  }

  .about .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* Container padding is zeroed just above so the About carousel can bleed to the
     screen edges. Put it back on the text blocks, otherwise the copy sits flush
     against both edges and reads as cut off. */
  .about .section-title,
  .about__intro,
  .about__seo-text {
    padding-left: 24px;
    padding-right: 24px;
  }

  .about .splide__slide img {
    border-radius: 0;
  }

  .doctor-page {
    padding-top: 76px;
    padding-bottom: 48px;
  }

  .doctor-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .doctor-page .breadcrumbs {
    gap: 0;
    margin-bottom: 24px;
  }

  .doctor-page .doctor-page__profile {
    gap: 16px;
    margin-bottom: 48px;
  }

  .doctor-page .doctor-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    max-width: 343px;
    padding: 0;
    background: transparent;
  }

  .doctor-page .doctor-card__media {
    width: 135px;
    height: 162px;
    margin: 0;
    flex-basis: 135px;
  }

  .doctor-page .doctor-card__media img {
    width: 135px;
    height: 162px;
    border-radius: 12px;
  }
  
  .doctor-page .edge-decor--all::after {
    background-image: url("../assets/icons/benefits-edge-right-white.svg");
    background-position: 100% 75%;
  }

  .doctor-page .doctor-card__content {
    flex: 1 1 auto;
    padding: 0;
    gap: 16px;
  }

  .doctor-page .doctor-card__header {
    align-items: flex-start;
    gap: 12px;
  }

  .doctor-page .doctor-card__header-text {
    gap: 8px;
  }

  .doctor-page .doctor-card__name {
    font-size: 20px;
    line-height: var(--lh-tight);
  }

  .doctor-page .doctor-card__degree {
    display: none;
  }

  .doctor-page .doctor-card__specialty,
  .doctor-page .doctor-card__contact,
  .doctor-page .doctor-card__city {
    font-size: 16px;
    line-height: var(--lh-relaxed);
  }

  .doctor-page .doctor-card__details {
    display: flex;
    gap: 1px;
  }

  .doctor-page .doctor-card__row {
    gap: 8px;
  }

  .doctor-page .doctor-card__actions {
    display: none;
  }

  .doctor-page .doctor-card__more-icon {
    display: none
  }

  .doctor-page .doctor-card__more-icon img {
    width: 20px;
    height: 20px;
  }

  .doctor-page .doctor-page__cta {
    display: inline-flex;
    max-width: 343px;
    margin: 0 auto;
  }

  .doctor-page .cv {
    gap: 28px;
    max-width: 343px;
  }

  .doctor-page .cv__section {
    gap: 10px;
    padding-bottom: 20px;
    border-bottom-width: 2px;
  }

  .doctor-page .cv__title {
    font-size: 16px;
  }

  .doctor-page .cv__content {
    gap: 10px;
  }

  .doctor-page .cv__item {
    font-size: 16px;
  }

  .doctor-page .cv__toggle {
    display: inline-flex;
    margin: 0 auto;
  }

  .doctor-page .cv__section--collapsible .cv__content {
    height: auto;
    overflow: visible;
    transition: height 0.32s ease;
    will-change: height;
  }

  .doctor-page .cv__section--collapsible.is-collapsible .cv__content {
    overflow: hidden;
  }

  .doctor-page .cv__section--collapsible .cv__toggle[hidden] {
    display: none;
  }

  .doctor-page .cv__section--collapsible .cv__toggle::after {
    transition: transform 0.32s ease;
  }

  .doctor-page .cv__section--collapsible.is-expanded .cv__toggle::after {
    transform: rotate(180deg);
  }

  .service-page {
    padding-top: 76px;
    padding-bottom: 48px;
  }

  .service-page .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .service-page__breadcrumbs {
    gap: 10px;
    margin-bottom: 24px;
  }

  .service-page .breadcrumbs__back {
    display: inline-flex;
  }

  .service-page .breadcrumbs__list {
    gap: 0;
  }

  .service-page__hero {
    gap: 20px;
    margin-bottom: 40px;
  }

  .service-page__media {
    border-radius: 16px;
  }

  .service-page .edge-decor--all::after {
    background-image: url("../assets/icons/benefits-edge-bot.svg");
    background-position: 50% 100%;
  }

  .service-page__content {
    gap: 20px;
  }

  .service-page__header {
    gap: 8px;
  }

  .service-page__title {
    font-size: 24px;
    line-height: 1.2;
  }

  .service-page__price {
    font-size: 20px;
    line-height: 1.35;
  }

  .service-page__block {
    gap: 12px;
    padding-bottom: 20px;
    border-bottom-width: 2px;
  }

  .service-page__block + .service-page__block {
    padding-top: 20px;
  }

  .service-page__subtitle,
  .service-page__block p,
  .service-page__list {
    font-size: 16px;
  }

  .service-page__list {
    gap: 10px;
    padding-left: 18px;
  }

  .service-page__actions {
    margin-bottom: 48px;
  }

  .service-page__cta {
    width: 100%;
  }

  .service-page-body .floating-cta {
    display: none;
  }
}

@media (max-width: 425px) {
  .mobile-menu__panel {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 100dvh;
    padding: 16px 16px 24px;
    border-radius: 0;
  }

  .footer__articles {
    flex-direction: column;
    max-width: 350px;
    text-align: center;
  }

  .footer__article {
    align-items: center;
  }

  .footer__article img {
    width: 75%;
  }

  .footer__article-title {
    font-size: 16px;
  }

  .footer__article-text {
    font-size: 14px;
  }

  .footer__title {
    font-size: 20px;
  }

  .footer__schedule dt, .footer__schedule dd {
    font-size: 16px;
  }

  .footer__address {
    font-size: 16px;
  }

  .footer__links a {
    font-size: 16px;
  }

  .service-page__media {
    max-width: 343px;
    max-height: 160px;
  }
}

@media (max-width: 375px) {

  .hero__title {
    max-width: 300px;
    font-size: 22px;
  }
}

/* ── Doctor cards: fold the credentials on phones ────────────────────────────
   Set up by js/doctor-cards.js, which adds .is-collapsible only below 670px.

   The first version kept the whole lead paragraph and folded only the
   credential list. That saved less than it looked: the leads run four to six
   lines, so a closed card was still around 800px and the five of them filled
   seven screens. A closed card now shows three lines of the lead and nothing
   else — enough to tell the doctors apart and decide whom to open.

   Clamping by line count rather than by a measured pixel height also survives a
   rotation, a late font swap and a language with longer words, none of which the
   measured version did without re-running on resize. */
@media (max-width: 670px) {
  .doctor-card__details.is-collapsible .doctor-card__bio {
    position: relative;
  }

  /* Everything after the lead — credential list, extra paragraphs, signature. */
  .doctor-card__details.is-collapsible .doctor-card__bio > *:not(:first-child) {
    display: none;
  }

  .doctor-card__details.is-collapsible .doctor-card__bio > p:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
  }

  .doctor-card__details.is-collapsible.is-open .doctor-card__bio > *:not(:first-child) {
    display: revert;
  }

  .doctor-card__details.is-collapsible.is-open .doctor-card__bio > p:first-child {
    display: block;
    overflow: visible;
  }

  .doctor-card__toggle {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px 14px;
    border: 1px solid rgba(17,63,54,.22);
    border-radius: 10px;
    background: transparent;
    color: #113f36;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .doctor-card__toggle:hover,
  .doctor-card__toggle:focus-visible {
    background: rgba(17,63,54,.06);
  }

  /* The long "about" copy: closed, it shows its first headed section. Hiding
     by child index rather than by height keeps the fold on a section boundary
     instead of halfway through a sentence. */
  .about__seo-text.is-collapsible > *:nth-child(n + 3) {
    display: none;
  }

  .about__seo-text.is-collapsible.is-open > *:nth-child(n + 3) {
    display: revert;
  }

  .about__seo-toggle {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 670px) {
  /* Two of the five doctors take bookings; the other three are consulting
     specialists and the clinic's director. Giving all five the same 200px
     portrait spent a screen apiece on people you cannot book, and made the
     director look like the head of urology. The three keep a portrait, at the
     size of a contact photo, beside their name instead of above it. */
  #doctor-petr .doctor-card,
  #doctor-chlumsky .doctor-card,
  .doctor-card#doctor-petr,
  .doctor-card#doctor-chlumsky,
  .doctor-card#doctor-eugeny {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }

  .doctor-card#doctor-petr .doctor-card__media,
  .doctor-card#doctor-chlumsky .doctor-card__media,
  .doctor-card#doctor-eugeny .doctor-card__media {
    width: 104px;
    height: 104px;
    flex: none;
    margin: 0;
  }

  .doctor-card#doctor-petr .doctor-card__media img,
  .doctor-card#doctor-chlumsky .doctor-card__media img,
  .doctor-card#doctor-eugeny .doctor-card__media img {
    width: 104px;
    height: 104px;
  }

  .doctor-card#doctor-petr .doctor-card__content,
  .doctor-card#doctor-chlumsky .doctor-card__content,
  .doctor-card#doctor-eugeny .doctor-card__content {
    min-width: 0;
    flex: 1;
  }

  /* The decorative corner marks are drawn for a 200px square and land in the
     middle of a 104px one. */
  .doctor-card#doctor-petr .doctor-card__media::after,
  .doctor-card#doctor-chlumsky .doctor-card__media::after,
  .doctor-card#doctor-eugeny .doctor-card__media::after {
    display: none;
  }
}

/* Above the breakpoint the button is hidden by the [hidden] attribute the
   script sets; this keeps it hidden even if a stylesheet resets [hidden]. */
.doctor-card__toggle[hidden] { display: none; }

/* ── Hero on phones ─────────────────────────────────────────────────────────
   The wide banner cropped to a phone cuts his face off, so phones get the
   portrait frame — but not as `cover`: this hero runs ~1200px tall (title,
   subtitle, four chips, slot button) and covering that zooms into his chest
   until the photo reads as a flat green field.

   So the photo takes a fixed band at the top, sized so his face falls inside
   it, and the gradient turns opaque just below, where the copy starts. The
   band is a photograph; everything under it is the brand green, deliberately. */
@media (max-width: 767px) {
  .hero-wrap {
    background-color: #113f36;
    background-image:
      linear-gradient(
        to bottom,
        rgba(17, 63, 54, 0.30) 0px,
        rgba(17, 63, 54, 0.34) 180px,
        rgba(17, 63, 54, 0.92) 330px,
        rgba(17, 63, 54, 1) 400px
      ),
      url("../assets/img/hero-bg-mobile.jpg");
    background-size: auto 430px, auto 430px;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
  }

  /* Start the copy below the band rather than across his face. */
  .hero {
    padding-top: 300px;
  }
}