/* ---------- Portfolio badges (archive entries) ---------- */
.pf-badge{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;padding:.1rem .5rem;border-radius:2rem;background:var(--soft-2,#edf3f9);color:var(--muted,#5f6b7a);margin-left:.3rem}
.pf-muted{color:var(--muted,#5f6b7a);font-size:.9rem}

/* ---------- portfolio gallery dialog (portfolio pages + service pages) ----------
   One navy frame shared with the review dialog (.pf-review-dialog in portfolio.css only adds a narrower width and chat bits). */
.portfolio-modal { --pm-line: rgb(255 255 255 / .08); border: 0; border-radius: var(--radius-lg); padding: 0; max-width: min(920px, 94vw); width: 100%; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: var(--navy); color: var(--white); box-shadow: inset 0 0 0 1px var(--pm-line), 0 40px 90px -20px rgb(4 8 20 / .6); }
.portfolio-modal::backdrop { background: rgba(18,23,42,.72); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.portfolio-modal.is-opening { animation: pm-rise 320ms var(--e-spring) both; }
.portfolio-modal.is-opening::backdrop { animation: pm-fade 320ms var(--e-out) both; }
@keyframes pm-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } }
@keyframes pm-fade { from { opacity: 0; } }
.portfolio-modal__inner { position: relative; padding: 1.25rem; }
.portfolio-modal__close { position: absolute; top: .75rem; right: .75rem; z-index: 3; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; background: rgb(18 23 42 / .55); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--white); transition: background var(--t-1) var(--e-out), transform var(--t-1) var(--e-spring); }
.portfolio-modal__close:hover { background: var(--blue); transform: rotate(90deg); }
.portfolio-modal__close:focus-visible, .portfolio-modal__thumbs button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.portfolio-modal__stage { border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); background: rgb(255 255 255 / .04); }
.portfolio-modal__stage img { width: 100%; max-height: min(34vh, 420px); object-fit: cover; object-position: top; display: block; } .portfolio-modal__stage img[hidden] { display: none; }
.portfolio-modal__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .7rem; }
.portfolio-modal__thumbs button { aspect-ratio: 16 / 10; border: 0; border-radius: calc(var(--radius) * .7); padding: 0; background: rgb(255 255 255 / .06); cursor: pointer; overflow: hidden; opacity: .62; outline: 2px solid transparent; outline-offset: 2px; transition: opacity var(--t-2) var(--e-out), outline-color var(--t-2) var(--e-out), transform var(--t-2) var(--e-spring); }
.portfolio-modal__thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.portfolio-modal__thumbs button.is-active { opacity: 1; outline: 2px solid var(--cyan); }
.portfolio-modal__thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.portfolio-modal[open] .portfolio-modal__thumbs button { animation: pm-pop 360ms var(--e-spring) both; }
.portfolio-modal[open] .portfolio-modal__thumbs button:nth-child(2) { animation-delay: 60ms; }
.portfolio-modal[open] .portfolio-modal__thumbs button:nth-child(3) { animation-delay: 120ms; }
.portfolio-modal[open] .portfolio-modal__thumbs button:nth-child(4) { animation-delay: 180ms; }
@keyframes pm-pop { from { opacity: 0; transform: translateY(10px); } }

.portfolio-modal__info { position: relative; margin-top: 1.4rem; padding: 0 .4rem .3rem; display: grid; gap: .8rem; justify-items: start; }
.portfolio-modal__info > * { margin: 0; }
.portfolio-modal__plate { position: absolute; top: 0; right: .4rem; display: grid; place-items: center; width: 8rem; height: 4.2rem; padding: .5rem .8rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 8px 20px -8px rgb(4 8 20 / .5); }
.portfolio-modal__logo { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
.portfolio-modal__eyebrow { display: inline-flex; align-items: center; gap: .625rem; font: 700 .78rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan-light); }
.portfolio-modal__eyebrow::before { content: ""; width: 2.125rem; height: 3px; border-radius: 3px; background: var(--cyan); flex: none; }
.portfolio-modal__info h2 { font-family: var(--head); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--white); padding-right: 9rem; }
.portfolio-modal__info:not(:has(.portfolio-modal__plate)) h2 { padding-right: 0; }
.portfolio-modal__desc { color: rgba(255,255,255,.82); line-height: 1.6; max-width: 62ch; }
.portfolio-modal__archive { display: flex; align-items: center; gap: .6rem; color: rgb(255 255 255 / .6); font-size: .88rem; line-height: 1.5; }
.portfolio-modal .pf-badge { background: rgb(255 255 255 / .12); color: var(--cyan-light); margin: 0; flex: none; }
.portfolio-modal__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.portfolio-modal__label { flex-basis: 100%; font: 700 .7rem/1 var(--head); text-transform: uppercase; letter-spacing: .14em; color: rgb(255 255 255 / .55); }
.chip-work--navy, .chip-work--navy:hover { background: rgb(255 255 255 / .09); color: var(--white); border: 1px solid rgb(255 255 255 / .2); box-shadow: none; padding: .55rem .9rem; font: 600 .8rem/1.1 var(--head); white-space: normal; cursor: default; }
.portfolio-modal__visit { margin-top: .4rem !important; }
@media (max-width: 640px) {
  .portfolio-modal { max-width: 100vw; width: 100vw; max-height: 94vh; border-radius: var(--radius-lg); }
  .portfolio-modal__inner { padding: .75rem; }
  .portfolio-modal__close { width: 2.75rem; height: 2.75rem; top: .9rem; right: .9rem; }
  .portfolio-modal__thumbs { gap: .4rem; }
  .portfolio-modal__plate { position: static; justify-self: start; width: 6.5rem; height: 3.4rem; order: -1; }
  .portfolio-modal__info h2, .portfolio-modal__info:not(:has(.portfolio-modal__plate)) h2 { padding-right: 0; }
}
/* laptops (1366x768): a shorter thumb strip and tighter info so the Visit button stays inside the dialog */
@media (max-height: 820px) {
  .portfolio-modal__thumbs button { aspect-ratio: auto; height: 3.2rem; }
  .portfolio-modal__info { margin-top: 1rem; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-modal.is-opening { animation: pm-fade 120ms linear both; }
  .portfolio-modal[open] .portfolio-modal__thumbs button { animation: none; }
}