/* Flowhaze site upgrades — 2026-08-07 */
:root{
  --fh-logo-icon-size:42px;
}

/* Client logos: two identical neutral lanes. No lane backgrounds, borders or color effects.
   Edge fading is a transparency mask only, so both rows use the exact same treatment. */
.marquee-section .brand-marquee-shell{display:grid;gap:16px!important}
.marquee-section .logo-lane,
.marquee-section .logo-lane:nth-child(2){
  position:relative!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)!important;
}
.marquee-section .logo-lane:before,
.marquee-section .logo-lane:after{display:none!important;content:none!important}
.marquee-section .brand-logo-track-new{padding:15px 0!important;background:transparent!important}
.marquee-section .brand-logo-item-new{
  height:calc(var(--fh-logo-icon-size) + 28px)!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.marquee-section .brand-logo-item-new img{
  max-height:var(--fh-logo-icon-size)!important;
  width:auto!important;
  height:auto!important;
  filter:grayscale(1) contrast(.92)!important;
  opacity:.62!important;
}
.marquee-section .brand-logo-item-new:hover img{filter:grayscale(1) contrast(1)!important;opacity:1!important}

/* Full Stack: heading plus 16:9 media placeholders only. */
.engagement-section .engagement-layout{display:block!important}
.engagement-section .section-heading{margin-bottom:34px!important}
.engagement-section .section-heading>p,
.engagement-section .engagement-badge,
.engagement-section .engagement-content{display:none!important}
.engagement-section .engagement-visual{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  border-radius:var(--fh-card-radius)!important;
  margin:0!important;
  background:#080808!important;
}
.engagement-section .engagement-visual img,.engagement-section .engagement-visual video{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

/* Full Stack media: seamless with the dark background; geometry unchanged. */
.engagement-section .engagement-visual,
.engagement-section .engagement-visual img,
.engagement-section .engagement-visual video{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.engagement-section .engagement-visual{background:transparent!important;}

/* Footer newsletter + legal links. */
.site-footer .footer-main{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(130px,.75fr))!important;gap:clamp(24px,3vw,48px)!important}
.footer-newsletter{min-width:0}
.footer-newsletter>span{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:var(--fh-label-size);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.footer-newsletter p{margin:0 0 14px;max-width:34ch}
.footer-newsletter-form{display:flex;align-items:center;gap:8px;max-width:430px}
.footer-newsletter-form input[type="email"]{min-width:0;flex:1;border:1px solid rgba(13,13,13,.2);background:transparent;color:inherit;border-radius:999px;padding:13px 16px;font:500 14px/1.1 Inter,Arial,sans-serif;outline:none}
.footer-newsletter-form input[type="email"]:focus{border-color:currentColor}
.footer-newsletter-form button{white-space:nowrap;border-radius:999px;padding:13px 18px;border:0;background:#0d0d0d;color:#f4f4f4;font:600 13px/1 Inter,Arial,sans-serif;cursor:pointer}
.footer-legal-links{display:inline-flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.footer-legal-links a{color:inherit;text-decoration:none;opacity:.7}.footer-legal-links a:hover{opacity:1}
.legal-page main{padding-top:clamp(110px,11vw,160px)}
.legal-hero{padding:48px 0 30px}
.legal-hero h1{max-width:900px;margin:0}
.legal-content{padding:20px 0 110px}
.legal-content .shell{max-width:min(920px,calc(100% - (2 * var(--fh-page-margin))))}
.legal-block{padding:48px 0;border-top:1px solid rgba(13,13,13,.14)}
.legal-block h2{margin:0 0 22px}.legal-block h3{margin:32px 0 10px;font-size:22px}.legal-block p,.legal-block li{line-height:1.7}.legal-block ul{padding-left:22px}

@media(max-width:1100px){.site-footer .footer-main{grid-template-columns:1fr 1fr!important}}
@media(max-width:700px){
  .marquee-section .brand-logo-track-new{padding:12px 0!important}
  .site-footer .footer-main{grid-template-columns:1fr!important}
  .footer-newsletter{grid-column:auto}
  .footer-newsletter-form{flex-direction:column;align-items:stretch}
  .footer-legal-links{margin-left:0}
}
/* Remove old colored fade overlays; lane masks above provide the fade with no background effect. */
.marquee-section:before,.marquee-section:after{display:none!important;content:none!important}
/* Keep the title divider lines neutral by default; the text-only editor can recolor text independently. */
.marquee-section .marquee-title span{background:currentColor!important;opacity:.18!important}


/* 2026-08-07 rail + Flowhaze Film interaction correction.
   The visible marquee window is exactly the same rail as the header/logo/CTA. */
.marquee-section .brand-marquee-shell{
  width:min(calc(100% - (var(--fh-page-margin) * 2)),var(--fh-site-max))!important;
  max-width:var(--fh-site-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:hidden!important;
  position:relative!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)!important;
}
/* One shared fade window at the exact nav rails; don't double-fade each row. */
.marquee-section .logo-lane,
.marquee-section .logo-lane:nth-child(2){
  width:100%!important;
  max-width:100%!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.marquee-section .brand-marquee-shell:before,
.marquee-section .brand-marquee-shell:after{display:none!important;content:none!important}

/* Flowhaze Film = the exact same hover/cursor play behavior as Services videos. */
.flowhaze-film-player{
  --play-x:50%;
  --play-y:50%;
}
.flowhaze-film-player::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  left:0!important;
  top:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(0,0,0,0)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
  pointer-events:none!important;
  transition:background .28s ease!important;
}
.flowhaze-film-player:hover::after,
.flowhaze-film-player:focus-visible::after{background:rgba(0,0,0,.12)!important}
.flowhaze-film-player .production-play-cursor{
  left:var(--play-x)!important;
  top:var(--play-y)!important;
}
.flowhaze-film-player:hover .production-play-cursor,
.flowhaze-film-player:focus-visible .production-play-cursor{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1)!important;
}


/* Footer social links + editable icon buttons */
.footer-social-links{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.footer-social-links .fh-social-link{width:36px;height:36px;border:1px solid rgba(13,13,13,.18);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:inherit;text-decoration:none;transition:opacity .2s ease,transform .2s ease,border-color .2s ease}
.footer-social-links .fh-social-link:hover{opacity:1;transform:translateY(-1px);border-color:currentColor}
.fh-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;flex:0 0 auto}.fh-btn-icon svg{width:100%;height:100%;display:block}
.fh-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.button[data-icon-position="left"]{flex-direction:row}.button[data-icon-position="only"]{gap:0}.button[data-button-shape="circle"]{aspect-ratio:1/1}
@media(max-width:700px){.footer-social-links{margin-top:6px}.footer-social-links .fh-social-link{width:34px;height:34px}}

/* Builder-preserved decoration controls. These classes may be baked into final exported HTML. */
.flowhaze-hide-before::before{display:none!important;content:none!important}
.flowhaze-hide-after::after{display:none!important;content:none!important}

/* Change 80 — widen Full Stack media horizontally only to ruler span. */
@media (min-width:1101px){
  .engagement-section .engagement-visual{
    width:calc(100% + 160px)!important;
    max-width:none!important;
    height:620px!important;
    aspect-ratio:auto!important;
    margin-left:-80px!important;
    margin-right:-80px!important;
  }
  .engagement-section .engagement-visual img,
  .engagement-section .engagement-visual video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
}

/* Thank-you video: rounded corners with no frame/border. */
.thank-you-page .thank-you-media.flowhaze-film-player{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}