.advertising-page {
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.advertising-canvas {
    width: 100%;
    margin: 0;
    overflow: hidden;
    line-height: 0;
}

/*
 * style.css makes .header-inner fixed at this breakpoint, overlaying
 * page content. The homepage compensates with padding-top on its own
 * first section (.banner_area); this page never had that, so the
 * fixed header covered the top of the first (overview) canvas image.
 * Only the first section needs it, not .advertising-canvas--contact
 * further down the page. Matches the measured fixed-header height.
 *
 * Uses margin-top, not padding-top: the hotspot links inside this
 * canvas are positioned with top/left percentages resolved against
 * this element's own box (it's the nearest positioned ancestor).
 * padding-top would inflate that box's height, throwing off every
 * percentage and detaching the hotspots from the image content they
 * sit on. margin-top pushes the whole canvas down in the page flow
 * without changing its own box, so the hotspots stay put.
 */
@media screen and (max-width: 775px) {
    .advertising-canvas:not(.advertising-canvas--contact) {
        margin-top: 77px;
    }
}

.advertising-canvas__inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.advertising-canvas__inner img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.advertising-hotspot {
    position: absolute;
    z-index: 2;
    display: block;
    border-radius: 10px;
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.advertising-hotspot:focus-visible {
    outline: 4px solid #fff;
    outline-offset: -7px;
    box-shadow: 0 0 0 7px #c69543;
}

/*
 * Hover/active feedback - previously these had zero visual response
 * beyond a keyboard focus ring. hover:hover + pointer:fine keeps this
 * to real mouse hover; :active covers touch/tap with the same
 * treatment.
 */
@media (hover: hover) and (pointer: fine) {
    .advertising-hotspot:hover {
        transform: scale(1.03);
        background: rgba(198, 149, 67, 0.2);
        box-shadow: 0 0 0 2px rgba(198, 149, 67, 0.7);
    }
}

.advertising-hotspot:active {
    transform: scale(0.97);
    background: rgba(198, 149, 67, 0.3);
    box-shadow: 0 0 0 2px rgba(198, 149, 67, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .advertising-hotspot {
        transition: none;
    }

    .advertising-hotspot:hover,
    .advertising-hotspot:active {
        transform: none;
    }
}

.advertising-hotspot--pricing {
    left: 69.6%;
    top: 56.5%;
    width: 28.4%;
    height: 11.8%;
}

.advertising-hotspot--custom {
    left: 69.6%;
    top: 69.2%;
    width: 28.4%;
    height: 11.8%;
}