/* Real installation photos: consistent frames, natural proportions, no stretching. */
.home-hero {
    background-image: linear-gradient(90deg, rgba(10,35,60,.96), rgba(10,35,60,.82) 30%, rgba(10,35,60,.18) 62%, rgba(10,35,60,.04)), url('assets/images/real/home-enhanced.jpg');
    background-position: center, center 57%;
}
.home-hero::before { content: none; }
.booking-banner::before {
    background-image: url('assets/images/real/booking-enhanced.jpg');
    background-position: 46% 56%;
}
.service-media > img { object-position: center 53%; }
#repairs .service-media > img { object-position: center 58%; }
.pg-story-pages[data-page] .pg-detail-hero { background-position: center 55%; }
.pg-story-pages[data-page='gate-servicing'] .pg-detail-hero { background-position: center 58%; }
.pg-story-pages[data-page='gate-repairs'] .pg-detail-hero { background-position: center 60%; }
.pg-story-pages[data-page='book-a-service'] .pg-detail-hero { background-position: center 48%; }
.pg-story-pages[data-page='brands'] .pg-detail-hero { background-position: center 57%; }
.pg-installations { padding-block: 38px 24px; }
.pg-installations > h2, .pg-installations > p { text-align: center; }
.pg-installations > p { margin-bottom: 24px; }
.pg-installation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.pg-installation-grid a {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid #d1e2ef;
    border-radius: 6px;
    background: #f4f9fd;
    color: var(--navy);
    text-decoration: none;
}
.pg-installation-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 57%; }
.pg-installation-grid a > span { display: block; padding: 12px 16px; font-size: 15px; line-height: 1.4; }
.pg-installation-grid a:hover { border-color: var(--orange); }
.pg-installation-grid a:focus-visible, .pg-more-installations summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.pg-more-installations { margin-top: 24px; }
.pg-more-installations summary { width: fit-content; margin: 0 auto; padding: 12px 20px; border: 1px solid var(--navy); border-radius: 4px; cursor: pointer; color: var(--navy); font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.pg-more-installations[open] summary { margin-bottom: 24px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 768px) {
    .home-hero { background-image: linear-gradient(90deg, rgba(10,35,60,.88), rgba(10,35,60,.56)), url('assets/images/real/home-enhanced.jpg'); background-position: center, 58% 56%; }
    .pg-installation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pg-installation-grid a > span { padding: 10px; font-size: 13px; }
    .pg-installations { padding-block: 30px 20px; }
}
@media (max-width: 420px) {
    .pg-installation-grid { grid-template-columns: 1fr; }
}

/* Vibrant photography only: coloured branding remains outside these layers. */
img[src*="/images/real/"] { filter: saturate(1.22) brightness(1.06) contrast(1.03); }
.home-hero,
.pg-story-pages[data-page] .pg-detail-hero {
    background-image: none;
    background-color: #222;
}
.home-hero::before,
.pg-story-pages[data-page] .pg-detail-hero::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    height: auto;
    background-image: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.24) 34%, rgba(0,0,0,0) 70%), var(--page-photo);
    background-position: inherit;
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(1.22) brightness(1.06) contrast(1.03);
    -webkit-mask: none;
    mask: none;
    transform: none;
    pointer-events: none;
}
.home-hero {
    --page-photo: url('assets/images/real/home-enhanced.jpg');
    background-position: center 57%;
}
.booking-banner::before { filter: saturate(1.22) brightness(1.06) contrast(1.03); }
@media (max-width: 768px) {
    .home-hero { background-image: none; background-position: 58% 56%; }
    .home-hero::before,
    .pg-story-pages[data-page] .pg-detail-hero::before {
        background-image: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.24)), var(--page-photo);
    }
}

/* Readable white hero lettering without the blue brush panel. */
.home-hero h1, .home-hero .hero-tagline, .home-hero .hero-eyebrow, .home-hero .hero-description, .pg-detail-hero h1, .pg-detail-hero h1 .brand-display, .pg-detail-hero .pg-hero-summary { text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.7); }
.pg-installation-grid a { background: transparent; }