/* The selected-work area is now intentionally a four-window portfolio. */
.work .work-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work .project,
.work .p1 {
  grid-row: auto;
  height: 390px;
}

.work .p3.ashley-project {
  /* Keep this portfolio window visually consistent; Ashley's images belong in her journey slideshow. */
  background: linear-gradient(130deg, #262e36, #0a0d12);
}

.work .p4 {
  background: linear-gradient(130deg, #202c36, #070b0f 82%);
}

.work .p4 > span:last-child {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  color: rgba(255, 217, 90, .34);
  text-align: right;
  text-shadow: 0 0 3px rgba(255, 205, 55, .20), 0 0 8px rgba(237, 163, 20, .08);
}

/* Use one shared review and action layout across all four portfolio windows. */
.work .project-review {
  display: grid;
  width: 100%;
  justify-items: center;
  text-align: center;
}

.work .project-review > span,
.work .project-review > small {
  text-align: center;
}

.work .journey-button,
.work .project-submit-button {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  text-align: center;
}


.ashley-slideshow .slide-frame {
  background: #07101a;
}

.ashley-slideshow .journey-slide {
  width: 100%;
  min-height: min(52vh, 500px);
  object-fit: contain;
  background: #07101a;
}

.ashleys-logo-slide {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 50% 45%, rgba(28, 108, 153, .3), transparent 52%),
    linear-gradient(135deg, #050a0e, #102635);
}

.ashleys-logo-slide img {
  width: min(90%, 43rem);
  max-height: 70vh;
  object-fit: contain;
}

.ashleys-website-slide {
  display: grid;
  place-items: center;
  padding: clamp(.65rem, 2vw, 1.5rem);
  background: linear-gradient(145deg, #06101a, #101b24);
}

.ashley-site-browser {
  width: min(100%, 55rem);
  overflow: hidden;
  border: 1px solid rgba(171, 211, 233, .58);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}

.ashley-site-browser-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .75rem;
  color: #dcecf4;
  background: #061019;
}

.ashley-site-browser-bar span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #91adc0;
}

.ashley-site-browser-bar small {
  margin-left: auto;
  font: 700 .53rem/1 Arial, sans-serif;
  letter-spacing: .13em;
}

.ashley-site-browser-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, .95fr);
  min-height: 21rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, rgba(3, 12, 20, .96) 0%, rgba(3, 12, 20, .85) 46%, rgba(3, 12, 20, .22) 100%);
}

.ashley-site-browser-screen > div {
  z-index: 1;
  align-self: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.ashley-site-browser-screen p {
  margin: 0 0 .7rem;
  color: #b9d4e4;
  font: 800 .58rem/1.2 Arial, sans-serif;
  letter-spacing: .15em;
}

.ashley-site-browser-screen h3 {
  margin: 0 0 1.2rem;
  font: 700 clamp(1.35rem, 3vw, 2.6rem)/.95 Georgia, serif;
}

.ashley-site-browser-screen b {
  display: inline-block;
  padding: .68rem .82rem;
  color: #082d4b;
  background: #fff;
  font: 800 .56rem/1 Arial, sans-serif;
  letter-spacing: .1em;
}

.ashley-site-logo {
  position: absolute;
  z-index: 1;
  top: .8rem;
  left: 1rem;
  width: min(30%, 8rem);
  max-height: 3.7rem;
  object-fit: contain;
  object-position: left center;
}

.ashley-site-truck {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}

.ashley-review {
  margin-top: 1.3rem;
}

.private-approval-note {
  margin: -4px 0 0;
  color: rgba(211, 237, 249, .8);
  font: 600 .72rem/1.55 Manrope, sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 750px) {
  .work .work-grid { grid-template-columns: 1fr; }
  .work .project, .work .p1 { height: 320px; }
  .ashley-site-browser-screen { min-height: 17rem; }
  .ashley-site-logo { max-height: 2.7rem; }
}