/*
Theme Name: Musify Media Entertainment
Theme URI: https://musifyentertainment.com/
Author: Musify Media Entertainment
Author URI: https://musifyentertainment.com/
Description: Custom responsive WordPress theme for Musify Media Entertainment with a cinematic video carousel, portfolio, team, blog, contact form, and social media rail.
Version: 1.0.25
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: musify
*/

:root{--ink:#101010;--paper:#eeeae2;--red:#e7352b;--line:rgba(16,16,16,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}button,input{font:inherit}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.nav{height:100px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:absolute;top:0;left:0;z-index:10;width:100%;color:white;background:#111;border-bottom:1px solid rgba(255,255,255,.35)}
.brand{font-weight:900;font-size:26px;letter-spacing:-2px;line-height:.75}.brand span{color:var(--red)}.brand small{display:block;font-size:7px;letter-spacing:3.5px;margin:8px 0 0 2px}.nav nav{display:flex;gap:38px;text-transform:uppercase;font-size:11px;letter-spacing:2px}.nav nav a,.contact{transition:color .2s}.nav nav a:hover,.contact:hover{color:var(--red)}.contact{justify-self:end;text-transform:uppercase;font-size:11px;letter-spacing:2px}.contact span{font-size:18px;margin-left:12px}
.hero{width:100%;height:auto;min-height:0;aspect-ratio:16/9;margin-top:100px;position:relative;color:#fff;overflow:hidden;background:#090909}.heroVideo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;filter:none}.heroShade{display:none;position:absolute;inset:0}.eyebrow{display:none;position:absolute;top:45px;left:4vw;font-size:10px;text-transform:uppercase;letter-spacing:2.5px}.heroCopy{display:none;position:absolute;left:4vw;bottom:15%}.kicker{font-family:Georgia,serif;font-style:italic;font-size:20px}.hero h1{font-size:clamp(76px,11vw,176px);text-transform:uppercase;letter-spacing:-.075em;line-height:.73;margin:26px 0 0;font-weight:900}.hero h1 em,.manifesto h2 em,.services h2 em{font-family:Georgia,serif;text-transform:none;font-weight:400}.heroFoot{display:none;position:absolute;left:4vw;right:4vw;bottom:30px;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:9px;letter-spacing:2px}.disc{border:1px solid rgba(255,255,255,.6);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:17px}
.videoPicker{background:#111;color:#eee;padding:34px 4vw 52px;border-top:1px solid #393939;display:grid;grid-template-columns:180px 1fr;gap:4vw}.videoPickerIntro>span{text-transform:uppercase;font-size:9px;letter-spacing:2.5px;color:#777}.videoPickerIntro p{font-family:Georgia,serif;font-size:15px;line-height:1.45;color:#aaa;margin:14px 0 0}.videoThumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.videoThumb{appearance:none;border:0;border-top:1px solid #444;background:transparent;color:inherit;text-align:left;padding:14px 0 0;cursor:pointer;transition:border-color .2s,transform .2s}.videoThumb:hover,.videoThumb.active{border-color:var(--red);transform:translateY(-2px)}.thumbMedia{display:block;position:relative;aspect-ratio:16/9;background:#050505;overflow:hidden}.thumbMedia video{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:opacity .2s,transform .3s}.videoThumb:hover video,.videoThumb.active video{opacity:1;transform:scale(1.025)}.thumbMedia i{position:absolute;left:10px;bottom:9px;background:rgba(0,0,0,.72);padding:5px 7px;font-style:normal;font-size:7px;letter-spacing:1.5px}.videoThumb.active .thumbMedia i{background:var(--red)}.thumbCopy{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px;gap:10px}.thumbCopy b{font-size:12px;text-transform:uppercase;letter-spacing:1.4px}.thumbCopy small{font-family:Georgia,serif;font-style:italic;color:#777;font-size:11px}
.sectionTag{text-transform:uppercase;font-size:10px;letter-spacing:3px;margin:0}.manifesto{padding:130px 7vw 150px}.manifesto h2,.services>h2{font-size:clamp(26px,3.5vw,55px);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;margin:60px 0 80px}.manifestoGrid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding-left:35%}.manifestoGrid p{font-family:Georgia,serif;font-size:21px;line-height:1.6;margin:0}.manifestoGrid a{align-self:end;text-transform:uppercase;font-size:11px;letter-spacing:2px;border-bottom:1px solid;padding-bottom:14px}.manifestoGrid a span{float:right;font-size:18px}
.feature{min-height:820px;background:#171717;color:white;display:grid;grid-template-columns:58% 42%}.featureImage{position:relative;overflow:hidden}.featureImage:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 50%)}.imageNumber{position:absolute;bottom:35px;left:35px;z-index:1;font-size:10px;letter-spacing:2px}.featureCopy{padding:90px 6vw;display:flex;flex-direction:column}.featureCopy h3{font-size:clamp(72px,8vw,126px);line-height:.78;letter-spacing:-.07em;margin:110px 0 50px}.featureCopy>p:not(.sectionTag){max-width:440px;color:#bbb;line-height:1.6;font-family:Georgia,serif;font-size:18px}.listen{margin-top:30px;text-transform:uppercase;font-size:10px;letter-spacing:2px;border-bottom:1px solid #555;padding:0 0 15px;max-width:210px}.listen span{float:right;font-size:17px}.pager{margin-top:auto;display:flex;gap:12px}.pager button{border:1px solid #555;background:transparent;color:#fff;width:50px;height:50px;cursor:pointer}.pager button:hover{background:var(--red);border-color:var(--red)}
.services{padding:130px 7vw}.services>h2{margin-bottom:110px}.serviceList{border-top:1px solid var(--line)}.serviceList article{display:grid;grid-template-columns:120px 1.2fr 1fr 40px;gap:30px;align-items:center;border-bottom:1px solid var(--line);padding:42px 0}.serviceThumb{width:104px;height:64px;object-fit:cover}.serviceList h3{font-size:30px;margin:0;letter-spacing:-1.5px}.serviceList p{font-family:Georgia,serif;line-height:1.55;color:#555;max-width:440px}.serviceList b{font-size:22px;font-weight:400}
.sound{height:720px;position:relative;color:white;padding:70px 7vw;overflow:hidden}.sound>img{position:absolute;inset:0;filter:grayscale(1) contrast(1.2)}.soundShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.2)),linear-gradient(0deg,rgba(190,28,20,.45),transparent)}.sound .sectionTag,.track,.wave{position:relative}.track{display:flex;align-items:center;gap:40px;margin-top:170px}.track button{width:86px;height:86px;border-radius:50%;background:var(--red);border:0;color:white;cursor:pointer;font-size:22px;padding-left:7px}.track span{font-size:9px;letter-spacing:2px}.track h2{font-size:clamp(64px,8vw,120px);letter-spacing:-.06em;margin:8px 0 0;line-height:.9}.track p{font-family:Georgia,serif;font-style:italic}.wave{position:absolute;right:7vw;bottom:85px;letter-spacing:5px;font-size:20px;color:rgba(255,255,255,.7)}
footer{background:#111;color:#eee;border-top:1px solid var(--line);padding:100px 7vw 35px;display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:7vw}.footerBrand{display:inline-block}.footerBrand+p{font-family:Georgia,serif;color:#999;font-size:17px;line-height:1.5;margin-top:45px}.footerLinks{display:grid;grid-template-columns:1fr 1fr;gap:40px}.footerLinks div{display:flex;flex-direction:column;gap:18px}.footerLinks span,.newsletter>span{color:#777;text-transform:uppercase;font-size:9px;letter-spacing:2px;margin-bottom:12px}.footerLinks a{font-size:13px}.newsletter form{margin-top:35px;border-bottom:1px solid #555;display:flex}.newsletter input{background:transparent;border:0;outline:0;color:white;width:100%;padding:14px 0;font-size:10px;letter-spacing:2px}.newsletter button{border:0;background:transparent;color:white;font-size:20px}.legal{grid-column:1/-1;border-top:1px solid #333;padding-top:30px;margin-top:50px;display:flex;justify-content:space-between;color:#666;text-transform:uppercase;font-size:8px;letter-spacing:1.5px}
@media(max-width:800px){.nav{height:64px;grid-template-columns:1fr auto;padding:0 4vw}.nav nav{display:none}.brand{font-size:20px}.contact{font-size:8px}.hero{aspect-ratio:16/9;margin-top:64px}.heroCopy,.eyebrow,.heroFoot{display:none}.heroShade{background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 40%)}.videoPicker{grid-template-columns:1fr;padding:24px 4vw 34px;gap:20px}.videoPickerIntro p{display:none}.videoThumbs{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x mandatory}.videoThumb{min-width:72vw;scroll-snap-align:start}.thumbCopy{align-items:flex-start;flex-direction:column;gap:5px}.manifesto{padding:90px 6vw}.manifesto h2,.services>h2{margin:45px 0 60px}.manifestoGrid{grid-template-columns:1fr;padding-left:0}.feature{grid-template-columns:1fr}.featureImage{height:65vh;min-height:520px}.featureCopy{min-height:650px;padding:70px 6vw}.featureCopy h3{margin:90px 0 40px}.services{padding:90px 6vw}.serviceList article{grid-template-columns:45px 1fr 25px;padding:30px 0}.serviceList article p{grid-column:2/3}.serviceList article b{grid-column:3;grid-row:1}.sound{height:650px;padding:60px 6vw}.track{margin-top:150px;gap:22px}.track button{width:64px;height:64px}.wave{left:6vw;right:auto;bottom:55px;font-size:14px;letter-spacing:3px}footer{grid-template-columns:1fr;padding:80px 6vw 30px}.legal{flex-direction:column;gap:15px}}

/* Official Musify logo artwork */
.brand{display:block;width:210px;line-height:0;background:transparent;font-size:0;letter-spacing:0}
.brand img{display:block;width:100%;height:auto;object-fit:contain}
.footerBrand{display:block;width:min(100%,310px)}
@media(max-width:800px){.brand{width:145px}.footerBrand{width:min(100%,280px)}}

/* Warm beige background system */
.nav,.videoPicker,.feature,.services,footer{background:var(--paper);color:var(--ink)}
.nav{border-bottom-color:var(--line)}
.nav nav a:hover,.contact:hover{color:var(--red)}
.videoPicker{border-top-color:var(--line)}
.videoPickerIntro>span,.videoPickerIntro p,.thumbCopy small{color:#6f6a62}
.videoThumb{border-top-color:var(--line)}
.thumbMedia{background:#d7d0c5}
.featureCopy>p:not(.sectionTag){color:#555049}
.listen{border-bottom-color:var(--line)}
.pager button{border-color:var(--line);color:var(--ink)}
.pager button:hover{color:#fff}
footer .footerBrand+p{color:#6f6a62}
.footerLinks span,.newsletter>span{color:#777168}
.newsletter form{border-bottom-color:var(--line)}
.newsletter input,.newsletter button{color:var(--ink)}
.legal{border-top-color:var(--line);color:#777168}

/* Logo-to-navigation alignment */
.nav{grid-template-columns:auto 1fr;column-gap:100px}
.nav nav{justify-self:start;transform:translateY(18px)}
@media(max-width:800px){.nav{grid-template-columns:1fr;column-gap:0}.nav nav{transform:none}}

/* Interior pages */
.innerPage .nav{position:absolute}
.pageHero{min-height:660px;padding:120px 7vw 100px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}
.pageHero h1{font-size:clamp(72px,10vw,156px);line-height:.8;letter-spacing:-.075em;text-transform:uppercase;margin:42px 0 55px;max-width:1200px}
.pageHero h1 em{font-family:Georgia,serif;text-transform:none;font-weight:400}
.pageLead{font-family:Georgia,serif;font-size:clamp(19px,2vw,28px);line-height:1.5;max-width:760px;margin:0 0 0 34%}
.pageSplit{display:grid;grid-template-columns:58% 42%;min-height:760px;border-bottom:1px solid var(--line)}
.pageImage{min-height:680px}.pageCopy{padding:95px 6vw;display:flex;flex-direction:column;justify-content:center}.pageCopy h2,.pageCta h2{font-size:clamp(24px,3vw,44px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin:55px 0}.pageCopy>p:not(.sectionTag){font-family:Georgia,serif;font-size:19px;line-height:1.65;color:#555049}
.valueGrid{display:grid;grid-template-columns:repeat(3,1fr);padding:110px 7vw 140px;gap:4vw}.valueGrid article,.disciplineGrid article{border-top:1px solid var(--line);padding-top:25px}.valueGrid span,.disciplineGrid span{font-size:9px;letter-spacing:2px;color:#777168}.valueGrid h3{font-size:28px;margin:42px 0 20px}.valueGrid p,.disciplineGrid p{font-family:Georgia,serif;color:#5f5a52;line-height:1.6}
.teamVisual{height:min(75vw,850px);padding:0 7vw 100px}.teamVisual img{object-position:center}
.disciplineGrid{display:grid;grid-template-columns:repeat(3,1fr);padding:20px 7vw 130px;gap:70px 4vw}.disciplineGrid h2{font-size:25px;margin:34px 0 16px}.pageCta{padding:120px 7vw 140px;border-top:1px solid var(--line)}.pageCta a{display:block;max-width:350px;border-bottom:1px solid;padding-bottom:15px;text-transform:uppercase;font-size:11px;letter-spacing:2px}.pageCta a span{float:right;font-size:18px}
.portfolioGrid{padding:20px 7vw 130px}.portfolioGrid article{display:grid;grid-template-columns:72% 1fr;gap:4vw;padding:90px 0;border-bottom:1px solid var(--line)}.portfolioMedia{aspect-ratio:16/9;background:#111}.portfolioMedia video{width:100%;height:100%;display:block;object-fit:cover}.portfolioMeta{align-self:end}.portfolioMeta>span{font-size:9px;letter-spacing:2px;color:#777168}.portfolioMeta h2{font-size:clamp(28px,4vw,54px);letter-spacing:-.04em;margin:35px 0 12px}.portfolioMeta p{text-transform:uppercase;font-size:9px;letter-spacing:2px;color:#777168}
.contactLayout{display:grid;grid-template-columns:38% 1fr;gap:8vw;padding:110px 7vw 150px}.contactDetails{display:flex;flex-direction:column;gap:45px}.contactEmail{font-family:Georgia,serif;font-size:clamp(22px,2.5vw,38px);border-bottom:1px solid;padding-bottom:16px}.contactDetails div>span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#777168}.contactDetails div>p{font-family:Georgia,serif;line-height:1.6}.contactForm{display:grid;grid-template-columns:1fr 1fr;gap:34px}.contactForm label{display:flex;flex-direction:column;gap:12px;text-transform:uppercase;font-size:9px;letter-spacing:2px}.contactForm input,.contactForm select,.contactForm textarea{border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 0;outline:0;font:16px Georgia,serif;color:var(--ink);border-radius:0}.contactForm textarea{resize:vertical}.contactForm .fullField{grid-column:1/-1}.contactForm button{grid-column:1/-1;justify-self:start;border:0;border-bottom:1px solid;background:transparent;padding:0 0 14px;width:220px;text-align:left;text-transform:uppercase;font-size:10px;letter-spacing:2px;cursor:pointer}.contactForm button span{float:right;font-size:18px}
@media(max-width:800px){.pageHero{min-height:500px;padding:90px 6vw 70px}.pageHero h1{font-size:clamp(58px,17vw,92px);margin:35px 0}.pageLead{margin-left:0}.pageSplit{grid-template-columns:1fr}.pageImage{min-height:480px}.pageCopy{padding:80px 6vw}.valueGrid,.disciplineGrid{grid-template-columns:1fr;padding:80px 6vw;gap:55px}.teamVisual{height:70vh;min-height:480px;padding:0 6vw 70px}.pageCta{padding:90px 6vw}.portfolioGrid{padding:0 6vw 90px}.portfolioGrid article{grid-template-columns:1fr;padding:65px 0}.contactLayout{grid-template-columns:1fr;padding:80px 6vw 100px}.contactForm{grid-template-columns:1fr}.contactForm .fullField{grid-column:auto}.contactForm button{grid-column:auto}}

/* Compact single-row video carousel */
.videoThumbsWrap{position:relative;min-width:0;padding:0 52px}
.videoThumbs{display:flex;grid-template-columns:none;align-items:flex-start;gap:7.2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.videoThumbs::-webkit-scrollbar{display:none}
.videoThumb{display:block;align-self:flex-start;position:relative;top:0;flex:0 0 calc((80% - 38.4px)/5);min-width:116px;margin:0;padding-top:14px;scroll-snap-align:start}
.videoThumb,.videoThumb:hover,.videoThumb.active{border-top:1px solid var(--line);transform:none}
.videoThumb .thumbMedia{width:100%;height:auto;aspect-ratio:16/9;margin:0}
.thumbCopy{align-items:flex-start;flex-direction:column;gap:5px}
.carouselArrow{position:absolute;z-index:3;top:calc(50% - 28px);width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:20px;box-shadow:0 5px 18px rgba(16,16,16,.13)}
.carouselArrow:hover{background:var(--red);border-color:var(--red);color:#fff}
.carouselArrow:disabled{opacity:.35;cursor:not-allowed;background:var(--paper);border-color:var(--line);color:var(--ink)}
.carouselArrowLeft{left:0}.carouselArrowRight{right:0}
@media(max-width:800px){.videoThumbsWrap{padding:0 46px}.videoThumbs{gap:6px;padding-bottom:4px}.videoThumb{min-width:calc((100% - 12px)/3);flex-basis:calc((100% - 12px)/3)}.carouselArrow{width:40px;height:40px;top:calc(50% - 24px)}.carouselArrowLeft{left:0}.carouselArrowRight{right:0}}

/* Clean, camera-free video loading transition */
.heroVideo{opacity:0;transition:opacity .55s ease}
.heroVideo.ready{opacity:1}
.thumbMedia{background:#111}

/* Home header overlays the flush-to-top hero */
.nav{background:transparent;border-bottom-color:rgba(255,255,255,.35)}
main:not(.innerPage)>.hero{margin-top:0}

/* Header scale, alignment and video-overlay legibility */
.nav>.brand{width:252px;transform:translateX(100px)}
.nav nav{transform:translate(50px,24px);line-height:1}
.nav nav a{font-weight:800}
.nav nav a{color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,.9),1px -1px 0 rgba(0,0,0,.9),-1px 1px 0 rgba(0,0,0,.9),1px 1px 0 rgba(0,0,0,.9),0 2px 5px rgba(0,0,0,.65)}
@media(max-width:800px){.nav>.brand{width:174px;transform:none}.nav nav{transform:none}}

/* Navigation-matched logo descriptor and single-line menu */
.brand{line-height:1}
.brandMark{display:block;width:100%;height:42px;overflow:hidden}
.brandMark img{width:100%;height:auto;transform:translateY(-29.7%)}
.brand .brandDescriptor{display:block;width:80.8%;margin:6px 0 0 7.2%;text-align:left;color:inherit;font-size:11px;font-weight:800;line-height:1;letter-spacing:3.9px;text-transform:uppercase;white-space:nowrap}
.nav nav{flex-wrap:nowrap;white-space:nowrap}
.nav nav a{white-space:nowrap}
.nav .brandDescriptor{color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,.9),1px -1px 0 rgba(0,0,0,.9),-1px 1px 0 rgba(0,0,0,.9),1px 1px 0 rgba(0,0,0,.9),0 2px 5px rgba(0,0,0,.65)}
.menuToggle{display:none}
@media(max-width:800px){.brandMark{height:29px}.brand .brandDescriptor{font-size:8px;letter-spacing:2.4px;margin-top:4px}}

/* Accessible mobile navigation */
@media(max-width:800px){
  .nav{position:absolute;height:64px;display:grid;grid-template-columns:1fr auto;padding:0 4vw;background:transparent;border-bottom-color:transparent}
  .nav>.brand{position:relative;z-index:2}
  .menuToggle{position:relative;z-index:2;align-self:start;display:flex;align-items:center;gap:12px;margin-top:5px;border:0;background:transparent;color:#298bd5;padding:12px 0;text-transform:uppercase;font-size:9px;font-weight:800;letter-spacing:2px;cursor:pointer}
  .menuToggle span{display:none}
  .menuToggle i,.menuToggle i::before,.menuToggle i::after{display:block;width:22px;height:2px;background:currentColor;content:"";transition:transform .2s ease,background .2s ease}
  .menuToggle i::before{transform:translateY(-6px)}
  .menuToggle i::after{transform:translateY(4px)}
  .menuOpen .menuToggle i{background:transparent}
  .menuOpen .menuToggle i::before{background:currentColor;transform:translateY(0) rotate(45deg)}
  .menuOpen .menuToggle i::after{background:currentColor;transform:translateY(-2px) rotate(-45deg)}
  .nav nav{position:fixed;top:0;right:0;left:0;height:auto;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:0;padding:72px 8vw 8px;background:rgba(17,17,17,.5);transform:translateY(-105%);opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease,visibility .3s}
  .nav.menuOpen nav{transform:translateY(0);opacity:1;visibility:visible}
  .nav nav a{width:100%;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.18);color:#fff;font-size:clamp(11px,3.5vw,19px);line-height:1.05;letter-spacing:-.02em;text-shadow:none}
  .nav nav a:first-child{border-top:1px solid rgba(255,255,255,.18)}
}

/* Cinematic 21:9 video presentation without distortion */
.hero,.heroVideo,.videoThumb .thumbMedia,.portfolioMedia{aspect-ratio:21/9}
.heroVideo,.thumbMedia video,.portfolioMedia video{object-fit:cover}
.heroVideo.logoFilm{transform:scale(.5);transform-origin:center;background:#fff}
.hero.logoFilmHero{background:#fff}

/* Tighter homepage flow below the hero */
.videoPicker{padding-top:14px;padding-bottom:20px}
.manifesto{padding-top:36px}
@media(max-width:800px){.videoPicker{padding-top:12px;padding-bottom:18px}.manifesto{padding-top:34px}}

/* Keep the expanded desktop navigation on one line */
@media(min-width:801px) and (max-width:1100px){.nav nav{gap:10px;font-size:11px;letter-spacing:1px}}

/* Compact, single-line section headings */
section h2{white-space:nowrap}
.sectionTag+h2{font-size:clamp(26px,3.5vw,55px);font-weight:700;line-height:.92;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;margin:18px 0 80px}
.track h2{font-size:clamp(32px,4vw,60px)}
.portfolioMeta h2{font-size:clamp(14px,2vw,27px)}
.teamBio h2{font-size:clamp(22px,3vw,41px)}
.blogMeta h2{font-size:clamp(15px,2vw,29px)}
.articleBody h2{font-size:clamp(15px,2vw,24px)}
.legalBody h2{font-size:clamp(14px,1.5vw,21px)}
.disciplineGrid h2{font-size:13px}
@media(max-width:800px){section h2{font-size:clamp(10px,3vw,28px)!important;letter-spacing:-.015em}}
@media(max-width:800px){.serviceList article{grid-template-columns:80px 1fr 25px}.serviceThumb{width:70px;height:44px}}
.aboutManifesto .manifestoGrid,.productionManifesto .manifestoGrid{grid-template-columns:minmax(0,70%);padding-left:17.5%}
@media(max-width:800px){.aboutManifesto .manifestoGrid,.productionManifesto .manifestoGrid{grid-template-columns:1fr;padding-left:0}}

/* Team, contact and journal content migrated from the original Musify site */
.teamProfiles{padding:30px 7vw 140px}.teamProfiles article{display:grid;grid-template-columns:19% 1fr;gap:7vw;padding:90px 0;border-bottom:1px solid var(--line)}.teamPortrait{aspect-ratio:4/5;overflow:hidden;background:#d7d0c5}.teamPortrait img{object-position:center top}.teamBio{align-self:center}.teamBio>span,.blogMeta>span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#777168}.teamBio h2{font-size:clamp(44px,6vw,82px);line-height:.9;letter-spacing:-.05em;margin:32px 0 42px;text-transform:uppercase}.teamBio p{font:18px/1.65 Georgia,serif;color:#555049}.contactStudioImage{height:auto;aspect-ratio:16/10;margin-top:15px}.blogGrid{padding:30px 7vw 140px}.blogGrid article{display:grid;grid-template-columns:55% 1fr;gap:5vw;padding:80px 0;border-bottom:1px solid var(--line)}.blogImage{aspect-ratio:16/10;overflow:hidden;background:#d7d0c5}.blogMeta{align-self:center}.blogMeta h2{font-size:clamp(30px,4vw,58px);line-height:.95;letter-spacing:-.04em;margin:30px 0}.blogMeta>p{font:17px/1.6 Georgia,serif;color:#555049}.readMore{display:block;width:min(100%,260px);margin-top:35px;padding-bottom:13px;border-bottom:1px solid var(--line);text-transform:uppercase;font-size:9px;letter-spacing:2px}.readMore span{float:right;font-size:17px}.articlePage>header{padding:150px 7vw 100px}.articlePage h1{font-size:clamp(54px,8vw,118px);line-height:.87;letter-spacing:-.06em;text-transform:uppercase;max-width:1250px;margin:45px 0 60px}.articleHeroImage{width:86%;height:auto;max-height:780px;aspect-ratio:16/9;margin:0 auto;object-fit:cover}.articleBody{max-width:820px;margin:0 auto;padding:100px 6vw 150px}.articleBody section{margin-bottom:70px}.articleBody h2{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase}.articleBody p{font:20px/1.7 Georgia,serif;color:#4f4a43}
@media(max-width:800px){.teamProfiles,.blogGrid{padding:10px 6vw 90px}.teamProfiles article,.blogGrid article{grid-template-columns:1fr;gap:38px;padding:60px 0}.teamPortrait{width:50%}.teamBio h2{font-size:48px}.articlePage>header{padding:100px 6vw 70px}.articleHeroImage{width:88%}.articleBody{padding-top:70px}.articleBody p{font-size:18px}}

/* Match the team page's final content-to-footer rhythm to the homepage */
.teamPage .teamProfiles article:last-child{padding-bottom:0;border-bottom:0}

/* Keep balanced 50px spacing above and below the first profile divider */
.teamPage .teamPageManifesto{padding-bottom:50px}
.teamPage .teamProfiles{padding-top:0}
.teamPage .teamProfiles article:first-child{padding-top:50px;border-top:1px solid var(--line)}

/* Align each team portrait with the beginning of its biography copy */
.teamPage .teamProfiles article{grid-template-columns:55% 19%;grid-template-areas:"heading portrait" "copy portrait";column-gap:2vw;row-gap:0;align-items:start}
.teamPage .teamPortrait{grid-area:portrait;margin-top:46px}
.teamPage .teamBio{display:contents}
.teamPage .teamHeading{grid-area:heading}
.teamPage .teamHeading>span{font-size:11.25px;letter-spacing:2px;text-transform:uppercase;color:#777168}
.teamPage .teamHeading h2{font-size:clamp(26px,3.5vw,55px);line-height:.9;letter-spacing:-.05em;margin:32px 0 25px;text-transform:uppercase}
.teamPage .teamCopy{grid-area:copy;width:100%}
.teamPage .teamCopy p{font:18px/1.65 Georgia,serif;color:#555049;margin-top:0;text-align:justify}
@media(max-width:800px){.teamPage .teamProfiles article{grid-template-columns:1fr;grid-template-areas:"heading" "copy" "portrait"}.teamPage .teamCopy{width:100%}.teamPage .teamPortrait{width:50%;margin-top:0;justify-self:end}}

/* Legal pages and regenerated site directory */
.legalLinks{display:flex;gap:20px;flex-wrap:wrap}.legalPage>header{padding:150px 7vw 100px;border-bottom:1px solid var(--line)}.legalPage h1{font-size:clamp(58px,9vw,130px);line-height:.85;letter-spacing:-.065em;text-transform:uppercase;margin:45px 0}.legalUpdated{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#777168}.legalBody{max-width:900px;margin:0 auto;padding:100px 6vw 150px}.legalBody section{padding:0 0 55px;margin-bottom:55px;border-bottom:1px solid var(--line)}.legalBody h2{font-size:clamp(27px,3vw,42px);line-height:1.05;text-transform:uppercase;letter-spacing:-.025em}.legalBody p{font:18px/1.7 Georgia,serif;color:#4f4a43}.legalBody a{text-decoration:underline}.sitemapGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5vw;padding:100px 7vw 150px}.sitemapGrid>div{display:flex;flex-direction:column}.sitemapGrid>div>span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#777168;margin-bottom:24px}.sitemapGrid a{padding:20px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.35}.sitemapGrid a b{float:right;font-weight:400}
@media(max-width:800px){.legal{gap:20px}.legalLinks{gap:10px 18px}.legalPage>header{padding:100px 6vw 70px}.legalBody{padding-top:70px}.sitemapGrid{grid-template-columns:1fr;padding:70px 6vw 100px;gap:60px}}

/* Two-line newsletter signup */
.newsletter>span{display:block}
.newsletter form{display:grid;grid-template-columns:minmax(70px,.8fr) minmax(120px,1.2fr) auto;gap:10px;margin-top:22px;border-bottom:0;align-items:end}
.newsletter input{min-width:0;border:0;border-bottom:1px solid var(--line);padding:12px 0}
.newsletter button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:11px 13px;text-transform:uppercase;font-size:9px;font-weight:700;letter-spacing:1.4px;cursor:pointer}
.newsletter button:hover{background:var(--ink);color:var(--paper)}

/* Align the visible footer wordmark with the footer column headings */
.footerBrand{height:74px;overflow:hidden}
.footerBrand img{width:100%;height:auto;transform:translateY(-27.2%)}
footer .footerBrand+p{margin-top:18px}
@media(max-width:800px){.footerBrand{height:67px}footer .footerBrand+p{margin-top:14px}}

/* Consistent rhythm between homepage content sections */
.homePage>.manifesto,.homePage>.services{padding-top:100px;padding-bottom:100px}
@media(max-width:800px){.homePage>.manifesto,.homePage>.services{padding-top:80px;padding-bottom:80px}}

/* Keep 200px between each page's final content and the footer divider */
.homePage>section:last-of-type,.innerPage>section:last-of-type{padding-bottom:200px}
.articlePage .articleBody,.legalPage .legalBody{padding-bottom:200px}

/* Footer paragraph to lower-divider spacing */
footer{padding-top:40px}
footer .legal{margin-top:10px}

/* Match the About Us introduction to the homepage About MUSIFY section */
.aboutPageManifesto,.companyPageManifesto,.teamPageManifesto,.portfolioPageManifesto,.blogPageManifesto,.contactHero{padding-top:180px}
@media(max-width:800px){.aboutPageManifesto,.companyPageManifesto,.teamPageManifesto,.portfolioPageManifesto,.blogPageManifesto,.contactHero{padding-top:110px}}

/* Place each portfolio project's identifying information above its video */
.portfolioGrid article{display:block}
.portfolioMeta{width:72%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:24px;align-items:baseline;margin-bottom:24px}
.portfolioMeta>span{line-height:1}
.portfolioMeta h2{margin:0;line-height:1}
.portfolioMeta p{margin:0;line-height:1;white-space:nowrap}
.portfolioMedia{width:72%}
@media(max-width:800px){.portfolioMeta,.portfolioMedia{width:100%}.portfolioMeta{grid-template-columns:36px 1fr;gap:12px 16px}.portfolioMeta p{grid-column:2;margin:0}}

/* Keep 50px between the Portfolio introduction and its first divider */
.portfolioPageManifesto{padding-bottom:50px}
.portfolioGrid{padding-top:0}
.portfolioGrid article{padding-top:30px}
.portfolioGrid article:first-child{padding-top:30px;border-top:1px solid var(--line)}
.portfolioGrid article:first-child .portfolioMeta{height:auto;align-content:normal}

/* Present the journal as a three-column article grid */
.blogGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 3vw;padding-top:30px}
.blogGrid article{display:flex;flex-direction:column;gap:0;padding:30px 0 45px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blogImage{width:100%;aspect-ratio:16/10}
.blogMeta{display:flex;flex:1;flex-direction:column;align-self:stretch;margin-top:25px}
.blogMeta h2{font-size:clamp(18px,2.4vw,35px);margin:22px 0 18px;white-space:normal}
.blogMeta>p{margin:0}
.blogMeta .readMore{margin-top:auto;padding-top:35px}
@media(max-width:1100px){.blogGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.blogGrid{grid-template-columns:1fr;gap:35px}.blogGrid article{padding-top:25px}}

/* Keep exactly 50px between the Journal introduction and blog-card divider */
.blogPageManifesto{padding-bottom:50px}
.blogGrid{padding-top:0}

/* Match every blog detail page to the homepage section system */
.articlePage>.articleIntro{padding:180px 7vw 100px}
.articleIntro h1{font-size:clamp(26px,3.5vw,55px);font-weight:700;line-height:.92;letter-spacing:-.04em;text-transform:uppercase;margin:18px 0 80px}
.articleBody{max-width:none;padding-left:7vw;padding-right:7vw}
.articleBody section{margin:0;padding:60px 0;border-top:1px solid var(--line)}
.articleBody h2{font-size:clamp(26px,3.5vw,55px);font-weight:700;line-height:.92;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;margin:0 0 50px}
.articleBody section p{width:70%;margin:0 0 0 17.5%}
@media(max-width:800px){.articlePage>.articleIntro{padding:110px 6vw 80px}.articleIntro h1{font-size:clamp(20px,5vw,32px);white-space:normal;margin-bottom:55px}.articleBody{padding-left:6vw;padding-right:6vw}.articleBody section{padding:45px 0}.articleBody h2{margin-bottom:35px}.articleBody section p{width:100%;margin-left:0}}

/* Use a compact featured image on every blog detail page */
.articleHeroImage{width:40%}

/* Align article content with the header logo and unify article typography */
.articlePage>.articleIntro{padding-left:calc(4vw + 100px)}
.articleIntro .manifestoGrid{grid-template-columns:minmax(0,70%);padding-left:0}
.articleIntro .manifestoGrid p{font-size:20px;text-align:justify}
.articleHeroImage{margin-left:calc(4vw + 100px);margin-right:0}
.articleBody{padding-left:calc(4vw + 100px)}
.articleBody h2{font-size:20px!important;font-weight:800;line-height:1.5;letter-spacing:0;white-space:normal;margin-bottom:20px}
.articleBody section p{width:70%;margin-left:0;font-size:20px;line-height:1.7;text-align:justify}
@media(max-width:800px){.articlePage>.articleIntro{padding-left:4vw;padding-right:4vw}.articleIntro .manifestoGrid{grid-template-columns:1fr}.articleHeroImage{margin-left:4vw}.articleBody{padding-left:4vw;padding-right:4vw}.articleBody section p{width:100%}}

/* Keep the featured image and justified article copy at one shared width */
.articleIntro .manifestoGrid,.articleHeroImage,.articleBody section p{width:min(70vw,1100px,calc(92vw - 100px))}
.articleIntro .manifestoGrid{grid-template-columns:1fr}
@media(max-width:800px){.articleIntro .manifestoGrid,.articleHeroImage,.articleBody section p{width:92vw}}

/* Remove dividers and added gaps between article text blocks */
.articleBody section{padding-top:0;padding-bottom:0;border-top:0}
.articleBody h2,.articleBody section p{margin-top:0;margin-bottom:0}
.articleBody section + section{margin-top:20px}

/* Keep the featured photo 20px from the text above and below */
.articlePage>.articleIntro{padding-bottom:20px}
.articleHeroImage{display:block;margin-bottom:20px}
.articleBody{padding-top:0}
.articleBody h2{margin-bottom:20px}

/* Keep the blog index within the header's visible logo-to-navigation bounds */
.blogGrid{width:min(1100px,calc(92vw - 100px));margin-left:calc(4vw + 100px);margin-right:0;padding-left:0;padding-right:0}
@media(max-width:800px){.blogGrid{width:92vw;margin-left:4vw;padding-left:0;padding-right:0}}

/* Use the header logo's left edge as the site-wide desktop content boundary */
@media(min-width:801px){
  .videoPicker,.manifesto,.services,.sound,footer,.pageHero,.valueGrid,.disciplineGrid,.pageCta,.portfolioGrid,.contactLayout,.teamProfiles,.legalPage>header,.sitemapGrid{padding-left:calc(4vw + 100px)}
}

/* Contact form first, with company details and production image alongside */
.contactLayout{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:6vw;align-items:start}
.contactForm .sectionTag{margin-bottom:12px}
.contactDetails{gap:32px}
.contactDetails>div p{margin:10px 0 0}
.contactDetails>div:first-of-type p{overflow-wrap:anywhere}
.contactStudioImage{width:100%;margin-top:8px}
@media(max-width:800px){.contactLayout{grid-template-columns:1fr}.contactDetails{margin-top:25px}}

/* Constrain the complete contact area to the logo-to-navigation boundary */
.contactLayout{width:min(1100px,calc(92vw - 100px));margin-left:calc(4vw + 100px);margin-right:0;padding-left:0;padding-right:0}
@media(max-width:800px){.contactLayout{width:92vw;margin-left:4vw;padding-left:0;padding-right:0}}

/* Clearly outlined contact form and editable fields */
.contactForm{border:1px solid var(--line);padding:38px}
.contactForm input,.contactForm select,.contactForm textarea{background:#fff;border:1px solid var(--line);padding:14px 16px}
.contactForm input:focus,.contactForm select:focus,.contactForm textarea:focus{border-color:var(--ink)}
@media(max-width:800px){.contactForm{padding:24px}}
.contactForm button{width:110px;justify-self:end;display:flex;align-items:center;justify-content:space-between;line-height:1;border:1px solid #0877bd;background:#0877bd;color:#fff;padding:10px 12px;font-weight:800}
.contactForm button span{float:none;line-height:1}
.contactForm button:hover,.contactForm button:focus-visible{background:#065f98;border-color:#065f98;color:#fff}

/* Keep exactly 40px between the Contact Us introduction and form */
.contactHero{padding-bottom:40px}
.contactLayout{padding-top:0}

/* Extend only the portfolio divider lines to the navigation boundary */
.portfolioGrid article{position:relative;border-bottom:0}
.portfolioGrid article::after{content:"";position:absolute;left:0;bottom:0;width:min(1100px,calc(92vw - 100px));border-bottom:1px solid var(--line);pointer-events:none}
.portfolioGrid article:first-child{border-top:0}
.portfolioGrid article:first-child::before{content:"";position:absolute;left:0;top:0;width:min(1100px,calc(92vw - 100px));border-top:1px solid var(--line);pointer-events:none}
@media(max-width:800px){.portfolioGrid article::after,.portfolioGrid article:first-child::before{width:88vw}}

/* Extend only the Our Team divider lines to the navigation boundary */
.teamPage .teamProfiles article{position:relative;border-bottom:0}
.teamPage .teamProfiles article:not(:last-child)::after{content:"";position:absolute;left:0;bottom:0;width:min(1100px,calc(92vw - 100px));border-bottom:1px solid var(--line);pointer-events:none}
.teamPage .teamProfiles article:first-child{border-top:0}
.teamPage .teamProfiles article:first-child::before{content:"";position:absolute;left:0;top:0;width:min(1100px,calc(92vw - 100px));border-top:1px solid var(--line);pointer-events:none}
@media(max-width:800px){.teamPage .teamProfiles article:not(:last-child)::after,.teamPage .teamProfiles article:first-child::before{width:88vw}}

/* Keep the homepage What We Do section within the header content bounds */
.homePage>.services{width:min(1100px,calc(92vw - 100px));margin-left:calc(4vw + 100px);margin-right:0;padding-left:0;padding-right:0}
@media(max-width:800px){.homePage>.services{width:92vw;margin-left:4vw;padding-left:0;padding-right:0}}


/* Keep the About Us experience heading on one line without widening the page */
.pageCopy h2{font-size:clamp(16px,1.65vw,24px)}

/* Place the active film status in the thumbnail's lower-right corner. */
.videoThumb.active .thumbMedia i{left:auto;right:10px;bottom:9px;background:#0877bd;color:#fff}

/* Keep the main navigation visually open above the hero. */
.nav{border-bottom:none}

/* Musify-blue carousel controls. */
.carouselArrow{background:#0877bd;border-color:#0877bd;color:#fff}
.carouselArrow:hover{background:#065f98;border-color:#065f98;color:#fff}

/* Align compact, heavier carousel controls with the video frames. */
.carouselArrow{top:clamp(32px,3.5vw,50px);width:35px;height:35px;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:900;line-height:1;-webkit-text-stroke:1px currentColor;box-shadow:0 4px 14px rgba(16,16,16,.16)}
@media(max-width:800px){.carouselArrow{top:clamp(28px,8vw,42px);width:30px;height:30px;font-size:16px}.videoThumbsWrap{padding-left:36px;padding-right:36px}}

/* Draw the arrows geometrically so they sit exactly in the circle center. */
.carouselArrow{font-size:0;-webkit-text-stroke:0}
.carouselArrow::before{content:"";display:block;width:8px;height:8px;border-top:3px solid #fff;border-right:3px solid #fff}
.carouselArrowLeft::before{transform:translateX(2px) rotate(-135deg)}
.carouselArrowRight::before{transform:translateX(-2px) rotate(45deg)}
@media(max-width:800px){.carouselArrow::before{width:7px;height:7px;border-width:2.5px}}

/* Precisely centered, full-shaft SVG carousel arrows. */
.carouselArrow::before{display:none}
.carouselArrow svg{display:block;width:18px;height:18px;overflow:visible;fill:none;stroke:#fff;stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:800px){.carouselArrow svg{width:16px;height:16px}}

/* Bring the film carousel closer to its section label. */
@media(min-width:801px){.videoPicker{grid-template-columns:125px minmax(0,1fr);gap:16px}}

/* Keep five smaller thumbnails visible within a compact desktop carousel. */
@media(min-width:801px){.videoThumbsWrap{width:80%}.videoThumb{flex-basis:calc((100% - 28.8px)/5)}}

/* Avoid platform-specific video compositing seams on Windows Chrome. */
.heroVideo.logoFilm{inset:25%;width:50%;height:50%;transform:none}

/* Cover the decoder seam below the logo tagline at the page layer. */
.hero.logoFilmHero::after{content:"";position:absolute;z-index:2;left:25%;right:25%;top:58%;bottom:25%;background:#fff;pointer-events:none}

/* Fixed social and download rail, matched to the live Musify site. */
.socialRail{position:fixed;z-index:30;top:100px;right:15px;display:flex;flex-direction:column;gap:5px;width:40px}
.socialRailButton{position:relative;width:40px;height:40px;display:grid;place-items:center;color:#fff;transition:filter .2s ease,transform .2s ease}
.socialRailButton:hover,.socialRailButton:focus-visible{filter:brightness(1.18);transform:translateX(-2px)}
.socialRailButton:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.socialRailButton span{display:block;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:900;line-height:1;text-align:center}
.socialRailButton img{display:block;width:100%;height:100%;object-fit:cover}
.socialRailButton .downloadLabel{position:absolute;right:1px;bottom:2px;left:1px;color:#298bd5;font-size:8px;letter-spacing:.6px;line-height:1;text-shadow:none;pointer-events:none}
.socialRailButton.instagram{background:#262626;font-size:25px}.socialRailButton.linkedin{background:#0077b5;font-size:17px}.socialRailButton.facebook{background:#3b5998;font-size:24px}.socialRailButton.youtube{background:#cd201f;font-size:16px}.socialRailButton.download{background:rgba(19,16,16,.88);font-size:24px}
@media(max-width:800px){.socialRail{top:38px;right:8px;width:32.4px}.socialRailButton{width:32.4px;height:32.4px}}

/* WordPress integration */
.nav nav ul{display:contents;margin:0;padding:0;list-style:none}.nav nav li{display:contents}
.admin-bar .nav{top:32px}.admin-bar .socialRail{top:132px}
.formNotice{padding:12px;background:#eef8ff;color:#0877bd}
.blogArticle>article{width:min(920px,88vw);margin:0 auto;padding:160px 0 100px}.blogArticle header h1{font-family:Georgia,serif;font-size:clamp(38px,6vw,86px);line-height:.95}.articleImage{display:block;width:100%;height:auto;margin:45px 0}.articleBody{font-size:17px;line-height:1.8}.articleBody>*+*{margin-top:1.2em}
@media(max-width:782px){.admin-bar .nav{top:46px}.admin-bar .socialRail{top:84px}}
/*
Theme Name: Musify Media Entertainment
Theme URI: https://musifyentertainment.com/
Author: Musify Media Entertainment
Description: Custom responsive WordPress theme for Musify Media Entertainment, featuring a cinematic video carousel, production portfolio, team, blog, contact forms, and social media rail.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: musify
*/