/* Smart Flooring Solutions — Portfolio V2
   Purposefully scoped to body.portfolio-v2 so the rest of the website is unchanged. */
.portfolio-v2 .portfolio-page {
  padding: 33px 0 52px;
  background: #fff;
  color: #24312b;
}
.portfolio-v2 .portfolio-intro { margin: 0 0 20px; }
.portfolio-v2 .portfolio-intro .eyebrow {
  color: #9a6a30; letter-spacing: .13em; font-weight: 800;
  font-size: .70rem; margin: 0 0 7px;
}
.portfolio-v2 .portfolio-intro-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.portfolio-v2 .portfolio-intro h1 {
  margin: 0 0 6px; font-size: clamp(1.75rem, 3vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.045em; color: #263d33;
}
.portfolio-v2 .portfolio-intro p {
  font-size: .94rem; line-height: 1.5; margin: 0; color: #66716b;
}
.portfolio-v2 .portfolio-google-link {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; font-size: .82rem; font-weight: 800; color: #946521;
  border-bottom: 1px solid #c8a16d; padding-bottom: 3px; white-space: nowrap;
}
.portfolio-v2 .portfolio-google-link:hover { color: #52360c; }
.portfolio-v2 .gallery-filters {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  max-width: 760px; gap: 11px; margin: 0 0 25px; padding: 0;
  overflow: visible;
}
.portfolio-v2 .gallery-filter,
.portfolio-v2 .gallery-filter:hover,
.portfolio-v2 .gallery-filter.active {
  display: block; width: 100%; min-width: 0; height: 116px; min-height: 0;
  position: relative; padding: 0; margin: 0; border: 2px solid transparent;
  border-radius: 11px; overflow: hidden; cursor: pointer; text-align: left;
  background: #e9eae7; box-shadow: none; transform: none;
}
.portfolio-v2 .gallery-filter.active {
  border-color: #0a7886; outline: 2px solid rgba(10,120,134,.24);
  outline-offset: 1px;
}
.portfolio-v2 .gallery-filter img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .2s ease;
}
.portfolio-v2 .gallery-filter:hover img { transform: scale(1.055); }
.portfolio-v2 .gallery-filter::after {
  content: ''; position: absolute; inset: 40% 0 0;
  background: linear-gradient(transparent,rgba(0,0,0,.72));
  pointer-events: none;
}
.portfolio-v2 .gallery-filter span {
  position: absolute; z-index: 1; left: 11px; bottom: 10px;
  color: #fff; font-weight: 800; font-size: .99rem; line-height: 1.1;
  text-shadow: 0 1px 5px #0008; white-space: nowrap;
}
.portfolio-v2 .gallery-toolbar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; border-top: 1px solid #e5e9e6; padding: 18px 0 14px;
}
.portfolio-v2 .gallery-toolbar h2 {
  font-size: 1.23rem; letter-spacing: -.02em; color: #263d33; margin: 0;
}
.portfolio-v2 .gallery-toolbar #gallery-count {
  font-size: .82rem; color: #65716a; font-weight: 600; white-space: nowrap;
}
.portfolio-v2 .real-gallery {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: 8px; gap: 10px; width: 100%; min-height: 0;
}
.portfolio-v2 .real-photo-card,
.portfolio-v2 .real-photo-card:hover {
  display: block; position: relative; width: 100%; min-width: 0; height: 100%;
  padding: 0; border: 0; margin: 0; border-radius: 7px;
  overflow: hidden; background: #e5e8e3;
  box-shadow: none; transform: none; cursor: zoom-in;
}
.portfolio-v2 .real-photo-card:focus-visible {
  outline: 3px solid #168496; outline-offset: 2px;
}
.portfolio-v2 .real-photo-card img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: auto; transition: transform .18s ease;
}
.portfolio-v2 .real-photo-card:hover img { transform: scale(1.025); }
.portfolio-v2 .real-photo-card:disabled { cursor: default; opacity: .6; }
.portfolio-v2 .gallery-empty[hidden] {display:none}
.portfolio-v2 .gallery-empty {
  padding: 35px 20px; background: #f7f7f4; border-radius: 8px;
  color: #56645d; text-align: center;
}
.portfolio-v2 .gallery-attribution {
  margin: 19px 0 0; color: #748078; font-size: .76rem; line-height: 1.6;
}
.portfolio-v2 .photo-lightbox {
  border: 0; padding: 0; width: min(1050px,95vw);
  max-width: 95vw; max-height: 94vh;
  border-radius: 10px; overflow: auto; background: #15221c; color: white;
  box-shadow: 0 25px 90px #0008;
}
.portfolio-v2 .photo-lightbox::backdrop { background: rgba(0,0,0,.86); }
.portfolio-v2 .photo-lightbox #photo-lightbox-image {
  display:block; width:100%; height:auto; max-height:76vh;
  object-fit:contain; background:#16231c;
}
.portfolio-v2 .photo-view-top,
.portfolio-v2 .photo-view-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  padding:10px 18px; color:#eef1ef; font-size:.83rem;
}
.portfolio-v2 .photo-view-top #photo-lightbox-close {
  position:static; width:37px; height:37px; display:grid; place-items:center;
  cursor:pointer; font-size:1.6rem; line-height:1; border:0;
  padding:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
}
.portfolio-v2 .photo-view-bottom a {color:#eec17b; white-space:nowrap;}
@media(max-width:1050px) {
  .portfolio-v2 .real-gallery {grid-template-columns: repeat(3,minmax(0,1fr));}
}
@media(max-width:700px) {
  .portfolio-v2 .portfolio-page {padding: 21px 0 35px;}
  .portfolio-v2 .portfolio-intro {margin-bottom:16px;}
  .portfolio-v2 .portfolio-intro-row {display:block;}
  .portfolio-v2 .portfolio-intro h1 {font-size:1.74rem;}
  .portfolio-v2 .portfolio-intro p {font-size:.81rem;}
  .portfolio-v2 .portfolio-google-link {
    display:inline-flex; font-size:.77rem; margin-top:10px;
  }
  .portfolio-v2 .gallery-filters {gap:7px; margin-bottom:14px;}
  .portfolio-v2 .gallery-filter,
  .portfolio-v2 .gallery-filter:hover,
  .portfolio-v2 .gallery-filter.active {height:86px; border-radius:8px; border-width:2px;}
  .portfolio-v2 .gallery-filter span {font-size:.72rem; left:6px; bottom:8px;}
  .portfolio-v2 .gallery-toolbar {padding:12px 0 10px;}
  .portfolio-v2 .gallery-toolbar h2 {font-size:1.04rem;}
  .portfolio-v2 .gallery-toolbar #gallery-count {font-size:.74rem;}
  .portfolio-v2 .real-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:7px; gap:7px;
  }
  .portfolio-v2 .real-photo-card {border-radius:6px;}
  .portfolio-v2 .photo-view-bottom {font-size:.73rem;}
}
@media(max-width:350px) {
  .portfolio-v2 .gallery-filter span {font-size:.66rem;left:4px;}
}

/* Portfolio photo carousel: stable image stage, overlay navigation, touch controls. */
.portfolio-v2 .photo-view-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: min(72vh, 760px); overflow: hidden;
  background: #111a15; touch-action: pan-y;
}
.portfolio-v2 .photo-view-stage #photo-lightbox-image {
  display:block; width:auto; max-width:100%; height:auto; max-height:100%;
  object-fit:contain; background:transparent; user-select:none;
}
.portfolio-v2 .photo-view-stage .photo-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:64px; border:0; border-radius:8px;
  background:rgba(0,0,0,.58); color:white; font-size:2.6rem;
  line-height:1; display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.portfolio-v2 .photo-view-stage .photo-nav:hover {background:rgba(0,0,0,.8);}
.portfolio-v2 .photo-view-stage .photo-nav:focus-visible {
  outline:3px solid #eec17b; outline-offset:2px;
}
.portfolio-v2 .photo-view-stage .photo-nav[hidden] {display:none;}
.portfolio-v2 .photo-nav-prev {left:12px;}
.portfolio-v2 .photo-nav-next {right:12px;}
@media (max-width:700px) {
  .portfolio-v2 .photo-view-stage {height:min(70vh, 660px);}
  .portfolio-v2 .photo-view-stage .photo-nav {width:44px; height:56px; font-size:2.25rem;}
  .portfolio-v2 .photo-nav-prev {left:5px;}
  .portfolio-v2 .photo-nav-next {right:5px;}
  .portfolio-v2 .photo-view-top,.portfolio-v2 .photo-view-bottom {padding:8px 12px;}
}

/* Portfolio tagline and service summary 2026-11-03 */
.portfolio-v2 .portfolio-intro .portfolio-tagline {
  margin:7px 0 3px;
  color:#344c43;
  font-weight:800;
  font-size:1rem;
  line-height:1.35;
}
.portfolio-v2 .portfolio-intro .portfolio-service-list {
  margin:0 0 5px;
  color:#815b2d;
  font-weight:650;
  font-size:.88rem;
  line-height:1.5;
}
.portfolio-v2 .portfolio-intro .portfolio-description {
  margin:0;
  color:#66716b;
  font-size:.87rem;
}
@media(max-width:700px) {
  .portfolio-v2 .portfolio-intro .portfolio-tagline {font-size:.92rem;line-height:1.4}
  .portfolio-v2 .portfolio-intro .portfolio-service-list {font-size:.80rem;line-height:1.45}
  .portfolio-v2 .portfolio-intro .portfolio-description {font-size:.78rem}
}


/* Evenly distributed four-category portfolio row 2026-11-03 */
.portfolio-v2 .gallery-filters {
  width:100%;
  max-width:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(7px,1.15vw,15px);
}
@media(min-width:701px){
  .portfolio-v2 .gallery-filter,
  .portfolio-v2 .gallery-filter:hover,
  .portfolio-v2 .gallery-filter.active {
    height:clamp(116px,12vw,165px);
  }
}