/* ============== Van Elsen — responsive / mobile fixes ============== */

/* Global safety: prevent any element from blowing out viewport width */
html, body { overflow-x: hidden; max-width: 100%; }
.ve { overflow-x: hidden; max-width: 100vw; }
.ve img, .ve video, .ve svg { max-width: 100%; }

/* Marquees — already overflow:hidden, just make sure they can't add a scrollbar */
.ve-mq { max-width: 100vw; }

/* ============== ≤ 1100 px (small laptop / large tablet) ============== */
@media (max-width: 1100px) {
  .ve-hero__content { grid-template-columns: 1fr; gap: 48px; }
  .ve-hero__demo-wrap { max-width: 100%; }
  .ve-demo { margin-left: 0; max-width: 100%; }

  .ve-sec__grid,
  .ve-sec--flip .ve-sec__grid { grid-template-columns: 1fr; gap: 48px; }
  .ve-sec--flip .ve-sec__copy { order: 1; }
  .ve-sec--flip .ve-sec__visual { order: 2; }

  .ve-svc__grid { grid-template-columns: 1fr; gap: 40px; }
  .ve-svc__meta { position: static; }

  .ve-about__grid { grid-template-columns: 1fr; gap: 56px; }
  .ve-contact__grid { grid-template-columns: 1fr; gap: 48px; }

  .ve-tiers { grid-template-columns: 1fr; margin: 0 24px; }
  .ve-process__steps,
  .ve-timeline__list { grid-template-columns: repeat(2, 1fr); }
  .ve-cases__tabs { grid-template-columns: repeat(2, 1fr); }
  .ve-case__metrics { grid-template-columns: repeat(2, 1fr); }
  .ve-faq__grid { grid-template-columns: 1fr; }
  .ve-stack__grid { grid-template-columns: repeat(4, 1fr); }
  .ve-footer__top { grid-template-columns: 1fr; gap: 48px; }
  .ve-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============== ≤ 760 px (tablet portrait) ============== */
@media (max-width: 760px) {
  /* Reduce paddings everywhere */
  .ve-nav,
  .ve-hero__topbar,
  .ve-hero__content,
  .ve-hero__bottom,
  .ve-sec,
  .ve-svcs,
  .ve-process,
  .ve-cases,
  .ve-about,
  .ve-timeline,
  .ve-tiers,
  .ve-faq,
  .ve-contact,
  .ve-cta,
  .ve-stack,
  .ve-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .ve-tiers { margin: 0 16px; }

  /* Nav: stack and shrink */
  .ve-nav { flex-direction: column; gap: 18px; padding-top: 24px !important; padding-bottom: 24px !important; top: 16px; }
  .ve-nav--solid { gap: 18px; }
  .ve-nav__links { gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 11px; }
  .ve-nav__cta { padding: 8px 14px; }

  /* Hero: tighter, shorter */
  .ve-hero { min-height: 760px; }
  .ve-hero__topbar { top: 140px; }
  .ve-hero__content { margin-top: 230px; padding-bottom: 90px; }
  .ve-hero__title { font-size: clamp(56px, 16vw, 96px) !important; line-height: 0.95; }
  .ve-hero__sub { font-size: 18px; }
  .ve-hero__bottom { flex-direction: column; gap: 20px; align-items: stretch; bottom: 24px; }
  .ve-hero__loader { width: 100%; }

  /* Demo widget: shrink */
  .ve-demo { padding: 16px; }
  .ve-demo__transcript { min-height: 140px; max-height: 200px; }
  .ve-demo__text { font-size: 15px; }
  .ve-demo__form { grid-template-columns: 1fr; gap: 8px; }
  .ve-demo__chip { font-size: 9px; padding: 6px 9px; }

  /* Marquees: smaller */
  .ve-mq--big { font-size: 56px; padding: 20px 0; }

  /* Sections: smaller padding + headlines */
  .ve-sec { padding-top: 80px !important; padding-bottom: 80px !important; }
  .ve-sec__title { font-size: clamp(40px, 10vw, 64px) !important; }
  .ve-sec__meta { margin-bottom: 32px; }

  /* Page heroes */
  .ve-page-hero { padding-top: 64px !important; padding-bottom: 64px !important; }
  .ve-page-hero__title { font-size: clamp(48px, 13vw, 84px) !important; margin: 24px 0; }
  .ve-page-hero__sub { font-size: 18px; }

  /* Services */
  .ve-svc { padding: 56px 0; }
  .ve-svc__title { font-size: clamp(36px, 10vw, 56px) !important; }
  .ve-svc__blurb { font-size: 18px; }
  .ve-svc__meta { padding: 20px; }

  /* Process / timeline / case-tabs / footer cols / stack — single column */
  .ve-process__steps,
  .ve-timeline__list,
  .ve-cases__tabs,
  .ve-case__metrics,
  .ve-footer__cols,
  .ve-stack__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ve-process__title,
  .ve-faq h2,
  .ve-process__title { font-size: clamp(40px, 11vw, 64px) !important; }

  /* Cases */
  .ve-cases__tab { padding: 18px; }
  .ve-cases__tab > span:last-child { font-size: 16px; }
  .ve-case__headline { font-size: clamp(32px, 8.5vw, 56px) !important; }
  .ve-case__summary { font-size: 18px; }
  .ve-case__metric { padding: 22px 18px; min-height: 140px; }
  .ve-case__metric-n { font-size: 44px; }
  .ve-case__quote p { font-size: 22px; }
  .ve-flow { gap: 10px; padding: 18px; }
  .ve-flow__node { min-width: 100%; }
  .ve-flow__arrow { transform: rotate(90deg); width: 100%; text-align: center; }

  /* Pricing */
  .ve-tier { padding: 32px 24px; }
  .ve-tier__price { font-size: 48px; }

  /* Contact */
  .ve-contact__form { padding: 28px 20px; }
  .ve-contact__title { font-size: clamp(40px, 11vw, 72px) !important; }
  .ve-contact__step-title { font-size: clamp(24px, 6vw, 36px) !important; }
  .ve-contact__nav { flex-wrap: wrap; gap: 12px; }
  .ve-pick { gap: 6px; }
  .ve-pick__opt { padding: 10px 14px; font-size: 10px; }
  .ve-field input,
  .ve-field textarea { font-size: 14px; padding: 14px; }

  /* CTA */
  .ve-cta { padding: 100px 24px !important; }
  .ve-cta__title { font-size: clamp(48px, 12vw, 84px) !important; }
  .ve-cta__sub { font-size: 18px; }
  .ve-cta__btn { padding: 18px 28px; font-size: 10px; }

  /* Footer */
  .ve-footer { padding: 64px 24px 40px !important; }
  .ve-footer__bottom { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .ve-footer__bottom > span:last-child { text-align: center; }
  .ve-footer__big { font-size: clamp(32px, 9vw, 56px) !important; }

  /* About */
  .ve-about__person h3 { font-size: 28px; }
  .ve-about__thesis { font-size: 18px; }

  /* Stats / mocks: stop overflow */
  .vm { aspect-ratio: auto; min-height: 320px; padding: 18px; }
  .vm--stats { grid-template-columns: 1fr 1fr; }
  .vm__stat-n { font-size: 56px; }
  .vm__phone { width: 100%; max-width: 320px; }
  .vm__win-body { grid-template-columns: 1fr; }
  .vm__col + .vm__col { border-left: none; border-top: 1px solid var(--line); }
}

/* ============== ≤ 420 px (phone) ============== */
@media (max-width: 420px) {
  .ve-nav__brand { font-size: 11px; }
  .ve-nav__links { font-size: 10px; gap: 14px; }
  .ve-mq--big { font-size: 40px; }
  .ve-hero__title { font-size: 52px !important; }
  .ve-page-hero__title { font-size: 44px !important; }
  .ve-stack__grid { grid-template-columns: repeat(2, 1fr) !important; }
}