/* FLOWHAZE · mobile-first presentation layer · 2026-10-10
   Kept separate and loaded AFTER the existing theme. Desktop is untouched.
   Reusable with the existing editor/controller and all existing content. */
@media (max-width: 767px) {
  :root { --fh-mobile-pad: 22px; --fh-mobile-gap: 14px; --fh-mobile-radius: 16px; }
  *, *::before, *::after { box-sizing:border-box; }
  html, body { max-width:100%; overflow-x:clip; }
  body { -webkit-text-size-adjust:100%; }
  main, main > section, main .shell, main .shell > *, .site-footer .shell { min-width:0; }
  main img, main video { max-width:100%; }
  main h1, main h2, main h3, main p, main a, main li, .site-footer a { overflow-wrap:break-word; }
  .shell, main > section > .shell, .site-footer .shell {
    width:calc(100% - 2 * var(--fh-mobile-pad))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
  main > .section, main > section.section,
  main > .production-system, main > .ai-section,
  main > .testimonials-section, main > .final-cta,
  main > .page-cta { height:auto!important; min-height:0!important; padding-block:68px!important; }
  main > section { scroll-margin-top:85px; }
  .eyebrow, main [class*="eyebrow"], main [class*="kicker"] { font-size:10px!important; letter-spacing:.14em!important; line-height:1.45!important; }
  main h1, main h2, main h3 { text-wrap:balance; }
  main > section h1 { font-size:clamp(38px,10.2vw,48px)!important; line-height:1.04!important; letter-spacing:-.047em!important; }
  main > section h2 { font-size:clamp(34px,9vw,43px)!important; line-height:1.08!important; letter-spacing:-.04em!important; }
  main > section h3 { font-size:clamp(22px,6vw,29px)!important; line-height:1.15!important; letter-spacing:-.027em!important; }
  main > section p { font-size:15px!important; line-height:1.58!important; }
  main > section .button, main > section a.button,
  main > section .package-cta { min-height:46px; max-width:100%; padding:13px 19px!important; font-size:13px!important; line-height:1.2!important; text-align:center!important; white-space:normal; }
  main .section-heading { margin-bottom:28px!important; gap:14px!important; }
  main .section-heading > div, main .section-heading > p { width:100%!important; max-width:100%!important; }
  main .section-heading p { margin-block:10px 0!important; }
  .reveal { transition-duration:.5s!important; }
  /* Navigation: smaller, deliberate touch areas, clean full-width mobile drawer. */
  .site-header { min-height:70px!important; }
  .site-header .header-inner { height:70px!important; }
  .site-header .logo-link img { width:142px!important; max-height:38px!important; object-fit:contain; }
  .site-header .menu-button { width:44px!important; height:44px!important; padding:8px!important; display:block!important; border-radius:10px; }
  .site-header .mobile-menu { top:70px!important; inset:70px 0 auto!important; padding:22px var(--fh-mobile-pad) 28px!important; max-height:calc(100dvh - 70px); overflow-y:auto; background:#101012!important; }
  .site-header .mobile-menu a { min-height:42px; display:flex; align-items:center; font-size:16px!important; }
  /* Shared full-bleed hero system. Mobile editorial title is never squeezed. */
  .fh-wide-overlay-section,
  html[data-page="packages"] .packages-hero,
  html[data-page="services"] .fh-services-wide-hero,
  html[data-page="ai"] .fh-ai-hero { min-height:clamp(580px,81svh,740px)!important; height:auto!important; padding:0!important; align-items:center!important; }
  .fh-wide-overlay-section .fh-wide-overlay-media,
  .fh-wide-overlay-section .fh-wide-overlay-media > img,
  .fh-wide-overlay-section .fh-wide-overlay-media > video { height:100%!important; min-height:100%!important; width:100%!important; object-fit:cover!important; }
  .fh-wide-overlay-section .fh-wide-overlay-media > img,
  .fh-wide-overlay-section .fh-wide-overlay-media > video { object-position:center center!important; }
  .fh-wide-overlay-section::after { background:linear-gradient(180deg,rgba(8,8,8,.48) 0%,rgba(8,8,8,.59) 35%,rgba(8,8,8,.85) 100%)!important; }
  .fh-wide-overlay-section .fh-wide-overlay-copy,
  html[data-page="packages"] .packages-hero .packages-hero-inner {
    width:calc(100% - 2 * var(--fh-mobile-pad))!important;
    max-width:none!important;
    min-height:clamp(580px,81svh,740px)!important;
    margin-inline:auto!important;
    padding:104px 0 75px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    text-align:left!important;
  }
  .fh-wide-overlay-section .fh-wide-overlay-copy > div,
  html[data-page="packages"] .packages-hero .packages-hero-inner { width:100%!important; max-width:100%!important; margin:0!important; text-align:left!important; }
  .fh-wide-overlay-section h1,
  html[data-page="packages"] .packages-hero h1 {
    width:100%!important; max-width:100%!important;
    margin:0!important; font-size:clamp(39px,10.2vw,49px)!important;
    text-align:left!important; line-height:1.05!important; letter-spacing:-.045em!important;
  }
  .fh-wide-overlay-section p,
  html[data-page="packages"] .packages-hero p {
    width:100%!important; max-width:38ch!important;
    margin:22px 0 0!important; font-size:15px!important;
    line-height:1.53!important; text-align:left!important;
  }
  /* Home cover: foreground copy + dedicated 9:16 film crop, not an offscreen desktop grid. */
  .home-page .hero-section { min-height:clamp(645px,91svh,820px)!important; padding:0!important; }
  .home-page .hero-section > .hero-grid.shell {
    display:flex!important; min-height:clamp(645px,91svh,820px)!important;
    align-items:center!important; justify-content:flex-start!important;
    padding:110px 0 75px!important;
  }
  .home-page .hero-copy { width:100%!important; max-width:100%!important; }
  .home-page .hero-copy h1 { max-width:12ch!important; font-size:clamp(43px,11.3vw,54px)!important; line-height:1.015!important; letter-spacing:-.055em!important; }
  .home-page .hero-copy p { width:100%!important; max-width:31ch!important; font-size:15px!important; line-height:1.55!important; margin:22px 0 23px!important; color:rgba(244,244,244,.87)!important; }
  .home-page .hero-actions { display:flex!important; align-items:flex-start; gap:10px!important; flex-wrap:wrap; }
  .home-page .hero-media-wrap { inset:0 auto 0 50%!important; width:100vw!important; height:100%!important; }
  .home-page .hero-film, .home-page .hero-film video { width:100%!important; height:100%!important; }
  .home-page .hero-film video { object-fit:cover!important; object-position:56% center!important; }
  .home-page .hero-media-wrap::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(7,7,9,.73),rgba(7,7,9,.47)),linear-gradient(0deg,rgba(7,7,9,.88),transparent 68%); }
  /* Client strip should act as a short pause, not a major section. */
  .home-page .marquee-section { padding:36px 0 30px!important; }
  .marquee-section .marquee-title { margin-bottom:14px!important; }
  .marquee-section .marquee-title p { font-size:11px!important; letter-spacing:.02em; }
  .marquee-section .brand-marquee-shell { gap:1px!important; }
  .marquee-section .brand-logo-track-new { padding:8px 0!important; }
  .marquee-section .brand-logo-item-new { height:45px!important; }
  .marquee-section .brand-logo-item-new img { max-height:27px!important; }
  /* Full film treatment: a 16:10 screen with a typographically calm heading. */
  .home-page .flowhaze-film-section { padding:66px 0 70px!important; min-height:0!important; height:auto!important; }
  .home-page .flowhaze-film-section .shell { width:calc(100% - 2 * var(--fh-mobile-pad))!important; }
  .home-page .flowhaze-film-section .section-heading { margin-bottom:26px!important; text-align:left!important; }
  .home-page .flowhaze-film-section .section-heading h2 { width:100%!important; max-width:100%!important; font-size:clamp(34px,8.8vw,42px)!important; text-align:left!important; transform:none!important; translate:none!important; }
  .home-page .flowhaze-film-player { display:block!important; width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:16 / 10!important; border-radius:var(--fh-mobile-radius)!important; overflow:hidden!important; }
  .home-page .flowhaze-film-player video { object-fit:cover!important; }
  /* Editorial copy / production panel, with a logical reading order. */
  .home-page .production-system { padding:70px 0!important; }
  .home-page .system-layout { display:grid!important; grid-template-columns:1fr!important; gap:30px!important; }
  .home-page .system-copy { width:100%!important; max-width:none!important; }
  .home-page .system-copy h2 { max-width:13ch!important; }
  .home-page .one-to-n-visual { width:100%!important; min-height:0!important; aspect-ratio:1/1!important; border-radius:18px!important; }
  .home-page .one-to-n-visual video, .home-page .one-to-n-visual img { object-fit:cover!important; }
  /* Audience: substantial but not oversized cards, readable on all phones. */
  .home-page .audience-section { padding:68px 0 76px!important; }
  .home-page .audience-section .section-heading { text-align:left!important; }
  .home-page .audience-section .section-heading h2 { max-width:18ch!important; text-align:left!important; margin-left:0!important; margin-right:0!important; }
  .home-page .audience-grid { grid-template-columns:1fr!important; gap:12px!important; }
  .home-page .audience-card { display:grid!important; grid-template-columns:1fr!important; border-radius:17px!important; overflow:hidden!important; }
  .home-page .audience-card img { height:205px!important; min-height:0!important; width:100%!important; object-fit:cover!important; }
  .home-page .audience-card > div { padding:21px 21px 22px!important; }
  .home-page .audience-card h3 { margin:8px 0!important; font-size:29px!important; line-height:1.04!important; }
  .home-page .audience-card p { min-height:0!important; margin:6px 0 15px!important; }
  /* All fixed editor heights removed on mobile by mobile-pro.js. */
  .home-page .engagement-section { padding:66px 0 70px!important; height:auto!important; min-height:0!important; }
  .home-page .engagement-section .section-heading { margin-bottom:25px!important; }
  .home-page .engagement-section .section-heading h2 { width:auto!important; max-width:100%!important; text-align:left!important; font-size:clamp(37px,9.6vw,45px)!important; translate:none!important; transform:none!important; }
  .home-page .engagement-section .engagement-visual { height:auto!important; min-height:0!important; aspect-ratio:4 / 3!important; border-radius:16px!important; }
  .home-page .engagement-section .engagement-visual > img,
  .home-page .engagement-section .engagement-visual > video { height:100%!important; object-fit:cover!important; }
  .home-page .stats-strip { padding:48px 0!important; height:auto!important; min-height:0!important; }
  .home-page .stats-grid { display:grid!important; grid-template-columns:1fr!important; border-radius:17px!important; }
  .home-page .stats-grid > div { padding:25px 24px 31px!important; min-height:110px!important; display:grid; grid-template-columns:120px minmax(0,1fr); align-items:center; column-gap:12px; }
  .home-page .stats-grid strong { font-size:clamp(44px,11.7vw,56px)!important; line-height:1!important; }
  .home-page .stats-grid span { font-size:12px!important; line-height:1.4!important; }
  .home-page .stats-grid .fh-stat-accent { left:22px!important; right:22px!important; bottom:12px!important; }
  .home-page .ai-section { padding:72px 0!important; }
  .home-page .ai-layout { display:grid!important; grid-template-columns:1fr!important; gap:28px!important; }
  .home-page .ai-single-visual { order:2; width:100%!important; max-width:none!important; height:auto!important; min-height:0!important; aspect-ratio:1/1!important; }
  .home-page .ai-copy { order:1; width:100%!important; max-width:100%!important; }
  .home-page .ai-copy h2 { max-width:18ch!important; }
  .home-page .ai-single-visual video { object-fit:cover!important; }
  .home-page .testimonials-section { padding:70px 0!important; }
  .home-page .testimonial-heading { width:calc(100% - 2 * var(--fh-mobile-pad))!important; margin:0 auto 32px!important; text-align:left!important; }
  .home-page .testimonial-heading h2 { font-size:clamp(38px,10vw,47px)!important; line-height:1.05!important; text-align:left!important; }
  .home-page .testimonial-marquee-window { width:100%!important; }
  .home-page .testimonial-marquee-card { width:min(75vw,290px)!important; max-width:290px!important; min-height:245px!important; padding:0!important; }
  .home-page .testimonial-marquee-card > div { padding:19px!important; }
  .home-page .testimonial-marquee-card p { font-size:13px!important; line-height:1.5!important; }
  .home-page .testimonial-marquee-card span { font-size:11px!important; }
  .home-page .final-cta { padding:80px 0 72px!important; }
  .home-page .final-layout { grid-template-columns:1fr!important; gap:34px!important; }
  .home-page .final-copy h2 { max-width:13ch!important; }
  .home-page .final-copy p { margin-top:18px!important; }
  .home-page .final-copy .button { margin-top:10px!important; }
  .home-page .final-video-placeholder { width:100%!important; max-width:none!important; min-height:0!important; aspect-ratio:16/10!important; border-radius:16px!important; overflow:hidden!important; }
  .home-page .final-video-placeholder video { object-fit:cover!important; }
  /* Services: one purposeful, visually consistent media-led card per row. */
  html[data-page="services"] .fh-services-tiles-section { padding:54px 0 62px!important; }
  html[data-page="services"] .fh-services-tiles-section > .shell { width:calc(100% - 24px)!important; }
  html[data-page="services"] .fh-services-grid { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:none!important; grid-auto-rows:auto!important; gap:10px!important; }
  html[data-page="services"] .fh-service-tile { grid-column:auto!important; grid-row:auto!important; height:auto!important; min-height:0!important; aspect-ratio:1/1.05!important; border-radius:14px!important; }
  html[data-page="services"] .fh-service-tile-copy { bottom:20px!important; left:19px!important; right:19px!important; }
  html[data-page="services"] .fh-service-tile h2 { width:auto!important; max-width:100%!important; font-size:clamp(24px,6.7vw,31px)!important; line-height:1.07!important; letter-spacing:-.04em!important; }
  html[data-page="services"] .fh-service-tile p { font-size:12px!important; line-height:1.46!important; }
  html[data-page="services"] .fh-retainer-section { padding:72px 0!important; }
  html[data-page="services"] .fh-editorial-intro { max-width:100%!important; margin:0 0 28px!important; text-align:left!important; }
  html[data-page="services"] .fh-editorial-intro h2 { max-width:100%!important; text-align:left!important; }
  html[data-page="services"] .fh-editorial-split { display:grid!important; grid-template-columns:1fr!important; gap:30px!important; }
  html[data-page="services"] .fh-editorial-split > *,
  html[data-page="services"] .fh-editorial-split img { width:100%!important; max-width:100%!important; }
  html[data-page="services"] .fh-retainer-media { height:auto!important; min-height:0!important; aspect-ratio:4/3!important; border-radius:16px!important; overflow:hidden!important; }
  html[data-page="services"] .fh-services-transition { min-height:0!important; height:auto!important; padding:94px 0!important; }
  html[data-page="services"] .fh-services-transition h2 { max-width:17ch!important; font-size:clamp(40px,10.5vw,53px)!important; translate:none!important; transform:none!important; }
  html[data-page="services"] .services-portfolio-section { padding:70px 0!important; min-height:0!important; height:auto!important; }
  html[data-page="services"] .fh-centered-heading { margin:0 auto 31px!important; gap:12px!important; }
  html[data-page="services"] .production-video-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:11px!important; }
  html[data-page="services"] .production-video-grid .portfolio-card { min-width:0!important; border-radius:13px!important; overflow:hidden!important; }
  html[data-page="services"] .production-video-tile { aspect-ratio:1/1!important; border-radius:12px!important; }
  html[data-page="services"] .portfolio-caption { padding:12px 10px!important; }
  html[data-page="services"] .portfolio-caption h3 { font-size:13px!important; line-height:1.2!important; letter-spacing:-.01em!important; }
  html[data-page="services"] .portfolio-caption p { font-size:11px!important; line-height:1.3!important; }
  html[data-page="services"] .page-cta { padding:74px 0!important; }
  /* Pricing: cards should feel like one coherent 1-column set, not tall desktop tables. */
  html[data-page="packages"] .packages-section { padding:44px 0 75px!important; }
  html[data-page="packages"] .packages-grid { grid-template-columns:1fr!important; gap:13px!important; }
  html[data-page="packages"] .package-card { min-height:0!important; padding:24px 21px 22px!important; border-radius:17px!important; }
  html[data-page="packages"] .package-topline { padding-bottom:16px!important; }
  html[data-page="packages"] .package-card h2 { font-size:36px!important; line-height:1.04!important; margin:22px 0 10px!important; }
  html[data-page="packages"] .package-intro { min-height:0!important; font-size:14px!important; }
  html[data-page="packages"] .package-features { margin:20px 0 22px!important; }
  html[data-page="packages"] .package-features li { padding:12px 0!important; font-size:13px!important; line-height:1.5!important; }
  html[data-page="packages"] .package-footer, html[data-page="packages"] .package-cta { width:100%!important; }
  /* Why us: principal proof cards, founder portraits and process steps. */
  html[data-page="about"] main > section.section { padding:70px 0!important; }
  html[data-page="about"] .principle-grid { display:grid!important; grid-template-columns:1fr!important; gap:14px!important; }
  html[data-page="about"] .principle { min-width:0!important; border-radius:17px!important; overflow:hidden!important; }
  html[data-page="about"] .principle img { width:100%!important; max-height:245px!important; object-fit:cover!important; }
  html[data-page="about"] .principle h2 { font-size:25px!important; line-height:1.14!important; translate:none!important; transform:none!important; }
  html[data-page="about"] .fh-long-run-section { padding:75px 0!important; }
  html[data-page="about"] .fh-editorial-intro { text-align:left!important; }
  html[data-page="about"] .fh-editorial-intro h2 { text-align:left!important; }
  html[data-page="about"] .fh-editorial-split { display:grid!important; grid-template-columns:1fr!important; gap:28px!important; }
  html[data-page="about"] .fh-editorial-split > * { min-width:0!important; }
  html[data-page="about"] .founders-section { padding:74px 0!important; }
  html[data-page="about"] .founders-layout { display:grid!important; grid-template-columns:1fr!important; gap:30px!important; }
  html[data-page="about"] .founder-portraits { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
  html[data-page="about"] .founder-portraits img { max-width:100%!important; height:auto!important; object-fit:cover!important; }
  html[data-page="about"] .fh-process-moved { padding:70px 0!important; }
  html[data-page="about"] .fh-process-moved .timeline { grid-template-columns:1fr!important; gap:12px!important; }
  html[data-page="about"] .fh-process-moved .timeline-item { display:grid!important; grid-template-columns:108px minmax(0,1fr)!important; gap:14px!important; min-height:0!important; padding:11px!important; border-radius:15px!important; }
  html[data-page="about"] .fh-process-moved .timeline-image { height:112px!important; border-radius:10px!important; }
  html[data-page="about"] .fh-process-moved .timeline-item h2 { font-size:21px!important; line-height:1.12!important; margin:0 0 7px!important; }
  html[data-page="about"] .fh-process-moved .timeline-item p { font-size:12px!important; line-height:1.45!important; }
  html[data-page="about"] .page-cta { padding:72px 0!important; }
  /* AI: six tiles, then the strategy and workflow sections. */
  html[data-page="ai"] .fh-ai-tiles-section { padding:56px 0 70px!important; }
  html[data-page="ai"] .fh-ai-tiles-section > .shell { width:calc(100% - 24px)!important; }
  html[data-page="ai"] .fh-ai-grid { display:grid!important; grid-template-columns:1fr!important; grid-template-rows:none!important; grid-auto-rows:auto!important; gap:10px!important; }
  html[data-page="ai"] .fh-ai-tile { grid-column:auto!important; grid-row:auto!important; display:block!important; width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:1/1.03!important; border-radius:14px!important; }
  html[data-page="ai"] .fh-ai-tile-copy { bottom:20px!important; left:19px!important; right:19px!important; }
  html[data-page="ai"] .fh-ai-tile h2 { width:auto!important; max-width:100%!important; font-size:29px!important; line-height:1.08!important; }
  html[data-page="ai"] .fh-ai-direction-section { min-height:0!important; padding:90px 0!important; }
  html[data-page="ai"] .fh-ai-direction-copy { width:100%!important; max-width:none!important; }
  html[data-page="ai"] .fh-ai-workflow-section { padding:74px 0!important; }
  html[data-page="ai"] .fh-ai-workflow-grid, html[data-page="ai"] .fh-ai-final-grid { display:grid!important; grid-template-columns:1fr!important; gap:30px!important; }
  html[data-page="ai"] .fh-ai-video-placeholder { width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:16/10!important; border-radius:16px!important; }
  html[data-page="ai"] .fh-ai-final-cta { padding:74px 0 78px!important; }
  html[data-page="ai"] .fh-ai-final-media { order:2; width:100%!important; min-height:0!important; aspect-ratio:4/3!important; border-radius:16px!important; }
  html[data-page="ai"] .fh-ai-final-copy { order:1; }
  html[data-page="ai"] .fh-ai-final-copy h2 { font-size:clamp(35px,9.5vw,45px)!important; }
  /* Contact: copy first, clean form second, comfortably tappable. */
  html[data-page="contact"] .contact-hero { padding:108px 0 76px!important; height:auto!important; min-height:0!important; }
  html[data-page="contact"] .contact-grid { display:grid!important; grid-template-columns:1fr!important; gap:32px!important; }
  html[data-page="contact"] .contact-copy { margin:0!important; max-width:100%!important; }
  html[data-page="contact"] .contact-copy h1 { font-size:clamp(42px,11vw,54px)!important; line-height:1.02!important; margin-bottom:19px!important; }
  html[data-page="contact"] .contact-form-column { width:100%!important; max-width:100%!important; }
  html[data-page="contact"] .project-form { display:grid!important; width:100%!important; max-width:100%!important; padding:23px 19px!important; gap:15px!important; border-radius:17px!important; }
  html[data-page="contact"] .project-form :is(input,textarea,select) { width:100%!important; max-width:100%!important; font-size:16px!important; min-height:46px!important; }
  /* Careers, work, process, privacy, and supplementary pages. */
  .careers-hero, .career-how, .career-roles, .careers-final { padding-block:74px!important; }
  .careers-hero { padding-top:115px!important; }
  .careers-hero-grid, .career-how-grid, .career-roles-grid,
  .inner-hero-grid, .page-cta-grid, .case-row, .service-feature,
  .portfolio-list { grid-template-columns:1fr!important; }
  .careers-hero-grid, .careers-final-inner, .page-cta-grid { gap:28px!important; }
  .careers-hero-visual, .inner-hero-image { min-height:0!important; height:auto!important; aspect-ratio:4/3!important; border-radius:16px!important; overflow:hidden!important; }
  .career-how-grid, .career-roles-grid { gap:12px!important; }
  .career-how-grid > *, .career-roles-grid > * { min-width:0!important; }
  main > .inner-hero:not(.fh-wide-overlay-section) { padding:120px 0 75px!important; min-height:0!important; }
  .page-cta-grid { display:grid!important; gap:30px!important; }
  .page-cta .cta-image-grid, .page-cta .cta-image-grid > * { max-width:100%!important; }
  .page-cta .cta-image-grid img { height:auto!important; aspect-ratio:4/3!important; object-fit:cover!important; }
  .legal-page main { padding-top:92px!important; }
  .legal-content { padding-bottom:70px!important; }
  /* Footer gets its own typographic hierarchy, not 3 unreadable columns. */
  .site-footer { padding:52px 0 22px!important; }
  .site-footer .footer-main { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:30px 25px!important; padding-bottom:28px!important; }
  .site-footer .footer-brand { grid-column:1/-1!important; padding-bottom:24px!important; }
  .site-footer .footer-brand img { width:150px!important; }
  .site-footer .footer-brand p { font-size:13px!important; line-height:1.55!important; }
  .site-footer .footer-col { gap:13px!important; }
  .site-footer .footer-col > span { font-size:10px!important; letter-spacing:.12em!important; }
  .site-footer .footer-col a { font-size:13px!important; line-height:1.35!important; }
  .site-footer .footer-newsletter { grid-column:1/-1!important; }
  .site-footer .footer-bottom { display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:13px!important; font-size:11px!important; }
  .site-footer .footer-bottom span:last-child { text-align:left!important; }
  /* Clearly visible focus, no unwanted tap highlights / motion requirements. */
  a, button { -webkit-tap-highlight-color:transparent; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid #6F3BFF!important; outline-offset:3px!important; }
}
@media (max-width: 370px) {
  :root { --fh-mobile-pad:18px; }
  .home-page .hero-copy h1 { font-size:41px!important; }
  .home-page .stats-grid > div { grid-template-columns:100px minmax(0,1fr); padding-inline:18px!important; }
  html[data-page="about"] .fh-process-moved .timeline-item { grid-template-columns:88px minmax(0,1fr)!important; }
  html[data-page="about"] .fh-process-moved .timeline-image { height:92px!important; }
}
@media (min-width:768px) and (max-width:1100px) {
  main h1, main h2 { text-wrap:balance; }
  html[data-page="services"] .fh-services-grid, html[data-page="ai"] .fh-ai-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html[data-page="packages"] .packages-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .site-footer .footer-main { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .testimonial-marquee-track, .marquee-section * { animation:none!important; transition:none!important; }
}
/* Specificity guard for the older About 2×2 desktop-only rule. */
@media (max-width:767px) {
  html[data-page="about"] main > section.section:not(.founders-section):not(.fh-long-run-section):not(.fh-process-moved) > .shell.principle-grid {
    grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;
    width:calc(100% - 2 * var(--fh-mobile-pad))!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
  html[data-page="about"] main > section.section .principle {
    grid-template-rows:190px auto auto!important;
    height:auto!important;
    min-height:0!important;
    padding-bottom:22px!important;
  }
  html[data-page="about"] main > section.section .principle img { height:190px!important; margin-bottom:18px!important; }
  html[data-page="about"] main > section.section .principle h2 { margin:0 19px 9px!important; font-size:24px!important; }
  html[data-page="about"] main > section.section .principle p { margin:0 19px!important; font-size:14px!important; }
  /* The saved dark about-page hero remains full width; tighten its line breaks. */
  html[data-page="about"] .fh-why-wide-hero h1 { font-size:clamp(36px,9.5vw,47px)!important; }
}
/* Portrait tablets: release old fixed editor dimensions without shrinking media
   into phone layouts. The normalizer also handles 768–900px screens. */
@media (min-width:768px) and (max-width:900px) {
  .home-page .flowhaze-film-section,
  .home-page .engagement-section,
  .home-page .stats-strip,
  .home-page .final-cta,
  html[data-page="services"] .services-portfolio-section,
  html[data-page="services"] .fh-services-transition {
    height:auto!important; min-height:0!important; padding-block:88px!important;
  }
  .home-page .engagement-section .section-heading h2 { width:auto!important; max-width:100%!important; transform:none!important; translate:none!important; }
  .home-page .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  .home-page .stats-grid > div { padding:25px 20px 33px!important; }
  html[data-page="services"] .fh-services-transition h2 { transform:none!important; translate:none!important; }
  html[data-page="services"] .services-portfolio-section .production-video-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html[data-page="about"] .principle-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html[data-page="contact"] .contact-grid { grid-template-columns:1fr!important; gap:42px!important; }
  html[data-page="ai"] .fh-ai-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}