html.industries-deeplink-pending body {
    opacity: 0;
}

/* Partner logos: desaturated by default, full colour on hover; one row; count varies by carousel */
.industry-partner-logo {
    width: 100%;
    height: 100%;
    max-height: 5.75rem;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity 0.3s ease, filter 0.3s ease;
    pointer-events: auto;
}
.industry-partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}
.industry-partner-logo-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 1rem 1.5rem;
    min-height: 0;
    padding: 0;
    width: 100%;
}
.industry-partner-logo-cell {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    height: auto;
}
.industry-partner-logo-grid--2x2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    align-content: start;
    justify-items: center;
    gap: 1.25rem 1.5rem;
    /* Last slide has one row. Keep two rows reserved or the page below jumps when it appears. */
    min-height: calc(5.5rem * 2 + 1.25rem);
}
.industry-partner-logo-grid--2x2 .industry-partner-logo-cell {
    flex: none;
    width: 100%;
    max-width: 13.5rem;
    height: 5.5rem;
    align-items: center;
}
@media (min-width: 768px) {
    .industry-partner-logo {
        max-height: 5.5rem;
    }
    .industry-partner-logo-grid {
        align-items: center;
        gap: 1.25rem 1.75rem;
        min-height: 6.75rem;
        padding: 0.25rem;
    }
    .industry-partner-logo-cell {
        align-items: center;
        height: 6rem;
    }
}
@media (min-width: 1280px) {
    .industry-partner-logo {
        max-height: 6rem;
    }
    .industry-partner-logo-grid {
        gap: 1.5rem 2rem;
        min-height: 7.25rem;
    }
    .industry-partner-logo-cell {
        height: 6.5rem;
    }
}
[aria-label$="customers"] .industry-partner-logo-grid {
    justify-content: center;
    column-gap: 0.5rem;
}
@media (min-width: 768px) {
    [aria-label$="customers"] .industry-partner-logo-grid {
        column-gap: 0.75rem;
        min-height: 7.5rem;
    }
    [aria-label$="customers"] .industry-partner-logo-cell {
        height: 7rem;
    }
}
@media (min-width: 1280px) {
    [aria-label$="customers"] .industry-partner-logo-grid {
        column-gap: 1rem;
    }
    [aria-label$="customers"] .industry-partner-logo-cell {
        height: 7.25rem;
    }
}
.industries-logo-carousel .carouselContainer {
    pointer-events: none;
    cursor: default;
}
.industries-logo-carousel .carouselDash {
    border-color: rgba(0, 0, 0, 0.2);
}
.industries-logo-carousel .carouselDash:hover:not(.carouselActive) {
    border-color: rgba(0, 0, 0, 0.45);
}
.industries-logo-carousel .carouselDash.carouselActive {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}
.industries-logo-carousel .carouselProgressBar {
    background: rgba(0, 0, 0, 0.35);
}

/* Collapsing this bar used to change document height while it was the scroll anchor, so the browser rewound the scroll and the section flashed back in. */
#industries-pill-sticky-pack,
#industries-pill-morph,
#industries-scroll-root {
    overflow-anchor: none;
}

/* Pills: home-style panels (md+ scattered) → compact sticky chips (industries-scroll-animations.js). */
@media (prefers-reduced-motion: no-preference) {
    #industries-pill-morph,
    #industries-pill-morph .pill-morph-surface,
    #industries-pill-morph .pill-morph-img,
    #industries-pill-morph .pill-morph-label,
    #industries-pill-morph .pill-morph-cta,
    #industries-pill-morph .pill-morph-heading {
        transition-property: background-color, box-shadow, border-color, color, border-radius, opacity, transform;
        transition-duration: 280ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Expanded: match home `.industries-pill-panel` (horizontal thumb + title + CTA). */
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-surface {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
    padding: 1.25rem 1.25rem;
    border-radius: 1rem;
    background-color: rgb(255 255 255 / 0.95);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    text-align: left;
}
@media (min-width: 640px) {
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-surface {
        gap: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-img {
    height: 4rem;
    width: 4rem;
    border-radius: 9999px;
    object-fit: cover;
    flex-shrink: 0;
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-body {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    min-width: 0;
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-label {
    font-family: var(--font-serif, KoHo, ui-sans-serif, system-ui, sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
    white-space: nowrap;
    color: #1f2937;
    text-align: left;
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-label.text-xl {
    font-size: 1.25rem;
    line-height: 1;
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-cta {
    display: inline;
    font-weight: 600;
    color: var(--color-customPrimary, #1c3fcc);
}
/* Below md: same centered cards as the home page, two across. */
@media (max-width: 767.98px) {
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-surface {
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: 100%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-body {
        align-items: center;
        width: 100%;
        text-align: center;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-label,
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-cta {
        text-align: center;
        white-space: normal;
    }
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-link:hover .pill-morph-surface {
    transform: translateY(0.375rem);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
@media (prefers-reduced-motion: reduce) {
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link:hover .pill-morph-surface {
        transform: none;
    }
}

/* < md expanded: stacked until the two-column card grid above. */
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    width: 100%;
}
#industries-pill-morph:not(.pills-morph--compact) .pill-morph-link {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}
@media (max-width: 767.98px) {
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.75rem 1rem;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link {
        display: flex;
        height: 100%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link:last-child {
        grid-column: 1 / -1;
        width: calc((100% - 1rem) / 2);
        height: auto;
        justify-self: center;
    }
}
/* Scene jumps collapse the cards instantly so the scroll target is measured after the bar shrinks. */
#industries-pill-morph.pills-morph--jump,
#industries-pill-morph.pills-morph--jump .pill-morph-surface,
#industries-pill-morph.pills-morph--jump .pill-morph-img,
#industries-pill-morph.pills-morph--jump .pill-morph-label,
#industries-pill-morph.pills-morph--jump .pill-morph-cta,
#industries-pill-morph.pills-morph--jump .pill-morph-heading {
    transition: none !important;
}

/* Wider graphic behind the heading and pills; hidden once the bar compacts. */
#industries-pill-bg {
    display: none;
    position: absolute;
    z-index: 0;
    top: -110px;
    left: 50%;
    width: calc(3528px * 0.8);
    transform: translateX(-50%);
    pointer-events: none;
}
@media (min-width: 768px) {
    #industries-pill-bg {
        display: block;
    }
}
#industries-pill-morph.pills-morph--compact #industries-pill-bg {
    display: none;
}

/* md+: scattered absolute stage (see mock) */
@media (min-width: 768px) {
    #industries-pill-morph:not(.pills-morph--compact) {
        background-color: transparent;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-stage {
        position: relative;
        min-height: calc(30rem + 100px + 2.5rem);
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-heading {
        position: relative;
        z-index: 1;
        max-width: 18rem;
        padding-bottom: 0;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-row {
        position: absolute;
        top: 100px;
        right: 0;
        bottom: auto;
        left: 0;
        display: block;
        padding: 0;
        height: 30rem;
        width: auto;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link {
        position: absolute;
        z-index: 2;
        width: auto;
        max-width: none;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-surface {
        width: max-content;
        max-width: min(92vw, 20rem);
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-body {
        flex-shrink: 0;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--utilities {
        top: 0;
        left: 42%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--refineries {
        top: calc(20% + 40px);
        left: 68%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--renewables {
        top: calc(48% + 40px);
        left: 38%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--oil {
        top: 52%;
        left: calc(12% - 90px);
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--subsea {
        top: 84%;
        left: 22%;
    }
}
@media (min-width: 1024px) {
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-stage {
        min-height: calc(34rem + 100px + 2.5rem);
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-row {
        height: 34rem;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-heading {
        max-width: 22rem;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--utilities {
        top: 2%;
        left: 40%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--refineries {
        top: 18%;
        left: 70%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--renewables {
        top: 50%;
        left: 42%;
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--oil {
        top: 54%;
        left: calc(14% - 30px);
    }
    #industries-pill-morph:not(.pills-morph--compact) .pill-morph-link--subsea {
        top: 86%;
        left: 26%;
    }
}

/* Compact strip: --pill-elevation reused for bar + default chips (Tailwind shadow-md). */
#industries-pill-morph.pills-morph--compact {
    --pill-elevation: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --pill-elevation-active: 0 2px 4px -1px rgb(0 0 0 / 0.2);
    --pill-ring-grey: 0 0 0 1px rgb(0 0 0 / 0.1);
    isolation: isolate;
    background-color: #fff;
    box-shadow: var(--pill-elevation);
    border-bottom: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    backdrop-filter: none;
}
#industries-pill-morph.pills-morph--compact .pill-morph-heading,
#industries-pill-morph.pills-morph--compact .pill-morph-cta {
    display: none !important;
}
.pill-morph-to-top {
    display: none;
}
#industries-pill-morph.pills-morph--compact .pill-morph-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: 2.875rem;
    height: 2.875rem;
    padding: 0;
    box-sizing: border-box;
    border-radius: 9999px;
    background-color: #fff;
    color: #1e293b;
    box-shadow: var(--pill-ring-grey), var(--pill-elevation);
}
#industries-pill-morph.pills-morph--compact .pill-morph-to-top svg {
    width: 1.05rem;
    height: 1.05rem;
}
#industries-pill-morph.pills-morph--compact .pill-morph-to-top:hover {
    box-shadow: 0 0 0 1px
            color-mix(in srgb, var(--color-customPrimary, #1c3fcc) 50%, transparent),
        var(--pill-elevation);
}
#industries-pill-morph.pills-morph--compact .pill-morph-stage {
    min-height: 0 !important;
    height: auto;
}
/* Overrides Tailwind max-w / px when compact: full-bleed strip, light left inset only. */
#industries-pill-morph.pills-morph--compact > div {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.75rem;
    padding-right: 0;
    padding-bottom: 0;
}
@media (min-width: 640px) {
    #industries-pill-morph.pills-morph--compact > div {
        padding-left: 1rem;
    }
}
/* Right-edge fade when chips overflow (same ~2rem as former right padding gap). */
#industries-pill-morph.pills-morph--compact.pills-morph--overflow::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 2rem;
    pointer-events: none;
    background: linear-gradient(
        to right,
        rgb(255 255 255 / 0),
        #fff 85%
    );
}
/* Hide fade once scrolled to the end of the chip row. */
#industries-pill-morph.pills-morph--compact.pills-morph--overflow.pills-morph--overflow-end::after {
    opacity: 0;
}
/* `!important` beats absolute stage / column layout; WebKit is picky here. */
#industries-pill-morph.pills-morph--compact .pill-morph-row {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0 !important;
    height: auto !important;
    width: max-content;
    min-width: 100%;
    margin-inline: auto;
    gap: 0.75rem;
}
#industries-pill-morph.pills-morph--compact.pills-morph--overflow .pill-morph-row {
    justify-content: flex-start;
    min-width: 0;
    margin-inline: 0;
    padding-right: 2rem;
}
@media (min-width: 640px) {
    #industries-pill-morph.pills-morph--compact .pill-morph-row {
        gap: 1rem;
    }
}
#industries-pill-morph.pills-morph--compact .pill-morph-surface {
    display: flex;
    border-radius: 9999px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: min-content;
    max-width: none;
    padding: 0.5rem 1.25rem 0.5rem 0.625rem;
    background-color: #fff;
    color: #1e293b;
    box-shadow: var(--pill-ring-grey), var(--pill-elevation);
    width: auto;
    transform: none;
    text-align: left;
}
#industries-pill-morph.pills-morph--compact .pill-morph-surface:hover {
    background-color: #fff;
    box-shadow: 0 0 0 1px
            color-mix(in srgb, var(--color-customPrimary, #1c3fcc) 50%, transparent),
        var(--pill-elevation);
    transform: none;
}
#industries-pill-morph.pills-morph--compact .pill-morph-img {
    height: 1.875rem;
    width: 1.875rem;
    flex-shrink: 0;
    border-radius: 9999px;
    object-fit: cover;
}
#industries-pill-morph.pills-morph--compact .pill-morph-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
}
/* Inter + font-medium: aligns with Approvals filter buttons (py-1.5 px-4 font-medium). */
#industries-pill-morph.pills-morph--compact .pill-morph-label {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    white-space: nowrap;
    color: #1e293b;
}
/* Active scene (scroll-spy): like Approvals cert filters: primary fill, white type. */
#industries-pill-morph.pills-morph--compact a.scrollSpyActive .pill-morph-surface {
    background-color: var(--color-customPrimaryBG, #1c3fcc);
    color: #fff;
    box-shadow: 0 0 0 1px var(--color-customPrimaryBG, #1c3fcc), var(--pill-elevation-active);
}
#industries-pill-morph.pills-morph--compact a.scrollSpyActive .pill-morph-surface:hover {
    background-color: var(--color-customPrimaryLowlight, #1936ac);
    color: #fff;
    box-shadow: 0 0 0 1px var(--color-customPrimaryLowlight, #1936ac), var(--pill-elevation-active);
}
#industries-pill-morph.pills-morph--compact a.scrollSpyActive .pill-morph-label {
    color: #fff;
}
#industries-pill-morph.pills-morph--compact a.scrollSpyActive .pill-morph-img {
    box-shadow: 0 0 0 2px #fff;
}
#industries-pill-morph.pills-morph--compact #industries-pill-morph-track {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
@media (hover: hover) and (pointer: fine) {
    #industries-pill-morph.pills-morph--compact #industries-pill-morph-track {
        cursor: grab;
    }
    #industries-pill-morph.pills-morph--compact #industries-pill-morph-track:active {
        cursor: grabbing;
    }
}
#industries-pill-morph.pills-morph--compact #industries-pill-morph-track::-webkit-scrollbar {
    display: none;
}
#industries-pill-morph.pills-morph--compact .pill-morph-link {
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
}

#industries-pill-morph-track {
    overflow: visible;
}
/* Parallax layers are huge absolutely positioned divs; without this, later siblings sit on top
   in the stacking order and steal clicks from visible panels (even at opacity: 0). */
#industries-scroll-root #div1 > div {
    pointer-events: none;
}
#industries-pill-morph .pill-morph-link {
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    #industries-pill-morph.pills-morph--compact .pill-morph-link {
        cursor: pointer;
    }
}
/* Scene cards are stacked in one sticky viewport; later siblings sit on top for hit-testing even at opacity 0. Only the scroll-active card may receive clicks (class toggled in industries-scroll-animations.js). */
.industries-scene-card {
    pointer-events: none;
}
.industries-scene-card.is-industries-scene-active {
    pointer-events: auto;
}
.industries-scene-card a {
    cursor: pointer;
}
/* Mobile: extra document scroll slides the open card up under the chips.
   Set on an element the scene timeline does not translate. */
@media (max-width: 767px) {
    .industries-scene-read {
        translate: 0 var(--scene-read, 0px);
    }
    /* Clear the compact chip bar. Oil and subsea already sit lower. */
    #mfg-copy,
    #refinery-copy,
    #renewables {
        top: 6rem;
    }
    /* Renewables and Refineries enter 300px below that chip clearance. */
    #renewables,
    #refinery-copy {
        top: calc(6rem + 300px);
    }
    body.industries-v3 #industries-scroll-root {
        display: none !important;
    }
    /* Fixed frame, top-aligned. Width-% sizing made the pipes jump as the phone got wider and clipped the arch off the top.
       From ~595px the fixed 45rem box ends before the viewport, leaving blue sea on the right. Grow with the screen, and keep the left pull in proportion so the rock stays on the edge. */
    #v3-subsea .industries-v3-subsea-scene .industries-v3-subsea-pipes {
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        --subsea-pipes-w: max(45rem, calc(100vw / 0.833));
        left: calc(var(--subsea-pipes-w) * -0.04) !important;
        width: var(--subsea-pipes-w) !important;
        height: 36rem;
        margin-left: 0;
        overflow: hidden;
    }
    /* Card gutter matches pt-[520px]. Black behind the panel; the sea above stays clear. */
    #v3-subsea > .relative.z-10 {
        background: linear-gradient(to bottom, transparent 520px, #000 520px);
    }
}

/* Phone experiment: static Utilities + Refineries. Desktop keeps the scroll scenes. */
@media (max-width: 767px) {
    body.industries-v3 #mfg-cloud,
    body.industries-v3 #mfg-birds,
    body.industries-v3 #mfg-birds2,
    body.industries-v3 #mfg-image,
    body.industries-v3 #mfg-copy,
    body.industries-v3 #refinery-cloud,
    body.industries-v3 #refinery-birds,
    body.industries-v3 #refinery-birds2,
    body.industries-v3 #refinery-image,
    body.industries-v3 #refinery-copy,
    body.industries-v3 #renewable-cloud,
    body.industries-v3 #renewable-birds,
    body.industries-v3 #renewable-birds2,
    body.industries-v3 #renewable-image,
    body.industries-v3 #renewables,
    body.industries-v3 #rig-cloud,
    body.industries-v3 #rig-image,
    body.industries-v3 #rig-birds,
    body.industries-v3 #rig-buoy,
    body.industries-v3 #rig-copy {
        display: none !important;
    }

    /* Air under the shortcut bar, and a larger break before Refineries. */
    #v3-utilities {
        margin-top: 28rem;
        overflow-x: clip;
        overflow-y: visible;
    }
    .industries-v3-utilities-art {
        padding-top: 8rem;
        height: 24rem;
        overflow: visible;
    }
    .industries-v3-utilities-building-slot,
    .industries-v3-utilities-clouds-slot,
    .industries-v3-refinery-building,
    .industries-v3-refinery-clouds,
    .industries-v3-renewables-windmills,
    .industries-v3-renewables-clouds,
    .industries-v3-oil-rig,
    .industries-v3-oil-clouds {
        will-change: transform, opacity;
    }
    #v3-refinery,
    #v3-renewables,
    #v3-oil {
        margin-top: calc(16rem * 2 / 3);
    }
    #v3-subsea {
        margin-top: 0;
    }
    #v3-refinery,
    #v3-renewables,
    #v3-oil {
        padding-top: calc(4rem * 2 / 3);
    }
    body.industries-v3 #v3-oil > .relative.z-10 {
        padding-top: calc(12rem + 20px);
        padding-right: calc(1rem + 20px);
        padding-bottom: calc(1rem + 20px) !important;
        padding-left: calc(1rem + 20px);
    }
    body.industries-v3 .industries-v3-oil-to-subsea {
        position: relative;
        z-index: 1;
        height: 10px;
        background: #004968;
    }
}

.industries-v3-utilities-art {
    position: relative;
    height: 16rem;
    overflow: hidden;
    background: #fff;
}
.industries-v3-utilities-clouds-slot {
    position: absolute;
    z-index: 1;
    top: 0.15rem;
    left: 50%;
    width: 40rem;
    max-width: none;
    pointer-events: none;
}
.industries-v3-utilities-clouds {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    transform: translateX(-50%);
    pointer-events: none;
}
.industries-v3-utilities-building-slot {
    position: absolute;
    z-index: 2;
    top: -1.15rem;
    left: 50%;
    width: 62rem;
    max-width: none;
    pointer-events: none;
}
.industries-v3-utilities-building {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    transform: translateX(-43%);
    pointer-events: none;
}
.industries-v3-utilities-land {
    position: absolute;
    z-index: 0;
    inset: -0.6rem 0 2.75rem 0;
    background: #050210;
    /* Bottom edge sits below the card: higher on the left, lower on the right. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4.5rem));
}
.industries-v3-scene-sea {
    position: absolute;
    z-index: 0;
    top: calc(9.25rem + 15px);
    right: 0;
    bottom: 3px;
    left: 0;
    overflow: hidden;
    /* Match section sky; teal fill only below the PNG wave via gradient. */
    background: linear-gradient(
        to bottom,
        #fff 0,
        #fff 2.25rem,
        #004b6b 2.25rem,
        #004b6b 100%
    );
}
.industries-v3-scene-sea img {
    position: absolute;
    top: 0;
    left: -8%;
    width: 116%;
    height: auto;
    max-width: none;
    transform: translateY(-24.8%);
}
.industries-v3-refinery-clouds {
    position: absolute;
    z-index: 1;
    top: calc(-6.5rem + 50px);
    right: -6rem;
    width: 36rem;
    max-width: none;
    height: auto;
    pointer-events: none;
}
.industries-v3-refinery-building {
    position: absolute;
    z-index: 2;
    top: calc(-9.75rem + 50px);
    right: -1.5rem;
    width: 46rem;
    max-width: none;
    height: auto;
    transform: translateX(25%);
    pointer-events: none;
}
.industries-v3-renewables-clouds {
    position: absolute;
    z-index: 1;
    top: calc(-6.5rem + 100px);
    left: 50%;
    width: 38rem;
    max-width: none;
    height: auto;
    transform: translateX(-58%);
    pointer-events: none;
}
.industries-v3-renewables-windmills {
    position: absolute;
    z-index: 2;
    top: calc(-7.5rem + 65px);
    left: 50%;
    width: 38.88rem;
    max-width: none;
    height: auto;
    transform: translateX(calc(-48% - 150px));
    pointer-events: none;
}
.industries-v3-oil-clouds {
    position: absolute;
    z-index: 1;
    top: calc(-6.5rem + 100px);
    right: -6rem;
    width: 18rem;
    max-width: none;
    height: auto;
    pointer-events: none;
}
.industries-v3-oil-rig {
    position: absolute;
    z-index: 2;
    top: calc(-8.5rem + 130px);
    left: 50%;
    width: 28.125rem;
    max-width: none;
    height: auto;
    transform: translateX(-55%);
    pointer-events: none;
}
.industries-v3-scene-wedge {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 7.5rem;
    background: #fff;
    /* Meet the right edge above the sea, then run down to the corner. calc() in clip-path is unreliable here. */
    clip-path: polygon(0 46%, 100% 96%, 100% 100%, 0 100%);
    pointer-events: none;
}
/* Oil: flat shore (no white wedge). Subsea is a separate static section on phone. */
#v3-oil .industries-v3-scene-wedge {
    display: none;
}
.industries-v3-subsea-scene {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1200px;
    overflow: hidden;
    pointer-events: none;
}
.industries-v3-subsea-pipes {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
.industries-v3-subsea-pipes img {
    width: 100%;
    height: auto;
    max-width: none;
}
#v3-subsea #sea-fish-big,
#v3-subsea #sea-fish-shoal {
    position: absolute;
    z-index: 1;
    max-width: none;
    pointer-events: none;
}
#v3-subsea #sea-fish-big img,
#v3-subsea #sea-fish-shoal img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}
.industries-v3-card {
    pointer-events: auto;
}
/* Phone subsea fish — after other #v3-subsea rules; do not set width:2300px here (breaks % sizing). */
@media (max-width: 767px) {
    body.industries-v3 #v3-subsea .industries-v3-subsea-pipes {
        transform-origin: left bottom;
        will-change: transform;
    }
    body.industries-v3 #v3-subsea .industries-v3-subsea-scene > #sea-fish-big {
        top: calc(6% + 50px) !important;
        right: calc(-6% + 50px) !important;
        left: auto !important;
        /* v2 baseline 52% + 10% */
        width: 57.2% !important;
        max-width: none !important;
        transform-origin: 100% 0 !important;
        will-change: transform;
    }
    body.industries-v3 #v3-subsea .industries-v3-subsea-scene > #sea-fish-shoal {
        top: auto !important;
        bottom: 4% !important;
        left: calc(-18% - 50px) !important;
        width: 68% !important;
        max-width: none !important;
        will-change: transform;
    }
}