.lx-installations,
.lx-installation {
    color: #112b3a;
    background: #fff;
    padding-block: calc(var(--lx-nav-height, 80px) + 32px) 80px;
}
.lx-installation-breadcrumb {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.6;
    color: #536772;
}
.lx-installation-breadcrumb a,
.lx-installations-heading > a,
.lx-installation-hero__heading header > a,
.lx-installation-facts a,
.lx-installation-gallery-link,
.lx-installation-directory-link,
.lx-installation-results a {
    color: #006b80;
    text-underline-offset: 4px;
    font-weight: 550;
}
.lx-installations-heading { padding-block: 48px 40px; max-width: 820px; }
.lx-installations-heading h1,
.lx-installation-hero h1 {
    font-size: clamp(2.3rem, 4.5vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    font-weight: 560;
    color: #112b3a;
    margin: 14px 0 22px;
    text-wrap: balance;
}
.lx-installations-heading > p:not(.lx-projects-eyebrow),
.lx-installation-hero__heading header > p:not(.lx-projects-eyebrow) {
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 68ch;
    margin-bottom: 22px;
}
.lx-installation-filters {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr auto;
    align-items: end;
    gap: 20px;
    padding: 24px;
    background: #f4f7f9;
    border: 1px solid #d9e3e8;
    border-radius: 12px;
}
.lx-installation-filters label { display: grid; gap: 9px; min-width: 0; font-size: .875rem; font-weight: 600; }
.lx-installation-filters :is(input, select, button) {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    color: #112b3a;
    background: #fff;
    border: 1px solid #98adb9;
    border-radius: 6px;
    font: inherit;
    font-size: 1rem;
}
.lx-installation-filters button { color: #fff; background: #082a3d; border-color: #082a3d; padding-inline: 24px; cursor: pointer; font-weight: 600; }
.lx-installation-results { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-block: 30px 20px; }
.lx-installation-results p { margin: 0; color: #536772; }
.lx-installation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.lx-installation-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e3e8;
    border-radius: 12px;
    text-decoration: none;
    color: #112b3a;
}
.lx-installation-card > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.lx-installation-card__visual {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    width: 100%;
    aspect-ratio: 5 / 2;
    min-height: 152px;
    max-height: 220px;
    padding: 22px 24px 18px;
    box-sizing: border-box;
    color: #fff;
    background: linear-gradient(125deg, #13465b, #285a65);
}
.lx-installation-card__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(3, 27, 43, .3), transparent 75%), url('/assets/installations/visuals/waves.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}
.lx-installation-card__visual--wash,
.lx-installation-card__visual--wash-and-launch { background: linear-gradient(125deg, #075565, #146c5f); }
.lx-installation-card__visual--boat-ramp { background: linear-gradient(125deg, #0b3854, #0d5869); }
.lx-installation-card__visual--parking { background: linear-gradient(125deg, #142b48, #26536f); }
.lx-installation-card__visual-place { min-width: 0; align-self: start; }
.lx-installation-card__visual-code { display: block; margin-bottom: 7px; font-size: .65rem; line-height: 1.2; font-weight: 700; letter-spacing: .16em; }
.lx-installation-card__visual-name { display: block; font-size: 1.05rem; line-height: 1.3; font-weight: 550; text-wrap: balance; }
.lx-installation-card__symbols { display: flex; align-items: center; align-self: center; }
.lx-installation-card__symbols svg { display: block; width: 68px; height: 68px; }
.lx-installation-card__symbols--combined { gap: 4px; }
.lx-installation-card__symbols--combined svg { width: 48px; height: 48px; }
.lx-installation-card__visual-label { grid-column: 1 / -1; align-self: end; font-size: .75rem; line-height: 1.35; font-weight: 550; }
.lx-installation-card__copy { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.lx-installation-card__copy > span { color: #536772; font-size: .8rem; line-height: 1.5; }
.lx-installation-card h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.3; margin: 12px 0; letter-spacing: -.02em; overflow-wrap: anywhere; }
.lx-installation-card p { font-size: 1rem; line-height: 1.6; margin: 0 0 24px; }
.lx-installation-card strong { margin-top: auto; color: #006b80; font-size: .95rem; }
.lx-installation-card:hover { border-color: #00768c; }
.lx-installation-card:focus-visible,
.lx-installations :is(input, select, button, a):focus-visible,
.lx-installation :is(button, a):focus-visible { outline: 3px solid #00768c; outline-offset: 4px; }
.lx-installation-directory-note { margin: 40px 0 0; color: #536772; max-width: 70ch; font-size: .9rem; line-height: 1.6; }
.lx-installation-empty { padding-block: 48px; font-size: 1.1rem; }
.lx-installation-hero__heading { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 48px 40px; }
.lx-installation-facts { margin: 0; }
.lx-installation-facts > div { border-bottom: 1px solid #d9e3e8; padding-block: 16px; }
.lx-installation-facts dt { color: #536772; font-size: .8rem; line-height: 1.5; margin-bottom: 5px; }
.lx-installation-facts dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 550; }
.lx-installation-hero__media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f7f9; border-radius: 12px; }
.lx-installation-hero { padding-block: 0; }
.lx-installation-hero__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-installation-hero__media video { position: absolute; inset: 0; opacity: 0; }
.lx-installation-hero__media.is-playing video { opacity: 1; }
.lx-lifecycle-photo .lx-lifecycle-video { aspect-ratio: 4 / 3; border-radius: 0; }
.lx-lifecycle-photo .lx-lifecycle-video > img { aspect-ratio: auto; height: 100%; }
.lx-installation-hero__media--photo { aspect-ratio: auto; }
.lx-installation-hero__media--photo > a { display: block; }
.lx-installation-hero__media--photo img { height: auto; max-height: 640px; object-fit: contain; }
.lx-installation-hero__media--photo figcaption { padding-top: 14px; background: #fff; color: #536772; font-size: .9rem; line-height: 1.5; }
.lx-installation-video-toggle {
    position: absolute; right: 20px; bottom: 20px; z-index: 1;
    padding: 12px 16px; min-height: 44px; border: 1px solid #fff; border-radius: 6px;
    background: #082a3d; color: #fff; font: inherit; font-size: .875rem; cursor: pointer;
}
.lx-installation-video-toggle[hidden] { display: none; }
.lx-installation-gallery-link { display: inline-block; margin-top: 20px; }
.lx-installation-component-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; border-top: 1px solid #d9e3e8; padding-top: 16px; }
.lx-installation-component-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #006b80; font-size: .9rem; text-underline-offset: 4px; }
.lx-installation-media-group { margin-top: 48px; scroll-margin-top: calc(var(--lx-nav-height, 80px) + 24px); }
.lx-installation-media-group > h3 { margin: 0 0 24px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.25; }
.lx-installation-field-video { margin: 28px 0 0; }
.lx-installation-field-video figcaption { margin-top: 14px; color: #536772; font-size: .9rem; line-height: 1.5; }
.ps-project-hero .ps-hero__video { opacity: 0; }
.ps-project-hero.is-playing .ps-hero__video { opacity: 1; }
.ps-project-hero .lx-installation-video-toggle { position: relative; right: auto; bottom: auto; z-index: 2; margin-top: 20px; }
.ps-project-photo-group + .ps-project-photo-group { margin-top: 48px; }
.ps-project-photo-group > h3 { margin: 0 0 24px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.25; }
.lx-installation-section { padding-block: 64px; }
.lx-installation-section > header { max-width: 760px; margin-bottom: 32px; }
.lx-installation-section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 560; margin: 12px 0 18px; color: #112b3a; }
.lx-installation-section > header > p:not(.lx-projects-eyebrow) { line-height: 1.65; }
.lx-installation-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lx-installation-scope > div { border-top: 1px solid #d9e3e8; padding-top: 20px; }
.lx-installation-scope h3 { margin: 0 0 12px; font-size: 1.25rem; }
.lx-installation-scope p { margin: 0; line-height: 1.65; max-width: 58ch; }
.lx-installation-site-details { max-width: 78ch; margin-top: 28px; }
.lx-installation-site-details p { line-height: 1.65; margin: 0 0 16px; }
.lx-installation-source { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 24px; font-size: .875rem; }
.lx-installation-source a { color: #006b80; text-underline-offset: 4px; }
.lx-installation-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; align-items: start; }
.lx-installation-photos figure { margin: 0; min-width: 0; }
.lx-installation-photos__lead { grid-column: 1 / -1; }
.lx-installation-photos--single { max-width: 720px; grid-template-columns: minmax(0, 1fr); }
.lx-installation-photos a { display: block; }
.lx-installation-photos img { display: block; width: 100%; height: auto; border-radius: 8px; }
.lx-installation-photos figure:not(.lx-installation-photos__lead) img { max-height: 560px; object-fit: contain; background: #f4f7f9; }
.lx-installation-photos figcaption { margin-top: 14px; color: #536772; font-size: .9rem; line-height: 1.5; }
.lx-installation-directory-link { display: inline-block; margin-top: 28px; }
.lx-installation-section .lx-installation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .lx-installation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-installation-filters { grid-template-columns: 1fr 1fr; }
    .lx-installation-hero__heading { gap: 32px; }
}
@media (max-width: 700px) {
    .lx-installations, .lx-installation { padding-block: calc(var(--lx-nav-height, 60px) + 24px) 40px; }
    .lx-installations-heading { padding-block: 32px; }
    .lx-installation-grid, .lx-installation-section .lx-installation-grid, .lx-installation-hero__heading, .lx-installation-scope, .lx-installation-photos, .lx-installation-filters { grid-template-columns: minmax(0, 1fr); }
    .lx-installation-filters { padding: 20px; gap: 16px; }
    .lx-installation-hero__heading { padding-block: 32px; gap: 24px; }
    .lx-installation-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
    .lx-installation-facts > div:last-child { grid-column: 1 / -1; }
    .lx-installation-facts dd { font-size: .9rem; }
    .lx-installation-section { padding-block: 40px; }
    .lx-installation-video-toggle { right: 10px; bottom: 10px; font-size: .75rem; padding: 8px 10px; }
    .lx-installation-photos { gap: 28px; }
    .lx-installation-scope { gap: 28px; }
}