/**
 * HIVVE STUDIO — Fluid Desktop Proportional Scaling & Layout Lock
 * Locks the 1440px authored design canvas so resizing on laptops & desktops
 * scales the entire page as a proportional whole without words wrapping onto new lines.
 * Keeps mobile (< 768px) and tablet (768px - 1023px) at native responsive touch scale.
 */

@media (min-width: 1024px) {
  :root {
    /* Fluid scale anchored to 1440px design width:
       At 1024px: 11.38px (scales down ~29% smoothly)
       At 1200px: 13.33px (scales down ~16.7% smoothly)
       At 1440px: 16.00px (100% native authored baseline)
       At 1680px: 18.66px (scales up ~16.6% smoothly)
       Clamped between 11px and 19px for safe display limits. */
    font-size: clamp(11.5px, calc(16px * (100vw / 1440)), 18.5px);
  }

  /* Art-directed headline locks: prevents words from wrapping onto new lines during laptop window resizing */
  .hero .hero-title .line-inner,
  .statement-title .line-inner,
  .humanity-copy h2,
  .section-heading h2 {
    white-space: nowrap !important;
  }

  .hero .hero-title {
    font-size: clamp(3.4rem, 7.8vw, 9.5rem) !important;
    line-height: 0.88 !important;
  }

  /* Ensure about statement and stats numbers stack cleanly in column layout */
  .about-stats {
    flex-direction: column !important;
    gap: 3.5rem !important;
  }
  .stats-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 2rem !important;
  }
  .stat-item {
    flex: 1 !important;
  }
}

/* Mobile & Tablet Safeguards (< 1024px):
   Ensure all content, sections, and cards are immediately 100% visible on touch devices. */
@media (max-width: 1023px) {
  :root {
    font-size: 16px;
  }

  /* Eliminate any offscreen opacity voids on touch screens */
  .reveal,
  .hivve-reveal,
  .motion-ready .reveal,
  .fade-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* Natural responsive text wrapping on mobile devices */
  .statement-title .line-inner {
    white-space: normal !important;
  }
  .hero-title .line-inner {
    white-space: nowrap !important;
  }
}