/* Fluid sizing for the public site. Loaded after style.css; replaces the stepped font sizes and fixed button
   padding with clamp() values so narrow Android phones (320 to 400px) get proportional, uncramped layouts. */

/* Headings: scale smoothly between phone and laptop; desktop (1200px and up) keeps the original sizes. */
@media (max-width: 1199.98px) {
  .hero-2 .hero-box-items .hero-title { font-size: clamp(1.6rem, 3.2vw + 1.1rem, 2.75rem); }
}
@media (max-width: 1439.98px) {
  .sec-title .title { font-size: clamp(1.6rem, 3vw + 1.1rem, 2.8rem); }
}
.page-banner h1, .page-title h1, .page-title .title { font-size: clamp(1.9rem, 5vw + 0.9rem, 3.5rem); }

/* Body copy never gets tiny or huge. */
.hero-2 .hero-box-items p, .sec-title + p, .about-section-2 p, .faq-page p { font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.0625rem); line-height: 1.65; }

/* Buttons: lighter padding and a proportional label on phones; they may wrap and never exceed their container. */
.btn-style-two { max-width: 100%; }
@media (max-width: 575.98px) {
  .btn-style-two { padding: 11px 54px 11px 22px; }
  .btn-style-two .btn-title { font-size: clamp(0.8125rem, 3.3vw, 1rem); }
  .btn-style-two .btn-arrow-right, .btn-style-two .btn-arrow-left { height: 34px; width: 34px; font-size: 13px; right: 9px; }
  .btn-style-two .btn-arrow-left { right: auto; left: 9px; }
  .btn-style-two:hover .btn-title { transform: translateX(26px); }
}
@media (max-width: 380px) {
  .btn-style-two .btn-title { white-space: normal; line-height: 1.2; }
  .about-section-2 .about-buttons { flex-wrap: wrap; }
  .about-section-2 .about-buttons .about-btn { flex: 1 1 100%; width: 100%; justify-content: center; }
  .about-section-2 .about-buttons .about-btn .btn-title { white-space: nowrap; }
}

/* Touch targets: at least 44px tall for the small controls. */
@media (pointer: coarse) {
  .search-toggler, .mobile-nav-toggler, .rpchat-min, .infopanel-close { min-width: 44px; min-height: 44px; }
  .footer-list-items a, .mm-contact a { display: inline-block; padding-block: 6px; }
}

/* Forms: inputs fill the card and use a 16px font on phones so iOS does not zoom. */
@media (max-width: 575.98px) {
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .contact-form-style-1 .form-clt select, .contact-form-style-1 .form-clt input[type=date] { height: 54px; }
}

/* Keep media inside their columns. */
img, video, iframe { max-width: 100%; }
img { height: auto; }
.hero-2 .bg-image img { height: 100%; }

/* Footer: columns stack with comfortable spacing; the long watermark stays inside the screen. */
@media (max-width: 767.98px) {
  .footer-section-2 .footer-area-two .col-xl-3, .footer-section-2 .footer-area-two .col-xl-4, .footer-section-2 .footer-area-two .col-xl-5 { margin-bottom: 28px; }
  .footer-section-2 .footer-list-area { gap: 24px; }
  .footer-section-2 .footer-bottom-wrapper { flex-direction: column; gap: 14px; text-align: center; }
}

/* Visible keyboard focus everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #3274b6; outline-offset: 3px; border-radius: 4px;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .rpwa, .rpwa-ic { animation: none !important; }
}

/* Skip link for keyboard and screen reader users: hidden until it receives focus. */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100000; background: #fff; color: #191A1C; padding: 10px 18px; border-radius: 8px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: top 0.15s ease; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }