/*
 * Sousa Murray mobile responsiveness hardening
 * Supports narrow iPhone/Android viewports, notches/safe areas,
 * landscape phones and touch-first navigation without browser zoom hacks.
 */

html,
body,
#root {
  width: 100%;
  max-width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.wrap,
.header-inner,
.footer-grid,
.footer-registration-row,
.footer-disclosure,
.footer-social-row,
.hero-grid,
.split,
.content-grid,
.service-detail-hero-grid,
.service-grid,
.four-grid,
.three-grid,
.journey-grid,
.capability-grid,
.pricing-grid {
  min-width: 0;
}

.hero-grid > *,
.split > *,
.content-grid > *,
.service-detail-hero-grid > *,
.service-grid > *,
.four-grid > *,
.three-grid > *,
.journey-grid > *,
.capability-grid > *,
.pricing-grid > * {
  min-width: 0;
}

/* Phones and small tablets */
@media (max-width: 700px) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .header-inner {
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    gap: 8px !important;
  }

  .plain-wordmark {
    min-width: 0 !important;
    max-width: calc(100vw - 118px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 1.05rem !important;
    letter-spacing: -0.035em !important;
  }

  .header-actions {
    gap: 6px !important;
  }

  .header-square-action,
  .mobile-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 11px !important;
  }

  .site-header .mobile-nav[aria-label="Mobile navigation"] {
    position: relative !important;
    max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  }

  .mobile-nav > a,
  .mobile-websites a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.35 !important;
  }

  .mobile-websites {
    padding: 10px 12px !important;
  }

  .wrap,
  .footer-grid,
  .footer-registration-row,
  .footer-disclosure,
  .footer-social-row {
    width: 100% !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  h1,
  .hero h1,
  .page-hero h1,
  .service-title-row h1 {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 3.35rem) !important;
    line-height: 1.08 !important;
  }

  h2 {
    font-size: clamp(1.65rem, 7.2vw, 2.25rem) !important;
  }

  .page-hero h1,
  .service-title-row h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  .hero,
  .page-hero,
  .service-detail-hero {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .hero-grid,
  .split,
  .content-grid,
  .service-detail-hero-grid {
    gap: 32px !important;
  }

  .hero-copy,
  .page-hero p:last-child,
  .service-lead,
  .section-heading > p:last-child,
  .service-copy p {
    font-size: .98rem !important;
    line-height: 1.65 !important;
  }

  .hero-panel,
  .service-summary-card,
  .service-card,
  .mini-card,
  .info-card,
  .journey-card,
  .price-card {
    width: 100%;
    max-width: 100%;
  }

  .service-card,
  .mini-card,
  .info-card,
  .journey-card,
  .price-card,
  .service-summary-card {
    padding: 20px !important;
    border-radius: 18px !important;
  }

  .intro,
  .info-section,
  .service-section,
  .trust,
  .band {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-heading {
    margin-bottom: 26px !important;
  }

  .cta-row {
    width: 100%;
  }

  .cta-row .button {
    min-height: 46px !important;
  }

  .service-card-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-card-actions a {
    min-height: 40px;
    align-items: center;
  }

  .trust-card {
    width: 100%;
    padding: 20px !important;
  }

  .trust-card .button {
    width: fit-content;
    max-width: 100%;
  }

  .detail-list {
    border-radius: 18px;
  }

  .detail-row {
    padding: 16px !important;
  }

  .capability-item,
  .fact-panel > div {
    min-width: 0;
    padding: 13px 14px !important;
  }

  .journey-card > span {
    font-size: 2.1rem !important;
  }

  .support-action {
    width: 100%;
    min-width: 0;
    padding: 15px 16px !important;
  }

  .support-action div,
  .support-action strong,
  .support-action span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .footer-grid {
    gap: 24px !important;
    padding-top: 34px !important;
    padding-bottom: 26px !important;
  }

  .footer-registration-row,
  .footer-disclosure {
    overflow-wrap: anywhere;
  }

  .language-button {
    min-height: 44px !important;
  }

  .footer-social-row a {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .legal-bar {
    width: 100%;
    padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  }

  .legal-bar nav {
    width: 100%;
    row-gap: 8px;
  }

  .legal-bar a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

/* Small phones: iPhone SE class and compact Android devices */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .header-inner {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .plain-wordmark {
    max-width: calc(100vw - 110px) !important;
    font-size: 1rem !important;
  }

  .header-square-action,
  .mobile-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  .wrap,
  .footer-grid,
  .footer-registration-row,
  .footer-disclosure,
  .footer-social-row {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
  }

  .pill {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }

  .cta-row {
    flex-direction: column;
  }

  .cta-row .button {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-grid > div:first-child {
    grid-column: auto !important;
  }
}

/* Extra-narrow legacy/compact devices around 320–359px */
@media (max-width: 359px) {
  .plain-wordmark {
    max-width: calc(100vw - 104px) !important;
    font-size: .92rem !important;
  }

  .header-square-action,
  .mobile-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .hero h1 {
    font-size: 1.9rem !important;
  }

  h2 {
    font-size: 1.55rem !important;
  }

  .service-card,
  .mini-card,
  .info-card,
  .journey-card,
  .price-card,
  .service-summary-card,
  .hero-panel,
  .trust-card {
    padding: 17px !important;
  }
}

/* Phone landscape: keep content usable when viewport height is short */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 520px) {
  .site-header {
    position: sticky;
  }

  .site-header .mobile-nav[aria-label="Mobile navigation"] {
    max-height: calc(100dvh - 58px) !important;
  }

  .hero,
  .page-hero,
  .service-detail-hero {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .hero-grid,
  .service-detail-hero-grid {
    gap: 24px !important;
  }
}

/* Touch devices: avoid hover-only assumptions and make controls forgiving */
@media (hover: none) and (pointer: coarse) {
  .button,
  .mobile-nav > a,
  .mobile-websites a,
  .support-action,
  .language-button,
  .header-square-action,
  .mobile-toggle {
    touch-action: manipulation;
  }
}