/* ======================================================================
   FLOWHAZE — BUILD BRIEF OVERRIDES — 2026-08-07
   Loaded last on purpose. This file implements only the approved build brief.
   ====================================================================== */
:root{
  --fh-ink:#0D0D0D;
  --fh-bone:#F4F4F4;
  --fh-acid:#BFFF00;
  --fh-violet:#6F3BFF;
  --ink:var(--fh-ink);
  --bone:var(--fh-bone);
  --acid:var(--fh-acid);
  --violet:var(--fh-violet);
  --fh-page-margin:32px;
  --fh-page-margin-tablet:24px;
  --fh-page-margin-mobile:16px;
  --fh-site-max:1280px;
  --fh-logo-tile-size:142px;
  --fh-logo-speed:38;
  --fh-card-radius:18px;
  --fh-h1-size:clamp(64px,5.25vw,80px);
  --fh-h2-size:clamp(40px,3.6vw,56px);
  --fh-h3-size:22px;
  --fh-body-size:17px;
  --fh-label-size:12px;
  --fh-button-font-size:18px;
  --fh-button-pad-y:18px;
  --fh-button-pad-x:30px;
  --fh-button-radius:999px;
  --fh-stats-pad-y:94px;
}

html,body,button,input,textarea,select{font-family:"Inter",Arial,Helvetica,sans-serif!important}
body{font-size:var(--fh-body-size)!important}
h1,h2,h3,p{overflow-wrap:normal;word-break:normal}

/* One global content edge. Header logo, CTA, sections, cards and media share it. */
.shell,.site-header .header-inner,.site-footer .footer-main,.site-footer .footer-bottom{
  width:min(calc(100% - (var(--fh-page-margin) * 2)),var(--fh-site-max))!important;
  max-width:var(--fh-site-max)!important;
  margin-inline:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Typography tokens */
.home-page .hero-copy h1,.inner-hero h1,.contact-hero h1{font-size:var(--fh-h1-size)!important;line-height:.98!important;font-weight:800!important;letter-spacing:-.045em!important}
.section-heading h2,.system-copy h2,.ai-copy h2,.engagement-section .section-heading h2,.testimonial-heading h2,.final-copy h2,.page-cta h2,.split-story h2,.founders-copy h2,.ai-showcase-copy h2{font-size:var(--fh-h2-size)!important;line-height:1!important;font-weight:800!important;letter-spacing:-.04em!important}
.service-copy h2,.case-copy h2,.audience-card h3,.engagement-list h3,.portfolio-caption h3{font-size:var(--fh-h3-size)!important}
.eyebrow,.case-copy>span,.service-copy>span,.footer-col>span{font-family:"DM Mono",ui-monospace,monospace!important;font-size:var(--fh-label-size)!important;letter-spacing:.14em!important;text-transform:uppercase!important}
.hero-copy h1 em,.section-heading h2 em,.system-copy h2 em,.ai-copy h2 em,.testimonial-heading h2 em,.inner-hero h1 em,.contact-hero h1 em,.page-cta h2 em,.split-story h2 em,.founders-copy h2 em,.ai-showcase-copy h2 em,.service-copy h2 em{
  font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:600!important;font-style:italic!important;
}

/* Shared button tokens */
.button{
  border-radius:var(--fh-button-radius)!important;
  padding:var(--fh-button-pad-y) var(--fh-button-pad-x)!important;
  font-size:var(--fh-button-font-size)!important;
  font-weight:600!important;
  line-height:1!important;
  display:inline-flex!important;align-items:center!important;gap:8px!important;justify-content:center!important;
}
.button span{font-size:.9em;line-height:1;transform:none!important}
.button-acid{background:var(--fh-acid)!important;border:1.5px solid var(--fh-acid)!important;color:#172000!important}
.button-violet,.light-surface .button-outline{background:transparent!important;border:1.75px solid var(--fh-violet)!important;color:var(--fh-violet)!important}
.button-acid-outline{background:transparent!important;border:1.75px solid var(--fh-acid)!important;color:var(--fh-acid)!important}
.button-acid-outline:hover{background:var(--fh-acid)!important;color:#172000!important}

/* Header is intentionally dark so its required acid CTA stays legible. */
.site-header{background:rgba(13,13,13,.96)!important;color:var(--fh-bone)!important}
.site-header .header-cta{padding:13px 22px!important;font-size:14px!important;font-weight:500!important}

/* Hero */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-actions .button{margin-top:0!important}
.hero-copy h1{max-width:720px!important}
.hero-copy p{font-size:18px!important;line-height:1.55!important}

/* CLIENT LOGOS — two independent, seamless lanes, bounded by the global margin. */
.marquee-section{padding:76px 0 72px!important;overflow:hidden!important}
.marquee-title{width:min(calc(100% - (var(--fh-page-margin) * 2)),var(--fh-site-max))!important;margin:0 auto 30px!important}
.marquee-title p{font-size:13px!important;font-family:"DM Mono",ui-monospace,monospace!important;text-transform:uppercase!important;letter-spacing:.14em!important}
.brand-marquee-shell{position:relative;display:grid;gap:12px;overflow:hidden}
.brand-marquee-shell:before,.brand-marquee-shell:after{content:"";position:absolute;z-index:4;top:0;bottom:0;width:82px;pointer-events:none}
.brand-marquee-shell:before{left:0;background:linear-gradient(90deg,var(--fh-bone),rgba(244,244,244,0))}
.brand-marquee-shell:after{right:0;background:linear-gradient(270deg,var(--fh-bone),rgba(244,244,244,0))}
.logo-lane{overflow:hidden;position:relative;border:1px solid rgba(13,13,13,.12);border-radius:18px;background:rgba(255,255,255,.62)}
.logo-lane:nth-child(2){margin-left:clamp(18px,4vw,56px);margin-right:clamp(18px,4vw,56px);background:#ececf0}
.logo-lane:before{content:attr(data-lane-label);position:absolute;z-index:3;left:16px;top:12px;font:500 9px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.16em;color:rgba(13,13,13,.42);text-transform:uppercase;pointer-events:none}
.brand-logo-track-new{display:flex!important;align-items:center!important;width:max-content!important;gap:18px!important;padding:28px 0 18px!important;will-change:transform;transform:translate3d(0,0,0)}
.brand-logo-item-new{width:var(--fh-logo-tile-size);height:74px;flex:0 0 var(--fh-logo-tile-size);display:grid;place-items:center;padding:13px 18px;border-right:1px solid rgba(13,13,13,.08)}
.brand-logo-item-new img{max-width:100%;max-height:42px;width:auto!important;height:auto!important;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.58;transition:opacity .22s ease,filter .22s ease,transform .22s ease}
.brand-logo-item-new:hover img{opacity:1;filter:grayscale(0);transform:translateY(-1px)}

/* SECTION 3 — Flowhaze film */
.flowhaze-film-section{background:var(--fh-ink)!important;color:var(--fh-bone)!important;padding:118px 0!important}
.flowhaze-film-section .section-heading{margin-bottom:42px!important}
.flowhaze-film-section .section-heading h2,.flowhaze-film-section .section-heading p{color:var(--fh-bone)!important}
.flowhaze-film-section .section-heading p{color:#b7b7bd!important}
.flowhaze-film-line{margin:20px 0 0;color:var(--fh-bone);font-weight:500}
.flowhaze-film-player{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--fh-card-radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#090909;cursor:pointer;padding:0}
.flowhaze-film-player video{width:100%;height:100%;object-fit:cover}
.flowhaze-film-player:after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:999px;display:grid;place-items:center;background:rgba(244,244,244,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;font-size:20px;opacity:.2;transition:opacity .2s ease,transform .2s ease}
.flowhaze-film-player:hover:after{opacity:1;transform:translate(-50%,-50%) scale(1.04)}

/* SECTION 4 — single 1→N square asset */
.production-system{padding:116px 0!important}
.production-system .system-layout{grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr)!important;gap:80px!important;align-items:center!important}
.production-system .system-copy .button{margin-top:28px}
.one-to-n-visual{width:min(100%,640px);justify-self:end;position:relative;aspect-ratio:1;border-radius:var(--fh-card-radius);overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#0b0b0b}
.one-to-n-visual img,.one-to-n-visual video{width:100%;height:100%;object-fit:cover}
.one-to-n-badge{position:absolute;left:18px;bottom:18px;background:rgba(13,13,13,.76);color:var(--fh-bone);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);border-radius:999px;padding:10px 14px;font:500 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em}

/* SECTION 5 */
.audience-card{border-radius:var(--fh-card-radius)!important;overflow:hidden!important}
.audience-card>div:before{background:var(--fh-violet)!important}
.audience-card>div>span{font-size:clamp(34px,3.2vw,52px)!important;font-weight:800!important;line-height:1!important;letter-spacing:-.05em!important}
.audience-card a{display:none!important}

/* SECTION 6 — full stack directly follows audience */
.engagement-section{padding:116px 0!important}
.engagement-section .section-heading{margin-bottom:50px!important}
.engagement-section .section-heading h2{color:var(--fh-bone)!important}
.engagement-section .section-heading p{color:#b7b7bd!important}
.engagement-layout{align-items:center!important}
.engagement-visual img,.engagement-visual video{aspect-ratio:16/9!important;height:auto!important;width:100%!important;object-fit:cover!important;border-radius:var(--fh-card-radius)!important}
.engagement-content .button{margin-top:28px}

/* SECTION 7 — +25% vertical breathing room */
.stats-strip{padding:var(--fh-stats-pad-y) 0!important}
.stats-grid>div{padding-top:46px!important;padding-bottom:46px!important}
.stats-grid strong{font-size:clamp(56px,5vw,82px)!important}

/* SECTION 8 — single square AI visual */
.ai-section{padding:116px 0!important}
.ai-layout{grid-template-columns:minmax(360px,1fr) minmax(0,.9fr)!important;gap:82px!important;align-items:center!important}
.ai-single-visual{aspect-ratio:1;border-radius:var(--fh-card-radius);overflow:hidden;border:1px solid rgba(13,13,13,.12);background:#fff}
.ai-single-visual img,.ai-single-visual video{width:100%;height:100%;object-fit:cover}
.ai-section .button-outline{border-color:var(--fh-violet)!important;color:var(--fh-violet)!important;background:transparent!important}
.ai-section .button-outline:hover{background:var(--fh-violet)!important;color:var(--fh-bone)!important}

/* SECTION 9 — six source testimonials. Rounded tiles use global radius. */
.testimonials-section{padding:116px 0!important}
.testimonial-marquee-card{border-radius:var(--fh-card-radius)!important;overflow:hidden!important}
.testimonial-marquee-card img{border-radius:calc(var(--fh-card-radius) - 2px)!important}
.testimonial-sub{margin:15px 0 0!important;color:#66666d!important;font-size:17px!important}

/* SECTION 10 — one square visual */
.final-cta{padding:116px 0!important}
.final-layout{grid-template-columns:minmax(0,.9fr) minmax(360px,.75fr)!important;gap:90px!important;align-items:center!important}
.final-single-visual{aspect-ratio:1;border-radius:var(--fh-card-radius);overflow:hidden;border:1px solid rgba(255,255,255,.13)}
.final-single-visual img{width:100%;height:100%;object-fit:cover}

/* SERVICES — moved portfolio grid is additive; existing service content remains untouched. */
.services-portfolio-section{padding:116px 0!important;background:var(--fh-bone)!important;color:var(--fh-ink)!important;border-top:1px solid #d8d8dc}
.services-portfolio-section .section-heading{margin-bottom:44px!important}
.services-portfolio-section .production-video-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
.services-portfolio-section .portfolio-card{border-radius:var(--fh-card-radius)!important}
.services-portfolio-section .mobile-work-toggle{display:none;margin:26px auto 0;background:transparent;border:1.5px solid var(--fh-violet);color:var(--fh-violet);border-radius:999px;padding:13px 20px;font-weight:600}

/* Video modal: black surround with deliberate margins, never edge-to-edge. */
.video-modal{padding:clamp(18px,4vw,64px)!important;background:rgba(0,0,0,.96)!important}
.video-modal-inner{width:min(1320px,100%)!important;height:auto!important;max-height:calc(100vh - clamp(36px,8vw,128px))!important;border-radius:18px!important;overflow:hidden!important;background:#000!important}
.video-modal-inner>video{max-height:calc(100vh - clamp(36px,8vw,128px))!important;object-fit:contain!important;background:#000!important}

/* Case Studies page uses the existing approved case-study content, copied into a new page. */
html[data-page="case-studies"] .case-media,html[data-page="case-studies"] .case-row{border-radius:var(--fh-card-radius)!important}

@media(max-width:1100px){
  :root{--fh-page-margin:var(--fh-page-margin-tablet);--fh-h1-size:clamp(52px,7vw,68px);--fh-h2-size:clamp(38px,5.4vw,52px)}
  .production-system .system-layout,.ai-layout,.final-layout{grid-template-columns:1fr!important;gap:48px!important}
  .one-to-n-visual{justify-self:start;width:min(100%,620px)}
  .services-portfolio-section .production-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:760px){
  :root{--fh-page-margin:var(--fh-page-margin-mobile);--fh-logo-tile-size:118px;--fh-h1-size:clamp(42px,12vw,56px);--fh-h2-size:clamp(34px,9.5vw,46px);--fh-body-size:16px;--fh-button-font-size:16px;--fh-button-pad-y:15px;--fh-button-pad-x:22px;--fh-stats-pad-y:72px}
  .hero-actions{gap:9px}.hero-actions .button{width:auto!important}
  .brand-marquee-shell:before,.brand-marquee-shell:after{width:36px}
  .logo-lane:nth-child(2){margin-left:10px;margin-right:10px}
  .brand-logo-track-new{gap:10px!important;padding:25px 0 16px!important}
  .brand-logo-item-new{height:62px;padding:10px 14px}
  .flowhaze-film-section,.production-system,.engagement-section,.ai-section,.testimonials-section,.final-cta,.services-portfolio-section{padding:82px 0!important}
  .production-system .system-layout{gap:38px!important}
  .one-to-n-visual{width:100%}
  .engagement-section .section-heading{margin-bottom:36px!important}
  .services-portfolio-section .production-video-grid{grid-template-columns:1fr!important}
  .services-portfolio-section .portfolio-card:nth-child(n+5){display:none!important}
  .services-portfolio-section .production-video-grid.is-expanded .portfolio-card{display:block!important}
  .services-portfolio-section .mobile-work-toggle{display:block!important}
  .final-single-visual{width:100%}
}


/* Change 72 — true full right-half media panel */
@media (min-width:1101px){
  .production-system{
    position:relative!important;
    overflow:hidden!important;
    min-height:650px!important;
    padding:116px 0!important;
    display:flex!important;
    align-items:center!important;
  }
  .production-system .system-layout{
    display:block!important;
    width:min(calc(100% - (var(--fh-page-margin) * 2)),var(--fh-site-max))!important;
    max-width:var(--fh-site-max)!important;
    margin-inline:auto!important;
  }
  .production-system .system-copy{
    width:calc(50% - 44px)!important;
    max-width:590px!important;
  }
  .production-system .system-copy .button{
    width:auto!important;
    align-self:auto!important;
    justify-self:auto!important;
  }
  .production-system .one-to-n-visual{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:50%!important;
    width:50%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#0b0b0b!important;
  }
  .production-system .one-to-n-visual img,
  .production-system .one-to-n-visual video{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:0!important;
  }
}

@media (max-width:1100px){
  .production-system{
    display:block!important;
    min-height:0!important;
  }
  .production-system .system-copy{
    width:100%!important;
    max-width:none!important;
  }
  .production-system .system-copy .button{
    width:auto!important;
    align-self:auto!important;
  }
  .production-system .one-to-n-visual{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1!important;
    border-radius:var(--fh-card-radius)!important;
  }
}