/* Phone fixes for every /nn/ page, from the 2026-09-25 mobile audit (scripts/_mobile.mjs).
   Linked on every page by the post-build step (scripts/nn-motion.mjs), after the page's own
   styles, so this is the one place phone rules live. */
@media (max-width: 767px) {

  /* About: the founder cards and the four principles were sideways-swipe rows with nothing to
     say they swipe, so on a phone they just looked cut off. Founders become a 2x2 grid and the
     principles stack. */
  .team-1-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible !important; }
  .team-1-grid > .team-1-card { min-width: 0 !important; width: auto !important; padding: 10px; }
  .team-1-card .team-1-image-wrapper { aspect-ratio: 1 / 1; height: auto; }
  .team-1-card .team-1-image { width: 100%; height: 100%; object-fit: cover; }
  .team-1-card .team-text-title { font-size: 15px; }
  .team-1-card .team-1-content-wrapper { flex-direction: column; align-items: flex-start; gap: 8px; }
  .team-1-card .team-1-content-wrapper > a, .team-1-card .team-1-content-wrapper > [class*="social"] { align-self: flex-start; }
  .about-1-mission-content-wrapper { flex-direction: column !important; overflow: visible !important; gap: 12px; }
  .about-1-mission-content-wrapper > .about-1-mission-card-wrapper { min-width: 0 !important; width: 100% !important; }

  /* The closing call-to-action card: two nested wrappers each padded the text in, leaving a
     230px column. Give the text the width. */
  .cta-3-wrapper { padding: 12px !important; }
  .cta-3-holder { padding: 28px 20px !important; }

  /* Buttons: a label that wrapped showed both of its hover layers at once, overlapping. Keep
     labels on one line. */
  .primary-button-text, .secondary-button .primary-button-text { white-space: nowrap; }

  /* Tap targets: footer, copyright, review and back links were 17 to 24px tall. */
  .footer-link { padding-top: 6px; padding-bottom: 6px; }
  .copyright-link { display: inline-block; padding: 8px 2px; }
  .lo-review-link { padding-top: 8px; padding-bottom: 8px; }
  .blog-1-tab-link { min-height: 40px; }
  .nn-post-back { display: inline-block; padding: 8px 0; }
}

/* ---- round two, from David's phone review (2026-09-25) ---- */

/* The menu: Webflow made the overlay as tall as the whole page (the page scrolled behind it)
   and the links were 14px with no spacing. Now it is one screen tall, the page underneath is
   locked (nav.js sets html.nn-menu-open), and the links are big enough to tap. */
@media (max-width: 991px) {
  html.nn-menu-open, html.nn-menu-open body { overflow: hidden !important; }
  .w-nav-overlay { height: calc(100dvh - 90px) !important; overflow-y: auto !important; }
  [data-nav-menu-open].home-nav-menu { display: flex !important; flex-direction: column; align-items: stretch; gap: 0; margin: 8px 16px 0; padding: 8px 20px 24px; background: #fff; border: 1px solid #E4E9F5; border-radius: 20px; box-shadow: 0 24px 50px -36px rgba(35, 42, 80, .45); text-align: left; }
  [data-nav-menu-open] .navbar-link { display: block; width: 100%; align-self: stretch; box-sizing: border-box; font-family: var(--brand-font-heading); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; color: #232323; padding: 15px 4px; border: 0; border-bottom: 1px solid #EEF1F7; border-radius: 0; background: none; text-align: left; }
  [data-nav-menu-open] .navbar-link.w--current { color: #536ee5; }
  [data-nav-menu-open] .primary-button-2 { display: flex !important; align-items: center; justify-content: center; margin-top: 22px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: #232323; color: #fff; font-size: 16px; font-weight: 600; }
  [data-nav-menu-open] .primary-button-2 .primary-button-text { color: #fff; }
}

/* Homepage "Work we've done" on phones and tablets: every case study, stacked, instead of a
   one-at-a-time slider that read as broken; and no dead space under it. */
@media (max-width: 991px) {
  .home-3-study-slider { height: auto !important; padding-bottom: 0 !important; background: none !important; }
  .home-3-study-slider-mask { height: auto !important; white-space: normal !important; overflow: visible !important; }
  .home-3-study-slide { display: block !important; width: 100% !important; transform: none !important; visibility: visible !important; opacity: 1 !important; margin: 0 0 16px !important; position: relative !important; left: auto !important; }
  .home-3-study-slide:last-child { margin-bottom: 0 !important; }
  .home-3-study-slide-arrow, .home-3-study-slide-nav { display: none !important; }
  .section.home-3-study { padding-bottom: 48px !important; }
}

@media (max-width: 767px) {
  /* homepage: the "tried" intro sat too far above the first card */
  .lo-tried .section-wrapper { row-gap: 0 !important; }
  .lo-tried-grid { margin-top: 36px; }

  /* About: long names (Jonathan Robinson) ran past the card edge */
  .team-1-card .team-1-content-holder, .team-1-card .team-1-content-wrapper { min-width: 0; max-width: 100%; }
  .team-1-card .team-text-title, .team-1-card .text-sm { white-space: normal !important; overflow-wrap: anywhere; font-size: 14px; }

  /* Podcast: the cover was a squashed strip; make it a square that fills the top of the card */
  .la-pod-player .la-pod-cover { width: 100% !important; aspect-ratio: 1 / 1 !important; height: auto; }
  .la-pod-player .la-pod-cover-word { font-size: 48px; }
  .la-pod-player .la-pod-cover-sub { font-size: 13px; }

  /* Footer: the social icons get the full row instead of wrapping in half of it */
  .footer-link-holder:has(.la-follow) { grid-column: 1 / -1; }
  .la-follow { flex-wrap: nowrap !important; }
}