/* ==========================================================================
   APEX MEDIA — responsive-polish.css
   Purely ADDITIVE responsive refinement layer. Loaded LAST on every public
   page, after style.css and the page's own stylesheet. It does not remove,
   rename or redirect any existing selector, section, animation or feature —
   it only fine-tunes spacing/typography/grids at breakpoints the original
   stylesheets didn't fully cover (very small phones, short/landscape
   viewports, and a couple of fixed-width elements that could overflow on
   narrow screens), and improves touch-target size on mobile navigation.
   Desktop (≥1081px) appearance is intentionally left untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global overflow safety net
   -------------------------------------------------------------------------- */
html{ overflow-x:hidden; max-width:100%; }
body{ max-width:100%; }
.section-inner{ width:100%; }
img, video, iframe, svg{ max-width:100%; }
table{ max-width:100%; }

/* --------------------------------------------------------------------------
   1. Touch-friendly navigation (mobile dropdown built by apex-common.js)
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .nav-toggle{ padding:11px; margin:-11px; }
  .nav-toggle span{ width:24px; }
  .main-nav a{
    display:block; padding:13px 8px; font-size:15px;
    border-bottom:1px solid var(--line);
  }
  .main-nav a:last-child{ border-bottom:none; }
  .nav-cta{ padding:14px 24px; }
}

@media (max-width:480px){
  .nav-inner{ gap:12px; }
  .nav-cta{ display:none; } /* avoid crowding brand + toggle on very small phones; primary CTA is repeated in-page and in the mobile menu */
}
.main-nav a.nav-cta-mobile{ display:none; }

/* --------------------------------------------------------------------------
   2. Fluid section rhythm — trims oversized desktop padding progressively
      instead of the abrupt single jump, so laptops/small-laptops (1080–
      1280px) and large tablets keep a premium, not cramped, cadence.
   -------------------------------------------------------------------------- */
@media (max-width:1280px){
  .about, .services, .team, .process, .portfolio, .growth, .pricing,
  .testimonials, .editor-showcase, .scale-section, .team-roster,
  .contact-faq, .includes{
    padding-top:clamp(90px, 11vw, 150px);
    padding-bottom:clamp(90px, 11vw, 150px);
  }
  .final-cta{ padding-top:clamp(110px, 14vw, 190px); padding-bottom:clamp(110px, 14vw, 190px); }
}

@media (max-width:640px){
  .about, .services, .team, .process, .portfolio, .growth, .pricing,
  .testimonials, .editor-showcase, .scale-section, .team-roster,
  .contact-faq, .includes, .creators, .founder, .capability-strip{
    padding-top:70px; padding-bottom:70px;
  }
  .final-cta{ padding-top:100px; padding-bottom:100px; }
  .team{ padding-bottom:100px; }
}

/* --------------------------------------------------------------------------
   3. Small-phone typography — clamp() floors in the base stylesheets are
      tuned for 375px+ screens; on 320–360px devices a few headline sizes
      still read slightly large relative to the viewport. Nudge the floors
      down a step so nothing wraps awkwardly or crowds the safe area.
   -------------------------------------------------------------------------- */
@media (max-width:380px){
  .hero-title{ font-size:clamp(38px,12vw,104px); }
  .hero-compact .hero-title{ font-size:clamp(32px,11vw,78px); }
  .final-title{ font-size:clamp(28px,11vw,66px); }
  .section-title{ font-size:clamp(26px,9vw,54px); }
  .section-inner{ padding:0 18px; }
  .price-card{ padding:30px 22px; }
  .price-amount{ font-size:38px; }
  .testi-card{ padding:26px 18px 24px; }
  .contact-form-card{ padding:24px 18px 26px; }
  .founder-badge{ padding:11px 15px; }
  .founder-badge-name{ font-size:13.5px; }
}

/* --------------------------------------------------------------------------
   4. Fixed-width elements that can overflow a narrow grid column.
      Both are correct/necessary at their original sizes for desktop
      (absolute positioning / marquee track); on mobile the same element
      switches to a static grid cell, so it needs to be allowed to shrink.
   -------------------------------------------------------------------------- */
@media (max-width:480px){
  .team-node{ width:100%; max-width:150px; margin-left:auto; margin-right:auto; }
  .team-nodes{ gap:28px 12px; }
}

/* --------------------------------------------------------------------------
   5. Testimonial carousel — the active slide is absolutely positioned
      (inset:0) for the cross-fade effect, which is fine while its content
      fits the track's min-height. Longer quotes on narrow phones can run
      past that height; free the bottom edge so the card grows with its
      content instead of clipping text, and give the track more breathing
      room so nothing overlaps the arrows/dots underneath.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .testi-track{ min-height:420px; }
  .testi-card{ inset:auto 0 auto 0; top:0; bottom:auto; }
  .testi-quote-mark{ font-size:42px; }
  .testi-text{ font-size:16px; }
}
@media (max-width:380px){
  .testi-track{ min-height:460px; }
}

/* --------------------------------------------------------------------------
   6. Short / landscape mobile viewports — 100vh hero sections on a phone
      turned sideways (or a small landscape tablet) can force excessive
      scrolling before any content is visible. Cap the minimum height and
      tighten vertical padding only in that specific situation.
   -------------------------------------------------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:100px 32px 48px; }
  .hero-actions{ margin-bottom:32px; }
  .final-cta{ padding:90px 0; }
  .apex-modal{ max-height:94vh; }
  .apex-modal-media{ max-height:70vh; }
}

/* --------------------------------------------------------------------------
   7. Tablet portrait fine-tuning (641–860px) — the base stylesheets jump
      from the 640px "phone" layout straight to the 1080px "tablet
      landscape" layout, so 641–860px inherits the 1080 rules. That's
      mostly fine, but a couple of grids look noticeably better at 3-up
      instead of the inherited 2-up on this wider band, and process/step
      rows benefit from a touch more gap.
   -------------------------------------------------------------------------- */
@media (min-width:641px) and (max-width:860px){
  .service-grid{ gap:18px; }
  .portfolio-grid, .gallery-grid{ gap:20px; }
  .about-stats{ gap:22px 16px; }
  .footer-grid{ gap:32px 24px; }
  .team-roster-grid{ gap:18px; }
}

/* --------------------------------------------------------------------------
   8. Buttons & interactive elements — guarantee a comfortable touch target
      (~44px) on every screen without changing the visual button styling.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .btn{ min-height:46px; }
  .btn-small{ min-height:40px; }
  .testi-arrow{ min-width:44px; min-height:44px; }
  .p-tab{ min-height:42px; }
  .footer-social a{ width:40px; height:40px; }
}

/* --------------------------------------------------------------------------
   9. Cards / grids — keep single-column stacks from feeling too wide or
      too cramped at the very edges of the small-phone range, and stop
      package/price cards, portfolio cards and contact info cards from
      pinning edge-to-edge with no breathing room.
   -------------------------------------------------------------------------- */
@media (max-width:480px){
  .pricing-grid{ max-width:100%; }
  .price-card.featured{ transform:none; }
  .p-info{ padding:16px 16px 20px; }
  .service-card{ padding:26px 22px 22px; }
  .growth-metrics, .capability-grid{ gap:18px 14px; }
  .info-card{ padding:22px 18px; }
  .book-call-layout{ gap:32px; }
}

/* --------------------------------------------------------------------------
   10. Large monitors (≥1600px) — the fixed 1240px container already
       prevents the page from stretching edge-to-edge; this just keeps the
       ambient background glows/particles visually centered with the
       content column instead of centering on the full (much wider)
       viewport, so the cinematic look holds up on ultrawide displays.
   -------------------------------------------------------------------------- */
@media (min-width:1600px){
  .hero-glow, .fc-glow, .team-glow, .about-glow{ left:50%; }
}

/* --------------------------------------------------------------------------
   11. Video / image modal — belt-and-braces so the lightbox never exceeds
       the viewport on very small or very short screens regardless of
       aspect ratio.
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .apex-modal-overlay{ padding:16px 12px; }
  .apex-modal{ border-radius:14px; padding:8px 8px 12px; }
  .apex-modal-meta{ padding:14px 6px 2px; }
  .apex-modal-meta h3{ font-size:16.5px; }
}

/* --------------------------------------------------------------------------
   12. Forms — prevent iOS Safari's automatic zoom-on-focus (which happens
       whenever an input's computed font-size is under 16px) without
       changing the designed field size on larger screens.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .field input, .field textarea, .admin-login-field input{ font-size:16px; }
}