/* ============================================
   ADDITIONAL RESPONSIVE FIXES
   Overflow, image handling, and component-specific fixes
   ============================================ */

/* Prevent horizontal scroll on all screen sizes */
html,
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Ensure all images are responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Video responsive */
video {
  max-width: 100%;
  height: auto;
}

/* Ensure iframes are responsive */
iframe {
  max-width: 100%;
}

/* Fix table overflow on mobile */
table {
  width: 100%;
  overflow-x: auto;
  display: block;
}

@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
}

/* Text wrapping improvements */
h1, h2, h3, h4, h5, h6, p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* No auto-hyphenation (was splitting "grow-ing", "mar-ket" on mobile).
   Words wrap whole; balance keeps heading line lengths even. */
h1, h2, h3, h4, h5, h6, p {
  hyphens: manual;
  -webkit-hyphens: manual;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Hero line-reveal wrapper clips descenders (g, y, p) because of overflow:hidden
   and the tight h1 line-height. Give it room below without shifting layout. */
.lw {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* Navigation overflow fix */
@media (max-width: 1100px) {
  .nav-links {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Hero portrait responsiveness enhancement */
@media (max-width: 860px) {
  .hero-portrait {
    right: -30%;
    opacity: 0.35 !important;
  }
}

@media (max-width: 640px) {
  .hero-portrait {
    right: -50%;
    bottom: -20%;
    opacity: 0.25 !important;
  }
}

@media (max-width: 480px) {
  .hero-portrait {
    right: -60%;
    bottom: -25%;
    width: 140vw;
    opacity: 0.2 !important;
  }
}

/* Fix long words in buttons */
.btn {
  word-break: keep-all;
  white-space: normal;
  text-align: center;
}

/* Service chips wrapping */
.svc-chips {
  flex-wrap: wrap;
}

/* Stack wrapping fix */
.stack {
  flex-wrap: wrap;
}

/* Ticker improvements for mobile */
@media (max-width: 640px) {
  .ticker-track {
    gap: 8px;
  }

  .ticker span {
    font-size: 10px;
    padding: 6px 12px;
  }
}

/* Form elements touch-friendly */
@media (max-width: 768px) {
  .form input,
  .form select,
  .form textarea,
  .form button {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px; /* Touch-friendly size */
  }
}

/* Improve clickable areas on mobile */
@media (max-width: 768px) {
  a,
  button,
  .btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Fix aspect ratios for images */
.frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.frame video {
  width: 100%;
  height: auto;
}

/* Ensure portrait images work on mobile */
@media (max-width: 768px) {
  .pcard img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
  }
}

/* Case study images: the text column makes cards far taller than the images,
   so object-fit:cover was cropping and upscaling them until they blurred.
   Show the whole image instead, pinned near the top of its column with
   position:sticky so it stays in view while the visitor reads the case.
   overflow:clip (not hidden) still trims the hover zoom but, unlike hidden,
   doesn't create a scroll container, which would stop sticky from working. */
.case-card {
  overflow: clip;
}

.case-visual {
  overflow: clip;
  display: flex;
  align-items: flex-start;
  background: var(--teal-08);
  padding: clamp(20px, 3vw, 40px);
}

.case-visual img {
  position: sticky;
  top: 110px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(16, 36, 31, .12);
}

@media (max-width: 860px) {
  .case-visual {
    padding: 0;
  }

  .case-visual img {
    position: static;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Gallery image aspect ratio */
.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
}

@media (max-width: 640px) {
  .gallery img {
    aspect-ratio: 4/3;
  }
}

/* Guide card images */
.guide-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Fix background word overflow */
.bg-word {
  right: -60px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .bg-word {
    font-size: clamp(80px, 18vw, 200px);
    right: -40px;
    bottom: -30px;
  }
}

@media (max-width: 480px) {
  .bg-word {
    font-size: clamp(60px, 15vw, 150px);
    right: -30px;
    bottom: -20px;
  }
}

/* Improve orb positioning on mobile */
@media (max-width: 768px) {
  .vision-orb {
    right: -20%;
    width: clamp(280px, 60vw, 500px);
    height: clamp(280px, 60vw, 500px);
  }

  .cta-glow {
    width: 600px;
    height: 600px;
  }
}

@media (max-width: 480px) {
  .vision-orb {
    right: -30%;
    width: clamp(240px, 70vw, 400px);
    height: clamp(240px, 70vw, 400px);
  }

  .cta-glow {
    width: 400px;
    height: 400px;
  }
}

/* Fix scroll indicator on small screens */
@media (max-width: 640px) {
  .hero-scroll {
    bottom: 20px;
  }

  .scroll-line {
    height: 36px;
  }
}

/* Improve panel spacing on mobile */
@media (max-width: 640px) {
  .panel {
    padding: 20px 16px;
  }
}

/* Better spacing for check lists on mobile */
@media (max-width: 640px) {
  .check li {
    padding: 7px 0 7px 24px;
    font-size: 14px;
    line-height: 1.6;
  }

  .check li::before {
    width: 14px;
    height: 14px;
    top: 11px;
  }
}

/* Pain list improvements */
@media (max-width: 640px) {
  .pain li {
    padding: 9px 0 9px 26px;
    font-size: 14px;
  }

  .pain li::before {
    width: 10px;
    height: 10px;
    top: 16px;
  }
}

/* Better FAQ spacing */
@media (max-width: 480px) {
  .faq summary {
    gap: 12px;
  }

  .faq summary::after {
    flex-shrink: 0;
  }
}

/* Improve related links on mobile */
@media (max-width: 640px) {
  .related li a {
    font-size: 15px;
  }

  .related li a small {
    font-size: 12px;
  }
}

/* Better form spacing */
@media (max-width: 640px) {
  .form {
    gap: 14px;
  }

  .form label {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .form .note {
    font-size: 11px;
    line-height: 1.5;
  }
}

/* Improve tabs on mobile */
@media (max-width: 640px) {
  .tabs {
    gap: 4px;
    margin-bottom: 28px;
  }

  .tabs button {
    padding: 10px 12px;
    font-size: 10px;
  }
}

/* Price inline improvements */
@media (max-width: 640px) {
  .price-inline {
    font-size: 26px;
  }
}

/* Calculator improvements */
@media (max-width: 480px) {
  .calc label {
    font-size: 13px;
    margin: 14px 0 5px;
  }

  .calc-result {
    padding: 22px;
  }

  .calc-result small {
    font-size: 12px;
  }
}

/* Flow diagram improvements */
@media (max-width: 640px) {
  .flow {
    padding: 24px 16px;
  }

  .flow h3 {
    font-size: 18px;
  }

  .flow text {
    font-size: 11px;
  }

  .flow .sub {
    font-size: 9px;
  }
}

/* Better prose readability */
@media (max-width: 640px) {
  .prose {
    line-height: 1.7;
  }

  .prose ul,
  .prose ol {
    padding-left: 20px;
  }

  .prose li {
    margin-bottom: 6px;
  }
}

/* Callout improvements */
@media (max-width: 480px) {
  .callout {
    border-left-width: 2px;
  }

  .callout p {
    font-size: 14px;
  }
}

/* Service item improvements */
@media (max-width: 480px) {
  .service {
    gap: 16px;
  }

  .service img {
    width: 80px;
    border-radius: 2px;
  }
}

/* Ribbon improvements */
@media (max-width: 640px) {
  .ribbon {
    font-size: 9px;
    margin-bottom: 10px;
  }
}

/* Ensure brand logo scales properly */
@media (max-width: 480px) {
  .brand-mark {
    width: 20px;
    height: 20px;
  }

  .brand-text {
    font-size: 18px;
  }
}

/* Better phone demo on very small screens */
@media (max-width: 375px) {
  .phone-demo {
    width: min(260px, 92vw);
  }

  .phone-screen {
    font-size: 0.8rem;
  }

  .call-card {
    padding: 10px;
  }

  .call-card .ring {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .sms {
    gap: 6px;
  }

  .bubble {
    padding: 9px 11px;
    font-size: 13px;
  }

  .booked {
    padding: 10px;
    font-size: 13px;
  }
}

/* Fix sticky header on scroll */
@media (max-width: 768px) {
  .site-header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Ensure progress bar is visible on all screens */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
}

/* Better skip link */
.skip {
  z-index: 10000;
}

.skip:focus {
  left: 8px;
}

/* Improve glassmorphism on mobile */
@media (max-width: 768px) {
  .glass-band::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85),
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0.85)
    );
  }
}

/* Better animation performance on mobile */
@media (max-width: 768px) {
  .rv {
    transition-duration: 0.6s;
  }

  .frame:hover img,
  .frame:hover video {
    transform: scale(1.02);
  }

  .pcard:hover {
    transform: translateY(-4px);
  }

  .tcard:hover {
    transform: translateY(-4px);
  }
}

/* Reduce motion for better performance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .svc-row:hover {
    padding-left: 0;
  }

  .frame:hover img,
  .frame:hover video {
    transform: none;
  }

  .pcard:hover,
  .tcard:hover {
    transform: none;
  }

  /* Make interactive elements more touch-friendly */
  a,
  button,
  summary {
    min-height: 44px;
  }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
  /* This is optional and can be enabled if dark mode is desired */
  /* Currently keeping the existing light theme */
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .btn-line,
  .btn-line-w {
    border-width: 2px;
  }

  .nav-links a::after {
    height: 2px;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .site-header,
  .hero-inner,
  .wrap,
  .site-footer {
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }

  .site-footer {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* Accessibility improvements for focus states */
@media (max-width: 768px) {
  :focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
  }
}

/* Better container queries alternative for older browsers */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .pcard,
    .tcard,
    .plan {
      container-type: normal;
    }
  }
}