/*
 * Site overrides.
 *
 * Loaded after the template's style.css and responsive.css, so rules here win
 * on equal specificity without needing !important.
 *
 * Never edit the template's own CSS — put changes here so a template update
 * does not wipe them.
 */

/* ------------------------------------------------------------------------
 * Header logo
 *
 * The wordmark is a real <img> in the markup; the P mark is drawn to its left
 * as a pseudo-element, with padding on the link reserving the space so the two
 * never overlap. The mark is decorative — the wordmark carries the alt text —
 * so a pseudo-element is correct: screen readers skip it rather than
 * announcing the logo twice.
 *
 * The mark appears on the main header only. The sticky header drops it and
 * uses a shorter logo.
 * --------------------------------------------------------------------- */
.logo-box-style1 {
    --logo-height: 60px;    /* height of the wordmark                    */
    --mark-height: 60px;    /* height of the P mark                      */
    --mark-gap: 16px;       /* space between mark and wordmark           */
    --mark-opacity: 1;      /* drop below 1 to fade the mark back        */

    /* logo-mark.png is 687x525, so width is height x 1.31. */
    --mark-width: calc(var(--mark-height) * 1.31);
}

.logo-box-style1 a {
    /* Template already sets position: relative; display: inline-block.
       isolation keeps the stacking context local so the mark cannot slide
       behind the header's own background. */
    isolation: isolate;
    padding-left: calc(var(--mark-width) + var(--mark-gap));
}

.logo-box-style1 a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    width: var(--mark-width);
    height: var(--mark-height);
    transform: translateY(-50%);
    background: url(../images/logo/logo-mark.png) center / contain no-repeat;
    opacity: var(--mark-opacity);
    pointer-events: none;
}

.logo-box-style1 img {
    position: relative;
    z-index: 1;
    max-height: var(--logo-height);
    /* Required: style.css has a global `img { max-width: 100%; height: auto; }`,
       and without this an inherited width would distort the aspect ratio. */
    width: auto;
}

/*
 * The home page header sits on the dark hero and uses the light wordmark
 * (white PLANUS, cyan strapline). The mark art only exists in dark blue, so
 * it is knocked out to white to match.
 */
.main-header-style1 .logo-box-style1 a::before {
    filter: brightness(0) invert(1);
}

/*
 * Sticky header: wordmark only, at a shorter height.
 *
 * custom.js clones the whole .main-menu markup — mark included — into
 * .sticky-header__content, so the mark has to be switched off here rather
 * than simply not added.
 */
.stricky-header .logo-box-style1 {
    --logo-height: 60px;
}

.stricky-header .logo-box-style1 a {
    padding-left: 0;
}

.stricky-header .logo-box-style1 a::before {
    display: none;
}

/*
 * Below the large breakpoint the header gets tight and the mark starts
 * crowding the menu toggle, so the whole lockup steps down.
 */
@media only screen and (max-width: 991px) {
    .logo-box-style1 {
        --logo-height: 58px;
        --mark-height: 52px;
        --mark-gap: 12px;
    }

    .stricky-header .logo-box-style1 {
        --logo-height: 48px;
    }
}

/*
 * About-section slider, full-bleed.
 *
 * Geometry copied from .video-gallery-style1__img in style.css so the two
 * sections line up: the pane is pinned to the section's right edge and full
 * height, and the same calc() keeps the gap between text and image identical.
 */
.about-style1__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc((100% - 173px) / 2);
    overflow: hidden;
}

/*
 * The content is in a col-xl-12 rather than a narrower column because the pane
 * above is out of flow — a grid column would not reserve space for it. Capping
 * the width is what keeps the text clear of the image, matching how
 * .video-gallery-style1__content is handled.
 */
.about-style1 .about-style1__content {
    max-width: 570px;
    width: 100%;
}

/*
 * Owl sizes its own wrappers from content, so every level between the pane and
 * the <img> needs an explicit height before the image can fill the pane.
 */
.about-style1__slider .about-style1-carousel,
.about-style1__slider .owl-stage-outer,
.about-style1__slider .owl-stage,
.about-style1__slider .owl-item,
.about-style1__slider .single-box {
    height: 100%;
}

.about-style1__slider .single-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Dots move on top of the photo, so they need to read against it: white for the
 * inactive ones instead of the grey owl-dot-style1 gives them.
 */
.about-style1__slider .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    margin-top: 0 !important;
    z-index: 2;
}

.about-style1-carousel.owl-carousel.owl-dot-style1 .owl-dots .owl-dot {
    background-color: rgba(255, 255, 255, 0.55);
}

.about-style1-carousel.owl-carousel.owl-dot-style1 .owl-dots .owl-dot.active {
    background-color: #ffffff;
}

/*
 * Below 1200px the pane returns to the flow and goes full width, stacking above
 * the text. This is the breakpoint and the treatment responsive.css already
 * uses for .video-gallery-style1__img.
 */
@media only screen and (max-width: 1199px) {
    .about-style1__slider {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 600px;
        margin-bottom: 50px;
    }

    .about-style1 .about-style1__content {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .about-style1__slider {
        height: 420px;
        margin-bottom: 40px;
    }
}

/*
 * SVG service icons (service-style5 carousel).
 *
 * The icon files are single-colour line art drawn with stroke="currentColor",
 * so an <img> would always paint them black. Masking the shape instead lets the
 * background-color carry the theme colour, matching the icon-font spans these
 * replaced (.single-service-style5 .icon-box span, 65px / --thm-primary).
 */
.service-icon {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background-color: var(--thm-primary);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.service-icon--welded-duct {
    -webkit-mask-image: url(../images/icon/welded-duct.svg);
    mask-image: url(../images/icon/welded-duct.svg);
}

.service-icon--square-duct {
    -webkit-mask-image: url(../images/icon/square-duct.svg);
    mask-image: url(../images/icon/square-duct.svg);
}

.service-icon--spiral-duct {
    -webkit-mask-image: url(../images/icon/spiral-duct.svg);
    mask-image: url(../images/icon/spiral-duct.svg);
}

.service-icon--double-wall-spiral-duct {
    -webkit-mask-image: url(../images/icon/double-wall-spiral-duct.svg);
    mask-image: url(../images/icon/double-wall-spiral-duct.svg);
}

.service-icon--duct-clamp {
    -webkit-mask-image: url(../images/icon/duct-clamp.svg);
    mask-image: url(../images/icon/duct-clamp.svg);
}

.service-icon--angle-flange {
    -webkit-mask-image: url(../images/icon/angle-flange.svg);
    mask-image: url(../images/icon/angle-flange.svg);
}

.service-icon--volume-damper {
    -webkit-mask-image: url(../images/icon/volume-damper.svg);
    mask-image: url(../images/icon/volume-damper.svg);
}

/* Construction delivery types (services page carousel). */
.service-icon--vertical {
    -webkit-mask-image: url(../images/icon/vertical.svg);
    mask-image: url(../images/icon/vertical.svg);
}

.service-icon--horizontal {
    -webkit-mask-image: url(../images/icon/horizontal.svg);
    mask-image: url(../images/icon/horizontal.svg);
}

.service-icon--secure {
    -webkit-mask-image: url(../images/icon/secure.svg);
    mask-image: url(../images/icon/secure.svg);
}

.service-icon--design-build {
    -webkit-mask-image: url(../images/icon/design-build.svg);
    mask-image: url(../images/icon/design-build.svg);
}

.service-icon--contingency {
    -webkit-mask-image: url(../images/icon/contingency.svg);
    mask-image: url(../images/icon/contingency.svg);
}

/*
 * The delivery-type cards carry a sentence instead of the template's "read
 * more" link — these five have no detail page to link to. .btn-box supplies
 * the spacing under the title, so this matches its margin-top.
 */
.single-service-style5 .text-box {
    position: relative;
    display: block;
    margin-top: 20px;
    padding-right: 20px;
}

/*
 * Factory & Office location card (home page hero).
 *
 * Ported from planusenc.com, where it is the hero's right-hand column. The
 * template's .banner-style4__inner is display:block with the copy capped at
 * 750px, so it becomes a flex row here rather than in the module CSS. Below
 * 1200px the card stacks under the copy, which is where responsive.css already
 * centres the hero.
 */
@media only screen and (min-width: 1200px) {
    .banner-style4__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
    }

    .banner-style4__inner .banner-style4-content {
        flex: 1 1 auto;
    }
}

.location-card {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 340px);
    margin-top: 40px;
    padding: 28px;
    overflow: hidden;
    text-align: left;
    background: linear-gradient(180deg, rgba(5, 22, 30, 0.82), rgba(7, 31, 43, 0.76));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.location-card__label {
    margin-bottom: 10px;
    color: var(--thm-primary);
    font-size: 13px;
    line-height: 20px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--thm-font-2);
}

.location-card h2 {
    margin-bottom: 18px;
    color: #ffffff;
    font-size: 24px;
    line-height: 30px;
    font-weight: 900;
    text-transform: uppercase;
    font-family: var(--thm-font);
}

.location-card__link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    transition: color 150ms ease;
}

.location-card__link:last-child {
    margin-bottom: 0;
}

.location-card__link [class^="icon-"] {
    flex-shrink: 0;
    color: var(--thm-primary);
    font-size: 16px;
    line-height: 16px;
}

.location-card__link:hover,
.location-card__link:focus-visible {
    color: #ffffff;
}

/*
 * Below the hero's flex breakpoint the card is full width and centred with the
 * rest of the banner, and the links become tap targets rather than plain rows.
 */
@media only screen and (max-width: 1199px) {
    .location-card {
        width: 100%;
        max-width: 420px;
        margin: 40px auto 0;
    }

    .location-card__link {
        gap: 12px;
        margin-bottom: 6px;
        padding: 10px 12px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.06);
        font-size: 15px;
        transition: background-color 150ms ease, color 150ms ease;
    }

    .location-card__link [class^="icon-"] {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        background-color: var(--thm-primary);
        border-radius: 50%;
        transition: transform 150ms ease;
    }

    .location-card__link span+span {
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.3);
        text-underline-offset: 3px;
    }

    .location-card__link:hover,
    .location-card__link:focus-visible {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .location-card__link:active [class^="icon-"] {
        transform: scale(0.92);
    }
}

@media only screen and (max-width: 767px) {
    .location-card {
        margin-top: 30px;
        padding: 22px 20px;
    }

    .location-card h2 {
        font-size: 20px;
        line-height: 26px;
    }
}

/* ------------------------------------------------------------------------
 * Contact form: telephone input
 *
 * 10-contact.css styles the fields by attribute selector and only lists
 * input[type="text"], input[type="email"] and textarea — so the phone field,
 * which is type="tel" for the numeric keypad on mobile, rendered as an
 * unstyled browser default box. These rules give it the same box, focus ring
 * and placeholder colour as its neighbours.
 * --------------------------------------------------------------------- */
.contact-form form input[type="tel"] {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid #e2e4eb;
    width: 100%;
    height: 60px;
    color: var(--thm-gray);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 5px;
    transition: all 500ms ease;
    font-family: var(--thm-font);
}

.contact-form form input[type="tel"]:focus {
    border: 1px solid var(--thm-base);
    outline: none;
}

.contact-form form input[type="tel"]::placeholder {
    color: #444444;
    opacity: 1;
}

/* Project slider (home) - lock slides to a 710x450 frame */
.project-style1-carousel .single-project-item .img-holder {
    aspect-ratio: 710 / 450;
}

.project-style1-carousel .single-project-item .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Video gallery (home) - theme navy overlay so the white copy reads on the photo */
.video-gallery-style2-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(var(--thm-black-rgb), 0.92) 0%,
            rgba(var(--thm-black-rgb), 0.78) 55%,
            rgba(var(--thm-black-rgb), 0.60) 100%);
}

/*
 * White `.btn-one.bottom` variant in the video-gallery CTA. The template only
 * defines this variant under `.banner-style4-content .btn-box`, so the class
 * alone does nothing outside the hero — same three declarations, new scope.
 */
.video-gallery-style2__content .btn-box .btn-one.bottom {
    color: #000000;
}

.video-gallery-style2__content .btn-box .btn-one.bottom:hover {
    color: #ffffff;
}

.video-gallery-style2__content .btn-box .btn-one.bottom::after {
    background-color: #ffffff;
}

/*
 * Breadcrumb band: dark overlay over the photo so the white title/crumbs stay
 * readable on any background image, plus a taller band with the copy centred
 * vertically. The template only ships flat padding (120px 0 121px) and no
 * overlay layer, so both are additions rather than overrides of a variant.
 * The overlay lives on the -bg element (z-index: -1), which keeps it above the
 * image but below `.inner-content` (z-index: 1).
 */
.breadcrumb-style1-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
            rgba(var(--thm-black-rgb), 0.75) 0%,
            rgba(var(--thm-black-rgb), 0.60) 100%);
}

.breadcrumb-style1 .inner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
    padding: 60px 0;
}

@media only screen and (max-width: 991px) {
    .breadcrumb-style1 .inner-content {
        min-height: 380px;
        padding: 40px 0;
    }
}

@media only screen and (max-width: 767px) {
    .breadcrumb-style1 .inner-content {
        min-height: 300px;
    }
}


/**
 * Service detail — Project Overview box.
 *
 * The template offsets this box with `margin-top: 89px` so it sits low beside
 * the image (style.css). On the service pages the heading is the service name
 * and should line up with the top of the photo, so the offset is dropped on
 * wide screens where the two columns sit side by side. Below xl the columns
 * stack, so a small gap is kept instead of a flush join.
 */
@media only screen and (min-width: 1200px) {
    .project-info .project-description-box {
        margin-top: 0;
    }
}

@media only screen and (max-width: 1199px) {
    .project-info .project-description-box {
        margin-top: 40px;
    }
}

/**
 * Product detail — subsections, and the photo gallery.
 *
 * The old site described several products with a heading, then named
 * sub-blocks under it ("1. By Shape", "2. By Blade Operation"). The template
 * ships a two-level content block only (`text-holder-box` h3 + one list), so
 * the third level is added here rather than overriding a variant.
 *
 * The gallery reuses `.image-holder-box` from 11-services-section.css, which
 * stacks its items one per row — fine for the template's two photos, far too
 * long for twelve. The `--grid` modifier lays the same markup out in columns
 * and cancels the stacking margin; everything else (hover zoom, overflow
 * crop) still comes from the shipped rules.
 */
.service-details-page__text2 .text-holder-box p + p {
    margin-top: 24px;
}

.product-subsection {
    position: relative;
    display: block;
    margin-top: 32px;
}

.product-subsection h4 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-details-page__text2 .product-subsection .features2 {
    margin-top: 12px;
}

.service-details-page__text2 .image-holder-box--grid {
    margin-left: 0;
    margin-top: 24px;
}

.service-details-page__text2 .image-holder-box--grid ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.service-details-page__text2 .image-holder-box--grid ul li + li {
    margin-top: 0;
}

.service-details-page__text2 .image-holder-box--grid ul li .single-img-box img {
    height: 220px;
    object-fit: cover;
    transition: all 700ms linear;
}

@media only screen and (max-width: 767px) {
    .service-details-page__text2 .image-holder-box--grid ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-details-page__text2 .image-holder-box--grid ul li .single-img-box img {
        height: 160px;
    }
}

/**
 * Product listing cards.
 *
 * Each card now carries its one-line summary, which varies in length, so the
 * cards are stretched to a common height per row — the column carries `d-flex`
 * in the view and the card fills it. Scoped to `.service-page` so the home
 * page grid, which uses the same card markup without a summary, is untouched.
 */
.service-page .single-service-style1 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.service-page .single-service-style1 .product-card-summary {
    padding: 0 12.5px 22px;
    margin: -4px 0 0;
    font-size: 16px;
    line-height: 26px;
}