/* FLOWHAZE FINAL THEME
   Text is always Ink / neutral grey on light, and Bone / body-dim on dark.
   Acid and Violet are reserved for buttons, borders, graphic surfaces and motion cues. */
:root{
  --ink:#0D0D0D;
  --pitch:#0A0A0A;
  --surface:#151517;
  --card:#1C1C20;
  --line:#2A2A30;
  --bone:#F4F4F4;
  --paper:#FFFFFF;
  --soft:#E9E9EB;
  --body-dim:#B4B4BC;
  --muted:#77777F;
  --light-line:#D4D4D8;
  --acid:#BFFF00;
  --violet:#6F3BFF;
}

html,body{background:var(--bone)!important;color:var(--ink)!important}
body{background-image:none!important}
::selection{background:var(--acid);color:var(--ink)}

/* Header */
.site-header{
  background:rgba(13,13,13,.94)!important;
  border-bottom:1px solid rgba(244,244,244,.12)!important;
  color:var(--bone)!important;
  box-shadow:none!important;
}
.site-header .logo-link img{filter:brightness(0) invert(1)!important}
.desktop-nav a{color:rgba(244,244,244,.70)!important}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--bone)!important}
.desktop-nav a.active:after{background:var(--acid)!important}
.menu-button span{background:var(--bone)!important}
.mobile-menu{background:var(--ink)!important;color:var(--bone)!important;border-color:var(--line)!important}

/* Buttons: accent may carry colour, text remains black/white. */
.button{box-shadow:none!important}
.button-acid{background:var(--acid)!important;border-color:var(--acid)!important;color:var(--ink)!important}
.button-acid:hover{background:#CEFF32!important;border-color:#CEFF32!important}
.button-outline{background:transparent!important;border-color:var(--violet)!important;color:inherit!important}
.button-outline:hover{background:var(--violet)!important;color:var(--bone)!important}

/* Hero */
.hero-section{
  background:var(--ink)!important;
  color:var(--bone)!important;
  min-height:760px!important;
  padding:142px 0 82px!important;
  border:0!important;
}
.hero-section:after{height:4px!important;background:linear-gradient(90deg,var(--acid) 0 42%,var(--violet) 42% 100%)!important}
.hero-grid{grid-template-columns:.84fr 1.16fr!important;gap:44px!important;align-items:center!important}
.hero-copy h1{
  color:var(--bone)!important;
  font-size:clamp(38px,3.45vw,60px)!important;
  line-height:.97!important;
  max-width:640px!important;
}
.hero-copy h1 em{
  color:var(--bone)!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
  opacity:.92!important;
}
.hero-copy p{color:var(--body-dim)!important;font-size:17px!important;max-width:540px!important}
.hero-media-wrap{min-height:550px!important;margin-right:-5vw!important}
.hero-film{
  position:absolute!important;
  inset:18px -1vw 8px -72px!important;
  overflow:hidden!important;
  border-radius:28px 0 0 28px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 100%)!important;
}
.hero-film video{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03) brightness(.72)!important}
.hero-film-fade{background:linear-gradient(90deg,var(--ink) 0%,rgba(13,13,13,.52) 17%,transparent 42%)!important}
.floating-card{box-shadow:none!important;border-radius:14px!important}
.floating-direction{background:var(--violet)!important;color:var(--bone)!important;border-color:var(--violet)!important}
.floating-move{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--paper)!important}
.floating-move span{color:var(--ink)!important}
.floating-assets{background:var(--acid)!important;color:var(--ink)!important;border-color:var(--acid)!important}
.direction-icon{border-color:var(--bone)!important;border-right-color:var(--acid)!important;border-bottom-color:transparent!important}

/* Marquee / client proof */
.marquee-section{
  background:var(--bone)!important;
  color:var(--ink)!important;
  border-block:1px solid var(--light-line)!important;
  padding:68px 0 58px!important;
}
.marquee-title p{color:#5F5F66!important}
.marquee-title span{background:var(--violet)!important;opacity:.65}
.marquee-title span:last-child{background:var(--acid)!important;opacity:1}
.logo-window{border-color:var(--light-line)!important;padding:26px 0!important}
.brand-word,.brand-word span,.denos span{color:var(--ink)!important;opacity:.82!important}
.work-window{background:#E7E7EA!important;border-color:var(--light-line)!important;padding:22px 0!important}
.marquee-track-small>span,.marquee-track-small>span:nth-child(3n),.marquee-track-small>span:nth-child(4n){color:#5D5D63!important}

/* Shared light sections */
.section{background:var(--bone)!important;color:var(--ink)!important;border-color:var(--light-line)!important}
.work-section,.audience-section,.testimonials-section{background:var(--bone)!important}
.section-heading h2,.system-copy h2,.ai-copy h2,.engagement-content h2,.testimonial-heading h2,
.case-copy h2,.service-copy h2,.principle h2,.timeline-item h2,.brief-grid h2,
.ai-cap-grid h2,.split-story h2,.ai-showcase-copy h2{color:var(--ink)!important}
.section-heading h2 em,.system-copy h2 em,.ai-copy h2 em,.testimonial-heading h2 em,
.case-copy h2 em,.service-copy h2 em,.split-story h2 em,.ai-showcase-copy h2 em,
.inner-hero h1 em,.contact-hero h1 em,.page-cta h2 em{
  color:inherit!important;background:none!important;-webkit-text-fill-color:initial!important
}
.section-heading p,.system-copy p,.ai-copy p,.engagement-content p,.case-copy p,.service-copy p,
.principle p,.timeline-item p,.brief-grid p,.ai-cap-grid p,.split-story p,.ai-showcase-copy p{color:#5D5D63!important}
.eyebrow{color:inherit!important;display:flex!important;align-items:center!important;gap:10px!important}
.eyebrow:before{content:"";width:24px;height:4px;border-radius:999px;background:var(--acid);display:inline-block;flex:0 0 auto}
.inline-link{color:inherit!important;border-color:var(--violet)!important}

/* Cards */
.audience-card,.testimonial-grid blockquote,.principle,.ai-cap-grid article,.brief-grid article,.timeline-item,.project-form,
.package-cards article,.questions article{
  background:var(--paper)!important;color:var(--ink)!important;border-color:var(--light-line)!important;box-shadow:none!important
}
.audience-card h3,.audience-card a,.testimonial-grid p,.package-cards strong,.questions strong{color:var(--ink)!important}
.audience-card p,.testimonial-grid footer{color:#66666D!important}
.audience-card span,.case-copy>span,.service-copy>span,.principle>span,.timeline-item>span,
.brief-grid article>span,.ai-cap-grid article>span{color:var(--ink)!important}
.audience-card>div,.principle,.ai-cap-grid article,.brief-grid article{position:relative}
.audience-card>div:before,.principle:before,.ai-cap-grid article:before,.brief-grid article:before{
  content:"";position:absolute;left:0;top:0;width:5px;height:56px;background:var(--violet)
}
.audience-card:nth-child(2)>div:before,.principle:nth-child(2n):before,.ai-cap-grid article:nth-child(2n):before,.brief-grid article:nth-child(2n):before{background:var(--acid)}
.audience-card a{border-color:var(--violet)!important}
.visual-card,.system-shot{border-color:rgba(13,13,13,.16)!important;box-shadow:none!important}
.visual-card-copy span{color:rgba(244,244,244,.72)!important}
.visual-card-copy h3{color:var(--bone)!important}
.system-shot figcaption{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--light-line)!important}
.asset-count{background:var(--acid)!important;color:var(--ink)!important}

/* Dark bands */
.production-system,.reel-section,.engagement-section{
  background:var(--surface)!important;color:var(--bone)!important;border-color:var(--line)!important
}
.production-system h2,.reel-title,.engagement-section h2{color:var(--bone)!important}
.production-system h2 em,.reel-title em{color:var(--bone)!important}
.production-system p,.engagement-section p{color:var(--body-dim)!important}
.production-system .inline-link{color:var(--bone)!important;border-color:var(--acid)!important}
.production-system .eyebrow,.reel-section .eyebrow,.engagement-section .eyebrow{color:var(--bone)!important}
.reel-player{background:var(--pitch)!important;border-color:var(--line)!important;box-shadow:none!important}
.reel-meta{color:var(--body-dim)!important}
.engagement-list article{border-color:var(--line)!important}
.engagement-list>article>span{color:var(--bone)!important}
.engagement-list h3{color:var(--bone)!important}
.engagement-badge{background:var(--violet)!important;color:var(--bone)!important;box-shadow:none!important}

/* Stats */
.stats-strip{background:var(--bone)!important;color:var(--ink)!important;border-block:1px solid var(--light-line)!important}
.stats-grid{border-color:var(--light-line)!important}
.stats-grid>div{background:var(--bone)!important;border-color:var(--light-line)!important}
.stats-grid strong,.stats-grid>div:nth-child(2) strong,.stats-grid>div:nth-child(3) strong{color:var(--ink)!important}
.stats-grid span{color:#66666D!important}
.stats-grid>div{position:relative}
.stats-grid>div:after{content:"";position:absolute;left:28px;right:28px;bottom:18px;height:4px;background:var(--violet)}
.stats-grid>div:nth-child(2):after{background:var(--acid)}
.stats-grid>div:nth-child(3):after{background:var(--ink)}

/* AI stays light; colour belongs to graphic framing, never the copy. */
.ai-section{background:#E9E9EB!important;color:var(--ink)!important;border-color:var(--light-line)!important}
.ai-section .eyebrow,.ai-copy h2{color:var(--ink)!important}
.ai-copy p{color:#5D5D63!important}
.ai-section .button-outline{color:var(--ink)!important;border-color:var(--violet)!important}
.ai-gallery figure{background:var(--paper)!important;border-color:var(--light-line)!important;box-shadow:none!important}
.ai-main:after{content:"";position:absolute;inset:auto 0 0;height:8px;background:var(--violet)}
.ai-small-a:after{content:"";position:absolute;inset:auto 0 0;height:8px;background:var(--acid)}

/* Testimonials */
.testimonial-grid blockquote{border-top:6px solid var(--violet)!important}
.testimonial-grid blockquote:nth-child(2){border-top-color:var(--acid)!important}
.testimonial-grid blockquote:nth-child(3){border-top-color:var(--ink)!important}

/* Close / Footer */
.final-cta,.site-footer{background:var(--ink)!important;color:var(--bone)!important;border-color:var(--line)!important}
.final-copy h2,.final-copy h2 em{color:var(--bone)!important}
.final-copy p{color:var(--body-dim)!important}
.final-cta .eyebrow{color:var(--bone)!important}
.site-footer .footer-col a{color:rgba(244,244,244,.72)!important}
.site-footer .footer-col a:hover{color:var(--bone)!important}
.site-footer .footer-col>span,.footer-bottom,.footer-brand p{color:rgba(244,244,244,.46)!important}

/* Inner pages */
.inner-page{background:var(--bone)!important;color:var(--ink)!important}
.inner-hero,.contact-hero{background:var(--ink)!important;color:var(--bone)!important;border-color:var(--line)!important}
.inner-hero h1,.inner-hero h1 em,.contact-hero h1,.contact-hero h1 em{color:var(--bone)!important}
.inner-hero p,.contact-hero p{color:var(--body-dim)!important}
.inner-hero .eyebrow,.contact-hero .eyebrow{color:var(--bone)!important}
.inner-hero-image{background:var(--surface)!important;border-color:var(--line)!important}
.tag-row i,.service-copy li{background:var(--paper)!important;color:#5D5D63!important;border-color:var(--light-line)!important}
.split-story,.ai-showcase{background:#E9E9EB!important;color:var(--ink)!important;border-color:var(--light-line)!important}
.page-cta{background:var(--surface)!important;color:var(--bone)!important;border-color:var(--line)!important}
.page-cta h2,.page-cta h2 em{color:var(--bone)!important}
.page-cta .button-acid{background:var(--acid)!important;border-color:var(--acid)!important;color:var(--ink)!important}
.contact-hero .project-form{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--light-line)!important}
.project-form label{color:#66666D!important}
.project-form input,.project-form textarea{background:#FFFFFF!important;color:var(--ink)!important;border-color:var(--light-line)!important}
.project-form input:focus,.project-form textarea:focus{border-color:var(--violet)!important}
.mail-link{color:var(--bone)!important;text-decoration:underline;text-decoration-color:var(--acid);text-decoration-thickness:3px;text-underline-offset:7px}
.timeline-item>span{border-color:var(--violet)!important;background:transparent!important}

/* Remove any remaining coloured text from utility classes. */
.hero-copy,.section-heading,.system-copy,.ai-copy,.engagement-content,.testimonial-heading,.final-copy,
.case-copy,.service-copy,.principle,.timeline-item,.brief-grid,.ai-cap-grid,.split-story,.ai-showcase-copy{
  --text-accent:currentColor;
}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr!important;gap:34px!important}
  .hero-media-wrap{margin-right:0!important;min-height:510px!important}
  .hero-film{inset:10px 0!important;border-radius:24px!important;-webkit-mask-image:none!important;mask-image:none!important}
  .hero-film-fade{background:linear-gradient(0deg,rgba(13,13,13,.16),transparent 44%)!important}
}
@media(max-width:700px){
  .hero-section{padding:116px 0 62px!important;min-height:auto!important}
  .hero-copy h1{font-size:clamp(34px,10vw,46px)!important}
  .hero-media-wrap{min-height:380px!important}
  .marquee-section{padding:54px 0 48px!important}
}


/* 2026-07-31 homepage refinements */
.hero-media-wrap .floating-card{display:none!important}
.production-video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.production-video-tile{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:20px;background:#111;border:1px solid rgba(13,13,13,.14)}
.production-video-tile video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){.production-video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.production-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.production-video-tile{border-radius:14px}}

/* Click-to-view production grid */
.production-video-tile{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  color:inherit;
  appearance:none;
  text-align:initial;
  cursor:pointer;
  --play-x:50%;
  --play-y:50%;
}
.production-video-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  transition:background .28s ease;
  pointer-events:none;
}
.production-play-cursor{
  position:absolute;
  left:var(--play-x);
  top:var(--play-y);
  z-index:3;
  width:64px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
  transform:translate(-50%,-50%) scale(.72);
  opacity:0;
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.production-play-icon{font-size:16px;line-height:1;transform:translateX(1px)}
.production-video-tile:hover::after,.production-video-tile:focus-visible::after{background:rgba(0,0,0,.12)}
.production-video-tile:hover .production-play-cursor,.production-video-tile:focus-visible .production-play-cursor{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.production-video-tile:focus-visible{outline:3px solid #BFFF00;outline-offset:4px}

/* The clicked video occupies the full browser viewport. */
.video-modal{padding:0!important;background:rgba(0,0,0,.97)!important}
.video-modal-inner{
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  border:0!important;
  border-radius:0!important;
  display:grid;
  place-items:center;
  background:#000!important;
}
.video-modal video{width:100%!important;height:100%!important;object-fit:contain;background:#000}
.modal-close{position:fixed!important;right:22px!important;top:20px!important;z-index:5!important;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.34)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

@media(hover:none){
  .production-play-cursor{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(.88);width:54px;height:46px;border-radius:14px}
}

/* Custom full-screen video controls */
.video-modal{cursor:none}
.video-modal.controls-visible{cursor:default}
.video-modal-inner{position:relative;overflow:hidden}
.video-modal video{cursor:pointer}
.glass-control{
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.3)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.15)!important;
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
.video-player-controls{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:6;
  width:min(760px,calc(100vw - 36px));
  padding:14px 16px 12px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  background:rgba(20,20,20,.42);
  box-shadow:0 20px 55px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  opacity:0;
  transform:translate(-50%,18px);
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.video-modal.controls-visible .video-player-controls{
  opacity:1;
  transform:translate(-50%,0);
  pointer-events:auto;
}
.video-modal .modal-close{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.video-modal.controls-visible .modal-close{opacity:1;transform:translateY(0);pointer-events:auto}
.video-progress-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.video-time{min-width:38px;color:#fff;font-size:12px;font-variant-numeric:tabular-nums;opacity:.82}
.video-duration{text-align:right}
.video-progress{
  --progress:0%;
  width:100%;
  height:18px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.video-progress::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(to right,#fff 0,#fff var(--progress),rgba(255,255,255,.28) var(--progress),rgba(255,255,255,.28) 100%);
}
.video-progress::-webkit-slider-thumb{
  width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.4);-webkit-appearance:none;appearance:none;
}
.video-progress::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.28)}
.video-progress::-moz-range-progress{height:4px;border-radius:999px;background:#fff}
.video-progress::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.video-control-buttons{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:9px}
.video-control-buttons .glass-control{
  position:static!important;
  width:46px;height:42px;border-radius:14px;font-size:25px;line-height:1;
  display:grid;place-items:center;padding:0;cursor:pointer;
  transition:transform .18s ease,background .18s ease!important;
}
.video-control-buttons .glass-control:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)!important}
.video-control-buttons .video-toggle-play{width:56px;height:48px;border-radius:16px;font-size:17px}
.video-control-buttons .video-toggle-play span{display:block;transform:translateX(1px)}
@media(max-width:640px){
  .video-player-controls{bottom:12px;width:calc(100vw - 20px);padding:12px 12px 10px;border-radius:18px}
  .video-progress-row{gap:8px}.video-time{font-size:11px;min-width:34px}
  .modal-close{right:12px!important;top:12px!important}
}

/* 2026-07-31 editable marquees + premium scroll reveals */
.brand-logo-track{align-items:center;gap:clamp(42px,6vw,92px)}
.brand-logo-item{flex:0 0 auto;width:clamp(150px,14vw,210px);height:74px;display:grid;place-items:center;padding:8px 14px}
.brand-logo-item img{display:block;max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:opacity .25s ease,filter .25s ease}
.brand-logo-item:hover img{filter:grayscale(0);opacity:1}
.marquee-track-small{will-change:transform}
.brand-logo-track{will-change:transform}

/* Sections arrive as if the composition is resolving into focus. The asymmetric
   clip and contrast change keep this from reading like a stock fade-up. */
.section-reveal{
  opacity:.18;
  filter:blur(15px) saturate(.72) contrast(.9);
  transform:scale(.982) translate3d(0,18px,0);
  clip-path:inset(2.5% 1.5% 5% 1.5% round 24px);
  transform-origin:50% 20%;
  transition:
    opacity .82s cubic-bezier(.2,.72,.18,1),
    filter .98s cubic-bezier(.2,.72,.18,1),
    transform .98s cubic-bezier(.2,.72,.18,1),
    clip-path 1.05s cubic-bezier(.2,.72,.18,1);
  will-change:opacity,filter,transform,clip-path;
}
.section-reveal.visible{
  opacity:1;
  filter:blur(0) saturate(1) contrast(1);
  transform:scale(1) translate3d(0,0,0);
  clip-path:inset(0 0 0 0 round 0);
}

/* Element-level reveals sharpen in staggered groups inside each section. */
.reveal{
  opacity:0;
  filter:blur(11px);
  transform:translate3d(0,22px,0) scale(.99);
  transition:
    opacity .72s cubic-bezier(.2,.72,.18,1),
    filter .86s cubic-bezier(.2,.72,.18,1),
    transform .86s cubic-bezier(.2,.72,.18,1);
  transition-delay:calc(var(--reveal-order,0) * 55ms);
  will-change:opacity,filter,transform;
}
.reveal.visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1)}
.hero-section .reveal{opacity:1;filter:none;transform:none}
.marquee-section.section-reveal{transform:scale(.992);clip-path:inset(0 0 0 0)}

@media(max-width:700px){
  .brand-logo-item{width:132px;height:58px;padding:6px 10px}
  .brand-logo-item img{max-height:42px}
  .section-reveal{filter:blur(10px) saturate(.78);transform:scale(.99) translate3d(0,12px,0)}
}

@media(prefers-reduced-motion:reduce){
  .section-reveal,.section-reveal.visible,.reveal,.reveal.visible{
    opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important;transition:none!important
  }
}