/* ══════════════════════════════════════════════════
   PROJECTS PAGE — projects.css
   ══════════════════════════════════════════════════ */

/* ═══ JUSTIFIED BODY COPY ═══ */
.proj-hero-sub, .proj-desc, .pmodal-desc {
  text-align: justify; text-justify: inter-word; hyphens: auto;
}

/* ── PAGE HERO ── */
.proj-hero {
  position: relative; height: 100svh; min-height: 600px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.proj-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  animation: heroBgZoom 12s ease-out forwards;
}
@keyframes heroBgZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}
.proj-hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: 0.5;
}
.proj-hero-gradient {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to top, rgba(6,6,6,0.97) 0%, rgba(6,6,6,0.55) 35%, rgba(6,6,6,0.1) 70%, transparent 100%),
    linear-gradient(to right, rgba(6,6,6,0.5) 0%, transparent 55%);
}
.proj-hero-content {
  position: relative; z-index: 10;
  padding: 0 clamp(2rem, 8vw, 8rem) 3rem; max-width: 860px;
}
.proj-hero-eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--sans); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.4rem;
  opacity: 0; transform: translateX(-24px);
  animation: slideInLeft 0.9s 0.5s var(--ease) forwards;
}
.phe-line { display: block; width: 32px; height: 1px; background: var(--gold); flex-shrink: 0; }
@keyframes slideInLeft { to { opacity: 1; transform: none; } }

.proj-hero-title {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 300; line-height: 0.96; color: var(--white);
  margin-bottom: 1.6rem; letter-spacing: -0.01em;
}
.proj-hero-title .ln { display: block; overflow: hidden; }
.proj-hero-title .ln span,
.proj-hero-title .ln em {
  display: block; opacity: 0; transform: translateY(105%);
  animation: lineReveal 1s var(--ease) forwards;
}
.proj-hero-title .ln:nth-child(1) span { animation-delay: 0.6s; }
.proj-hero-title .ln:nth-child(2) em  { animation-delay: 0.75s; font-style: italic; color: var(--gold); }
@keyframes lineReveal { to { opacity: 1; transform: none; } }

.proj-hero-sub {
  font-family: var(--sans); font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  font-weight: 300; line-height: 1.85; color: rgba(255,255,255,0.5); max-width: 500px;
  opacity: 0; transform: translateY(18px);
  animation: fadeUp 0.9s 1s var(--ease) forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.proj-hero-scroll {
  position: absolute; right: 2.5rem; bottom: 6rem; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.phs-line {
  width: 1px; height: 52px; background: var(--gold); transform-origin: top;
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.proj-hero-scroll span {
  font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255,255,255,0.28);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* Filter pills */
.proj-hero-filters {
  position: relative; z-index: 10;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 1.4rem clamp(2rem, 8vw, 8rem) 2rem;
  background: linear-gradient(to top, rgba(6,6,6,0.92) 0%, transparent 100%);
  opacity: 0; animation: fadeUp 0.9s 1.1s var(--ease) forwards;
}
.pf-btn {
  padding: 0.45rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.14);
  font-family: var(--sans); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  transition: all 0.35s var(--ease); position: relative; overflow: hidden;
}
.pf-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold); transform: translateY(101%);
  transition: transform 0.35s var(--ease);
}
.pf-btn.active { color: var(--dark) !important; border-color: var(--gold); }
.pf-btn.active::before { transform: translateY(0); }
.pf-btn:hover  { color: var(--gold); border-color: var(--gold); }


/* ══════════════════════════════════════════════════
   PROJECTS LIST ROWS
   ══════════════════════════════════════════════════ */
.proj-list { background: var(--dark); overflow: hidden; }

.proj-row {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 600px; overflow: hidden;
}
.proj-row--reverse { direction: rtl; }
.proj-row--reverse > * { direction: ltr; }

.proj-ghost-num {
  position: absolute;
  font-family: var(--serif); font-size: clamp(10rem, 20vw, 22rem);
  font-weight: 300; color: transparent;
  -webkit-text-stroke: 1px rgba(200,169,81,0.05);
  line-height: 1; pointer-events: none; z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  letter-spacing: -0.04em; user-select: none; white-space: nowrap;
  transition: -webkit-text-stroke-color 0.5s;
}
.proj-row:hover .proj-ghost-num { -webkit-text-stroke-color: rgba(200,169,81,0.1); }

/* Image col */
.proj-img-col {
  position: relative; overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16,1,0.3,1);
}
.proj-row--reverse .proj-img-col { clip-path: inset(0 0 0 100%); }
.proj-row.in-view .proj-img-col  { clip-path: inset(0 0% 0 0); }

.proj-img-frame {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; transform-style: preserve-3d; will-change: transform;
}
.proj-img-parallax {
  width: 100%; height: 115%; object-fit: cover; display: block;
  transform: translateY(0); will-change: transform;
  filter: brightness(0.82) saturate(0.8); transition: filter 0.7s;
}
.proj-row:hover .proj-img-parallax { filter: brightness(0.95) saturate(1); }
.proj-img-gloss {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 55%);
  pointer-events: none;
}

/* Text col */
.proj-text-col {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem clamp(2rem, 5vw, 5rem); background: var(--dark);
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.95s 0.25s var(--ease), transform 0.95s 0.25s var(--ease);
}
.proj-row--reverse .proj-text-col { transform: translateX(-40px); }
.proj-row.in-view .proj-text-col  { opacity: 1; transform: none; }

.proj-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.proj-cat-tag {
  font-family: var(--sans); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0.85;
}
.proj-year { font-family: var(--serif); font-size: 0.75rem; color: rgba(255,255,255,0.2); }

.proj-name {
  font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300; line-height: 1.1; color: var(--white);
  margin-bottom: 0.6rem; letter-spacing: -0.01em;
}
.proj-loc {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3); margin-bottom: 1.4rem;
}
.proj-loc svg { flex-shrink: 0; opacity: 0.5; }

.proj-divider {
  width: 0; height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin-bottom: 1.4rem;
  transition: width 0.9s 0.5s var(--ease);
}
.proj-row.in-view .proj-divider { width: 80px; }

.proj-desc {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 300;
  line-height: 1.9; color: rgba(255,255,255,0.4);
  margin-bottom: 1.5rem; max-width: 420px;
}
.proj-stones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.proj-stones span {
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(200,169,81,0.18);
  font-family: var(--sans); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,169,81,0.6);
  transition: border-color 0.3s, color 0.3s;
}
.proj-row:hover .proj-stones span { border-color: rgba(200,169,81,0.35); color: rgba(200,169,81,0.9); }

.proj-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid rgba(200,169,81,0.25); padding-bottom: 0.25rem;
  align-self: flex-start;
  transition: gap 0.35s var(--ease), border-color 0.3s;
}
.proj-cta:hover { gap: 1rem; border-color: var(--gold); }
.proj-cta svg { transition: transform 0.35s var(--ease); }
.proj-cta:hover svg { transform: translate(3px,-3px); }

.proj-row-sep {
  position: absolute; bottom: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
  grid-column: 1 / -1;
}
.proj-row.proj-hidden {
  opacity: 0; pointer-events: none; transform: scale(0.97);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  position: absolute; visibility: hidden;
}


/* ══════════════════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════════════════ */
.proj-stats {
  background: #080808;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.proj-stats-inner {
  max-width: 1300px; margin: 0 auto; display: flex; align-items: stretch;
}
.ps-item {
  flex: 1; text-align: center; padding: 2.8rem 2rem;
  position: relative; overflow: hidden;
}
.ps-item::before {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%) scaleX(0); width: 36px; height: 2px;
  background: var(--gold); transition: transform 0.5s var(--ease);
}
.ps-item:hover::before { transform: translateX(-50%) scaleX(1); }
.ps-num {
  font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 0.5rem;
}
.ps-label {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.28);
}
.ps-sep { width: 1px; background: rgba(255,255,255,0.07); flex-shrink: 0; }


/* ══════════════════════════════════════════════════
   MODAL — Film Strip + Scroll-Driven
   ══════════════════════════════════════════════════ */
.pmodal {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; grid-template-columns: 55% 45%;
  background: #0a0a0a;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.pmodal.open {
  clip-path: inset(0% 0 0 0);
  pointer-events: all;
}

/* ── LEFT PANEL ── */
.pmodal-left {
  position: relative;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: 100%;        /* ← add this */
  min-height: 0;       /* ← add this */
}

/* Film strip */
.pmodal-film {
  width: 90px; flex-shrink: 0;
  background: #060606;
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column;
  padding: 1.2rem 0.6rem; gap: 0.6rem;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  z-index: 2;
}
.pmodal-film::-webkit-scrollbar { display: none; }

.pfilm-frame {
  position: relative; flex-shrink: 0;
  width: 100%; aspect-ratio: 3/2;
  overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.pfilm-frame img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.45) saturate(0.5);
  transition: filter 0.5s, transform 0.5s var(--ease);
  transform: scale(1.05);
}
.pfilm-frame:hover img {
  filter: brightness(0.75) saturate(0.85);
  transform: scale(1);
}
.pfilm-frame.active {
  border-color: var(--gold);
  transform: scaleX(1.04);
}
.pfilm-frame.active img {
  filter: brightness(1) saturate(1);
  transform: scale(1);
}
/* gold bar on active frame */
.pfilm-frame::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 2px; height: 0; background: var(--gold);
  transition: height 0.4s var(--ease);
}
.pfilm-frame.active::after { height: 100%; }

/* Frame number label */
.pfilm-num {
  position: absolute; bottom: 4px; right: 6px;
  font-family: var(--serif); font-size: 0.55rem;
  color: rgba(255,255,255,0.25); line-height: 1;
  transition: color 0.3s;
}
.pfilm-frame.active .pfilm-num { color: var(--gold); }

/* Main image area */
.pmodal-img-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;        /* ← add this */
  min-height: 0;       /* ← add this */
}
.pmodal-img-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;        /* ← add this */
}
.pmodal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* current image */
.pmodal-img--cur {
  z-index: 1;
  clip-path: inset(0 0 0 0);
  transition: none;
}
/* incoming image — stone wipe from right */
.pmodal-img--next {
  z-index: 2;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s cubic-bezier(0.16,1,0.3,1);
}
.pmodal-img--next.wiping {
  clip-path: inset(0 0% 0 0);
}

/* Gloss sweep */
.pmodal-gloss {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.12) 45%,
    rgba(255,255,255,0.06) 52%,
    transparent 100%);
  transform: translateX(-120%);
  will-change: transform;
}
.pmodal-gloss.sweep {
  animation: glossSweep 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes glossSweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* image counter badge */
.pmodal-img-count {
  position: absolute; bottom: 1.2rem; right: 1.2rem; z-index: 4;
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  padding: 0.3rem 0.7rem;
  font-family: var(--serif); font-size: 0.7rem; color: rgba(255,255,255,0.45);
}

/* Prev / next arrows on the main image — primary nav on mobile where the film strip is hidden */
.pmodal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.pmodal-arrow:hover { background: rgba(0,0,0,0.65); border-color: var(--gold); color: var(--gold); }
.pmodal-arrow--prev { left: 1rem; }
.pmodal-arrow--next { right: 1rem; }
.pmodal-count-sep {
  display: block; width: 16px; height: 1px; background: rgba(255,255,255,0.2);
}
#pmodal-cur-num { color: var(--gold); }

/* ── RIGHT PANEL ── */
.pmodal-right {
  background: #0d0d0d;
  overflow-y: auto; overflow-x: hidden;
  border-left: 1px solid rgba(255,255,255,0.05);
  scrollbar-width: thin; scrollbar-color: rgba(200,169,81,0.2) transparent;
}
.pmodal-right::-webkit-scrollbar { width: 3px; }
.pmodal-right::-webkit-scrollbar-thumb { background: rgba(200,169,81,0.25); }

/* Scroll sections */
.pmodal-section {
  min-height: 100vh;
  padding: 5rem 3rem;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
}
.pmodal-section::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 2px; height: 0; background: var(--gold);
  transition: height 0.6s var(--ease);
}
.pmodal-section.section-active::before { height: 100%; }

/* stagger reveal when modal opens */
.pms-stagger > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.pmodal.open .pms-stagger > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.35s; }
.pmodal.open .pms-stagger > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.48s; }
.pmodal.open .pms-stagger > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.58s; }
.pmodal.open .pms-stagger > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.68s; }
.pmodal.open .pms-stagger > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.78s; }
.pmodal.open .pms-stagger > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.88s; }

/* Modal typography */
.pmodal-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.pmodal-cat {
  font-family: var(--sans); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
}
.pmodal-yr {
  font-family: var(--serif); font-size: 0.75rem; color: rgba(255,255,255,0.22);
}
.pmodal-title {
  font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300; line-height: 1.1; color: var(--white); margin-bottom: 0.5rem;
}
.pmodal-loc {
  font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28); margin-bottom: 1.6rem;
}
.pmodal-rule {
  width: 0; height: 1px; background: var(--gold); opacity: 0.45;
  margin-bottom: 1.6rem;
  transition: width 0.9s 0.7s var(--ease);
}
.pmodal.open .pmodal-rule { width: 50px; }
.pmodal-rule--sm { width: 30px !important; transition: none !important; margin-bottom: 1.2rem; }

.pmodal-desc {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 300;
  line-height: 1.9; color: rgba(255,255,255,0.42); margin-bottom: 1.6rem;
}
.pmodal-sec-head {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300;
  color: var(--white); margin-bottom: 0.5rem;
}
.pmodal-stones { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.6rem; }
.pmodal-stones span {
  padding: 0.32rem 0.9rem;
  border: 1px solid rgba(200,169,81,0.2);
  font-family: var(--sans); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,169,81,0.65);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pmodal.open .pmodal-stones span { opacity: 1; transform: none; }
.pmodal.open .pmodal-stones span:nth-child(1) { transition-delay: 0.9s; }
.pmodal.open .pmodal-stones span:nth-child(2) { transition-delay: 0.96s; }
.pmodal.open .pmodal-stones span:nth-child(3) { transition-delay: 1.02s; }

.pmodal-cta {
  align-self: flex-start; margin-top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.6rem;
}

/* Close button */
.pmodal-close {
  position: fixed; top: 1.8rem; right: 1.8rem; z-index: 2010;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
  opacity: 0; transform: rotate(-45deg) scale(0.7);
  transition: opacity 0.4s 0.5s, transform 0.5s 0.5s var(--ease),
              border-color 0.3s, color 0.3s;
}
.pmodal.open .pmodal-close {
  opacity: 1; transform: rotate(0deg) scale(1);
}
.pmodal-close:hover {
  border-color: var(--gold); color: var(--gold); transform: rotate(90deg) scale(1) !important;
}

/* ── Scroll progress indicator (right panel) ── */
.pmodal-scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font-family: var(--sans); font-size: 0.52rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.18);
  animation: hintBounce 2s ease-in-out infinite;
}
@keyframes hintBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}
.pmodal-scroll-hint svg { opacity: 0.3; }


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pmodal { grid-template-columns: 1fr 1fr; }
  .pmodal-film { width: 72px; }
}
@media (max-width: 900px) {
  .pmodal {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 1fr;
  }
  .pmodal-left { max-height: 50vh; min-height: 0; }
  .pmodal-right { min-height: 0; }
  .pmodal-film { width: 64px; padding: 0.8rem 0.4rem; }
  .pmodal-section { min-height: unset; padding: 3rem 2rem; }
}
@media (max-width: 768px) {
  .proj-hero { height: 88vh; min-height: 500px; }
  .proj-row { grid-template-columns: 1fr; min-height: unset; direction: ltr; }
  .proj-row--reverse { direction: ltr; }
  .proj-img-col {
    height: 56vw;
    clip-path: inset(0 0 100% 0) !important;
  }
  .proj-row.in-view .proj-img-col {
    clip-path: inset(0 0 0% 0) !important;
    transition: clip-path 1s var(--ease);
  }
  .proj-text-col { transform: translateY(30px) !important; padding: 2.5rem 1.5rem; }
  .proj-row.in-view .proj-text-col { transform: none !important; }
  .proj-ghost-num { font-size: 30vw; }
  .proj-hero-filters { padding: 1rem 1.5rem 1.5rem; }
  .proj-stats-inner { flex-wrap: wrap; }
  .ps-item { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .ps-sep { display: none; }
  .pmodal-film { display: none; }
  .pmodal-section { padding: 2.5rem 1.5rem; }
}
@media (max-width: 480px) {
  .pmodal-arrow { width: 36px; height: 36px; }
  .proj-hero-content { padding: 0 1.25rem 3rem; }
  .proj-hero-title { font-size: 2.3rem; }
  .proj-hero-sub { font-size: 0.82rem; }
  .pf-btn { font-size: 0.58rem; padding: 0.4rem 0.9rem; }
  .proj-hero-filters { padding: 0.9rem 1.25rem 1.25rem; }
  .proj-name { font-size: 1.6rem; }
  .proj-desc { font-size: 0.82rem; }
  .ps-item { padding: 1.8rem 1rem; flex: 1 1 50%; }
  .ps-num { font-size: 1.9rem; }
}

.pmodal.open {
  clip-path: inset(0%) !important;
  pointer-events: all !important;
  display: grid !important;
}

/* ══ MODAL LAYOUT FORCE FIX (desktop side-by-side layout only) ══
   Below 901px the modal switches to a stacked 50vh/1fr layout (see the
   max-width:900px rules above) — these full-viewport-height rules must not
   apply there or they push the right-hand info panel off-screen. */
@media (min-width: 901px) {
  .pmodal.open .pmodal-left,
  .pmodal.open .pmodal-right {
    opacity: 1 !important;
    height: 100vh !important;
  }
  .pmodal {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  .pmodal-left {
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }
  .pmodal-film {
    height: 100vh;
    overflow-y: auto;
  }
  .pmodal-img-wrap {
    flex: 1;
    height: 100vh;
    position: relative;
    overflow: hidden;
  }
  .pmodal-img-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .pmodal-img--cur,
  .pmodal-img--next {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pmodal-right {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .pmodal-section {
    min-height: 100vh;
    padding: 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}