/*
Theme Name: ZLF Productions
Theme URI: https://zlfproductions.com
Author: ZLF Productions
Description: Custom theme for ZLF Productions — video & audio production company.
Version: 1.1
Text Domain: zlf-productions
*/

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;max-width:100%}
body{background:#0a0a0a;font-family:Manrope,sans-serif;color:#f5f5f0}
a{color:inherit;text-decoration:none}
a:hover{color:#19ad21}
img{max-width:100%;display:block}

/* Page shell: the green corner glow behind everything */
.zlf-page{background:radial-gradient(1500px 1100px at 0% 0%,rgba(25,173,33,.52),transparent 65%),radial-gradient(750px 550px at 100% 0%,rgba(25,173,33,.22),transparent 58%),linear-gradient(180deg,#0a0a0a 0%,#050505 50%,#0a0a0a 100%);color:#f5f5f0;position:relative}

/* Wide screens: content stays centred instead of hugging the left edge.
   Full-bleed pieces (hero, filmstrips) are deliberately excluded. */
.zlf-page-head,.zlf-founder,.zlf-mission-wrap,.zlf-testimonials-wrap,.zlf-awards-wrap,.zlf-logogrid,
.zlf-tabbar,.zlf-work-head,.zlf-final-cta,.zlf-footer,.zlf-section-pad,.zlf-tabpane > div{
  max-width:1560px;margin-left:auto;margin-right:auto}

.ph{display:flex;align-items:center;justify-content:center;text-align:center;font:600 12px/1.4 "JetBrains Mono",monospace;letter-spacing:.03em}
.zlf-scroller{scrollbar-width:none}
.zlf-scroller::-webkit-scrollbar{display:none}

/* Filmstrip */
.zlf-film-wrap{background:linear-gradient(180deg,#f3ede1,#ece6da);border-top:2px solid #0a0a0a;border-bottom:2px solid #0a0a0a;padding:10px 0;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.zlf-film-perf-track{overflow:hidden}
.zlf-film-perf-row{display:flex;gap:20px;padding-left:10px;width:max-content}
.zlf-film-perf-hole{width:10px;height:14px;border-radius:3px;background:#161310;flex:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.15)}
.zlf-film-rule{height:1px;background:rgba(0,0,0,.15);margin:10px 0}

/* Header */
.zlf-header{display:flex;align-items:center;justify-content:space-between;padding:16px 56px;position:absolute;top:0;left:0;right:0;z-index:3;gap:16px}
.zlf-navlinks{display:flex;gap:36px;font:600 12px/1 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#cfcfc7}
.zlf-navlinks a{text-decoration:none}
.zlf-navlinks ul{display:flex;gap:36px;list-style:none;margin:0;padding:0}
.zlf-navlinks li{list-style:none}
.zlf-headright{display:flex;align-items:center;gap:20px}
.zlf-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;width:26px;height:26px;flex:none}
.zlf-hamburger span{height:2px;background:#f5f5f0;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.zlf-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.zlf-hamburger.open span:nth-child(2){opacity:0}
.zlf-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.zlf-mobile-nav{animation:zlf-menu-in .28s ease}
.zlf-mobile-nav a{opacity:0;font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:.01em;color:#f5f5f0;text-decoration:none;animation:zlf-menu-link-in .45s ease forwards}
.zlf-mobile-nav ul{display:flex;flex-direction:column;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.zlf-mobile-nav li{list-style:none}
@keyframes zlf-menu-in{from{opacity:0}to{opacity:1}}
@keyframes zlf-menu-link-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Hero */
.zlf-hero{position:relative;margin:0;height:740px;overflow:hidden}
.zlf-hero-bottom{position:absolute;left:48px;bottom:24px;right:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;z-index:3}
.zlf-hero-title{font-family:'Bebas Neue',sans-serif;font-size:88px;line-height:.9;color:#f5f5f0;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.zlf-hero-caption{position:absolute;left:48px;right:48px;bottom:0;padding:14px 0;font:700 13px/1 'JetBrains Mono',monospace;color:#cfcfc7;letter-spacing:.1em;z-index:3;pointer-events:none}

/* Work / reel */
.zlf-work-head{padding:64px 56px 24px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.zlf-work-desc{font:500 13px/1.4 Manrope,sans-serif;color:#7a7a70;max-width:260px;text-align:right}
.zlf-thumb{flex:none;width:340px;aspect-ratio:16/9;border-radius:8px;position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,#161616,#161616 16px,#0f0f0f 16px,#0f0f0f 32px);color:#4a4a44;cursor:pointer}
.zlf-logo-tile{width:auto;height:100px;display:flex;align-items:center;justify-content:center;flex:none;padding:0 4px;transition:opacity .18s ease,filter .18s ease,transform .18s ease;user-select:none;opacity:.6;filter:grayscale(1)}
.zlf-logo-tile:hover{opacity:1;filter:grayscale(0);transform:scale(1.06)}
.zlf-logo-tile img{width:auto !important;height:auto !important;max-width:none;max-height:64px;object-fit:contain;pointer-events:none;user-select:none}

/* Founder */
.zlf-founder{display:grid;grid-template-columns:300px minmax(0,1fr) auto;gap:48px;padding:24px 56px 70px;align-items:center}
.zlf-founder-stats{display:flex;flex-direction:column;gap:26px;padding-left:24px;border-left:1px solid rgba(255,255,255,.1)}
/* About page: portrait + copy, no stats column */
.zlf-founder--about{grid-template-columns:380px minmax(0,1fr);gap:56px;padding:64px 56px}
@media (max-width:1100px){
  .zlf-founder{grid-template-columns:260px minmax(0,1fr)}
  .zlf-founder-stats{grid-column:1/-1;flex-direction:row;gap:40px;padding-left:0;border-left:0;flex-wrap:wrap}
}

/* Mission + waves */
.zlf-mission-wrap{position:relative;padding:48px 56px;overflow:hidden;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.zlf-mission-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:3px;opacity:.5;pointer-events:none;transition:opacity .3s ease,transform .25s ease}
.zlf-mission-wave-bar{width:100%;border-radius:3px;background:linear-gradient(180deg,#19ad21,rgba(25,173,33,.1));flex:1;transform-origin:center;animation:zlf-mission-wave-anim 2.2s ease-in-out infinite}
@keyframes zlf-mission-wave-anim{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.zlf-mission-text{position:relative;text-align:center;font:600 20px/1.65 Manrope,sans-serif;color:#f7f7f2;max-width:720px;margin:0 auto;letter-spacing:.005em;text-shadow:0 2px 24px rgba(0,0,0,.85),0 0 40px rgba(0,0,0,.6)}

/* Radio bar */
.zlf-radio-bar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:2}
.zlf-radio-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;position:relative;width:100%;max-width:520px}
.zlf-onair-sign{font:800 10px/1 'JetBrains Mono',monospace;letter-spacing:.12em;padding:5px 10px;border-radius:3px;border:1px solid rgba(255,255,255,.15);color:#4a4a44;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease;flex:none;justify-self:start}
.zlf-onair-sign.live{color:#ff4d4d;border-color:#ff4d4d;box-shadow:0 0 10px rgba(255,77,77,.6),0 0 22px rgba(255,77,77,.3)}
.zlf-radio-btn{width:30px;height:30px;border-radius:50%;background:#19ad21;color:#0a0a0a;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;font-size:11px;border:0}
.zlf-radio-text{position:relative;font:600 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.03em;color:#9a9a90;width:200px;display:block;height:34px;text-align:left}
.zlf-radio-text b{color:#19ad21;font-weight:600;display:block;font-size:13px}
.zlf-radio-text span{display:block;font-size:10px;color:#6a6a62;margin-top:2px}
.zlf-radio-text.playing b{color:#eafbe8}
.zlf-radio-text.playing span{color:#19ad21;font-weight:600}
.zlf-vol-btn{color:#9a9a90;display:flex;align-items:center;gap:6px;flex:none;justify-self:end}
.zlf-vol-btn input[type=range]{width:70px;-webkit-appearance:none;appearance:none;height:2px;border-radius:1px;background:rgba(255,255,255,.25);outline:none;cursor:pointer}
.zlf-vol-btn input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#d8d8d2;cursor:pointer}
.zlf-vol-btn input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#d8d8d2;border:none;cursor:pointer}

/* Sections */
.zlf-final-cta{background:#19ad21;padding:70px 56px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.zlf-final-title{font-family:'Bebas Neue',sans-serif;font-size:44px;color:#0a0a0a}
.zlf-footer{display:flex;justify-content:space-between;align-items:center;padding:32px 56px;color:#7a7a70;font:500 13px/1.5 Manrope,sans-serif;gap:12px}
.zlf-awards-wrap{padding:0 56px 96px}
.zlf-testimonials-wrap{padding:0 56px 96px}
.zlf-testi-card{padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
/* Reviews rail: same drag-to-scroll behaviour as the filmstrips */
.zlf-testi-viewport{overflow:hidden}
.zlf-testi-track{display:flex;gap:32px;width:max-content;cursor:grab}
.zlf-testi-track.dragging{cursor:grabbing}
.zlf-testi-track .zlf-testi-card{width:420px;flex:none;user-select:none}
@media (max-width:640px){.zlf-testi-track .zlf-testi-card{width:78vw}}
.zlf-award-row{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:baseline;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer}

/* Interior pages have no hero behind the absolute header, so clear it */
body:not(.home) .zlf-page{padding-top:132px}

/* Work page grid cards */
.zlf-reel-card{width:100%;aspect-ratio:16/9;border-radius:8px;position:relative;overflow:hidden;cursor:pointer;background-size:cover;background-position:center}
.zlf-reel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 50%,rgba(0,0,0,.75) 100%)}
.zlf-reel-label{position:absolute;left:16px;bottom:14px;font:700 12px/1 'JetBrains Mono',monospace;color:#19ad21;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.zlf-play-btn{position:absolute;right:16px;bottom:14px;width:44px;height:44px;border-radius:50%;background:rgba(25,173,33,.9);display:flex;align-items:center;justify-content:center;color:#0a0a0a;font-size:14px;z-index:1}

/* Video lightbox */
.zlf-video-modal{display:none;position:fixed;inset:0;background:rgba(10,10,10,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:100;align-items:center;justify-content:center;padding:32px}
.zlf-video-modal-inner{width:100%;max-width:1400px;aspect-ratio:16/9;position:relative}
.zlf-video-modal-inner iframe{width:100%;height:100%;border:0;border-radius:10px}
.zlf-video-close{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;background:#19ad21;color:#0a0a0a;display:flex;align-items:center;justify-content:center;cursor:pointer;font:700 16px/1 Manrope,sans-serif}

/* Logo grid (About page) */
.zlf-logogrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:0 56px 96px}
.zlf-logogrid > div{background:#f3ede1;border-radius:6px;height:88px;display:flex;align-items:center;justify-content:center;padding:16px}
.zlf-logogrid img{width:auto !important;height:auto !important;max-width:100%;max-height:44px;object-fit:contain;opacity:1;transition:filter .2s ease,opacity .2s ease,transform .2s ease}
.zlf-logogrid img:hover{transform:scale(1.06)}

/* Website case studies: two across so a full screenshot is readable */
.zlf-site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.zlf-site-grid{grid-template-columns:minmax(0,1fr) !important}}

/* Work page video grid: three across, two on tablets, one on phones */
.zlf-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.zlf-work-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:640px){.zlf-work-grid{grid-template-columns:minmax(0,1fr) !important;padding:24px 20px 56px !important}}

/* Work page tabs */
.zlf-tabbar{display:flex;justify-content:center;gap:10px;padding:36px 20px 0;flex-wrap:wrap}
.zlf-tab{font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#cfcfc7;background:#131313;border:1px solid rgba(255,255,255,.14);padding:11px 26px;border-radius:999px;cursor:pointer}
.zlf-tab.active{background:#19ad21;color:#0a0a0a;border-color:#19ad21}
.zlf-tabpane{display:none}
.zlf-tabpane.active{display:block}

/* Audio tab wave banner */
.zlf-audio-wave-wrap{position:relative;height:150px;margin:8px 56px 0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.zlf-audio-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:3px;opacity:.5;pointer-events:none}
.zlf-audio-wave-label{position:relative;font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:#f5f5f0;text-shadow:0 2px 20px rgba(0,0,0,.9)}
@media (max-width:640px){.zlf-audio-wave-wrap{height:110px;margin:8px 20px 0}}

/* Audio players */
.zlf-track-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.zlf-track-btn{width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:#19ad21}
.zlf-track-btn.playing{background:#19ad21;border-color:#19ad21;color:#0a0a0a}
.zlf-track-bar{position:relative;height:4px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer}
.zlf-track-bar-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:#19ad21;border-radius:2px}
.zlf-track-vol{align-items:center;justify-self:start;flex:none}
.zlf-track-vol input[type=range]{width:80px}

/* Before/after slider */
.zlf-compare{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1);cursor:ew-resize;background:#0f0f0f;touch-action:none;user-select:none}
/* Whole screenshot stays visible — nothing is cropped out of the comparison */
.zlf-compare img{position:absolute;inset:0;pointer-events:none;user-select:none;width:100%;height:100%;object-fit:contain;object-position:center}
.zlf-compare-label{position:absolute;bottom:10px;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:#f5f5f0;background:rgba(10,10,10,.72);padding:5px 8px;border-radius:3px;pointer-events:none}
.zlf-compare-after-wrap{position:absolute;inset:0;overflow:hidden}
.zlf-compare-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#19ad21;pointer-events:none;box-shadow:0 0 12px rgba(25,173,33,.7)}
/* Grip in the middle of the divider so it reads as draggable at a glance */
.zlf-compare-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#19ad21;color:#0a0a0a;display:flex;align-items:center;justify-content:center;gap:2px;pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.55);transition:transform .15s ease}
.zlf-compare:hover .zlf-compare-grip{transform:translate(-50%,-50%) scale(1.08)}
.zlf-compare-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:#f5f5f0;background:rgba(10,10,10,.72);padding:5px 9px;border-radius:3px;pointer-events:none;transition:opacity .2s ease}
.zlf-compare.is-dragged .zlf-compare-hint{opacity:0}

/* Services cards */
.zlf-svc-grid{display:flex;flex-wrap:wrap;gap:20px;padding:8px 56px 80px}
.zlf-svc-box{background:#131313;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .18s ease,transform .18s ease;flex:1 1 calc(33.333% - 14px);min-width:260px}
.zlf-svc-box:hover{transform:translateY(-2px);border-color:rgba(25,173,33,.5)}

.zlf-dragscroll{cursor:grab;touch-action:pan-y}
.zlf-dragscroll.dragging{cursor:grabbing}

@media (max-width:900px){
  .zlf-header{padding:14px 20px;flex-wrap:wrap}
  .zlf-navlinks{display:none}
  .zlf-headright{gap:12px}
  .zlf-hamburger{display:flex}
  .zlf-headright > div:first-child{display:none}
  .zlf-hero{margin:0;height:auto;aspect-ratio:16/15;min-height:0}
  .zlf-hero iframe, .zlf-hero video{width:100% !important;height:100% !important;min-width:0 !important;min-height:0 !important;top:0 !important;left:0 !important;transform:none !important;object-fit:cover}
  .zlf-film-wrap{padding:6px 0}
  .zlf-film-perf-row{gap:10px}
  .zlf-film-perf-hole{width:6px;height:9px;border-radius:2px}
  .zlf-logo-tile{height:76px !important}
  .zlf-logo-tile img{max-height:48px !important}
  .zlf-hero-bottom{left:16px;bottom:14px;right:16px;flex-direction:column;align-items:flex-start;gap:10px}
  .zlf-hero-caption{display:none}
  .zlf-hero-title{font-size:24px}
  .zlf-work-head{padding:40px 20px 16px;flex-direction:column;align-items:flex-start;gap:10px}
  .zlf-work-desc{text-align:left;max-width:none}
  .zlf-reel-pad{padding:0 20px 24px !important}
  .zlf-thumb{width:52vw;aspect-ratio:16/9}
  .zlf-mission-text{font-size:16px;line-height:1.5}
  .zlf-mission-wrap{flex-direction:column;gap:18px;padding:40px 20px}
  .zlf-founder{display:block;padding:48px 20px;text-align:left}
  .zlf-founder--about{display:block;padding:40px 20px}
  /* The pair of About photos: shorter on phones so they don't dominate the page */
  .zlf-about-photo{height:190px !important}
  .zlf-founder-stats{display:flex;flex-direction:row;gap:28px;flex-wrap:wrap;margin-top:24px;padding-left:0;border-left:0;clear:both}
  /* Copy wraps around the portrait instead of sitting under it */
  .zlf-founder > div:first-child{float:left;height:auto !important;width:150px;aspect-ratio:1/1;margin:0 16px 10px 0;shape-margin:12px}
  .zlf-founder > div:first-child img{width:100%;height:100%;object-fit:cover}
  /* Full portrait, nothing cropped: the box follows the photo's own proportions */
  .page-template-page-about .zlf-founder > div:first-child,
  .page-template-page-about-php .zlf-founder > div:first-child{width:44%;max-width:230px;aspect-ratio:auto;height:auto !important}
  .page-template-page-about .zlf-founder > div:first-child img,
  .page-template-page-about-php .zlf-founder > div:first-child img{height:auto;object-fit:contain}
  .zlf-founder p{margin:0 0 12px}
  .zlf-founder p:last-child{margin-bottom:0}
  .zlf-founder div[style*="gap:40px"], .zlf-founder div[style*="gap: 40px"]{gap:24px;flex-wrap:wrap}
  .zlf-awards-wrap{padding:0 20px 64px}
  .zlf-testimonials-wrap{padding:0 20px 64px}
  .zlf-testi-grid{grid-template-columns:1fr !important;gap:32px}
  .zlf-final-cta{padding:40px 20px;flex-direction:column;align-items:center;text-align:center}
  .zlf-final-title{font-size:32px}
  .zlf-footer{padding:28px 20px 32px;flex-direction:column;align-items:center;gap:16px;font-size:12px;line-height:1.6}
  .zlf-logogrid{grid-template-columns:repeat(3,1fr) !important;padding:0 20px 56px !important}
  .zlf-page-title{font-size:36px !important}
  .zlf-page-head{padding:40px 20px 16px !important}
  .zlf-section-pad{padding-left:20px !important;padding-right:20px !important}
  .zlf-tabbar{padding:24px 20px 0 !important}
  .zlf-compare{aspect-ratio:16/9}
  .zlf-svc-grid{padding:8px 20px 56px;gap:16px}
  .zlf-svc-box{flex-basis:100%}
  body:not(.home) .zlf-page{padding-top:92px}
}
@media (max-width:480px){
  img[alt="ZLF Productions"]{height:44px !important}
  .zlf-hero-title{font-size:34px}
  .zlf-thumb{width:56vw}
  .zlf-award-row{gap:12px !important}
}

/* Awards page sort toggle */
.zlf-sort-btn{font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;padding:9px 18px;border-radius:999px;cursor:pointer;border:1px solid rgba(255,255,255,.15);color:#cfcfc7;user-select:none}
.zlf-sort-btn.active{background:#19ad21;color:#0a0a0a;border-color:#19ad21}