/*
Theme Name: The Camera Guys Child
Template: betheme
Version: 1.0.0
Description: Custom child theme for The Camera Guys.
*/

/* Process section compatibility fix - BeTheme 28.5.7 */

@media screen and (min-width: 701px) {

    .unique-sec {
        height: auto !important;
        min-height: 36vh;
        overflow: visible;
    }

    .first-line-images,
    .last-line-images,
    .arrows {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .first-line-images,
    .last-line-images {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
    }

    .arrows {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 70px;
        width: 100%;
        margin: 20px auto;
    }

    .arrows img {
        display: block;
        flex: 0 0 auto;
    }
}

@media screen and (max-width: 700px) {

    .unique-sec {
        height: auto !important;
    }

    .arrows {
        display: none !important;
    }

    .last-line-images {
        padding: 30px 0 0 !important;
    }
}

/* Fix bottom-row Process hover overlays */
@media screen and (min-width: 701px) {
    .parent-image-five,
    .parent-image-six,
    .parent-image-seven {
        position: relative;
    }

    .overlay-five,
    .overlay-six,
    .overlay-seven {
        left: 50% !important;
        bottom: 50% !important;
        transform: translate(-50%, 50%) scale(0) !important;
    }

    .parent-image-five:hover .overlay-five,
    .parent-image-six:hover .overlay-six,
    .parent-image-seven:hover .overlay-seven {
        transform: translate(-50%, 50%) scale(1) !important;
    }
}

/* Inline SEO headings - visually match surrounding body copy only */
.inline-seo-heading {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.inline-seo-heading::before,
.inline-seo-heading::after {
    content: " ";
}

/* Homepage Recent Projects - align the three Presto players */
.recent-project-video {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.recent-project-video > a {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix desktop header logo disappearing at top of page */
@media only screen and (min-width: 960px) {
    #Top_bar:not(.is-sticky) #logo img.logo-main {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Popular Services pills - gold hover */
.popular-services a:hover,
.popular-services a:focus {
    background-color: #ffb536 !important;
    color: #111 !important;
    border-color: #ffb536 !important;
    opacity: 1 !important;
}


/* Popular Services - coloured hover instead of old white glow */
.service-buttons .service-button:hover,
.service-buttons .service-button:focus {
    background-color: #ffad2f !important;
    color: #111 !important;
    border-color: #ffad2f !important;
    box-shadow: 0 0 12px 2px rgba(255, 173, 47, 0.35) !important;
    opacity: 1 !important;
}

/* Global header social profiles — recovered original three-icon design. */
#Header .tcg-header-social {
    position: absolute;
    top: 100px;
    right: 80px;
    z-index: 20;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

#Header .tcg-header-social li {
    margin: 0;
    padding: 5px;
}

#Header .tcg-header-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    overflow: hidden;
    color: #d69942;
    background: transparent;
    border: 0;
    font-size: 30px;
    line-height: 1;
    text-align: center;
}

#Header .tcg-header-social a:hover,
#Header .tcg-header-social a:focus {
    color: #d69942;
    background: transparent;
    opacity: .78;
}

#Top_bar.is-sticky ~ .tcg-header-social {
    display: none;
}

@media screen and (max-width: 980px) {
    #Header .tcg-header-social {
        position: static;
        justify-content: center;
        padding: 6px 0 10px;
        background: rgba(255, 255, 255, .92);
    }

    #Top_bar.is-sticky ~ .tcg-header-social {
        display: none;
    }
}

/* Global navigation primary CTA. */
@media only screen and (min-width: 1240px) {
    #Top_bar #menu .menu_right {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
    }

    #Top_bar #menu .menu_right > li:not(.tcg-nav-cta) > a > span:not(.description) {
        padding-inline: 7px !important;
    }

    #Top_bar #menu .menu_right > li.tcg-nav-cta > a {
        white-space: nowrap;
    }

    #Top_bar #menu .menu_right > li.tcg-nav-cta > a > span:not(.description) {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        margin-left: 5px;
        padding: 0 16px !important;
        border-radius: 3px;
        background: #d69942;
        color: #111;
        font-size: inherit;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .035em;
        text-transform: uppercase;
        box-shadow: 0 3px 10px rgba(214, 153, 66, 0);
        transition: background-color 210ms ease, box-shadow 210ms ease, transform 210ms ease;
    }

    #Top_bar #menu .menu_right > li.tcg-nav-cta > a:hover > span:not(.description),
    #Top_bar #menu .menu_right > li.tcg-nav-cta > a:focus-visible > span:not(.description) {
        background: #e2aa58;
        color: #080808;
        box-shadow: 0 5px 14px rgba(214, 153, 66, .24);
        transform: translateY(-1px);
    }

    #Top_bar #menu .menu_right > li.tcg-nav-cta > a:focus-visible {
        outline: none;
    }

    #Top_bar #menu .menu_right > li.tcg-nav-cta > a:focus-visible > span:not(.description) {
        outline: 2px solid #111;
        outline-offset: 3px;
    }
}

@media only screen and (max-width: 1239px) {
    #Top_bar #menu li.tcg-nav-cta {
        padding: 12px 20px 20px;
    }

    #Top_bar #menu li.tcg-nav-cta > a {
        display: block;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111;
        line-height: 1;
    }

    #Top_bar #menu li.tcg-nav-cta > a > span:not(.description) {
        display: flex;
        min-height: 41px;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 18px;
        border-radius: 3px;
        background: #d69942;
        color: #111;
        font-size: inherit;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        box-sizing: border-box;
        transition: background-color 210ms ease, box-shadow 210ms ease, transform 210ms ease;
    }

    #Top_bar #menu li.tcg-nav-cta > a:hover > span:not(.description),
    #Top_bar #menu li.tcg-nav-cta > a:focus-visible > span:not(.description) {
        background: #e2aa58;
        color: #080808;
        box-shadow: 0 5px 14px rgba(214, 153, 66, .2);
        transform: translateY(-1px);
    }

    #Top_bar #menu li.tcg-nav-cta > a:focus-visible {
        outline: none;
    }

    #Top_bar #menu li.tcg-nav-cta > a:focus-visible > span:not(.description) {
        outline: 2px solid #111;
        outline-offset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #Top_bar #menu li.tcg-nav-cta > a > span:not(.description) {
        transition: none;
    }
}

/* Homepage local hero video: ensure reliable mobile background coverage. */
@media only screen and (max-width: 767px) {
    body.home .mcb-section-3bf447fa7 > .section_video > video {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        object-fit: cover !important;
        object-position: 50% 50%;
    }
}

/* Lift the desktop homepage hero message without changing the hero height. */
@media only screen and (min-width: 768px) {
    body.home .tcg-home-hero__content-column {
        transform: translateY(-40px) !important;
    }
}

/* Homepage secondary video sections: mobile-specific background behaviour. */
@media only screen and (max-width: 767px) {
    body.home .mcb-section-e883cf5c4 > .section_video > video {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        object-fit: cover !important;
        object-position: 50% 50%;
    }

    body.home .mcb-section-d72cdd628 > .section_video > video,
    body.home .mcb-section-efdba453d > .section_video > video {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        object-fit: cover !important;
        object-position: 50% 50%;
    }
}

/* Homepage feature and CTA headings: clean mobile wrapping and spacing. */
@media only screen and (max-width: 767px) {
    body.home .mcb-item-aca42c6e6 h2,
    body.home .mcb-item-c4d920569 h2 {
        font-size: 44px !important;
        line-height: 1.15 !important;
        letter-spacing: normal !important;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }

    body.home .mcb-item-83ab7cc2b p[style*="font-size: 60px"] {
        font-size: clamp(44px, 12.3vw, 48px) !important;
        line-height: 1.15 !important;
        letter-spacing: normal !important;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }
}

/* TCG homepage Don't Blend section — animated gold emphasis */
@keyframes tcg-description-gold-pulse {
    0%, 20% {
        color: #ffffff;
    }
    40%, 60% {
        color: #d69942;
    }
    80%, 100% {
        color: #ffffff;
    }
}

.home #description .column_attr h3 span[style*="font-weight: 800"] {
    color: #ffffff;
    animation: tcg-description-gold-pulse 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .home #description .column_attr h3 span[style*="font-weight: 800"] {
        animation: none;
        color: #d69942;
    }
}


/* ==========================================================
   TCG Homepage Contact / Enquiry Redesign — 2026
   ========================================================== */

body.home .tcg-home-contact {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 58px;
    color: #454545;
    text-align: center;
}

body.home .tcg-home-contact__intro {
    width: min(850px, 100%);
    margin: 0 auto 50px;
}

body.home .tcg-home-contact__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .17em;
}

body.home .tcg-home-contact__eyebrow span {
    display: block;
    width: 24px;
    height: 1px;
    background: #d69942;
}

body.home .tcg-home-contact__title {
    margin: 0 !important;
    color: #202020 !important;
    font-size: clamp(42px, 5vw, 68px) !important;
    font-weight: 800 !important;
    line-height: 1.03 !important;
    letter-spacing: -.035em !important;
}

body.home .tcg-home-contact__title > span {
    color: #d69942;
}

body.home .tcg-home-contact__rule {
    width: 70px;
    height: 2px;
    margin: 27px auto 28px;
    background: #d69942;
}

body.home .tcg-home-contact__lead {
    max-width: 720px;
    margin: 0 auto 13px !important;
    color: #353535;
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 400;
    line-height: 1.5;
}

body.home .tcg-home-contact__copy {
    max-width: 760px;
    margin: 0 auto !important;
    color: #707070;
    font-size: 16px;
    line-height: 1.72;
}


/*
 * Existing WPForms fields/layout deliberately remain untouched.
 * Only the submit button is visually updated.
 */

body.home .tcg-home-contact__form {
    width: min(900px, 100%);
    margin: 0 auto;
}

body.home .tcg-home-contact__form .wpforms-submit-container {
    text-align: center;
}

body.home .tcg-home-contact__form button[type="submit"],
body.home .tcg-home-contact__form .wpforms-submit {
    min-width: 150px;
    padding: 13px 27px !important;
    border: 1px solid #d69942 !important;
    border-radius: 2px !important;
    background: #d69942 !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .025em !important;
    box-shadow: none !important;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}

body.home .tcg-home-contact__form button[type="submit"]:hover,
body.home .tcg-home-contact__form .wpforms-submit:hover {
    background: #c58935 !important;
    border-color: #c58935 !important;
    transform: translateY(-1px);
}

body.home .tcg-home-contact__privacy {
    margin: 11px 0 0 !important;
    color: #999;
    font-size: 12px;
    line-height: 1.5;
}

body.home .tcg-home-contact__privacy::before {
    content: "✓";
    margin-right: 6px;
    color: #d69942;
    font-weight: 800;
}


/* Credibility strip */

body.home .tcg-home-contact__credentials {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1000px, 100%);
    margin: 72px auto 0;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

body.home .tcg-home-contact__credential {
    padding: 30px 16px 27px;
}

body.home .tcg-home-contact__credential + .tcg-home-contact__credential {
    border-left: 1px solid #e2e2e2;
}

body.home .tcg-home-contact__credential strong,
body.home .tcg-home-contact__credential span {
    display: block;
}

body.home .tcg-home-contact__credential strong {
    color: #242424;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .02em;
}

body.home .tcg-home-contact__credential span {
    margin-top: 4px;
    color: #d69942;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .13em;
}


/* Quiet, natural-language SEO/supporting copy */

body.home .tcg-home-contact__seo {
    width: min(850px, 100%);
    margin: 34px auto 0 !important;
    color: #888;
    font-size: 14px;
    line-height: 1.75;
}


/* Tablet */

@media only screen and (max-width: 800px) {

    body.home .tcg-home-contact {
        width: calc(100% - 34px);
        padding: 70px 0 52px;
    }

    body.home .tcg-home-contact__credentials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.home .tcg-home-contact__credential:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e2e2e2;
    }

    body.home .tcg-home-contact__credential:nth-child(4) {
        border-top: 1px solid #e2e2e2;
    }
}


/* Mobile */

@media only screen and (max-width: 520px) {

    body.home .tcg-home-contact {
        width: calc(100% - 28px);
        padding: 56px 0 44px;
    }

    body.home .tcg-home-contact__intro {
        margin-bottom: 40px;
    }

    body.home .tcg-home-contact__eyebrow {
        font-size: 10px;
    }

    body.home .tcg-home-contact__title {
        font-size: clamp(35px, 10.8vw, 46px) !important;
        line-height: 1.02 !important;
    }

    body.home .tcg-home-contact__lead {
        font-size: 18px;
    }

    body.home .tcg-home-contact__copy {
        font-size: 15px;
    }

    body.home .tcg-home-contact__credentials {
        margin-top: 54px;
    }

    body.home .tcg-home-contact__credential {
        padding: 23px 8px 21px;
    }

    body.home .tcg-home-contact__credential strong {
        font-size: 13px;
    }

    body.home .tcg-home-contact__credential span {
        font-size: 10px;
    }

    body.home .tcg-home-contact__seo {
        margin-top: 28px !important;
        font-size: 13px;
        line-height: 1.7;
    }
}



/* =========================================================
   Homepage custom bottom section — true black + service pills
   ========================================================= */

/*
 * Homepage builder section 6841d09f6 (pinned by ID, 13 Oct 2026; was nth-of-type(10)):
 * Recent Projects / Popular Services / custom footer-style block
 */
body.home .mcb-section-6841d09f6 {
    background-color: #000 !important;
}

/*
 * Make nested wrappers transparent so no charcoal/grey BeTheme
 * background shows through.
 */
body.home .mcb-section-6841d09f6 .section_wrapper,
body.home .mcb-section-6841d09f6 .mcb-section-inner,
body.home .mcb-section-6841d09f6 .mcb-wrap,
body.home .mcb-section-6841d09f6 .mcb-wrap-inner,
body.home .mcb-section-6841d09f6 .mcb-item,
body.home .mcb-section-6841d09f6 .mcb-column-inner {
    background-color: transparent !important;
}


/* Popular Services — visible resting outline */
body.home .popular-services a,
body.home .service-buttons .service-button {
    border: 1px solid rgba(255,255,255,.68) !important;
    background-color: transparent !important;
}

/* Existing gold hover behaviour remains */
body.home .popular-services a:hover,
body.home .popular-services a:focus {
    background-color: #ffb536 !important;
    color: #111 !important;
    border-color: #ffb536 !important;
}

body.home .service-buttons .service-button:hover,
body.home .service-buttons .service-button:focus {
    background-color: #ffad2f !important;
    color: #111 !important;
    border-color: #ffad2f !important;
    box-shadow: 0 0 12px 2px rgba(255,173,47,.35) !important;
}



/* =========================================================
   Homepage custom bottom block
   FAQ -> Recent Projects -> Popular Services
   ========================================================= */

/*
 * Section 9 has its own #000 background in Muffin Builder.
 * These rules ensure its inner wrappers cannot reintroduce
 * BeTheme's default charcoal background.
 */
body.home .popular-services,
body.home .service-buttons {
    background: transparent !important;
}


/* Resting service pills */
body.home .service-buttons .service-button {
    border: 1px solid rgba(255,255,255,.68) !important;
    background-color: transparent !important;
    color: #fff !important;
}


/* Preserve existing gold hover */
body.home .service-buttons .service-button:hover,
body.home .service-buttons .service-button:focus {
    background-color: #ffad2f !important;
    border-color: #ffad2f !important;
    color: #111 !important;
    box-shadow: 0 0 12px 2px rgba(255,173,47,.35) !important;
}



/* =========================================================
   Homepage custom bottom section — final background colour
   ========================================================= */

/*
 * Custom homepage section containing:
 * Recent Projects / Popular Services.
 *
 * Overrides the earlier pure-black experiment.
 */
body.home .service-buttons,
body.home .popular-services {
    background-color: transparent !important;
}

/*
 * The section immediately following the FAQ is the custom
 * homepage bottom block. Match it to the FAQ's #050505.
 */
body.home .tcg-faq-section + .section {
    background-color: #050505 !important;
    background: #050505 !important;
}

/*
 * Prevent BeTheme wrappers inside that section from showing
 * their own darker/default backgrounds.
 */
body.home .tcg-faq-section + .section > .section_wrapper,
body.home .tcg-faq-section + .section .mcb-section-inner,
body.home .tcg-faq-section + .section .mcb-wrap,
body.home .tcg-faq-section + .section .mcb-wrap-inner,
body.home .tcg-faq-section + .section .mcb-item,
body.home .tcg-faq-section + .section .mcb-column-inner {
    background-color: transparent !important;
    background-image: none !important;
}

/* TCG Visual Marketing — lightweight WebM service loops */
.tcg-vm__media .tcg-vm__loop {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .tcg-vm__media .tcg-vm__loop {
        animation: none;
    }
}



/* =========================================================
   Homepage contact → FAQ spacing
   Remove dead space beneath SEO/supporting paragraph
   ========================================================= */

body.home .tcg-home-contact {
    padding-bottom: 0 !important;
}

@media only screen and (max-width: 800px) {
    body.home .tcg-home-contact {
        padding-bottom: 0 !important;
    }
}

@media only screen and (max-width: 520px) {
    body.home .tcg-home-contact {
        padding-bottom: 0 !important;
    }
}

/* Ensure final SEO paragraph itself adds no trailing space */
body.home .tcg-home-contact__seo {
    margin-bottom: 0 !important;
}


/* TCG NATIVE PROMO PLAYER START */

.tcg-native-promo {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    line-height: 0;
    cursor: pointer;
}

.tcg-native-promo__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
}

/*
 * Nothing appears before the visitor deliberately activates sound.
 */
.tcg-native-promo__volume-wrap {
    position: absolute;
    right: 18px;
    bottom: 13px;
    z-index: 4;

    display: flex;
    align-items: center;

    width: 105px;
    height: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

/*
 * The slider only becomes available AFTER the first click,
 * and only while JS says controls should be visible.
 */
.tcg-native-promo.tcg-native-promo--activated
.tcg-native-promo__volume-wrap.tcg-native-promo__volume-wrap--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tcg-native-promo__volume {
    width: 100%;
    height: 4px;
    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    outline: none;
    cursor: pointer;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.96) 100%
        );

    border-radius: 10px;
}

/* Chrome / Edge / Safari */
.tcg-native-promo__volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.45);
}

.tcg-native-promo__volume::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 12px;
    height: 12px;
    margin-top: -4px;

    border: 0;
    border-radius: 50%;
    background: #fff;

    box-shadow: 0 1px 5px rgba(0,0,0,.45);
}

/* Firefox */
.tcg-native-promo__volume::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.45);
}

.tcg-native-promo__volume::-moz-range-progress {
    height: 4px;
    border-radius: 10px;
    background: #fff;
}

.tcg-native-promo__volume::-moz-range-thumb {
    width: 12px;
    height: 12px;

    border: 0;
    border-radius: 50%;
    background: #fff;

    box-shadow: 0 1px 5px rgba(0,0,0,.45);
}

@media (max-width: 767px) {
    .tcg-native-promo__volume-wrap {
        right: 12px;
        bottom: 10px;
        width: 90px;
    }
}

/* TCG NATIVE PROMO PLAYER END */


/* =========================================================
   TCG Native Promo — compact controls bar
   ========================================================= */

.tcg-native-promo__controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;

    min-height: 38px;
    padding: 7px 10px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.18),
            rgba(0,0,0,.62)
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(4px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.tcg-native-promo.tcg-native-promo--activated
.tcg-native-promo__controls.tcg-native-promo__controls--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.tcg-native-promo__volume-wrap {
    position: static;
    width: 120px;
    height: 20px;

    display: flex;
    align-items: center;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition: none;
}

.tcg-native-promo__fullscreen {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background: rgba(255,255,255,.08);
    color: #fff;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}

.tcg-native-promo__fullscreen:hover,
.tcg-native-promo__fullscreen:focus-visible {
    background: rgba(255,255,255,.18);
}

.tcg-native-promo__fullscreen:active {
    transform: scale(.94);
}

.tcg-native-promo__fullscreen svg {
    display: block;
    width: 17px;
    height: 17px;
}

.tcg-native-promo__fullscreen path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {

    .tcg-native-promo__controls {
        left: 9px;
        right: 9px;
        bottom: 8px;

        min-height: 34px;
        padding: 5px 8px;
        gap: 10px;
    }

    .tcg-native-promo__volume-wrap {
        width: 92px;
    }

    .tcg-native-promo__fullscreen {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   TCG Native Promo — compact controls bar
   ========================================================= */

.tcg-native-promo__controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;

    min-height: 38px;
    padding: 7px 10px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.18),
            rgba(0,0,0,.62)
        );

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(4px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.tcg-native-promo.tcg-native-promo--activated
.tcg-native-promo__controls.tcg-native-promo__controls--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.tcg-native-promo__volume-wrap {
    position: static;
    width: 120px;
    height: 20px;

    display: flex;
    align-items: center;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition: none;
}

.tcg-native-promo__fullscreen {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background: rgba(255,255,255,.08);
    color: #fff;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}

.tcg-native-promo__fullscreen:hover,
.tcg-native-promo__fullscreen:focus-visible {
    background: rgba(255,255,255,.18);
}

.tcg-native-promo__fullscreen:active {
    transform: scale(.94);
}

.tcg-native-promo__fullscreen svg {
    display: block;
    width: 17px;
    height: 17px;
}

.tcg-native-promo__fullscreen path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {

    .tcg-native-promo__controls {
        left: 9px;
        right: 9px;
        bottom: 8px;

        min-height: 34px;
        padding: 5px 8px;
        gap: 10px;
    }

    .tcg-native-promo__volume-wrap {
        width: 92px;
    }

    .tcg-native-promo__fullscreen {
        width: 28px;
        height: 28px;
    }
}


/* TCG PRESTO-STYLE PROMO CONTROLS START */

.tcg-native-promo {
    position: relative;
    overflow: hidden;
}

/* hide any earlier bulky controls styling */
.tcg-native-promo__controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    height: 40px !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 10px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            to right,
            rgba(230,175,0,.80),
            rgba(230,175,0,.92)
        ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;

    transition:
        opacity .18s ease,
        visibility .18s ease !important;
}

.tcg-native-promo.tcg-native-promo--activated
.tcg-native-promo__controls.tcg-native-promo__controls--visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* volume area */
.tcg-native-promo__volume-wrap {
    position: static !important;

    display: flex !important;
    align-items: center !important;

    width: 92px !important;
    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* thin Presto-style volume slider */
.tcg-native-promo__volume {
    display: block !important;

    width: 92px !important;
    height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;

    cursor: pointer !important;
}

.tcg-native-promo__volume::-webkit-slider-runnable-track {
    height: 2px !important;
    background: rgba(255,255,255,.70) !important;
    border-radius: 999px !important;
}

.tcg-native-promo__volume::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 9px !important;
    height: 9px !important;

    margin-top: -3.5px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
}

.tcg-native-promo__volume::-moz-range-track {
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.70) !important;
}

.tcg-native-promo__volume::-moz-range-progress {
    height: 2px !important;
    border-radius: 999px !important;
    background: #fff !important;
}

.tcg-native-promo__volume::-moz-range-thumb {
    width: 9px !important;
    height: 9px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #fff !important;
}

/* fullscreen button */
.tcg-native-promo__fullscreen {
    flex: 0 0 auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 26px !important;
    height: 26px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #fff !important;

    cursor: pointer !important;

    opacity: .95 !important;
}

.tcg-native-promo__fullscreen:hover,
.tcg-native-promo__fullscreen:focus-visible {
    background: transparent !important;
    opacity: 1 !important;
}

.tcg-native-promo__fullscreen svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

.tcg-native-promo__fullscreen path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

@media (max-width: 767px) {

    .tcg-native-promo__controls {
        height: 36px !important;
        padding: 0 8px !important;
        gap: 7px !important;
    }

    .tcg-native-promo__volume-wrap,
    .tcg-native-promo__volume {
        width: 76px !important;
    }

    .tcg-native-promo__fullscreen {
        width: 24px !important;
        height: 24px !important;
    }
}

/* TCG PRESTO-STYLE PROMO CONTROLS END */


/* =========================================================
   TCG Promo — force volume slider visible in bottom controls
   ========================================================= */

body.home .tcg-native-promo__controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Completely override the old hidden volume-wrap behaviour */
body.home .tcg-native-promo__controls .tcg-native-promo__volume-wrap {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    flex: 0 0 100px !important;
    align-items: center !important;

    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 26px !important;

    margin: 0 3px 0 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: none !important;
    overflow: visible !important;
    z-index: 20 !important;
}

/* Actual range element */
body.home .tcg-native-promo__controls input.tcg-native-promo__volume {
    position: relative !important;

    display: block !important;
    flex: 0 0 100px !important;

    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;

    cursor: pointer !important;
    z-index: 21 !important;
}

/* Chrome / Edge / Safari */
body.home .tcg-native-promo__volume::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 3px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.72) !important;
}

body.home .tcg-native-promo__volume::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;

    width: 10px !important;
    height: 10px !important;

    margin-top: -3.5px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
}

/* Firefox */
body.home .tcg-native-promo__volume::-moz-range-track {
    width: 100% !important;
    height: 3px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.72) !important;
}

body.home .tcg-native-promo__volume::-moz-range-progress {
    height: 3px !important;
    border-radius: 999px !important;
    background: #fff !important;
}

body.home .tcg-native-promo__volume::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
}

@media (max-width: 767px) {

    body.home .tcg-native-promo__controls .tcg-native-promo__volume-wrap,
    body.home .tcg-native-promo__controls input.tcg-native-promo__volume {
        flex-basis: 76px !important;
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }

}


/* =========================================================
   TCG CLIENT SLIDER — AVIF / CSS VERSION
   ========================================================= */

body.home .tcg-client-slider {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

body.home .tcg-client-slider__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;

    /*
     * The source slides are wide and shallow.
     * This maintains roughly the same presentation as the old video.
     */
    aspect-ratio: 1100 / 214;

    background: #fff;
}

body.home .tcg-client-slider__track {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 400%;

    will-change: transform, filter;

    animation:
        tcg-client-slider-motion
        14s
        cubic-bezier(.65,0,.35,1)
        infinite;
}

body.home .tcg-client-slider__slide {
    flex: 0 0 25%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    overflow: hidden;
}

body.home .tcg-client-slider__slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    margin: 0;
    padding: 0;

    border: 0;
}


/*
 * Timeline:
 *
 * 0–22%    Slide 1 held
 * 22–28%   transition upward
 *
 * 28–50%   Slide 2 held
 * 50–56%   transition upward
 *
 * 56–78%   Slide 3 held
 * 78–84%   transition upward to duplicate Slide 1
 *
 * 84–100%  duplicate Slide 1 held
 *
 * At 100% animation restarts at original Slide 1.
 * Since both frames show the same image, reset is invisible.
 */
@keyframes tcg-client-slider-motion {

    /* Slide 1 — hold */
    0%,
    25% {
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    /* Slide 1 -> 2 */
    28.5% {
        filter: blur(2px);
    }

    33%,
    58% {
        transform: translate3d(0, -25%, 0);
        filter: blur(0);
    }

    /* Slide 2 -> 3 */
    61.5% {
        filter: blur(2px);
    }

    66%,
    91% {
        transform: translate3d(0, -50%, 0);
        filter: blur(0);
    }

    /* Slide 3 -> duplicate Slide 1 */
    94.5% {
        filter: blur(2px);
    }

    99.5%,
    100% {
        transform: translate3d(0, -75%, 0);
        filter: blur(0);
    }
}


/*
 * Slight sharpening behaviour after transitions.
 * Keeps logos crisp while stationary.
 */
body.home .tcg-client-slider__slide img {
    transform: translateZ(0);
    backface-visibility: hidden;
}


/*
 * Respect accessibility preference without removing content.
 */
@media (prefers-reduced-motion: reduce) {

    body.home .tcg-client-slider__track {
        animation: none !important;
        transform: translate3d(0, 0, 0) !important;
        filter: none !important;
    }
}


/* Mobile */
@media (max-width: 767px) {

    body.home .tcg-client-slider__viewport {
        aspect-ratio: 1100 / 214;
    }

}

/* END TCG CLIENT SLIDER */


/* =========================================================
   TCG NATIVE PROMO — FULLSCREEN FIT FIX
   ========================================================= */

/*
 * When our custom player wrapper enters fullscreen,
 * turn it into a true full-screen black stage.
 */
body.home .tcg-native-promo:fullscreen {
    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/*
 * Chrome / Safari fallback.
 */
body.home .tcg-native-promo:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/*
 * Critical bit:
 *
 * Embedded player uses object-fit: cover.
 * Fullscreen must use CONTAIN so nothing gets cropped.
 */
body.home .tcg-native-promo:fullscreen
.tcg-native-promo__video {

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100vw !important;
    max-height: 100vh !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;
}


body.home .tcg-native-promo:-webkit-full-screen
.tcg-native-promo__video {

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100vw !important;
    max-height: 100vh !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #000 !important;
}


/*
 * Keep our custom controls above the video
 * and attached to the actual bottom of the screen.
 */
body.home .tcg-native-promo:fullscreen
.tcg-native-promo__controls {

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    z-index: 999999 !important;
}


body.home .tcg-native-promo:-webkit-full-screen
.tcg-native-promo__controls {

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    z-index: 999999 !important;
}

/* END TCG NATIVE PROMO — FULLSCREEN FIT FIX */


/* =========================================================
   TCG RECENT PROJECTS — LIGHTWEIGHT NATIVE VIDEO
   ========================================================= */

body.home .recent-project-video .tcg-project-preview {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    padding: 0;
    border: 0;
    background: #000;
}

/* END TCG RECENT PROJECTS — LIGHTWEIGHT NATIVE VIDEO */

/* =========================================================
   HOMEPAGE MOBILE HERO - COMPACT FINAL
   ========================================================= */
@media only screen and (max-width: 767px) {

    /* Hide desktop social strip on mobile */
    #Header .tcg-header-social {
        display: none !important;
    }

    /* Shorter hero */
    body.home .tcg-home-hero {
        min-height: 560px !important;
        height: 560px !important;
    }

    /* Remove legacy spacer items */
    body.home .tcg-home-hero .tcg-home-hero__spacer {
        display: none !important;
    }

    /* Centre content without huge empty padding */
    body.home .tcg-home-hero > .section_wrapper {
        display: flex !important;
        min-height: 560px !important;
        height: 560px !important;
        padding-top: 35px !important;
        padding-bottom: 35px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.home .tcg-home-hero > .section_wrapper > .wrap {
        width: 100% !important;
    }

    body.home .tcg-home-hero__content-column {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Don't reserve unnecessary blank space between rotating slides */
    body.home .tcg-home-hero #rotating-header {
        min-height: 0 !important;
        margin: 0 auto 18px !important;
    }

    body.home .tcg-home-hero #rotating-subheading {
        min-height: 0 !important;
        margin: 0 auto !important;
    }

    body.home .tcg-home-hero .enquire-button {
        margin-top: 24px !important;
    }
}

/* WPForms base layout fallback (20 Oct 2026). WPForms' own base stylesheet is not reaching the front end,
   so its spam-trap field was visible and inputs collapsed to browser-default width. Zero-specificity
   :where() rules supply the basics; each page's own form styling still overrides them. */
.wpforms-container .wpforms-field-hp,.wpforms-container .wpforms-conditional-hide,.wpforms-container .wpforms-hidden{display:none!important}
:where(.wpforms-container) :where(.wpforms-field){position:relative}
:where(.wpforms-container) :where(.wpforms-field-label){display:block}
:where(.wpforms-container) :where(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=password],select,textarea){display:block;width:100%;max-width:100%;box-sizing:border-box}
.wpforms-container .wpforms-field input.wpforms-field-large,.wpforms-container .wpforms-field select.wpforms-field-large,.wpforms-container .wpforms-field textarea.wpforms-field-large,.wpforms-container .wpforms-field-row input{width:100%;max-width:100%}
.wpforms-container .wpforms-field input.wpforms-field-medium,.wpforms-container .wpforms-field select.wpforms-field-medium{width:100%;max-width:60%}
.wpforms-container .wpforms-field textarea{width:100%;max-width:100%}
.wpforms-container .wpforms-field textarea.wpforms-field-small{min-height:70px}.wpforms-container .wpforms-field textarea.wpforms-field-medium{min-height:120px}.wpforms-container .wpforms-field textarea.wpforms-field-large{min-height:220px}
.wpforms-container .wpforms-field input.wpforms-field-small,.wpforms-container .wpforms-field select.wpforms-field-small{width:100%;max-width:25%}
@media(max-width:600px){.wpforms-container .wpforms-field .wpforms-field-medium,.wpforms-container .wpforms-field .wpforms-field-small{max-width:100%}}
:where(.wpforms-container) :where(.wpforms-field-row){display:flex;flex-wrap:wrap;gap:12px 16px}
:where(.wpforms-container) :where(.wpforms-field-row-block){flex:1 1 180px;min-width:0;float:none;width:auto;padding:0}
:where(.wpforms-container) :where(.wpforms-field-sublabel){display:block;margin-top:4px;font-size:12px;opacity:.75}
:where(.wpforms-container) :where(.wpforms-field-description){display:block;margin-top:4px;font-size:13px;opacity:.8}