/* A single full-screen project image is stronger than a floating collage. */
:root {
  --black: #111112;
  --ink: #efede7;
  --acid: #dfff38;
  --hot: #dfff38;
  --line: rgba(239, 237, 231, .32);
}

*, *::before, *::after {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

/* A more open display style keeps large portfolio headings readable. */
.hero-scene h1,
.work-intro h2,
.about-scene h2,
.contact-scene h2,
.case-copy h3,
.case-summary h4,
.scene-title {
  letter-spacing: -.055em !important;
  line-height: .9 !important;
  font-weight: 700 !important;
}

.hero-scene h1 em,
.work-intro h2 em,
.about-scene h2 em,
.contact-scene h2 em,
.scene-title em {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -.06em !important;
}

/* A compact, consistent title block remains readable on every full-bleed image. */
.scene-title {
  max-width: 8.5ch !important;
  justify-self: start;
  font-size: clamp(42px, 6.1vw, 94px) !important;
  padding: 0 !important;
  background: transparent !important;
  color: #efede7 !important;
  mix-blend-mode: difference;
}

.scene-open {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  min-height: 2.8rem;
  padding: .65rem .9rem !important;
  border: 1px solid #efede7 !important;
  background: #111112 !important;
  color: #efede7 !important;
  font-weight: 700 !important;
  text-align: center !important;
}

@media (max-width: 700px) {
  .scene-title { font-size: 12vw !important; line-height: .92 !important; }
}

/* Two compact statements, placed across the page instead of a large text wall. */
.work-intro {
  min-height: 58svh !important;
  padding: 10vh 8vw !important;
  display: grid !important;
  grid-template-rows: auto 1fr;
}

.work-intro .eyebrow {
  font-size: clamp(13px, 1vw, 16px) !important;
  font-weight: 700;
  color: var(--ink) !important;
}

.work-statement {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 12vw, 15rem);
  width: 100%;
}

.work-statement p {
  margin: 0;
  font-size: clamp(34px, 4.8vw, 76px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .94;
}

.work-statement p:last-child {
  align-self: end;
  color: var(--acid);
  text-align: right;
}

.site-header p,
.hero-scene > .eyebrow {
  font-size: clamp(12px, 1.15vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .03em !important;
}

@media (max-width: 700px) {
  .work-intro { min-height: 52svh !important; padding: 9vh 22px !important; }
  .work-statement { grid-template-columns: 1fr; gap: 1.8rem; }
  .work-statement p { font-size: clamp(36px, 11vw, 58px); }
  .work-statement p:last-child { text-align: left; }
}

.scene-frames {
  display: none !important;
}

/* The case study keeps its written story at left and a deliberately flat, sideways photo deck at right. */
.case-popups { display: none !important; }
.case-summary { align-items: center; }
.case-summary-copy { max-width: 42rem; }
.case-summary-copy .eyebrow { color: #111112; margin-bottom: 1.5rem; }
.case-summary-copy h4 { margin-bottom: 2.5rem; }
.case-summary-copy p:last-child { margin: 0; }
.frame-deck { position: relative; width: min(100%, 40rem); justify-self: end; padding: 0 4.4rem 3rem; }
.frame-deck-viewport { position: relative; aspect-ratio: .84; isolation: isolate; overflow: hidden; }
.frame-deck-image, .frame-deck-shadow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.frame-deck-image { z-index: 3; object-fit: cover; border: 1px solid #111112; box-shadow: 14px 16px 0 rgba(17,17,18,.18); }
.frame-deck-shadow { border: 1px solid rgba(17,17,18,.55); background: #d8d6ce; }
.frame-deck-shadow-one { z-index: 2; transform: translate(7%, -4%) rotate(3deg); }
.frame-deck-shadow-two { z-index: 1; transform: translate(-7%, 5%) rotate(-3deg); background: #c7c3b9; }
.frame-deck-controls { position: static; margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.frame-deck-button { position: absolute; z-index: 5; top: calc(50% - 1.6rem); appearance: none; width: 3.2rem; height: 3.2rem; border: 1px solid #111112; background: #efede7; color: #111112; cursor: pointer; font: inherit; letter-spacing: 0; transition: background .22s, color .22s, transform .22s; }
.frame-deck-previous { left: 0; }
.frame-deck-next { right: 0; }
.frame-deck-button:hover { transform: scale(1.08); }
.frame-deck-button:hover, .frame-deck-button:focus-visible { background: #111112; color: #efede7; outline: none; }
.frame-deck-count { position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.turn-next .frame-deck-image { animation: flat-turn-next .45s cubic-bezier(.2,.8,.2,1); }
.turn-previous .frame-deck-image { animation: flat-turn-previous .45s cubic-bezier(.2,.8,.2,1); }
@keyframes flat-turn-next { from { opacity: .15; transform: translateX(46%) scaleX(.08); transform-origin: left center; } 55% { opacity: .9; transform: translateX(7%) scaleX(.72); transform-origin: left center; } to { opacity: 1; transform: translateX(0) scaleX(1); transform-origin: left center; } }
@keyframes flat-turn-previous { from { opacity: .15; transform: translateX(-46%) scaleX(.08); transform-origin: right center; } 55% { opacity: .9; transform: translateX(-7%) scaleX(.72); transform-origin: right center; } to { opacity: 1; transform: translateX(0) scaleX(1); transform-origin: right center; } }
@media (max-width: 700px) { .case-summary { display: block; } .frame-deck { width: min(100%, 27rem); margin: 3.5rem auto 0; padding-left: 3.8rem; padding-right: 3.8rem; } .frame-deck-button { width: 2.85rem; height: 2.85rem; } }