/* ============================================================
   enhance.css - additive enhancement layer for the DSN theme.
   Loads AFTER style.css. Nothing here overwrites his original
   stylesheet; it only layers on top, using his own design tokens
   (--bg-color #131313, --assistant-color #191919, --theme-color
   #e4e4dd cream, --theme-yellow #face36 gold, --heading-font Eras).
   ============================================================ */

/* ---------- shared enhancement primitives ---------- */
.em-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--theme-yellow);
  margin-bottom: 18px;
}
.em-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--theme-yellow), transparent);
}
.em-serif-note {
  font-family: var(--body-font);
  font-style: italic;
}

/* ============================================================
   1. TRIPTYCH HERO - keep his identity dominant.
   His original left the reel's own title cards (EXODUS, "stereo
   3D") bleeding up under the ENRIQUE MUNOZ wordmark. A top scrim
   pushes the video content down and keeps the gold identity on top.
   ============================================================ */
.tri-panel .tri-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.86) 0%,
    rgba(10, 10, 10, 0.40) 20%,
    rgba(10, 10, 10, 0.28) 55%,
    rgba(10, 10, 10, 0.52) 100%
  ) !important;
}
.tri-panel.hovered .tri-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.78) 0%,
    rgba(10, 10, 10, 0.18) 26%,
    rgba(10, 10, 10, 0.02) 50%,
    rgba(10, 10, 10, 0.88) 100%
  ) !important;
}
/* dedicated header-band scrim: hides the reel title cards (EXODUS,
   "N 2") that bled up into the wordmark zone, so his gold identity
   is always the only brand at the top of the frame. */
.tri-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150px;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.98) 0%,
    rgba(8, 8, 8, 0.92) 38%,
    rgba(8, 8, 8, 0.55) 72%,
    rgba(8, 8, 8, 0) 100%
  );
  z-index: 6;
  pointer-events: none;
}
/* refine panel labels to his display type */
.tri-label-title {
  font-family: var(--heading-font), "Arial Black", sans-serif !important;
  letter-spacing: 0.12em !important;
}
.tri-label-sub {
  font-family: var(--font-code) !important;
}
/* the site header wordmark must always sit above the video */
#site_menu_header .main-logo { position: relative; z-index: 30; }

/* ============================================================
   2. HOME - FEATURED PROJECTS swiper (his named weak point).
   Same swiper component, bigger frames + real role/studio/year.
   ============================================================ */
/* scoped to the HOME swiper only (dsn-post-type-classic), so it never
   touches the card grids on about.html / portfolio.html */
.dsn-post-type-classic.h-350 .box-image-bg {
  height: 62vh;
  max-height: 640px;
  min-height: 440px;
}

/* project meta row: lead badge + medium */
.em-proj-tags {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.em-lead-badge {
  display: inline-block;
  padding: 5px 12px;
  background: var(--theme-yellow);
  color: #141414;
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
}
.em-proj-medium {
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-color);
  opacity: 0.75;
}
.em-proj-credit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-code);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: #a5a59d;
}
.em-proj-role { color: var(--theme-color); }
.em-proj-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--theme-yellow); opacity: 0.8;
}
@media (max-width: 767px) {
  .dsn-post-type-classic.h-350 .box-image-bg { height: 52vh; min-height: 320px; }
}
/* Featured swiper: clear drag affordance + inviting arrows (QoL) */
.has-parallax-image.dsn-swiper .swiper-container { cursor: grab; }
.has-parallax-image.dsn-swiper .swiper-container:active { cursor: grabbing; }
.dsn-swiper-paginate .swiper-prev,
.dsn-swiper-paginate .swiper-next { transition: transform 0.35s ease; }
.dsn-swiper-paginate .swiper-prev:hover { transform: translateX(-5px); }
.dsn-swiper-paginate .swiper-next:hover { transform: translateX(5px); }

/* ============================================================
   3. INTERIOR PAGE HERO (project / reels / portfolio headers)
   reuses his dsn-header look; adds a clean meta rail.
   ============================================================ */
.em-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 22px;
}
.em-hero-meta .em-hm {
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-color);
  opacity: 0.85;
}
.em-hero-meta .em-hm b { color: var(--theme-yellow); font-weight: 600; }

/* ============================================================
   4. PROJECT RECORD (contribution / challenge / approach + facts)
   the honest content, delivered in his typographic language.
   ============================================================ */
.em-record {
  padding: 9vh 0 4vh;
  background: var(--bg-color);
}
.em-record-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 70px;
  align-items: start;
}
.em-record-logline {
  font-family: var(--body-font);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 46px;
  max-width: 22ch;
}
.em-block { margin-bottom: 38px; }
.em-block-h {
  font-family: var(--font-code);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-yellow);
  margin-bottom: 14px;
}
.em-block-p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--font-color);
  max-width: 60ch;
}
.em-scope {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #8f8f88;
  font-family: var(--body-font);
  font-style: italic;
}
.em-record-facts {
  border: 1px solid var(--border-color);
  background: var(--assistant-color);
  padding: 12px 30px;
  position: sticky;
  top: 40px;
}
.em-fact {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--border-color);
}
.em-fact:last-child { border-bottom: none; }
.em-fact-k {
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f8f88;
  white-space: nowrap;
}
.em-fact-v {
  font-size: 14px;
  color: var(--heading-color);
  text-align: right;
  font-weight: 500;
}
@media (max-width: 991px) {
  .em-record-grid { grid-template-columns: 1fr; gap: 40px; }
  .em-record-facts { position: static; }
}

/* project gallery caption polish (his .cap component) */
.img-box-parallax .cap span {
  font-family: var(--font-code);
  letter-spacing: 0.08em;
}

/* prev / next project nav */
.em-projnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-color);
  margin-top: 3vh;
}
.em-projnav a {
  padding: 46px 40px;
  display: block;
  transition: background 0.4s ease;
}
.em-projnav a:hover { background: var(--assistant-color); }
.em-projnav a.em-next { text-align: right; border-left: 1px solid var(--border-color); }
.em-projnav .em-pn-dir {
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-yellow);
  margin-bottom: 10px;
  display: block;
}
.em-projnav .em-pn-title {
  font-family: var(--heading-font), sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--heading-color);
}
@media (max-width: 600px) {
  .em-projnav a { padding: 30px 22px; }
}

/* ============================================================
   5. REELS PAGE - discipline theater in his palette.
   ============================================================ */
.em-reels-wrap { padding: 4vh 0 2vh; background: var(--bg-color); }
.em-reels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.em-reel-card {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--assistant-color);
  overflow: hidden;
}
.em-reel-stage {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #0a0a0a;
  cursor: pointer;
  overflow: hidden;
}
.em-reel-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
}
.em-reel-card:hover .em-reel-stage img { transform: scale(1.05); }
.em-reel-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.7), rgba(10,10,10,0.1) 55%, rgba(10,10,10,0.35));
  transition: opacity 0.4s;
}
.em-reel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1.5px solid var(--theme-yellow);
  background: rgba(10, 10, 10, 0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background 0.3s, transform 0.3s;
}
.em-reel-card:hover .em-reel-play { background: var(--theme-yellow); transform: translate(-50%, -50%) scale(1.06); }
.em-reel-play::after {
  content: "";
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--theme-yellow);
  margin-left: 4px;
  transition: border-left-color 0.3s;
}
.em-reel-card:hover .em-reel-play::after { border-left-color: #141414; }
.em-reel-stage iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; z-index: 4;
}
.em-reel-body { padding: 24px 26px 28px; }
.em-reel-label {
  font-family: var(--heading-font), sans-serif;
  font-size: 21px;
  color: var(--heading-color);
  margin-bottom: 6px;
}
.em-reel-role {
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-yellow);
}
@media (max-width: 991px) {
  .em-reels-grid { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
}

/* ============================================================
   5b. ABOUT - EXPERTISE bullets.
   His desktop CSS sets .service_description{display:none}, so the real
   capability bullets only showed on mobile. Reveal them on hover/active
   (his existing interaction), keeping the clean icon grid by default.
   ============================================================ */
@media only screen and (min-width: 992px) {
  .service-with-img .dsn-service .service-item .service_description {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s ease, margin-top .4s ease;
    text-align: left;
  }
  .service-with-img .dsn-service .service-item:hover .service_description,
  .service-with-img .dsn-service .service-item.active .service_description {
    max-height: 360px;
    opacity: 1;
    margin-top: 18px;
  }
  .service-with-img .dsn-service .service_description ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 300px;
    margin-inline: auto;
  }
  .service-with-img .dsn-service .service_description li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--font-color);
  }
  .service-with-img .dsn-service .service_description li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--theme-yellow);
  }
  /* hint that these tiles reveal detail */
  .service-with-img .dsn-service .service-item { cursor: default; }
}

/* -- Expertise: swap in a real background frame per discipline on hover.
      (his item-bg was wired to a dot-pattern placeholder and never fired) -- */
.service-with-img .dsn-service .item-bg {
  background-size: cover !important;
  background-position: center center !important;
  transition: opacity 0.65s cubic-bezier(.16, 1, .3, 1) !important;
}
.service-with-img .dsn-service .item-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.66);
}
.service-with-img .dsn-service .service-item:hover + .item-bg,
.service-with-img .dsn-service .service-item.active + .item-bg {
  opacity: 1 !important;
}
/* keep the discipline content above the revealed frame */
.service-with-img .dsn-service .service-item { position: relative; z-index: 2; }

/* ============================================================
   6. PORTFOLIO GRID polish (his isotope grid).
   ============================================================ */
.em-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 50px;
}
.em-filter button {
  cursor: pointer;
  font-family: var(--font-code);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9a92;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 40px;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.em-filter button:hover { color: var(--theme-color); border-color: rgba(255,255,255,0.28); }
.em-filter button.is-active {
  color: #141414;
  background: var(--theme-yellow);
  border-color: var(--theme-yellow);
}
.em-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 30px;
}
.em-card {
  transition: border-color 0.4s ease, transform 0.55s cubic-bezier(.16,1,.3,1), box-shadow 0.55s ease;
}
.em-card:hover {
  border-color: rgba(250, 206, 54, 0.42);
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.em-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--assistant-color);
  aspect-ratio: 16 / 10;
}
.em-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(1.05) contrast(1.02) saturate(1.03);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.em-card:hover img { transform: scale(1.06); filter: brightness(1.14) contrast(1.04) saturate(1.06); }
.em-card-veil {
  position: absolute; inset: 0;
  /* light at rest so the work is visible; darker only in the bottom for text */
  background: linear-gradient(to top, rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.42) 26%, rgba(6,6,6,0.03) 50%, transparent 66%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  transition: background 0.45s ease;
}
.em-card:hover .em-card-veil {
  background: linear-gradient(to top, rgba(6,6,6,0.94) 0%, rgba(6,6,6,0.55) 34%, rgba(6,6,6,0.12) 60%, transparent 80%);
}
.em-card-tag {
  font-family: var(--font-code);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-yellow);
  margin-bottom: 8px;
}
.em-card-title {
  font-family: var(--heading-font), sans-serif;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
}
.em-card-sub {
  margin-top: 8px;
  font-family: var(--font-code);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: #b9b9b1;
}
@media (max-width: 991px) { .em-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .em-grid { grid-template-columns: 1fr; } .em-card { aspect-ratio: 16/11; } }

/* is-hidden helper for filtering */
.em-card.is-filtered { display: none; }

/* case-study badge on cards that have a full detail page */
.em-card-flag {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 4px 10px;
  background: rgba(250, 206, 54, 0.92);
  color: #141414;
  font-family: var(--font-code);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* Additional credits (verified work without a frame) */
.em-credits { margin-top: 8vh; }
.em-credits-head {
  font-family: var(--heading-font), sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--heading-color);
  margin-bottom: 8px;
}
.em-credits-intro {
  color: #9a9a92;
  font-size: 14px;
  max-width: 60ch;
  margin-bottom: 40px;
}
/* Complete-filmography poster wall */
.em-posters {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 22px;
}
.em-poster { display: block; text-decoration: none; }
.em-poster img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  display: block;
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), box-shadow 0.45s ease, border-color 0.4s ease;
}
.em-poster:hover img {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  border-color: rgba(250, 206, 54, 0.42);
}
.em-poster-meta { margin-top: 12px; }
.em-poster-title { color: var(--heading-color); font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.em-poster-sub {
  color: #8f8f88;
  font-family: var(--font-code);
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-top: 5px;
}
@media (max-width: 1100px) { .em-posters { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .em-posters { grid-template-columns: repeat(3, 1fr); gap: 18px 14px; } }
@media (max-width: 460px) { .em-posters { grid-template-columns: repeat(2, 1fr); } }
.em-credits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 60px;
  border-top: 1px solid var(--border-color);
}
.em-cr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border-color);
}
.em-cr-title { color: var(--heading-color); font-size: 15px; font-weight: 500; }
.em-cr-meta {
  color: #8f8f88;
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 767px) { .em-credits-grid { grid-template-columns: 1fr; } }

/* ============================================================
   7. HOME INDEX POLISH (elevate his existing sections)
   ============================================================ */

/* -- Services (FILM / TV / GAMING): surface the Academy + Emmy awards -- */
.em-award-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(250, 206, 54, 0.5);
  border-radius: 2px;
  background: rgba(250, 206, 54, 0.08);
  color: var(--theme-yellow);
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.em-award-star { font-size: 11px; line-height: 1; }
/* a touch more presence + a clean reveal on the discipline columns */
.icon-left .dsn-service .service-item { transition: background 0.4s ease; }
.icon-left .dsn-service .service-item:hover { background: rgba(255, 255, 255, 0.02); }
.icon-left .dsn-service .service-content .service_title { letter-spacing: 0.06em; }

/* -- Résumé as the 4th trust-strip item (matches FILM / TV / GAMING) -- */
.em-resume-link { display: flex; text-decoration: none; color: inherit; }
/* his .dsn-icon force-fills SVG paths; render the document as a thin OUTLINE
   so it reads like the line-style film-reel / monitor / gamepad icons */
.em-resume-item .dsn-icon svg,
.em-resume-item .dsn-icon svg path {
  fill: none !important;
  stroke: var(--theme-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s ease;
}
.em-resume-item:hover .dsn-icon svg,
.em-resume-item:hover .dsn-icon svg path { stroke: var(--theme-yellow); }
/* download hint: a small mono line under the body copy, same voice as the
   section eyebrows (not a mismatched gold button) */
.em-resume-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--theme-yellow);
  font-family: var(--font-code);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: gap 0.3s ease;
}
.em-resume-item:hover .em-resume-hint { gap: 11px; }
.em-resume-arrow { font-size: 13px; line-height: 1; transition: transform 0.3s ease; }
.em-resume-item:hover .em-resume-arrow { transform: translateY(3px); }

/* -- Wider, roomier trust strip -- */
.em-strip .dsn-service .service-item { padding-left: 34px; padding-right: 34px; }
.em-strip .dsn-service .service-item:first-child { padding-left: 6px; }
.em-strip .dsn-service .service-content .service_title { margin-bottom: 4px; }
@media (max-width: 991px) {
  .em-strip .dsn-service .service-item { padding-left: 16px; padding-right: 16px; }
}

/* (Digital Domain mark shipped on a gray box; fixed at the SVG level:
   background rects removed, marks recolored light to match the wall.) */
/* subtle lift on the studio logos so the career wall feels alive */
.dsn-brand .brand-item-inner img {
  opacity: 0.72;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.dsn-brand .brand-item:hover .brand-item-inner img {
  opacity: 1;
  transform: scale(1.04);
}
/* Career section: give it substance + tighten the empty space */
.em-career-sub { color: var(--font-color); font-size: 15px; line-height: 1.72; max-width: 38ch; }
.em-career.section-padding { padding-top: 8vh; padding-bottom: 8vh; }
.em-career .dsn-brand .brand-item-inner img { max-height: 66px; width: auto; }

/* -- Home EXPERTISE skill cards: gentle hover lift on his masonry boxes -- */
.list-with-number .service-item.style-box {
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), border-color 0.45s ease;
}
.list-with-number .service-item.style-box:hover {
  transform: translateY(-6px);
}


/* ============================================================
   8. HOME - FEATURED PROJECTS: vertical pillars.
   Stadium columns, gently staggered so the title plates line up,
   thin tungsten-gold edge, and an "exposure ramp" entrance: each
   pillar dims up from black in sequence, like keys coming up on a
   lighting rig. Replaces the old swiper.
   ============================================================ */
/* Align the pillar band to HIS container box, not the viewport. It was 1504px wide
   against a 1250px container, so it overhung the section header by 127px per side and
   read as a different, wider column than every other section on the page. Same
   max-width and side padding as .container, so the first pillar's left edge lines up
   with "FEATURED PROJECTS" and the last pillar's right edge lines up with the button. */
.fb-wrap{max-width:1250px;margin-left:auto;margin-right:auto;padding:3.5vh 50px 2vh;}
.fb-bars{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.05vw,20px);height:70vh;min-height:560px;}
/* The row sits in shadow like a set before the keys come up: always present,
   never popped in, never slid in. Each pillar gets one slow dimmer ramp, and
   the ramps overlap heavily so it reads as a single key light travelling the
   row rather than six separate switch-ons. */
/* PERFORMANCE: this used to animate filter:brightness/saturate/contrast on six
   large images. Filter forces a full repaint of every pixel each frame, so a fast
   scroll left the band dark and then stuttered. The dim is now the IMAGE's opacity
   over a black pillar, which the compositor handles on the GPU: same read, smooth. */
.fb-bar{position:relative;flex:1;height:var(--h);border-radius:clamp(64px,6.6vw,112px);overflow:hidden;
  text-decoration:none;background:#000;border:1px solid rgba(250,206,54,.13);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  opacity:1;transform:translateY(var(--y)) translateZ(0);
  transition:border-color 1.2s ease, box-shadow 1.2s ease, transform .8s cubic-bezier(.16,1,.3,1);}
.fb-bar.lit{border-color:rgba(250,206,54,.30);
  box-shadow:0 18px 46px rgba(0,0,0,.5), 0 0 26px rgba(250,206,54,.10);}
/* the key itself: a soft warm wipe crossing each pillar as its level comes up */
.fb-bar::before{content:"";position:absolute;inset:-25% -65%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(103deg,transparent 40%,rgba(255,233,183,.26) 50%,transparent 60%);
  transform:translateX(-115%);}
.fb-bar.lit::before{animation:fbKeyLight 2.1s cubic-bezier(.32,.03,.22,1) forwards;}
@keyframes fbKeyLight{0%{transform:translateX(-115%);opacity:0}
  18%{opacity:.9}
  100%{transform:translateX(115%);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .fb-bar{transition:none;}
  .fb-bar img{opacity:1;transition:none;}
  .fb-bar.lit::before{animation:none;}}
.fb-bar.lit:hover{transform:translateY(calc(var(--y) - 14px));border-color:rgba(250,206,54,.72);
  box-shadow:0 28px 62px rgba(0,0,0,.62), 0 0 34px rgba(250,206,54,.20);}
.fb-bar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.15;
  will-change:opacity;transform:translateZ(0);
  transition:opacity 1.45s cubic-bezier(.32,.03,.22,1), transform .9s cubic-bezier(.16,1,.3,1);}
.fb-bar.lit img{opacity:1;}
.fb-bar.lit:hover img{transform:scale(1.06);}
.fb-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,8,.55) 0%,rgba(8,8,8,.12) 34%,rgba(8,8,8,.12) 62%,rgba(8,8,8,.72) 100%);}
.fb-veil{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 12px;text-align:center;}
.fb-plate{background:rgba(8,8,8,.62);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.10);border-radius:4px;padding:11px 7px;width:96%;box-sizing:border-box;}
.fb-tag{font-family:var(--font-code);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--theme-yellow);margin-bottom:6px;}
.fb-title{font-family:var(--heading-font),sans-serif;font-size:clamp(11px,0.82vw,15px);line-height:1.16;color:#fff;margin:0;hyphens:auto;overflow-wrap:break-word;}
.fb-credit{font-family:var(--font-code);font-size:8.5px;letter-spacing:.04em;color:#c8c8c0;margin-top:7px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .4s;}
.fb-bar.lit:hover .fb-credit{opacity:1;max-height:44px;}
.fb-idx{position:absolute;top:20px;left:0;right:0;text-align:center;z-index:2;font-family:var(--font-code);font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.5);}
.fb-lead{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;padding:3px 7px;background:var(--theme-yellow);color:#141414;font-family:var(--font-code);font-size:7px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;border-radius:2px;white-space:nowrap;}
/* Mobile gets the same lighting behaviour, not a cheaper one: still no slide-in,
   still a dimmer ramp. Only the geometry changes. */
@media(max-width:900px){.fb-wrap{padding-left:15px;padding-right:15px;}
  .fb-bars{height:auto;flex-wrap:wrap;gap:14px;}
  .fb-bar{flex:0 0 46%;height:56vw;min-height:260px;transform:none;border-radius:44px;}
  .fb-bar.lit{transform:none;} .fb-bar.lit:hover{transform:translateY(-10px);}}


/* ============================================================
   PORTFOLIO - ONE grid, not two tiers.
   The old page split "work with frames" from "Also worked on", which read as a
   ranking of how important his role was. It never was: the only real difference
   is whether shots from that job were available to show. So it is one grid now,
   every credit at identical visual weight, and the ONLY distinction stated is a
   quiet "View shots" cue on the entries that have a page behind them.
   Two artwork shapes share the card: 16:9 frames fill it, portrait posters are
   letterboxed on a dark tile so a poster entry is never a smaller entry.
   ============================================================ */
.em-card.is-poster img { object-fit: contain; background: transparent; position: absolute; z-index: 1; }
/* the caption must stay above the artwork; z-index:1 on the img had lifted the
   poster over the title text on every credit card. */
.em-card .em-card-veil { z-index: 3; }
.em-card.is-poster .em-card-veil {
  background: linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.72) 55%, rgba(6,6,6,0) 100%);
}
/* the poster's own art, blown up and blurred, fills the landscape card behind it,
   so a portrait credit occupies the card as fully as a 16:9 frame does. */
.em-card.is-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(.85) brightness(.42);
  transform: scale(1.18);
  z-index: 0;
}
.em-card.is-credit { cursor: default; }
.em-card-more {
  margin-top: 9px;
  font-family: var(--font-code);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--theme-yellow);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.em-card:hover .em-card-more { opacity: 1; }