/* Resolution photographic presentation: natural colors, banner fades and balanced galleries. */
body[data-page] #main img,body[data-page] #photo-dialog #large-photo{filter:none;}
body[data-page] #main .photo-banner>.banner-photo,body[data-page="home"] #main .hero.home-overview>figure img{filter:none;}
body[data-page="home"] #main .hero.home-overview{grid-template-columns:minmax(0,2fr) minmax(0,3fr);min-height:0;}
body[data-page="home"] #main .hero.home-overview .hero-copy{padding:60px 32px 60px max(5vw,calc((100vw - 1200px)/2));}
body[data-page="home"] #main .hero.home-overview h1{font-size:clamp(36px,4.2vw,66px);}
body[data-page="home"] #main .hero.home-overview>figure{min-height:0;align-self:center;}
body[data-page="home"] #main .hero.home-overview>figure img{display:block;position:static;inset:auto;width:100%;height:auto;object-fit:contain;}
body[data-page="home"] #main .hero.home-overview>figure::before{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0b2532 0%,rgba(11,37,50,0) 28%),linear-gradient(180deg,#0b2532 0%,rgba(11,37,50,0) 6%,rgba(11,37,50,0) 85%,#0b2532 100%);}
body[data-page="home"] #main .hero.home-overview>figure figcaption{background:transparent;padding:0;text-shadow:0 1px 4px #0b2532,0 0 8px #0b2532;}
body[data-page] #main .photo-banner.room-showcase>.banner-photo{border-radius:18% 0 0 18% / 9% 0 0 9%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 7%,#000 16%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.7) 7%,#000 16%,#000 100%);}
@media(max-width:900px){body[data-page="home"] #main .hero.home-overview{grid-template-columns:minmax(0,1fr);min-height:0;}body[data-page="home"] #main .hero.home-overview .hero-copy{padding:44px 7% 38px;}body[data-page="home"] #main .hero.home-overview h1{font-size:clamp(40px,9vw,62px);}body[data-page="home"] #main .hero.home-overview>figure::before{background:linear-gradient(180deg,#0b2532 0%,rgba(11,37,50,0) 12%,rgba(11,37,50,0) 92%,#0b2532 100%);}}
@media(max-width:760px){body[data-page] #main .photo-banner.room-showcase>.banner-photo{border-radius:8% 8% 0 0 / 5% 5% 0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 100%);}}


/* Reviewed banner and gallery refinements. Consulting composition remains unchanged. */

/* Preserve the approved homepage composition; extend the blend farther into the photo. */
body[data-page="home"] #main .hero.home-overview > figure::before {
  background:
    linear-gradient(90deg, #0b2532 0%, rgba(11,37,50,.86) 10%, rgba(11,37,50,.32) 25%, rgba(11,37,50,0) 40%),
    linear-gradient(180deg, #0b2532 0%, rgba(11,37,50,0) 6%, rgba(11,37,50,0) 85%, #0b2532 100%);
}

/* Room photography reaches the outer right edge, with the internal edges dissolved.
   Auto dimensions keep portrait masks aligned to the actual photo, not a letterbox. */
body[data-page] #main .photo-banner.room-showcase {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 0;
  padding: 28px 0 28px max(24px, calc((100vw - 1200px) / 2));
}

body[data-page] #main .photo-banner.room-showcase > .wrap {
  padding: 24px clamp(24px, 3.6vw, 56px) 24px 0;
}

body[data-page] #main .photo-banner.room-showcase > .banner-photo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 580px;
  justify-self: end;
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 34%, #000 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 900px) {
  body[data-page="home"] #main .hero.home-overview > figure::before {
    background: linear-gradient(180deg, #0b2532 0%, rgba(11,37,50,.6) 8%, rgba(11,37,50,0) 20%, rgba(11,37,50,0) 92%, #0b2532 100%);
  }
}

@media (max-width: 760px) {
  body[data-page] #main .photo-banner.room-showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 30px 0 0;
  }

  body[data-page] #main .photo-banner.room-showcase > .wrap {
    padding: 0 24px 14px;
  }

  body[data-page] #main .photo-banner.room-showcase > .banner-photo {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    max-height: 580px;
    border-radius: 0;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 18%, #000 86%, transparent 100%);
  }
}

/* Wide project images on About and Our Work, with complete images and soft edges. */
body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner {
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;
  gap:0;
  padding:28px 0 28px max(24px,calc((100vw - 1200px)/2));
  isolation:auto;
}
body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner::before { display:none; }
body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner>.wrap {
  grid-column:1;grid-row:1;width:auto;max-width:none;margin:0;min-width:0;
  padding:24px clamp(24px,3.6vw,56px) 24px 0;
}
body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner h1 {
  font-size:clamp(36px,3.8vw,58px);line-height:1.08;
}
body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner>.banner-photo {
  position:relative;inset:auto;grid-column:2;grid-row:1;z-index:auto;
  width:auto;height:auto;max-width:100%;max-height:560px;object-fit:contain;
  justify-self:end;border-radius:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 12%,#000 34%),linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 12%,#000 34%),linear-gradient(180deg,transparent,#000 8%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* Only the galleries observed with oversized portraits or unbalanced final tiles.
   Natural colors, original files, and full-image lightboxes remain unchanged. */
body:is([data-page="kitchen-remodeling"],[data-page="bathroom-remodeling"],[data-page="additions-major-remodels"],[data-page="exteriors-decks"],[data-page="commercial"],[data-page="commercial/tenant-improvements"]) #main .service-catalog--selected .catalog-open img {
  width:auto;height:auto;max-width:100%;max-height:500px;margin-inline:auto;
  object-fit:contain;aspect-ratio:auto;
}
@media(min-width:901px) {
  body:is([data-page="kitchen-remodeling"],[data-page="bathroom-remodeling"],[data-page="additions-major-remodels"],[data-page="exteriors-decks"],[data-page="concrete"],[data-page="semi-custom-homes"]) #main .service-catalog--selected .catalog-grid>.catalog-card:last-child:nth-child(odd) {
    grid-column:1/-1;justify-self:center;width:min(100%,540px);
  }
}
body[data-page="exteriors-decks"] #main .service-catalog--selected .catalog-card:last-child .catalog-open img {max-height:380px;}
body:is([data-page="our-work"],[data-page="commercial/projects"]) #main .gallery-grid .service-photo {
  background:transparent;width:auto;height:auto;max-width:100%;max-height:460px;margin-inline:auto;object-fit:contain;
}
body[data-page="our-work"] #main .gallery-grid--single {grid-template-columns:minmax(0,620px);}
body[data-page="our-work"] #main .project-gallery {padding-top:40px;padding-bottom:48px;}
body[data-page="design-selections"] #main .service-evidence .service-photo {object-position:50% 85%;}

@media(max-width:760px) {
  body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner {
    grid-template-columns:minmax(0,1fr);padding:30px 0 0;
  }
  body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner>.wrap {padding:0 24px 14px;}
  body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner>.banner-photo {
    grid-column:1;grid-row:2;justify-self:center;max-height:560px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 86%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 86%,transparent);
  }
}

body:is([data-page="about"],[data-page="our-work"]) #main .photo-banner>.banner-photo{width:100%;height:auto;max-height:580px;object-fit:contain;}
@media(min-width:761px){body:is([data-page="bathroom-remodeling"],[data-page="insurance-claims"]) #main .photo-banner.room-showcase>.banner-photo{width:100%;height:540px;max-height:540px;object-fit:cover;object-position:50% 60%;}}