/*
Theme Name: Mfreestudio
Description: Gold and black portfolio theme for a roto, paint, match move and compositing studio. Edit everything from Appearance > Customize.
Version: 1.6.0
Author: Mfreestudio
Text Domain: mfreestudio
*/
:root{
  --bg:#0B0B0C; --card:#151412; --fg:#F3EBD8; --gold:#D4AF37; --gold2:#F2D675;
  --line:rgba(212,175,55,.22); --mute:#A39A82;
  --goldgrad:linear-gradient(135deg,var(--gold),var(--gold2) 50%,var(--gold));
  --display:'Syne','Arial Black',system-ui,sans-serif; --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:96px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(30px,5vw,52px);font-weight:800}
p{margin:0}
.lead{color:var(--mute);max-width:58ch}
section{padding:96px 0}
.site-header{position:sticky;top:0;z-index:40;background:rgba(11,11,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{font-family:var(--display);font-weight:800;font-size:22px;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav{display:flex;gap:26px;font-weight:500;font-size:15px}
.nav nav a:hover{color:var(--gold2)}
.btn{display:inline-block;padding:13px 24px;border-radius:999px;background:var(--goldgrad);color:#14110A;font:700 16px var(--body);border:0;cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold2)}
.btn:hover{filter:brightness(1.1)}
@media(max-width:760px){.nav nav{display:none}}
.hero{padding:56px 0 72px}
.hero h1{font-size:clamp(40px,8vw,92px);font-weight:800;max-width:14ch}
.hero .lead{margin:22px 0 30px;font-size:19px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.pass{position:relative;margin-top:48px;aspect-ratio:21/9;min-height:220px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;touch-action:pan-y}
.scene{position:absolute;inset:0;background:
  radial-gradient(circle at 70% 60%,#FFF1B8 0 3%,var(--gold2) 8%,var(--gold) 16%,transparent 36%),
  radial-gradient(ellipse 70% 28% at 50% 100%,#6B5314,transparent 70%),
  radial-gradient(circle at 25% 40%,var(--gold) 0 6%,#3A2E0C 13%,transparent 14%),
  linear-gradient(180deg,#050505 0%,#14100A 60%,#2B2108 100%)}
.scene.plate{filter:grayscale(1) contrast(.7) brightness(.6);clip-path:inset(0 var(--cut,50%) 0 0)}
.scene.plate::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 36px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 36px)}
.tag{position:absolute;bottom:14px;padding:5px 12px;border-radius:6px;background:rgba(0,0,0,.7);color:var(--gold2);font-size:13px;font-weight:600}
.tag.l{left:14px}.tag.r{right:14px}
.bar{position:absolute;top:0;bottom:0;left:calc(100% - var(--cut,50%));width:2px;background:var(--gold2);pointer-events:none}
.pass input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.pass:focus-within{outline:3px solid var(--gold2)}
.reel{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.player{position:relative;margin-top:36px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line)}
.player video,.player iframe{width:100%;height:100%;border:0;display:block;object-fit:cover}
.player .empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--gold2);background:
  radial-gradient(circle at 30% 70%,rgba(212,175,55,.45),transparent 55%),#050505}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:44px}
.svc article{padding:28px 24px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.svc svg{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:24px;font-weight:600;margin:18px 0 8px}
.svc p{color:var(--mute);font-size:15px}
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:44px}
.poster-card{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1px solid var(--gold);display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:#000 center/cover no-repeat}
.poster-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88));pointer-events:none}
.poster-card>*{position:relative;z-index:1}
.poster-card h3{font-size:22px;font-weight:800;color:var(--gold2)}
.poster-card p{font-size:13px;color:#D8CFB8;margin-top:4px}
.p1{background-image:radial-gradient(circle at 50% 35%,var(--gold2) 0 8%,var(--gold) 18%,transparent 40%)}
.p2{background-image:repeating-linear-gradient(135deg,#0B0B0C 0 18px,#3A2E0C 18px 22px),radial-gradient(circle at 70% 30%,var(--gold),transparent 50%)}
.p3{background-image:radial-gradient(circle at 50% 40%,transparent 0 22%,var(--gold) 23% 25%,transparent 26% 34%,#8C6D1C 35% 36%,transparent 37%)}
.p4{background-image:linear-gradient(200deg,#050505 35%,#7A5C14 75%,var(--gold2))}
.p5{background-image:radial-gradient(ellipse 80% 40% at 50% 85%,var(--gold),transparent 70%),linear-gradient(180deg,#0B0B0C,#1D1707)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:44px}
.steps div{counter-increment:s;border-left:2px solid var(--gold);padding-left:18px}
.steps div::before{content:counter(s);font:800 34px var(--display);color:var(--gold)}
.steps h3{font-size:21px;font-weight:600;margin:4px 0 6px}
.steps p{color:var(--mute);font-size:15px}
.contact{background:var(--card);border-top:1px solid var(--line)}
form{display:grid;gap:14px;max-width:620px;margin-top:32px}
label{font-weight:700;font-size:15px;display:grid;gap:6px}
input,textarea,select{font:400 16px var(--body);padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px}
.notice{margin-top:20px;padding:12px 16px;border:1px solid var(--gold);border-radius:10px;color:var(--gold2);max-width:620px}
.site-footer{padding:28px 0;color:var(--mute);font-size:14px;border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.page-body{padding:64px 0}
.page-body h1{font-size:clamp(32px,5vw,52px);margin-bottom:24px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.logo{display:flex;align-items:center;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
.logo-img{display:block;height:58px;width:auto}
.logo-img.foot{height:44px}
.foot-brand{display:flex;align-items:center;gap:14px}
.eyebrow{color:var(--gold2);font-weight:700;font-size:15px;letter-spacing:.14em;margin-bottom:18px}
@media(max-width:760px){.logo-img{height:48px}}

/* Per-area color and size controls (values come from Customize) */
h1,h2,h3{color:var(--head)}
.site-header{background:var(--hdr-bg);backdrop-filter:none}
.nav nav a{color:var(--hdr-text)}
.nav nav a:hover{color:var(--gold2)}
.hero{background:var(--hero-bg)}
.reel{background:var(--reel-bg)}
#services{background:var(--svc-bg)}
#work{background:var(--work-bg)}
#process{background:var(--process-bg)}
.contact{background:var(--contact-bg)}
#services,#work,#process{padding:64px 0}
.btn{color:var(--btn-text)}
.btn.ghost{color:var(--gold2)}
.site-footer{background:var(--ftr-bg);color:var(--ftr-text)}
.logo-img{height:var(--logo-h)}
.logo-img.foot{height:var(--logo-fh)}
@media(max-width:760px){.logo-img{height:calc(var(--logo-h)*.85)}.logo-img.foot{height:var(--logo-fh)}}

.scene.plate.has-img{filter:none}
.scene.plate.has-img::after{display:none}

/* Font sizes (values come from Customize) */
body{font-size:var(--fs-body)}
.nav nav{font-size:var(--fs-nav)}
.hero h1{font-size:clamp(calc(var(--fs-hero)*.45),8vw,var(--fs-hero))}
h2{font-size:clamp(calc(var(--fs-h2)*.6),5vw,var(--fs-h2))}
.svc h3,.steps h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead)}
.hero .lead{font-size:calc(var(--fs-lead) + 2px)}
.svc p,.steps p{font-size:var(--fs-small)}
.poster-card p{font-size:calc(var(--fs-small) - 2px)}
.poster-card h3{font-size:var(--fs-poster)}
.btn{font-size:var(--fs-btn)}
.site-footer{font-size:var(--fs-footer)}

/* Footer links and social icon */
.site-footer .wrap{align-items:center;gap:18px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a:hover{color:var(--gold2)}
.foot-right{display:flex;align-items:center;gap:14px}
.social{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--gold)}
.social:hover{color:var(--gold2);border-color:var(--gold)}
.social svg{width:18px;height:18px;fill:currentColor}

/* Content pages (About, Terms, Privacy) */
.page-body{padding:64px 24px 80px;max-width:860px}
.entry{max-width:760px}
.entry p{margin:0 0 1.1em;color:var(--fg)}
.entry h2{font-size:clamp(22px,3vw,30px);margin:1.8em 0 .6em}
.entry ul{padding-left:1.3em;margin:0 0 1.1em}
.entry li{margin-bottom:.4em}
.entry a{color:var(--gold2);text-decoration:underline}

/* Hero background video */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero.has-video{padding:96px 0 88px}
.hero-bg{position:absolute;inset:0;z-index:0;background:#000;overflow:hidden}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero-bg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;width:100%;height:100%}
.hero.has-video::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,var(--ov)),rgba(0,0,0,var(--ov)) 65%,var(--hero-bg))}

/* Production approach section */
#approach{background:var(--approach-bg);padding:64px 0}
.approach-list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px}
.approach-list li{position:relative;padding:18px 20px 18px 54px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--fg);font-size:calc(var(--fs-small) + 1px);line-height:1.55}
.approach-list li::before{content:"";position:absolute;left:21px;top:25px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent)}

/* Mobile menu */
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:46px;height:46px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--gold);transition:transform .2s,opacity .2s}
.mnav-cta{display:none}
img,video,iframe{max-width:100%}

@media(max-width:900px){
  .approach-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .site-header .hdr-cta{display:none}
  .site-header .nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px 24px 22px;background:var(--hdr-bg);border-bottom:1px solid var(--line)}
  .site-header.open .nav nav{display:flex}
  .site-header .nav nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:calc(var(--fs-nav) + 2px)}
  .site-header .nav nav a.mnav-cta{display:block;margin-top:18px;text-align:center;border-bottom:0;padding:13px 24px;color:var(--btn-text)}
  .site-header.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Small screens */
@media(max-width:600px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
  #services,#approach,#work,#process{padding:48px 0}
  .hero{padding:40px 0 56px}
  .hero.has-video{padding:64px 0 56px}
  .pass{aspect-ratio:16/10;margin-top:36px}
  .cta .btn{width:100%;text-align:center}
  .posters{grid-template-columns:repeat(2,1fr);gap:12px}
  .poster-card{padding:12px}
  .poster-card h3{font-size:calc(var(--fs-poster)*.8)}
  .approach-list li{padding:16px 16px 16px 50px}
  .site-footer .wrap{flex-direction:column;text-align:center;justify-content:center}
  .foot-brand,.foot-right,.foot-links{justify-content:center}
  .page-body{padding:40px 20px 56px}
}

/* Tighter, adjustable spacing between sections (Customize > Sections) */
#services,#approach,#work,#process{padding:var(--gap) 0}
.reel,.contact{padding:calc(var(--gap)*1.6) 0}
.posters{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-top:36px}
.approach-list,.svc,.steps{margin-top:36px}
@media(max-width:600px){
  #services,#approach,#work,#process{padding:calc(var(--gap)*.7) 0}
  .reel,.contact{padding:calc(var(--gap)*1.2) 0}
  .posters{grid-template-columns:repeat(2,1fr)}
}

/* Header: logo always vertically centered */
.site-header .nav{height:auto;min-height:80px;padding-top:10px;padding-bottom:10px;align-items:center}
.site-header .logo{align-self:center;line-height:0;margin:0}
.site-header .logo-img{margin:0}
.site-header .nav nav,.site-header .hdr-cta,.site-header .nav-toggle{align-self:center}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:600px){.admin-bar .site-header{top:0}}

/* Before / after image position */
.hero .pass{margin-top:calc(48px + var(--pass-shift))}

/* The Team */
#team{background:var(--team-bg);padding:var(--gap) 0}
.team-intro{margin-top:14px;max-width:72ch}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px;margin-top:36px}
.member{text-align:center}
.member .photo{aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--gold);background:var(--card);display:grid;place-items:center}
.member .photo img{width:100%;height:100%;object-fit:cover;display:block}
.member .photo svg{width:46%;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round}
.member h3{font-size:calc(var(--fs-h3)*.8);margin:16px 0 4px;font-weight:600}
.member p{color:var(--gold2);font-size:var(--fs-small)}
@media(max-width:600px){
  .hero .pass{margin-top:calc(36px + var(--pass-shift)*.6)}
  #team{padding:calc(var(--gap)*.7) 0}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}