/* Reference catalog and shared project cards, aligned with the application pages. */
body.references-page { margin-top: 60px; }
.references-hero, .references-section, .reference-row {
  --reference-accent: #ee5100;
  --reference-ink: #111e27;
  --reference-muted: #44505a;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--reference-ink);
}
.references-container { width: 100%; max-width: 1400px; padding: 0 54px; margin: 0 auto; }
.references-hero-inner { display: grid; grid-template-columns: .9fr 1.4fr; align-items: center; gap: 32px; padding-top: 20px; padding-bottom: 18px; min-height: 340px; }
.references-hero h1 { font: 700 clamp(36px, 3.6vw, 52px)/1.05 Arial, Helvetica, sans-serif; margin: 0 0 17px; letter-spacing: -1.4px; }
.references-hero-copy p { margin: 0; max-width: 490px; color: var(--reference-muted); font-size: 17px; line-height: 1.45; }
.references-hero .world-map-wrapper { position: relative; width: 100%; max-width: 600px; justify-self: center; line-height: 0; min-width: 0; --reveal-x: 50.5%; --reveal-y: 40.6%; --reveal-feather: 2%; }
.references-hero .world-map-base { display: block; width: 100%; height: auto; }
.references-hero .world-map-color { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; --reveal-r: -30%; mask-image: radial-gradient(ellipse at var(--reveal-x) var(--reveal-y), black var(--reveal-r), transparent calc(var(--reveal-r) + var(--reveal-feather))); -webkit-mask-image: radial-gradient(ellipse at var(--reveal-x) var(--reveal-y), black var(--reveal-r), transparent calc(var(--reveal-r) + var(--reveal-feather))); animation: revealFromCenter 4s ease-out .15s both; }
@property --reveal-r { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
@keyframes revealFromCenter { from { --reveal-r: -30%; } to { --reveal-r: 100%; } }

.references-section { padding: 28px 0 12px; }
.references-section--embedded { padding-top: 28px; }
.references-section-heading { margin-bottom: 20px; }
.references-section-title { font: 700 clamp(23px, 2.1vw, 31px)/1.13 Arial, Helvetica, sans-serif; margin: 0; color: var(--reference-ink); letter-spacing: -.8px; }
.references-section a:focus-visible, .references-section button:focus-visible, .references-section input:focus-visible { outline: 3px solid var(--reference-accent); outline-offset: 3px; }

.references-filters { margin-bottom: 16px; }
.references-filters > div { padding-left: 7px; padding-right: 7px; }
.references-filters { margin-left: -7px; margin-right: -7px; }
.references-section .filter-btn { display: flex; align-items: center; gap: 11px; padding: 12px; width: 100%; min-height: 66px; border: 1px solid #dfe4e3; border-radius: 6px; background: #fff; color: var(--reference-ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.references-section .filter-btn:hover { border-color: #ed985f; background: #fffbf8; }
.references-section .filter-btn.active { border-color: var(--reference-accent); background: #fff3eb; }
.references-section .filter-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 4px; overflow: hidden; background: #f3f3f3; }
.references-section .filter-icon img { width: 100%; height: 100%; object-fit: cover; }
.references-section .filter-text { font-size: 12px; font-weight: 600; line-height: 1.25; text-align: left; overflow-wrap: anywhere; min-width: 0; }
.references-search-row { margin-bottom: 24px; }
.references-section .custom-search { border: 1px solid #dfe4e3; border-radius: 6px; background: #fff; overflow: hidden; align-items: stretch; min-height: 42px; }
.references-section .custom-search:focus-within { border-color: var(--reference-accent); }
.references-section .custom-search .form-control { min-width: 0; height: 42px; border: 0; background: #fff; box-shadow: none; color: var(--reference-ink); font: 14px Arial, Helvetica, sans-serif; padding: 10px 14px; }
.references-section .custom-search .btn { width: 42px; padding: 0; color: #69757c; background: #fff; border: 0; border-right: 1px solid #e5e8e7; border-radius: 0; box-shadow: none; transform: none; }
.references-section .custom-search .btn:hover { color: var(--reference-accent); background: #fafafa; }

.reference-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.65fr) minmax(0, .65fr); align-items: start; gap: 24px; margin: 0 0 24px; padding: 24px; background: #fff; border: 1px solid #e0e4e3; border-radius: 8px; }
.reference-row--no-products { grid-template-columns: minmax(0, .8fr) minmax(0, 2.3fr); }
.reference-row--no-products .reference-products { display: none; }
.reference-media, .reference-content, .reference-products { min-width: 0; }
.reference-title { color: var(--reference-ink); font: 700 22px/1.2 Arial, Helvetica, sans-serif; letter-spacing: -.4px; margin: 0 0 15px; overflow-wrap: anywhere; }
.reference-description { color: var(--reference-muted); font: 14px/1.55 Arial, Helvetica, sans-serif; }
.reference-description ul, .reference-description ol { margin: 9px 0 12px; padding-left: 20px; }
.reference-description li { margin-bottom: 6px; }
.reference-description::after { content: ""; display: block; clear: both; }
.reference-row .auto-link { white-space: normal; }
.reference-row .custom-carousel-border { padding: 8px 8px 28px; border: 1px solid #e0e4e3; border-radius: 6px; box-shadow: none; background: #fff; }
.reference-row .carousel-inner { background: #f8f9f8; border-radius: 4px; }
.reference-row .carousel-item img { width: 100%; height: 240px; max-height: none; object-fit: contain; border-radius: 4px; cursor: pointer; }
.reference-row .carousel-indicators { bottom: 2px; margin-bottom: 5px; }
.reference-row .carousel-indicators li { width: 18px; height: 3px; border-radius: 2px; background: #c4cbc7; }
.reference-row .carousel-indicators .active { background: var(--reference-accent); }
.reference-row .inline-ref-table { float: right; width: 43%; min-width: 230px; margin: 0 0 15px 18px; }
.reference-row .table-ref { table-layout: fixed; min-width: 0; font: 12px/1.4 Arial, Helvetica, sans-serif; color: var(--reference-muted); border: 1px solid #e0e4e3; border-collapse: separate; border-spacing: 0; border-radius: 6px; overflow: hidden; box-shadow: none; margin-bottom: 15px; }
.reference-row .table-ref td, .reference-row .table-ref th { min-width: 0; padding: 8px 10px; line-height: 1.4; border: 0; overflow-wrap: anywhere; }
.reference-row .table-ref tbody td { border-bottom: 1px solid #e4e8e6; }
.reference-row .table-ref tbody td + td { border-left: 1px solid #e4e8e6; }
.reference-row .table-ref tbody tr:last-child td { border-bottom: 0; }
.reference-row .table-ref td:first-child { width: 42%; font-weight: 600; color: #35434b; }
.reference-row .table-ref thead th { background: var(--reference-accent); color: #fff; border: 0; font-size: 11px; font-weight: 700; text-align: left; letter-spacing: .02em; }
.reference-row .table-striped tbody tr:nth-of-type(odd) { background: #fafbfa; }

.reference-products { display: grid; gap: 14px; }
.reference-products .related-product-column { width: 100%; max-width: none; padding: 0; }
.reference-products .related-product-card--reference,
.reference-products .related-product-card--reference:hover,
.reference-products .related-product-card--reference:focus-within { max-width: none; margin: 0; background: #fff; border: 1px solid #e0e4e3 !important; border-radius: 8px !important; box-shadow: none !important; transform: none; transition: border-color .2s !important; }
.reference-products .related-product-card--reference:hover { border-color: #aebeb4 !important; }
.reference-products .related-product-card__body { padding: 16px !important; }
.reference-products .related-product-card__image { width: 100%; height: 130px; max-height: 130px; object-fit: contain; }
.reference-products .related-product-card__title { color: var(--reference-ink); font: 700 16px/1.25 Arial, Helvetica, sans-serif; }
.reference-products .related-product-card__description { color: var(--reference-muted); font: 12px/1.4 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.reference-products .related-product-card__footer { padding: 0 16px 16px; background: transparent; border: 0; }
.references-section #loadMore, .reference-row .btn-modern, .references-section #end-of-results .btn-modern, .references-section .btn-outline-secondary {
  min-height: 36px; padding: 9px 17px; border: 1px solid var(--reference-accent); border-radius: 4px; background: linear-gradient(#f16c13, #db4c00); color: #fff; font: 700 12px/1.25 Arial, Helvetica, sans-serif; box-shadow: none; transform: none; transition: background .2s;
}
.references-section #loadMore:hover, .reference-row .btn-modern:hover, .references-section .btn-outline-secondary:hover { background: #c84606; transform: none; box-shadow: none; }
.references-section #end-of-results { font-family: Arial, Helvetica, sans-serif; }
.references-section #end-of-results h5 { font-family: inherit; font-size: 17px; }

@media (max-width: 1199.98px) {
  .references-container { padding-left: 32px; padding-right: 32px; }
  .references-hero-inner { gap: 30px; }
  .reference-row { grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr) minmax(0, .75fr); padding: 20px; gap: 20px; }
  .reference-row--no-products { grid-template-columns: minmax(0, .75fr) minmax(0, 2.25fr); }
  .reference-row .inline-ref-table { float: none; width: 100%; min-width: 0; margin: 0 0 16px; }
  .reference-row .carousel-item img { height: 220px; }
}
@media (max-width: 991.98px) {
  .references-hero-inner { grid-template-columns: .9fr 1.1fr; min-height: 280px; gap: 20px; }
  .references-hero-copy p { font-size: 15px; }
  .reference-row, .reference-row--no-products { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); }
  .reference-products { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .reference-products > :only-child { grid-column: 1 / -1; max-width: 370px; justify-self: center; width: 100%; }
}
@media (max-width: 767.98px) {
  .references-hero-inner { grid-template-columns: 1fr; gap: 16px; padding-top: 28px; padding-bottom: 18px; }
  .references-hero-copy p { max-width: 560px; }
  .references-hero .world-map-wrapper { max-width: 420px; }
  .reference-row, .reference-row--no-products { grid-template-columns: minmax(0, 1fr); }
  .reference-media { width: 100%; max-width: 510px; margin: 0 auto; }
  .reference-row .carousel-item img { height: 260px; }
  .reference-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .references-container { padding-left: 20px; padding-right: 20px; }
  .references-hero h1 { font-size: 38px; letter-spacing: -1px; }
  .references-section { padding-top: 22px; }
  .references-section-heading { margin-bottom: 16px; }
  .references-filters > div { padding-left: 5px; padding-right: 5px; }
  .references-filters { margin-left: -5px; margin-right: -5px; }
  .references-section .filter-btn { padding: 10px; min-height: 61px; gap: 8px; }
  .references-section .filter-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .references-section .filter-text { font-size: 11px; }
  .reference-row { padding: 17px; gap: 19px; margin-bottom: 18px; }
  .reference-title { font-size: 21px; }
  .reference-description { font-size: 13px; line-height: 1.5; }
  .reference-row .table-ref { font-size: 11px; }
  .reference-row .table-ref td, .reference-row .table-ref th { padding: 7px 8px; }
  .reference-products .related-product-card__body { padding: 13px !important; }
  .reference-products .related-product-card__image { height: 115px; max-height: 115px; }
  .reference-products .related-product-card__footer { padding: 0 13px 13px; }
  .reference-row .carousel-item img { height: 235px; }
}
@media (prefers-reduced-motion: reduce) {
  .references-hero .world-map-color { animation: none; --reveal-r: 100%; }
  .references-section *, .reference-row * { transition: none !important; }
}

/* Existing lightbox behavior and geometry. */
    .reference-lightbox-modal .modal-dialog {
        width: min(95vw, 1400px);
        max-width: 95vw;
        margin: auto;
    }

    .reference-lightbox-modal .modal-content {
        display: inline-block;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .reference-lightbox-modal .modal-body {
        position: relative;
        overflow: visible;
        --lightbox-image-left: 0px;
        --lightbox-image-top: 0px;
        --lightbox-image-right: 100%;
        --lightbox-image-bottom: 100%;
    }

    .reference-lightbox-stage {
        position: relative;
        width: min(95vw, 1400px);
        height: min(88vh, calc(100vh - 48px));
        max-height: 88vh;
        overflow: hidden;
        border-radius: 8px;
        overscroll-behavior: contain;
        overscroll-behavior-x: contain;
        touch-action: none;
    }

    .reference-lightbox-modal .modal-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        border-radius: 8px;
        will-change: transform, opacity;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
        touch-action: pan-y;
    }

    .reference-lightbox-modal .modal-image-current {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .reference-lightbox-modal.is-lightbox-moving .modal-image {
        box-shadow: none;
    }

    .reference-lightbox-modal .modal-image.is-hidden {
        opacity: 0;
        visibility: hidden;
    }

    .reference-lightbox-modal .lightbox-control {
        position: absolute;
        z-index: 1050;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.8);
        border: none;
        border-radius: 50%;
        font-size: 30px;
        line-height: 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.18s ease, visibility 0s linear 0.18s;
    }

    .reference-lightbox-modal.lightbox-controls-ready .lightbox-control {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.18s ease, visibility 0s linear 0s;
    }

    .reference-lightbox-modal .lightbox-control:hover {
        background: rgba(0, 0, 0, 0.9);
    }

    .reference-lightbox-modal .lightbox-control:focus {
        outline: none;
    }

    .reference-lightbox-modal .lightbox-close {
        top: calc(var(--lightbox-image-top, 0px) + 15px);
        left: calc(var(--lightbox-image-right, 100%) - 60px);
    }

    .reference-lightbox-modal .lightbox-nav {
        display: none;
        top: calc((var(--lightbox-image-top, 0px) + var(--lightbox-image-bottom, 100%)) / 2);
        width: 48px;
        height: 48px;
        font-size: 32px;
        transform: translateY(-50%);
    }

    .reference-lightbox-modal.show-lightbox-nav .lightbox-nav {
        display: flex;
    }

    .reference-lightbox-modal .lightbox-nav:hover {
        transform: translateY(-50%) scale(1.05);
    }

    .reference-lightbox-modal .lightbox-nav:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .reference-lightbox-modal .lightbox-prev {
        left: calc(var(--lightbox-image-left, 0px) + 40px - 130px);
    }

    .reference-lightbox-modal .lightbox-next {
        left: calc(var(--lightbox-image-right, 100%) - 88px + 130px);
    }

    @media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
        .reference-lightbox-stage {
            height: min(82vh, calc(100vh - 32px));
        }
    }