/*
 * Mobile layout for Epogee Capital.
 *
 * Every page is authored as a fixed 1440px desktop canvas (inline styles) that is
 * scaled down with CSS zoom. On phones and small tablets that shrinks everything
 * to ~25%, so below 900px we turn the zoom off and re-flow the inline layouts into
 * a single-column, touch-friendly design. Rules use !important because the
 * original styles are inline.
 */
@media (max-width: 900px) {
  /* ---------- Canvas ---------- */
  /* body must not be a scroll container, or the sticky header stops working */
  body { overflow: visible !important; overflow-x: clip !important; }
  .ecm2wrap { overflow: visible !important; overflow-x: clip !important; }
  .ecm2 { zoom: 1 !important; width: 100% !important; overflow: visible !important; overflow-x: clip !important; }
  .ecm2 [style*="width: 1440px"] { width: 100% !important; }
  .ecm2 img { max-width: 100%; }

  /* ---------- Header + menu ---------- */
  .ecm2 > header {
    position: sticky !important; top: 0; z-index: 40;
    height: 68px !important; padding: 0 20px !important;
    border-bottom: 1px solid #3D5068;
  }
  .ecm2 > header > a img { height: 36px !important; }
  .ecm2 > header nav {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 8px 20px 24px; background: #242F41; border-bottom: 1px solid #3D5068;
    max-height: calc(100vh - 68px); overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .3);
  }
  .ecm2 > header.nav-open nav { display: flex !important; }
  .ecm2 > header nav > a {
    padding: 18px 0 !important; font-size: 13px !important;
    border-bottom: 1px solid #3D5068 !important;
  }
  .ecm2 > header nav > span { margin: 20px 0 0 !important; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    background: none; border: 0; color: #FFFFFF; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; position: relative; width: 22px; height: 1.5px; background: currentColor;
    transition: transform .2s, background .2s;
  }
  .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
  .nav-toggle span::before { top: -7px; }
  .nav-toggle span::after { top: 7px; }
  .nav-open .nav-toggle span { background: transparent; }
  .nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

  /* ---------- Typography ---------- */
  .ecm2 h1 { font-size: 40px !important; line-height: 1.1 !important; }
  .ecm2 h1[style*="padding-left: 30px"],
  .ecm2 [style*="padding-left: 30px; border-left: 2px"] { padding-left: 18px !important; }
  .ecm2 [style*="font-size: 5"] { font-size: 34px !important; }
  .ecm2 [style*="font-size: 4"] { font-size: 30px !important; line-height: 1.18 !important; }
  .ecm2 [style*="font-size: 3"] { font-size: 25px !important; }
  .ecm2 [style*="font-size: 2"] { font-size: 21px !important; }
  .ecm2 [style*="font-size: 19px"] { font-size: 17px !important; }
  .ecm2 [style*="font-size: 17px"] { font-size: 16px !important; }
  .ecm2 [style*="padding-left: 32px"] { padding-left: 20px !important; }

  /* ---------- Sections ---------- */
  .ecm2 section[style*="padding"] { padding: 56px 20px !important; }
  .ecm2 section[style*="padding: 40px 80px"] { padding: 32px 20px !important; }
  .ecm2 section[style*="padding: 0 80px 48px"] { padding: 0 20px 40px !important; }
  .ecm2 section[style*="padding: 160px"] { padding: 88px 20px 96px !important; }
  .ecm2 section[style*="margin-top: 80px"] { margin-top: 0 !important; }

  /* Every multi-column grid stacks by default */
  .ecm2 [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .ecm2 [style*="grid-template-columns"][style*="gap: 5"],
  .ecm2 [style*="grid-template-columns"][style*="gap: 6"],
  .ecm2 [style*="grid-template-columns"][style*="gap: 8"] { gap: 32px !important; }
  .ecm2 section[style*="flex-direction: column; gap: 64px"] { gap: 40px !important; }
  .ecm2 section[style*="flex-direction: column; gap: 56px"] { gap: 40px !important; }

  /* Side-by-side rows (CTA bands, section headers) stack */
  .ecm2 section[style*="justify-content: space-between"],
  .ecm2 [style*="justify-content: space-between; align-items: flex-end"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 24px !important;
  }
  .ecm2 [style*="justify-content: space-between; align-items: flex-end"] { margin-bottom: 32px !important; }

  /* Buttons */
  .ecm2 div[style*="display: flex; gap: 14px"] { flex-wrap: wrap; }
  .ecm2 .btn { height: 52px; }

  /* ---------- Hero ---------- */
  .ecm2 section[style*="position: relative; height:"] {
    height: auto !important; padding: 48px 20px 56px !important; background: #242F41 !important;
  }
  .ecm2 section > div[aria-hidden="true"][style*="position: absolute; right: 0"] {
    width: 100% !important; height: 100% !important;
  }
  .ecm2 section > div[aria-hidden="true"] > div[style*="linear-gradient(90deg"] {
    background: linear-gradient(180deg, rgba(36, 47, 65, .55) 0%, rgba(36, 47, 65, .85) 45%, #242F41 85%) !important;
  }
  .ecm2 .hero-bg::before { left: -60px; top: -20px; width: 320px; height: 380px; }
  .ecm2 figure[style*="padding: 36px 32px"] { padding: 28px 24px !important; }

  /* Hero card rows (What we do services, Family office offices) flow below the text */
  .ecm2 section > div[style*="position: absolute; left: 80px; right: 80px; bottom: 0"],
  .ecm2 section > div[style*="position: absolute; left: 140px; right: 140px; bottom: 0"] {
    position: relative !important; left: auto !important; right: auto !important; margin-top: 48px;
  }
  .ecm2 .svc { height: auto !important; padding: 28px 24px !important; }
  .ecm2 section > div[style*="left: 140px"] { gap: 56px !important; margin-top: 72px; }
  .ecm2 .office { padding: 0 24px 28px !important; }

  /* ---------- Home ---------- */
  /* Values strip: 2 x 2 */
  .ecm2 div[style*="margin-top: -96px"] {
    margin: 0 -20px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ecm2 div[style*="margin-top: -96px"] > div { padding: 28px 14px !important; border: 0 !important; }
  .ecm2 div[style*="margin-top: -96px"] > div:nth-child(odd) { border-right: 1px solid #3D5068 !important; }
  .ecm2 div[style*="margin-top: -96px"] > div:nth-child(-n+2) { border-bottom: 1px solid #3D5068 !important; }
  .ecm2 section[style*="padding: 0 80px 110px"] { padding-top: 0 !important; }
  .ecm2 div[style*="margin-top: 104px"] { margin-top: 56px !important; }
  .ecm2 div[style*="margin-top: 104px"] > svg { display: none; }
  .ecm2 div[style*="padding-top: 30px"] { padding-top: 0 !important; }

  /* Process diagram becomes a numbered 2 x 2 list */
  .ecm2 div[style*="width: 460px; height: 440px"] {
    position: static !important; width: auto !important; height: auto !important; justify-self: stretch !important;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: step;
  }
  .ecm2 div[style*="width: 460px; height: 440px"] > div[style*="border-radius: 50%"],
  .ecm2 div[style*="width: 460px; height: 440px"] > img { display: none; }
  .ecm2 div[style*="width: 460px; height: 440px"] > div[style*="letter-spacing"] {
    position: static !important; width: auto !important; padding: 20px 16px !important;
    text-align: left !important; border: 1px solid #3D5068; line-height: 1.4 !important;
  }
  .ecm2 div[style*="width: 460px; height: 440px"] > div[style*="letter-spacing"]::before {
    counter-increment: step; content: "0" counter(step);
    display: block; margin-bottom: 10px; color: #C9985C;
  }

  /* Services list */
  .ecm2 div:has(> a[style*="border-left: 1px solid #DDD5C8"]) > a {
    padding: 28px 0 !important; border-left: 0 !important; border-top: 1px solid #DDD5C8 !important;
  }
  .ecm2 div:has(> a[style*="border-left: 1px solid #DDD5C8"]) > a:first-child { padding-top: 0 !important; border-top: 0 !important; }

  /* Strategy tiles */
  .ecm2 a[style*="height: 220px"] { height: 180px !important; }

  /* Contact form: 16px inputs stop iOS zooming on focus */
  .ecm2 .field input, .ecm2 .field select, .ecm2 .field textarea { font-size: 16px !important; width: 100%; }
  .ecm2 form div[style*="display: flex; align-items: center; gap: 20px"] {
    flex-direction: column !important; align-items: stretch !important; gap: 16px !important;
  }
  .ecm2 form button.btn { justify-content: center; }

  /* ---------- Stacked columns with dividers ---------- */
  .ecm2 [style*="grid-template-columns"] > div[style*="border-left: 1px solid #DDD5C8"],
  .ecm2 .pil, .ecm2 .cap:not(:first-child),
  .ecm2 div[style*="display: flex; gap: 18px; align-items: center; padding"] {
    padding: 24px 0 !important; border-left: 0 !important; border-top: 1px solid #DDD5C8 !important;
  }
  .ecm2 .cap:first-child { padding: 0 0 24px !important; }
  .ecm2 div[style*="display: flex; gap: 18px; align-items: center; padding-right"] { padding-top: 0 !important; border-top: 0 !important; }
  .ecm2 .dim { padding: 28px 0 !important; border-left: 0 !important; border-top: 1px solid #3D5068 !important; }
  .ecm2 .dim:first-child { padding-top: 0 !important; border-top: 0 !important; }
  .ecm2 section > div[style*="padding-right: 32px"],
  .ecm2 section > div[style*="padding-right: 40px"] { padding-right: 0 !important; margin-bottom: 16px; }
  .ecm2 div[style*="padding-left: 48px; border-left"],
  .ecm2 div[style*="padding-left: 36px; border-left"] {
    padding: 24px 0 0 !important; border-left: 0 !important; border-top: 1px solid #DDD5C8 !important;
  }
  .ecm2 .collab { font-size: 10px; }
  .ecm2 div:has(> .collab) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; }
  .ecm2 section[style*="grid-template-columns: 96px"] { justify-items: start; gap: 24px !important; }

  /* Process timelines become vertical */
  .ecm2 div[style*="grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px"] { gap: 28px !important; padding-top: 0 !important; }
  .ecm2 div[style*="left: 70px; right: 70px; top: 28px"] {
    left: 22px !important; right: auto !important; top: 22px !important; bottom: 22px; width: 1px; height: auto !important;
  }
  .ecm2 div[style*="grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px"] > div[style*="text-align: center"] {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px !important; row-gap: 4px !important;
    text-align: left !important; align-items: start !important;
  }
  .ecm2 div[style*="grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px"] .num { grid-row: span 2; }
  .ecm2 div[style*="grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px"] > div > span:not(.num) { grid-column: 2; }

  /* ---------- Team ---------- */
  .ecm2 .person { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; padding: 20px !important; }
  .ecm2 .person img { width: 140px !important; height: 175px !important; }
  .ecm2 div[style*="padding: 40px; background: #1C2736"] { padding: 28px 24px !important; }
  .ecm2 div[style*="position: relative; height: 320px"] { height: 220px !important; }
  .ecm2 div[style*="padding: 56px 48px"] { padding: 40px 20px !important; border-right: 0 !important; border-bottom: 1px solid #3D5068; }

  /* ---------- Footer ---------- */
  .ecm2 > footer { height: auto !important; padding: 48px 20px 88px !important; gap: 28px !important; }
  .ecm2 > footer > div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
  .ecm2 > footer > div[style*="grid-template-columns"] > div:first-child,
  .ecm2 > footer > div[style*="grid-template-columns"] > div:last-child { grid-column: 1 / -1; }
  .ecm2 > footer div[style*="justify-content: space-between"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 16px;
  }
  .ecm2 > footer div[style*="justify-content: space-between"] > span[style*="gap: 24px"] { flex-wrap: wrap; gap: 12px 20px !important; }

}

/* Small tablets: card grids go two-up */
@media (min-width: 600px) and (max-width: 900px) {
  .ecm2 div:has(> .card), .ecm2 div:has(> .tile), .ecm2 div:has(> .svc),
  .ecm2 div:has(> a[style*="height: 220px"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ecm2 div:has(> .card) > div:first-child { grid-column: 1 / -1; }
  .ecm2 .person { grid-template-columns: 140px minmax(0, 1fr) !important; }
}

@media (min-width: 901px) {
  .nav-toggle { display: none; }
}