/* FLOWHAZE / Mobile editorial refinement · 2026-10-10
   Applies to PHONE widths only. Desktop styles & editor remain unchanged.
   The original mobile presentation CSS remains intact; this file resolves
   its spacing inconsistencies and the packages hero's zero-margin conflict. */
@media (max-width:767px) {
  :root { --fh-mobile-pad:clamp(20px,5.5vw,25px); }
  /* Correct the legacy blanket 64px !important section padding at its
     original selector specificity before applying targeted spacing below. */
  main > section:not(.hero-section):not(.marquee-section) {
    padding-top:54px!important;
    padding-bottom:54px!important;
  }
  main > section.fh-wide-overlay-section:not(.hero-section):not(.marquee-section) {
    padding-top:0!important;
    padding-bottom:0!important;
  }
  html[data-page="home"] main > section.hero-section { padding:0!important; }


  /* Section rhythm: remove unnecessary vertical dead space, but keep hero,
     flagship film and persuasive closing CTAs visually important. */
  main > section.section,
  main > section.production-system,
  main > section.ai-section,
  main > section.testimonials-section,
  main > section.page-cta,
  main > section.final-cta { padding-block:56px!important; }
  main .section-heading { margin-bottom:22px!important; }
  main .section-heading p { margin-top:9px!important; }
  main > section h2 { font-size:clamp(31px,8.5vw,40px)!important; }
  main > section h3 { font-size:clamp(21px,5.8vw,27px)!important; }
  main > section p { font-size:14px!important; line-height:1.57!important; }

  /* Preserve intentional stage-setting rather than making everything tiny. */
  .home-page .hero-section,
  .home-page .hero-section > .hero-grid.shell { min-height:clamp(595px,81svh,710px)!important; }
  .home-page .hero-section > .hero-grid.shell { padding-block:100px 60px!important; }
  .home-page .hero-copy h1 { font-size:clamp(42px,11vw,51px)!important; }
  .home-page .hero-copy p { font-size:14px!important; }
  .home-page .marquee-section { padding:28px 0 24px!important; }
  .home-page .flowhaze-film-section { padding:54px 0 58px!important; }
  .home-page .flowhaze-film-section .section-heading { margin-bottom:22px!important; }
  .home-page .flowhaze-film-player { aspect-ratio:16/10!important; }
  .home-page .production-system { padding:56px 0!important; }
  .home-page .system-layout { gap:24px!important; }
  .home-page .one-to-n-visual { aspect-ratio:1/0.86!important; }

  /* Audience: intentional horizontal editorial rail, not three cramped columns.
     The next card peeks into view, showing visitors that it can be swiped. */
  .home-page .audience-section { padding:54px 0 60px!important; }
  .home-page .audience-section .section-heading { margin-bottom:20px!important; }
  .home-page .audience-grid {
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(76vw,305px)!important;
    grid-template-columns:none!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:var(--fh-mobile-pad)!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    padding:0 var(--fh-mobile-pad) 10px!important;
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:0!important;
    scrollbar-width:none;
  }
  .home-page .audience-grid::-webkit-scrollbar { display:none; }
  .home-page .audience-card {
    width:100%!important; min-width:0!important; height:auto!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:start!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always;
    border-radius:15px!important;
  }
  .home-page .audience-card img { width:100%!important; height:158px!important; min-height:0!important; object-fit:cover!important; }
  .home-page .audience-card > div { padding:16px 17px 18px!important; }
  .home-page .audience-card h3 { font-size:27px!important; margin:7px 0!important; }
  .home-page .audience-card p { font-size:13px!important; line-height:1.46!important; margin:5px 0 0!important; }
  .home-page .audience-card > div > span:not(.fh-editable-pseudo-line) { font-size:23px!important; }

  .home-page .engagement-section { padding:54px 0 59px!important; }
  .home-page .engagement-section .section-heading { margin-bottom:22px!important; }
  .home-page .engagement-section .engagement-visual { aspect-ratio:1.2!important; }
  .home-page .stats-strip { padding:29px 0!important; }
  .home-page .stats-grid > div {
    min-height:84px!important; padding:20px 20px 23px!important;
    grid-template-columns:112px minmax(0,1fr)!important;
  }
  .home-page .stats-grid strong { font-size:clamp(38px,10.4vw,47px)!important; }
  .home-page .stats-grid .fh-stat-accent { bottom:8px!important; }
  .home-page .ai-section { padding:56px 0!important; }
  .home-page .ai-layout { gap:21px!important; }
  .home-page .ai-single-visual { aspect-ratio:1/.83!important; }
  .home-page .testimonials-section { padding:56px 0!important; }
  .home-page .testimonial-heading { margin-bottom:23px!important; }
  .home-page .testimonial-heading h2 { font-size:clamp(32px,8.5vw,40px)!important; }
  .home-page .testimonial-marquee-card { width:min(63vw,240px)!important; max-width:240px!important; min-height:0!important; }
  .home-page .testimonial-marquee-card > div { padding:13px 14px 15px!important; }
  .home-page .testimonial-marquee-card p { font-size:12px!important; line-height:1.48!important; }
  .home-page .final-cta { padding:66px 0 60px!important; }
  .home-page .final-layout { gap:24px!important; }

  /* All wide hero headlines need real safe-area padding. The old zero-margin
     packages rule otherwise places the first letter on the screen edge. */
  html[data-page="packages"] .packages-hero,
  html[data-page="services"] .fh-services-wide-hero,
  html[data-page="ai"] .fh-ai-hero,
  html[data-page="about"] .fh-why-wide-hero {
    height:auto!important;
    min-height:clamp(520px,72svh,655px)!important;
  }
  html[data-page="packages"] .packages-hero .packages-hero-inner,
  html[data-page="services"] .fh-services-wide-hero .fh-wide-overlay-copy,
  html[data-page="ai"] .fh-ai-hero .fh-wide-overlay-copy,
  html[data-page="about"] .fh-why-wide-hero .fh-wide-overlay-copy {
    box-sizing:border-box!important;
    width:calc(100% - 2 * var(--fh-mobile-pad))!important;
    max-width:520px!important;
    min-height:clamp(520px,72svh,655px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:94px 0 62px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    text-align:left!important;
  }
  html[data-page="packages"] .packages-hero h1,
  html[data-page="services"] .fh-services-wide-hero h1,
  html[data-page="ai"] .fh-ai-hero h1,
  html[data-page="about"] .fh-why-wide-hero h1 {
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    text-align:left!important;
    font-size:clamp(34px,9.3vw,41px)!important;
    line-height:1.09!important;
    letter-spacing:-.042em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html[data-page="packages"] .packages-hero h1 span {
    max-width:100%!important;
    font-size:inherit!important;
    white-space:normal!important;
  }
  html[data-page="packages"] .packages-hero p,
  html[data-page="services"] .fh-services-wide-hero p,
  html[data-page="ai"] .fh-ai-hero p,
  html[data-page="about"] .fh-why-wide-hero p {
    width:100%!important;
    max-width:34ch!important;
    margin:17px 0 0!important;
    text-align:left!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  html[data-page="packages"] .packages-section { padding:44px 0 58px!important; }
  html[data-page="packages"] .packages-grid { gap:12px!important; }
  html[data-page="packages"] .package-card { padding:22px 21px 20px!important; }
  html[data-page="packages"] .package-card h2 { font-size:34px!important; margin:15px 0 8px!important; }
  html[data-page="packages"] .package-features { margin:15px 0 18px!important; }
  html[data-page="packages"] .package-features li { padding:10px 0!important; }

  html[data-page="services"] .fh-services-tiles-section { padding:44px 0 53px!important; }
  html[data-page="services"] .fh-service-tile { aspect-ratio:1.16!important; }
  html[data-page="services"] .fh-service-tile-copy { bottom:17px!important; }
  html[data-page="services"] .fh-retainer-section { padding:56px 0!important; }
  html[data-page="services"] .fh-editorial-split { gap:22px!important; }
  html[data-page="services"] .fh-services-transition { padding:72px 0!important; }
  html[data-page="services"] .services-portfolio-section { padding:56px 0!important; }
  html[data-page="services"] .page-cta { padding:64px 0!important; }

  html[data-page="about"] main > section.section { padding:54px 0!important; }
  html[data-page="about"] main > section.section .principle { grid-template-rows:160px auto auto!important; }
  html[data-page="about"] main > section.section .principle img { height:160px!important; margin-bottom:16px!important; }
  html[data-page="about"] .fh-long-run-section { padding:58px 0!important; }
  html[data-page="about"] .founders-section { padding:58px 0!important; }
  html[data-page="about"] .fh-process-moved { padding:56px 0!important; }
  html[data-page="about"] .page-cta { padding:61px 0!important; }

  html[data-page="ai"] .fh-ai-tiles-section { padding:46px 0 54px!important; }
  html[data-page="ai"] .fh-ai-tile { aspect-ratio:1.18!important; }
  html[data-page="ai"] .fh-ai-direction-section { padding:72px 0!important; }
  html[data-page="ai"] .fh-ai-workflow-section { padding:56px 0!important; }
  html[data-page="ai"] .fh-ai-final-cta { padding:60px 0!important; }

  html[data-page="contact"] .contact-hero { padding:90px 0 55px!important; }
  html[data-page="contact"] .contact-copy { margin-bottom:23px!important; }
  html[data-page="contact"] .contact-grid { gap:24px!important; }
  .careers-hero, .career-how, .career-roles, .careers-final { padding-block:56px!important; }
  .careers-hero { padding-top:94px!important; }
  main > .inner-hero:not(.fh-wide-overlay-section) { padding:98px 0 62px!important; }

  /* Footer: two legible navigation columns, then the Start links in a
     horizontal full-width row. Prevent an orphaned tiny third column. */
  .site-footer { padding:43px 0 20px!important; }
  .site-footer .footer-main {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:22px!important;
    row-gap:22px!important;
    padding-bottom:23px!important;
  }
  .site-footer .footer-brand {
    grid-column:1/-1!important;
    padding:0 0 20px!important;
    border-bottom:1px solid rgba(13,13,13,.12)!important;
  }
  .site-footer .footer-brand img { width:143px!important; }
  .site-footer .footer-brand p { max-width:32ch!important; margin:9px 0 0!important; font-size:12px!important; line-height:1.5!important; }
  .site-footer .footer-col { min-width:0!important; gap:11px!important; }
  .site-footer .footer-col > span { font-size:10px!important; letter-spacing:.12em!important; }
  .site-footer .footer-col a { font-size:12px!important; line-height:1.4!important; overflow-wrap:anywhere!important; }
  .site-footer .footer-col:last-of-type {
    grid-column:1/-1!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:12px 23px!important;
    padding-top:18px!important;
    border-top:1px solid rgba(13,13,13,.12)!important;
  }
  .site-footer .footer-col:last-of-type > span { flex:0 0 100%!important; }
  .site-footer .footer-bottom {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    align-items:center!important;
    padding-top:16px!important;
    margin-top:0!important;
    font-size:10px!important;
  }
  .site-footer .footer-bottom > span:first-child { grid-column:1!important; grid-row:1!important; }
  .site-footer .footer-bottom .footer-social-links { grid-column:2!important; grid-row:1!important; justify-self:end!important; }
  .site-footer .footer-bottom .footer-legal-links { grid-column:1/-1!important; grid-row:2!important; text-align:left!important; }
}
@media (max-width:370px) {
  .home-page .audience-grid { grid-auto-columns:79vw!important; }
  html[data-page="packages"] .packages-hero h1 { font-size:34px!important; }
  .site-footer .footer-main { column-gap:16px!important; }
  .site-footer .footer-col:last-of-type { column-gap:14px!important; }
}