/* MOBILE BUG FIXES */
@media (max-width:768px){
  /* Hero title on mobile: render as plain text (text-pressure animation hidden, word-wrap natural)
   * The text-pressure JS sets data-tp-text="..." on each line; we surface that text via CSS
   * and hide the per-char spans, so the title wraps at word boundaries cleanly. */
  .cap-hero__title{display:block !important;width:100%;word-break:normal;overflow-wrap:break-word}
  .cap-hero__title-line{display:block !important;width:100%}
  .cap-hero__title-line[data-tp-text] > span[data-char]{display:none !important}
  .cap-hero__title-line[data-tp-text]::before{content:attr(data-tp-text);display:inline}
  .cap-hero__title-line:not([data-tp-text]) > span[data-char]{display:inline !important;font-variation-settings:normal !important}

  /* Stats: stack 2x2 instead of 4x1 on mobile */
  .cap-hero__stats{grid-template-columns:repeat(2,1fr) !important;gap:0.75rem !important}
  .cap-hero__stat{padding:1rem 0.75rem !important;min-width:0 !important}
  .cap-hero__stat-value{font-size:clamp(1.5rem,7vw,2.25rem) !important;word-break:keep-all}
  .cap-hero__stat-label{font-size:0.7rem !important;line-height:1.3 !important}
  /* Footer offices: stack vertically */
  .footer__offices{display:flex !important;flex-direction:column !important;grid-template-columns:none !important;gap:1rem !important}
  .office{width:100% !important;min-width:0 !important}
  /* Footer columns: make grid responsive */
  .footer__cols, .footer__top{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:1.5rem !important}
  .footer__col{min-width:0 !important;width:auto !important}
  .footer__legal{flex-wrap:wrap !important;gap:0.5rem !important}
  .footer__legal > *{min-width:0 !important}
  /* About team grid: allow cards to grow with content */
  /* About team grid: convert 3D-flip card → flat static card on mobile.
   * Cross-browser safe (Firefox/Safari hated the preserve-3d + aspect-ratio combo). */
  .about-team__grid{grid-template-columns:repeat(2,1fr) !important;gap:0.75rem !important}
  .about-member{aspect-ratio:auto !important;perspective:none !important;min-height:0 !important}
  .about-member__inner{transform:none !important;transform-style:flat !important;transition:none !important;height:auto !important}
  .about-member__face{position:static !important;inset:auto !important;backface-visibility:visible !important;-webkit-backface-visibility:visible !important;transform:none !important;height:auto !important}
  .about-member__back{display:none !important}
  .about-member__front{display:flex !important}
  .about-member__photo{aspect-ratio:1 !important;height:auto !important;flex:none !important;width:100% !important}
  .about-member__meta{padding:0.85rem !important}
  .about-member__name{font-size:1rem !important;line-height:1.2 !important}
  .about-member__role{font-size:0.75rem !important}
  /* Footer bottom row: stack vertically on mobile so status doesn't overflow */
  .footer__bottom{flex-wrap:wrap !important;flex-direction:column !important;align-items:flex-start !important;gap:0.75rem !important}
  .footer__status{order:3}
  /* Clients marquee items: keep flex but parent .clients section already clips with overflow:hidden */
  /* Decorative hero stars: clip to viewport */
  .cap-hero__stars{overflow:hidden}
  /* Cap-hero content can grow naturally; remove desktop max-width */
  .cap-hero__content{max-width:100% !important}
}
@media (max-width:480px){
  /* Tighter still on small phones */
  .cap-hero__title{font-size:clamp(1.75rem,9vw,2.5rem) !important}
  .cap-hero__stats{grid-template-columns:repeat(2,1fr) !important}
  .footer__cols, .footer__top{grid-template-columns:1fr !important}
}