/* ==========================================================================
   ZEMLYA & LOZA — UNIVERSAL RESPONSIVE CSS v2.0
   Mobile-First Design System
   Built: 2026-06-26 | Philosophy: mobile-first, fluid, touch-native
   ========================================================================== */

/* ===== 1. CSS VARIABLES — MOBILE TOKENS ===== */
:root {
  --m-space-xs: 4px;
  --m-space-sm: 8px;
  --m-space-md: 16px;
  --m-space-lg: 24px;
  --m-space-xl: 32px;
  --m-space-2xl: 48px;

  --m-radius-sm: 12px;
  --m-radius-md: 16px;
  --m-radius-lg: 20px;
  --m-radius-xl: 24px;

  --m-text-xs: clamp(0.72rem, 2.5vw, 0.82rem);
  --m-text-sm: clamp(0.82rem, 3vw, 0.92rem);
  --m-text-base: clamp(0.95rem, 3.5vw, 1.05rem);
  --m-text-lg: clamp(1.1rem, 4vw, 1.25rem);
  --m-text-xl: clamp(1.35rem, 5vw, 1.6rem);
  --m-text-2xl: clamp(1.75rem, 7vw, 2.2rem);
  --m-text-3xl: clamp(2.2rem, 9vw, 3rem);

  --m-line-tight: 1.2;
  --m-line-normal: 1.5;
  --m-line-relaxed: 1.65;

  --m-container-padding: 16px;
  --m-card-gap: 12px;
  --m-section-gap: 48px;

  --m-touch-target: 48px;

  --m-shadow-sm: 0 2px 8px rgba(18, 42, 31, 0.08);
  --m-shadow-md: 0 4px 16px rgba(18, 42, 31, 0.12);
  --m-shadow-lg: 0 8px 32px rgba(18, 42, 31, 0.18);

  --m-backdrop: rgba(247, 242, 230, 0.96);
}

/* ===== 2. BASE MOBILE RESET ===== */
@media (max-width: 1023px) {
  html {
    font-size: 16px;
  }

  body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Container fluid */
  .container,
  .header__container,
  .footer__container,
  .page-hero__container,
  .contacts-hero__container,
  .about-hero__container,
  .process-hero__container,
  .blog-hero__container,
  .articles-hero__container,
  .seo-hero__container {
    max-width: 100%;
    padding-left: var(--m-container-padding);
    padding-right: var(--m-container-padding);
  }

  /* Section spacing */
  .section,
  .page-section,
  .services-page .section,
  .cases-page .section,
  .contacts-page .section,
  .about-page .section,
  .process-page .section,
  .blog-page .section,
  .article-page .section,
  .seo-landing-page .section {
    padding: var(--m-section-gap) 0;
  }

  .section__header,
  .page-section__header {
    margin-bottom: var(--m-space-xl);
    text-align: center;
  }

  .section__label,
  .page-section__label {
    font-size: var(--m-text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--m-space-sm);
  }

  .section__title,
  .section-title,
  .about-section-title,
  .page-hero__title,
  .contacts-hero__title,
  .about-hero__title,
  .process-hero__title,
  .blog-hero__title,
  .articles-hero__title,
  .seo-hero__title {
    font-size: var(--m-text-2xl);
    line-height: var(--m-line-tight);
    word-break: keep-all;
    hyphens: none;
    overflow-wrap: break-word;
  }

  .section__lead,
  .page-hero__lead,
  .contacts-hero__lead,
  .about-hero__lead,
  .process-hero__lead,
  .blog-hero__lead,
  .articles-hero__lead,
  .seo-hero__lead {
    font-size: var(--m-text-base);
    line-height: var(--m-line-relaxed);
    max-width: 100%;
  }
}

/* ===== 3. HEADER — MOBILE ===== */
@media (max-width: 1023px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header__container {
    height: 60px;
    padding: 8px var(--m-container-padding);
  }

  .header__logo-text {
    font-size: clamp(1.5rem, 5vw, 1.8rem);
  }

  .header__logo-region {
    font-size: 0.6rem;
  }

  .header__nav,
  .header__actions {
    display: none !important;
  }

  .header__burger {
    display: flex !important;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu {
    top: 60px;
  }
}

/* ===== 4. HERO — MOBILE ===== */
@media (max-width: 1023px) {
  .hero,
  .page-hero,
  .contacts-hero,
  .about-hero,
  .process-hero,
  .blog-hero,
  .articles-hero,
  .seo-hero {
    min-height: auto;
    min-height: 100svh;
    min-height: -webkit-fill-available;
    display: flex;
    align-items: flex-end;
    position: relative;
  }

  .hero__bg-img,
  .page-hero__bg-img,
  .contacts-hero__bg-img,
  .about-hero__bg-img,
  .process-hero__bg-img,
  .blog-hero__bg-img,
  .articles-hero__bg-img,
  .seo-hero__bg-img {
    object-position: 55% center;
  }

  .hero__overlay,
  .page-hero__overlay,
  .contacts-hero__overlay,
  .about-hero__overlay,
  .process-hero__overlay,
  .blog-hero__overlay,
  .articles-hero__overlay,
  .seo-hero__overlay {
    background: linear-gradient(
      0deg,
      rgba(12, 31, 23, 0.96) 0%,
      rgba(12, 31, 23, 0.75) 35%,
      rgba(12, 31, 23, 0.3) 70%,
      rgba(12, 31, 23, 0.15) 100%
    ) !important;
  }

  .hero__container,
  .page-hero__container,
  .contacts-hero__container,
  .about-hero__container,
  .process-hero__container,
  .blog-hero__container,
  .articles-hero__container,
  .seo-hero__container {
    padding: 80px var(--m-container-padding) 40px;
    text-align: center;
  }

  .hero__content,
  .page-hero__content,
  .contacts-hero__content,
  .about-hero__content,
  .process-hero__content,
  .blog-hero__content,
  .articles-hero__content,
  .seo-hero__content {
    max-width: 100%;
    margin: 0 auto;
  }

  .hero__eyebrow,
  .page-hero__eyebrow {
    font-size: var(--m-text-xs);
    margin-bottom: var(--m-space-sm);
  }

  .hero__title,
  .page-hero__title {
    font-size: var(--m-text-3xl);
    line-height: 1.05;
    margin-bottom: var(--m-space-md);
    word-break: keep-all;
    hyphens: none;
  }

  .hero__subtitle,
  .page-hero__lead,
  .contacts-hero__text,
  .about-hero__text,
  .process-hero__text,
  .blog-hero__lead,
  .articles-hero__lead,
  .seo-hero__lead {
    font-size: var(--m-text-base);
    line-height: var(--m-line-relaxed);
    margin-bottom: var(--m-space-lg);
  }

  .hero__actions,
  .page-hero__actions,
  .blog-hero__actions,
  .seo-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-sm);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .hero__actions .btn,
  .page-hero__actions .btn,
  .blog-hero__actions .btn,
  .seo-hero__actions .btn {
    width: 100%;
    min-height: var(--m-touch-target);
    font-size: var(--m-text-sm);
    border-radius: var(--m-radius-md);
  }
}

/* ===== 5. GRID LAYOUTS — MOBILE (1 column) ===== */
@media (max-width: 1023px) {
  .why-us__grid,
  .for-whom__grid,
  .services-overview__grid,
  .cases-preview__grid,
  .articles-preview__grid,
  .process-preview__steps,
  .problems__grid,
  .services-grid,
  .cases-grid,
  .blog-categories,
  .blog-start__grid,
  .articles-grid,
  .about-team__grid,
  .about-beliefs__grid,
  .competency__grid,
  .approach__grid,
  .client-types__grid,
  .process-flow__cards,
  .article-service-links__grid,
  .article-faq__grid,
  .contacts-grid--direct,
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--m-card-gap);
  }

  .service-seo-links,
  .service-seo-links--geo,
  .cases-filter,
  .articles-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--m-space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--m-space-xs) 0 var(--m-space-md);
    margin: 0 calc(-1 * var(--m-container-padding));
    padding-left: var(--m-container-padding);
    padding-right: var(--m-container-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .service-seo-links::-webkit-scrollbar,
  .cases-filter::-webkit-scrollbar,
  .articles-filter::-webkit-scrollbar {
    display: none;
  }

  .service-seo-links a,
  .cases-filter__btn,
  .articles-filter__btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: 36px;
    padding: 8px 16px;
    font-size: var(--m-text-sm);
  }
}

/* ===== 6. CARDS — MOBILE ===== */
@media (max-width: 1023px) {
  .why-us__card,
  .for-whom__card,
  .service-card,
  .case-flip-card,
  .case-card,
  .article-card,
  .blog-start-card,
  .blog-category,
  .process-step,
  .process-flow__card,
  .about-belief,
  .competency__item,
  .approach-item,
  .client-type,
  .article-service-link,
  .contacts-card,
  .helper-item {
    border-radius: var(--m-radius-lg);
    padding: var(--m-space-lg);
  }

  .why-us__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--m-space-lg);
  }

  .why-us__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--m-space-sm);
  }

  .why-us__title {
    font-size: var(--m-text-lg);
    margin-bottom: var(--m-space-xs);
  }

  .why-us__text {
    font-size: var(--m-text-sm);
    line-height: var(--m-line-normal);
  }

  .for-whom__card,
  .service-card,
  .case-card,
  .article-card,
  .blog-start-card {
    min-height: auto;
    height: auto;
  }

  .service-card__title,
  .case-flip-card__title,
  .case-card__title,
  .article-card__title,
  .blog-start-card__title,
  .process-step__title,
  .process-flow__card h3,
  .about-belief__title,
  .competency__title,
  .approach-item__title,
  .client-type__name {
    font-size: var(--m-text-lg);
    line-height: var(--m-line-tight);
    margin-bottom: var(--m-space-xs);
  }

  .service-card__description,
  .case-flip-card__description,
  .case-card__summary,
  .article-card__excerpt,
  .blog-start-card__text,
  .process-step__text,
  .process-flow__card p,
  .about-belief p,
  .competency__description,
  .approach-item__description,
  .client-type__description {
    font-size: var(--m-text-sm);
    line-height: var(--m-line-normal);
  }
}

/* ===== 7. HORIZONTAL SCROLL CAROUSELS — MOBILE ===== */
@media (max-width: 1023px) {
  .for-whom__grid,
  .services-overview__grid,
  .cases-preview__grid,
  .articles-preview__grid,
  .process-preview__steps,
  .field-video__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--m-card-gap);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--m-space-xs) var(--m-container-padding) var(--m-space-lg);
    margin: 0 calc(-1 * var(--m-container-padding));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .for-whom__grid::-webkit-scrollbar,
  .services-overview__grid::-webkit-scrollbar,
  .cases-preview__grid::-webkit-scrollbar,
  .articles-preview__grid::-webkit-scrollbar,
  .process-preview__steps::-webkit-scrollbar,
  .field-video__list::-webkit-scrollbar {
    display: none;
  }

  .for-whom__card,
  .services-overview .service-card,
  .cases-preview .case-card,
  .articles-preview .article-card,
  .process-step,
  .field-video__item {
    flex: 0 0 min(85vw, 320px);
    width: min(85vw, 320px);
    min-width: min(85vw, 320px);
    scroll-snap-align: start;
  }

  .for-whom__card {
    min-height: 360px;
  }

  .services-overview .service-card {
    min-height: 380px;
  }

  .cases-preview .case-card {
    min-height: 400px;
  }

  .articles-preview .article-card {
    min-height: 360px;
  }

  .process-step {
    min-height: 200px;
  }

  .field-video__item {
    min-width: min(85vw, 300px);
  }
}

/* ===== 8. FAQ — MOBILE ===== */
@media (max-width: 1023px) {
  .faq {
    min-height: auto;
  }

  .faq__container {
    display: block;
  }

  .faq__image-wrapper {
    display: none;
  }

  .faq__content {
    width: 100%;
  }

  .faq__item {
    margin-bottom: var(--m-space-sm);
  }

  .faq__question {
    min-height: var(--m-touch-target);
    padding: var(--m-space-md);
    font-size: var(--m-text-base);
  }

  .faq__question-text {
    font-size: var(--m-text-base);
    line-height: var(--m-line-normal);
  }

  .faq__answer {
    font-size: var(--m-text-sm);
    line-height: var(--m-line-relaxed);
    padding: 0 var(--m-space-md) var(--m-space-md);
  }
}

/* ===== 9. ARTICLE / BLOG — MOBILE ===== */
@media (max-width: 1023px) {
  .article-layout,
  .articles-layout,
  .blog-main,
  .contacts-layout,
  .about-layout,
  .process-flow__layout,
  .seo-hero__grid,
  .seo-service__grid,
  .article-commercial__grid,
  .about-manifest,
  .about-region-card {
    display: block;
  }

  .article-sidebar,
  .articles-sidebar,
  .blog-sidebar {
    display: none;
  }

  .article-content,
  .article-longread-hero,
  .seo-landing-content {
    padding: var(--m-space-lg) var(--m-container-padding);
  }

  .article-content h2,
  .seo-landing-content h2 {
    font-size: var(--m-text-xl);
    margin: var(--m-space-lg) 0 var(--m-space-sm);
  }

  .article-content h3,
  .seo-landing-content h3 {
    font-size: var(--m-text-lg);
    margin: var(--m-space-md) 0 var(--m-space-xs);
  }

  .article-content p,
  .article-content li,
  .seo-landing-content p,
  .seo-landing-content li {
    font-size: var(--m-text-base);
    line-height: var(--m-line-relaxed);
  }

  .article-content img,
  .seo-landing-content img,
  .article-longread-hero img {
    width: 100%;
    height: auto;
    border-radius: var(--m-radius-md);
    margin: var(--m-space-md) 0;
  }

  .article-hero__image,
  .blog-hero__image,
  .about-hero__image,
  .contacts-hero__image,
  .process-hero__image {
    height: 260px;
  }

  .article-content__image--photo {
    margin: 0 calc(-1 * var(--m-container-padding));
    width: calc(100% + 2 * var(--m-container-padding));
    max-width: none;
  }
}

/* ===== 10. CONTACTS PAGE — MOBILE ===== */
@media (max-width: 1023px) {
  .contacts-grid--direct {
    gap: var(--m-space-lg);
  }

  .contacts-card {
    padding: var(--m-space-lg);
  }

  .contact-action {
    display: flex;
    align-items: center;
    gap: var(--m-space-md);
    padding: var(--m-space-md) 0;
    min-height: var(--m-touch-target);
  }

  .action-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .action-text {
    font-size: var(--m-text-base);
  }

  .contacts-map__frame {
    height: 280px;
    border-radius: var(--m-radius-md);
  }

  .contacts-legal-info {
    text-align: center;
    padding: var(--m-space-lg);
  }

  /* Hide duplicate label on mobile */
  .contacts-label p {
    display: none !important;
  }
}

/* ===== 11. ABOUT PAGE — MOBILE ===== */
@media (max-width: 1023px) {
  .about-manifest__media,
  .about-region-card__map {
    margin: var(--m-space-lg) 0;
    border-radius: var(--m-radius-lg);
    overflow: hidden;
  }

  .about-manifest__media img,
  .about-region-card__map img {
    width: 100%;
    height: auto;
  }

  .about-belief__number {
    font-size: var(--m-text-3xl);
    margin-bottom: var(--m-space-xs);
  }

  .about-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--m-card-gap);
  }

  .about-team__member img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--m-radius-lg);
  }
}

/* ===== 12. PROCESS PAGE — MOBILE ===== */
@media (max-width: 1023px) {
  .process-flow__timeline {
    padding: var(--m-space-lg) 0;
  }

  .process-flow__item {
    display: flex;
    gap: var(--m-space-md);
    padding: var(--m-space-lg) 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
  }

  .process-flow__item:last-child {
    border-bottom: none;
  }

  .process-flow__number {
    font-size: var(--m-text-3xl);
    line-height: 1;
    color: var(--accent-vine, #c5a059);
    flex-shrink: 0;
    width: 48px;
  }

  .process-flow__item h3 {
    font-size: var(--m-text-lg);
    margin-bottom: var(--m-space-xs);
  }

  .process-flow__item p {
    font-size: var(--m-text-sm);
    line-height: var(--m-line-normal);
  }

  .process-flow__cards {
    grid-template-columns: 1fr;
    gap: var(--m-card-gap);
  }
}

/* ===== 13. SEO LANDING — MOBILE ===== */
@media (max-width: 1023px) {
  .seo-hero__media {
    margin-top: var(--m-space-xl);
  }

  .seo-hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--m-radius-lg);
  }

  .seo-panel {
    padding: var(--m-space-lg);
    border-radius: var(--m-radius-lg);
    margin-bottom: var(--m-space-lg);
  }

  .seo-panel ol,
  .seo-panel ul {
    padding-left: var(--m-space-lg);
  }

  .seo-panel li {
    font-size: var(--m-text-sm);
    line-height: var(--m-line-normal);
    margin-bottom: var(--m-space-xs);
  }

  .seo-landing-cta {
    padding: var(--m-space-xl) var(--m-container-padding);
    text-align: center;
  }

  .seo-landing-cta__title {
    font-size: var(--m-text-xl);
  }
}

/* ===== 14. FIELD VIDEO — MOBILE ===== */
@media (max-width: 1023px) {
  .field-video__layout {
    display: block;
  }

  .field-video__player-card {
    margin-bottom: var(--m-space-lg);
  }

  .field-video__player {
    aspect-ratio: 16 / 9;
    border-radius: var(--m-radius-lg);
    overflow: hidden;
  }

  .field-video__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--m-space-sm);
    overflow-x: auto;
    padding: var(--m-space-xs) 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .field-video__list::-webkit-scrollbar {
    display: none;
  }

  .field-video__item {
    flex: 0 0 min(80vw, 280px);
    min-width: min(80vw, 280px);
  }
}

/* ===== 15. GEOGRAPHY / MAP — MOBILE ===== */
@media (max-width: 1023px) {
  .geography__app-shell {
    height: 50vh;
    min-height: 350px;
    border-radius: var(--m-radius-lg);
    overflow: hidden;
  }
}

/* ===== 16. FOOTER — MOBILE ===== */
@media (max-width: 1023px) {
  .footer {
    padding: var(--m-space-xl) 0 calc(var(--m-space-xl) + 70px);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--m-space-xl);
    text-align: center;
  }

  .footer__brand {
    margin-bottom: var(--m-space-lg);
  }

  .footer__nav-group {
    margin-bottom: var(--m-space-lg);
  }

  .footer__nav-title {
    font-size: var(--m-text-sm);
    margin-bottom: var(--m-space-sm);
  }

  .footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-xs);
  }

  .footer__nav-list a {
    font-size: var(--m-text-sm);
    padding: var(--m-space-xs) 0;
    display: block;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--m-space-sm);
    text-align: center;
    margin-top: var(--m-space-xl);
    padding-top: var(--m-space-lg);
    border-top: 1px solid rgba(197, 160, 89, 0.2);
  }
}

/* ===== 17. MOBILE CONTACT BAR ===== */
.mobile-contact-bar {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-contact-bar {
    position: fixed;
    z-index: 120;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--m-space-xs);
    padding: var(--m-space-sm) var(--m-container-padding) calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(197, 160, 89, 0.3);
    background: var(--m-backdrop);
    box-shadow: 0 -4px 24px rgba(18, 42, 31, 0.15);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
  }

  .mobile-contact-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: var(--m-space-xs);
    border-radius: var(--m-radius-sm);
    color: #214031;
    font-size: var(--m-text-xs);
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.2s, transform 0.1s;
  }

  .mobile-contact-bar a:active {
    transform: scale(0.96);
  }

  .mobile-contact-bar a:first-child {
    color: #fff;
    background: linear-gradient(135deg, #244c38, #2d5a44);
    box-shadow: var(--m-shadow-sm);
  }
}

/* ===== 18. UTILITY — MOBILE ===== */
@media (max-width: 1023px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .text-center-mobile {
    text-align: center !important;
  }

  .full-width-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Touch-friendly buttons */
  .btn,
  button,
  .cases-filter__btn,
  .articles-filter__btn,
  .service-seo-links a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Smooth scroll for carousels */
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .scroll-snap-x::-webkit-scrollbar {
    display: none;
  }

  .scroll-snap-item {
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   TABLET BREAKPOINT (768px – 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --m-container-padding: 24px;
    --m-card-gap: 16px;
  }

  .why-us__grid,
  .for-whom__grid,
  .blog-categories,
  .blog-start__grid,
  .about-beliefs__grid,
  .process-flow__cards,
  .article-faq__grid,
  .contacts-grid--direct,
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid,
  .cases-grid,
  .articles-grid,
  .about-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-service-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .competency__grid,
  .approach__grid,
  .client-types__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__title,
  .page-hero__title {
    font-size: clamp(2.5rem, 5vw, 3rem);
  }
}

/* ==========================================================================
   SMALL PHONE BREAKPOINT (≤ 380px)
   ========================================================================== */
@media (max-width: 380px) {
  :root {
    --m-container-padding: 12px;
    --m-card-gap: 8px;
  }

  .hero__title,
  .page-hero__title {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  .section__title,
  .section-title {
    font-size: clamp(1.5rem, 7vw, 1.8rem);
  }

  .mobile-contact-bar a {
    font-size: 0.65rem;
    padding: 4px 2px;
  }

  .why-us__grid,
  .about-team__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LARGE PHONE / SMALL TABLET (481px – 767px)
   ========================================================================== */
@media (min-width: 481px) and (max-width: 767px) {
  .why-us__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-team__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .problems__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   DESKTOP ENHANCEMENTS (≥ 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .mobile-contact-bar {
    display: none !important;
  }

  .hide-mobile {
    display: inherit !important;
  }

  .show-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */
@media (max-width: 1023px) {
  .service-card,
  .case-flip-card,
  .case-card,
  .article-card,
  .blog-start-card,
  .why-us__card,
  .for-whom__card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .service-card:active,
  .case-flip-card:active,
  .case-card:active,
  .article-card:active,
  .blog-start-card:active,
  .why-us__card:active,
  .for-whom__card:active {
    transform: scale(0.98);
  }

  /* Scroll indicator for carousels */
  .for-whom__grid::after,
  .services-overview__grid::after,
  .cases-preview__grid::after,
  .articles-preview__grid::after,
  .process-preview__steps::after,
  .field-video__list::after {
    content: "";
    flex: 0 0 16px;
  }
}

/* ==========================================================================
   SAFE AREA INSETS (notch phones)
   ========================================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 1023px) {
    .header__container,
    .hero__container,
    .page-hero__container,
    .footer__container,
    .section {
      padding-left: max(var(--m-container-padding), env(safe-area-inset-left));
      padding-right: max(var(--m-container-padding), env(safe-area-inset-right));
    }
  }
}

/* ==========================================================================
   OVERRIDE DESKTOP STYLES — HIGH SPECIFICITY
   These rules override desktop styles with !important to prevent conflicts
   ========================================================================== */
@media (max-width: 1023px) {
  /* Hero titles — prevent desktop font-size from breaking mobile */
  html body.responsive-home .hero .hero__title,
  .hero .hero__title,
  .page-hero .page-hero__title,
  .contacts-hero .contacts-hero__title,
  .about-hero .about-hero__title,
  .process-hero .process-hero__title,
  .blog-hero .blog-hero__title,
  .articles-hero .articles-hero__title,
  .seo-hero .seo-hero__title,
  .hero h1,
  .page-hero h1,
  .contacts-hero h1,
  .about-hero h1,
  .process-hero h1,
  .blog-hero h1,
  .articles-hero h1,
  .seo-hero h1 {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
    line-height: 1.08 !important;
    word-break: keep-all !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
  }

  /* Extra small font for long hero titles (contacts, about, process) */
  .contacts-hero .contacts-hero__title,
  .about-hero .about-hero__title,
  .process-hero .process-hero__title,
  .contacts-hero h1,
  .about-hero h1,
  .process-hero h1 {
    font-size: clamp(1.15rem, 5.5vw, 1.8rem) !important;
  }

  /* Section titles — prevent desktop font-size from breaking mobile */
  .section__title,
  .section-title,
  .about-section-title,
  .faq__main-title,
  .service-card__title,
  .case-card__title,
  .article-card__title,
  .sidebar-block__title,
  .contacts-form__title,
  .contacts-info__title,
  .process-step__title,
  .about-section-title,
  .competency__title,
  .approach-item__title,
  .client-type__name,
  .section h2,
  .page-section h2,
  .section h3,
  .page-section h3 {
    font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  /* Prevent text overflow in all headings */
  h1, h2, h3, h4, h5, h6,
  .section__title,
  .section-title,
  .hero__title,
  .page-hero__title,
  .about-hero__title,
  .process-hero__title,
  .contacts-hero__title,
  .blog-hero__title,
  .seo-hero__title {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }

  /* Container override — remove desktop max-width constraints */
  .container,
  .header__container,
  .footer__container,
  .page-hero__container,
  .contacts-hero__container,
  .about-hero__container,
  .process-hero__container,
  .blog-hero__container,
  .articles-hero__container,
  .seo-hero__container,
  .section .container,
  .section .header__container {
    max-width: 100% !important;
    padding-left: var(--m-container-padding) !important;
    padding-right: var(--m-container-padding) !important;
  }

  /* Button override — full width on mobile */
  .hero__actions .btn,
  .page-hero__actions .btn,
  .hero .btn,
  .page-hero .btn {
    width: 100% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Card override — remove desktop min-height constraints */
  .service-card,
  .case-flip-card,
  .case-card,
  .article-card,
  .blog-start-card,
  .why-us__card,
  .for-whom__card {
    min-height: auto !important;
    height: auto !important;
  }

  /* Grid override — single column on mobile */
  .why-us__grid,
  .for-whom__grid,
  .services-overview__grid,
  .cases-preview__grid,
  .articles-preview__grid,
  .process-preview__steps,
  .services-grid,
  .cases-grid,
  .blog-categories,
  .blog-start__grid,
  .articles-grid,
  .about-beliefs__grid,
  .competency__grid,
  .approach__grid,
  .client-types__grid,
  .process-flow__cards,
  .article-service-links__grid,
  .article-faq__grid,
  .contacts-grid--direct,
  .footer__grid {
    grid-template-columns: 1fr !important;
  }

  /* Horizontal scroll carousels — override desktop grid */
  .for-whom__grid,
  .services-overview__grid,
  .cases-preview__grid,
  .articles-preview__grid,
  .process-preview__steps,
  .field-video__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 0 calc(-1 * var(--m-container-padding)) !important;
    padding: var(--m-space-xs) var(--m-container-padding) var(--m-space-lg) !important;
  }

  .for-whom__grid > *,
  .services-overview__grid > *,
  .cases-preview__grid > *,
  .articles-preview__grid > *,
  .process-preview__steps > * {
    flex: 0 0 min(85vw, 320px) !important;
    width: min(85vw, 320px) !important;
    min-width: min(85vw, 320px) !important;
  }
}