/* The background photograph supplies the devices; these overlays only fill the screens. */
body.polo-portfolio .project-detail .device-stage {
  isolation: isolate;
  border-radius: 16px !important;
}

body.polo-portfolio .project-detail .device-composite {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.polo-portfolio .project-detail .device-stage.is-composited .device {
  opacity: 0 !important;
}

body.polo-portfolio .project-detail .device-stage .device {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: #111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.polo-portfolio .project-detail .device-stage .device::before,
body.polo-portfolio .project-detail .device-stage .device::after {
  content: none !important;
  display: none !important;
}

body.polo-portfolio .project-detail .device-stage .device img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: scale(1.32) !important;
  transform-origin: top center !important;
  filter: brightness(0.9) saturate(0.9) contrast(1.04) !important;
}

body.polo-portfolio .project-detail .device-stage .device::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.13), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.035)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.16)) !important;
  mix-blend-mode: screen;
}

body.polo-portfolio .project-detail .device-stage .device.tablet img {
  transform: scale(1.38) !important;
}

body.polo-portfolio .project-detail .device-stage .device.phone img {
  transform: scale(1.12) !important;
}

body.polo-portfolio .project-detail .device-stage.has-laptop.has-tablet.has-phone .device.laptop {
  left: 10.6% !important; top: 22.6% !important; width: 32.9% !important;
  aspect-ratio: 1.34 / 1 !important;
  clip-path: polygon(0.8% 0, 99.2% 0.4%, 98.9% 99.4%, 1.1% 100%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.has-tablet.has-phone .device.tablet {
  left: 51% !important; top: 36.4% !important; width: 22.8% !important;
  aspect-ratio: 1.37 / 1 !important;
  clip-path: polygon(1% 1%, 98.2% 0, 99.2% 98.5%, 0 100%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.has-tablet.has-phone .device.phone {
  left: 81.7% !important; top: 39.7% !important; width: 7.3% !important;
  aspect-ratio: 0.49 / 1 !important; border-radius: 6% !important;
  clip-path: inset(0 round 6%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.has-tablet.no-phone .device.laptop {
  left: 16.5% !important; top: 24.2% !important; width: 34.3% !important;
  aspect-ratio: 1.29 / 1 !important;
  clip-path: polygon(0.8% 0, 99.2% 0.8%, 98.7% 99.5%, 1.3% 100%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.has-tablet.no-phone .device.tablet {
  left: 59.9% !important; top: 36.3% !important; width: 22.2% !important;
  aspect-ratio: 1.17 / 1 !important;
  clip-path: polygon(1.5% 1%, 97.8% 0, 99% 98%, 0 100%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.no-tablet.has-phone .device.laptop {
  left: 18.1% !important; top: 23% !important; width: 35.2% !important;
  aspect-ratio: 1.31 / 1 !important;
  clip-path: polygon(0.8% 0, 99.2% 0.5%, 98.8% 99.5%, 1.2% 100%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.no-tablet.has-phone .device.phone {
  left: 71.8% !important; top: 39.7% !important; width: 6.3% !important;
  aspect-ratio: 0.45 / 1 !important; border-radius: 7% !important;
  clip-path: inset(0 round 7%);
}

body.polo-portfolio .project-detail .device-stage.no-laptop.has-tablet.has-phone .device.tablet {
  left: 20.7% !important; top: 27.4% !important; width: 33.1% !important;
  aspect-ratio: 1.24 / 1 !important;
  clip-path: polygon(1% 0.5%, 97.5% 0, 99.5% 98.5%, 0 100%);
}

body.polo-portfolio .project-detail .device-stage.no-laptop.has-tablet.has-phone .device.phone {
  left: 63.5% !important; top: 34.4% !important; width: 7.7% !important;
  aspect-ratio: 0.46 / 1 !important; border-radius: 7% !important;
  clip-path: inset(0 round 7%);
}

body.polo-portfolio .project-detail .device-stage.has-laptop.no-tablet.no-phone .device.laptop {
  left: 19.3% !important; top: 22.5% !important; width: 35.7% !important;
  aspect-ratio: 1.32 / 1 !important;
  clip-path: polygon(0.8% 0, 99.2% 0.5%, 98.8% 99.5%, 1.2% 100%);
}

body.polo-portfolio .project-detail .device-stage.no-laptop.has-tablet.no-phone .device.tablet {
  left: 29.8% !important; top: 21.7% !important; width: 37% !important;
  aspect-ratio: 1.27 / 1 !important;
  clip-path: polygon(1% 0.5%, 97.7% 0, 99.5% 98.5%, 0 100%);
}

body.polo-portfolio .project-detail .device-stage.no-laptop.no-tablet.has-phone .device.phone {
  left: 54.8% !important; top: 20.2% !important; width: 11.3% !important;
  aspect-ratio: 0.47 / 1 !important; border-radius: 7% !important;
  clip-path: inset(0 round 7%);
}

@media (max-width: 991px) {
  body.polo-portfolio .project-detail-grid {
    width: min(920px, 100%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.polo-portfolio .project-detail .device-stage {
    width: 100% !important;
    max-width: 920px !important;
  }
}

/* 2026 project viewer: the work itself is the hero, without decorative device mockups. */
body.polo-portfolio .project-detail-grid {
  width: min(1420px, 100%) !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.65fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
}

body.polo-portfolio .project-viewer {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #111312;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.42);
}

body.polo-portfolio .project-viewer-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 52px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #171918;
}

body.polo-portfolio .viewer-window-controls {
  display: flex;
  gap: 6px;
}

body.polo-portfolio .viewer-window-controls i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f15a24;
}

body.polo-portfolio .viewer-window-controls i:nth-child(2) { background: #e0d0c1; }
body.polo-portfolio .viewer-window-controls i:nth-child(3) { background: #00a676; }

body.polo-portfolio .viewer-device-tabs {
  justify-self: center;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e100f;
}

body.polo-portfolio .viewer-device-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

body.polo-portfolio .viewer-device-tab:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

body.polo-portfolio .viewer-device-tab i {
  width: 16px;
  font-size: 0.88rem;
}

body.polo-portfolio .viewer-device-tab.is-active {
  background: #f7f9f9;
  border-color: #f7f9f9;
  color: #171918;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

body.polo-portfolio .viewer-url {
  max-width: 180px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.polo-portfolio .project-viewer-canvas {
  display: grid;
  place-items: center;
  min-height: clamp(420px, 58vh, 680px);
  padding: clamp(18px, 3vw, 42px);
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #0e100f;
  background-size: 32px 32px;
}

body.polo-portfolio .project-viewer-frame {
  width: min(100%, 980px);
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  transition: width 320ms ease, height 320ms ease;
}

body.polo-portfolio .project-viewer-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 1;
  transition: opacity 120ms ease;
}

body.polo-portfolio .project-viewer-frame img.is-changing { opacity: 0; }

body.polo-portfolio .project-viewer[data-active-device="tablet"] .project-viewer-frame {
  width: min(72%, 680px);
  height: auto;
  aspect-ratio: 4 / 3;
}

body.polo-portfolio .project-viewer[data-active-device="mobile"] .project-viewer-frame {
  width: min(38%, 360px);
  height: auto;
  aspect-ratio: 9 / 16;
}

body.polo-portfolio .project-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

body.polo-portfolio .project-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 170px;
  margin: 0;
}

body.polo-portfolio .project-action-close {
  border: 2px solid #f15a24 !important;
  background: #fff !important;
  color: #f15a24 !important;
  box-shadow: none !important;
}

body.polo-portfolio .project-action-close:hover,
body.polo-portfolio .project-action-close:focus {
  border-color: #f15a24 !important;
  background: #f15a24 !important;
  color: #fff !important;
}

@media (max-width: 991px) {
  body.polo-portfolio .project-detail-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.polo-portfolio .project-viewer-canvas {
    min-height: 360px;
  }

  body.polo-portfolio .project-viewer-frame {
    height: auto;
  }
}

@media (max-width: 600px) {
  body.polo-portfolio .project-viewer-toolbar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.polo-portfolio .viewer-window-controls,
  body.polo-portfolio .viewer-url {
    display: none;
  }

  body.polo-portfolio .viewer-device-tabs {
    width: 100%;
  }

  body.polo-portfolio .viewer-device-tab {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
  }

  body.polo-portfolio .viewer-device-tab span { font-size: 0.7rem; }

  body.polo-portfolio .project-actions .btn { width: 100%; }

  body.polo-portfolio .project-viewer-canvas {
    min-height: 300px;
    padding: 14px;
  }

  body.polo-portfolio .project-viewer-frame,
  body.polo-portfolio .project-viewer[data-active-device="tablet"] .project-viewer-frame {
    width: 100%;
    height: auto;
  }

  body.polo-portfolio .project-viewer[data-active-device="mobile"] .project-viewer-frame {
    width: 54%;
    height: auto;
  }
}

/* Hero identity and stable call-to-action buttons. */
body.polo-portfolio .hero-identity {
  display: flex;
  align-items: baseline;
  min-height: 28px;
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  font-weight: 800;
  text-transform: uppercase;
}

body.polo-portfolio .hero-identity b {
  margin: 0 8px;
  color: #fff;
}

body.polo-portfolio .hero-type {
  position: relative;
  display: inline-block;
  min-width: 12ch;
  color: #fff;
  white-space: nowrap;
}

body.polo-portfolio .hero-type::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  background: #fff;
  vertical-align: -0.12em;
  animation: hero-caret 0.8s steps(1) infinite;
}

@keyframes hero-caret { 50% { opacity: 0; } }

body.polo-portfolio .hero-actions {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
}

body.polo-portfolio .hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 164px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 800;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body.polo-portfolio .hero-button:hover {
  transform: translateY(-2px);
}

body.polo-portfolio .hero-button-primary {
  background: #fff;
  color: #17110f !important;
}

body.polo-portfolio .hero-button-primary:hover {
  background: #00a676;
  color: #fff !important;
}

body.polo-portfolio .hero-button-secondary {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(23, 17, 15, 0.18);
  color: #fff !important;
}

body.polo-portfolio .hero-button-secondary:hover {
  border-color: #fff;
  background: #fff;
  color: #17110f !important;
}

body.polo-portfolio .polo-hero .hero-button-secondary,
body.polo-portfolio .polo-hero .hero-button-secondary:link,
body.polo-portfolio .polo-hero .hero-button-secondary:visited {
  color: #fff !important;
}

body.polo-portfolio .polo-hero .hero-button-secondary:hover,
body.polo-portfolio .polo-hero .hero-button-secondary:focus,
body.polo-portfolio .polo-hero .hero-button-secondary:active {
  border-color: #fff !important;
  background: #fff !important;
  color: #17110f !important;
}

@media (max-width: 520px) {
  body.polo-portfolio .hero-identity {
    flex-wrap: wrap;
  }

  body.polo-portfolio .hero-type {
    min-width: 10ch;
  }

  body.polo-portfolio .hero-actions {
    width: 100%;
  }

  body.polo-portfolio .hero-button {
    flex: 1;
    min-width: 0;
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.polo-portfolio .hero-type::after { animation: none; }
}