/* Mobile responsiveness refinements */
html, body { max-width: 100%; overflow-x: hidden; }
.hero-grid > *, .split > *, .footer-grid > *, .grid-3 > * { min-width: 0; }

a, p, li, h1, h2, h3 { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .container { width: min(calc(100% - 32px), var(--max)); }

  .nav {
    min-height: 68px;
    gap: 12px;
  }
  .nav-links { top: 68px; }

  /* Let the full master logo shrink to the actual space available
     instead of clipping at a fixed width. */
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 64px);
    overflow: hidden;
  }
  .brand-logo-full {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: left center;
  }
  .mobile-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 8px;
    line-height: 1;
  }

  .hero {
    padding: 50px 0 46px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero h1 {
    font-size: clamp(40px, 11.5vw, 56px);
    line-height: .98;
    max-width: 100%;
  }
  .hero p {
    font-size: 17px;
    line-height: 1.6;
    margin: 20px 0 24px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
    min-height: 50px;
  }
  .hero-visual {
    min-height: 0;
    padding: 26px 22px 20px;
  }
  .hero-watermark {
    width: 72px;
    right: 18px;
    top: 16px;
  }
  .process-label { margin-bottom: 24px; }
  .process-step {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 14px;
    padding: 16px 0;
  }
  .process-step strong { font-size: 24px; }
  .process-step p { font-size: 14px; }

  .section { padding: 50px 0; }
  .section-head { margin-bottom: 26px; }
  .section-head p { font-size: 16px; }
  h2 { font-size: clamp(32px, 9vw, 44px); }
  h3 { font-size: 24px; }

  .grid-3,
  .split,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card { padding: 22px; }
  .trust-panel { padding: 30px 24px; }
  .trust-panel h3 { font-size: 30px; }

  .band { padding: 44px 0; }
  .band h2 { font-size: 34px; }
  .band-grid { gap: 22px; }
  .band .btn { width: 100%; }

  .about-box { padding-left: 20px; }
  .about-box .btn { width: 100%; }

  footer { padding: 38px 0 22px; }
  .footer-grid { gap: 24px; }
}

@media (max-width: 420px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .brand { max-width: calc(100% - 58px); }
  .brand-logo-full { max-width: 198px; }
  .hero { padding: 42px 0 40px; }
  .hero h1 { font-size: 38px; }
  .eyebrow { font-size: 11px; letter-spacing: .12em; }
  .hero-visual { padding: 22px 18px 16px; }
  .process-step { grid-template-columns: 34px minmax(0,1fr); gap: 12px; }
  .process-step > span { font-size: 18px; }
  .process-step strong { font-size: 22px; }
  .section { padding: 44px 0; }
  h2 { font-size: 32px; }
  .card, .trust-panel { padding: 20px; }
  .btn { padding: 0 16px; }
  .list-check li { padding-left: 24px; }
}

/* Mobile header logo correction v2: size by height, never by container width. */
@media (max-width: 768px) {
  .brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 72px);
    overflow: visible;
  }

  .brand-logo-full {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
  }

  .mobile-toggle {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .brand-logo-full {
    width: auto;
    height: 42px;
    max-width: 100%;
    max-height: 42px;
  }
}