/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PASS — 2026-09-24
   The client walked the whole site on a phone. Everything here is his list.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── M-3 · the hamburger sat in the top third of its box ───────────────────
   .burger resolves to display:flex (a later rule beats the grid), and
   place-items:center does not set justify-content, so the three bars packed
   to the start of the column — measured at y 4, 11 and 18 inside a 46px box. */
.burger{ justify-content: center; align-content: center; }

/* ── M-4 · the mobile menu gets Home, and Who We Serve becomes a dropdown ── */
.mobmenu__acc{ display: block; }
.mobmenu__acctoggle{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
  text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.35rem; letter-spacing: -.015em; color: var(--txt-hi);
  padding: 17px 4px;
}
.mobmenu__caret{
  flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .26s ease;
}
.mobmenu__acctoggle[aria-expanded="true"] .mobmenu__caret{
  transform: rotate(225deg) translate(-3px, -3px);
}
.mobmenu__panel[hidden]{ display: none; }
.mobmenu__panel{ display: block; }
.mobmenu__panel .mobmenu__link--sub{
  font-size: 1.06rem; color: rgba(244,248,251,.78); padding-left: 18px;
  border-bottom: 1px solid rgba(244,248,251,.07);
}
.mobmenu__panel .mobmenu__link--sub::before{
  content: ""; display: inline-block; width: 12px; height: 1px;
  background: var(--accent); vertical-align: middle; margin-right: 10px;
}

/* ── M-5 · a swipeable slider must not fight the vertical page scroll ───── */
.is-swipeable{ touch-action: pan-y; }

@media (max-width: 880px){

  /* ── M-1 · the homepage hero ────────────────────────────────────────────
     The subject was cropped out of frame and the copy sat on the picture.
     The photograph now holds its subject at the TOP and a black wall comes
     down over the lower half, so the copy reads on the overlay, not the image. */
  /* the photograph is scaled to the hero's HEIGHT on a phone, so there is no
     vertical overflow for object-position to work with — the band has to be
     given its own height instead. The picture takes the top 52%, holding the
     pair; the rest is the page's own black, and the copy sits on that. */
  #top.hero--exec .hero__bg{ inset: 0 0 auto 0; height: 52%; background: transparent; }
  #top.hero--exec .hero__bg img{ object-position: 64% 46% !important; }
  #top.hero--exec .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(4,5,7,.10) 0%, rgba(4,5,7,.16) 26%, rgba(4,5,7,.58) 41%,
        rgba(4,5,7,.94) 50%, var(--bg) 56%, var(--bg) 100%) !important;
  }

  /* ── M-2 · #connection reads centred, every line ──────────────────────── */
  #connection .rgap2__copy{ text-align: center; }
  #connection .rgap2__line{ text-align: center; margin-inline: auto; max-width: 18ch; }
  #connection .rgap2__lady{ margin-inline: auto; }

  /* ── M-6 · the CapitalQ journey stacks instead of sliding ─────────────── */
  #journey .scar__track{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
    transform: none !important;
    width: auto !important;
  }
  #journey .scard{
    width: auto !important; flex: 0 0 auto !important;
    min-width: 0 !important; max-width: none !important;
  }
  #journey .scar__btn,
  #journey .fb-arrow{ display: none !important; }

  /* ── M-7 · the CapitalQ hero holds its subject ────────────────────────── */
  #top.cqp-hero .hero__bg img{ object-position: 58% 20% !important; }

  /* ── M-8 · the team head is centred, like the portraits under it ──────── */
  #top.tbox3 .tbox__copy{ text-align: center; }
  #top.tbox3 .tbox__copy > *{ margin-inline: auto; }
}

/* ── M-9 · Africa → Arabia: Africa on top, the arrow points DOWN, Arabia
   below, and the lockup grows so it reads as the page's hero headline. ─── */
@media (max-width: 880px){
  .aap-title{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 0; row-gap: .02em;
    justify-items: center;
    font-size: clamp(3.6rem, 19vw, 6.4rem) !important;
    line-height: .94 !important;
  }
  .aap-w--a{ grid-column: 1 !important; grid-row: 1 !important; justify-self: center !important; }
  .aap-w--arrow{
    grid-column: 1 !important; grid-row: 2 !important;
    justify-self: center !important; align-self: center !important;
    font-size: .46em; line-height: 1;
    padding-block: .12em .06em; margin-bottom: 0;
  }
  /* the → becomes a ↓ without touching the markup */
  .aap-w--arrow > span{ display: inline-block; transform: rotate(90deg); }
  .aap-w--b{ grid-column: 1 !important; grid-row: 3 !important; justify-self: center !important; }
  .aap-hero__sub{ text-align: center; }
  .aap-hero__inner{ padding-top: 96px; }
}
/* the reveal animation owns `transform` on the span (.aap-js .aap-w--arrow > span),
   so the rotation has to sit on the cell, not the glyph */
@media (max-width: 880px){
  .aap-w--arrow{ transform: rotate(90deg); transform-origin: 50% 50%; }
  .aap-w--arrow > span{ transform: none; }
  .aap-js .aap-w--arrow > span{ transform: scaleX(1); }
  .aap-w--arrow{ font-size: .52em; }
}