/* Garrett, McAuley & Co. classic site: phone and tablet layout (Nov 4, 2026).
   Everything sits inside the 920px media query, so the desktop page is untouched.
   header.php adds the viewport tag, turns off the custom scrollbars on small screens, and builds the top bar
   (logo + menu button). Same palette, fonts, and green marker drawings as the desktop site. */
.gm-burger, .gm-top, .gm-home-nav { display: none; }

@media (max-width: 920px) {
  html { scrollbar-gutter: auto; }
  body { margin: 0; background: #eff9ee; text-align: left; -webkit-text-size-adjust: 100%; }
  #main { position: relative; width: auto; max-width: 720px; height: auto; margin: 0 auto; padding: 0 0 8px; background: #fff; box-shadow: none; }

  /* Top bar */
  .gm-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 6px 0 18px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid #e2ebe0; }
  #main #logo { position: static; display: block; width: 210px; height: auto; }
  .gm-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 50px; height: 50px; padding: 0 13px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .gm-burger span { display: block; height: 2px; border-radius: 2px; background: #376321; transition: transform .2s ease, opacity .2s ease; }
  body.gm-menu-open .gm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.gm-menu-open .gm-burger span:nth-child(2) { opacity: 0; }
  body.gm-menu-open .gm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Menu: drops down under the top bar */
  #main #menu { display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 29; padding: 4px 0 10px; background: #fff; border-bottom: 1px solid #e2ebe0; box-shadow: 0 16px 32px rgba(0, 0, 0, .10); }
  body.gm-menu-open #main #menu { display: block; }
  #main #menu > div { position: static; width: auto; height: auto; }
  #main #menu a { width: auto; height: auto; }
  #main #menu .gm-m { width: auto; height: auto; padding: 15px 24px; font-size: 15px; letter-spacing: 1.2px; border-top: 1px solid #f0f4ee; box-shadow: none; }
  #main #menu > div:first-child .gm-m { border-top: 0; }
  #main #menu .gm-m.gm-on { color: #262625; font-weight: 600; box-shadow: inset 4px 0 0 rgba(46, 139, 0, .75); }

  /* Page text: stacked, full width, readable sizes */
  #main [id^="content_"] { position: relative; width: auto; height: auto; min-height: 0; padding: 30px 22px 6px; background-image: none; }
  #main .gm-c { position: static; white-space: normal; }
  #main .gm-h { margin: 0 0 12px; font-size: 31px; line-height: 1.1; letter-spacing: .6px; }
  #main .gm-intro { margin: 0 0 10px; font-size: 17px; line-height: 1.45; }
  #main .gm-sub { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }

  /* Home: the tagline over the arrow drawing */
  /* The bottom padding ends where the arrow tip starts (347px above the bottom), so margin:auto centers the buttons between the quote and the arrow. */
  #main #content_homepage { display: flex; flex-direction: column; min-height: 450px; padding-top: 44px; padding-bottom: 350px; background: #fff url('../Images/content_homepage_blank.jpg') no-repeat right -10px bottom 0 / 640px auto; }
  /* Home on phones: the menu as big buttons under the tagline, so a visitor sees where to go next. */
  .gm-home-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: auto 0; }
  .gm-home-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 14px; border: 1px solid #d5e4d0; border-radius: 10px; background: rgba(255, 255, 255, .95); color: #376321; font: 600 13px/1.2 'Segoe UI', 'Open Sans', Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
  .gm-home-nav a::after { content: '\203A'; margin-left: 8px; font-size: 22px; line-height: 1; color: #4c7d33; }
  .gm-home-nav a.gm-primary { background: #376321; border-color: #376321; color: #fff; }
  .gm-home-nav a.gm-primary::after { color: #fff; }
  #main .gm-quote { max-width: 340px; padding-left: 4px; font-size: 30px; line-height: 1.3; }
  #main .gm-quote::before { content: '\201C'; margin-right: 6px; font: 800 30px/1 'EB Garamond', Garamond, Georgia, serif; font-style: normal; color: #676767; }
  #main .gm-quote::after { content: '\201D'; margin-left: 8px; font: 800 30px/1 'EB Garamond', Garamond, Georgia, serif; font-style: normal; color: #676767; }
  #main .gm-q { display: none; }

  /* Services: the list, then the green plus */
  #main #content_services { padding-bottom: 170px; background: #fff url('../Images/content_services_blank.jpg') no-repeat right -40px bottom 0 / 560px auto; }
  #main #services_overlay_left { display: none; }
  #main #services_overlay { position: static; margin: 6px 0 0; padding: 0; background: none; overflow: visible; }
  #main #services_overlay li { position: relative; list-style: none; height: auto !important; padding: 13px 0 13px 22px; border-bottom: 1px solid #edf2eb; font-size: 15px !important; line-height: 1.35; letter-spacing: .3px; color: #555 !important; }
  #main #services_overlay li::before { content: ''; position: absolute; left: 3px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: #4c7d33; }

  /* Testimonials: one card per quote, the green quote mark by the heading */
  #main #content_testimonials { padding-bottom: 4px; background: #fff url('../Images/content_testimonials_blank.jpg') no-repeat right -100px top -80px / 890px auto; }
  #main #testimonials { position: static; width: auto; height: auto; overflow: visible; padding: 8px 22px 10px; }
  #main #testimonials > div { height: auto !important; }
  #main #testimonials p { margin: 0 0 16px; padding: 16px 18px; border-left: 3px solid rgba(46, 139, 0, .75); border-radius: 0 10px 10px 0; background: #f6faf5; font-size: 17px !important; line-height: 1.5; color: #444; }
  #main #testimonials p span { display: block; margin-top: 8px; font-size: 16px !important; line-height: 1.35; }

  /* Clients: tabs as a row, plain scrolling list, the smiling marker at the end */
  #main #clients_banks, #main #clients_mortgage, #main #clients_institutional { position: static; display: inline-block; margin: 16px 10px 0 0; vertical-align: top; }
  #main #clients_banks { margin-left: 22px; }
  #main [id^="clients_list_"] { position: static; width: auto; height: auto; overflow: visible; margin-top: 10px; padding: 12px 22px 270px; border-top: 1px solid #edf2eb; background: #fff url('../Images/content_clients_banks_blank.jpg') no-repeat left -20px bottom 0 / 700px auto; }
  #main [id^="clients_list_"] p { height: auto !important; margin: 0; font-size: 15px !important; line-height: 1.85; }

  /* About: flowing paragraphs, the green colon after the heading */
  #main .gm-about br, #main .gm-bio br { display: none; }
  #main .gm-h-about::after { content: ''; display: inline-block; width: 20px; height: 62px; margin: 0 0 0 14px; vertical-align: -16px; background: url('../Images/content_about_blank.jpg') no-repeat -383px -14px / 490px auto; }
  #main .gm-about { margin: 6px 0 22px; font-size: 14px; line-height: 1.6; letter-spacing: .3px; }
  #main .gm-name { margin: 0 0 4px; font-size: 24px; line-height: 1.2; }
  #main .gm-bio { margin: 0 0 22px; font-size: 16px; line-height: 1.55; }

  /* Contact: the three of us, tap to call or email, the keypad drawing below */
  #main #content_contact { padding-bottom: 300px; background: #fff url('../Images/content_contact_blank.jpg') no-repeat right -90px bottom 0 / 560px auto; }
  #main #content_contact .gm-c { position: static; white-space: normal; }
  #main #content_contact .gm-h { margin-bottom: 4px; }
  #main #content_contact .gm-n { margin-top: 22px; font-size: 24px; }
  #main #content_contact .gm-l { margin-top: 4px; font-size: 17px; }
  #main #content_contact .gm-l a { display: inline-block; padding: 5px 0; color: #376321; }

  #copyright { margin: 18px 16px 30px; font-size: 11px; line-height: 1.5; text-align: center; }
}