@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("assets/fonts/dm-mono-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("assets/fonts/dm-mono-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --ink: #e9e7e2;
  --muted: #9c9b96;
  --line: rgba(233, 231, 226, .18);
  --bg: #0c0d0c;
  --accent: #c6ff4a;
  --serif: Georgia, "Times New Roman", serif;
}
.legal-content { margin: 0 auto; max-width: 820px; padding: 150px 24px 96px; overflow-wrap: anywhere; }
.legal-content h1 { font-size: clamp(46px, 8vw, 72px); letter-spacing: -.05em; line-height: 1.1; margin: 28px 0 16px; }
.legal-content h2 { font-size: 22px; letter-spacing: -.025em; line-height: 1.3; margin: 40px 0 12px; }
.legal-content p { color: var(--muted); line-height: 1.75; }
.legal-content a { text-decoration: underline; text-underline-offset: .2em; }
.legal-content a:hover, .footer-bottom a:hover { color: var(--accent); }
.legal-back, .legal-content .muted { font-size: 13px; }
.legal-pending { color: var(--accent); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Manrope", sans-serif; font-size: 15px; }
a { color: inherit; text-decoration: none; }
.section-pad { padding-left: clamp(24px, 7vw, 112px); padding-right: clamp(24px, 7vw, 112px); }
.site-header { align-items: center; display: flex; justify-content: space-between; left: 0; padding: 28px clamp(24px, 7vw, 112px); position: absolute; right: 0; top: 0; z-index: 3; }
.wordmark { font-size: 19px; font-weight: 800; letter-spacing: -.08em; }
.wordmark img { display: block; height: auto; width: 144px; }
.wordmark i { color: var(--muted); font-style: normal; font-weight: 500; }
.wordmark b { color: var(--accent); }
.desktop-nav { display: flex; gap: 38px; margin-left: auto; margin-right: 55px; }
.desktop-nav a, .header-cta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.desktop-nav a { color: var(--muted); transition: color .2s; }
.desktop-nav a:hover, .footer-links a:hover { color: var(--accent); }
.header-cta { border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.header-cta span, .text-link span, .submit-button span { color: var(--accent); margin-left: 9px; }
.menu-toggle { background: none; border: 0; display: none; }
.hero { display: flex; flex-direction: column; isolation: isolate; justify-content: flex-end; min-height: 100vh; overflow: hidden; padding-bottom: 26px; padding-top: 150px; position: relative; }
.hero:before { background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.08) 35%, rgba(0,0,0,.48) 66%, #0c0d0c 100%), linear-gradient(90deg, rgba(0,0,0,.25), transparent 75%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.hero > :not(.hero-media) { position: relative; z-index: 2; }
.hero .hero-media { aspect-ratio: auto; background: #232820 url("assets/showreel-poster.jpg") center / cover; inset: 0; position: absolute; z-index: 0; }
.hero .eyebrow, .hero-bottom p { color: #e9e7e2; }
.site-header .desktop-nav a { color: #e9e7e2; }
.eyebrow, .section-label { color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { align-items: center; display: flex; gap: 10px; margin-bottom: 38px; }
.dot { background: var(--accent); border-radius: 50%; display: inline-block; height: 6px; width: 6px; }
h1, h2 { font-size: clamp(60px, 9.5vw, 150px); letter-spacing: -.075em; line-height: .87; margin: 0; }
h1 em, h2 em { color: var(--accent); font-family: var(--serif); font-weight: 400; letter-spacing: -.09em; }
.hero-bottom { align-items: flex-end; display: flex; justify-content: space-between; margin-top: 82px; }
.hero-bottom p, .section-heading > p, .about-copy p, .contact-intro p { color: var(--muted); line-height: 1.65; }
.circle-link { align-items: center; border: 1px solid var(--line); border-radius: 50%; display: flex; height: 64px; justify-content: center; transition: background .2s, color .2s; width: 64px; }
.circle-link:hover { background: var(--accent); color: var(--bg); }
.showreel { padding: 75px clamp(24px, 7vw, 112px) 140px; }
.showreel-copy { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 32px; }
.showreel h2, .section-heading h2, .about h2, .contact h2 { font-size: clamp(52px, 7.2vw, 110px); margin-top: 27px; }
.showreel-player { aspect-ratio: 16 / 9; background: #0c0d0c; overflow: hidden; position: relative; }
.showreel-player video { display: block; height: 100%; inset: 0; object-fit: cover; opacity: 0; pointer-events: none; position: absolute; width: 100%; }
.showreel-player video.is-ready { opacity: 1; }
.video-cover { display: block; height: 100%; inset: 0; object-fit: cover; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.has-video-frame > .video-cover { opacity: 0; transition: opacity .3s ease; }
.project-film .project-number { z-index: 2; }
.project-video-error { z-index: 2; }
.showreel-error { color: var(--muted); padding: 24px; position: absolute; }
.video-frame video { display: block; height: 100%; object-fit: cover; opacity: .65; position: absolute; width: 100%; }
.video-placeholder { align-items: center; display: flex; flex-direction: column; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.play-button { align-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; display: flex; font-size: 17px; height: 78px; justify-content: center; padding-left: 4px; transition: background .2s, color .2s; width: 78px; }
.video-placeholder:hover .play-button { background: var(--accent); color: var(--bg); }
.video-placeholder span { font-size: 13px; letter-spacing: .1em; margin-top: 18px; text-transform: uppercase; }
.video-placeholder small { color: var(--muted); margin-top: 8px; }
.video-caption { bottom: 20px; color: rgba(255,255,255,.65); display: flex; font-family: "DM Mono"; font-size: 10px; justify-content: space-between; left: 22px; letter-spacing: .1em; position: absolute; right: 22px; text-transform: uppercase; }
.work { border-top: 1px solid var(--line); padding-bottom: 145px; padding-top: 96px; }
.section-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 75px; }
.section-heading > p { max-width: 290px; }
.project-grid { display: grid; gap: 42px 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card { display: block; }
.project-image { min-height: 360px; overflow: hidden; position: relative; transition: filter .3s; }
.project-large .project-image { min-height: 570px; }
.project-film { background: #171a16; }
.project-grid .project-film { aspect-ratio: 16 / 9; min-height: 0; }
.project-film video { display: block; height: 100%; inset: 0; object-fit: cover; pointer-events: none; position: absolute; width: 100%; }
.project-video-error { background: rgba(12,13,12,.8); bottom: 12px; color: var(--ink); font-size: 12px; left: 12px; padding: 12px; position: absolute; right: 12px; }
.project-meta { flex-wrap: wrap; gap: 10px; }
.project-card:hover .project-image { filter: saturate(1.35); }
.project-number, .project-arrow { font-family: "DM Mono"; font-size: 10px; letter-spacing: .08em; position: absolute; top: 20px; }
.project-number { left: 20px; }.project-arrow { right: 20px; font-size: 20px; }
.project-meta { display: flex; justify-content: space-between; padding: 17px 0; }
.project-meta strong { font-size: 14px; }.project-meta span, .coming-note { color: var(--muted); font-family: "DM Mono"; font-size: 10px; text-transform: uppercase; }
.coming-note { margin: 45px 0 0; }
.about { align-items: center; background: #171a16; display: grid; gap: clamp(45px, 10vw, 170px); grid-template-columns: 1fr 1fr; padding-bottom: 150px; padding-top: 150px; }
.about-image { aspect-ratio: 1 / 1.1; background: radial-gradient(circle at 50% 30%, #888373, #393d34 42%, #181b17 72%); display: flex; justify-content: center; overflow: hidden; position: relative; }
.about-portrait { height: 100%; object-fit: cover; object-position: 60% 35%; position: absolute; width: 100%; }
.portrait-placeholder { align-self: center; color: rgba(233,231,226,.7); font-family: var(--serif); font-size: clamp(130px, 20vw, 270px); line-height: 1; }
.portrait-placeholder span { color: var(--accent); }.image-note { bottom: 20px; font-family: "DM Mono"; font-size: 10px; left: 20px; letter-spacing: .12em; position: absolute; text-transform: uppercase; }
.about-copy p { max-width: 430px; }.about-copy h2 { margin-bottom: 48px; }
.text-link { border-bottom: 1px solid var(--line); display: inline-block; font-size: 12px; margin-top: 22px; padding-bottom: 9px; }
.contact { display: grid; gap: 80px; grid-template-columns: .9fr 1.1fr; padding-bottom: 150px; padding-top: 150px; }
.contact-intro p { margin-top: 50px; max-width: 360px; }.contact-form { display: flex; flex-direction: column; gap: 25px; padding-top: 12px; }
.contact-form label { border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; padding-bottom: 13px; }
.contact-form label span { color: var(--muted); font-family: "DM Mono"; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
input, select, textarea { background: transparent; border: 0; color: var(--ink); font: inherit; outline: 0; padding: 0; resize: vertical; }
select { appearance: none; } input::placeholder, textarea::placeholder, select { color: #777972; }
.submit-button, .outline-button { background: var(--accent); border: 0; color: var(--bg); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 19px 24px; text-align: left; text-transform: uppercase; }
.contact-options { align-items: center; display: flex; gap: 16px; grid-column: 2; justify-content: space-between; margin-top: -35px; }
.contact-options > a:first-child { font-size: 13px; }.contact-options > span { color: var(--muted); font-family: "DM Mono"; font-size: 10px; }.outline-button { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; padding-bottom: 25px; padding-top: 38px; }
.footer-center { color: var(--muted); font-family: var(--serif); font-size: 14px; text-align: center; }.footer-links { display: flex; gap: 24px; justify-content: flex-end; }.footer-links a { font-family: "DM Mono"; font-size: 10px; text-transform: uppercase; }.footer-bottom { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-family: "DM Mono"; font-size: 9px; grid-column: 1 / -1; justify-content: space-between; margin-top: 75px; padding-top: 18px; text-transform: uppercase; }
@media (max-width: 700px) {
  .desktop-nav, .header-cta { display: none; }.menu-toggle { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 8px 8px; }.menu-toggle span { background: var(--ink); display: block; height: 1px; width: 25px; }
  .desktop-nav.is-open { background: rgba(12, 13, 12, .96); display: flex; flex-direction: column; gap: 22px; left: 0; padding: 85px 24px 28px; position: absolute; right: 0; top: 0; z-index: -1; }.desktop-nav.is-open a { font-size: 15px; }
  h1 { font-size: clamp(56px, 16vw, 90px); }.hero { min-height: 92vh; padding-bottom: 20px; }.hero-bottom { align-items: flex-start; margin-top: 65px; }.circle-link { height: 50px; width: 50px; }
  .showreel { padding-bottom: 90px; padding-top: 50px; }.showreel-copy, .section-heading { align-items: flex-start; flex-direction: column; gap: 35px; }.showreel h2, .section-heading h2, .about h2, .contact h2 { font-size: clamp(48px, 14vw, 72px); }
  .project-grid { display: block; }.project-card { margin-bottom: 40px; }.project-image, .project-large .project-image { min-height: 95vw; }.project-card:last-child { margin-bottom: 0; }
  .work, .about, .contact { padding-bottom: 90px; padding-top: 90px; }.about, .contact { display: flex; flex-direction: column; }.about-image { width: 100%; }.about-copy { width: 100%; }.contact-intro, .contact-form { width: 100%; }.contact-options { align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-top: -45px; width: 100%; }.contact-options .outline-button { width: 100%; }.site-footer { display: flex; flex-wrap: wrap; gap: 28px; }.footer-center { order: 3; text-align: left; width: 100%; }.footer-links { margin-left: auto; }.footer-bottom { margin-top: 35px; width: 100%; }.desktop-only { display: none; }
}

.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 13px; line-height: 1.6; margin: 0; }
.form-status[data-state="error"] { color: #ffb7a8; }
.form-status[data-state="success"] { color: var(--accent); }
.submit-button:disabled { cursor: wait; opacity: .65; }