/*
Theme Name: JumpCut Pictures
Theme URI: https://www.jumpcutpictures.com/
Author: JumpCut Pictures
Description: A cinematic, portfolio-first WordPress theme for JumpCut Pictures.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jumpcut-pictures
*/

:root {
  --black: #070707;
  --charcoal: #101010;
  --charcoal-2: #171717;
  --white: #f4f4f2;
  --muted: #b9b9b4;
  --red: #e52b20;
  --line: rgba(255,255,255,.14);
  --max: 1180px;
  --pad: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; }
.site-main { overflow: hidden; }
.container { width: min(calc(100% - 2 * var(--pad)), var(--max)); margin: 0 auto; }
.eyebrow {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.section { padding: 110px 0; }
.section-title {
  margin: 8px 0 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: .98;
  letter-spacing: -.035em;
}
.section-copy { color: var(--muted); max-width: 620px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: .25s ease;
}
.btn::after { content: "→"; color: var(--red); font-size: 18px; line-height: 1; }
.btn:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-2px); }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary::after { color: #fff; }
.btn-primary:hover { background: #fff; color: #000; border-color: #fff; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0; left: 0; right: 0;
  padding: 24px var(--pad);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.logo { display:flex; flex-direction:column; line-height:.82; font-weight:800; letter-spacing:.05em; }
.logo-main { font-size:25px; }
.logo-main span { color:var(--red); }
.logo-sub { font-size:10px; letter-spacing:.45em; margin-top:6px; margin-left:2px; }
.main-nav ul { display:flex; gap:34px; list-style:none; margin:0; padding:0; }
.main-nav a { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.main-nav a:hover { color:var(--red); }

.hero {
  min-height: 92vh;
  position: relative;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 75% 48%, rgba(229,43,32,.12), transparent 26%),
    linear-gradient(100deg, #030303 12%, rgba(3,3,3,.78) 40%, rgba(3,3,3,.25) 75%),
    linear-gradient(135deg, #1b1b1b, #050505 70%);
}
.hero-media {
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.hero-media video, .hero-media img {
  width:100%; height:100%; object-fit:cover;
}
.hero-media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,.15) 100%);
}
.hero-placeholder {
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(0,0,0,.88), rgba(0,0,0,.28)),
    radial-gradient(circle at 75% 50%, rgba(66,89,117,.55), transparent 30%),
    linear-gradient(145deg, #121212, #343a40 50%, #070707 80%);
}
.hero-content { position:relative; z-index:2; padding-top:90px; max-width:750px; }
.hero h1 {
  margin: 14px 0 20px;
  font-size: clamp(54px, 8vw, 106px);
  line-height: .87;
  letter-spacing: -.055em;
  text-transform:uppercase;
}
.hero h1 span { color:var(--red); }
.hero p { max-width:570px; color:#deded9; font-size:18px; }
.hero-actions { margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }

.capabilities { background:#0b0b0b; }
.capability-grid {
  margin-top:52px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.capability-card {
  min-height:360px;
  position:relative;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  background:#151515;
  border:1px solid rgba(255,255,255,.08);
}
.capability-card::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 25%, rgba(0,0,0,.94) 90%);
}
.capability-art {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 32%, rgba(229,43,32,.35), transparent 24%),
    linear-gradient(135deg, #242424, #090909);
}
.capability-card:nth-child(2) .capability-art { background: radial-gradient(circle at 58% 40%, rgba(180,115,70,.35), transparent 22%), linear-gradient(135deg,#272727,#090909); }
.capability-card:nth-child(3) .capability-art { background: radial-gradient(circle at 55% 35%, rgba(70,90,150,.45), transparent 25%), linear-gradient(135deg,#24262b,#080808); }
.capability-card:nth-child(4) .capability-art { background: radial-gradient(circle at 45% 35%, rgba(229,43,32,.3), transparent 25%), linear-gradient(135deg,#2b2020,#080808); }
.capability-icon { position:absolute; top:24px; left:24px; width:46px; height:46px; border:1px solid var(--red); color:var(--red); display:grid; place-items:center; font-size:20px; z-index:2; }
.capability-card > *:not(.capability-art):not(.capability-icon) { position:relative; z-index:2; }
.capability-card h3 { font-size:24px; line-height:1.05; margin:0 0 10px; }
.capability-card p { color:#c1c1bd; font-size:14px; margin:0 0 20px; }
.text-link { color:#fff; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.text-link::after { content:"  →"; color:var(--red); font-size:16px; }

.why {
  background:linear-gradient(90deg,#111 0%,#111 50%,#0b0b0b 50%);
}
.why-grid { display:grid; grid-template-columns:1fr 1fr; min-height:500px; }
.why-image {
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.4)),
    radial-gradient(circle at 55% 45%, rgba(82,104,128,.45), transparent 28%),
    linear-gradient(145deg,#303030,#080808);
  min-height:500px;
}
.why-copy { padding:70px clamp(35px,6vw,90px); display:flex; flex-direction:column; justify-content:center; }
.why-copy h2 { font-size:clamp(38px,5vw,66px); line-height:.95; margin:12px 0 25px; }
.why-copy p { color:var(--muted); max-width:520px; }

.contact-band {
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,#090909 0%,#090909 55%,#1a0d0d 100%);
}
.contact-band::after {
  content:""; position:absolute; width:45vw; height:45vw; right:-7vw; top:-12vw;
  border-radius:50%;
  background:radial-gradient(circle, rgba(229,43,32,.38) 0, rgba(80,30,30,.18) 22%, transparent 52%);
  filter:blur(8px);
}
.contact-inner { position:relative; z-index:2; padding:90px 0; display:flex; justify-content:space-between; gap:50px; align-items:center; }
.contact-band h2 { font-size:clamp(42px,6vw,72px); line-height:.95; margin:10px 0 18px; }
.contact-details { display:flex; gap:35px; flex-wrap:wrap; color:#ddd; }
.contact-details a:hover { color:var(--red); }

.site-footer { border-top:1px solid var(--line); background:#050505; padding:38px var(--pad); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:25px; }
.footer-nav { display:flex; gap:25px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.footer-nav a:hover { color:var(--red); }
.copyright { color:#777; font-size:11px; }

.page-hero { padding:190px 0 90px; background:linear-gradient(145deg,#161616,#050505); }
.page-hero h1 { font-size:clamp(55px,8vw,100px); line-height:.9; margin:15px 0; letter-spacing:-.05em; text-transform:uppercase; }
.content-area { padding:80px 0 120px; }
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:40px 20px; }
.work-card { display:block; }
.work-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,#242424,#090909); overflow:hidden; }
.work-thumb img { width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.work-card:hover img { transform:scale(1.04); }
.work-meta { padding-top:16px; }
.work-meta h2 { margin:0 0 5px; font-size:25px; }
.work-meta p { color:var(--muted); margin:0; font-size:14px; }
.single-project .project-hero-image { margin-top:45px; max-height:75vh; object-fit:cover; width:100%; }
.project-content { max-width:800px; margin:60px auto; }
.project-content p { color:#c7c7c2; font-size:18px; }

.service-list { display:grid; gap:20px; }
.service-row { display:grid; grid-template-columns:90px 1fr 2fr; gap:30px; padding:40px 0; border-top:1px solid var(--line); }
.service-row:last-child { border-bottom:1px solid var(--line); }
.service-number { color:var(--red); font-size:13px; font-weight:700; letter-spacing:.15em; }
.service-row h2 { margin:0; font-size:34px; line-height:1; }
.service-row p { color:var(--muted); max-width:620px; margin:0; }

.contact-form { max-width:760px; }
.contact-form label { display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 8px; }
.contact-form input, .contact-form textarea {
  width:100%; background:#111; border:1px solid var(--line); color:#fff; padding:15px; margin:0 0 25px;
}
.contact-form textarea { min-height:180px; resize:vertical; }

.screen-reader-text {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width: 900px) {
  .main-nav ul { gap:17px; }
  .capability-grid { grid-template-columns:repeat(2,1fr); }
  .why { background:#111; }
  .why-grid { grid-template-columns:1fr; }
  .why-image { min-height:380px; }
  .contact-inner { flex-direction:column; align-items:flex-start; }
  .service-row { grid-template-columns:55px 1fr; }
  .service-row p { grid-column:2; }
}
@media (max-width: 620px) {
  .site-header { padding-top:18px; }
  .logo-main { font-size:21px; }
  .main-nav ul { gap:12px; }
  .main-nav a { font-size:9px; letter-spacing:.1em; }
  .hero { min-height:85vh; }
  .hero h1 { font-size:52px; }
  .hero p { font-size:16px; }
  .section { padding:75px 0; }
  .capability-grid, .work-grid { grid-template-columns:1fr; }
  .capability-card { min-height:330px; }
  .why-image { min-height:300px; }
  .why-copy { padding:55px 24px; }
  .contact-inner { padding:70px 0; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-nav { flex-wrap:wrap; }
}