/*
Theme Name: Ghostframe Studio
Theme URI: https://example.com/ghostframe
Author: Your Studio
Author URI: https://example.com
Description: A one-page portfolio theme for production, VFX and 3D studios. Hero, capabilities, work grid (custom "Projects" post type), pipeline, clients, testimonial and contact — every piece of text and every project is editable from the WordPress admin (Customizer + Projects). No page builder or extra plugin required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ghostframe
*/

:root{
  --ink:#0a0a0c;
  --ink-2:#131316;
  --ink-3:#1b1b1f;
  --bone:#edeae2;
  --bone-dim:#a6a39a;
  --tally:#e8402d;
  --steel:#7fa0ac;
  --line:rgba(237,234,226,0.12);
  --line-strong:rgba(237,234,226,0.22);
  --display:'Big Shoulders Display',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
}
::selection{background:var(--tally);color:var(--bone);}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

.mono{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-dim);
  display:flex;align-items:center;gap:10px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--tally);flex-shrink:0;}

/* ---------- NAV ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,12,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;max-width:1240px;margin:0 auto;
}
.logo{
  font-family:var(--display);
  font-weight:700;
  font-size:22px;
  letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;
}
.logo .rec{
  width:8px;height:8px;border-radius:50%;background:var(--tally);
  animation:blink 1.6s infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.15;}}
nav.links{display:flex;gap:34px;}
nav.links a{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-dim);
  transition:color .2s;
  position:relative;
}
nav.links a:hover{color:var(--bone);}
.nav-right{display:flex;align-items:center;gap:28px;}
.tc{font-family:var(--mono);font-size:12px;color:var(--bone-dim);letter-spacing:.05em;}
.nav-cta{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:9px 16px;
  transition:all .2s;
}
.nav-cta:hover{border-color:var(--tally);color:var(--tally);}
@media(max-width:860px){
  nav.links{display:none;}
  .tc{display:none;}
}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
  padding:140px 0 80px;
  background:
    radial-gradient(ellipse 60% 50% at 75% 15%, rgba(232,64,45,0.08), transparent),
    linear-gradient(180deg,#0a0a0c 0%,#0a0a0c 100%);
}
.viewfinder{
  position:absolute;inset:90px 20px 40px;
  border:1px solid var(--line);
  pointer-events:none;
}
.viewfinder .corner{position:absolute;width:22px;height:22px;}
.viewfinder .corner::before,.viewfinder .corner::after{content:'';position:absolute;background:var(--bone-dim);}
.corner.tl{top:-1px;left:-1px;} .corner.tr{top:-1px;right:-1px;} .corner.bl{bottom:-1px;left:-1px;} .corner.br{bottom:-1px;right:-1px;}
.corner::before{width:100%;height:1.5px;top:0;}
.corner::after{width:1.5px;height:100%;left:0;}
.corner.tr::before{right:0;} .corner.tr::after{right:0;}
.corner.bl::before{bottom:0;} .corner.bl::after{bottom:0;}
.corner.br::before{bottom:0;right:0;} .corner.br::after{bottom:0;right:0;}
.vf-tag{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--bone-dim);text-transform:uppercase;}
.vf-tag.aspect{top:8px;right:14px;}
.vf-tag.rec-tag{top:8px;left:14px;display:flex;align-items:center;gap:6px;color:var(--tally);}
.vf-tag.rec-tag span.d{width:6px;height:6px;border-radius:50%;background:var(--tally);animation:blink 1.6s infinite;}
.vf-tag.slate{bottom:8px;left:14px;}
.vf-tag.tc-live{bottom:8px;right:14px;}
.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;opacity:.35;}
.crosshair::before,.crosshair::after{content:'';position:absolute;background:var(--bone-dim);}
.crosshair::before{width:100%;height:1px;top:50%;}
.crosshair::after{height:100%;width:1px;left:50%;}

.hero-inner{position:relative;z-index:2;}
.hero .eyebrow{margin-bottom:26px;}
h1.hero-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(48px,8vw,116px);
  line-height:0.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  max-width:900px;
}
h1.hero-title em{
  font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--bone);
}
.hero-sub{
  font-size:17px;color:var(--bone-dim);max-width:480px;margin-top:26px;line-height:1.6;
}
.hero-ctas{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 26px;display:inline-flex;align-items:center;gap:10px;
  transition:all .2s ease;border:1px solid transparent;cursor:pointer;background:none;color:inherit;
}
.btn-primary{background:var(--tally);color:var(--ink);}
.btn-primary:hover{background:#ff5540;}
.btn-ghost{border-color:var(--line-strong);color:var(--bone);}
.btn-ghost:hover{border-color:var(--bone);}
.play-ico{width:9px;height:9px;border-left:9px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;}

.hero-stats{
  display:flex;gap:56px;margin-top:80px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap;
}
.stat b{font-family:var(--display);font-size:34px;font-weight:700;display:block;}
.stat span{font-family:var(--mono);font-size:11px;color:var(--bone-dim);letter-spacing:.08em;text-transform:uppercase;}

/* ---------- SECTION HEADS ---------- */
section{padding:120px 0;position:relative;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:64px;gap:24px;flex-wrap:wrap;}
h2.sec-title{
  font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,58px);
  text-transform:uppercase;line-height:.98;letter-spacing:-.01em;
}
.sec-desc{max-width:340px;color:var(--bone-dim);font-size:14.5px;line-height:1.6;}
hr.rule{border:none;border-top:1px solid var(--line);}

/* ---------- CAPABILITIES (SLATE ROWS) ---------- */
.slate-row{
  display:grid;grid-template-columns:90px 1fr 1.3fr;gap:32px;
  padding:38px 0;border-top:1px solid var(--line);align-items:start;
}
.slate-row:last-child{border-bottom:1px solid var(--line);}
.slate-num{font-family:var(--mono);font-size:13px;color:var(--tally);padding-top:6px;}
.slate-name{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,42px);text-transform:uppercase;line-height:1;}
.slate-body p{color:var(--bone-dim);font-size:15px;max-width:520px;margin-bottom:18px;line-height:1.65;}
.tag-list{display:flex;flex-wrap:wrap;gap:9px;}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:6px 12px;color:var(--bone-dim);
}
@media(max-width:760px){.slate-row{grid-template-columns:1fr;gap:12px;}}

/* ---------- WORK GRID ---------- */
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.work-grid{grid-template-columns:1fr;}}
.work-card{
  background:var(--ink);position:relative;aspect-ratio:4/5;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;
}
.work-card .thumb{
  position:absolute;inset:0;
  background:linear-gradient(150deg,var(--g1,#26262b),var(--g2,#0a0a0c) 70%);
  background-size:cover;background-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.work-card:hover .thumb{transform:scale(1.06);}
.work-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,0.05) 55%);
}
.work-meta{position:relative;z-index:2;padding:22px;width:100%;}
.work-shot{font-family:var(--mono);font-size:11px;color:var(--tally);letter-spacing:.1em;margin-bottom:8px;display:flex;justify-content:space-between;}
.work-title{font-family:var(--display);font-weight:600;font-size:23px;text-transform:uppercase;line-height:1.05;}
.work-cat{font-family:var(--mono);font-size:11px;color:var(--bone-dim);margin-top:8px;letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:all .3s;}
.work-card:hover .work-cat{opacity:1;transform:translateY(0);}

/* ---------- PROCESS TIMELINE ---------- */
.filmstrip{position:relative;padding:0;}
.strip-track{
  display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.strip-step{
  padding:30px 20px;border-left:1px solid var(--line);position:relative;
}
.strip-step:first-child{border-left:none;}
.strip-step .sn{font-family:var(--mono);font-size:11px;color:var(--bone-dim);margin-bottom:26px;display:block;}
.strip-step h4{font-family:var(--display);font-size:19px;text-transform:uppercase;font-weight:700;margin-bottom:10px;}
.strip-step p{font-size:12.5px;color:var(--bone-dim);line-height:1.5;}
@media(max-width:900px){.strip-track{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.strip-track{grid-template-columns:repeat(2,1fr);}}

/* ---------- CLIENTS ---------- */
.clients-row{
  display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);
}
.client{
  flex:1 1 200px;padding:34px 10px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.02em;color:var(--bone-dim);
  text-transform:uppercase;transition:color .2s;
}
.client:hover{color:var(--bone);}

/* ---------- TESTIMONIAL ---------- */
.testimonial{padding:130px 0;text-align:center;}
.testimonial blockquote{
  font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,46px);
  line-height:1.2;max-width:940px;margin:0 auto;text-transform:none;
}
.testimonial cite{
  display:block;margin-top:32px;font-family:var(--mono);font-style:normal;
  font-size:12px;color:var(--bone-dim);letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:50px;}}
.field{margin-bottom:22px;}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:10px;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);
  color:var(--bone);font-family:var(--body);font-size:16px;padding:10px 0;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--tally);}
.field textarea{resize:vertical;min-height:80px;}
.field select option{background:var(--ink);}
.contact-info a.email-link{font-family:var(--display);font-weight:700;font-size:32px;text-transform:uppercase;display:inline-block;margin-bottom:4px;}
.contact-info a.email-link:hover{color:var(--tally);}
.info-list{margin-top:50px;display:flex;flex-direction:column;gap:14px;}
.info-list .row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:14px 0;font-family:var(--mono);font-size:12.5px;color:var(--bone-dim);letter-spacing:.04em;}
.info-list .row span:last-child{color:var(--bone);}
.social-row{display:flex;gap:22px;margin-top:36px;}
.social-row a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone-dim);}
.social-row a:hover{color:var(--tally);}
.form-success{color:var(--tally);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-top:20px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:50px 0 40px;}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.foot-logo{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;}
.foot-end{font-family:var(--mono);font-size:11px;color:var(--bone-dim);letter-spacing:.1em;text-transform:uppercase;}
.foot-copy{font-family:var(--mono);font-size:11px;color:var(--bone-dim);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}