:root {
  --dark: #0d0b09;
  --copper: #f68b3a;      /* logo bracket orange */
  --copper-deep: #a8602f;
  --muted: #b9a999;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: "Courier New", Courier, ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--dark); }

/* One static orange-to-black gradient behind the whole site. Fixed, never moves. */
body {
  font-family: var(--mono); color: #eadfd3; line-height: 1.8; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 120% 110% at 0% 100%, #b4652f 0%, #3a2112 32%, var(--dark) 68%);
}
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.center { text-align: center; }
.eyebrow { font-size: .78rem; letter-spacing: .4em; text-transform: uppercase; color: var(--copper); margin-bottom: 28px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.15; color: #fff; }
section { padding: 110px 0; }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 14px 32px; background: rgba(13,11,9,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav-logo { display: block; }
.nav-logo img { height: 42px; width: auto; display: block; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { text-decoration: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.nav nav a:hover { color: var(--copper); }

/* hero */
.hero { background: transparent; position: relative; min-height: 100vh; padding: 0; display: grid; place-items: center; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(rgba(13,11,9,.45), rgba(13,11,9,.3) 55%, var(--dark) 100%); }
.hero-content { position: relative; text-align: center; padding: 100px 24px 40px; }
.hero-video { transition: filter 1.6s ease, transform 1.6s ease; }
.intro .hero-video { filter: blur(18px); transform: scale(1.08); }
.intro.focus .hero-video { filter: none; transform: none; }
.logo-stage { --w: min(600px, 80vw); --u: calc(var(--w) / 1200); position: relative; width: var(--w); height: calc(540 * var(--u)); margin: 0 auto; }
.logo-stage span { position: absolute; display: block; animation-fill-mode: both; }
.corner { width: calc(73 * var(--u)); height: calc(73 * var(--u)); border: 0 solid #fff; animation: open 1.667s cubic-bezier(.65,0,.2,1) .4s both; }
.c-tl { left: calc(96 * var(--u)); top: calc(96 * var(--u)); border-top-width: calc(17 * var(--u)); border-left-width: calc(17 * var(--u)); border-color: #f68b3a; --dx: 424; --dy: 117; }
.c-tr { left: calc(1030 * var(--u)); top: calc(96 * var(--u)); border-top-width: calc(17 * var(--u)); border-right-width: calc(17 * var(--u)); --dx: -423; --dy: 117; }
.c-bl { left: calc(96 * var(--u)); top: calc(264 * var(--u)); border-bottom-width: calc(17 * var(--u)); border-left-width: calc(17 * var(--u)); --dx: 424; --dy: -14; }
.c-br { left: calc(1030 * var(--u)); top: calc(264 * var(--u)); border-bottom-width: calc(17 * var(--u)); border-right-width: calc(17 * var(--u)); --dx: -423; --dy: -14; }
@keyframes open { from { transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))); } to { transform: none; } }
.word, .films { background: url(assets/logo-light.png) no-repeat; background-size: calc(1200 * var(--u)) auto; }
.word { left: calc(236 * var(--u)); top: calc(176 * var(--u)); width: calc(728 * var(--u)); height: calc(82 * var(--u)); background-position: calc(-236 * var(--u)) calc(-176 * var(--u)); -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); animation: reveal 1.4s cubic-bezier(.65,0,.2,1) .667s forwards; }
@keyframes reveal { from { -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
.films { left: calc(449 * var(--u)); top: calc(403 * var(--u)); width: calc(300 * var(--u)); height: calc(38 * var(--u)); background-position: calc(-449 * var(--u)) calc(-403 * var(--u)); opacity: 0; animation: filmsIn .933s cubic-bezier(.215,.61,.355,1) 2.067s forwards; }
@keyframes filmsIn { from { opacity: 0; transform: translateY(calc(18 * var(--u))); } to { opacity: 1; transform: none; } }
.hero-tag { transition: opacity 1.2s ease .3s; }
.intro .hero-tag { opacity: 0; }
.intro.focus .hero-tag { opacity: 1; }
.hero-tag { margin-top: 22px; font-style: italic; font-weight: 700; letter-spacing: .1em; color: #fff; }

/* about */
.about-copy p { color: #d8c9ba; font-size: 1.05rem; }
.signoff { margin-top: 24px; font-style: italic; font-weight: 700; color: #fff !important; }

/* portfolio */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.thumb { aspect-ratio: 16 / 10; background: rgba(0,0,0,.35); border: 1px solid rgba(246,139,58,.3); display: grid; place-items: center; }
.thumb span { font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-top: 16px; color: #fff; }

/* services: small for now */
.compact { padding: 70px 0; }
.services { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .95rem; color: #d8c9ba; }
.services li::before { content: "— "; color: var(--copper); }
.services small { color: var(--muted); font-size: .8rem; margin-left: 6px; }

/* contact: circles */
.circles { list-style: none; padding: 0; margin-top: 44px; display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.circles li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.circles a { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.25); transition: background .2s, color .2s, border-color .2s; }
.circles a:hover { background: var(--copper); border-color: var(--copper); color: var(--dark); }
.circles svg { width: 30px; height: 30px; }
.circles span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

footer { text-align: center; padding: 32px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

a:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

@media (max-width: 800px) {
  section { padding: 70px 0; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .work-grid { grid-template-columns: 1fr; }
  .nav { padding: 10px 16px; }
  .nav-logo img { height: 34px; }
  .nav nav { gap: 12px; }
  .nav nav a { font-size: .62rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }