/**
 * Theme Name: Callix Child
 * Description: This is a child theme of Callix, generated by Merlin WP.
 * Author: template_path
 * Template: callix
 * Version: 2.4
 */

/* ==========================================================
   KINETIC FILM
   CHILD THEME BRAND OVERRIDES
   ========================================================== */


/* ==========================================================
   1. BRAND COLOURS

   Kinetic uses one primary dark background throughout
   the site: #171F2D.
   ========================================================== */

:root {

    /* Main brand background */
    --kf-dark: #171F2D;

    /*
     * Legacy aliases retained so existing Kinetic classes
     * continue working, but all resolve to the same colour.
     */
    --kf-black: #171F2D;
    --kf-charcoal: #171F2D;
    --kf-navy: #171F2D;

    /* Brand accent */
    --kf-gold: #C8B98A;

    /* Text */
    --kf-cream: #F4F2ED;
    --kf-white: #FFFFFF;
    --kf-light-text: #B8BEC7;
    --kf-slate: #4B5563;
}


/* ==========================================================
   2. DARK KINETIC SECTIONS

   Elementor / Callix Section Class:
   kf-dark-section
   ========================================================== */

.kf-dark-section {
    background-color: var(--kf-dark) !important;
}

.kf-dark-section h1,
.kf-dark-section h2,
.kf-dark-section h3,
.kf-dark-section h4,
.kf-dark-section h5,
.kf-dark-section h6,
.kf-dark-section .elementor-heading-title {
    color: var(--kf-cream) !important;
}

.kf-dark-section p,
.kf-dark-section li,
.kf-dark-section .elementor-widget-text-editor,
.kf-dark-section .elementor-widget-text-editor p {
    color: var(--kf-light-text) !important;
}

.kf-dark-section a {
    color: var(--kf-gold);
}

.kf-dark-section a:hover {
    color: var(--kf-cream);
}


/* ==========================================================
   3. LIGHT KINETIC SECTIONS

   Elementor / Callix Section Class:
   kf-light-section
   ========================================================== */

.kf-light-section {
    background-color: var(--kf-cream) !important;
}

.kf-light-section h1,
.kf-light-section h2,
.kf-light-section h3,
.kf-light-section h4,
.kf-light-section h5,
.kf-light-section h6,
.kf-light-section .elementor-heading-title {
    color: var(--kf-dark) !important;
}

.kf-light-section p,
.kf-light-section li,
.kf-light-section .elementor-widget-text-editor,
.kf-light-section .elementor-widget-text-editor p {
    color: var(--kf-slate) !important;
}

.kf-light-section a {
    color: var(--kf-dark);
}

.kf-light-section a:hover {
    color: var(--kf-gold);
}


/* ==========================================================
   4. KINETIC CINEMATIC SECTIONS

   Existing Section Class:
   kf-black-section

   Retained for compatibility, but now uses the same
   #171F2D brand background.
   ========================================================== */

.kf-black-section {
    background-color: var(--kf-dark) !important;
}

.kf-black-section h1,
.kf-black-section h2,
.kf-black-section h3,
.kf-black-section h4,
.kf-black-section h5,
.kf-black-section h6,
.kf-black-section .elementor-heading-title {
    color: var(--kf-cream) !important;
}

.kf-black-section p,
.kf-black-section li,
.kf-black-section .elementor-widget-text-editor,
.kf-black-section .elementor-widget-text-editor p {
    color: var(--kf-light-text) !important;
}


/* ==========================================================
   5. TEXT UTILITY CLASSES
   ========================================================== */

/* Gold text */
.kf-gold,
.kf-gold h1,
.kf-gold h2,
.kf-gold h3,
.kf-gold h4,
.kf-gold h5,
.kf-gold h6,
.kf-gold p,
.kf-gold span,
.kf-gold .elementor-heading-title {
    color: var(--kf-gold) !important;
}

/* Cream text */
.kf-light-text,
.kf-light-text h1,
.kf-light-text h2,
.kf-light-text h3,
.kf-light-text h4,
.kf-light-text h5,
.kf-light-text h6,
.kf-light-text p,
.kf-light-text span,
.kf-light-text .elementor-heading-title {
    color: var(--kf-cream) !important;
}


/* ==========================================================
   6. PRIMARY BUTTON

   Elementor CSS Class:
   kf-primary-button
   ========================================================== */

.kf-primary-button a,
.kf-primary-button .elementor-button {
    background: var(--kf-gold) !important;
    color: var(--kf-dark) !important;
    border-color: var(--kf-gold) !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.kf-primary-button a:hover,
.kf-primary-button .elementor-button:hover {
    background: var(--kf-cream) !important;
    color: var(--kf-dark) !important;
    border-color: var(--kf-cream) !important;
}


/* ==========================================================
   7. OUTLINE BUTTON

   Elementor CSS Class:
   kf-outline-button
   ========================================================== */

.kf-outline-button a,
.kf-outline-button .elementor-button {
    background: transparent !important;
    color: var(--kf-cream) !important;
    border-color: var(--kf-gold) !important;
}

.kf-outline-button a:hover,
.kf-outline-button .elementor-button:hover {
    background: var(--kf-gold) !important;
    color: var(--kf-dark) !important;
    border-color: var(--kf-gold) !important;
}


/* ==========================================================
   8. GOLD ACCENT BORDER

   Elementor CSS Class:
   kf-gold-border
   ========================================================== */

.kf-gold-border {
    border-color: var(--kf-gold) !important;
}


/* ==========================================================
   9. DARK CARDS

   Elementor CSS Class:
   kf-dark-card
   ========================================================== */

.kf-dark-card {
    background-color: rgba(23, 31, 45, 0.35);
    border-color: rgba(200, 185, 138, 0.35) !important;
}

.kf-dark-card h1,
.kf-dark-card h2,
.kf-dark-card h3,
.kf-dark-card h4,
.kf-dark-card .elementor-heading-title {
    color: var(--kf-cream) !important;
}

.kf-dark-card p {
    color: var(--kf-light-text) !important;
}


/* ==========================================================
   10. ICON COLOURS

   Elementor CSS Class:
   kf-gold-icon
   ========================================================== */

.kf-gold-icon i,
.kf-gold-icon svg {
    color: var(--kf-gold) !important;
    fill: var(--kf-gold) !important;
}


/* ==========================================================
   11. GENERIC FORM STYLING

   Elementor CSS Class on containing section:
   kf-form
   ========================================================== */

.kf-form input[type="text"],
.kf-form input[type="email"],
.kf-form input[type="tel"],
.kf-form input[type="url"],
.kf-form input[type="number"],
.kf-form textarea,
.kf-form select {
    background-color: var(--kf-cream) !important;
    color: var(--kf-dark) !important;
    border-color: rgba(200, 185, 138, 0.60) !important;
}

.kf-form input:focus,
.kf-form textarea:focus,
.kf-form select:focus {
    border-color: var(--kf-gold) !important;
    outline-color: var(--kf-gold);
}


/* ==========================================================
   12. TEXT SELECTION
   ========================================================== */

::selection {
    background: var(--kf-gold);
    color: var(--kf-dark);
}


/* ==========================================================
   13. KINETIC UTILITY CLASSES
   ========================================================== */

.kf-bg-navy,
.kf-bg-black {
    background-color: var(--kf-dark) !important;
}

.kf-bg-cream {
    background-color: var(--kf-cream) !important;
}

.kf-text-gold {
    color: var(--kf-gold) !important;
}

.kf-text-cream {
    color: var(--kf-cream) !important;
}

.kf-text-muted {
    color: var(--kf-light-text) !important;
}


/* ==========================================================
   14. KINETIC FILM HERO

   Callix Section Class:
   kf-hero
   ========================================================== */

.kf-hero .sub-title,
.kf-hero .subtitle,
.kf-hero .sub_title,
.kf-hero .title-box .title,
.kf-hero .content-box .title,
.kf-hero .services-title,
.kf-hero.banner-one .content-box .services-title,
.kf-hero .banner-one .content-box .services-title,
.kf-hero .content-box .services-title {
    color: var(--kf-gold) !important;
}

.kf-hero h1,
.kf-hero h2,
.kf-hero .elementor-heading-title {
    color: var(--kf-cream) !important;
}


/* ==========================================================
   15. ABOUT SECTION
   ========================================================== */

/* Supporting paragraph */
.kf-dark-section .sec-title .lower-text {
    color: rgba(244, 242, 237, 0.78) !important;
}

/* Discover Kinetic button */
.kf-dark-section .btn-style-one .btn-title {
    color: var(--kf-cream) !important;
    border-color: var(--kf-gold) !important;
}

/* Remove unwanted Callix video/play icon */
.kf-dark-section .flaticon-ui {
    display: none !important;
}


/* ==========================================================
   16. KINETIC PORTFOLIO
   ========================================================== */

/* Remove unused empty second button */
.kinetic-portfolio a:has(.btn-title:empty) {
    display: none !important;
}


/* ==========================================================
   17. WHY KINETIC SECTION
   ========================================================== */

/* Feature headings */
.why-choose-section .text-block .title {
    color: var(--kf-cream) !important;
}

/* Supporting body copy */
.why-choose-section .text-block .text {
    color: rgba(244, 242, 237, 0.82) !important;
}


/* ==========================================================
   18. WHY KINETIC ACCENTS
   ========================================================== */

/* Decorative triangle */
.why-choose-section .image-column .image:nth-child(2):before {
    border-left-color: var(--kf-gold) !important;
    border-bottom-color: var(--kf-gold) !important;
}

/* First feature vertical line */
.why-choose-section .text-block .title:before {
    border-left-color: var(--kf-gold) !important;
}

/* Second feature gold fade */
.why-choose-section .text-block:nth-child(2) .title:before {
    border-left-color: var(--kf-gold) !important;

    background: linear-gradient(
        to right,
        rgba(200, 185, 138, 0.20),
        rgba(23, 31, 45, 0)
    ) !important;
}


/* ==========================================================
   19. INDUSTRY / COMPANY LOGOS

   Static, non-clickable logo treatment.
   ========================================================== */

/* Disable anchor interaction */
.clients-section .logos-col .logo-block figure.image a[href="#"] {
    pointer-events: none !important;
    cursor: default !important;
}

/* Remove Callix hover overlay */
.clients-section .logos-col .logo-block .overlay_image {
    display: none !important;
}

/* Keep logos visually static */
.clients-section .logos-col .logo-block,
.clients-section .logos-col .logo-block figure.image,
.clients-section .logos-col .logo-block figure.image img {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1 !important;
    transform: none !important;
}


/* ==========================================================
   20. FINAL CTA SECTION

   Callix Section Class:
   kf-black-section
   ========================================================== */

/* Replace Callix purple gradient */
.call-to-section.kf-black-section {
    background: var(--kf-dark) !important;
    color: var(--kf-cream) !important;
}

/* Keep geometric pattern subtle */
.call-to-section.kf-black-section:before {
    opacity: 0.10 !important;
}

/* Eyebrow */
.call-to-section.kf-black-section .content .sub-title {
    color: var(--kf-gold) !important;
}

/* Eyebrow lines */
.call-to-section.kf-black-section .content .sub-title:before,
.call-to-section.kf-black-section .content .sub-title:after {
    border-bottom-color: var(--kf-gold) !important;
}

/* Main headline */
.call-to-section.kf-black-section .content h2 {
    color: var(--kf-cream) !important;
}

/* Primary Reach Out button */
.call-to-section.kf-black-section .link-box .btn-style-one .btn-title {
    background: var(--kf-gold) !important;
    color: var(--kf-dark) !important;
    border-color: var(--kf-gold) !important;
}

/* Remove unused second CTA button */
.call-to-section.kf-black-section a:has(.btn-title:empty) {
    display: none !important;
}

/* Remove floating Callix dots */
.call-to-section.kf-black-section .bubble-dotted {
    display: none !important;
}


/* ==========================================================
   21. MINIMAL FOOTER

   Elementor CSS Class:
   kf-minimal-footer
   ========================================================== */

.kf-minimal-footer {
    background: var(--kf-dark) !important;
    padding: 24px 30px !important;
    border-top: 1px solid rgba(200, 185, 138, 0.30) !important;
}

/* Force Elementor footer content to centre */
.kf-minimal-footer .elementor-container,
.kf-minimal-footer .elementor-column,
.kf-minimal-footer .elementor-widget-wrap,
.kf-minimal-footer .elementor-widget,
.kf-minimal-footer .elementor-widget-container,
.kf-minimal-footer .elementor-widget-text-editor {
    text-align: center !important;
    width: 100% !important;
}

/* Copyright text */
.kf-minimal-footer,
.kf-minimal-footer p,
.kf-minimal-footer span,
.kf-minimal-footer .elementor-widget-text-editor {
    color: var(--kf-cream) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.kf-minimal-footer p {
    margin: 0 !important;
}

/* Privacy link */
.kf-minimal-footer a {
    color: var(--kf-gold) !important;
    text-decoration: none !important;
}

.kf-minimal-footer a:hover {
    color: var(--kf-cream) !important;
}


/* ==========================================================
   22. CONTACT FORM 7
   ========================================================== */

.kf-contact-form {
    width: 100%;
}

/* Two-column rows */
.kf-contact-form .kf-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.kf-contact-form .kf-form-half {
    flex: 1 1 50%;
    min-width: 0;
}

.kf-contact-form .kf-form-group {
    margin-bottom: 20px;
}

/* Labels */
.kf-contact-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--kf-gold) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Inputs, dropdown and message */
.kf-contact-form input[type="text"],
.kf-contact-form input[type="email"],
.kf-contact-form input[type="tel"],
.kf-contact-form select,
.kf-contact-form textarea {
    width: 100% !important;
    background: var(--kf-cream) !important;
    color: var(--kf-dark) !important;
    border: 1px solid rgba(200, 185, 138, 0.55) !important;
    border-radius: 0 !important;
    padding: 16px 18px !important;
    font-family: 'Archivo', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

/* Standard field heights */
.kf-contact-form input[type="text"],
.kf-contact-form input[type="email"],
.kf-contact-form input[type="tel"],
.kf-contact-form select {
    min-height: 58px;
}

/* Long-form message */
.kf-contact-form textarea {
    min-height: 190px;
    resize: vertical;
}

/* Placeholder text */
.kf-contact-form input::placeholder,
.kf-contact-form textarea::placeholder {
    color: #6B7280 !important;
    opacity: 1;
}

/* Focus state */
.kf-contact-form input:focus,
.kf-contact-form select:focus,
.kf-contact-form textarea:focus {
    border-color: var(--kf-gold) !important;
    outline: 2px solid rgba(200, 185, 138, 0.20) !important;
    outline-offset: 0;
}

.kf-contact-form select {
    cursor: pointer;
}

/* Submit button */
.kf-contact-form input[type="submit"] {
    display: inline-block;
    min-width: 180px;
    background: var(--kf-gold) !important;
    color: var(--kf-dark) !important;
    border: 2px solid var(--kf-gold) !important;
    border-radius: 0 !important;
    padding: 15px 32px !important;
    font-family: 'Archivo', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.kf-contact-form input[type="submit"]:hover {
    background: var(--kf-cream) !important;
    border-color: var(--kf-cream) !important;
    color: var(--kf-dark) !important;
}

/* CF7 validation */
.kf-contact-form .wpcf7-not-valid-tip {
    color: var(--kf-cream) !important;
    font-size: 13px;
    margin-top: 6px;
}

.wpcf7 form .wpcf7-response-output {
    color: var(--kf-cream) !important;
    border-color: var(--kf-gold) !important;
}


/* ==========================================================
   23. HEADER
   ========================================================== */

.main-header.header-style-two,
.main-header.header-style-two .header-upper {
    background: var(--kf-dark) !important;
}

.main-header.header-style-two .theme-btn,
.main-header.header-style-two .btn-style-one .btn-title {
    color: var(--kf-cream) !important;
    border-color: var(--kf-gold) !important;
}


/* ==========================================================
   24. CALLIX PRELOADER / HEADER POSITION
   ========================================================== */

/* Disable broken Callix page preloader */
.preloader {
    display: none !important;
}

/* Remove Callix's original 40px header gap */
.main-header.header-style-two,
.main-header.header-style-two.fixed-header {
    top: 0 !important;
}


/* ==========================================================
   25. HEADER LOGO OVERRIDE

   Callix Header Style Two hard-codes the parent-theme logo,
   so replace it visually with the Kinetic Film logo.
   ========================================================== */

.main-header.header-style-two .logo-box .logo a {
    display: block;
    width: 220px;
    height: 80px;

    background-image: url("https://kineticfilm.com/wp-content/uploads/2026/08/Kinetic-Film-Logo-small.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Hide Callix parent-theme logo */
.main-header.header-style-two .logo-box .logo a img {
    display: none !important;
}


/* ==========================================================
   26. MOBILE CONTACT FORM
   ========================================================== */

@media (max-width: 767px) {

    .kf-contact-form .kf-form-row {
        display: block;
        margin-bottom: 0;
    }

    .kf-contact-form .kf-form-half {
        margin-bottom: 20px;
    }

    .kf-contact-form input[type="submit"] {
        width: 100%;
    }
}


/* ==========================================================
   KINETIC FILM - MINIMAL FOOTER
   ========================================================== */

.kf-minimal-footer {
    background: var(--kf-dark) !important;
    border-top: 1px solid rgba(200, 185, 138, 0.30) !important;
    padding: 22px 30px !important;
    min-height: 68px !important;

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

    width: 100% !important;
}

/* Force all Elementor/HTML wrappers to full width */
.kf-minimal-footer .elementor-container,
.kf-minimal-footer .elementor-column,
.kf-minimal-footer .elementor-widget-wrap,
.kf-minimal-footer .elementor-widget,
.kf-minimal-footer .elementor-widget-container,
.kf-minimal-footer .kf-footer-content {
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* Copyright line */
.kf-minimal-footer .kf-footer-content p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--kf-cream) !important;

    font-family: 'Archivo', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;

    text-align: center !important;
}

/* Force inherited spans to cream */
.kf-minimal-footer .kf-footer-content span {
    color: var(--kf-cream) !important;
}

/* Divider */
.kf-minimal-footer .kf-footer-divider {
    display: inline-block;
    margin: 0 12px !important;
    color: var(--kf-gold) !important;
}

/* Privacy Policy */
.kf-minimal-footer .kf-footer-content a,
.kf-minimal-footer .kf-footer-content a:visited {
    color: var(--kf-gold) !important;
    text-decoration: none !important;
}

.kf-minimal-footer .kf-footer-content a:hover {
    color: var(--kf-cream) !important;
}
/* ==========================================================
   KINETIC FILM - FOOTER HTML WIDGET FIX
   ========================================================== */

.kf-minimal-footer .elementor-widget-html {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
}

.kf-minimal-footer .elementor-widget-html .elementor-widget-container {
    width: 100% !important;
    max-width: none !important;
}

.kf-minimal-footer .kf-footer-content {
    width: 100% !important;
    text-align: center !important;
}

.kf-minimal-footer .kf-footer-content p {
    margin: 0 !important;
    text-align: center !important;
    color: var(--kf-cream) !important;
}

.kf-minimal-footer .kf-footer-content a,
.kf-minimal-footer .kf-footer-content a:visited {
    color: var(--kf-gold) !important;
}

.kf-minimal-footer .kf-footer-divider {
    color: var(--kf-gold) !important;
    margin: 0 12px !important;
}

/* ==========================================================
   27. KINETIC FILM FAQ ACCORDION

   Elementor Accordion CSS Class:
   kf-faq-accordion
   ========================================================== */

.kf-faq-accordion {
    width: 100%;
}

/* Remove Elementor's default box treatment */
.kf-faq-accordion .e-n-accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(200, 185, 138, 0.30) !important;
}

/* Top border on first FAQ */
.kf-faq-accordion .e-n-accordion-item:first-child {
    border-top: 1px solid rgba(200, 185, 138, 0.30) !important;
}

/* Question row */
.kf-faq-accordion .e-n-accordion-item-title {
    background: transparent !important;
    border: 0 !important;
    padding: 20px 18px !important;
    cursor: pointer;
}

/* Question text */
.kf-faq-accordion .e-n-accordion-item-title-text {
    color: var(--kf-cream) !important;
    font-family: 'Archivo', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* Plus / minus icon */
.kf-faq-accordion .e-n-accordion-item-title-icon,
.kf-faq-accordion .e-n-accordion-item-title-icon i,
.kf-faq-accordion .e-n-accordion-item-title-icon svg {
    color: var(--kf-gold) !important;
    fill: var(--kf-gold) !important;
}

/* Active/open question */
.kf-faq-accordion .e-n-accordion-item[open]
.e-n-accordion-item-title-text {
    color: var(--kf-gold) !important;
}

/* FAQ answer area */
.kf-faq-accordion .e-n-accordion-item > .e-con {
    background: transparent !important;
}

/* Answer text */
.kf-faq-accordion .e-n-accordion-item p,
.kf-faq-accordion .elementor-widget-text-editor,
.kf-faq-accordion .elementor-widget-text-editor p {
    color: var(--kf-light-text) !important;
    font-family: 'Archivo', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

/* Remove unnecessary paragraph spacing at bottom */
.kf-faq-accordion .elementor-widget-text-editor p:last-child {
    margin-bottom: 0 !important;
}

/* Hover state */
.kf-faq-accordion .e-n-accordion-item-title:hover
.e-n-accordion-item-title-text {
    color: var(--kf-gold) !important;
}

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

    .kf-faq-accordion .e-n-accordion-item-title {
        padding: 18px 12px !important;
    }

    .kf-faq-accordion .e-n-accordion-item-title-text {
        font-size: 16px !important;
    }

    .kf-faq-accordion .e-n-accordion-item p,
    .kf-faq-accordion .elementor-widget-text-editor,
    .kf-faq-accordion .elementor-widget-text-editor p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
}
/* Remove box border around open answer content */
.kf-faq-accordion .e-n-accordion-item > .e-con {
    border: 0 !important;
    box-shadow: none !important;
}

/* Refine answer spacing */
.kf-faq-accordion .e-n-accordion-item > .e-con {
    padding: 8px 24px 26px 48px !important;
}
/* ==========================================================
   24. CALLIX PRELOADER / HEADER POSITION
   ========================================================== */

/* Disable broken Callix page loaders */
.preloader,
.pageloader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Remove Callix's original 40px header gap */
.main-header.header-style-two,
.main-header.header-style-two.fixed-header {
    top: 0 !important;
}

/* ==========================================================
   KINETIC FILM - BOOK A CALL SECTION
   Matches GET IN TOUCH / REACH OUT
   ========================================================== */

.kf-book-call {
    width: 100%;
    text-align: left;
}

/* Gold kicker with line */
.kf-book-call-kicker {
    position: relative;
    padding-left: 170px;
    margin: 0 0 28px 0 !important;
    text-align: left !important;
}

.kf-book-call-kicker::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 140px;
    height: 4px;
    background: var(--kf-gold, #d2bd88);
    transform: translateY(-50%);
}

.kf-book-call-kicker,
.kf-book-call-kicker p,
.kf-book-call-kicker .elementor-heading-title {
    color: var(--kf-gold, #d2bd88) !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Main BOOK A CALL heading */
.kf-book-call-title,
.kf-book-call-title .elementor-heading-title {
    color: #ffffff !important;
    font-size: clamp(76px, 7vw, 120px) !important;
    line-height: 0.88 !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: -0.045em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Supporting copy */
.kf-book-call-copy {
    max-width: 850px;
    margin-top: 38px !important;
    margin-bottom: 38px !important;
}

.kf-book-call-copy,
.kf-book-call-copy p,
.kf-book-call-copy span,
.kf-book-call-copy em {
    color: #ffffff !important;
    font-size: 19px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: left !important;
}

/* Button */
.kf-book-call-btn {
    width: 100% !important;
    text-align: left !important;
}

.kf-book-call-btn .elementor-widget-container,
.kf-book-call-btn .elementor-button-wrapper {
    width: 100% !important;
    text-align: left !important;
}

.kf-book-call-btn .elementor-button {
    display: inline-flex !important;
    width: auto !important;
    justify-content: center !important;
    align-items: center !important;
}

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

    .kf-book-call-kicker {
        padding-left: 90px;
        margin-bottom: 22px !important;
    }

    .kf-book-call-kicker::before {
        width: 70px;
        height: 3px;
    }

    .kf-book-call-kicker,
    .kf-book-call-kicker p,
    .kf-book-call-kicker .elementor-heading-title {
        font-size: 16px !important;
        letter-spacing: 0.16em !important;
    }

    .kf-book-call-title,
    .kf-book-call-title .elementor-heading-title {
        font-size: clamp(52px, 15vw, 72px) !important;
    }

    .kf-book-call-copy,
    .kf-book-call-copy p,
    .kf-book-call-copy span,
    .kf-book-call-copy em {
        font-size: 18px !important;
    }
}

/* ==========================================================
   KINETIC FILM - BOOK A CALL
   Matched to GET IN TOUCH / REACH OUT
   ========================================================== */

.kf-book-call {
    width: 100%;
    text-align: left;
}


/* ----------------------------------------------------------
   GOLD KICKER
   ---------------------------------------------------------- */

.kf-book-call-kicker {
    position: relative !important;
    padding-left: 85px !important;
    margin: 0 0 28px 0 !important;
    text-align: left !important;
}

.kf-book-call-kicker::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 11px !important;
    width: 55px !important;
    height: 2px !important;
    background: #c8b98a !important;
}

.kf-book-call-kicker,
.kf-book-call-kicker p,
.kf-book-call-kicker .elementor-heading-title {
    font-family: Archivo, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 3px !important;
    color: #c8b98a !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 !important;
}


/* ----------------------------------------------------------
   MAIN HEADING
   ---------------------------------------------------------- */

.kf-book-call-title,
.kf-book-call-title .elementor-heading-title {
    font-family: Gilroy-Bold, sans-serif !important;
    font-size: 64px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    color: #ffffff !important;
    font-style: normal !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 !important;
}


/* ----------------------------------------------------------
   SUPPORTING COPY
   ---------------------------------------------------------- */

.kf-book-call-copy {
    max-width: 1100px;
    margin-top: 32px !important;
    margin-bottom: 38px !important;
}

.kf-book-call-copy,
.kf-book-call-copy p,
.kf-book-call-copy span,
.kf-book-call-copy em {
    font-family: Archivo, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: #ffffff !important;
    text-align: left !important;
}


/* ----------------------------------------------------------
   BUTTON
   ---------------------------------------------------------- */

.kf-book-call-btn {
    width: 100% !important;
    text-align: left !important;
}

.kf-book-call-btn .elementor-button-wrapper {
    text-align: left !important;
}

.kf-book-call-btn .elementor-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 400px;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px !important;
    padding: 22px 40px !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .kf-book-call-kicker {
        padding-left: 70px !important;
    }

    .kf-book-call-kicker::before {
        width: 45px !important;
    }

    .kf-book-call-title,
    .kf-book-call-title .elementor-heading-title {
        font-size: 48px !important;
    }

    .kf-book-call-copy,
    .kf-book-call-copy p,
    .kf-book-call-copy span,
    .kf-book-call-copy em {
        font-size: 17px !important;
    }

    .kf-book-call-btn .elementor-button {
        min-width: 0;
        width: 100% !important;
        max-width: 400px;
    }
}

/* ==========================================================
   KINETIC FILM - DARK SECTION / CALLIX TEXT OVERRIDES
   ========================================================== */

/* General body copy inside Callix dark sections */
.kf-dark-section .text-content p,
.kf-dark-section .text-content .text,
.kf-dark-section .text-content .text p,
.kf-dark-section .text-block .text,
.kf-dark-section .text-block .text p,
.kf-dark-section .text-column p {
    color: #B8BEC7 !important;
}

/* Numbered item headings */
.kf-dark-section .text-block .title h4 {
    color: #F4F2ED !important;
}

/* Number circles */
.kf-dark-section .text-block .title .count {
    background: #C8B98A !important;
    color: #171F2D !important;
    box-shadow: none !important;
}

/* Kill Callix green/red glow effects */
.kf-dark-section .text-block .title .count::before,
.kf-dark-section .text-block .title .count::after {
    background: #C8B98A !important;
    box-shadow: none !important;
    opacity: 0 !important;
}
/* Intro copy above numbered items */
.kf-dark-section .lower-text,
.kf-dark-section .lower-text p,
.kf-dark-section .lower-text span {
    color: #C7CBD1 !important;
    opacity: 1 !important;
}

/* ==========================================================
   KINETIC FILM - AUDIENCE DESIGN SLIDER
   ========================================================== */

/* Quote panel */
.kf-audience-slider .quote-box,
.kf-audience-slider .quote-box .inner {
    background: linear-gradient(
        110deg,
        #F4F2ED 0%,
        #E9E1CB 52%,
        #C8B98A 100%
    ) !important;
}

/* Remove Callix blue accent wherever it is being applied */
.kf-audience-slider .quote-box,
.kf-audience-slider .quote-box .inner {
    border-left-color: #C8B98A !important;
}

.kf-audience-slider .quote-box::before,
.kf-audience-slider .quote-box .inner::before {
    background: #C8B98A !important;
    border-color: #C8B98A !important;
}

/* Quote typography */
.kf-audience-slider .quote-box .title,
.kf-audience-slider .quote-box .quote-text {
    color: #171F2D !important;
}

/* Navigation buttons */
.kf-audience-slider .owl-nav .owl-prev,
.kf-audience-slider .owl-nav .owl-next {
    background: linear-gradient(
        135deg,
        #F4F2ED 0%,
        #C8B98A 100%
    ) !important;
    color: #171F2D !important;
    border: 0 !important;
}

/* Arrow icons */
.kf-audience-slider .owl-nav .owl-prev span,
.kf-audience-slider .owl-nav .owl-next span,
.kf-audience-slider .owl-nav .owl-prev .icon,
.kf-audience-slider .owl-nav .owl-next .icon {
    color: #171F2D !important;
}

/* Small separation between buttons */
.kf-audience-slider .owl-nav .owl-prev {
    border-right: 1px solid rgba(23, 31, 45, 0.15) !important;
}

/* Hover */
.kf-audience-slider .owl-nav .owl-prev:hover,
.kf-audience-slider .owl-nav .owl-next:hover {
    background: #171F2D !important;
}

.kf-audience-slider .owl-nav .owl-prev:hover span,
.kf-audience-slider .owl-nav .owl-next:hover span,
.kf-audience-slider .owl-nav .owl-prev:hover .icon,
.kf-audience-slider .owl-nav .owl-next:hover .icon {
    color: #C8B98A !important;
}
/* ==========================================================
   KINETIC FILM - AUDIENCE SLIDER QUOTE PANEL
   ========================================================== */

.kf-audience-slider .quote-box,
.kf-audience-slider .quote-box .inner {
    background-color: transparent !important;
}

.kf-audience-slider .quote-box .inner {
    background-image: linear-gradient(
        110deg,
        #F4F2ED 0%,
        #F4F2ED 22%,
        #E8DFC4 58%,
        #C8B98A 100%
    ) !important;
}

/* Stop Callix pseudo-element covering the gradient */
.kf-audience-slider .quote-box .inner::before {
    background: transparent !important;
    opacity: 1 !important;
}

/* Gold left-hand accent */
.kf-audience-slider .quote-box .inner {
    border-left: 4px solid #C8B98A !important;
}

/* Quote typography */
.kf-audience-slider .quote-box .title,
.kf-audience-slider .quote-box .quote-text {
    color: #171F2D !important;
}

/* ==========================================================
   KINETIC FILM - AUDIENCE DESIGN SERVICES
   ========================================================== */

.kf-audience-services {
    --kf-dark: #171F2D;
    --kf-gold: #C8B98A;
    --kf-cream: #F4F2ED;
    --kf-body: #5F6772;
}


/* ==========================================================
   EYEBROW / CATEGORY
   Matches established Kinetic heading treatment
   ========================================================== */

.kf-audience-services .sub-title,
.kf-audience-services .sec-title .sub-title,
.kf-audience-services .sec-title-four .sub-title {
    position: relative !important;

    display: inline-block !important;
    width: auto !important;

    padding: 0 0 0 92px !important;
    margin: 0 0 20px 0 !important;

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

    color: #C8B98A !important;

    font-weight: 600 !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;

    line-height: 1.3 !important;

    box-shadow: none !important;
}


/* Gold horizontal rule */

.kf-audience-services .sub-title::before,
.kf-audience-services .sec-title .sub-title::before,
.kf-audience-services .sec-title-four .sub-title::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;
    left: 0 !important;
    top: 50% !important;

    width: 66px !important;
    height: 2px !important;

    transform: translateY(-50%) !important;

    background: #C8B98A !important;
    border: 0 !important;

    opacity: 1 !important;

    box-shadow: none !important;
}


/* Remove any second Callix decoration */

.kf-audience-services .sub-title::after,
.kf-audience-services .sec-title .sub-title::after,
.kf-audience-services .sec-title-four .sub-title::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   MAIN HEADING
   ========================================================== */

.kf-audience-services h1,
.kf-audience-services h2,
.kf-audience-services h3,
.kf-audience-services .title,
.kf-audience-services .title h2,
.kf-audience-services .title h3 {
    color: #171F2D !important;
}


/* ==========================================================
   BODY COPY
   ========================================================== */

.kf-audience-services p,
.kf-audience-services .text,
.kf-audience-services .text p,
.kf-audience-services .text-content,
.kf-audience-services .text-content p {
    color: #5F6772 !important;
}


/* ==========================================================
   CTA BUTTON - OUTER SHELL
   ========================================================== */

.kf-audience-services .theme-btn,
.kf-audience-services .btn-style-one,
.kf-audience-services .btn-style-two,
.kf-audience-services .btn-style-three,
.kf-audience-services .btn-style-four {
    position: relative !important;

    display: inline-block !important;

    padding: 0 !important;

    background: transparent !important;

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

    overflow: hidden !important;

    box-shadow: none !important;

    color: #171F2D !important;

    transition:
        transform 0.25s ease,
        background 0.25s ease !important;
}


/* ==========================================================
   CTA BUTTON - INNER CALLIX LAYER
   ========================================================== */

.kf-audience-services .theme-btn .btn-title,
.kf-audience-services .btn-style-one .btn-title,
.kf-audience-services .btn-style-two .btn-title,
.kf-audience-services .btn-style-three .btn-title,
.kf-audience-services .btn-style-four .btn-title,
.kf-audience-services .theme-btn > span {
    position: relative !important;

    display: block !important;

    padding: 17px 36px !important;

    background: linear-gradient(
        135deg,
        #F4F2ED 0%,
        #E8DFC4 55%,
        #C8B98A 100%
    ) !important;

    color: #171F2D !important;

    border: 1px solid rgba(200, 185, 138, 0.55) !important;
    border-radius: 50px !important;

    font-weight: 600 !important;
    letter-spacing: 0.24em !important;

    box-shadow: none !important;

    z-index: 2 !important;

    transition:
        background 0.25s ease,
        color 0.25s ease !important;
}


/* ==========================================================
   KILL CALLIX BLUE / PURPLE BUTTON OVERLAYS
   ========================================================== */

.kf-audience-services .theme-btn::before,
.kf-audience-services .theme-btn::after,
.kf-audience-services .btn-style-one::before,
.kf-audience-services .btn-style-one::after,
.kf-audience-services .btn-style-two::before,
.kf-audience-services .btn-style-two::after,
.kf-audience-services .btn-style-three::before,
.kf-audience-services .btn-style-three::after,
.kf-audience-services .btn-style-four::before,
.kf-audience-services .btn-style-four::after {
    content: none !important;

    display: none !important;

    background: transparent !important;

    opacity: 0 !important;

    box-shadow: none !important;
}


/* Also suppress Callix effects inside the button */

.kf-audience-services .theme-btn .btn-title::before,
.kf-audience-services .theme-btn .btn-title::after,
.kf-audience-services .theme-btn > span::before,
.kf-audience-services .theme-btn > span::after {
    content: none !important;

    display: none !important;

    background: transparent !important;

    opacity: 0 !important;
}


/* ==========================================================
   CTA BUTTON HOVER
   ========================================================== */

.kf-audience-services .theme-btn:hover,
.kf-audience-services .btn-style-one:hover,
.kf-audience-services .btn-style-two:hover,
.kf-audience-services .btn-style-three:hover,
.kf-audience-services .btn-style-four:hover {
    background: transparent !important;

    transform: translateY(-2px) !important;
}


.kf-audience-services .theme-btn:hover .btn-title,
.kf-audience-services .btn-style-one:hover .btn-title,
.kf-audience-services .btn-style-two:hover .btn-title,
.kf-audience-services .btn-style-three:hover .btn-title,
.kf-audience-services .btn-style-four:hover .btn-title,
.kf-audience-services .theme-btn:hover > span {
    background: #171F2D !important;

    color: #C8B98A !important;

    border-color: #171F2D !important;
}


/* Button icon colours */

.kf-audience-services .theme-btn i,
.kf-audience-services .theme-btn svg,
.kf-audience-services .theme-btn .icon {
    color: #171F2D !important;
    fill: #171F2D !important;
}


.kf-audience-services .theme-btn:hover i,
.kf-audience-services .theme-btn:hover svg,
.kf-audience-services .theme-btn:hover .icon {
    color: #C8B98A !important;
    fill: #C8B98A !important;
}


/* ==========================================================
   SLIDER NAVIGATION
   ========================================================== */

/* Both navigation buttons */
.kf-audience-services .owl-nav .owl-prev,
.kf-audience-services .owl-nav .owl-next {
    position: relative !important;

    background: linear-gradient(
        135deg,
        #F4F2ED 0%,
        #E8DFC4 55%,
        #C8B98A 100%
    ) !important;

    background-image: linear-gradient(
        135deg,
        #F4F2ED 0%,
        #E8DFC4 55%,
        #C8B98A 100%
    ) !important;

    color: #171F2D !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;

    transition:
        background 0.25s ease,
        color 0.25s ease !important;
}


/* Kill Callix blue gradient overlays */
.kf-audience-services .owl-nav .owl-prev::before,
.kf-audience-services .owl-nav .owl-prev::after,
.kf-audience-services .owl-nav .owl-next::before,
.kf-audience-services .owl-nav .owl-next::after {
    content: none !important;

    display: none !important;

    background: transparent !important;
    background-image: none !important;

    opacity: 0 !important;

    box-shadow: none !important;
}


/* Arrow icons */
.kf-audience-services .owl-nav .owl-prev span,
.kf-audience-services .owl-nav .owl-next span,
.kf-audience-services .owl-nav .owl-prev i,
.kf-audience-services .owl-nav .owl-next i,
.kf-audience-services .owl-nav .owl-prev .icon,
.kf-audience-services .owl-nav .owl-next .icon {
    position: relative !important;

    color: #171F2D !important;

    background: transparent !important;
    background-image: none !important;

    z-index: 2 !important;
}


/* Arrow icon pseudo-elements */
.kf-audience-services .owl-nav .owl-prev span::before,
.kf-audience-services .owl-nav .owl-next span::before,
.kf-audience-services .owl-nav .owl-prev i::before,
.kf-audience-services .owl-nav .owl-next i::before,
.kf-audience-services .owl-nav .owl-prev .icon::before,
.kf-audience-services .owl-nav .owl-next .icon::before {
    color: #171F2D !important;
}


/* Subtle divider between arrows */
.kf-audience-services .owl-nav .owl-prev {
    border-right: 1px solid rgba(23, 31, 45, 0.15) !important;
}


/* ==========================================================
   SLIDER NAVIGATION HOVER
   ========================================================== */

.kf-audience-services .owl-nav .owl-prev:hover,
.kf-audience-services .owl-nav .owl-next:hover {
    background: #171F2D !important;
    background-image: none !important;

    color: #C8B98A !important;
}


/* Hover arrow colour */
.kf-audience-services .owl-nav .owl-prev:hover span,
.kf-audience-services .owl-nav .owl-next:hover span,
.kf-audience-services .owl-nav .owl-prev:hover i,
.kf-audience-services .owl-nav .owl-next:hover i,
.kf-audience-services .owl-nav .owl-prev:hover .icon,
.kf-audience-services .owl-nav .owl-next:hover .icon,
.kf-audience-services .owl-nav .owl-prev:hover span::before,
.kf-audience-services .owl-nav .owl-next:hover span::before,
.kf-audience-services .owl-nav .owl-prev:hover i::before,
.kf-audience-services .owl-nav .owl-next:hover i::before,
.kf-audience-services .owl-nav .owl-prev:hover .icon::before,
.kf-audience-services .owl-nav .owl-next:hover .icon::before {
    color: #C8B98A !important;
}

/* ==========================================================
   END KINETIC FILM BRAND OVERRIDES
   ========================================================== */