:root {
  --bg: #030201;
  --surface: #090603;
  --surface-2: #100905;
  --text: #f7efe3;
  --muted: #b8a891;
  --accent: #f59e0b;
  --accent-hot: #ffc565;
  --accent-deep: #b45309;
  --border: rgba(245,158,11,.32);
  --glow: rgba(245,120,20,.24);
  --container: 1420px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 72% 12%, rgba(245,120,20,.09), transparent 28rem),
    var(--bg);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .12;
  background:
    url("./assets/film-grain-texture.png") center / 720px 720px repeat,
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,.025) 4px 5px);
  background-blend-mode: screen;
  mix-blend-mode: screen;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(245,158,11,.14);
  background: rgba(2,1,1,.82);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 88px;
  display: grid;
  grid-template-columns: 310px 1fr 210px;
  gap: 24px;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 27px;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 0 18px var(--glow);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 17px;
  border-top: 2px solid var(--accent);
}

.brand-mark::before { left: -1px; transform: rotate(28deg); }
.brand-mark::after { right: -1px; transform: rotate(-28deg); }

.brand strong {
  display: block;
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand small {
  display: block;
  margin-top: 6px;
  color: var(--accent-hot);
  font: 700 9px "Courier New", monospace;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.nav {
  justify-self: center;
  display: flex;
  gap: clamp(18px,3vw,48px);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav a { color: #d7cfc5; transition: color .25s ease; }
.nav a:hover,
.nav a.active { color: var(--accent); }

.header-cta,
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-hot);
  background: rgba(0,0,0,.46);
  box-shadow: 0 0 18px rgba(245,158,11,.06);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.header-cta { justify-self: end; }
.header-cta:hover,
.button:hover { transform: translateY(-2px); background: rgba(245,158,11,.1); box-shadow: 0 10px 28px var(--glow); }

.menu-button {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  background: rgba(0,0,0,.4);
  cursor: pointer;
}

.label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-hero {
  min-height: 72svh;
  display: grid;
  align-items: end;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.7) 68%, rgba(0,0,0,.84)),
    url("./assets/hero-projector-static.jpg") left center / cover no-repeat;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 42%, var(--bg));
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin-left: clamp(280px,32vw,540px);
  padding: 140px 0 90px;
}

.page-hero h1,
.category-title {
  margin: 18px 0 20px;
  font-family: "Arial Narrow", Impact, Arial, sans-serif;
  font-size: clamp(66px,8vw,128px);
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.page-hero h1 span,
.category-title span {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
}

.page-hero p,
.category-intro {
  max-width: 690px;
  margin: 0;
  color: #c8bbae;
  font-size: 17px;
  line-height: 1.65;
}

.film-divider {
  height: 62px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    repeating-linear-gradient(90deg, rgba(245,158,11,.08) 0 24px, #000 24px 46px, rgba(245,158,11,.035) 46px 68px),
    var(--surface);
  animation: filmMove 16s linear infinite;
}

.section { padding: 92px 0; }
.section + .section { border-top: 1px solid rgba(245,158,11,.1); }

.section-head {
  display: grid;
  grid-template-columns: .72fr 1fr;
  gap: 44px;
  align-items: end;
  margin-bottom: 34px;
}

.section-head h2 {
  margin: 12px 0 0;
  font-size: clamp(42px,5vw,76px);
  line-height: .95;
  text-transform: uppercase;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.operations-cases {
  background:
    radial-gradient(circle at 18% 30%, rgba(245,120,20,.08), transparent 28rem),
    #050302;
}

.operations-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1px;
  border: 1px solid rgba(245,158,11,.18);
  background: rgba(245,158,11,.18);
}

.operations-case {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: clamp(28px,3.2vw,48px);
  border: 1px solid rgba(245,158,11,.18);
  background: linear-gradient(150deg,#0c0704,#040201 72%);
  transition: background .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.operations-case::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(320px circle at var(--card-x,70%) var(--card-y,30%), rgba(245,120,20,.16), transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.1));
  opacity: .72;
  pointer-events: none;
  transition: opacity .3s ease;
}

.operations-case > * {
  position: relative;
  z-index: 1;
}

.operations-case:hover {
  transform: translateY(-3px);
  background: linear-gradient(150deg,#160b04,#050201 72%);
  border-color: var(--accent);
  box-shadow: 0 22px 54px rgba(0,0,0,.45), 0 0 28px var(--glow);
}

.operations-case:hover::before {
  opacity: 1;
}

.operations-case > span {
  color: var(--accent);
  font: 800 10px "Courier New",monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.operations-case h3 {
  max-width: 520px;
  margin: 70px 0 18px;
  font-size: clamp(28px,3vw,48px);
  line-height: .98;
  text-transform: uppercase;
}

.operations-case p {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.operations-case strong {
  margin-top: auto;
  padding-top: 38px;
  color: var(--accent-hot);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.operations-case-featured {
  background:
    linear-gradient(135deg,rgba(0,0,0,.34),rgba(0,0,0,.9)),
    url("./assets/journal-construction-sop.jpg") center / cover no-repeat;
}

.operations-case-featured:hover {
  background:
    linear-gradient(135deg,rgba(0,0,0,.24),rgba(0,0,0,.82)),
    url("./assets/journal-construction-sop.jpg") center / cover no-repeat;
}

.operations-case-formats {
  background:
    linear-gradient(135deg,rgba(0,0,0,.38),rgba(0,0,0,.9)),
    url("./assets/journal-every-screen.jpg") center / cover no-repeat;
}

.operations-case-formats:hover {
  background:
    linear-gradient(135deg,rgba(0,0,0,.28),rgba(0,0,0,.82)),
    url("./assets/journal-every-screen.jpg") center / cover no-repeat;
}

.operations-case-ai {
  background:
    linear-gradient(135deg,rgba(0,0,0,.4),rgba(0,0,0,.9)),
    url("./assets/value-ai-workflows.png") center / cover no-repeat;
}

.operations-case-ai:hover {
  background:
    linear-gradient(135deg,rgba(0,0,0,.3),rgba(0,0,0,.82)),
    url("./assets/value-ai-workflows.png") center / cover no-repeat;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}

.portfolio-grid.eight {
  grid-template-columns: repeat(4,1fr);
}

.portfolio-grid.eight .portfolio-card {
  min-height: 340px;
  padding: 22px;
}

.portfolio-grid.eight .portfolio-card h3 {
  font-size: clamp(22px,2.1vw,34px);
}

.portfolio-grid.eight .portfolio-card p {
  font-size: 14px;
}

.portfolio-grid.eight .featured-case {
  grid-column: span 2;
  min-height: 410px;
}

.portfolio-grid.eight .featured-case h3 { max-width: 780px; font-size: clamp(32px,4vw,58px); }

.portfolio-card {
  min-height: 450px;
  display: grid;
  align-content: end;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(245,158,11,.18);
  background: var(--surface);
  transform-style: preserve-3d;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.portfolio-card img,
.project-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.64) saturate(.82) contrast(1.12);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.portfolio-card::before,
.project-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(320px circle at var(--card-x,70%) var(--card-y,30%), rgba(245,120,20,.18), transparent 68%),
    linear-gradient(180deg, transparent 18%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.95));
}

.card-index,
.portfolio-card h3,
.portfolio-card p,
.card-link,
.project-card-content { position: relative; z-index: 2; }

.card-index { color: var(--accent); font: 800 10px "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }

.portfolio-card h3 {
  margin: 12px 0 10px;
  color: var(--text);
  font-size: clamp(28px,3vw,46px);
  line-height: 1;
  text-transform: uppercase;
}

.portfolio-card p { max-width: 520px; margin: 0; color: #bdb2a6; line-height: 1.55; }
.card-link { margin-top: 20px; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.portfolio-card:hover { border-color: var(--accent); box-shadow: 0 22px 54px rgba(0,0,0,.45), 0 0 28px var(--glow); }
.portfolio-card:hover img,
.project-card:hover img { transform: scale(1.055); filter: brightness(.8) saturate(1) contrast(1.08); }

.manifesto {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  border: 1px solid rgba(245,158,11,.14);
  background: rgba(245,158,11,.14);
}

.manifesto article { min-height: 210px; padding: 28px; background: var(--surface); }
.manifesto strong { color: var(--accent); font: 800 10px "Courier New", monospace; text-transform: uppercase; }
.manifesto h3 { margin: 30px 0 12px; font-size: 24px; text-transform: uppercase; }
.manifesto p { margin: 0; color: var(--muted); line-height: 1.6; }

.category-hero {
  min-height: 74svh;
  display: grid;
  align-items: end;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.category-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.6) saturate(.8) contrast(1.12);
}

.category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.72) 62%, rgba(0,0,0,.84)),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 42%, var(--bg));
}

.category-hero-content {
  position: relative;
  z-index: 2;
  padding: 150px 0 82px;
}

.breadcrumbs {
  display: flex;
  gap: 10px;
  color: var(--accent);
  font: 800 10px "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.category-meta {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  margin-top: 42px;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.18);
}

.category-meta div { padding: 18px; background: rgba(3,2,1,.72); backdrop-filter: blur(10px); }
.category-meta strong { display: block; color: var(--accent); font-size: 18px; }
.category-meta span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.project-card {
  min-height: 390px;
  display: grid;
  align-content: end;
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(245,158,11,.16);
  background: var(--surface);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.project-card-content { display: grid; gap: 9px; }
.project-number { color: var(--accent); font: 800 10px "Courier New", monospace; text-transform: uppercase; }
.project-card h3 { margin: 0; font-size: 25px; line-height: 1.05; text-transform: uppercase; }
.project-card p { margin: 0; color: #b9aea2; line-height: 1.5; font-size: 14px; }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.project-tags span { padding: 6px 8px; border: 1px solid rgba(245,158,11,.22); color: var(--accent); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.project-card:hover { border-color: var(--accent); box-shadow: 0 18px 42px rgba(0,0,0,.45), 0 0 24px var(--glow); }

.social-hero .category-hero-image { object-position: 62% center; }
.work-reel { background: linear-gradient(180deg, rgba(245,158,11,.025), transparent 18rem); }

.collection-hero {
  background-position: center;
  background-size: cover;
}

.collection-hero::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.78) 68%, rgba(0,0,0,.9)),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 42%, var(--bg));
}

body[data-collection="tiktok"] .collection-hero { background-image: url("./ember-assets/social-formats.jpg"); }
body[data-collection="advertisements"] .collection-hero,
body[data-collection="promos"] .collection-hero,
body[data-collection="events"] .collection-hero { background-image: url("./ember-assets/commercial-direction.jpg"); }
body[data-collection="foodshows"] .collection-hero,
body[data-collection="talkshows"] .collection-hero { background-image: url("./ember-assets/editorial-suite.jpg"); }
body[data-collection="documentaries"] .collection-hero { background-image: url("./ember-assets/ai-concept-lab.jpg"); }

.construction-hero {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.76) 68%, rgba(0,0,0,.9)),
    url("./ember-assets/commercial-direction.jpg") center / cover no-repeat;
}

.case-layout { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(40px,8vw,120px); align-items: start; }
.case-layout h2 { max-width: 680px; margin: 14px 0 0; font-size: clamp(48px,6vw,86px); line-height: .92; text-transform: uppercase; }
.case-copy { padding-top: 24px; border-top: 1px solid var(--border); }
.case-copy p { margin: 0 0 22px; color: var(--muted); font-size: 18px; line-height: 1.75; }

.leadership-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; border: 1px solid rgba(245,158,11,.16); background: rgba(245,158,11,.16); }
.leadership-grid article { min-height: 250px; padding: 34px; background: linear-gradient(145deg, var(--surface), #060302); }
.leadership-grid span { color: var(--accent); font: 800 10px "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.leadership-grid h3 { margin: 50px 0 12px; font-size: 28px; text-transform: uppercase; }
.leadership-grid p { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.65; }
.sop-flow { background: radial-gradient(circle at 50% 0, rgba(245,120,20,.08), transparent 32rem); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 18px;
}

.video-card {
  min-width: 0;
  border-top: 1px solid rgba(245,158,11,.3);
  background: #050302;
  transition: border-color .25s ease, transform .25s ease;
}

.video-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.video-poster {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: var(--text);
  background: #000;
  cursor: pointer;
}

.video-poster::before,
.video-poster::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 20px;
  background: repeating-linear-gradient(90deg, #060403 0 18px, rgba(245,158,11,.35) 18px 20px, #060403 20px 40px);
  opacity: .88;
  pointer-events: none;
}

.video-poster::before { top: 0; }
.video-poster::after { bottom: 0; }
.video-poster.is-playing::before,
.video-poster.is-playing::after { display: none; }

.video-poster img,
.video-poster iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.video-poster img {
  filter: brightness(.76) saturate(.78) contrast(1.12);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

.video-poster:hover img { transform: scale(1.035); filter: brightness(.9) saturate(.95) contrast(1.08); }

.play-disc {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 3;
  padding-left: 4px;
  border: 1px solid rgba(255,197,101,.76);
  border-radius: 50%;
  color: var(--accent-hot);
  background: rgba(3,2,1,.68);
  box-shadow: 0 0 30px var(--glow);
  backdrop-filter: blur(8px);
  transition: transform .25s ease, background .25s ease;
}

.video-poster:hover .play-disc { transform: scale(1.08); background: rgba(180,83,9,.36); }

.frame-code {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 29px;
  color: var(--accent-hot);
  font: 800 9px "Courier New", monospace;
  letter-spacing: .12em;
}

.video-copy { min-height: 126px; padding: 20px 20px 24px; border: 1px solid rgba(245,158,11,.13); border-top: 0; }
.video-copy > span { color: var(--accent); font: 800 9px "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.video-copy h3 { max-width: 620px; margin: 10px 0 0; font-size: clamp(21px,2.2vw,32px); line-height: 1.08; text-transform: uppercase; }

.vertical-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vertical-card { background: #050302; }
.hosted-video { aspect-ratio: 9 / 16; position: relative; overflow: hidden; background: #000; }
.hosted-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.hosted-video::before,
.hosted-video::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 10px; pointer-events: none; background: repeating-linear-gradient(180deg, #050302 0 18px, rgba(245,158,11,.34) 18px 20px, #050302 20px 40px); }
.hosted-video::before { left: 0; }
.hosted-video::after { right: 0; }
.hosted-video .frame-code { bottom: 12px; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  border: 1px solid rgba(245,158,11,.15);
  background: rgba(245,158,11,.15);
}

.process-step { min-height: 190px; padding: 25px; background: var(--surface); }
.process-step span { color: var(--accent); font: 800 10px "Courier New", monospace; }
.process-step h3 { margin: 30px 0 10px; font-size: 20px; text-transform: uppercase; }
.process-step p { margin: 0; color: var(--muted); line-height: 1.55; }

.next-category {
  min-height: 380px;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(245,158,11,.14);
  background: var(--surface);
}

.next-category h2 { margin: 14px 0 24px; font-size: clamp(44px,7vw,94px); line-height: .92; text-transform: uppercase; }

.contact-section {
  min-height: 520px;
  padding: 86px 0;
  text-align: left;
  background:
    radial-gradient(circle at 76% 50%,rgba(245,120,20,.08),transparent 28rem),
    var(--surface);
}

.contact-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(42px,8vw,120px);
  align-items: center;
}

.contact-heading h2 { max-width: 720px; margin-bottom: 22px; }
.contact-heading p { max-width: 580px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }

.contact-panel {
  min-width: 0;
  padding: clamp(30px,4vw,54px);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(145deg,rgba(17,9,4,.92),rgba(3,2,1,.86));
  box-shadow: 0 24px 70px rgba(0,0,0,.4),inset 0 0 26px rgba(245,120,20,.035);
}

.contact-label {
  display: block;
  color: var(--accent);
  font: 800 10px "Courier New",monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-email {
  display: block;
  max-width: 100%;
  margin-top: 18px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: clamp(23px,3.1vw,44px);
  line-height: 1.08;
  transition: color .25s ease,text-shadow .25s ease;
}

.contact-email:hover { color: var(--accent-hot); text-shadow: 0 0 18px var(--glow); }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.copy-email {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(0,0,0,.34);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .25s ease,border-color .25s ease,background .25s ease;
}

.copy-email:hover,.copy-email:focus-visible { color: var(--accent-hot); border-color: var(--accent); background: rgba(245,158,11,.08); outline: 0; }
.copy-status { min-height: 16px; display: block; margin-top: 14px; color: var(--accent); font: 800 9px "Courier New",monospace; text-transform: uppercase; }

.contact-page-main {
  min-height: calc(100svh - 88px);
  background:
    radial-gradient(circle at 72% 45%,rgba(245,120,20,.1),transparent 30rem),
    linear-gradient(145deg,#030201,#090502 58%,#030201);
}

.contact-page-section {
  min-height: calc(100svh - 88px);
  display: flex;
  align-items: center;
  padding: 90px 0;
}

.contact-heading h1 {
  max-width: 760px;
  margin: 18px 0 24px;
  font-family: "Arial Narrow",Impact,Arial,sans-serif;
  font-size: clamp(62px,7vw,112px);
  line-height: .9;
  text-transform: uppercase;
}

.contact-heading h1 span { color: transparent; -webkit-text-stroke: 1px var(--accent); text-shadow: 0 0 18px rgba(245,158,11,.12); }
.contact-note { margin: 24px 0 0; color: var(--muted); line-height: 1.65; }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 42px;
  color: #786e65;
  border-top: 1px solid rgba(245,158,11,.12);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1), filter .75s ease; }
.reveal.visible { opacity: 1; transform: none; filter: none; }

@keyframes filmMove { to { background-position: 136px 0, 0 0; } }

@media (max-width: 980px) {
  .header-inner { grid-template-columns: 1fr auto auto; }
  .nav { display: none; position: absolute; left: 24px; right: 24px; top: 76px; padding: 20px; flex-direction: column; gap: 18px; background: rgba(3,2,1,.97); border: 1px solid var(--border); }
  .nav.open { display: flex; }
  .menu-button { display: grid; }
  .header-cta { padding-inline: 15px; }
  .page-hero-content { margin-left: 24vw; }
  .project-grid { grid-template-columns: repeat(2,1fr); }
  .category-meta { grid-template-columns: repeat(2,1fr); }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .portfolio-grid.eight { grid-template-columns: repeat(2,1fr); }
  .portfolio-grid.eight .featured-case { grid-column: span 2; }
  .video-grid { gap-block: 30px; }
  .vertical-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-grid { grid-template-columns: 1fr 1fr; }
  .operations-case-featured { grid-column: span 2; }
}

@media (max-width: 680px) {
  .container { width: min(100% - 28px,var(--container)); }
  .header-inner { min-height: 76px; grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .brand strong { font-size: 16px; }
  .page-hero { min-height: 82svh; background-position: 28% center; }
  .page-hero::after { background: linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.7) 48%,var(--bg)); }
  .page-hero-content { margin-left: 0; padding: 180px 0 64px; }
  .page-hero h1,.category-title { font-size: 58px; }
  .section { padding: 68px 0; }
  .section-head,.portfolio-grid,.manifesto,.project-grid,.process-grid { grid-template-columns: 1fr; }
  .operations-grid { grid-template-columns: 1fr; }
  .operations-case-featured { grid-column: auto; }
  .operations-case { min-height: 340px; }
  .portfolio-grid.eight { grid-template-columns:1fr; }
  .portfolio-grid.eight .featured-case { grid-column: auto; }
  .portfolio-card { min-height: 370px; }
  .video-grid { grid-template-columns: 1fr; }
  .vertical-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap-inline: 10px; }
  .vertical-grid .video-copy { padding: 15px 12px 18px; }
  .vertical-grid .video-copy h3 { font-size: 16px; }
  .video-copy { min-height: 0; }
  .category-hero { min-height: 86svh; }
  .category-hero-content { padding: 150px 0 54px; }
  .category-meta { grid-template-columns: 1fr 1fr; }
  .footer { flex-direction: column; }
  .case-layout,.leadership-grid { grid-template-columns: 1fr; }
  .case-copy { padding-top: 20px; }
  .contact-section { padding: 68px 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 34px; }
  .contact-panel { padding: 28px 20px; }
  .contact-email { font-size: 24px; }
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .button,.copy-email { width: 100%; }
  .contact-page-section { min-height: calc(100svh - 76px); padding: 64px 0; }
  .contact-heading h1 { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; filter:none; }
}

/* Staging-wide solid charcoal theme pass.
   Keeps the noir/gold identity while removing the grey-gold gradient wash. */
:root {
  --bg: #0b0c0c;
  --surface: #111212;
  --surface-2: #161716;
  --text: #f1eee7;
  --muted: #b5afa5;
  --accent: #b8954a;
  --accent-hot: #d4b46b;
  --accent-deep: #806122;
  --border: rgba(184,149,74,.26);
  --glow: rgba(184,149,74,.075);
}

html,
body {
  background: #0b0c0c !important;
}

body {
  color: var(--text);
}

body::before {
  opacity: .032 !important;
  mix-blend-mode: normal !important;
}

main,
.page-hero,
.section,
.portfolio-main,
.portfolio-section,
.construction-work-section,
.work-reel,
.work-detail,
.sop-flow,
.portfolio-hero,
.work-system,
.case-strip,
.final-cta,
.site-footer {
  background-color: #0b0c0c !important;
}

.site-header,
.portfolio-header,
.nav-shell {
  background: rgba(11,12,12,.92) !important;
  border-color: rgba(184,149,74,.18) !important;
}

.portfolio-category-card,
.portfolio-card,
.work-preview-card,
.video-copy,
.hosted-video,
.system-card,
.process-card,
.metric-card,
.case-card,
.case-study-card,
.leadership-grid article,
.portfolio-dropdown,
.dropdown-panel,
.modal-content,
.cta-panel,
.contact-card,
.contact-form,
.contact-panel,
.footer-card {
  background: linear-gradient(180deg, rgba(19,20,20,.96), rgba(12,13,13,.98)) !important;
  border-color: rgba(184,149,74,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
}

.portfolio-category-card::after,
.portfolio-card::after,
.work-preview-card::after,
.system-card::after,
.process-card::after,
.metric-card::after,
.case-card::after,
.case-study-card::after,
.leadership-grid article::after,
.cta-panel::after {
  background: transparent !important;
}

.portfolio-category-card:hover,
.portfolio-card:hover,
.work-preview-card:hover,
.system-card:hover,
.process-card:hover,
.metric-card:hover,
.case-card:hover,
.case-study-card:hover,
.leadership-grid article:hover {
  border-color: rgba(212,180,107,.44) !important;
  box-shadow:
    inset 0 0 0 1px rgba(212,180,107,.04),
    0 18px 44px rgba(0,0,0,.26),
    0 0 18px rgba(184,149,74,.055) !important;
}

.glare-card::before,
.portfolio-category-card.glare-card::before,
.portfolio-card.glare-card::before,
.work-preview-card.glare-card::before {
  background:
    radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),
      rgba(212,180,107,.05),
      rgba(184,149,74,.025) 18%,
      transparent 50%) !important;
}

.label,
.eyebrow,
.section-kicker,
.card-kicker,
.brand small,
.brand-kicker,
.portfolio-card-index,
.meta,
.tag {
  color: var(--accent-hot) !important;
}

.button,
.header-cta,
.portfolio-card-link,
.text-link,
.card-link,
.copy-email {
  color: var(--accent-hot) !important;
  border-color: rgba(184,149,74,.48) !important;
  box-shadow: none !important;
}

.button:hover,
.header-cta:hover,
.portfolio-card-link:hover,
.text-link:hover,
.card-link:hover,
.copy-email:hover {
  background: rgba(184,149,74,.085) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}