/* XHEF Construction — photo layer */

/* hero photo */
.hero-photo{position:relative}
.hero-photo img{width:100%;height:540px;object-fit:cover;border:1px solid var(--line);display:block}
.hero-photo::after{content:"";position:absolute;left:-14px;bottom:-14px;width:120px;height:120px;
  border-left:3px solid var(--gold);border-bottom:3px solid var(--gold);pointer-events:none}
.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;position:relative}

/* stats over photo */
.stats{background-image:linear-gradient(rgba(22,23,26,.9),rgba(22,23,26,.93)),var(--stats-bg);background-size:cover;background-position:center}

/* page head photo */
.phead .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;filter:grayscale(.35)}
.phead .in{z-index:2}

/* project cards */
.card-top{height:200px}
.card-top::before{display:none}
.card-top::after{background:linear-gradient(to top,rgba(22,23,26,.75),rgba(22,23,26,.05) 55%);
  inset:0;width:100%;height:100%;translate:none;left:0;bottom:0;border-radius:0}
.card-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-top img{transform:scale(1.06)}
.card-top b{color:#fff;opacity:.55}

/* sector cards with photo */
.sect article{padding:0;overflow:hidden}
.sect .ph{height:200px;overflow:hidden;position:relative}
.sect .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sect article:hover .ph img{transform:scale(1.05)}
.sect .body{padding:1.9rem 1.8rem 2.1rem;position:relative}
.sect article::before{display:none}

/* wide banner */
.banner{position:relative;height:440px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.banner img{width:100%;height:100%;object-fit:cover}
.banner .cap{position:absolute;left:0;right:0;bottom:0;padding:2.6rem 0;
  background:linear-gradient(to top,rgba(22,23,26,.86),rgba(22,23,26,0));color:#fff}
.banner .cap h2{color:#fff;margin-bottom:.7rem}
.banner .cap p{color:#DDE0E5;max-width:56ch}
.banner .cap .mono{color:var(--gold-lt);display:block;margin-bottom:.8rem}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--concrete-2)}
.gallery img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .6s}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem .9rem;color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(22,23,26,.85),rgba(22,23,26,0))}
.gallery figure:first-child{grid-column:span 2}
.gallery figure:first-child img{height:220px}

/* intro photo */
.ph-frame{position:relative;margin-top:2rem}
.ph-frame img{width:100%;height:340px;object-fit:cover;border:1px solid var(--line)}
.ph-frame::after{content:"";position:absolute;right:-12px;top:-12px;width:96px;height:96px;
  border-right:3px solid var(--gold);border-top:3px solid var(--gold)}

/* lists with photo */
.lists .ph{margin-bottom:1.2rem;overflow:hidden;border:1px solid var(--line)}
.lists .ph img{width:100%;height:180px;object-fit:cover;transition:transform .6s}
.lists > div:hover .ph img{transform:scale(1.05)}

/* team photos */
.team article{padding:0;overflow:hidden}
.team .ph{height:170px;overflow:hidden}
.team .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.team article:hover .ph img{transform:scale(1.06)}
.team .body{padding:1.5rem 1.4rem 1.7rem}
.team .badge{margin-bottom:.9rem}

/* contact side photo */
.c-photo{margin-top:2rem;border:1px solid var(--line);overflow:hidden}
.c-photo img{width:100%;height:280px;object-fit:cover}

@media(max-width:1050px){
  .hero-photo img{height:380px}
  .hero-cards{grid-template-columns:1fr;margin-top:2rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:first-child{grid-column:span 2}
  .banner{height:340px}
}
@media(max-width:640px){
  .hero-photo img{height:290px}
  .gallery{grid-template-columns:1fr}
  .gallery figure:first-child{grid-column:span 1}
  .banner{height:300px}
  .card-top{height:180px}
}