/* Flowhaze AI page — AI-only layout refresh, 2026-08-13.
   Keeps the hero split layout, vertically centers its copy, uses the same dense
   editorial tile language as Services, and adds text-only/workflow/final CTA sections. */

html[data-page="ai"] .fh-ai-hero{
  display:flex!important;
  align-items:center!important;
  min-height:751px!important;
  padding-top:clamp(64px,7vw,100px)!important;
  padding-bottom:clamp(64px,7vw,100px)!important;
}
html[data-page="ai"] .fh-ai-hero-grid{
  align-items:center!important;
  align-content:center!important;
  transform:translateY(40px)!important;
}
html[data-page="ai"] .fh-ai-hero-copy{
  align-self:center!important;
  justify-self:stretch!important;
  text-align:left!important;
  position:relative!important;
  top:0!important;
}
html[data-page="ai"] .fh-ai-hero-copy h1,
html[data-page="ai"] .fh-ai-hero-copy p{
  text-align:left!important;
}

/* Dense AI capability tiles, intentionally matched to the service-page system. */
html[data-page="ai"] .fh-ai-tiles-section{
  background:#0d0d0d!important;
  color:#f4f4f4!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  padding:clamp(72px,7vw,108px) 0!important;
}
html[data-page="ai"] .fh-ai-tiles-section>.shell{
  width:min(1280px,calc(100% - 48px))!important;
  max-width:1280px!important;
}
html[data-page="ai"] .fh-ai-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,clamp(210px,18vw,250px))!important;
  gap:8px!important;
  align-items:stretch!important;
}
html[data-page="ai"] .fh-ai-tile{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:14px!important;
  background:#151517!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  isolation:isolate!important;
}
html[data-page="ai"] .fh-ai-tile-concept{grid-column:1 / span 4!important;grid-row:1 / span 2!important;}
html[data-page="ai"] .fh-ai-tile-cinematic{grid-column:5 / span 4!important;grid-row:1!important;}
html[data-page="ai"] .fh-ai-tile-character{grid-column:9 / span 4!important;grid-row:1!important;}
html[data-page="ai"] .fh-ai-tile-product{grid-column:5 / span 4!important;grid-row:2!important;}
html[data-page="ai"] .fh-ai-tile-campaign{grid-column:1 / span 8!important;grid-row:3!important;}
html[data-page="ai"] .fh-ai-tile-human{grid-column:9 / span 4!important;grid-row:2 / span 2!important;}
html[data-page="ai"] .fh-ai-tile>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  transform:scale(1.01)!important;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s ease!important;
}
html[data-page="ai"] .fh-ai-tile:hover>img{transform:scale(1.035)!important;}
html[data-page="ai"] .fh-ai-tile-shade{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(6,6,9,.03) 0%,rgba(6,6,9,.14) 42%,rgba(6,6,9,.91) 100%)!important;
}
html[data-page="ai"] .fh-ai-tile-copy{
  position:absolute!important;
  z-index:2!important;
  left:clamp(18px,1.7vw,26px)!important;
  right:clamp(18px,1.7vw,26px)!important;
  bottom:clamp(18px,1.7vw,26px)!important;
  color:#f4f4f4!important;
}
html[data-page="ai"] .fh-ai-tile-kicker{
  display:block!important;
  margin:0 0 7px!important;
  font:500 10px/1 "DM Mono",ui-monospace,monospace!important;
  letter-spacing:.12em!important;
  color:#bfff00!important;
}
html[data-page="ai"] .fh-ai-tile h2{
  margin:0 0 7px!important;
  max-width:18ch!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(24px,1.8vw,34px)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
  font-weight:700!important;
  color:#f4f4f4!important;
}
html[data-page="ai"] .fh-ai-tile p{
  margin:0!important;
  max-width:45ch!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(12px,.9vw,14px)!important;
  line-height:1.4!important;
  color:rgba(244,244,244,.84)!important;
}

/* Text-only direction section. */
html[data-page="ai"] .fh-ai-direction-section{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:clamp(520px,58vw,720px)!important;
  padding:clamp(100px,10vw,160px) 0!important;
  background:#f4f4f4!important;
  color:#0d0d0d!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-page="ai"] .fh-ai-direction-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html[data-page="ai"] .fh-ai-direction-copy{
  width:min(920px,100%)!important;
  margin:0 auto!important;
  text-align:center!important;
}
html[data-page="ai"] .fh-ai-direction-copy h2{
  margin:0 auto 24px!important;
  max-width:18ch!important;
  text-align:center!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(46px,5.2vw,82px)!important;
  line-height:.98!important;
  letter-spacing:-.05em!important;
  font-weight:400!important;
  color:#0d0d0d!important;
}
html[data-page="ai"] .fh-ai-direction-copy h2 em{
  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-style:italic!important;
  font-weight:500!important;
  letter-spacing:-.03em!important;
}
html[data-page="ai"] .fh-ai-direction-copy p{
  max-width:680px!important;
  margin:0 auto!important;
  text-align:center!important;
  font-size:clamp(16px,1.3vw,20px)!important;
  line-height:1.55!important;
  color:#57575f!important;
}

/* Superside-inspired workflow editorial block: copy left, video placeholder right. */
html[data-page="ai"] .fh-ai-workflow-section{
  background:#f4f4f4!important;
  color:#0d0d0d!important;
  padding:clamp(90px,9vw,150px) 0 clamp(120px,11vw,180px)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-page="ai"] .fh-ai-workflow-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr)!important;
  gap:clamp(54px,7vw,110px)!important;
  align-items:center!important;
}
html[data-page="ai"] .fh-ai-eyebrow{
  margin:0 0 24px!important;
  font:500 11px/1.2 "DM Mono",ui-monospace,monospace!important;
  letter-spacing:.17em!important;
  color:#57575f!important;
}
html[data-page="ai"] .fh-ai-workflow-copy h2{
  margin:0 0 28px!important;
  max-width:13ch!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(48px,5vw,78px)!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  font-weight:400!important;
  color:#0d0d0d!important;
}
html[data-page="ai"] .fh-ai-workflow-copy h2 em{
  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-style:italic!important;
  font-weight:500!important;
  letter-spacing:-.035em!important;
}
html[data-page="ai"] .fh-ai-workflow-copy>p:not(.fh-ai-eyebrow){
  margin:0!important;
  max-width:38ch!important;
  font-size:clamp(17px,1.3vw,21px)!important;
  line-height:1.5!important;
  color:#3f3f45!important;
}
html[data-page="ai"] .fh-ai-video-placeholder{
  position:relative!important;
  display:block!important;
  width:100%!important;
  aspect-ratio:16/10!important;
  min-height:360px!important;
  overflow:hidden!important;
  border-radius:20px!important;
  border:1px solid #d7d7dc!important;
  background:#151517!important;
  padding:0!important;
  cursor:pointer!important;
  --play-x:50%;
  --play-y:50%;
}
html[data-page="ai"] .fh-ai-video-placeholder>video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:360px!important;
  object-fit:cover!important;
  pointer-events:none!important;
}
html[data-page="ai"] .fh-ai-video-placeholder .production-play-cursor{
  left:var(--play-x)!important;
  top:var(--play-y)!important;
}
html[data-page="ai"] .fh-ai-video-placeholder:hover .production-play-cursor,
html[data-page="ai"] .fh-ai-video-placeholder:focus-visible .production-play-cursor{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
html[data-page="ai"] .fh-ai-video-placeholder::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;
}
html[data-page="ai"] .fh-ai-video-placeholder:hover::after,
html[data-page="ai"] .fh-ai-video-placeholder:focus-visible::after{
  background:rgba(0,0,0,.12)!important;
}

/* Final CTA: media left, existing CTA copy/button right. */
html[data-page="ai"] .fh-ai-final-cta{
  background:#0d0d0d!important;
  color:#f4f4f4!important;
  padding:clamp(100px,10vw,170px) 0!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
html[data-page="ai"] .fh-ai-final-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  gap:clamp(56px,7vw,110px)!important;
  align-items:center!important;
}
html[data-page="ai"] .fh-ai-final-media{
  overflow:hidden!important;
  min-height:clamp(400px,40vw,570px)!important;
  border-radius:20px!important;
  background:#151517!important;
}
html[data-page="ai"] .fh-ai-final-media>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:inherit!important;
  object-fit:cover!important;
}
html[data-page="ai"] .fh-ai-final-copy{
  max-width:620px!important;
}
html[data-page="ai"] .fh-ai-final-copy .fh-ai-eyebrow{color:#bfff00!important;}
html[data-page="ai"] .fh-ai-final-copy h2{
  margin:0 0 34px!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:clamp(48px,5.1vw,80px)!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  font-weight:400!important;
  color:#f4f4f4!important;
}
html[data-page="ai"] .fh-ai-final-copy h2 em{
  font-family:"Cormorant Garamond",Georgia,serif!important;
  font-style:italic!important;
  font-weight:500!important;
  letter-spacing:-.035em!important;
}

@media(max-width:1050px){
  html[data-page="ai"] .fh-ai-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-rows:minmax(350px,auto)!important;
    gap:10px!important;
  }
  html[data-page="ai"] .fh-ai-tile{
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:360px!important;
  }
  html[data-page="ai"] .fh-ai-workflow-grid,
  html[data-page="ai"] .fh-ai-final-grid{
    grid-template-columns:1fr 1fr!important;
    gap:44px!important;
  }
}

@media(max-width:760px){
  html[data-page="ai"] .fh-ai-hero{
    min-height:auto!important;
    padding-top:64px!important;
    padding-bottom:64px!important;
  }
  html[data-page="ai"] .fh-ai-tiles-section{padding:56px 0!important;}
  html[data-page="ai"] .fh-ai-tiles-section>.shell{width:calc(100% - 24px)!important;}
  html[data-page="ai"] .fh-ai-grid{
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
    gap:8px!important;
  }
  html[data-page="ai"] .fh-ai-tile{min-height:350px!important;border-radius:12px!important;}
  html[data-page="ai"] .fh-ai-tile-copy{left:20px!important;right:20px!important;bottom:20px!important;}
  html[data-page="ai"] .fh-ai-tile h2{font-size:30px!important;}
  html[data-page="ai"] .fh-ai-direction-section{min-height:520px!important;padding:90px 0!important;}
  html[data-page="ai"] .fh-ai-workflow-grid,
  html[data-page="ai"] .fh-ai-final-grid{
    grid-template-columns:1fr!important;
    gap:44px!important;
  }
  html[data-page="ai"] .fh-ai-workflow-section{padding:84px 0 110px!important;}
  html[data-page="ai"] .fh-ai-video-placeholder{min-height:260px!important;}
  html[data-page="ai"] .fh-ai-final-media{min-height:360px!important;}
}


/* AI hero vertical balance + shared workflow player behavior.
   Desktop: shift the WHOLE two-column group down 40px so the media has equal
   visual breathing room above and below. Never offset only the copy. */
@media(max-width:1100px){
  html[data-page="ai"] .fh-ai-hero-grid{transform:translateY(20px)!important;}
}
@media(max-width:700px){
  html[data-page="ai"] .fh-ai-hero-grid{transform:none!important;}
  html[data-page="ai"] .fh-ai-hero-copy{top:0!important;}
  html[data-page="ai"] .fh-ai-video-placeholder,
  html[data-page="ai"] .fh-ai-video-placeholder>video{min-height:260px!important;}
}


/* CHANGE 33 — AI hero italic ascender clipping.
   Give the complete second line and the gradient "brand" word real glyph room
   without changing the visible font size, tracking, alignment, or copy. */
html[data-page="ai"] .fh-ai-hero-copy h1,
html[data-page="ai"] .fh-ai-hero-copy h1 span{
  overflow:visible!important;
}
html[data-page="ai"] .fh-ai-hero-copy .fh-ai-direction-line{
  display:inline-block!important;
  line-height:1.18!important;
  padding-top:.14em!important;
  padding-bottom:.03em!important;
  margin-top:-.14em!important;
  margin-bottom:-.03em!important;
  vertical-align:baseline!important;
  overflow:visible!important;
}
html[data-page="ai"] .fh-ai-hero-copy .fh-ai-brand-word{
  display:inline-block!important;
  line-height:1.24!important;
  padding-top:.16em!important;
  padding-bottom:.04em!important;
  margin-top:-.16em!important;
  margin-bottom:-.04em!important;
  vertical-align:baseline!important;
  overflow:visible!important;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* CHANGE 37 — final italic-gradient glyph overhang fix.
   The final italic "d" in brand overhangs its text advance box to the right.
   The HTML span is now an inline-block with transparent right padding so the
   gradient paint area includes the full glyph rather than clipping its ascender. */
html[data-page="ai"] .fh-ai-hero-copy .fh-ai-brand-word{
  overflow:visible!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}