/* Photo integration · Culbertson Contracting · 2026-10-09
   Original field photographs, responsive assets, and optional client-side gallery. */
#main picture {display:block; min-width:0;}
#main picture img {display:block; width:100%; height:100%; object-fit:cover;}
#main .home-hero {padding:56px 0 66px; min-height:620px;}
#main .home-hero .hero-grid {grid-template-columns:.92fr 1.08fr; gap:38px;}
#main .home-hero .hero-copy h1 {font-size:clamp(3.6rem,6.1vw,5.7rem); letter-spacing:-.045em;}
#main .hero-media {height:455px; margin:0; max-width:none; width:100%;}
#main .hero-media picture {height:100%;}
#main .hero-media::after {background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.82));}
#main .hero-image-caption {position:absolute; bottom:22px; left:25px; right:25px; z-index:3;}
#main .hero-image-caption strong {display:block; font-size:.85rem; letter-spacing:.09em; text-transform:uppercase;}
#main .hero-image-caption a {display:inline-flex; min-height:44px; align-items:center; gap:14px; color:#fff; font-size:.88rem; border-bottom:1px solid #a7abb0;}
#main .hero-image-caption a:hover {color:#e1b03a;}
#main .field-photo {position:relative; background:#1b1c1e; margin:0; overflow:hidden; color:#fff; border:1px solid #44484b;}
#main .field-photo picture {height:100%;}
#main .field-photo figcaption {position:absolute; bottom:0; left:0; width:100%; padding:65px 24px 22px; background:linear-gradient(transparent,rgba(0,0,0,.88)); color:#fff; font-size:1.08rem; font-weight:700; line-height:1.4;}
#main .field-photo figcaption span {display:block; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ddd; margin-bottom:6px;}
#main .identity-photo {height:590px;}
#main .about-field-photo {height:590px;}
#main .hero-service-photo {height:510px;}
#main .process-service-photo {height:580px;}
#main .hero-service-photo img {object-fit:cover;}
#main .cards .card {overflow:hidden;}
#main .cards .card-photo {height:178px; width:calc(100% + 3.2rem); margin:-2.1rem -1.6rem 1.4rem; flex-shrink:0;}
#main .service-card-photo {height:255px; overflow:hidden;}
#main .photo-showcase {background:#fff;}
#main .photo-section-heading {display:grid; grid-template-columns:1fr .8fr; align-items:end; gap:44px; margin-bottom:36px;}
#main .photo-section-heading h2 {margin-bottom:0; font-size:clamp(2.4rem,4.4vw,4rem); max-width:780px;}
#main .photo-section-heading .lead {font-size:1.1rem;}
#main .gallery-intro {max-width:640px; color:#5c6165; font-size:1rem; line-height:1.7; margin-bottom:0;}
#main .text-action {display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid #666; font-size:.85rem; font-weight:700; letter-spacing:.03em; margin-top:16px;}
#main .text-action:hover {color:#8a681e;}
#main .work-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px;}
#main .work-card {margin:0; background:#fff; border:1px solid #d7d9da; min-width:0;}
#main .work-card[hidden] {display:none!important;}
#main .work-photo {position:relative; display:block; overflow:hidden; background:#222; aspect-ratio:4/3;}
#main .work-photo picture {height:100%;}
#main .work-photo img {transition:transform .3s ease;}
#main .work-photo:hover img {transform:scale(1.025);}
#main .expand-hint {position:absolute; bottom:12px; right:12px; padding:7px 10px; background:rgba(0,0,0,.8); color:#fff; font-size:.67rem; letter-spacing:.05em;}
#main .work-card-copy {padding:19px 19px 22px;}
#main .category-label {display:block; color:#5c6165; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
#main .work-card h3 {font-size:1.15rem; line-height:1.2; margin:0;}
#main .photo-evidence {background:#f2f3f3;}
#main .photo-evidence h2 {max-width:850px;}
#main .photo-evidence .gallery-intro {margin-bottom:32px;}
#main .work-page-hero {padding:65px 0 70px;}
#main .work-page-hero::after {display:none;}
#main .work-hero-grid {display:grid; grid-template-columns:1.15fr .65fr; align-items:center; gap:60px;}
#main .work-page-hero h1 {font-size:clamp(3.5rem,6.8vw,6rem); line-height:.98;}
#main .work-page-hero p {font-size:1.12rem;}
#main .work-page-hero .eyebrow {font-size:.8rem; color:#d6a21e;}
#main .work-hero-photo {height:370px;}
#main .field-gallery-section {padding-top:75px;}
#main .gallery-toolbar {margin:35px 0 28px; border-top:1px solid #d6d8da; border-bottom:1px solid #d6d8da; padding:17px 0;}
#main .gallery-filters {display:flex; flex-wrap:wrap; gap:9px;}
#main .gallery-filters button {border:1px solid #b5b9bc; border-radius:0; padding:10px 15px; min-height:44px; background:#fff; color:#242628; font-size:.79rem; font-weight:700; cursor:pointer;}
#main .gallery-filters button[aria-pressed="true"] {background:#151719; border-color:#151719; color:#fff;}
#main .gallery-filters button:hover {border-color:#151719;}
#main .gallery-count {color:#686c70; font-size:.77rem; margin:13px 0 0;}
#main .film-layout {display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:50px;}
#main .field-film {margin:0; background:#1a1b1d; border:1px solid #404448;}
#main .field-film video {display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000;}
#main .field-film figcaption {padding:14px 18px; color:#c1c5c8; font-size:.73rem; letter-spacing:.06em; text-transform:uppercase;}
#main .film-description {color:#c4c8cb; font-size:.9rem;}
.photo-dialog {background:#111416; color:#fff; padding:14px; border:1px solid #60666b; width:min(1100px,calc(100vw - 24px)); max-height:calc(100dvh - 30px);}
.photo-dialog::backdrop {background:rgba(0,0,0,.89);}
.photo-dialog-toolbar {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px;}
.photo-dialog-count {margin:0; color:#c7cbce; font-size:.8rem;}
.photo-dialog-close,.photo-dialog-prev,.photo-dialog-next {border:1px solid #666c72; background:#1f2427; color:#fff; padding:9px 15px; min-height:44px; cursor:pointer; font-size:.83rem;}
.photo-dialog-close:hover,.photo-dialog-prev:hover,.photo-dialog-next:hover {background:#454b51;}
.photo-dialog figure {margin:0;}
.photo-dialog img {display:block; width:100%; max-height:calc(100dvh - 205px); object-fit:contain; margin:0 auto;}
.photo-dialog-caption {padding:12px 3px 5px; font-size:1rem; line-height:1.35; font-weight:700;}
.photo-dialog-bottom {display:flex; justify-content:space-between; gap:10px; margin-top:10px;}
.lightbox-open {overflow:hidden;}
@media(max-width:1000px){
 #main .home-hero .hero-grid {grid-template-columns:1fr; gap:30px;}
 #main .home-hero .hero-copy {text-align:center;}
 #main .home-hero .hero-copy p {margin-inline:auto;}
 #main .home-hero .button-row,#main .home-hero .eyebrow {justify-content:center;}
 #main .hero-media {height:auto; aspect-ratio:4/3; width:100%; max-width:680px; margin:0 auto;}
 #main .hero-media picture {position:absolute; inset:0;}
 #main .work-hero-grid {grid-template-columns:1fr 1fr; gap:30px;}
 #main .work-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 #main .photo-showcase .work-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
 #main .work-card-copy {padding:15px;}
 #main .photo-showcase .work-card h3 {font-size:1rem;}
 #main .photo-showcase .category-label {font-size:.6rem;}
 #main .film-layout {grid-template-columns:1fr; gap:34px;}
 #main .identity-photo,#main .about-field-photo {height:490px; max-width:640px; width:100%; margin:auto;}
}
@media(max-width:800px){
 #main .photo-section-heading {grid-template-columns:1fr; gap:22px;}
 #main .hero-service-photo,#main .process-service-photo {height:470px; width:100%; max-width:620px; margin:auto;}
}
@media(max-width:620px){
 #main .home-hero {padding:38px 0 30px; min-height:0;}
 #main .home-hero .hero-copy h1 {font-size:clamp(3.2rem,12.3vw,4.5rem);}
 #main .hero-image-caption {bottom:12px; left:16px; right:16px;}
 #main .hero-image-caption strong {font-size:.69rem;}
 #main .hero-image-caption a {font-size:.77rem; min-height:38px;}
 #main .hero-service-photo,#main .process-service-photo {height:440px;}
 #main .work-hero-grid {grid-template-columns:1fr;}
 #main .work-hero-photo {height:320px;}
 #main .work-page-hero {padding:42px 0;}
 #main .work-page-hero h1 {font-size:3.6rem;}
 #main .work-grid,#main .photo-showcase .work-grid {grid-template-columns:1fr; gap:22px;}
 #main .work-photo {aspect-ratio:4/3;}
 #main .work-card-copy {padding:17px 18px 20px;}
 #main .photo-showcase .work-card h3 {font-size:1.17rem;}
 #main .photo-showcase .category-label {font-size:.66rem;}
 #main .field-gallery-section {padding-top:50px;}
 #main .gallery-filters {gap:7px;}
 #main .gallery-filters button {font-size:.73rem; padding:9px 11px;}
 #main .identity-photo,#main .about-field-photo {height:440px;}
 #main .hero-service-photo figcaption,#main .process-service-photo figcaption {font-size:1rem;}
 .photo-dialog {padding:10px;}
}
@media(prefers-reduced-motion:reduce){#main .work-photo img {transition:none;}#main .work-photo:hover img{transform:none;}}
/* Keep the hydrant's top visible in the cropped service and gallery views. */
#main img[alt^="A yellow fire hydrant"] {object-position:50% 0%!important;}