/*!
Theme Name: Motive Agency Theme
Theme URI: https://motiveagency.co.uk
Author: Motive Agency
Author URI: https://motiveagency.co.uk
Description: At Motive, we're more than just a marketing agency; we are a team driven by core values that directly enhance our client relationships and project outcomes. Our foundational values of Respect, Collaboration, Drive, and of course Fun are integral to delivering exceptional results. Founded in 2019 with just a team of two, Motive has evolved to encompass four key departments. Design, Social, Digital and Video.
Version: 2.0.0
Requires PHP: 7.4+
Text Domain: motiveagency
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    /* Neutral */
    --neutral-25: #ffffff;
    --neutral-50: #f7f7f7;
    --neutral-100: #ededed;
    --neutral-200: #dcdcdc;
    --neutral-300: #bdbdbd;
    --neutral-400: #9e9e9e;
    --neutral-500: #6e6e6e;
    --neutral-600: #3c3c3c;
    --neutral-700: #2e2e2e;
    --neutral-800: #3c3c3c;
    --neutral-900: #111111;
    --neutral-950: #1f1f1f;

    /* Blue */
    --blue-50: #f4f6f9;
    --blue-100: #e2e8f0;
    --blue-200: #c0d0e3;
    --blue-300: #a4bad5;
    --blue-400: #8493aa;
    --blue-500: #677891;
    --blue-600: #4e5c72;
    --blue-700: #384254;
    --blue-800: #242c38;
    --blue-900: #12161c;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: clamp(16px, 2.4vw, 24px);
    --space-6: clamp(20px, 3.2vw, 32px);
    --space-7: clamp(28px, 4.8vw, 48px);
    --space-8: clamp(36px, 6.4vw, 64px);
    --space-9: clamp(44px, 8vw, 80px);
    --space-10: clamp(56px, 12vw, 120px);
    --space-11: clamp(72px, 16vw, 160px);
    --space-12: clamp(96px, 24vw, 240px);

    /* Animation */
    --animation-duration: 0.8s;
    --animation-easing: cubic-bezier(0, 0, 0.2, 1);
    --animation-distance: 60px;
    --animation-scale: 0.95;
    --animation-delay-step: 0.1s;

    /* Typography */
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-36: 36px;
}

html {
    margin: 0;
    padding: 0;
    font-family: "Circular Std";
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.wrap {
    max-width: 1440px;
    margin: auto;
    width: 90vw;
}

h1,h2,h3,h4,h5,h6,p,a,ul,ol,span,ul li,ol li,span {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

.heading-1 {
    font-size: clamp(40px, 9.6vw, 96px);
    line-height: 1.2;
    font-weight: 300;
    font-family: "Newsreader", serif;
    color: var(--blue-700);
}

.heading-2 {
    font-size: clamp(32px, 7.2vw, 72px);
    line-height: 1.2;
    font-weight: 300;
    font-family: "Newsreader", serif;
    color: var(--blue-700);
}

.heading-3 {
    font-size: clamp(28px, 5.6vw, 56px);
    line-height: 1.2;
    font-weight: 300;
    font-family: "Newsreader", serif;
    color: var(--blue-700);
}

.heading-4 {
    font-size: clamp(24px, 4vw, 40px);
    line-height: 1.2;
    font-weight: 300;
    font-family: "Newsreader", serif;
    color: var(--blue-700);
}

.heading-5,
h2.gform_title {
    font-size: clamp(22px, 2.8vw, 28px);
    line-height: 1.2;
    font-weight: 450;
    color: var(--blue-700);
}

.heading-6 {
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.2;
    font-weight: 500;
    color: var(--blue-700);
}

.body-large {
    font-size: var(--font-size-20);
    font-weight: 450;
    line-height: 1.6;
    color: var(--neutral-500);
}

.body-medium, p, a {
    font-size: var(--font-size-16);
    font-weight: 450;
    line-height: 1.5;
    color: var(--neutral-500);
}

.body-small {
    font-size: var(--font-size-14);
    font-weight: 450;
    line-height: 1.5;
    color: var(--neutral-500);
}

.label-large {
    font-size: var(--font-size-16);
    line-height: 1.5;
    font-weight: 450;
}

.label-medium {
    font-size: var(--font-size-14);
    line-height: 1.5;
    font-weight: 500;
}

.label-small {
    font-size: var(--font-size-12);
    line-height: 1.5;
    font-weight: 450;
}

.eyebrow {
    font-size: var(--font-size-14);
    font-weight: 450;
    line-height: 1.5;
    text-transform: uppercase;
}

.accent {
    font-size: var(--font-size-36);
    line-height: 1.2;
    font-weight: 400;
    font-family: "Newsreader", serif;
}

.content-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.button,
a.button,
span.button,
button.button,
button#gform_submit_button_1,
button#gform_submit_button_6,
button#gform_submit_button_7,
button#gform_submit_button_8 {
    padding: var(--space-3) var(--space-5);
    color: var(--blue-700);
    font-size: var(--font-size-16);
    font-style: normal;
    font-weight: 450;
    font-family: inherit;
    line-height: 150%;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: solid 1px var(--blue-700);
    width: fit-content;
    display: flex;
    gap: var(--space-3);
    align-items: center;
    transition: ease 0.6s;
    cursor: pointer;
    background: transparent;
}

.button:hover,
a.button:hover,
span.button:hover,
button.button:hover,
button#gform_submit_button_1:hover,
button#gform_submit_button_6:hover,
button#gform_submit_button_7:hover,
button#gform_submit_button_8:hover {
    color: var(--neutral-25);
    background: var(--blue-700);
}

.button:hover svg path,
a.button:hover svg path,
span.button:hover svg path,
button.button:hover svg path {
    fill: var(--neutral-25);
}

.button-blue,
a.button-blue,
span.button-blue,
button.button-blue {
    padding: var(--space-3) var(--space-5);
    color: var(--neutral-25);
    background: var(--blue-700);
    font-size: var(--font-size-16);
    font-style: normal;
    font-weight: 450;
    font-family: inherit;
    line-height: 150%;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border: solid 1px var(--blue-700);
    width: fit-content;
    display: flex;
    gap: var(--space-3);
    align-items: center;
    transition: ease 0.6s;
    cursor: pointer;
}

.button-blue:hover,
a.button-blue:hover,
span.button-blue:hover,
button.button-blue:hover {
    color: var(--blue-700);
    background: transparent;
}

.button-blue:hover svg path,
a.button-blue:hover svg path,
span.button-blue:hover svg path,
button.button-blue:hover svg path {
    fill: var(--blue-700);
}

[data-animate] {
    opacity: 0;
}

[data-animate="fade-up"] {
    transform: translateY(var(--animation-distance));
    will-change: opacity, transform;
}

[data-animate="fade-in"] {
    will-change: opacity;
}

[data-animate="fade-left"] {
    transform: translateX(calc(var(--animation-distance) * -1));
    will-change: opacity, transform;
}

[data-animate="fade-right"] {
    transform: translateX(var(--animation-distance));
    will-change: opacity, transform;
}

[data-animate="scale-up"] {
    transform: scale(var(--animation-scale));
    will-change: opacity, transform;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    transition: opacity var(--animation-duration) var(--animation-easing), transform var(--animation-duration) var(--animation-easing);
}

[data-animate="fade-in"].is-visible {
    transform: none;
}

[data-animate-delay="1"] { transition-delay: calc(var(--animation-delay-step) * 1); }
[data-animate-delay="2"] { transition-delay: calc(var(--animation-delay-step) * 2); }
[data-animate-delay="3"] { transition-delay: calc(var(--animation-delay-step) * 3); }
[data-animate-delay="4"] { transition-delay: calc(var(--animation-delay-step) * 4); }
[data-animate-delay="5"] { transition-delay: calc(var(--animation-delay-step) * 5); }
[data-animate-delay="6"] { transition-delay: calc(var(--animation-delay-step) * 6); }

[data-parallax] {
    will-change: transform;
}

/* Gravity Forms */
/* ------------------------------------------------- */

body .gform_wrapper,
body .gform_wrapper form {
    margin: 0;
}

body .gform_wrapper .gform_heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

body .gform_wrapper .gform_body .gform_fields .gfield {
    padding-right: 0;
    margin: 0;
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {
    font-family: "Circular Std";
    font-size: var(--font-size-14);
    font-weight: 450;
    line-height: 1.5;
    color: var(--neutral-950);
    margin-bottom: var(--space-2);
    display: block;
}

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_required {
    color: var(--blue-700);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="text"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="email"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="tel"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="url"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="number"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="password"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select {
    width: 100%;
    box-sizing: border-box;
    font-family: "Circular Std";
    font-size: var(--font-size-16);
    font-weight: 450;
    line-height: 1.5;
    color: var(--neutral-950);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--blue-300);
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.3s ease;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea {
    resize: vertical;
    min-height: 80px;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select {
    cursor: pointer;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input:focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea:focus,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container select:focus {
    outline: none;
    border-bottom-color: var(--blue-700);
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input::placeholder,
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container textarea::placeholder {
    font-family: "Circular Std";
    font-size: var(--font-size-16);
    font-weight: 450;
    line-height: 1.5;
    color: var(--neutral-500);
    opacity: 1;
}

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="checkbox"],
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container input[type="radio"] {
    accent-color: var(--blue-700);
    margin-right: var(--space-2);
}

body .gform_wrapper .gform_body .gform_fields .gfield--type-consent .ginput_container label,
body .gform_wrapper .gform_body .gform_fields .gfield--type-consent .gfield_label,
body .gform_wrapper .gform_body .gform_fields .gfield--type-consent .gfield_consent_label,
body .gform_wrapper .gform_body .gform_fields .gfield--type-consent .gfield_consent_description,
body .gform_wrapper .gform_body .gform_fields .gfield--type-checkbox .ginput_container label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description {
    font-family: "Circular Std";
    font-size: var(--font-size-14);
    font-weight: 450;
    line-height: 1.5;
    color: var(--neutral-500);
}

body .gform_wrapper form .gform_footer {
    padding: 0;
    margin: var(--space-6) 0 0;
}

body .gform_wrapper form .gform_footer input.gform_button.button,
body .gform_wrapper form .gform_footer input[type="submit"],
input.gform_button.button {
    padding: var(--space-3) var(--space-5)!important;
    font-family: "Circular Std"!important;
    font-size: var(--font-size-16)!important;
    font-weight: 450!important;
    line-height: 150%!important;
    letter-spacing: 1px!important;
    text-transform: uppercase!important;
    color: var(--neutral-25)!important;
    background: var(--blue-700)!important;
    border: 1px solid var(--blue-700)!important;
    border-radius: 0!important;
    width: auto!important;
    cursor: pointer!important;
    -webkit-appearance: none!important;
    appearance: none!important;
    transition: background 0.6s ease, color 0.6s ease!important;
}

body .gform_wrapper form .gform_footer input.gform_button.button:hover,
body .gform_wrapper form .gform_footer input[type="submit"]:hover,
input.gform_button.button:hover {
    color: var(--blue-700)!important;
    background: transparent!important;
}

body .gform_wrapper .gform_validation_errors,
body .gform_wrapper .validation_error,
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message {
    font-family: "Circular Std";
    font-size: var(--font-size-14);
    line-height: 1.5;
}

/* Pagination */
/* ------------------------------------------------- */

.pagination {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--neutral-200);
}

.pagination-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pagination-pages {
    display: flex;
    gap: var(--space-1);
}

.pagination-btn {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--neutral-200);
    color: var(--neutral-950);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-14);
    font-weight: 450;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled):not(.is-disabled) {
    border-color: var(--blue-700);
    color: var(--blue-700);
}

.pagination-btn:disabled,
.pagination-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-page {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--neutral-200);
    color: var(--neutral-950);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-14);
    font-weight: 450;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pagination-page:hover {
    border-color: var(--blue-700);
    color: var(--blue-700);
}

.pagination-page.is-active {
    background: var(--blue-700);
    color: var(--neutral-25);
    border-color: var(--blue-700);
}

.pagination-info {
    color: var(--neutral-500);
    font-size: var(--font-size-14);
}