/* Phone-size layout. Page styles are inline (exported from a design canvas),
   so these overrides match on inline style values and need !important. */

.pt-menu-btn{display:none}

@media (max-width: 720px) {
  /* Main nav: logo + menu button on one row, links in a drop-down panel */
  .pt-has-menu{flex-wrap:wrap !important;padding-top:16px !important;padding-bottom:16px !important}
  .pt-has-menu img{height:34px !important}
  .pt-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,0.6);background:transparent;color:#FFFFFF;cursor:pointer}
  .pt-menu-btn:focus-visible{outline:3px solid #6FB3F5;outline-offset:2px}
  .pt-menu-btn .pt-close{display:none}
  .pt-open .pt-menu-btn .pt-open-icon{display:none}
  .pt-open .pt-menu-btn .pt-close{display:block}
  .pt-has-menu > div{display:none !important}
  /* Open menu: solid black full-screen panel so links stay readable over hero photos */
  .pt-has-menu.pt-open{position:fixed;inset:0;z-index:100;max-width:none !important;background:#000000;align-content:flex-start;overflow-y:auto}
  .pt-has-menu.pt-open > div > a.pt-link{color:#FFFFFF !important}
  .pt-has-menu.pt-open > div{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;width:100%;font-size:18px !important;padding:8px 0 4px;border-top:1px solid rgba(255,255,255,0.2)}
  .pt-has-menu.pt-open > div > a{display:flex !important;align-items:center;min-height:48px}
  .pt-has-menu.pt-open > div > a[style*="border-radius: 50px"]{justify-content:center;margin-top:12px}

  /* Hero: less empty space, slightly smaller intro text, full-width buttons */
  section > header + div[style]{padding-top:32px !important;padding-bottom:96px !important;gap:18px !important}
  section > header + div[style] > p{font-size:17px !important}
  section > header + div > span[style*="border-radius: 50px"]{font-size:13px !important}
  section > header + div > div > a,
  section > header + div > a[style*="border-radius: 50px"]{flex:1 1 100%;justify-content:center;align-self:stretch !important}

  /* Cards that overlap the bottom of the hero */
  [style*="margin: -56px auto 0"],
  [style*="margin: -64px auto 0"],
  [style*="margin: -88px auto 0"]{margin-top:-56px !important}

  /* Section spacing */
  [style*="padding: 112px 24px"],
  [style*="padding: 96px 24px"],
  [style*="padding: 88px 24px"],
  [style*="padding: 80px 24px"]{padding-top:56px !important;padding-bottom:56px !important}
  [style*="padding: 96px 24px 56px"]{padding-bottom:24px !important}
  [style*="padding: 40px 24px 112px"]{padding-top:24px !important;padding-bottom:56px !important}
  [style*="padding: 0 24px 112px"]{padding-bottom:56px !important}
  [style*="padding: 72px 24px 32px"]{padding-top:48px !important}
  [style*="gap: 48px"]{gap:32px !important}
  [style*="gap: 64px"]{gap:48px !important}

  /* Cards */
  [style*="padding: 32px;"]{padding:24px !important}
  [style*="min-height: 230px"]{min-height:0 !important}

  /* "At a glance" stats: 2 x 2 instead of four stacked rows */
  section[aria-label="At a glance"] > div{grid-template-columns:1fr 1fr !important;gap:20px 16px !important}
  section[aria-label="At a glance"] span[style*="font-size: 40px"]{font-size:30px !important}
  section[aria-label="At a glance"] span[style*="font-size: 15px"]{font-size:14px !important}

  /* Home: "200+" badge sat past the photo edge */
  [style*="right: -12px"]{right:12px !important;bottom:-20px !important;padding:16px 20px !important}
  [style*="right: -12px"] span[style*="font-size: 48px"]{font-size:36px !important}

  /* Home: case-study photo stretched very tall when stacked */
  img[style*="min-height: 380px"]{min-height:0 !important;height:auto !important;aspect-ratio:4 / 3}

  /* Contact: long email address */
  a[href^="mailto:"] span[style*="font-size: 20px"]{font-size:17px !important;overflow-wrap:anywhere}
}
