/* Variables */
/* ============================================================================
   RESPONSIVE BREAKPOINTS  (reference legend)
   Keep media-query values in sync with this
   list. Scalar sizing (gutters, spacing, logo/photo sizes) is handled by
   clamp() on the variables below and does not need a breakpoint.

     --bp-wide       1600px   (min-width) extra breathing room on large screens
     --bp-desktop    1200px   nav + gutter condense (Bootstrap xl: 1199.98px)
     --bp-laptop     1100px   two-column/home layouts tighten
     --bp-tablet      992px   navbar collapses (Bootstrap lg: 991.98px)
     --bp-stack       800px   major sections stack to a single column
     --bp-mobile      576px   phone layout (Bootstrap sm: 575.98px)
     --bp-small       390px   narrow phones
     --bp-tiny        360px   very small phones (359.98px)
   ============================================================================ */
:root {
    /* Color Values */
    --portal-white: #fff;
    --portal-black: #000;
    --portal-red: #bb0000;
    --portal-dark-grey: #0a1e2e;
    --portal-light-grey: #cbd3d9;
    --portal-very-light-grey: #f3f4f4;
    /* Primary and Secondary Colors */
    --portal-primary-color: #0a1e2e;
    --portal-primary-color-light: #edf0f1; /* A lighter shade of the primary color */
    --portal-primary-color-dark: #cbd3d9; /* Border shade */
    --portal-secondary-color: var(--portal-white); /* Text on dark surfaces */
    /* Scaffolding */
    --portal-site-wrapper-width: 100%;
    --portal-layout-wrapper-width: 1320px;
    --portal-content-wrapper-width: var(--portal-layout-wrapper-width);
    /* Header */
    --portal-header-background-color: var(--portal-white);
    --portal-header-text-color: var(--portal-dark-grey);
    /* Site Nav */
    --portal-site-nav-link-color: var(--portal-primary-color);
    --portal-site-nav-link-hover-color: var(--portal-dark-grey);
    --portal-site-nav-link-active-color: var(--portal-black);
    /* Body */
    --portal-body-background-color: var(--portal-very-light-grey);
    --portal-body-text-color: var(--portal-dark-grey);
    --portal-page-background-color: var(--portal-white);
    /* Footer */
    --portal-footer-background-color: var(--portal-primary-color);
    --portal-footer-text-color: var(--portal-white);
    --portal-footer-link-color: var(--portal-white);
    --portal-footer-link-hover-color: var(--portal-white);
    /* Buttons */
    --portal-button-background-color: var(--portal-primary-color-light);
    --portal-button-outline-color: var(--portal-primary-color-dark);
    --portal-button-text-color: var(--portal-primary-color);
    --portal-button-hover-background-color: var(--portal-primary-color);
    --portal-button-hover-text-color: var(--portal-secondary-color);
    /* Spinner */
    --portal-spinner-primary: rgba(10, 30, 46, 0.8);
    --portal-spinner-secondary: rgba(10, 30, 46, 0.4);
    /* Rollups */
    --rollups-primary-color: var(--portal-primary-color);
    /* Forms */
    --portal-forms-required-color: #cc0000;
    --portal-forms-placeholder-color: #cbd3d9;
    /* Social media icons */
    --portal-facebook-color: #4267b2;
    --portal-twitter-color: #1da1f2;
    --portal-linkedin-color: #0077b5;
    /* Login Help Video */
    --portal-login-help-banner-background-img-url: url(../img/login-help-banner.svg);
    /* STACKPOINT extensions */
    --portal-ocean-blue-color: #0077c8;
    --portal-clean-blue-color: #7fd3f7;
    --portal-muted-color: #586570;
    --portal-steel-grey-color: #6b7280;
    --portal-panel-background-color: #e4e8ea;
    --portal-dark-muted-color: #ccd3d9;
    --portal-dark-subtle-color: #a8b7c3;
    --portal-dark-border-color: rgba(255, 255, 255, 0.2);
    --portal-border-color: #cbd3d9;
    --portal-input-dark-background-color: #152c3d;
    --portal-input-dark-border-color: #697986;
    /* Typography */
    --portal-font-family: Arial, Helvetica, sans-serif;
    --portal-font-mono: ui-monospace, Consolas, monospace;
    --portal-font-size: 1rem;
    --portal-line-height: 1.6;
    --portal-heading-weight: 750;
    --portal-heading-tracking: -0.045em;
    --portal-h1-size: clamp(3.625rem, 5.65vw, 4.125rem);
    --portal-h2-size: clamp(2.25rem, 4vw, 3.5rem);
    --portal-h3-size: clamp(2rem, 4vw, 3rem);
    --portal-h4-size: clamp(1.5rem, 4vw, 2.25rem);
    /* Layout and controls */
    /* Scalar sizing scales fluidly via clamp() instead of per-breakpoint steps. */
    --portal-page-gutter: clamp(1rem, 3vw, 3.5rem);
    --portal-section-spacing: clamp(4rem, 8vw, 6.25rem);
    --portal-grid-gap: 1.5rem;
    --portal-grid-gap-compact: clamp(.75rem, calc(2rem - 2.5vw), 1.25rem);
    /* Shared clamped gap for sitewide card grids (tops out at the 1.5rem feature-grid gap). */
    --portal-grid-gap-cards: clamp(1rem, 2.5vw, 1.5rem);
    --portal-column-gap: clamp(2.125rem, 6vw, 5.625rem);
    --portal-header-logo-width: clamp(8.5rem, 18vw, 18rem);
    --portal-footer-logo-width: 18rem;
    --portal-button-radius: 0;
    --portal-button-min-height: 3.25rem;
    --portal-focus-ring-color: var(--portal-ocean-blue-color);
    --portal-border-radius: 0.5rem;
    --portal-box-shadow: 0 0 0 1px var(--portal-dark-border-color), 0 2px 4px rgba(10, 30, 46, 0.1);
    /* Set url('...') when approved photography is available. */
    --portal-hero-image: url("../img/Asset%201-100.jpg");
    --portal-wash-image: url("../img/Asset%202-100.jpg");
    --portal-quote-image: url("../img/Asset%203-100.jpg");
    --portal-hero-photo-height: clamp(25rem, 35vw, 30rem);
    --portal-hero-min-height: clamp(36rem, 45vw, 40rem);
    --portal-hero-photo-width: 45%;
    --portal-hero-photo-position: center 70%;
    --portal-quote-image-position: center 48%;
    --portal-hero-image-position: center;
}

/* Sitewide EUMPortal styles. */
#EUMPortal {
    /* Shell */
    & {
        color: var(--portal-body-text-color);
        background: var(--portal-page-background-color);
        font-family: var(--portal-font-family);
        font-size: var(--portal-font-size);
        line-height: var(--portal-line-height);
        -webkit-font-smoothing: antialiased;
    }

        &.page-full-width {
            & > main {
                padding: 0;
            }

            & .page {
                max-width: none;
                width: 100%;
            }
        }
        /* Header */
        & > header {
            padding: 0;
            border-bottom: 0;
            background: var(--portal-header-background-color);
            color: var(--portal-header-text-color);

            & .navbar {
                min-height: 154px;
            }

            & .navbar-brand {
                margin: 0;
                padding: 0;
                flex-shrink: 0;
            }

            & .spt-brand {
                display: block;
                width: var(--portal-header-logo-width);

                & img {
                    display: block;
                    width: 100%;
                    height: auto;
                }
            }
        }

            & > header > .eum-layout-wrapper,
            & > footer > .eum-layout-wrapper {
                width: calc(100% - var(--portal-page-gutter) * 2);
                max-width: var(--portal-layout-wrapper-width);
            }
        /* Site Navigation */
        & header .site-nav {
            align-items: center;
            gap: 1rem;

            & .nav-link {
                font-size: 0.8125rem;
                font-weight: 700;
                color: var(--portal-site-nav-link-color);

                &:not(.btn) {
                    padding: 0.5rem 0.25rem;

                    &:hover,
                    &:focus-visible {
                        color: var(--portal-site-nav-link-hover-color);
                        text-decoration: underline;
                        text-underline-offset: 0.375rem;
                    }
                }

                &.btn {
                    padding: 0.5rem 1rem;
                }
            }

            & .spt-nav-cta {
                background: var(--portal-primary-color);
                color: var(--portal-secondary-color);
                padding: 0.875rem 1.25rem;
                display: inline-flex;
                gap: 1.5rem;
                align-items: center;

                &:hover,
                &:focus-visible {
                    background: var(--portal-dark-grey);
                    color: var(--portal-secondary-color);
                }
            }
        }

        & .spt-controls {
            align-items: center;
        }

        & .control-nav {
            gap: 1rem;

            & .spt-login-preview {
                font-family: var(--portal-font-family);
                font-size: 0.75rem;
                white-space: nowrap;
                padding: 0.5rem 0;
                border: 0;
                color: var(--portal-header-text-color);
                box-shadow: none;
            }
        }

        & .search-bar .dropdown-menu {
            max-width: calc(100vw - 2 * var(--portal-page-gutter));
            min-width: min(18rem, calc(100vw - 2 * var(--portal-page-gutter)));

            & p {
                margin: 0.75rem;
                font-size: 0.75rem;
            }
        }
        /* Layout */
        & .spt-gutter {
            width: calc(100% - var(--portal-page-gutter) * 2);
            margin: auto;
        }

        & .spt-wrap {
            width: calc(100% - var(--portal-page-gutter) * 2);
            max-width: var(--portal-layout-wrapper-width);
            margin: auto;
        }

        & .spt-wrap-content {
            padding: calc(var(--portal-page-gutter) * 2);
            width: 100%;
        }
        /* Page Typography */
        & .page {
            & a {
                color: inherit;
                text-decoration: underline;
                text-underline-offset: 0.375rem;
            }

            & button,
            & select {
                font: inherit;
            }

            & h1,
            & h2,
            & h3 {
                font-weight: var(--portal-heading-weight);
                line-height: 1.04;
                letter-spacing: var(--portal-heading-tracking);
            }

            & h2 {
                font-size: var(--portal-h2-size);
            }

            & h3 {
                font-size: var(--portal-h3-size);
            }

            & h4 {
                font-size: var(--portal-h4-size);
            }

            .text-wash {
                color: var(--portal-ocean-blue-color);
            }

            .text-clean {
                color: var(--portal-clean-blue-color);
            }

            .text-white {
                color: var(--portal-white);
            }

            .text-primary {
                color: var(--portal-primary-color);
            }

            .text-muted {
                color: var(--portal-muted-color);
            }

            .text-dark-subtle {
                color: var(--portal-dark-subtle-color);
            }

            .text-dark-muted {
                color: var(--portal-dark-muted-color);
            }

            .text-steel-grey-color {
                color: var(--portal-steel-grey-color);
            }
        }
        /* Page Content */
        & .page {
            & * {
                box-sizing: border-box;
            }

            & img {
                max-width: 100%;
                height: auto;
            }

            & h1,
            & h2,
            & h3,
            & p {
                margin: 0;
            }

            & p {
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            & figure {
                margin: 0;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            & section[id] {
                scroll-margin-top: 24px;
            }

            & a:focus-visible,
            & button:focus-visible,
            & select:focus-visible {
                outline: 3px solid var(--portal-ocean-blue-color);
                outline-offset: 5px;
            }

            & .spt-section {
                padding-top: var(--portal-section-spacing);
                padding-bottom: var(--portal-section-spacing);

                &.spt-section-primary {
                    background-color: var(--portal-primary-color);
                    color: var(--portal-white);
                }

                &.spt-section-secondary {
                    background-color: var(--portal-primary-color-light);
                }

                &.spt-section-wash {
                    background-color: var(--portal-ocean-blue-color);
                    color: var(--portal-white);
                }

                &.spt-section-clean {
                    background-color: var(--portal-clean-blue-color);
                    color: var(--portal-primary-color);
                }

                & .spt-section-heading {
                    display: flex;
                    justify-content: space-between;
                    align-items: end;
                    margin-bottom: 48px;
                    gap: 30px;

                    & h1,
                    & h2,
                    & h3 {
                        margin-bottom: 0;
                    }

                    & > p {
                        color: var(--portal-muted-color);
                        font-size: 15px;
                        margin-bottom: 2px;
                    }
                }



                & h1,
                & h2,
                & h3 {
                    margin-bottom: 1.5rem;
                }
            }

            & .spt-section-image-split {
                display: flex;
                flex-wrap: wrap;
                padding: 0;
                overflow: hidden;

                & .row {
                    align-items: stretch;

                    & [class*="col"] {
                        padding: 0;
                        display: flex;
                        align-items: center;
                    }
                }

                & .spt-section-image {
                    height: 100%;
                    margin: 0;
                }
            }

            & .spt-eyebrow {
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.16em;
                line-height: 1.6;
                text-transform: uppercase;
            }

            & .spt-lead {
                font-size: 24px;
                line-height: 1.4;
                letter-spacing: -0.02em;
            }

            & .spt-card-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: var(--portal-grid-gap-cards);
            }
            /* Reusable non-image feature cards (sitewide version of the home mini-grid). */
            & .spt-feature-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: var(--portal-grid-gap-cards);

                @media (max-width: 575.98px) {
                    grid-template-columns: 1fr;
                }
            }

            & #tank-cleaning-steps.spt-feature-grid {
                grid-template-columns: repeat(5, 1fr);

                @media (max-width: 1100px) {
                    grid-template-columns: repeat(3, 1fr);
                }

                @media (max-width: 992px) {
                    grid-template-columns: repeat(2, 1fr);
                }

                @media (max-width: 575.98px) {
                    grid-template-columns: 1fr;
                }
            }

            & .spt-feature-card {
                padding: 28px;
                background: var(--portal-panel-background-color);
                border: 0;
                border-top: 0.25rem solid var(--portal-ocean-blue-color);

                & .spt-card-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    min-height: 43px;
                    font: 11px var(--portal-font-mono);
                    letter-spacing: 0.065rem;
                    margin-bottom: 25px;
                    color: var(--portal-ocean-blue-color);
                    font-weight: 600;
                }

                & .card-title {
                    font-size: 22px;
                    font-weight: 700;
                    line-height: 1.12;
                    letter-spacing: -0.04em;

                    & a {
                        text-decoration: none;
                    }
                }

                & .card-text {
                    font-size: 14px;
                    margin-top: 17px;
                    color: var(--portal-muted-color);
                    margin-bottom: 0;
                }
            }
        }
        /* Components */
        /* Sitewide card color variants (single definition for all card types). */
        & .card.spt-card-white {
            background: var(--portal-white);
        }

        & .card.spt-card-primary {
            background: var(--portal-primary-color);
            color: var(--portal-white);
        }

        & .spt-card {
            background: var(--portal-primary-color-light);

            & .card-img-top img {
                border-start-start-radius: var(--portal-border-radius);
                border-start-end-radius: var(--portal-border-radius);
            }

            & .card-title {
                font-weight: 700;
                line-height: 1.1;
                letter-spacing: -0.04em;

                & a {
                    text-decoration: none;
                }
            }

            & .card-body {
                padding: 34px 36px;
                font-size: .875rem;
            }
        }

        & .btn,
        & .spt-button {
            border-radius: var(--portal-border-radius) !important;
            text-decoration: none !important;
        }

        & .card {
            border-radius: var(--portal-border-radius);
            box-shadow: var(--portal-box-shadow);
        }

        & .spt-button {
            min-height: var(--portal-button-min-height);
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            text-transform: uppercase;
            padding: 14px 24px;
            font-size: 13px;
            font-weight: 700;
            border: 1px solid transparent;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
            letter-spacing: 0.1em;
        }

            & .spt-button:hover {
                transform: translateY(-2px);
            }

            & .spt-button span {
                font-size: 22px;
                line-height: 1;
            }

        & .spt-button-white {
            background: var(--portal-white);
            color: var(--portal-primary-color) !important;
        }

        & .spt-button-primary {
            background: var(--portal-primary-color);
            color: var(--portal-white) !important;
        }

        & .spt-button-ocean-blue {
            background: var(--portal-ocean-blue-color);
            color: var(--portal-white) !important;
        }
        /* Section-level call to action with supporting copy (not a bare button). */
        & .spt-cta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem 2.5rem;
            padding: 44px 48px;
            background: var(--portal-primary-color-light);
            border-left: 0.35rem solid var(--portal-ocean-blue-color);

            & .spt-cta-copy {
                flex: 1 1 320px;

                & h3,
                & h4 {
                    margin-bottom: 0.5rem;
                }

                & p {
                    margin-bottom: 0;
                    color: var(--portal-muted-color);
                }
            }

            & .spt-cta-action {
                flex: 0 0 auto;

                & .spt-button {
                    justify-content: center;
                    font-size: 1.2rem;
                    font-weight: 500;
                    padding-inline: 2.5rem;
                }
            }
        }
        /* Contact details presented as a distinct card. */
        & #contact-info.spt-section {
            padding: 3rem 0;
        }
        & .spt-contact-card {                        

            & .spt-contact-item {
                display: flex;
                align-items: flex-start;
                gap: 20px;
                padding: 20px 0;

                & + .spt-contact-item {
                    border-top: 1px solid rgba(10, 30, 46, 0.1);
                }

                & svg {
                    flex: 0 0 auto;
                    margin-top: 2px;
                    color: var(--portal-ocean-blue-color);
                }

                & .spt-contact-label {
                    display: block;
                    font: 11px var(--portal-font-mono);
                    letter-spacing: 0.065rem;
                    text-transform: uppercase;
                    color: var(--portal-muted-color);
                    margin-bottom: 2px;
                }

                & a {
                    color: var(--portal-primary-color);
                }
            }
        }
        /* Request a quote call to action */
        & .spt-quote {
            color: var(--portal-white);
            padding: 75px 0;
            background-color: var(--portal-primary-color);
            background-image: linear-gradient( 90deg, var(--portal-primary-color) 40%, rgba(10, 30, 46, 0.9) 65%, rgba(10, 30, 46, 0.55) ), var(--portal-quote-image);
            background-size: cover, cover;
            background-position: center, var(--portal-quote-image-position);
            background-repeat: no-repeat;

            @media (max-width: 800px) {
                background-image: linear-gradient(rgba(10, 30, 46, 0.88), rgba(10, 30, 46, 0.88)), var(--portal-quote-image);
            }
        }

        & .spt-quote-grid {
            display: grid;
            grid-template-columns: 1.3fr 1fr;
            gap: var(--portal-column-gap);
            align-items: center;

            @media (max-width: 1100px) {
                gap: 45px;
            }

            @media (max-width: 800px) {
                grid-template-columns: 1fr;
                gap: 34px;
            }
        }

        & .spt-quote h2 {
            font-size: clamp(38px, 4vw, 56px);
            margin-bottom: 24px;
        }

        & .spt-quote p {
            color: var(--portal-dark-muted-color);
            font-size: 14px;
        }

        & .spt-quote-panel {
            border-left: 1px solid var(--portal-dark-border-color);
            padding-left: 45px;
            text-align: center;

            & .spt-button {
                width: auto;
                min-width: 12rem;
                font-size: 1.2rem;
                padding-inline: 2.5rem;
                font-weight: 500;
                justify-content: center;
            }

            @media (max-width: 800px) {
                border-left: 0;
                border-top: 1px solid var(--portal-dark-border-color);
                padding: 30px 0 0;
            }
        }
        /* Footer */
        & > footer.footer {
            padding: 0;
            background: var(--portal-footer-background-color);
            color: var(--portal-footer-text-color);
            line-height: var(--portal-line-height);
        }

        & .spt-footer {
            background: var(--portal-primary-color);
            color: var(--portal-white);
            border-top: 1px solid var(--portal-dark-border-color);
        }

        & .spt-footer-main {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            padding: 3rem 0;

            & img {
                width: var(--portal-footer-logo-width);
                display: block;
            }

            & p {
                font-size: 19px;
                letter-spacing: -0.02em;
                margin: 0;
                padding: 0;
            }

            & > a:last-child {
                font-size: 12px;
            }
        }

        & .spt-footer-bottom {
            border-top: 1px solid var(--portal-dark-border-color);
            padding: 1.25rem 0 1.75rem;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            font-size: 10px;
            color: var(--portal-dark-subtle-color);

            & span:last-child {
                letter-spacing: 0.1em;
            }
        }

        & footer .links a {
            color: var(--portal-footer-link-color);

            &:hover {
                color: var(--portal-footer-link-hover-color);
            }
        }

    @media (max-width: 1199.98px) {
        & header .site-nav {
            gap: 0.5rem;

            & .nav-link {
                font-size: 0.75rem;
            }

            & .spt-nav-cta {
                padding: 0.75rem;
                gap: 0.75rem;
            }
        }
    }
    /* Use Bootstrap's lg breakpoint for the actual navbar, not a custom menu. */
    @media (max-width: 991.98px) {
        & header {
            & .navbar {
                min-height: 120px;
            }

            & .navbar-collapse {
                flex-basis: 100%;
            }
        }

            & header .site-nav {
                align-items: stretch;
                gap: 0.5rem;
                padding: 0 0 1.5rem;

                & .nav-link {
                    font-size: 0.875rem;
                }

                & .spt-nav-cta {
                    padding: 0.875rem 1.25rem;
                }
            }
    }

    @media (max-width: 800px) {
        & .spt-footer-main {
            flex-wrap: wrap;
            gap: 0 30px;
            padding-bottom: 30px;

            & p {
                font-size: 16px;
            }
        }

        & .spt-footer-bottom {
            flex-wrap: wrap;

            & span:last-child {
                width: 100%;
            }
        }
    }

    @media (max-width: 575.98px) {
        & header {
            & .navbar {
                gap: 0.5rem !important;
            }

            & .spt-controls {
                flex-grow: 0 !important;
                gap: 0.75rem !important;
            }
        }

        & .control-nav {
            gap: 0.625rem;
        }

        & .navbar-toggler {
            padding: 0.3rem;
            font-size: 0.875rem;
        }
    }

    @media (max-width: 390px) {
        & .spt-footer-main p {
            width: 100%;
            margin-bottom: 22px;
        }
    }
}

    #EUMPortal.spt-home {
        /* Home page layout overrides. Load order: Bootstrap 5.1.1 > core.min.css > branding. */
        /* Retain the base template title node; the hero owns the visible page heading. */
        & .page > #page-title,
        & .page > .breadcrumb,
        & .page > nav[aria-label="breadcrumb"] {
            display: none;
        }

        & .spt-hero {
            background: var(--portal-primary-color);
            color: var(--portal-white);
            overflow: hidden;
        }

        & .spt-hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding-top: 64px;
            padding-bottom: 70px;
            align-items: center;
        }

        & .spt-hero .spt-eyebrow {
            color: var(--portal-dark-muted-color);
            font-size: 10px;
        }

        & .spt-hero #hero-title {
            font-size: 3.5rem;
            text-transform: uppercase;
            letter-spacing: 0.25rem;
            line-height: 1.05;
            margin: 24px 0;

            &::after {
                content: "";
                display: block;
                width: 120px;
                height: 5px;
                background: var(--portal-ocean-blue-color);
                margin-top: 18px;
            }
        }

        & .spt-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            background: var(--portal-clean-blue-color);
            border-radius: 50%;
            margin-right: 10px;
        }

        & h1 {
            font-size: var(--portal-h1-size);
        }

            & h1 span {
                color: var(--portal-clean-blue-color);
            }

        & .spt-intro {
            font-size: 1.2rem;
            max-width: 390px;
            color: var(--portal-dark-muted-color);
            line-height: 1.6;
        }

        & .spt-actions {
            display: flex;
            gap: 30px;
            align-items: center;
            margin-top: 34px;
        }

        & .spt-text-link {
            display: inline-flex;
            gap: 28px;
            align-items: center;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none !important;
            text-transform: uppercase;
            padding: 10px 0;
            border-bottom: 1px solid var(--portal-dark-border-color);
            letter-spacing: 0.1em;
        }

            & .spt-text-link span {
                font-size: 21px;
            }

            & .spt-text-link:hover {
                border-bottom-color: currentColor;
            }

        & .spt-service-strip {
            border-top: 1px solid var(--portal-dark-border-color);
        }

            & .spt-service-strip .spt-wrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                min-height: 79px;
                font-size: 0.875rem;
                letter-spacing: 0.2em;
                font-weight: 700;
                color: var(--portal-dark-muted-color);
            }

        & .spt-approach {
            background-image: url("../img/approach-routing.svg");
            background-repeat: no-repeat;
            background-position: center 75%;
            background-size: cover;
            background-attachment: fixed;
        }
            /* Even two-column sections use the Bootstrap grid; brand spacing via gutter vars. */
            & .spt-approach .row,
            & .spt-location .row {
                --bs-gutter-x: var(--portal-column-gap);
            }

        & .spt-approach-copy {
            padding-top: 35px;
            max-width: 490px;
        }

            & .spt-approach-copy > p:not(.spt-lead),
            & .spt-location-copy > p:not(.spt-eyebrow) {
                color: var(--portal-muted-color);
                font-size: 15px;
            }

        & .spt-dark-link {
            border-bottom-color: var(--portal-border-color);
        }

        & .spt-services {
            background: var(--portal-very-light-grey);
        }

        & .spt-service-grid {
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: var(--portal-grid-gap);
        }

        & .spt-wash-card {
            background: var(--portal-ocean-blue-color);
            color: var(--portal-white);
            padding: 34px 36px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        & .spt-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 43px;
            font: 11px var(--portal-font-mono);
            letter-spacing: 0.065rem;
            margin-bottom: 25px;
            color: var(--portal-ocean-blue-color);
            font-weight: 600;
        }
        /* Bootstrap card normalization: keep branding, drop default chrome. */
        & .spt-service-grid .card {
            border: 0;
        }

        & .spt-service-grid .card-header.spt-card-top {
            background: transparent;
            border-bottom: 0;
            padding: 0;
            border-radius: 0;
        }

        & .spt-service-grid .card-body {
            padding: 0;
            background: transparent;
        }

        & .spt-wash-card h3 {
            font-size: 49px;
            margin-bottom: 24px;
        }

        & .spt-wash-card > p {
            font-size: 15px;
            max-width: 320px;
        }

        & .spt-wash-card .spt-wash-note {
            border-top: 1px solid var(--portal-dark-border-color);
            padding-top: 18px;
            margin-top: auto;
            margin-bottom: 12px;
        }

        & .spt-secondary-services {
            display: flex;
            flex-direction: column;
            gap: var(--portal-grid-gap);
        }

        & .spt-mini-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--portal-grid-gap);

            @media (max-width: 575.98px) {
                grid-template-columns: 1fr;
            }
        }

            & .spt-mini-grid article {
                padding: 28px;
                background: var(--portal-panel-background-color);
                position: relative;

                &.spt-card-white {
                    background: var(--portal-white);
                }
            }

            & .spt-mini-grid h3 {
                font-size: 26px;
                line-height: 1.12;
            }

            & .spt-mini-grid p {
                font-size: 13px;
                margin-top: 17px;
                max-width: 210px;
                color: var(--portal-muted-color);
                margin-bottom: 28px;
            }

            & .spt-mini-grid a {
                font-size: 24px;
                display: inline-block;
                padding: 0 12px 0 0;
            }

        & .spt-location-copy h2 {
            margin-bottom: 25px;
        }

        & .spt-location-copy address {
            font-style: normal;
            font-size: 14px;
            border-left: 2px solid var(--portal-primary-color);
            padding-left: 17px;
            margin: 26px 0 18px;
        }

        @media (min-width: 1600px) {
            & .spt-hero-grid {
                padding-top: 90px;
                padding-bottom: 90px;
            }
        }

        @media (max-width: 1100px) {
            & .spt-wrap {
                width: calc(100% - var(--portal-page-gutter) * 2);
            }

            & .spt-actions {
                gap: 20px;
            }

            & .spt-hero-grid {
                gap: 20px;
            }

            & .spt-hero .spt-eyebrow {
                letter-spacing: 0.09em;
            }

            & .spt-wash-card h3 {
                font-size: 42px;
            }

            & .spt-mini-grid {
                gap: 16px;
            }

                & .spt-mini-grid article {
                    padding: 22px;
                }

                & .spt-mini-grid h3 {
                    font-size: 23px;
                }
        }

        @media (max-width: 800px) {
            & .spt-wrap {
                width: calc(100% - var(--portal-page-gutter) * 2);
            }

            & .spt-hero-grid {
                grid-template-columns: 1fr;
                padding: 42px 0 38px;
                gap: 45px;
            }

            & h1 {
                font-size: clamp(54px, 10vw, 76px);
            }

            & .spt-hero-copy {
                max-width: 600px;
            }

            & .spt-intro {
                max-width: 400px;
            }

            & .spt-service-strip .spt-wrap {
                min-height: 65px;
                font-size: 10px;
                letter-spacing: 0.08em;
            }

            & .spt-approach {
                background-attachment: scroll;
            }

            & .spt-approach-copy {
                padding-top: 0;
                max-width: 600px;
            }

            & .spt-section-heading {
                display: block;
                margin-bottom: 32px;
            }

                & .spt-section-heading > p {
                    margin-top: 22px;
                }

            & .spt-service-grid {
                grid-template-columns: 1fr;
            }

            & .spt-wash-card {
                min-height: 470px;
            }

                & .spt-wash-card h3 {
                    font-size: 47px;
                }

                & .spt-wash-card > p {
                    max-width: 470px;
                }
        }

        @media (max-width: 390px) {
            & .spt-actions {
                align-items: start;
                flex-direction: column;
                gap: 12px;
            }

            & .spt-mini-grid {
                grid-template-columns: 1fr;
            }

                & .spt-mini-grid p {
                    max-width: 100%;
                }

            & .spt-wash-card {
                padding: 28px;
            }

            & h1 {
                font-size: 52px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            & .spt-button {
                transition: none;
            }

            & .spt-approach {
                background-attachment: scroll;
            }
        }

        & .spt-connections {
            padding: 1.75rem 38px 38px;
            background: var(--portal-primary-color-light);

            & ul {
                list-style: none;
                margin: 1.5rem 0;
                padding: 0;
            }

            & li {
                display: flex;
                gap: 16px;
                align-items: center;
                padding-block: 0.75rem;
                border-top: 1px solid var(--portal-border-color);
                font-size: 13px;

                & span {
                    font: 10px var(--portal-font-mono);
                    color: var(--portal-steel-grey-color);
                }

                & b {
                    margin-left: auto;
                    font-weight: 400;
                    font-size: 18px;
                }
            }
        }

        & .spt-connections-title {
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.04em;
        }

        @media (max-width: 800px) {
            & .spt-connections {
                padding: 28px;
            }
        }
        /* Bootstrap row/columns supply the hero grid; brand variables control spacing. */
        & .spt-hero-grid.row {
            display: flex;
            gap: 0;
            margin-left: auto;
            margin-right: auto;
        }
        /* Brochure links use text labels, without decorative arrows. */
        & .spt-mini-grid {
            & .spt-text-link {
                font-size: 0.8125rem;
                padding: 0.625rem 0;
            }
        }
        /* Supplied PDF assets. CSS cropping/overlays only; no generated imagery. */
        & .spt-hero-photo {
            margin: 1.5rem 0;
            height: var(--portal-hero-photo-height);
            overflow: hidden;
            background: var(--portal-primary-color);

            & img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center 85%;
            }
        }

        & .spt-wash-card {
            background-color: var(--portal-primary-color);
            background-image: linear-gradient( 90deg, rgba(10, 30, 46, 0.96) 15%, rgba(10, 30, 46, 0.72) ), var(--portal-wash-image);
            background-size: cover;
            background-position: center;
            border-top: 0.25rem solid var(--portal-ocean-blue-color);

            & .spt-card-top {
                color: var(--portal-clean-blue-color);
            }
        }

        & .spt-location-visual {
            min-width: 0;
        }

        & .spt-facility-photo {
            margin: 0;
            background: var(--portal-primary-color-light);

            & img {
                display: block;
                width: 100%;
                height: auto;
            }

            & figcaption {
                padding: 0.5rem 1rem;
                font-size: 0.6875rem;
                color: var(--portal-muted-color);
            }
        }

        @media (max-width: 800px) {
            & .spt-location-visual {
                max-width: 440px;
                width: 100%;
                margin-inline: auto;
            }
        }
        /* Edge-to-edge hero photography, blended into the brand navy with a CSS overlay. */
        & .spt-hero-stage {
            position: relative;
            isolation: isolate;

            & .spt-hero-photo {
                position: absolute;
                inset: 0 0 0 auto;
                width: var(--portal-hero-photo-width);
                height: 100%;
                margin: 0;
                z-index: -1;

                & img {
                    object-position: var(--portal-hero-photo-position);
                }

                &::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: linear-gradient( 90deg, var(--portal-primary-color) 0%, rgba(10, 30, 46, 0.85) 12%, rgba(10, 30, 46, 0.25) 42%, rgba(10, 30, 46, 0.06) 75% );
                }
            }

            & .spt-hero-grid {
                min-height: var(--portal-hero-min-height);
                padding-block: 5rem;
                position: relative;
            }

            & .spt-hero-copy {
                position: relative;
                z-index: 1;
            }
        }

        @media (max-width: 800px) {
            & {
                --portal-hero-photo-width: 100%;
                --portal-hero-min-height: 36rem;
                --portal-hero-photo-position: center 65%;
            }

                & .spt-hero-stage {
                    & .spt-hero-photo::after {
                        background: linear-gradient( 90deg, rgba(10, 30, 46, 0.96), rgba(10, 30, 46, 0.83) 55%, rgba(10, 30, 46, 0.6) );
                    }

                    & .spt-hero-grid {
                        padding-block: 3.5rem;
                    }
                }
        }
    }

    #EUMPortal.spt-page {
        & .spt-page-header {
            overflow: hidden;
            height: 20rem;
            position: relative;
            background: var(--portal-primary-color);

            & .spt-page-header-background {
                position: absolute;
                inset: 0;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: 0;

                & img {
                    opacity: 0.5;
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center 85%;
                }
            }

            & .spt-page-header-content {
                position: relative;
                z-index: 1;
                display: flex;
                height: 100%;
                justify-content: center;
                align-items: center;
                color: var(--portal-white);

                & h1 {
                    font-size: clamp(38px, 4vw, 56px);
                    line-height: 1.1;
                }

                & p {
                    margin-top: 24px;
                    color: var(--portal-dark-muted-color);
                    font-size: 14px;
                }
            }
        }
    }