/* v18: image-first design gallery. Scoped to the public showcase/homepage. */
.project-grid.responsive-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 24px}
.project-grid.responsive-showcase .project-card{min-width:0}
.project-grid.responsive-showcase .project-image-link{display:block;aspect-ratio:4/3;overflow:hidden;position:relative;background:#e4e8e9}
.project-grid.responsive-showcase .project-image-link img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .4s ease}
.project-grid.responsive-showcase .project-card:hover .project-image-link img{transform:scale(1.035)}
.project-grid.responsive-showcase .project-caption{gap:9px;align-items:flex-start}
.project-grid.responsive-showcase .project-caption h3{font-size:clamp(20px,1.75vw,27px);line-height:1.15}
.project-grid.responsive-showcase .text-link{white-space:nowrap}
.portfolio-corporate{padding-bottom:68px}
.portfolio-existing{padding-top:65px;background:#f0f3f2}
.showcase-gallery-note{margin:31px 0 0;font-size:13px;color:#5d6f78;line-height:1.65}
.corporate-preview-card .project-image-link{box-shadow:0 12px 24px #142f3a18;border-radius:6px}
.corporate-preview-card .project-image-link:focus-visible{outline:3px solid #539eb1;outline-offset:4px}
.full-design-action{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-top:16px;flex-wrap:wrap;font-size:13px}
.full-design-action a{color:#193949;text-decoration:underline;text-underline-offset:4px;font-weight:700}
.full-design-action span{color:#71808a}
@media(max-width:1140px){.project-grid.responsive-showcase{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:675px){.project-grid.responsive-showcase{grid-template-columns:minmax(0,1fr);gap:35px}.project-grid.responsive-showcase .project-caption h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.project-grid.responsive-showcase .project-image-link img{transition:none}.project-grid.responsive-showcase .project-card:hover .project-image-link img{transform:none}}

/* Keep image slots visible when an image is loading or fails. */
.project-image-link{isolation:isolate}.project-image-link img{background:linear-gradient(125deg,#e3edf0,#cfdfe5)}

/* v19 / 24 concepts and scale / capability navigation */
.portfolio-index{padding:48px 0 8px;background:#f5f8f9}.index-intro{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end}.index-intro h2{font-size:clamp(26px,3vw,44px);line-height:1.15;margin:9px 0;color:#152e40}.index-intro p{font-size:15px;color:#506370;line-height:1.7}.portfolio-filter{display:flex;flex-wrap:wrap;gap:9px;padding:22px 0 5px}.portfolio-filter button{padding:10px 16px;border:1px solid #cad8dd;border-radius:99px;background:white;color:#27495c;cursor:pointer;font-size:12px;font-weight:700}.portfolio-filter button:is(:hover,.is-active){background:#153f58;border-color:#153f58;color:white}.portfolio-filter button:focus-visible{outline:3px solid #61a8c9;outline-offset:3px}.filter-status{font-size:12px;color:#5a6d78;margin:8px 0 24px}.portfolio-list[hidden],.project-grid.responsive-showcase .project-card[hidden]{display:none!important}.scale-chip{display:inline-block;background:#e7eef2;border-radius:30px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;margin:0 8px 8px 0;color:#244559;font-weight:700}.project-card[data-scale=small] .scale-chip{background:#fff0e5;color:#80502e}.portfolio-list .project-card{overflow:hidden}.portfolio-existing .project-grid{row-gap:45px}.portfolio-existing .portfolio-topline{flex-wrap:wrap}.application-bridge{background:#f8f9fa}.application-bridge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.application-bridge-grid a{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #dce6e7;border-radius:12px;padding:26px;text-decoration:none;box-shadow:0 9px 32px #142e3c08;min-height:160px}.application-bridge-grid a:hover{border-color:#5293ad;transform:translateY(-2px)}.application-bridge-grid strong{font-size:19px;color:#183548}.application-bridge-grid span{font-size:13px;color:#5a7181;line-height:1.6}.industry-focus{background:#f1f6f7}
@media(max-width:980px){.application-bridge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:675px){.index-intro{grid-template-columns:1fr;gap:5px}.application-bridge-grid{grid-template-columns:1fr}.portfolio-filter button{font-size:11px;padding:9px 12px}}

/* V25: make each website concept clearly distinct on phones.
   Keep the existing multi-column desktop gallery unchanged. */
@media (max-width: 767px) {
  .project-grid.responsive-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .project-grid.responsive-showcase .project-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d7e2e7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(16, 42, 55, .09);
  }
  .project-grid.responsive-showcase .project-image-link,
  .project-grid.responsive-showcase .corporate-preview-card .project-image-link {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 4 / 3;
  }
  .project-grid.responsive-showcase .project-image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .project-grid.responsive-showcase .project-caption {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 17px 18px 20px;
    border-top: 2px solid #dae5ea;
    background: #fff;
  }
  .project-grid.responsive-showcase .project-caption > div { min-width: 0; }
  .project-grid.responsive-showcase .project-caption h3 {
    margin: 8px 0 0;
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.23;
    overflow-wrap: break-word;
  }
  .project-grid.responsive-showcase .project-caption h3 a {
    color: #17374c;
    text-decoration: none;
  }
  .project-grid.responsive-showcase .project-caption .tag-label {
    line-height: 1.45;
  }
  .project-grid.responsive-showcase .project-caption .text-link {
    display: inline-flex;
    align-self: flex-start;
    margin: 0;
    padding: 9px 0 0;
    font-size: 14px;
    line-height: 1.45;
    white-space: normal;
    font-weight: 700;
  }
  .project-grid.responsive-showcase .project-caption a:focus-visible {
    outline: 2px solid #3479a1;
    outline-offset: 3px;
  }
}