/* ============================================================
   OMC — Projects page styles
   Self-contained: introduces its own design tokens scoped to
   project sections so it doesn't conflict with the global
   site styles in styles.css.
============================================================ */

:root {
  --omc-navy:#293C5B;
  --omc-red:#0A0A0A;
  --omc-white:#FFFFFF;

  --omc-navy-900:#000000;
  --omc-navy-800:#0E1626;
  --omc-navy-700:#293C5B;
  --omc-navy-500:#5A6378;
  --omc-navy-300:#9AA1B0;
  --omc-navy-100:#E5E5E6;

  --omc-red-600:#000000;
  --omc-red-100:#F2F2F3;

  --omc-gray-50:#FAFAFA;
  --omc-gray-100:#F2F2F3;

  /* Client feedback: unify typography — headings use the sans body font, not serif */
  --font-heading:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Inter","Helvetica Neue",Arial,sans-serif;

  --radius-sm:1px;
  --radius-md:2px;

  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasize:cubic-bezier(.3,0,.1,1);
  --duration-fast:150ms;
  --duration-base:220ms;

  --pr-container:1280px;
}

/* ============================================================
   Keyframes used by projects page
============================================================ */
@keyframes pr-hl-in   { to { opacity:1; transform:translateY(0); } }
@keyframes pr-draw    { to { stroke-dashoffset:0; } }
@keyframes pr-prh-draw{ from { stroke-dashoffset:2000; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes pr-livePulse {
  0%,100% { box-shadow:0 0 0 3px rgba(0,0,0,.3); }
  50%     { box-shadow:0 0 0 6px rgba(0,0,0,0); }
}

/* The trash CSS animates these via `hl-in`, `draw`, `prh-draw`,
   `livePulse`. Bind the project classes to our pr-prefixed names. */

/* ============================================================
   Header — always solid on this page (no dark hero behind it)
============================================================ */
.site-header,
.site-header.is-solid {
  background:#0e1520;
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
}

/* ============================================================
   Container — scoped to projects sections only
============================================================ */
.pr-hero .container,
.pr-body .container {
  width:100%;
  max-width:var(--pr-container);
  margin:0 auto;
  padding:0 32px;
}

/* ============================================================
   Buttons — only used inside the projects page / modal
============================================================ */
.pr-hero .btn,
.pr-modal .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px;
  font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:.01em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all var(--duration-fast) var(--ease-standard);
  white-space:nowrap;
}
.pr-hero .btn-red,
.pr-modal .btn-red { background:#0A0A0A; color:#fff; border-color:#0A0A0A; }
.pr-hero .btn-red:hover,
.pr-modal .btn-red:hover { background:#fff; color:#0A0A0A; border-color:#0A0A0A; }
.pr-hero .hero-btn {
  padding:16px 30px;
  font-size:14px;
  background:#fff; color:#0A0A0A; border-color:#fff;
}
.pr-hero .hero-btn:hover { background:transparent; color:#fff; border-color:#fff; }
.pr-hero .hero-btn svg { transition:transform var(--duration-base) var(--ease-standard); }
.pr-hero .hero-btn:hover svg { transform:translateX(4px); }

/* ============================================================
   Shared hero typography (eyebrow + headline + lede + tick marks)
============================================================ */
.pr-hero .ah-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  padding:8px 14px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,141,155,.22);
  border-radius:999px;
  margin-bottom:28px;
}
.pr-hero .ah-headline {
  font-family:var(--font-heading);
  font-size:clamp(40px,5.6vw,76px);
  line-height:1; font-weight:600; letter-spacing:-0.02em;
  color:#fff;
  margin-bottom:28px;
}
.pr-hero .ah-headline .hl-line { display:block; }
.pr-hero .ah-lede {
  font-size:clamp(16px,1.35vw,18px);
  line-height:1.65;
  color:rgba(255,255,255,.72);
  max-width:560px;
  margin-bottom:36px;
  opacity:0; animation:pr-hl-in .9s var(--ease-standard) .6s forwards;
}

.pr-hero .hl-bignum {
  position:absolute;
  right:-32px; bottom:-72px;
  font-family:var(--font-heading);
  font-size:clamp(280px,34vw,520px);
  font-weight:500; line-height:.8; letter-spacing:-0.04em;
  font-style:italic;
  color:rgba(255,255,255,.04);
  pointer-events:none; user-select:none;
}

.pr-hero .hl-line {
  display:block;
  opacity:0; transform:translateY(18px);
  animation:pr-hl-in .9s var(--ease-emphasize) forwards;
}
.pr-hero .hl-line:nth-child(1) { animation-delay:.1s; }
.pr-hero .hl-line:nth-child(2) { animation-delay:.24s; }

.pr-hero .hl-accent {
  position:relative;
  display:inline-block;
  color:#fff;
  font-style:italic;
  font-weight:500;
  white-space:nowrap;
}
.pr-hero .hl-underline {
  position:absolute;
  left:-2%; right:-2%; bottom:-0.12em;
  width:104%; height:.24em;
  color:rgba(255,255,255,.55);
  overflow:visible;
}
.pr-hero .hl-underline path {
  stroke-dasharray:500; stroke-dashoffset:500;
  animation:pr-draw 1.6s var(--ease-emphasize) 1.1s forwards;
}

/* Corner ticks (white) — used on hero image and modal media */
.hv-tick {
  position:absolute; width:18px; height:18px;
  border:1.5px solid rgba(255,255,255,.4);
  z-index:3;
}
.hv-tick-tl { top:12px; left:12px;  border-right:0; border-bottom:0; }
.hv-tick-tr { top:12px; right:12px; border-left:0;  border-bottom:0; }
.hv-tick-bl { bottom:12px; left:12px;  border-right:0; border-top:0; }
.hv-tick-br { bottom:12px; right:12px; border-left:0;  border-top:0; }

/* Animated pulsing dot */
.sdf-dot,
.prh-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--omc-red);
  box-shadow:0 0 0 3px rgba(0,0,0,.3);
  animation:pr-livePulse 1.5s infinite;
}

/* ============================================================
   PROJECTS HERO
============================================================ */
.pr-hero {
  position:relative;
  background:linear-gradient(180deg,#0F1629 0%,var(--omc-navy-900) 55%,#101a36 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  padding:148px 0 96px;
}
.pr-hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.prh-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse 120% 95% at 30% 45%,#000 55%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 120% 95% at 30% 45%,#000 55%,transparent 100%);
}
.prh-grid::before {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 1.2px,transparent 1.6px);
  background-size:120px 120px;
  background-position:0 0;
  mask-image:radial-gradient(ellipse 100% 80% at 30% 45%,#000 40%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 30% 45%,#000 40%,transparent 90%);
}
.prh-glow {
  position:absolute; top:-18%; right:-10%; width:60%; height:80%;
  background:radial-gradient(circle,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 60%);
  filter:blur(12px);
}
.prh-blueprint { position:absolute; inset:0; width:100%; height:100%; opacity:.8; }
.prh-path { stroke-dashoffset:0; animation:pr-prh-draw 2.4s var(--ease-standard) .2s both; }

.pr-hero-shell { position:relative; z-index:2; display:flex; flex-direction:column; gap:56px; }
.pr-hero-main {
  display:grid; grid-template-columns:1.15fr 1fr; gap:72px; align-items:center;
}
.pr-hero-left { position:relative; }
.pr-hero-left .ah-headline { font-size:clamp(44px,6.4vw,84px); margin-bottom:22px; }

.prh-actions {
  display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:8px;
  opacity:0; animation:pr-hl-in .9s var(--ease-standard) .75s forwards;
}
.prh-link {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-heading); font-size:15px; font-weight:600; letter-spacing:.01em;
  color:#fff; opacity:.85;
  padding:6px 2px; border-bottom:1px solid rgba(255,255,255,.18);
  transition:all var(--duration-base) var(--ease-standard);
}
.prh-link .prh-link-arrow {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  font-size:13px; line-height:1;
  transition:all var(--duration-base) var(--ease-standard);
}
.prh-link:hover { opacity:1; border-bottom-color:var(--omc-red); }
.prh-link:hover .prh-link-arrow { background:var(--omc-red); border-color:var(--omc-red); transform:translateX(4px); }

/* right visual */
.pr-hero-right {
  position:relative;
  opacity:0; transform:translateY(24px);
  animation:pr-hl-in 1s var(--ease-emphasize) .45s forwards;
}
.prh-visual { position:relative; aspect-ratio:4/4.1; width:100%; }
.prh-img {
  position:absolute;
  background-size:cover; background-position:center;
  border-radius:var(--radius-md);
  box-shadow:0 24px 64px rgba(0,0,0,.45);
  overflow:hidden;
  filter:saturate(1.05) contrast(1.06) brightness(.96);
}
.prh-img-main {
  top:0; left:0; width:82%; height:72%;
  border:1px solid rgba(255,255,255,.08);
}
.prh-img-main::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%);
}
.prh-img-sub {
  right:0; bottom:0; width:46%; height:44%;
  border:3px solid #000;
  z-index:2;
}
.prh-img-sub::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.4) 100%);
}
.prh-img .hv-tick { border-color:rgba(255,255,255,.55); }
.prh-img-tag {
  position:absolute; left:16px; bottom:16px; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:rgba(20,28,51,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff;
}
.prh-img-tag-alt {
  left:auto; right:12px; top:12px; bottom:auto;
  padding:6px 10px;
  background:var(--omc-red); border-color:var(--omc-red);
  font-size:9px;
}

/* floating badge */
.prh-badge {
  position:absolute; left:-8px; bottom:8%; z-index:5;
  padding:18px 22px;
  background:#fff; color:var(--omc-navy-900);
  border-radius:var(--radius-md);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:4px;
  min-width:180px;
}
.prh-badge::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--omc-red);
  border-radius:var(--radius-md) 0 0 var(--radius-md);
}
.prh-badge-k {
  font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--omc-red);
}
.prh-badge strong {
  font-family:var(--font-heading); font-size:48px; font-weight:600; letter-spacing:-0.03em; line-height:1;
  color:var(--omc-navy-900);
  display:inline-flex; align-items:baseline;
}
.prh-badge strong em { font-style:normal; font-size:.5em; font-weight:700; color:var(--omc-red); margin-left:2px; }
.prh-badge-v {
  font-family:var(--font-heading); font-size:13px; font-weight:500; letter-spacing:.01em;
  color:var(--omc-navy-500);
}

/* ============================================================
   PROJECTS BODY  (sidebar + mosaic)
============================================================ */
.pr-body {
  background:var(--omc-gray-50);
  position:relative;
  padding-top:48px;
}
.pr-body-grid {
  display:grid; grid-template-columns:minmax(260px,28%) 1fr;
  align-items:stretch;
  min-height:520px;
}

/* sidebar */
.pr-side {
  padding:48px 48px 64px;
  background:var(--omc-gray-50);
  display:flex; flex-direction:column; gap:18px;
  border-right:1px solid var(--omc-navy-100);
}
.pr-side-h {
  font-family:var(--font-heading); font-size:36px; font-weight:600; letter-spacing:-0.02em;
  color:#0A0A0A; margin:0 0 12px;
}
.pr-search {
  position:relative;
  display:flex; align-items:center;
  background:#fff;
  border:1px solid var(--omc-navy-100);
}
.pr-search svg {
  position:absolute; left:14px; color:var(--omc-navy-500); pointer-events:none;
}
.pr-search input {
  width:100%; border:0; outline:0; background:transparent;
  padding:12px 14px 12px 38px;
  font-family:var(--font-body); font-size:14px;
  color:#0A0A0A;
}
.pr-search input::placeholder { color:var(--omc-navy-300); }

.pr-side-label {
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0;
  color:#0A0A0A; margin:8px 0 -4px;
}
.pr-select { position:relative; }
.pr-select select {
  width:100%;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; border:1px solid var(--omc-navy-100);
  padding:12px 36px 12px 14px;
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:#0A0A0A;
  cursor:pointer;
  border-radius:0;
}
.pr-select-arrow {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--omc-navy-500); font-size:14px;
}
.pr-select select:focus { outline:2px solid #0A0A0A; outline-offset:-1px; }

.pr-filter-btn {
  margin-top:6px;
  padding:12px 28px;
  background:#0A0A0A; color:#fff;
  border:0; cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.04em;
  align-self:flex-start;
  transition:background var(--duration-fast) var(--ease-standard);
}
.pr-filter-btn:hover { background:var(--omc-navy-700); }
.pr-filter-reset {
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--omc-navy-500);
  padding:0; align-self:flex-start; text-decoration:underline; text-underline-offset:3px;
  transition:color var(--duration-fast) var(--ease-standard);
}
.pr-filter-reset:hover { color:#0A0A0A; }

/* mosaic */
.pr-main {
  background:var(--omc-gray-50);
  padding:0;
  min-width:0;
}
.pr-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--omc-navy-100);
  position:relative;
}
.pr-grid.is-empty { display:block; min-height:0; background:transparent; }

.pr-card {
  position:relative;
  background:#0A0A0A;
  border:0;
  display:block;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  aspect-ratio:1/1;
  transition:opacity .35s var(--ease-standard);
}
.pr-card.is-hidden {
  opacity:0; pointer-events:none;
  position:absolute; visibility:hidden;
}
.pr-card.is-out { display:none; }

.prc-media {
  position:absolute; inset:0;
  background:#0A0A0A; overflow:hidden;
  border-radius:0;
}
.prc-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform 1.4s var(--ease-standard), filter var(--duration-base) var(--ease-standard);
}
.pr-card:hover .prc-img { transform:scale(1.06); filter:brightness(.78); }

.prc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.65) 100%);
  pointer-events:none;
}

.prc-body {
  position:absolute; left:24px; right:24px; bottom:22px; z-index:2;
  display:flex; flex-direction:column; gap:6px;
  color:#fff;
  pointer-events:none;
}
.prc-name {
  font-family:var(--font-heading); font-size:clamp(20px,1.6vw,24px); font-weight:600;
  color:#fff; letter-spacing:-0.01em; line-height:1.18;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.prc-loc {
  font-family:var(--font-body); font-size:13px; font-weight:400;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

/* Load More bar */
.pr-loadmore-bar {
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:#0A0A0A; color:#fff;
  border:0; cursor:pointer;
  padding:22px 24px;
  font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:background var(--duration-fast) var(--ease-standard);
}
.pr-loadmore-bar:hover { background:var(--omc-navy-700); }
.pr-loadmore-bar[hidden] { display:none; }
.pr-loadmore-arrow {
  font-size:18px; line-height:1;
  display:inline-block; transform:translateY(-1px);
}

/* empty state */
.pr-empty {
  text-align:center; padding:96px 24px;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.pe-mark {
  display:inline-block;
  font-family:var(--font-heading); font-size:40px; font-weight:500; line-height:1;
  color:var(--omc-navy-300);
}
.pr-empty h3 { font-family:var(--font-heading); font-size:24px; font-weight:600; color:#0A0A0A; margin:0; }
.pr-empty p { color:var(--omc-navy-500); max-width:420px; margin:0 0 14px; }

/* ============================================================
   PROJECT MODAL
============================================================ */
.pr-modal {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base) var(--ease-standard);
}
.pr-modal.is-open {
  opacity:1; visibility:visible; pointer-events:auto;
}
.pr-modal-backdrop {
  position:absolute; inset:0;
  background:rgba(10,14,28,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pr-modal-card {
  position:relative;
  /* full-screen: fill the entire viewport */
  width:100%; max-width:none; height:100vh; max-height:100vh;
  background:#fff;
  border-radius:0;
  border-top:3px solid var(--omc-red);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.98);
  transition:transform var(--duration-base) var(--ease-emphasize);
}
.pr-modal.is-open .pr-modal-card { transform:translateY(0) scale(1); }

.pr-modal-close {
  position:absolute; top:14px; right:14px; z-index:5;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(20,28,51,.7); color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:background var(--duration-fast) var(--ease-standard);
}
.pr-modal-close:hover { background:var(--omc-red); border-color:var(--omc-red); }

.pm-top {
  position:absolute; top:14px; left:14px; z-index:5;
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:rgba(20,28,51,.7);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#fff;
}
.pm-idx { color:#C7D0E0; }
.pm-year {
  padding-left:10px; border-left:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);
}

.pm-body {
  display:grid; grid-template-columns:1fr 1.1fr;
  overflow-y:auto;
  flex-grow:1;
}
.pm-media {
  position:sticky; top:0; align-self:start;
  /* fill the modal's visible height (card = 100vh, footer ≈ 92px, top border 3px)
     so the render stays vertically centered instead of stranded while details scroll */
  height:calc(100vh - 95px);
  min-height:420px;
  background:var(--omc-navy-900);
  overflow:hidden;
}
/* Blurred backdrop (same render, cover-scaled) fills the panel behind the
   full image so the profile never shows a bare void around the render. */
.pm-media::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--pm-bg); background-size:cover; background-position:center;
  filter:blur(30px) brightness(.5) saturate(1.15);
  transform:scale(1.2);
}
.pm-img {
  position:absolute; inset:0; z-index:1;
  /* show the full render — never crop/zoom the project profile image */
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:saturate(1.03) contrast(1.03);
  /* crossfade between the two stacked slide layers */
  transition:opacity .5s ease;
}
/* second stacked layer starts hidden; JS toggles opacity to crossfade */
#pmImgB { opacity:0; }
.pm-img-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.10) 60%,rgba(0,0,0,.5) 100%);
}
/* auto-slide gallery dots */
.pm-dots {
  position:absolute; right:20px; bottom:20px; z-index:3;
  display:flex; align-items:center; gap:7px;
}
.pm-dots:empty { display:none; }
.pm-dot {
  width:8px; height:8px; padding:0; border:0; cursor:pointer;
  border-radius:999px; background:rgba(255,255,255,.5);
  transition:background .25s ease, width .25s ease;
}
.pm-dot:hover { background:rgba(255,255,255,.8); }
.pm-dot.is-active { width:22px; background:#fff; }
.pm-loc-tag {
  position:absolute; left:20px; bottom:20px; z-index:2;
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  background:rgba(20,28,51,.75);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:#fff;
}

.pm-info {
  padding:40px 40px 32px;
  display:flex; flex-direction:column; gap:14px;
  overflow:visible;
}
.pm-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.pm-tag {
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--omc-red); background:var(--omc-red-100);
  padding:4px 9px; border-radius:var(--radius-sm);
}
.pm-title {
  font-family:var(--font-heading);
  font-size:clamp(28px,2.8vw,36px); font-weight:600;
  color:var(--omc-navy-700); letter-spacing:-0.015em; line-height:1.15;
}
.pm-location {
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--omc-navy-500); margin-bottom:4px;
}
.pm-desc { font-size:15px; line-height:1.7; color:var(--omc-navy-500); margin-top:2px; }

.pm-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:14px 0 4px;
  border-top:1px solid var(--omc-navy-100);
  border-bottom:1px solid var(--omc-navy-100);
  border-left:1px solid var(--omc-navy-100);
}
.pm-stat {
  padding:14px 16px;
  border-right:1px solid var(--omc-navy-100);
  display:flex; flex-direction:column; gap:4px;
}
.pm-stat strong {
  font-family:var(--font-heading); font-size:26px; font-weight:600; letter-spacing:-0.02em; line-height:1;
  color:var(--omc-navy-700);
}
.pm-stat span {
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--omc-navy-500);
}

.pm-section-h {
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--omc-red);
  margin-top:10px; margin-bottom:2px;
  padding-bottom:6px; border-bottom:1px solid var(--omc-navy-100);
}
.pm-scope { display:flex; flex-direction:column; gap:6px; list-style:none; padding:0; margin:0; }
.pm-scope li {
  position:relative; padding-left:18px;
  font-size:13.5px; line-height:1.55; color:var(--omc-navy-500);
}
.pm-scope li::before {
  content:""; position:absolute; left:0; top:8px;
  width:6px; height:6px; background:var(--omc-red); opacity:.7;
}
.pm-vitals { display:flex; flex-direction:column; gap:0; margin:0; padding:0; }
.pm-v-row {
  display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:baseline;
  padding:10px 0;
  border-bottom:1px dashed var(--omc-navy-100);
}
.pm-v-row:last-child { border-bottom:0; }
.pm-v-row dt {
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--omc-navy-500);
}
.pm-v-row dd {
  font-size:13px; font-weight:600; color:var(--omc-navy-700); letter-spacing:-0.005em;
}

.pm-foot {
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch;
  padding:14px 18px;
  background:var(--omc-gray-50);
  border-top:1px solid var(--omc-navy-100);
  flex-shrink:0;
}
.pm-nav {
  display:flex; align-items:center; gap:14px;
  padding:10px 14px;
  background:#fff;
  border:1px solid var(--omc-navy-100);
  border-radius:var(--radius-sm);
  color:var(--omc-navy-700);
  cursor:pointer;
  min-width:0;
  transition:all var(--duration-fast) var(--ease-standard);
}
.pm-nav:hover { border-color:var(--omc-navy-700); background:var(--omc-navy-700); color:#fff; }
.pm-nav:hover .pm-nav-k { color:#C7D0E0; }
.pm-next { justify-content:flex-end; text-align:right; }
.pm-nav-arrow {
  font-family:var(--font-mono); font-size:20px; font-weight:700; line-height:1;
  color:var(--omc-red); flex-shrink:0;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.pm-nav:hover .pm-nav-arrow { color:#C7D0E0; }
.pm-prev:hover .pm-nav-arrow { transform:translateX(-3px); }
.pm-next:hover .pm-nav-arrow { transform:translateX(3px); }
.pm-nav-body { display:flex; flex-direction:column; gap:2px; min-width:0; overflow:hidden; }
.pm-nav-k {
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--omc-navy-500);
}
.pm-nav-t {
  font-size:13px; font-weight:600; letter-spacing:-0.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pm-cta { white-space:nowrap; align-self:center; }

/* ============================================================
   PROJECTS — Responsive
============================================================ */
@media (max-width:1200px) {
  .pr-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px) {
  .pr-hero { padding:124px 0 64px; }
  .pr-hero-main { grid-template-columns:1fr; gap:48px; }
  .pr-hero-right { min-height:380px; }

  .pr-body-grid { grid-template-columns:1fr; min-height:0; }
  .pr-side {
    border-right:0; border-bottom:1px solid var(--omc-navy-100);
    padding:32px 24px;
    display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end;
  }
  .pr-side-h { grid-column:1 / -1; margin-bottom:0; }
  .pr-search { grid-column:1 / -1; }
  .pr-side-label { grid-column:1 / -1; margin:0; }
  .pr-filter-btn { margin-top:0; }
  .pr-filter-reset { align-self:center; }

  .pm-body { grid-template-columns:1fr; }
  /* stack layout: media must stay a positioning context so its absolutely
     positioned children (image layers, blurred backdrop, overlay, dots, loc tag)
     stay inside it instead of escaping to fill the whole modal card */
  .pm-media { position:relative; top:auto; height:44vh; min-height:240px; max-height:70vh; align-self:auto; width:100%; }
  .pm-info { padding:28px 28px 24px; }
  .pm-foot { grid-template-columns:1fr; gap:8px; }
  .pm-cta { order:-1; }
  .pr-modal { padding:0; }
}
@media (max-width:720px) {
  .pr-hero { padding:108px 0 52px; }
  .pr-hero-right { min-height:280px; }
  .pr-body { padding-top:32px; }
  .prh-badge { left:auto; right:8px; bottom:-12px; min-width:160px; padding:14px 18px; }
  .prh-badge strong { font-size:36px; }

  .pr-side { grid-template-columns:1fr; padding:24px 18px; }

  .pr-grid { grid-template-columns:1fr; gap:1px; }
  .pr-card { aspect-ratio:4/3; }
  .prc-name { font-size:22px; }

  .pr-modal { padding:0; }
  .pr-modal-card { max-height:100vh; border-radius:0; }
  .pm-info { padding:24px 22px 20px; }
  .pm-title { font-size:26px; }
  .pm-stats { grid-template-columns:repeat(3,1fr); }
  .pm-stat { padding:12px 10px; }
  .pm-stat strong { font-size:20px; }
  .pm-v-row { grid-template-columns:100px 1fr; gap:10px; }
  .pm-foot { padding:12px 14px; }
  .pm-nav { padding:8px 12px; gap:10px; }
  .pm-nav-arrow { font-size:16px; }
  .pm-nav-t { font-size:12px; }
}