:root {
    
    /* colours */

    /* primary */
    --red: #F7505E;
    --yellow: #ffe700;
    --grey: #565867;
    --light-grey: #f8f5f2;
    --mid-grey: #565867;
    --dark-grey: #2c2e41;
    --white: #ffffff;
    --black: #000000;

    /* leads */
    --main-text-colour: var(--mid-grey);
    --light-input-colour: var(--light-grey);

    /* variables */
    --maxWidth:1440;
    --maxWidthPX:calc(var(--maxWidth) * 1px);
    --minWidth:320;
    --minWidthPX:calc(var(--minWidth) * 1px);
    --medWidth:1280;
    --medWidthPX:calc(var(--medWidth) * 1px);
    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--minWidthPX)) / (var(--maxWidth) - var(--minWidth)));
    --fluid-bp-minW-768: calc((var(--fluid-screen) - var(--minWidthPX)) / (768 - var(--minWidth)));

    --s1-5:clamp(1px, 1px + (5 - 1) * var(--fluid-bp), 5px);
    --s1-3:clamp(1px, 1px + (3 - 1) * var(--fluid-bp), 3px);
    --s5-8:clamp(5px, 5px + (8 - 5) * var(--fluid-bp), 8px);
    --s5-25:clamp(5px, 5px + (25 - 5) * var(--fluid-bp), 25px);
    --s8-12:clamp(8px, 8px + (12 - 8) * var(--fluid-bp), 12px);
    --s8-12:clamp(8px, 8px + (12 - 8) * var(--fluid-bp), 12px);
    --s8-16:clamp(8px, 8px + (8 - 12) * var(--fluid-bp), 16px);
    --s8-32:clamp(8px, 8px + (32 - 8) * var(--fluid-bp), 32px);
    --s12-16:clamp(12px, 12px + (16 - 12) * var(--fluid-bp), 16px);
    --s10-14:clamp(10px, 10px + (14 - 10) * var(--fluid-bp), 14px);
    --s10-16:clamp(10px, 10px + (16 - 10) * var(--fluid-bp), 16px);
    --s14-20:clamp(14px, 14px + (20 - 14) * var(--fluid-bp), 20px);
    --s14-18:clamp(14px, 14px + (18 - 14) * var(--fluid-bp), 18px);
    --s16-22:clamp(16px, 16px + (22 - 16) * var(--fluid-bp), 22px); 
    --s16-24:clamp(16px, 16px + (24 - 16) * var(--fluid-bp), 24px);
    --s16-32:clamp(16px, 16px + (32 - 16) * var(--fluid-bp), 32px);
    --s16-48:clamp(16px, 16px + (48 - 16) * var(--fluid-bp), 48px);
    --s16-75:clamp(16px, 16px + (75 - 16) * var(--fluid-bp), 75px);
    --s18-25:clamp(18px, 18px + (25 - 18) * var(--fluid-bp), 25px);
    --s20-30:clamp(20px, 20px + (30 - 20) * var(--fluid-bp), 30px);
    --s24-32:clamp(24px, 24px + (32 - 24) * var(--fluid-bp), 32px);
    --s24-48:clamp(24px, 24px + (48 - 24) * var(--fluid-bp), 48px);
    --s24-50:clamp(24px, 24px + (50 - 24) * var(--fluid-bp), 50px);
    --s32-50:clamp(32px, 32px + (50 - 32) * var(--fluid-bp), 50px);
    --s32-60:clamp(32px, 32px + (60 - 32) * var(--fluid-bp), 60px);
    --s32-64:clamp(32px, 32px + (66 - 32) * var(--fluid-bp), 64px);
    --s48-68:clamp(48px, 48px + (68 - 48) * var(--fluid-bp), 68px);
    --s48-75:clamp(48px, 48px + (75 - 48) * var(--fluid-bp), 75px);
    --s48-94:clamp(48px, 48px + (96 - 48) * var(--fluid-bp), 96px);
    --s50-75:clamp(50px, 50px + (75 - 50) * var(--fluid-bp), 75px);
    --s65-100:clamp(65px, 65px + (100 - 65) * var(--fluid-bp), 100px);
    --s80-160:clamp(80px, 80px + (160 - 80) * var(--fluid-bp), 160px);
    --s150-250:clamp(150px, 150px + (250 - 150) * var(--fluid-bp), 250px);
    --s200-280:clamp(200px, 200px + (280 - 2000) * var(--fluid-bp), 280px);

    /* Min-768 */
    --s18-22-min-768:clamp(18px, 18px + (22 - 14) * var(--fluid-bp-minW-768), 22px);
    /* /Min-768 */



    /* named variables */
    --col-gap: var(--s32-64);
    --list-gap: var(--s8-16);
    --list-gap-med: calc(var(--s16-32) * 0.66);
    --list-gap-wide: var(--s16-32);
    --body-font-size: var(--s10-14);
    --button-font-size: var(--s18-25);
    --small-btn-font-size: var(--s10-14);
    --block-gap: calc(var(--s16-22) * 1.4);

    --main-font-family: var(--wp--preset--font-family--open-sans);
    --feature-font-family: var(--wp--preset--font-family--caflish-pro);

    --logo-width: clamp(85px, 85px + (125 - 85) * var(--fluid-bp), 125px);

    --tiny: var(--s8-12);
    --small: var(--s10-16);
    --medium: var(--s12-16); 

    --button-padding: calc(var(--s5-8) + (var(--s12-16) * 0.85)) var(--s16-32);
    --small-button-padding: calc((var(--s5-8) + (var(--s12-16) * 0.85)) * 0.75) calc(var(--s16-32) * 0.75);
    --button-borders: var(--s1-5);
    --engagement-shadow: 0 0 var(--s5-25) rgba(0,0,0,0.15);
    --title-shadow: 0 var(--s1-5) var(--s1-5) rgba(0,0,0,0.45), 0 var(--s5-8) var(--s5-8) rgba(0,0,0,0.25);
    --block-padding-x:var(--s16-75);
    --block-padding-y:var(--s65-100);
    --block-padding: var(--block-padding-y) var(--block-padding-x);
    --buffer: calc(var(--s65-100) + var(--s48-68));
    --relative-full-height-col:clamp(calc(var(--buffer) * 0.5), 100vh, var(--buffer));
    --max-width-deficit: clamp(
        var(--block-padding-x), 
        calc(((100vw - var(--maxWidthPX)) / 2) + var(--block-padding-x)),
        calc(((100vw - var(--maxWidthPX)) / 2) + var(--block-padding-x))
    );
    /* /named variables */


    /* fluid % engine */
    --bp-min: var(--minWidth); 
    --bp-max: var(--maxWidth);
    --vp-raw: tan(atan2(100vw, 1px));
    --vp320-1440-progress: calc((var(--vp-raw) - var(--bp-min)) / (var(--bp-max) - var(--bp-min)));
    --vp320-992-progress: calc((var(--vp-raw) - var(--bp-min)) / (992 - var(--bp-min)));
    --vp320-768-progress: calc((var(--vp-raw) - var(--bp-min)) / (768 - var(--bp-min)));
    --vp768-1440-progress: calc((var(--vp-raw) - 768) / (var(--bp-max) - 768));
    /* /fluid % engine */

    /* fluid scalers */
    /* usage: percentage at min viewport width, percentage at max viewport width */

    --s0-1:clamp(0, 0 + (1 - 0) * var(--vp320-1440-progress), 1);
    --s0-2:clamp(0, 0 + (2 - 0) * var(--vp320-1440-progress), 2);
    --s0-3:clamp(0, 0 + (3 - 0) * var(--vp320-1440-progress), 3);
    --s0-4:clamp(0, 0 + (4 - 0) * var(--vp320-1440-progress), 4);
    --s0-5:clamp(0, 0 + (5 - 0) * var(--vp320-1440-progress), 5);
    --s0_85-4:clamp(0.85, 0.85 + (4 - 0.85) * var(--vp320-1440-progress), 4);
    --s0_85-5:clamp(0.85, 0.85 + (5 - 0.85) * var(--vp320-1440-progress), 5);
    --s1_2_4:clamp(1.2, 1.2 + (4 - 1.2) * var(--vp320-1440-progress), 4);
    --s1_2-2:clamp(1.2, 1.2 + (2 - 1.2) * var(--vp320-1440-progress), 2);
    --s1_2-3:clamp(1.2, 1.2 + (3 - 1.2) * var(--vp320-1440-progress), 3);
    --s1_2-2_8:clamp(1.2, 1.2 + (2.8 - 1.2) * var(--vp320-1440-progress), 2.8);

    --smin-0-768-2:clamp(0, 0 + (2 - 0) * var(--vp320-768-progress), 2);
    --smin-0_85-768-4: clamp(0.85, 0.85 + (4 - 0.85) * var(--vp320-768-progress), 4);
    --smin-1_2-768-2_2:clamp(1.2, 1.2 + (2.2 - 1.2) * var(--vp320-768-progress), 2.2);
    --smin-1_2-768-2_5:clamp(1.2, 1.2 + (2.5 - 1.2) * var(--vp320-768-progress), 2.5);
    --s768-2_2-max-3:clamp(2.2, 2.2 + (3 - 2.2) * var(--vp768-1440-progress), 3);
    --s768-2_5-max-3:clamp(2.5, 2.5 + (3 - 2.5) * var(--vp768-1440-progress), 3);



    --fluid-100-50: clamp(50%, calc(100% + ((-100% + 50%) * var(--vp320-1440-progress))), 100%);
    --fluid-100-85: clamp(85%, calc(100% + ((-100% + 85%) * var(--vp320-1440-progress))), 100%);
    --fluid-15-20: clamp(15%, calc(20% + ((15% - 20%) * var(--vp320-1440-progress)) ), 20%);
    --t: calc((100% - (var(--s16-32) * 2)) / 3);
    --fluid-33-85: clamp(var(--t), calc(85% + ((var(--t) - 85%) * var(--vp320-1440-progress)) ), 85%);
    --fluid-50-85: clamp(50%, calc(85% + ((50% - 85%) * var(--vp320-1440-progress)) ), 85%);
    --fluid-66-85: clamp(66%, calc(85% + ((66% - 85%) * var(--vp320-1440-progress)) ), 85%);
    --fluid-100-85: clamp(85%, calc(100% + ((-100% + 85%) * var(--vp320-1440-progress))), 100%);
    --fluid-100-85-max992: clamp(85%, calc(100% + ((-100% + 85%) * var(--vp320-992-progress))), 100%);
    --fluid-200-100: clamp(100%, calc(200% + ((-200% + 100%) * var(--vp320-1440-progress))), 200%);
    --fluid-250-100: clamp(100%, calc(250% + ((-250% + 100%) * var(--vp320-1440-progress))), 250%);
    --fluid-250-100-max992: clamp(100%, calc(250% + ((-250% + 100%) * var(--vp320-992-progress))), 250%);
    --fluid-250-100-max768: clamp(100%, calc(250% + ((-250% + 100%) * var(--vp320-768-progress))), 250%);

    --fluid-0-col-gap-max768: clamp(0%, calc(0% + ((var(--col-gap) + 0%) * var(--vp320-768-progress)) ), var(--col-gap));
    --fluid-col-gap-0-max768: clamp(0%, calc(0% + ((var(--col-gap) + 0%) * var(--vp320-768-progress)) ), var(--col-gap));

    --fluid-inverse-0-1rem: clamp(0rem, calc(1rem - (1rem * var(--vp320-768-progress))), 1rem);
    --fluid-inverse-0-2rem: clamp(0rem, calc(2rem - (2rem * var(--vp320-768-progress))), 2rem);
    --fluid-inverse-100-85: clamp(100%, calc(85% - (85% * var(--vp320-768-progress))), 85%);
    /* /fluid scalers */


    /* scrollbars */
    --sb-track-color: rgba(102,102,102,0.05);
    --sb-thumb-color: var(--light-green);
    --sb-thumb-color-dark: var(--dark-green);
    --sb-size: clamp(5px, calc((16 / var(--maxWidth)) * 100vw), 1rem);
    /* /scrollbars */

    /* transitions */
    --g-duration: 0.2s;
    --g-delay: 0.2s;
    --bez1: cubic-bezier(0.25, 1, 0.5, 1);
    --form-transition: all var(--g-duration) var(--bez1) 0s;
    /* /transitions */

    /* objects */

    /* /objects */
    --down-arrow-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3e%3cpath fill='currentColor' d='M12.5,19.99c-.63,0-1.27-.24-1.75-.72L.72,9.24c-.97-.97-.97-2.53,0-3.5.97-.97,2.53-.97,3.5,0l8.28,8.28,8.28-8.28c.97-.97,2.53-.97,3.5,0,.97.97.97,2.53,0,3.5l-10.03,10.03c-.48.48-1.12.72-1.75.72Z'/%3e%3c/svg%3e");
    --check-svg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3e%3cpath fill='currentColor' d='M9.14,21.68c-.64,0-1.28-.24-1.77-.73L.73,14.31c-.98-.98-.98-2.56,0-3.54.98-.98,2.56-.98,3.54,0l4.87,4.87,11.59-11.59c.98-.98,2.56-.98,3.54,0,.98.98.98,2.56,0,3.54l-13.36,13.36c-.49.49-1.13.73-1.77.73Z'/%3e%3c/svg%3e");
    --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 23.88'%3E%3Cpath d='M24.95,9.04c-.14-.44-.55-.74-1.01-.74h-7.96L13.51.74c-.14-.44-.55-.74-1.01-.74,0,0,0,0,0,0-.46,0-.87.3-1.01.74l-2.46,7.57H1.07c-.46,0-.87.3-1.01.74-.14.44.01.92.39,1.19l6.44,4.68-2.46,7.57c-.14.44.01.92.39,1.19.19.14.41.2.63.2s.44-.07.63-.2l6.44-4.68,6.44,4.68c.19.14.41.2.63.2s.44-.07.63-.2c.37-.27.53-.75.39-1.19l-2.46-7.57,6.44-4.68c.37-.27.53-.75.39-1.19Z'/%3E%3C/svg%3E");

    /* masks */
    --fade-out-top-small: linear-gradient(to bottom, transparent 0%, black var(--s16-32), black 100%);
    --fade-out-top-half: linear-gradient(to bottom, transparent 0%, black 100%);
    --fade-out-top-2-3: linear-gradient(to bottom, transparent 0%, transparent 66%, black 100%);
    --fade-out-top-bottom-small: linear-gradient(to bottom, transparent 0%, black var(--s16-32), black calc(100% - var(--s16-32)), transparent 100%);
    --fade-out-top-bottom-block-padding-y: linear-gradient(to bottom, transparent 0%, black var(--block-padding-y), black calc(100% - var(--block-padding-y)), transparent 100%);
    --fade-out-top-bottom-2x-block-padding-y: linear-gradient(to bottom, transparent 0%, black calc(var(--block-padding-y) * 2), black calc(100% - calc(var(--block-padding-y) * 2)), transparent 100%);
    /* /masks */

    /* entrances */
    --anim-duration: 0.8s;
    --anim-easing: cubic-bezier(0.25, 1, 0.5, 1); /* Soft, expensive feel */
    --anim-distance: 30px; /* Subtle movement */
    /* entrances */

}

html, body {
    overflow-x: clip;
}

/* *::-webkit-scrollbar, 
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
    background: transparent;
    border-color: transparent;
    will-change: background-color, border;
    transition: 
        background-color var(--anim-duration) var(--anim-easing),
        border var(--anim-duration) var(--anim-easing);
} */

/* scrollbars */
* {
    scrollbar-gutter: stable; 
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}
*:hover:not(html) {
    scrollbar-color: var(--sb-thumb-color) transparent;
}
*::-webkit-scrollbar {
    width: var(--sb-size);
}
*::-webkit-scrollbar-track {
  border-radius: clamp(5px, calc((16 / var(--maxWidth)) * 100vw), 1rem);
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: clamp(5px, calc((16 / var(--maxWidth)) * 100vw), 1rem);
  border: transparent;
  background-color: transparent;
  border-color: var(--white);
}
*:hover::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb-color) /* Reveal on hover */
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-color) /* Darken when grabbing */
}


/* animations */

/* 1. Set the initial state for all children of a scroll-observed section */
[observe-on-scroll] > *,
[observe-on-scroll] .kw-inner > *,
[observe-on-scroll] .hero-media,
[observe-on-scroll] .wp-block-column, 
[observe-on-scroll] .enter-on-parent-visible {
    opacity: 0;
    transform: translateY(var(--anim-distance));
    filter: blur(0px);
    will-change: opacity, transform, filter;
    transition: 
        opacity var(--anim-duration) var(--anim-easing),
        transform var(--anim-duration) var(--anim-easing),
        filter var(--anim-duration) var(--anim-easing);
}

/* 2. Reveal when parent gains .is-visible */
.is-visible > *,
.is-visible .kw-inner > *,
.is-visible .hero-media,
.is-visible .wp-block-column,
.is-visible .enter-on-parent-visible  {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* 3. The Stagger Strategy (The "Magic") */
/* We target the direct children of the inner container to stagger them automatically */
.is-visible .kw-inner > *:nth-child(1),
.is-visible .enter-on-parent-visible > *:nth-child(1) { transition-delay: 0.1s; }
.is-visible .kw-inner > *:nth-child(2),
.is-visible .enter-on-parent-visible > *:nth-child(2)  { transition-delay: 0.2s; }
.is-visible .kw-inner > *:nth-child(3),
.is-visible .enter-on-parent-visible > *:nth-child(3) { transition-delay: 0.3s; }
.is-visible .kw-inner > *:nth-child(4),
.is-visible .enter-on-parent-visible > *:nth-child(4)  { transition-delay: 0.4s; }
.is-visible .kw-inner > *:nth-child(5),
.is-visible .enter-on-parent-visible > *:nth-child(5)  { transition-delay: 0.5s; }

/* Special Case: Columns (Usually want a slower stagger) */
.is-visible .wp-block-columns .wp-block-column:nth-child(1) { transition-delay: 0.2s; }
.is-visible .wp-block-columns .wp-block-column:nth-child(2) { transition-delay: 0.4s; }
.is-visible .wp-block-columns .wp-block-column:nth-child(3) { transition-delay: 0.6s; }

/* Special Case: Hero Media (Reveal first or with headline) */
.is-visible .hero-media { transition-delay: 0s; transition-duration: 1.5s; }
/* /animations */

/* globals */
* {
    color:var(--main-text-colour);
    box-sizing: border-box;
}

.wp-site-blocks {
    background:var(--light-gray);
}
.wp-block-post-content{
    width:100%;
}
:root :where(.is-layout-flow) > * {
    margin-block-start: 0!important;
    margin-block-end: 0 !important;
}
main {
    margin: 0 auto;
    max-width: var(--maxWidthPX);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
}
header, footer {
    width: 100%;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    letter-spacing: -0.003em;
    line-height: 0.95em;
    margin:0;
}
h1, .h1 {
    font-size: var(--s48-75);
}
h2, .h2 {
    font-size: var(--s24-32);
}
h3, .h3 {
    font-size: var(--s16-22);
}
h1 > span,
.h1 > span,
h2 > span,
.h2 > span {
    font-weight: 100;
}
p, li {
    font-size: var(--s16-22);
    margin: 0;
    padding: 0;
    line-height: calc(var(--s16-22) * 1.4);
}
p .feature, li .feature {
    font-size: calc(var(--s16-22) * 1.5);
    line-height: calc(var(--s16-22) * 1.4);
}
p.block-intro-paragraph {
    text-wrap: balance;
    font-family: var(--wp--preset--font-family--helvetica-neue);
    font-weight: 600;
}
p + h2,
ul + h2 {
    margin-top:var(--block-padding-y);
}
p + h3,
ul + h3 {
    margin-top:var(--block-gap);
}
a:hover {
    text-decoration: underline;
}
.entry-content > * > :last-child:not(div) {
    padding-bottom: 0;
    margin-bottom: 0;
}
span.red, 
.red-text {
    color:var(--red) !important;
}
span.yellow,
.yellow-text {
    color:var(--yellow) !important;
}
.feature {
    font-family: var(--wp--preset--font-family--caflish-pro);
    font-size: 1.55em;
}




/* buttons */
/* buttons */
.btn {
    font-size: var(--button-font-size);
    border-radius: 0;
    border: 0px solid transparent;
    outline: 0px solid transparent;
    padding: var(--button-padding);
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0.03em;
    transform: scale(1);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 1;
    filter:drop-shadow(none);
    z-index: 1;
    line-height: 0;
    transition:transform 0.2s var(--anim-easing),
        outline-width 0.2s var(--anim-easing),
        outline-color 0.2s var(--anim-easing),
        filter 0.8s ease-in;
    justify-content: center;
    cursor: pointer;
    color:var(--white);
    text-transform: capitalize;
}
.btn:before, 
.btn:after {
    position:absolute;
    top:50%;
    left:50%;
    width: 100%;
    height: 100%;
    transform:translate(-50%, -50%);
    content:"";
    z-index: -1;
    border-radius: var(--s1-3);
}
.btn::after {
    border-radius: calc(var(--s5-8) - 0.5px);
    width: calc(100% - 1px);
    height: calc(100% - 1px);
}
.btn:hover {
    transform:scale(1.05);
    outline-width:var(--button-borders);
    outline-color:transparent;
    filter:drop-shadow(var(--engagement-shadow));
    z-index: 2;
    text-decoration: none;
}
.btn.small {
    font-size: var(--small-btn-font-size);
    border-radius: var(--s1-5);
    padding: var(--small-button-padding);
    min-width: 0;
}
.btn.primary::before,
.btn.red:before{
    background-color:var(--red);
}

.btn.secondary:before {
    background-color:var(--dark-grey);
}
.btn.yellow::before{
    background-color:var(--yellow);
}
.btn.yellow {
    color:var(--dark-grey);
}
.btn.primary, 
.btn.red {
    color: var(--white);
}
.grey-transparent-btn:before, 
.light-grey-btn:before {
    background-color:var(--light-gray);
    opacity:0.25;
}
.white-btn:before {
    background-color:#fff;
}
@media(max-width:360px){
    .btn {
        flex-grow:1;
    }
}
/* /buttons */


/* forms */
form .hidden {
    position: absolute;
    top:-9999%;
    left:-9999%;
    overflow: hidden;
    width:0;
    height: 0;
}

/* Keyframes */
@keyframes clock-spin { 100% { transform: translate(-50%,0) rotate(360deg); } }


/* Utilities & Structural Setup */
.grecaptcha-badge { visibility: hidden; }
.wpcf7 {width:100%;}
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7-form-control-wrap, .wpcf7-form .select-wrapper, .enquiry-block-positive-response-container { display: flex; flex-direction: column; position: relative; width: 100%; }
.wpcf7-form label { display: flex; flex-direction: column; gap: var(--s1-5); flex-grow:1; width:25%; }
.wpcf7-form label.small {width:20%; flex-grow:0; min-width:50px}
.wpcf7-form label.medium {width:25%; flex-grow:0;}
.wpcf7-form label.full {width:100%}
.wpcf7-form label .label { font-size: var(--tiny); text-align:left;}
form .request-container { display: flex; flex-direction: column; width: 100%;  gap: var(--s10-16); transition: opacity 0.2s ease-in-out; position: relative; opacity: 0; position:relative }
form .form-row { display: flex; flex-direction: row; gap: var(--s10-16); max-width: 100%; flex-wrap: wrap; }
form .form-row:last-of-type {justify-content:end; margin-top:calc(var(--s12-16) * 0.5);}
/* Main Form State */
.wpcf7-form { position: relative; transition: var(--form-transition); opacity: 1; }
.wpcf7-form[data-status='init'] .request-container, .wpcf7-form[data-status='invalid'] .request-container { opacity: 1; }

/* Loading Spinner (Before/After) */
.wpcf7-form::before, .wpcf7-form::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; border: 5px solid var(--white); pointer-events: none; z-index: 11; transform: translate(-50%,0); transform-origin: 50% 2.5px; border-radius: 10px; transition: var(--form-transition); opacity: 0; animation: clock-spin linear 1s infinite; }
.wpcf7-form::before { height: 30px; animation-duration: 5s; }
.wpcf7-form::after { height: 50px; }
.wpcf7-form[data-status='submitting']::before, .wpcf7-form[data-status='submitting']::after { opacity: 1; }
.wpcf7-form[data-status='submitting'] .request-container { opacity: .5; filter: blur(2px); pointer-events: none; }

/* Messages & Response Outputs */
.wpcf7-form .off-screen, .wpcf7 .screen-reader-response { position: absolute; top: -200vw; left: -200vw; width: 0; height: 0; overflow: hidden; }
.wpcf7-not-valid-tip { position: absolute; top: calc(100% + 2rem); width: 100%; display: flex; opacity: 0; transition: var(--form-transition); align-items: center; justify-content: center; padding: 1rem; border-radius: var(--s12-16); border: .5px solid var(--light-gray); box-sizing: border-box; box-shadow: var(--engagement-shadow); pointer-events: none; z-index: 1; font-size: var(--s10-16); }
.wpcf7-form .wpcf7-response-output {position: absolute;
    top: calc(100% + 5px);
    border-radius: var(--s1-5);
    margin: 0;}
.kw-response-overlay {
    /*position:absolute;*/
    width:100%;
    display: none;
}
.kw-response-overlay.show {
    display: flex;
}

/* Inputs & Selects */
form * {font-family: var(--main-font-family);}
.wpcf7-form input {color:var(--main-text-colour);background:transparent}
.wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form select, .wpcf7-form textarea { padding:var(--s10-16); border: 1px solid var(--light-input-colour); box-sizing: border-box; font-size: var(--s10-16); border-radius: var(--s1-5); }
.wpcf7-form textarea { height: var(--s80-160); resize: none; background:transparent}
.wpcf7-form .select-wrapper {border:0.5px solid var(--light-green);border-radius: var(--s1-5);}
.wpcf7-form select {border:0; appearance: none; padding-right: calc(var(--s10-16) * 3); color:var(--light-input-colour); background: transparent;}
.wpcf7-form select.has-value,
.wpcf7-form :is([type='date']).has-value { color: var(--main-text-colour); opacity:1}
.wpcf7-form :is(input, textarea, select, [type='date'])::placeholder,
.wpcf7-form :is(select, [type='date']) { color: var(--light-input-colour); }
.wpcf7-form :is(input, textarea, select, [type='date']):is(:active, :focus) { outline: 5px solid var(--light-green); }

/* Custom Select Arrow */
.wpcf7-form .select-wrapper::before, .wpcf7-form .select-wrapper::after { position: absolute; top: 50%; right: var(--s10-16); height: var(--s10-16); width: var(--s10-16); border-radius: 0; content: ""; transform: translate(0%,-50%); pointer-events: none;}
.wpcf7-form .select-wrapper::before { border: .5px solid var(---light-input-colour); }
.wpcf7-form .select-wrapper::after {mask-image:var(--down-arrow-svg);line-height:0; background-color: var(--white);}

/* Validation Errors */
.wpcf7-not-valid-tip { top: calc(100% + 1rem); opacity: 1; padding: .5rem 1rem; align-items: flex-start; text-align: left; left: 0; top: calc(100% + 2px); justify-content: flex-start; width: auto; max-width: 100%; z-index: 10; }
.wpcf7-form[data-status='submitting'] .wpcf7-response-output { opacity: 0; transition: none; top: 0; left: 0; }
.wpcf7-form[data-status='invalid'] .wpcf7-response-output, .wpcf7-not-valid-tip { background-color: rgb(255 234 232); border-color: rgb(252 199 194); color: rgb(196 74 63) !important; }
.wpcf7-form[data-status='invalid'] .wpcf7-not-valid {color:var(--white)}
.wpcf7-form[data-status='invalid'] .wpcf7-response-output { top: calc(100% + 1rem); text-wrap: balance; padding: 10px; font-size: var(--s12-16);}
.wpcf7-form[data-status='invalid'] .wpcf7-response-output.show { opacity: 1; }
.wpcf7-form .wpcf7-not-valid { background-color: rgba(255, 248, 247, 0.15); border-color: rgb(252, 194, 194) !important;}
.wpcf7-form .wpcf7-not-valid:is(input, textarea, select, [type='date']):is(:active, :focus) {outline-color: rgb(252, 194, 194) !important;}
/*.wpcf7-form[data-status='invalid'] .wpcf7-validates-as-required[aria-invalid='false'] { background:rgba(252, 194, 194, 0.15); border-color: rgb(252, 194, 194) !important; }*/

/* Success State */
.wpcf7-form[data-status='sent'],
.wpcf7-form[data-status='resetting'] {gap:0}
.wpcf7-form[data-status='sent'] .request-container,
.wpcf7-form[data-status='resetting'] .request-container  { transition: var(--form-transition); opacity: 0; filter: blur(2px); pointer-events: none; height: 0; overflow: hidden;}
.wpcf7-form[data-status='sent'] .wpcf7-response-output,
.wpcf7-form[data-status='resetting'] .wpcf7-response-output,
.wpcf7-form[data-status='submitting'] .wpcf7-response-output { transform: scale(.5); opacity:0}
/* .wpcf7-form[data-status='sent'] .wpcf7-response-output.show { pointer-events: auto; opacity: 1; transform: scale(1); top: 0; left: 0; height: 100%; border-radius: 0; box-shadow: none; border: 0; align-content: center; text-align: center; transition: transform 0.2s ease-in-out 0.3s, opacity 0.2s ease-in-out 0.3s; z-index: 1; } */


.kw-form-wrapper {
    display:flex;
    flex-direction: column;
    gap:var(--list-gap);
    width:100%;
    flex-grow: 1;
    padding: 0;
    margin: 0;
    position:relative;
}
.kw-form-wrapper .btn.submit {
    font-size: var(--small-btn-font-size);
    font-weight: bold;
    color: var(--main-text-colour);
    border-radius: var(--s1-5);
}
.form-support p {
    font-size: var(--s8-12);
    line-height: calc(var(--s8-12) - 1.4);
}
.form-support p a:hover {
    text-decoration: underline;
}
form {
    display: flex;
    flex-direction: column;
    flex:1 1 100%;
    gap: var(--list-gap);
}
form [response],
form .res-content {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 0.5px solid var(--light-green);
    border-radius: var(--s5-8);
    padding: var(--s10-16);
    gap: var(--list-gap);
}
/* /forms */

/* style light */
:root {
    --style-light-bg: var(--light-grey);
}
.style-light:before {
    background: var(--style-light-bg);
}
.style-light,
.style-light *{
    color: var(--dark-grey);
}
.style-light h1,
.style-light h2,
.style-light h3,
.style-light h4 {
    color: var(--dark-grey);
}
.style-light .block-intro-paragraph {
    color:var(--dark-grey);
}
.style-light .form-support p,
.style-light .form-support p a {
    color:var(--dark-grey);
    text-decoration:none;
}
.style-light .btn {
    color: var(--white);
}
.style-light .contain .gallery-item {
    background:var(--style-light-bg);
}
/* /style light */

/* style bright */
:root {
    --style-bright-bg: var(--red);
}
.style-bright::before {
    background: var(--style-bright-bg);
}
.style-bright,
.style-bright *{
    color: var(--white);
}
.style-bright h1,
.style-bright h2,
.style-bright h3,
.style-bright h4 {
    color: var(--white);
}
.style-bright p .feature {
    color: var(--yellow);
}
.style-bright .block-intro-paragraph {
    color:var(--dark-grey);
}
.style-bright .form-support p,
.style-bright .form-support p a {
    color:var(--white);
    text-decoration:none;
}
.style-bright .btn.primary::before,
.style-bright .btn.light-green::before {
    filter:brightness(0.95);
}
.style-bright .btn.primary::after,
.style-bright .btn.light-green::after  {
    border: 0.5px solid var(--white);
    opacity: 0.85;
}
/* /style bright */

/* style mid */
:root {
    --style-mid-bg: var(--mid-grey);
}
.style-mid {
    position:relative;
}
.style-mid::before {
    background: var(--style-mid-bg);
}
.style-mid,
.style-mid *{
    color: var(--white);
}
.style-mid h1,
.style-mid h3,
.style-mid h4 {
    color: var(--red);
}
.style-mid .block-intro-paragraph {
    color:var(--white);
}
.style-mid .form-support p{
    color:var(--white);
}
.style-mid .btn {
    color: var(--white);
}
/* /style mid */


/* style dark */
:root {
    --style-dark-bg: var(--dark-grey);
}
.style-dark::before {
    background: var(--style-dark-bg);
}
.style-dark,
.style-dark *{
    color: var(--white);
}
.style-dark h1,
.style-dark h2 span,
.style-dark h3,
.style-dark h4,
.style-dark .block-intro-paragraph {
    color: var(--yellow)
}
.style-dark .form-support p,
.style-dark .form-support p a {
    color:var(--white);
    text-decoration:none;
}
.style-dark .btn.secondary:before {
    border: 0.5px solid var(--light-grey);
}

.wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form select, .wpcf7-form textarea {border: 1px solid var(--light-grey); }
.style-dark .wpcf7-form:not([data-status='invalid']) input, 
.style-dark .wpcf7-form:not([data-status='invalid']) textarea  {color:var(--white); background: transparent;}

.style-dark .wpcf7-form:not([data-status='invalid']) input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([aria-invalid=true]), 
.style-dark .wpcf7-form:not([data-status='invalid']) select:not([aria-invalid=true]), 
.style-dark .wpcf7-form:not([data-status='invalid']) textarea:not([aria-invalid=true]) { padding:var(--s10-16); border: 1px solid var(--light-green); box-sizing: border-box; font-size: var(--s10-16); border-radius: var(--s1-5); }
.style-dark .wpcf7-form:not([data-status='invalid']) select:not([aria-invalid=true]) {color:var(--light-input-colour); background: transparent; border:0}
.style-dark .wpcf7-form :is(input, textarea, select, [type='date'])::placeholder,
.style-dark .wpcf7-form :is(select, [type='date']) { color: var(--light-input-colour); opacity: 0.5; }
.style-dark .wpcf7-form select.has-value,
.style-dark .wpcf7-form input {color:var(--white);opacity:1}
.style-dark .wpcf7-form label .label {
    padding-left: var(--s10-16);
    opacity: 0.85;
}
.style-dark .wpcf7-form .btn.submit {
    color: var(--white);
}
/* /style dark */

/* progress bar */
.scroll-progress-container {
    position: absolute;
    top: 100%;
    width: calc(100vw + (var(--s5-8) * 2));
    height: var(--s5-8);
    background:transparent;
}
.progress-bar-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(to right, var(--red) 0%, var(--yellow) 100%);
    transition: width 0.15s ease-out; /* Smooths out the increments */
    will-change: width;
    border-radius: var(--s5-8);
    filter: drop-shadow(0px 0px 0.5px var(--dark-grey));
    border: 0.5px solid rgba(255, 255, 255, 0.25);
}
/* /progress bar */

.clear-end >:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.no-pad-top {
    padding-top:0 !important;
}
.no-pad-bottom {
    padding-bottom:0 !important;
}
@media(min-width:1081px){
    .hide-desktop-nav {
        display:none;
    }
}

*[class*='block-'][class*='style-']  {
    position: relative;
    z-index: 1;
}
*[class*='block-'][class*='style-']::before {
    position:absolute;
    top:50%;
    left:50%;
    content: "";
    z-index: -1;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
*[class*='block-'][class*='style-']:not(*[class*='block-'][class*='style-'] [class*='block-'][class*='style-'])::before {
    width: 100vw;
}
/* /helpers */

/* text docs */
article.text-document {
    max-width: calc((var(--maxWidth) * 0.75) * 1px);
    padding: var(--block-padding);
    padding-top: calc(var(--block-padding-y) * 0.25);
    gap: var(--block-gap);
    display: flex;
    flex-direction: column;
}
article.text-document p + h2,
article.text-document p + h3 {
    margin-top:var(--list-gap-wide);
}
/* /text docs */

/* /globals */