#back-top {
    height:45px;
    width:45px;
    border-radius:100vw;
    border:none;
    background:#f1f1f1;
    color: #222222;

    &:hover, &:active, &:focus {
        background:#444444;
        color: #f1f1f1;
    }
}
footer {
    z-index:9;
}
/* Full-bleed sections use 100vw, which includes the scrollbar width and would
   otherwise cause an ~8px horizontal scroll on mobile. Clip the bleed at the
   viewport edge (clip, not hidden, so it doesn't create a scroll container). */
html:has(.services-page) {
    overflow-x: clip;
}
.services-page {
    .container-bottom-c {
        z-index:5;
        position:relative;
        background: rgb(34, 34, 34);
        h2, h3 {
            grid-area: title;
            margin: 0 0 0.5rem;
            font-family: var(--reformed-font-title);
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.25;
            color: var(--reformed-white-2);
            align-self: end;
        }
        .mod-custom {
            display: grid;
            grid-template-columns: minmax(0, 24rem) 1fr;
            grid-template-areas: "img title" "img content";
            column-gap: 1.75rem;
            row-gap: 0.25rem;
            align-items: center;

            .tm-image {
                grid-area: img;
                width: 100%;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                align-self: center;
            }
            .tm-content {
                grid-area: content;
                align-self: start;
                margin-top: 0;
                font-size: 1.1rem;
                line-height: 1.5;
                color: var(--reformed-white-2);
            }

            /* Match the reference: below the card breakpoint the image stacks as a
               full-width square above the title + content (reference stacks at the
               UIkit 960 @m; 768 keeps it consistent with the service cards). */
            @media (width < 768px) {
                grid-template-columns: 1fr;
                grid-template-areas: "img" "title" "content";
                row-gap: 1rem;
            }
        }
    }
    & .container-top-a {
        &::before {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            bottom: -100px;
            z-index: 2;
            width: 20vw;
            height: 100vh !important;
            background-image: url(/images/backgrounds/waves5.svg);
            background-position: left -145px;
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
    .container-component {
        position: relative;
        background: var(--reformed-black-3);
        z-index: 3;
        &::before {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
            width: 20vw;
            height: 100%;
            pointer-events: none;
            background-image: url(/images/backgrounds/waves5.svg);
            background-position: left -145px;
            background-repeat: no-repeat;
            background-size: cover;
            transform: rotate(180deg);
        }
        &.full-width {
            margin-left: calc(-50vw + 50%) !important;
            margin-right: calc(-50vw + 50%);
            margin-top: 0;
            margin-bottom: 0;
            max-width: 100vw;
            width: 100vw;
        }
    }
}
.contact-page {
    .site-grid {
        &::before {
            position: absolute;
            content: "";
            top:-113px;
            left: 0;
            z-index: 2;
            width: 25vw;
            height: 100%;
            background-image: url(/images/backgrounds/waves5.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            rotate: 180deg;
        }
    }
    /* Lift the content above the waves ::before (z-index 2) so the contact
       image and Facebook feed aren't overlaid by the decorative gutter. */
    .container-component,
    .container-sidebar-right {
        position: relative;
        z-index: 3;
    }
    .com-contact__container {
        grid-template-columns:1fr 1fr;
       .com-contact__thumbnail {
           order:1;
           grid-area:unset;
       }
        .com-contact__info {
            grid-area:unset;
            order:2;
        }
    }
    /* Headings: match the reference — smaller "Get in touch" page header, and
       hide the redundant "Contact" name + "Contact Form" H2s (reference sets
       both display:none). */
    .page-header h1 {
        font-size: 42px;
        line-height: 1.1;
    }
    .com-contact.contact > h2,
    .com-contact__info > h2 { display: none; }
    /* Contact form: dark fields matching the reference (bg #555, text #f1f1f1). */
    .form-control {
        background: #555;
        border: 1px solid var(--reformed-grey-2, #666);
        color: var(--reformed-white-2, #f1f1f1);
        border-radius: 0;
    }
    .form-control::placeholder { color: var(--reformed-grey-4, #888); }
    .form-control:focus {
        background: #555;
        border-color: var(--reformed-white-2, #f1f1f1);
        color: var(--reformed-white-2, #f1f1f1);
        outline: none;
        box-shadow: none;
    }
    label,
    .control-label label,
    legend { color: var(--reformed-white-2, #f1f1f1); }
    .btn-primary,
    button[type="submit"] {
        background: var(--reformed-black-1, #000);
        color: #fff;
        border: 1px solid #fff;
        border-radius: 0;
        text-transform: uppercase;
    }
    .btn-primary:hover,
    button[type="submit"]:hover {
        background: #fff;
        color: #000;
    }
}
/* Desktop: reformed.css lets the 4 main grid columns fill almost the whole
   viewport, so the contact content spreads much wider than the reference.
   Re-center it with 1fr side gutters and cap the content (~1180px component +
   ~340px feed) to match reformedref. The site-grid stays full-width so the
   left waves ::before keeps hugging the viewport edge. */
@media (width >= 992px) {
    /* .contact-page and .wrapper-fluid are BOTH on <body>, so this compound
       (0,3,0) beats the framework's `body.wrapper-fluid .site-grid` columns
       rule (0,2,1) in template.css, which would otherwise keep the base
       4-column track and collapse this layout. */
    .contact-page.wrapper-fluid .site-grid {
        max-width: 1580px;
        margin-inline: auto;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "cmp feed";
        column-gap: 3.5rem;
        align-items: start;
    }
    /* The grid is now centred, so pull the decorative waves back out to the
       viewport's left edge (same pattern reformed.css uses on .homeIntro). */
    .contact-page .site-grid::before {
        left: calc(50% - 50vw);
    }
    .contact-page .site-grid > .container-component {
        grid-area: cmp !important;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .contact-page .site-grid > .container-sidebar-right {
        grid-area: feed !important;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}
/* When the grid stacks (below the template's 992px breakpoint), give the
   Facebook feed breathing room above it. */
@media (width < 992px) {
    .contact-page .container-sidebar-right { margin-top: 2rem; }
}
/* Phone: stack the contact image above the Hours + form instead of the cramped
   two-up layout (consistent with the service cards' 768px stack). */
@media (width < 768px) {
    .contact-page .com-contact__container { grid-template-columns: 1fr; }
}
.category-lede {
    font-size: 14px;
    line-height: 1.5;
    margin:0 0 20px 0;
 }
/* menu fixes */
 .container-header .mod-menu>li:hover:after {
   display:none;
}
/* ---- Error (404) page ------------------------------------------------------
   Vertically centre the error content between the in-flow header and footer,
   and style the heading + paragraph to match the reference site's 404
   (reformedref: Montserrat 32px/700 uppercase, 2px tracking; Poppins ~19px).
   Scoped to the body's .error_site class so nothing else is affected. */
body.error_site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    main {
        margin-top:0;
    }
    footer {
        margin-top:0 !important;
    }
    .container-error {
        .mod-custom {
            width:fit-content;
            margin-inline:auto;
        }
    }
}
body.error_site .site-grid {
    flex: 1 1 auto;
    display: flex;
    align-items: center;      /* centre the error block vertically */
}
body.error_site .container-component {
    width: 100%;
}
.error_site .container-error h1 {
    font-family: var(--reformed-font-title);
    /* px (not rem): this site's root is 17.6px, so 2rem would render 35px;
       the reference heading is 32px. */
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--reformed-white-2);
    margin: 0 0 20px;
}
.error_site .container-error p {
    font-family: var(--reformed-font-body);
    font-size: 19.36px;       /* matches the reference paragraph exactly */
    font-weight: 400;
    line-height: 1.5;
    color: var(--reformed-white-2);
    margin: 0;
}
@media screen and (width < 1261px) {
    .nav-cta .jl-button .jl-btn-text {
        font-size: 1rem;
    }
    .nav-cta .jl-button {
        padding: 10px;
    }
}