@media (max-width:1100px) {
  :root {
    --header-h: 74px
  }

  .container {
    width: min(calc(100% - 38px), var(--container))
  }

  .main-nav {
    gap: 16px
  }

  .main-nav>a:not(.btn) {
    font-size: .74rem
  }

  .brand {
    width: 160px
  }

  .specialist-slide__body {
    padding: 48px
  }

  .about-grid {
    gap: 6vw
  }

  .about-media__badge {
    right: -12px
  }

  .section {
    padding: 95px 0
  }
}

@media (max-width:900px) {
  .topbar__links span {
    display: none
  }

  .site-header {
    color: #fff
  }

  .is-scrolled {
    color: var(--ink)
  }

  .nav-toggle {
    display: block;
    color: inherit;
    z-index: 3
  }

  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 390px);
    height: 100dvh;
    padding: 110px 34px 40px;
    background: rgba(250, 250, 247, .98);
    color: var(--ink) !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    transform: translateX(105%);
    transition: transform .35s ease;
    box-shadow: -20px 0 60px rgba(25, 12, 32, .12)
  }

  .main-nav.is-open {
    transform: translateX(0)
  }

  .main-nav>a {
    padding: 13px 0;
    font-size: .9rem !important;
    border-bottom: 1px solid rgba(75, 29, 109, .08)
  }

  .main-nav .nav-cta {
    margin-top: 16px;
    background: var(--primary);
    color: #fff;
    border: 0
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
  }

  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0
  }

  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
  }

  .nav-toggle span {
    transition: .3s
  }

  .hero__content {
    padding-top: 130px
  }

  .hero__copy {
    max-width: 680px
  }

  .hero__services {
    max-width: 700px
  }

  .specialties-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .specialty-card:last-child {
    grid-column: 1/-1;
    min-height: 400px
  }

  .specialist-slide {
    grid-template-columns: 1fr
  }

  .specialist-slide__photo {
    min-height: 430px
  }

  .specialist-slide__body {
    padding: 42px
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 70px
  }

  .about-media {
    max-width: 700px
  }

  .about-media__image {
    height: 600px
  }

  .about-content {
    max-width: 700px
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px
  }

  .stats article:nth-child(2) {
    border-right: 0
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .news-card:last-child {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: .8fr 1.2fr
  }

  .news-card:last-child .news-card__image {
    height: auto
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:620px) {
  .container {
    width: min(calc(100% - 28px), var(--container))
  }

  .topbar {
    display: none
  }

  .site-header {
    top: 0
  }

  .brand {
    width: 150px
  }

  .hero {
    min-height: 100svh
  }

  .hero__media {
    background-position: 62% center
  }

  .hero__overlay {
    background: linear-gradient(0deg, rgba(37, 15, 50, .94) 0%, rgba(57, 24, 75, .68) 62%, rgba(75, 29, 109, .18) 100%)
  }

  .hero__content {
    justify-content: flex-end;
    padding: 115px 0 72px
  }

  .hero h1 {
    font-size: clamp(2.55rem, 13vw, 4rem)
  }

  .hero__copy>p {
    font-size: .92rem
  }

  .hero__actions {
    gap: 8px
  }

  .hero__actions .btn {
    width: 100%
  }

  .hero__services {
    grid-template-columns: 1fr;
    margin-top: 38px;
    padding-top: 14px
  }

  .hero__services article,
  .hero__services article+article {
    padding: 10px 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14)
  }

  .hero__services article:last-child {
    border-bottom: 0
  }

  .scroll-hint {
    display: none
  }

  .section {
    padding: 76px 0
  }

  .section-heading,
  .section-heading.center {
    margin-bottom: 38px
  }

  .section-heading h2,
  .about h2 {
    font-size: clamp(2rem, 10vw, 3rem)
  }

  .specialties-grid {
    grid-template-columns: 1fr
  }

  .specialty-card,
  .specialty-card:last-child {
    grid-column: auto;
    min-height: 410px
  }

  .specialist-slide__photo {
    min-height: 330px
  }

  .specialist-slide__body {
    padding: 32px 24px
  }

  .specialist-meta {
    gap: 16px;
    flex-direction: column
  }

  .slider-controls {
    align-items: flex-end
  }

  .about-media__image {
    height: 470px;
    min-height: 0
  }

  .about-media__badge {
    right: 10px;
    bottom: 16px;
    padding: 17px 20px
  }

  .stats {
    padding: 52px 0 34px
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr
  }

  .stats article {
    padding: 16px 8px
  }

  .stats strong {
    font-size: 2.4rem
  }

  .news-grid {
    grid-template-columns: 1fr
  }

  .news-card:last-child {
    grid-column: auto;
    display: block
  }

  .news-card:last-child .news-card__image,
  .news-card__image {
    height: 220px
  }

  .cta {
    min-height: 560px
  }

  .cta h2 {
    font-size: clamp(2.35rem, 12vw, 3.5rem)
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .footer-bottom {
    flex-direction: column
  }

  .footer-bottom div {
    flex-wrap: wrap
  }

  .whatsapp-float {
    width: 50px;
    height: 50px;
    right: 14px;
    bottom: 14px
  }
}

@media (max-width:390px) {
  .hero h1 {
    font-size: 2.45rem
  }

  .btn {
    padding-inline: 18px
  }

  .specialty-card__content {
    padding: 24px
  }

  .specialist-slide__body {
    padding: 28px 20px
  }

  .about-media__image {
    height: 410px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important
  }

  #hero-canvas {
    display: none
  }
}