/* MEET — Responsive overrides (mobile + tablet)
   Loaded after all other CSS so it wins. */

/* ── Container gutter shrinks below desktop ────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --s-9: 64px; --s-10: 80px; --s-8: 44px; }
}

/* ── Nav ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .m-nav { padding: 12px var(--gutter); gap: 12px; flex-wrap: nowrap; }
  .m-nav-links { display: none; }
  .m-nav-actions { gap: 8px; margin-left: auto; }
  .m-logo { gap: 8px; }
  .m-logo > img { width: 44px !important; height: 44px !important; }
  .m-logo-tag { display: none; }
  .m-logo-word { font-size: 18px; }
}
@media (max-width: 480px) {
  .m-nav { padding: 10px var(--gutter); }
  .m-logo > img { width: 36px !important; height: 36px !important; }
  .m-logo-word { font-size: 16px; letter-spacing: 0.04em; gap: 4px; }
  .m-logo-word span { letter-spacing: 0.12em; }
  .m-nav-actions .m-btn { height: 36px; padding: 0 14px; font-size: 12px; }
  .m-lang-btn { height: 32px; padding: 0 10px; font-size: 11px; }
}

/* ── Hero (A1) ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .va-hero { padding: 16px var(--gutter) 72px; }
  .va-hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
    padding-top: 32px;
  }
  .va-hero-title { font-size: 44px; }
  .va-hero-sub { font-size: 16px; margin-top: 22px; }
  .va-hero-cta { margin-top: 28px; }
  .va-hero-trust { margin-top: 32px; gap: 18px; }
  .va-hero-blob { width: 360px; height: 360px; filter: blur(60px); }
  .va-hero-card {
    left: auto; right: 16px; bottom: 16px;
    padding: 14px 18px; min-width: 0;
  }
  .va-hero-card-num { font-size: 32px; }
}
@media (max-width: 480px) {
  .va-hero-title { font-size: 34px; line-height: 1.15; }
  .va-hero-eyebrow { margin-bottom: 18px; }
  .va-hero-cta { flex-direction: column; align-items: stretch; }
  .va-hero-cta .m-btn { width: 100%; }
  .va-hero-card {
    position: static;
    margin-top: 18px;
  }
}

/* ── Section heads ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .va-sec-head { margin-bottom: 40px; }
  .va-sec-head h2 { font-size: 30px; margin-top: 14px; }
  .va-sec-sub { font-size: 15px; margin-top: 14px; }
  .va-sec-head--row {
    flex-direction: column; align-items: flex-start; gap: 20px;
  }
}

/* ── Promise (A2) ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .va-promise { padding: 36px var(--gutter); }
  .va-promise ul { grid-template-columns: 1fr; gap: 18px; }
  .va-promise li b { font-size: 16px; }
}

/* ── Brand story (A3) ──────────────────────────────────────── */
@media (max-width: 960px) {
  .va-story {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .va-story-text h2 { font-size: 34px; }
  .va-story-text p { font-size: 15px; }
  .va-fmf > div { font-size: 17px; }
  .va-story-art-2 { width: 140px !important; right: 16px; bottom: -20px; }
}
@media (max-width: 480px) {
  .va-story-text h2 { font-size: 28px; }
  .va-story-art-2 { width: 110px !important; right: 8px; bottom: -16px; border-width: 4px; }
}

/* ── Services (A4) ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .va-service-grid { grid-template-columns: 1fr; gap: 16px; }
  .va-service-card { padding: 26px 22px; }
  .va-service-card h3 { font-size: 21px; }
}

/* ── Process (A5) ──────────────────────────────────────────── */
@media (max-width: 880px) {
  .va-process {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .va-process::before {
    top: 28px; left: 28px; right: auto; bottom: 28px;
    width: 1px; height: auto;
    background: repeating-linear-gradient(to bottom, var(--gold-soft) 0 4px, transparent 4px 10px);
  }
  .va-process-step {
    padding-left: 0;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "num title"
      ".   desc";
    column-gap: 20px;
    row-gap: 10px;
    align-items: center;
  }
  .va-process-n { grid-area: num; margin-bottom: 0; }
  .va-process-step h4 { grid-area: title; margin: 0; align-self: center; }
  .va-process-step p { grid-area: desc; }
}

/* ── Team (A6) — already handled but reinforce ─────────────── */
@media (max-width: 880px) {
  .va-team { grid-template-columns: 1fr; gap: 28px; max-width: 420px; }
}

/* ── Stories (A7) ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .va-stories { grid-template-columns: 1fr; gap: 20px; }
  .va-story-card-body { padding: 22px 22px 24px; gap: 14px; }
  .va-story-card blockquote { font-size: 16px; }
}

/* ── Events (A8) ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .va-event {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 16px;
  }
  .va-event-date { align-self: flex-start; }
  .va-event-date span:first-child { font-size: 26px; }
  .va-event-cta { align-self: flex-start; }
}

/* ── Stats (A9) ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .va-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
    padding: 36px 0;
  }
  .va-stat-n { font-size: 40px; }
  .va-stat-l { font-size: 11px; margin-top: 8px; }
}

/* ── FAQ (A10) ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .va-faq summary { font-size: 16px; }
  .va-faq-a { font-size: 14px; }
}

/* ── Closing CTA (A11) ─────────────────────────────────────── */
@media (max-width: 760px) {
  .va-cta h2 { font-size: 36px; }
  .va-cta p { font-size: 15px; }
}
@media (max-width: 480px) {
  .va-cta h2 { font-size: 30px; }
}

/* ── Footer ────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .m-footer { padding: 64px var(--gutter) 24px; }
  .m-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
    margin-bottom: 40px;
  }
  .m-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .m-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .m-footer-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ── Button sizing on mobile ──────────────────────────────── */
@media (max-width: 480px) {
  .m-btn { height: 48px; padding: 0 22px; font-size: 14px; }
}

/* ── Tweaks panel: tuck out of the way on mobile ──────────── */
@media (max-width: 600px) {
  .tw-panel, [class*="tweaks-panel"] {
    transform: scale(0.85); transform-origin: bottom right;
  }
}