/* Concept cards share the existing owned-project surface and hover styles. */
.project-grid.concept-projects { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; align-items: stretch; grid-auto-rows: auto; }
.reference-screenshot { aspect-ratio: 1200 / 833; margin: 10px 10px 0; overflow: hidden; border-radius: 13px; background: #eeede8; }
.reference-screenshot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .35s ease; }
.reference-project:hover .reference-screenshot img { transform: scale(1.015); }
.reference-project:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.concept-projects > .project {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.concept-projects .project-visual,
.concept-projects .concept-preview {
  flex: none;
  height: auto;
  aspect-ratio: 1.9;
  margin: 10px 10px 0;
  border-radius: 13px;
}
.project-grid.concept-projects .project-info {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: end;
  gap: 20px;
  padding: 25px 28px 30px;
}
.concept-projects .project-info > div:first-child { min-width: 0; align-self: start; }
.project-grid.concept-projects .project-info h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.4;
}
.project-grid.concept-projects .inline-label {
  display: block;
  width: fit-content;
  margin: 8px 0 0;
  padding: 1px 9px;
  border: 1px solid #d0d0cd;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.5;
}
.project-grid.concept-projects .project-info p {
  display: block;
  margin: 0;
  max-width: none;
  font-size: 16px;
  line-height: 1.65;
}
.project-grid.concept-projects .round-arrow { display: grid; width: 42px; height: 42px; }
.concept-projects .project-tags { display: none; }
@media (min-width: 761px) and (max-width: 1100px) {
  .project-grid.concept-projects .project-info { padding: 20px; gap: 12px; grid-template-columns: minmax(0, 1fr) 36px; }
  .project-grid.concept-projects .project-info h3 { font-size: 19px; }
  .project-grid.concept-projects .project-info p { font-size: 14px; }
  .project-grid.concept-projects .round-arrow { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  .project-grid.concept-projects { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .reference-screenshot { margin: 8px 8px 0; border-radius: 11px; }
  .concept-projects .project-visual,
  .concept-projects .concept-preview { aspect-ratio: 2; margin: 8px 8px 0; border-radius: 11px; }
  .concept-projects .drevrez-visual { padding: 28px 20px 0; }
  .project-grid.concept-projects .project-info { padding: 20px 22px 24px; gap: 12px; grid-template-columns: minmax(0, 1fr) 36px; }
  .project-grid.concept-projects .project-info h3 { font-size: 20px; }
  .project-grid.concept-projects .round-arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .concept-projects > .project,
  .concept-projects .round-arrow,
  .concept-projects .browser-frame,
  .concept-projects .concept-preview > img { transition: none; }
  .reference-screenshot img { transition: none; }
}

/* A real invitation to enquire, clearly separate from reference work. */
.project-grid.concept-projects .project-invitation { background:#19191c; color:#fafafa; border-color:#303036; }
.invitation-visual { aspect-ratio:1200/833; margin:10px 10px 0; border-radius:13px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:28px; background:radial-gradient(ellipse at 50% 100%,#48485555,transparent 75%),#1d1d21; }
.invitation-label { color:#b9b9c4; font-size:11px; letter-spacing:.16em; font-weight:650; }
.invitation-window { position:relative; width:78%; max-width:330px; aspect-ratio:1.65; border:1px solid #ffffff2b; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#ffffff03; box-shadow:0 22px 45px #0003; }
.invitation-window-bar { position:absolute; top:0; left:0; right:0; height:28px; border-bottom:1px solid #ffffff18; display:flex; align-items:center; gap:5px; padding:0 12px; }
.invitation-window-bar i { width:4px; height:4px; background:#a0a0ab; border-radius:50%; }
.invitation-plus { width:28px; height:28px; position:relative; margin-top:24px; }
.invitation-plus::before,.invitation-plus::after { content:''; position:absolute; background:#e4e4eb; top:50%; left:50%; transform:translate(-50%,-50%); }
.invitation-plus::before { width:28px; height:1px; }.invitation-plus::after { width:1px; height:28px; }
.invitation-wordmark { font-size:10px; letter-spacing:.15em; color:#b9b9c4; }
.project-grid.concept-projects .project-invitation .project-info { display:block; }
.project-grid.concept-projects .project-invitation .project-info h3 { font-size:clamp(25px,2.6vw,38px); line-height:1.2; font-weight:500; letter-spacing:-.045em; margin-bottom:12px; }
.project-grid.concept-projects .project-invitation .project-info p { color:#bdbdc7; max-width:32ch; }
.invitation-cta { display:inline-block; margin-top:24px; padding-bottom:5px; border-bottom:1px solid #ffffff70; font-size:14px; font-weight:600; }
.project-invitation:hover .invitation-cta { border-color:#fff; }
@media(max-width:760px) {
 .project-grid.concept-projects { grid-auto-rows:auto; }
 .invitation-visual { margin:8px 8px 0; padding:24px 16px; gap:20px; }
 .invitation-window { width:83%; }
 .invitation-label { font-size:10px; }
 .invitation-cta { margin-top:20px; }
}

/* Two references initially, with optional expansion on every screen size. */
.project-grid.concept-projects .project-invitation { grid-column:1/-1; }
.project-invitation .invitation-visual { display:none; }
.project-grid.concept-projects .project-invitation .project-info { padding:32px; }
.project-grid.concept-projects .project-invitation .project-info p { max-width:none; }
.project-more-control { grid-column:1/-1; }
.project-more-button { width:100%; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; color:#19191c; background:transparent; border:1px solid #bdbdc5; border-radius:12px; font-size:14px; font-weight:600; }
.project-more-button::after { content:'+'; font-size:24px; font-weight:400; line-height:1; }
.project-more-button[aria-expanded="true"]::after { content:'−'; }
.project-more-button:hover { background:#e8e8eb; }
@media(max-width:760px) {
 .reference-screenshot { aspect-ratio:1.9; }
 .project-invitation .invitation-visual { display:none; }
 .project-grid.concept-projects .project-invitation .project-info { padding:28px 24px; }
}