/* ============================================
   MOBILE — mobile.css
   Breakpoints: 900px (tablet), 768px (mobile), 480px (small)
============================================ */

/* ──────────────────────────────────────────
   MOBILE MENU COMPONENT (all screen sizes)
────────────────────────────────────────── */
.mob-menu {
  background: var(--cream);
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  border-bottom: 2px solid transparent;
  transition: max-height .32s ease, border-color .32s;
}
.mob-menu.open {
  max-height: 600px;
  border-bottom-color: var(--red);
  padding-bottom: 12px;
}

.mob-menu__item { border-bottom: 1px solid var(--border); }

.mob-menu__link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .75rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: #4a4a4a; text-decoration: none;
  padding: 15px 0;
  transition: color .2s;
}
.mob-menu__link:hover { color: var(--red); }

.mob-menu__toggle {
  font-family: 'Inter', sans-serif;
  font-size: .75rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: #4a4a4a;
  background: none; border: none; cursor: pointer;
  width: 100%; text-align: left;
  padding: 15px 0;
  display: flex; justify-content: space-between; align-items: center;
  transition: color .2s;
}
.mob-menu__toggle:hover,
.mob-menu__item.open .mob-menu__toggle { color: var(--red); }

.mob-menu__chevron { transition: transform .25s; flex-shrink: 0; }
.mob-menu__item.open .mob-menu__chevron { transform: rotate(180deg); }

.mob-menu__sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.mob-menu__item.open .mob-menu__sub { max-height: 320px; }

.mob-menu__sub-link {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .72rem; font-weight: 300;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6b6b6b; text-decoration: none;
  padding: 10px 0 10px 16px;
  border-left: 1px solid var(--border);
  transition: color .2s;
}
.mob-menu__sub-link:hover { color: var(--red); }


/* ──────────────────────────────────────────
   TABLET  (≤ 900px)
────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav__center { gap: 16px; }
  .nav__link { font-size: .68rem; letter-spacing: .16em; }

  /* Grids that need earlier collapse */
  .ins-grid { grid-template-columns: 1fr 1fr; }
  .wwa__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ──────────────────────────────────────────
   MOBILE  (≤ 768px)
────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Nav bar — fixed on mobile to prevent address-bar glitch ── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0;
    padding: 10px 20px;
  }
  .nav__logo img { height: 42px; }
  .nav__center { display: none; }
  .nav__right  { display: none; }
  .nav__burger { display: flex; margin-left: auto; }

  /* Body padding so content doesn't hide behind fixed nav */
  body { padding-top: 60px; }

  /* ── Mobile menu — fixed directly below nav ── */
  .mob-menu {
    position: fixed;
    top: 60px; left: 0; right: 0;
    z-index: 199;
    max-height: 0;
    overflow: hidden;
    border-bottom: 2px solid transparent;
    transition: max-height .28s ease, border-color .28s;
  }
  .mob-menu.open {
    max-height: 80vh;
    overflow-y: auto;
    border-bottom-color: var(--red);
    padding-bottom: 12px;
  }

  /* ── General spacing ── */
  .sec { padding: 52px 20px; }
  .sec__inner { padding: 0; }
  .page-hero { padding: 40px 20px 52px; }

  /* ── Typography ── */
  .page-hero__h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.1; }
  .sec-h2        { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* ── Buttons ── */
  .btn-red, .btn-outline-white { padding: 12px 24px; font-size: .6rem; }

  /* ── Hero (home) ── */
  .hero { height: auto; min-height: calc(80svh - 64px); margin-top: 0; }
  .hero__inner { padding: 36px 20px 32px; max-width: 100%; }
  .hero__h1    { font-size: clamp(2rem, 8vw, 3rem); }
  .hero__body  { font-size: .82rem; max-width: 100%; }
  .hero__btns  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__strip { flex-direction: row; }
  .hero__strip-item {
    flex: 1 1 0; padding: 10px 8px;
    font-size: clamp(.46rem, 2.5vw, .58rem);
    border-right: 1px solid rgba(255,255,255,.15);
    border-bottom: none; text-align: center;
  }
  .hero__strip-item:last-child { border-right: none; }

  /* ── Who We Advise ── */
  .wwa { padding: 52px 20px; }
  .wwa__grid { grid-template-columns: repeat(2, 1fr); }
  .wwa__list { grid-template-columns: 1fr; }
  .wwa__list-item:nth-child(-n+2) { border-top: none; }
  .wwa__list-item:first-child { border-top: 1px solid var(--red); }
  .wwa__list-item:nth-child(even) { padding-left: 0; border-left: none; }
  .wwa__list-item:nth-child(even):hover,
  .wwa__list-item:nth-child(even).wwa__list-item--active { padding-left: 8px; }

  /* ── What We Solve ── */
  .wws__grid { grid-template-columns: 1fr; }
  .wws__details { margin-top: 48px; gap: 36px; }
  .wws__detail,
  .wws__detail:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .wws__detail:nth-child(even) .wws__detail-img,
  .wws__detail:nth-child(even) .wws__detail-content { order: unset; }

  /* ── Trust ── */
  .trust__inner { grid-template-columns: 1fr; gap: 40px; }

  /* ── Value strip ── */
  .vstrip { grid-template-columns: 1fr 1fr; padding: 20px; gap: 8px; }
  .vstrip__item { padding: 24px 16px; }

  /* ── CTA band ── */
  .cta-band { padding: 52px 20px; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* ── Services list row ── */
  .svc-row { grid-template-columns: 36px 1fr 22px; }

  /* ── Services page blocks ── */
  .svc-block { padding: 48px 0; }
  .svc-block__grid { grid-template-columns: 1fr; gap: 24px; }
  .svc-block__tags { flex-direction: row; flex-wrap: wrap; }

  /* ── How we work cards ── */
  .how-grid { grid-template-columns: 1fr; }

  /* ── Industries ── */
  .ind-item { padding: 12px 0; }

  /* ── Leadership / team grid ── */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }

  /* ── Profile pages ── */
  .profile-main { grid-template-columns: 1fr; gap: 28px; }
  .profile-main__left { position: static; max-width: 260px; }

  /* ── Contact page ── */
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-left { position: static; }
  .contact-right { margin-top: 36px; }

  /* ── Insights grid ── */
  .ins-grid { grid-template-columns: 1fr; }
  .ins-featured__track .ins-card { flex: 0 0 280px; }

  /* ── Insight article ── */
  .art-layout { grid-template-columns: 1fr; }
  .art-meta { position: static; }

  /* ── Case studies ── */
  .cs-split { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .cs-split__right { grid-template-columns: 1fr; }

  /* ── Art prev/next ── */
  .art-nav-arrow { font-size: .5rem; letter-spacing: .12em; }
}


/* ──────────────────────────────────────────
   SMALL MOBILE  (≤ 480px)
────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-hero__h1 { font-size: clamp(1.5rem, 9vw, 1.9rem); }
  .sec-h2        { font-size: clamp(1.3rem, 8vw, 1.6rem); }

  .wwa__grid { grid-template-columns: 1fr 1fr; }
  .vstrip    { grid-template-columns: 1fr; }
  .ins-featured__track .ins-card { flex: 0 0 calc(100vw - 40px); }

  .team-grid { grid-template-columns: 1fr; }

  .contact-socials { flex-direction: column; }
  .contact-right   { padding: 24px 16px; }
}