/* Shared phone and tablet layout. Loaded after the page styles. */
@media (max-width: 900px) {
  :root {
    --gutter: clamp(16px, 4vw, 32px);
    --section-gap: 64px;
  }
  .header__inner { gap: 12px; }
  .header__lang { margin-right: 4px; }
  .header__menu { min-height: 44px; }
  .header__nav { max-width: calc(100vw - var(--gutter) * 2); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .footer__cta-wrap { grid-column: 1 / -1; grid-row: auto; }
  .about__inner, .contacts__inner { width: var(--container); }
}
@media (max-width: 768px) {
  :root {
    --text-md: 20px;
    --text-email: clamp(30px, 8.5vw, 64px);
  }
  .header { top: 16px; }
  .header__logo, .header__logo-img, .header__logo img { height: 36px; }
  .header__lang { gap: 12px; }
  .header__lang-link { display: inline-flex; align-items: center; min-height: 44px; }
  .header__menu, .header__lang-link { font-size: 13px; }
  .header__nav-link { padding-block: 14px; }
  .hero__content { padding-top: 100px; padding-bottom: 48px; padding-inline: var(--gutter); }
  .hero__title { font-size: clamp(28px, 7.5vw, 48px); line-height: 1.15; }
  .hero__row { gap: 20px; }
  .hero__tagline, .hero__desc { max-width: 36ch; font-size: 12px; line-height: 1.6; }
  .hero__decor { width: 64px; height: auto; }
  .section-title { font-size: clamp(26px, 6vw, 40px); line-height: 1.2; }
  .tag { font-size: 12px; line-height: 1.5; }
  .approach__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
  .approach__icon { width: 100%; grid-column: auto; }
  .approach__bottom { gap: 16px; }
  .approach__text { max-width: 42ch; line-height: 1.6; }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .services__card { padding: 18px; min-height: 220px; gap: 24px; }
  .services__card-title { font-size: clamp(14px, 3.4vw, 20px); line-height: 1.35; overflow-wrap: anywhere; }
  .services__card-desc {
    display: none; position: static; font-size: 12px; line-height: 1.55; max-width: none;
  }
  .services__icon { display: block; width: 64px; height: 64px; left: 18px; bottom: 18px; }
  .services__arrow { width: 20px; height: 20px; right: 18px; }
  .services__arrow--2 { bottom: 18px; }
  .services__card:hover .services__card-desc,
  .services__card:focus-visible .services__card-desc,
  .services__card.is-expanded .services__card-desc {
    display: block; opacity: 1; transform: none;
  }
  .services__card.is-expanded { background: #fff; color: #070707; border-color: #fff; }
  .services__card.is-expanded .services__icon { opacity: 0; }
  .cases__head { gap: 16px; margin-bottom: 24px; }
  .cases__markers { gap: 12px; }
  .cases__marker { width: 28px; height: 28px; }
  .cases__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cases__item:nth-child(2), .cases__item:nth-child(3), .cases__item:nth-child(4), .cases__soon { grid-column: auto; grid-row: auto; }
  .cases__item { gap: 12px; min-width: 0; }
  .cases__media-link .cases__img, .cases__media-link .cases__video,
  .cases__media-link .cases__img--sm, .cases__media-link .cases__video.cases__img--sm {
    height: auto; min-height: 0; aspect-ratio: 4 / 3;
  }
  .cases__featured .cases__img { aspect-ratio: 16 / 9; }
  .cases__caption { align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; }
  .cases__caption .tag { font-size: 10px; }
  .cases__soon-card { gap: 12px; }
  .cases__soon-btn { min-height: 0; aspect-ratio: 4 / 3; padding: 12px; }
  .cases__soon-btn .btn__label { font-size: 12px; }
  .process { --process-item: min(320px, calc(100vw - var(--gutter) * 2)); --process-gap: 16px; }
  .process__head { margin-bottom: 24px; }
  .process__card, .process__figure { height: 240px; }
  .process__card-body { padding: 24px; }
  .process__card-title { font-size: 20px; }
  .process__card-text { font-size: 14px; line-height: 1.5; }
  .works { padding-top: 100px; }
  .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .works__img { height: auto; }
  .works__name { font-size: clamp(12px, 3vw, 17px); line-height: 1.4; overflow-wrap: anywhere; }
  .works__item { min-width: 0; gap: 10px; }
  .showreel__hero { padding-top: 100px; min-height: auto; padding-bottom: 32px; }
  .showreel__title { font-size: clamp(28px, 7vw, 44px); line-height: 1.2; }
  .showreel__media { border-radius: 10px; }
  .contacts__inner { padding: 100px 0 48px; }
  .contacts__head { margin-bottom: 32px; }
  .contacts__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contacts__link { gap: 8px; flex-wrap: wrap; }
  .contacts__link-value { font-size: clamp(14px, 4vw, 20px); overflow-wrap: anywhere; }
  .contacts__input { font-size: 16px; }
  .contacts__submit { width: 100%; }
  .about__inner { width: var(--container); padding-top: 100px; padding-bottom: 48px; }
  .about__head { margin-bottom: 32px; }
  .about__owner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about__owner > .about__photo { width: min(100%, 380px); margin-inline: auto; }
  .about__owner-name { font-size: clamp(30px, 7.5vw, 44px); margin: 12px 0 24px; }
  .about__contact { width: 100%; }
  .about__team { margin-top: 56px; }
  .about__team-head { padding-top: 24px; margin-bottom: 24px; }
  .about__team-title { font-size: clamp(22px, 5.5vw, 30px); }
  .about__team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .team-card { min-width: 0; }
  .team-card__name { font-size: clamp(12px, 3.2vw, 16px); line-height: 1.5; margin-top: 12px; overflow-wrap: anywhere; }
  .footer { padding-top: 40px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .footer__social { font-size: 12px; min-height: 44px; gap: 8px; }
  .footer__social-icon { width: 18px; height: 18px; }
  .footer__cta-wrap .btn { width: 100%; }
  .footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  .footer__nav-link { min-height: 44px; display: flex; align-items: center; line-height: 1.5; }
  .philosophy { min-height: auto; padding-block: 64px; }
  .philosophy__content { padding-top: 80px; }
}
@media (max-width: 360px) {
  .services__card { padding: 14px; }
  .services__grid, .works__grid, .cases__layout, .about__team-grid { column-gap: 12px; }
  .header__inner { gap: 8px; }
  .header__lang { gap: 8px; }
}

/* Touch devices reveal descriptions only after tapping a card. */
@media (hover: none) {
  .services__card:not(.is-expanded) { background: transparent; color: #fff; border-color: #fff; }
  .services__card:not(.is-expanded) .services__card-desc { opacity: 0; }
  .services__card:not(.is-expanded) .services__icon { opacity: 1; transform: none; }
  .services__card.is-expanded .services__card-desc { opacity: 1; transform: none; }
  .services__card.is-expanded .services__icon { opacity: 0; }
}
@media (hover: none) and (max-width: 768px) {
  .services__card:not(.is-expanded) .services__card-desc { display: none; }
}

@media (hover: hover) and (max-width: 768px) {
  .services__card--featured .services__card-desc { display: block; }
  .services__grid:hover .services__card--featured:not(:hover):not(:focus-visible) .services__card-desc { display: none; }
}

@media (max-width: 768px) {
  .hero { min-height: 0; padding-top: 0; }
  .hero__media {
    position: relative;
    top: auto;
    bottom: auto;
    min-height: 0;
    height: clamp(220px, 65vw, 420px);
  }
  .hero__gradient { background: linear-gradient(180deg, transparent 70%, #070707 100%); }
  .hero__content { padding-top: 24px; background: var(--color-bg); }
  .process__track {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    touch-action: pan-x pan-y pinch-zoom;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
  }
  .process__row {
    padding-inline: calc((100vw - var(--process-item)) / 2);
    min-height: 240px;
  }
  .process__card, .process__figure { scroll-snap-align: center; }
}