/*------------------------------------*\
    REBELLION CAMPERS — GLOBAL STYLES

    NOTE ON UNITS
    html font-size is 62.5% (see style.css), so 1rem = 10px.
    1.6rem = 16px, 4.8rem = 48px. Bootstrap grid gutters
    (1.5rem) therefore resolve to 15px, matching .container.

    CONTENTS
    1.  Design tokens
    2.  Base
    3.  Typography
    4.  Layout + sections
    5.  Utilities
    6.  Buttons
    7.  Forms
    8.  Header / navigation
    9.  Hero
    9b. Page banner
    9c. Tick list
    9d. Services grid + service single
    10. Blocks — text & image
    11. Blocks — image carousel
    12. Feature list
    13. Blocks — contact + form
    14. Gravity Forms
    14a. Datepicker
    14b. Blocks — text & form
    15. Footer
    16. Blocks — process steps
    17. Blocks — campervans carousel
    18. Blocks — video
    19. WYSIWYG content
    20. Cookie bar
    21. Blocks — events
    22. Blocks — gallery grid
    23. Blocks — promise banner
    24. Scroll reveal
\*------------------------------------*/


/*------------------------------------*\
    1. DESIGN TOKENS
\*------------------------------------*/

:root {
    /* Brand colours */
    --color-red: #BF1E2E;
    --color-red-dark: #9C1624;
    --color-gold: #A78C48;
    --color-gold-dark: #8C7439;
    --color-green: #085943;
    --color-green-dark: #05412F;
    --color-ink: #15181B;
    --color-charcoal: #323232;
    --color-grey: #7A776F;
    --color-grey-light: #E4E2DD;
    --color-off-white: #F4F3F0;
    /* Warm panel behind the hire form — estimated from the design */
    --color-sand: #E9E0D3;
    --color-white: #FFFFFF;
    --color-black: #000000;
    /* Semantic colours */
    --color-primary: var(--color-red);
    --color-primary-hover: var(--color-red-dark);
    --color-accent: var(--color-gold);
    --color-accent-hover: var(--color-gold-dark);
    --color-heading: var(--color-charcoal);
    --color-text: var(--color-charcoal);
    --color-text-muted: var(--color-grey);
    --color-link: var(--color-red);
    --color-link-hover: var(--color-red-dark);
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-off-white);
    --color-bg-dark: var(--color-ink);
    --color-border: rgba(21, 24, 27, 0.12);
    --color-border-light: rgba(255, 255, 255, 0.48);
    --color-divider: #E6E1D4;
    /* Panel fills, from the design's surface tokens */
    --color-surface-neutral: #F5F5F3;
    --color-surface-green: #E8EFE9;
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-overlay-strong: rgba(0, 0, 0, 0.7);
    /* Typography */
    --font-body: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-heading: var(--font-body);
    --fw-thin: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --fw-heavy: 800;
    --fw-black: 900;
    /* Fluid type scale — min at 480px viewport, max at 1440px */
    --fs-hero: clamp(3.4rem, 1.65rem + 3.65vw, 6.9rem);
    /* 34 -> 69 */
    --fs-h1: clamp(2.8rem, 1.8rem + 2.08vw, 4.8rem);
    /* 28 -> 48 */
    --fs-h2: clamp(2.6rem, 1.5rem + 2.29vw, 4.8rem);
    /* 26 -> 48, matches the Figma section headings */
    --fs-h3: clamp(2.2rem, 1.9rem + 0.63vw, 2.8rem);
    /* 22 -> 28 */
    --fs-h4: clamp(1.8rem, 1.7rem + 0.21vw, 2rem);
    /* 18 -> 20 */
    --fs-h5: 1.7rem;
    --fs-h6: 1.5rem;
    --fs-body: 1.6rem;
    --fs-lead: 1.6rem;
    --fs-hero-text: clamp(1.6rem, 1.4rem + 0.42vw, 1.8rem);
    /* 16 -> 18, hero intro copy */
    --fs-sm: 1.4rem;
    --fs-xs: 1.3rem;
    --fs-eyebrow: 1.25rem;
    --fs-btn: 1.5rem;
    /* Line heights */
    --lh-hero: 1.05;
    --lh-heading: 1.2;
    --lh-tight: 1.3;
    --lh-body: 1.45;
    --lh-loose: 1.6;
    /* Letter spacing */
    --ls-tight: -0.01em;
    --ls-eyebrow: 0.35rem;
    /* Spacing scale */
    --space-xxs: 0.4rem;
    --space-xs: 0.8rem;
    --space-sm: 1.2rem;
    --space-md: 1.6rem;
    --space-lg: 2.4rem;
    --space-xl: 3.2rem;
    --space-2xl: 4rem;
    --space-3xl: 5.6rem;
    --space-4xl: 8rem;
    /* Vertical rhythm for sections */
    --section-y: clamp(4.8rem, 2.4rem + 5vw, 9rem);
    --section-y-sm: clamp(3.2rem, 2rem + 2.5vw, 5.6rem);
    --section-y-lg: clamp(6.4rem, 3rem + 7vw, 13rem);
    /* Layout */
    --container: 1245px;
    --container-wide: 1440px;
    --container-narrow: 860px;
    --gutter: 15px;
    --header-height: 102px;
    --header-x: clamp(15px, 2.8vw, 40px);
    --logo-height: 84px;
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 40px;
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(21, 24, 27, 0.06);
    --shadow-md: 0 8px 24px rgba(21, 24, 27, 0.1);
    --shadow-lg: 0 18px 50px rgba(21, 24, 27, 0.14);
    /* Motion */
    --transition: 300ms ease;
    --transition-fast: 180ms ease;
}

@media only screen and (max-width: 1140px) {
     :root {
        --header-height: 80px;
        --logo-height: 54px;
    }
}


/*------------------------------------*\
    2. BASE
\*------------------------------------*/

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

svg {
    max-width: 100%;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:not(.btn):hover {
    opacity: 0.8;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-xl) 0;
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
    text-shadow: none;
}


/*------------------------------------*\
    3. TYPOGRAPHY
\*------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
    color: var(--color-heading);
    margin: 0 0 var(--space-md);
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
}

h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
}

h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-medium);
}


/* Hero headline — bigger than a standard page h1 */

.hero h1,
h1.hero-title,
.hero-title {
    font-size: var(--fs-hero);
    line-height: var(--lh-hero);
}


/* Page / banner h1 on inner pages */

.page-title,
.banner h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
}

p {
    margin: 0 0 var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 var(--space-md);
    padding-left: 2.4rem;
}

blockquote {
    margin: var(--space-lg) 0;
    padding-left: var(--space-lg);
    border-left: 3px solid var(--color-accent);
    font-size: var(--fs-h4);
    font-weight: var(--fw-light);
    color: var(--color-heading);
}

strong,
b {
    font-weight: var(--fw-semi);
}

small,
.text-sm {
    font-size: var(--fs-sm);
}

.text-xs {
    font-size: var(--fs-xs);
}


/* Small uppercase label above a heading */

.eyebrow {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-eyebrow);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-md);
}


/* Intro paragraph */

.lead {
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    color: var(--color-accent);
}


/* Numbered card index (01, 02, 03…) */

.step-number {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-heavy);
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.text-white {
    color: var(--color-white);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-accent {
    color: var(--color-accent);
}

.text-primary {
    color: var(--color-primary);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.uppercase {
    text-transform: uppercase;
}


/* Anything inside a dark block inherits light text */

.section--dark,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark p,
.section--dark li {
    color: var(--color-white);
}

.section--dark .eyebrow,
.section--dark .step-number {
    color: var(--color-accent);
}


/*------------------------------------*\
    4. LAYOUT + SECTIONS
\*------------------------------------*/

.container {
    max-width: var(--container);
    box-sizing: border-box;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    margin: 0 auto;
    width: 100%;
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.section--sm {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
}

.section--lg {
    padding-top: var(--section-y-lg);
    padding-bottom: var(--section-y-lg);
}

.section--flush {
    padding-top: 0;
    padding-bottom: 0;
}


/* Spacing on one edge only, from the block's "Apply spacing to" setting.
   These follow the size rules above so they override whichever is in play. */

.section--spacing-top {
    padding-bottom: 0;
}

.section--spacing-bottom {
    padding-top: 0;
}


/* Column gap, from the shared block settings. Any multi-column block can
   read --block-gap; the CSS default is "large" so older content is unchanged. */

.gap-none {
    --block-gap: 0px;
}

.gap-small {
    --block-gap: clamp(2rem, 3vw, 3rem);
}

.gap-medium {
    --block-gap: clamp(2.4rem, 4vw, 6rem);
}

.gap-large {
    --block-gap: clamp(3.2rem, 5vw, 10rem);
}

.gap-xlarge {
    --block-gap: clamp(4rem, 6vw, 14rem);
}

.section--light {
    background-color: var(--color-bg-alt);
}

.section--dark {
    background-color: var(--color-bg-dark);
}

.section-header {
    margin-bottom: var(--space-2xl);
}


/* Decorative contour lines, from the shared section settings.
   Each corner has its own artwork, anchored into that corner. */

.section--deco-top-right,
.section--deco-bottom-left {
    position: relative;
    overflow-x: clip;
}

.section--deco-top-right::before,
.section--deco-bottom-left::before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}

.section--deco-top-right::before {
    top: 0;
    right: 0;
    width: min(520px, 55%);
    aspect-ratio: 734 / 621;
    background-image: url('../img/waves-top-right.png');
    background-position: top right;
}

.section--deco-bottom-left::before {
    bottom: -237px;
    left: 0;
    width: min(473px, 34%);
    aspect-ratio: 939 / 1364;
    background-image: url('../img/waves-bottom-left.png');
    background-position: bottom left;
}

.section>.container {
    position: relative;
    z-index: 1;
}


/* Image / colour overlay helper */

.overlay {
    position: relative;
}

.overlay>* {
    position: relative;
    z-index: 2;
}

.overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay);
    z-index: 1;
}

.overlay--strong::before {
    background-color: var(--color-overlay-strong);
}

.cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.contain {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.flex {
    display: flex;
}

.flex-center {
    align-items: center;
}

.flex-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}


/*------------------------------------*\
    5. UTILITIES
\*------------------------------------*/

.bg-white {
    background-color: var(--color-white);
}

.bg-light {
    background-color: var(--color-bg-alt);
}

.bg-dark {
    background-color: var(--color-bg-dark);
}

.bg-primary {
    background-color: var(--color-primary);
}

.rounded {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rounded-sm {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.shadow {
    box-shadow: var(--shadow-md);
}

.top0 {
    margin-top: 0;
}

.bottom0 {
    margin-bottom: 0;
}

.bottom15 {
    margin-bottom: 15px;
}

.bottom30 {
    margin-bottom: 30px;
}

.bottom60 {
    margin-bottom: 60px;
}

.bottom90 {
    margin-bottom: 90px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/*------------------------------------*\
    6. BUTTONS
\*------------------------------------*/

.btn,
input[type="submit"],
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-medium);
    line-height: 1.4667;
    /* 22px at 15px */
    text-align: center;
    text-decoration: none;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--color-heading);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.btn:hover {
    opacity: 1;
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}


/* Chevron affordance — Font Awesome is already loaded */

.btn--arrow::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    line-height: 1;
    margin-left: var(--space-xxs);
    transition: transform var(--transition);
}

.btn--arrow:hover::after {
    transform: translateX(3px);
}


/* Straight arrow rather than a chevron — used on the vehicle cards */

.btn--arrow-long::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85em;
    line-height: 1;
    margin-left: var(--space-xxs);
    transition: transform var(--transition);
}

.btn--arrow-long:hover::after {
    transform: translateX(3px);
}


/* Primary — solid brand red */

.btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-white);
}


/* Secondary — gold */

.btn--secondary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.btn--secondary:hover,
.btn--secondary:focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
}


/* Green — the "Call Us" action on service price cards */

.btn--green {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

.btn--green:hover,
.btn--green:focus {
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
    color: var(--color-white);
}


/* Glass — sits over hero imagery */

.btn--glass {
    background-color: var(--color-overlay-strong);
    border-color: var(--color-border-light);
    color: var(--color-white);
}

.btn--glass:hover,
.btn--glass:focus {
    background-color: var(--color-black);
    border-color: var(--color-white);
    color: var(--color-white);
}


/* Outline on light backgrounds (e.g. "View Details") */

.btn--outline {
    background-color: transparent;
    border-color: var(--color-heading);
    color: var(--color-heading);
}

.btn--outline:hover,
.btn--outline:focus {
    background-color: var(--color-heading);
    color: var(--color-white);
}


/* Outline on dark backgrounds */

.btn--outline-light {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.btn--outline-light:hover,
.btn--outline-light:focus {
    background-color: var(--color-white);
    color: var(--color-heading);
}


/* Solid white */

.btn--white {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-heading);
}

.btn--white:hover,
.btn--white:focus {
    background-color: var(--color-off-white);
    color: var(--color-heading);
}


/* Text-only link button */

.btn--text {
    padding: 0;
    border-radius: 0;
    border-color: transparent;
    color: var(--color-primary);
}

.btn--text:hover {
    color: var(--color-primary-hover);
}


/* Sizes */

.btn--sm {
    font-size: var(--fs-xs);
    padding: 0.7rem 1.6rem;
}

.btn--lg {
    font-size: 1.6rem;
    padding: 1.4rem 3rem;
}


/* Extra horizontal padding — the "Visit Us" style pill */

.btn--wide {
    padding-left: 5.8rem;
    padding-right: 5.8rem;
}

.btn--block {
    display: flex;
    width: 100%;
}


/* Two buttons side by side */

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

@media only screen and (max-width: 600px) {
    .btn--wide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .btn-group .btn {
        width: 100%;
    }
}


/*------------------------------------*\
    7. FORMS
\*------------------------------------*/

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="password"],
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    background-color: var(--color-white);
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
}

::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-xxs);
}


/* Small uppercase field label — pick-up / return search bar */

.field-label {
    display: block;
    font-size: 1.1rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xxs);
}


/*------------------------------------*\
    8. HEADER / NAVIGATION

    Two states, set in PHP by foundation_header_style():
    .site-header--overlay  transparent, sits on top of a hero / banner image
    .site-header--solid    white, with the #E6E1D4 hairline divider
\*------------------------------------*/

.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 200;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    clip-path: none;
    padding: 12px 20px;
    background-color: var(--color-white);
    color: var(--color-ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.site-header {
    position: relative;
    z-index: 50;
    width: 100%;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--container-wide);
    min-height: var(--header-height);
    margin: 0 auto;
    padding: 12px var(--header-x);
}

.site-header--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent;
}

.site-header--solid {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-divider);
}

.site-header__logo {
    position: relative;
    z-index: 70;
    flex: 0 0 auto;
}

.site-header__logo a {
    display: block;
}

.site-header__logo img {
    display: block;
    width: auto;
    height: var(--logo-height);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-left: auto;
    flex: 0 0 auto;
}

.site-header__actions .btn {
    text-align: left;
    line-height: 1.25;
    max-width: 226px;
}

.site-header__actions--mobile {
    display: none;
}

.burger {
    display: none;
}


/* Dropdown indicator */

.menu-item-has-children::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    display: inline-block;
    margin-left: 6px;
    color: inherit;
    transition: transform var(--transition);
    transform: scaleY(1);
}

.menu-item-has-children.sub-menu-active::after {
    transform: scaleY(-1);
}


/**********
DESKTOP NAV
**********/

@media only screen and (min-width: 1141px) {
    nav.nav {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
    }
    nav.nav>ul {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2vw, 34px);
        list-style: none;
        margin: 0;
        padding: 0;
    }
    nav.nav>ul>li {
        position: relative;
        color: var(--color-ink);
    }
    nav.nav a {
        font-size: var(--fs-body);
        font-weight: var(--fw-regular);
        color: var(--color-ink);
        white-space: nowrap;
    }
    nav.nav>ul>li>a:hover,
    nav.nav .current-menu-item>a {
        color: var(--color-primary);
    }
    /* Overlay state — nav sits on imagery */
    .site-header--overlay nav.nav>ul>li {
        color: var(--color-white);
    }
    .site-header--overlay nav.nav>ul>li>a {
        color: var(--color-white);
    }
    .site-header--overlay nav.nav>ul>li>a:hover {
        opacity: 0.75;
    }
    .site-header--overlay nav.nav .current-menu-item>a {
        color: var(--color-white);
        text-decoration: underline;
        text-underline-offset: 6px;
    }
    /**********
    submenu popup
    **********/
    nav.nav .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        background-color: var(--color-white);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }
    nav.nav .menu-item-has-children.sub-menu-active>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    nav.nav .sub-menu li {
        width: 100%;
    }
    nav.nav .sub-menu a,
    .site-header--overlay nav.nav .sub-menu a {
        display: block;
        padding: 8px 18px;
        font-size: var(--fs-sm);
        color: var(--color-ink);
    }
    nav.nav .sub-menu a:hover {
        color: var(--color-primary);
    }
    /**********
    COLUMNS
    **********/
    .twoCol {
        width: calc(100% + 30px);
        position: relative;
        left: -15px;
    }
    .twoCol .col {
        width: 50%;
        padding: 15px;
    }
    .threeCol .col {
        width: 33.33%;
        padding: 15px;
    }
    .fourCol .col {
        width: 25%;
        padding: 15px;
    }
    .fiveCol .col {
        width: 20%;
        padding: 15px;
    }
}


/**********
MOBILE NAV
**********/

@media only screen and (max-width: 1140px) {
    .flex {
        flex-wrap: wrap;
    }
    body.fix {
        overflow: hidden;
    }
    /* The header button moves inside the panel */
    .site-header>.site-header__inner>.site-header__actions {
        display: none;
    }
    .site-header__actions--mobile {
        display: block;
        margin-top: var(--space-lg);
    }
    nav.nav {
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 60;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        padding: calc(var(--header-height) + 20px) var(--header-x) 40px;
        background-color: var(--color-white);
        overflow-y: auto;
        transition: left var(--transition);
    }
    nav.nav.navActive {
        left: 0;
    }
    nav.nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    nav.nav>ul>li {
        position: relative;
        border-bottom: 1px solid var(--color-divider);
    }
    nav.nav>ul>li>a {
        display: block;
        width: 100%;
        padding: 14px 0;
        font-size: 1.8rem;
        color: var(--color-ink);
    }
    nav.nav .sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition);
    }
    nav.nav .menu-item-has-children.sub-menu-active>.sub-menu {
        max-height: 900px;
    }
    nav.nav .sub-menu a {
        display: block;
        padding: 10px 0 10px 16px;
        font-size: var(--fs-body);
        color: var(--color-text);
    }
    .menu-item-has-children::after {
        position: absolute;
        top: 18px;
        right: 0;
        margin-left: 0;
        color: var(--color-ink);
    }
    /**********
    BURGER
    **********/
    .burger {
        display: block;
        position: relative;
        z-index: 70;
        width: 32px;
        height: 24px;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .burger .innerBurger {
        display: block;
        position: relative;
        height: 100%;
    }
    .burger .innerBurger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--color-ink);
        opacity: 1;
        transition: all var(--transition);
    }
    .site-header--overlay .burger .innerBurger span {
        background-color: var(--color-white);
    }
    .burger .innerBurger span:nth-child(1) {
        top: 0;
    }
    .burger .innerBurger span:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }
    .burger .innerBurger span:nth-child(3) {
        bottom: 0;
    }
    /* Panel is white, so the icon always goes dark once open */
    .burger.navActive .innerBurger span,
    .site-header--overlay .burger.navActive .innerBurger span {
        background-color: var(--color-ink);
    }
    .burger.navActive .innerBurger span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .burger.navActive .innerBurger span:nth-child(2) {
        opacity: 0;
    }
    .burger.navActive .innerBurger span:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
}


/*------------------------------------*\
    9. HERO
\*------------------------------------*/

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(480px, 55vw, 800px);
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-3xl);
    background-color: var(--color-ink);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, var(--hero-overlay, 0.5));
    z-index: 1;
}

.hero>.container {
    position: relative;
    z-index: 2;
}

.hero__content {
    max-width: 620px;
}

.hero h1,
.hero .hero-title {
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.hero__text {
    font-size: var(--fs-hero-text);
    line-height: 1.45;
    color: var(--color-white);
    margin-bottom: var(--space-2xl);
}

@media only screen and (max-width: 767px) {
   
    .hero {
        min-height: 0;
        padding-top: calc(var(--header-height) + var(--space-2xl));
        padding-bottom: var(--space-2xl);
    }
    .hero__text {
        margin-bottom: var(--space-lg);
    }
}


/*------------------------------------*\
    9b. PAGE BANNER

    Inner-page counterpart to the hero. The transparent header sits over it —
    see foundation_header_style().
\*------------------------------------*/

.page-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(340px, 33vw, 480px);
    padding-top: calc(var(--header-height) + var(--space-xl));
    padding-bottom: var(--space-2xl);
    background-color: var(--color-ink);
    overflow: hidden;
}

.page-banner__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* The overlay lives inside .page-banner__media rather than on the banner
   itself. The media div has z-index: 0 and so forms a stacking context —
   anything nested in it is trapped below the banner's own pseudo-elements,
   which is what the contour lines need to sit above. Keeping the overlay in
   there frees both ::before and ::after on .page-banner for the waves. */

.page-banner__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, var(--banner-overlay, 0.55));
    z-index: 1;
}


/* Contour lines pinned to the bottom corners, above the overlay */

.page-banner--waves::before,
.page-banner--waves::after {
    content: "";
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    pointer-events: none;
    z-index: 2;
}

.page-banner--waves::before {
    left: 0;
    background-position: bottom left;
    width: clamp(150px, 36vw, 450px);
    aspect-ratio: 967 / 990;
    background-image: url('../img/page-banner-waves-left.png');
}

.page-banner--waves::after {
    right: 0;
    background-position: bottom right;
    width: clamp(110px, 23vw, 325px);
    aspect-ratio: 642 / 990;
    background-image: url('../img/page-banner-waves-right.png');
}

/* Only the price-card banner stops clipping, so only its waves need capping —
   an uncapped one would spill up over the header. contain scales the artwork
   down to fit rather than cropping it. */

.page-banner--has-card.page-banner--waves::before,
.page-banner--has-card.page-banner--waves::after {
    max-height: 100%;
}

.page-banner>.container {
    position: relative;
    z-index: 3;
}

.page-banner__content {
    max-width: 1018px;
    margin: 0 auto;
    text-align: center;
}

.page-banner__heading {
    color: var(--color-white);
    margin: 0 0 var(--space-md);
}

.page-banner__text {
    font-size: var(--fs-hero-text);
    line-height: 1.45;
    color: var(--color-white);
    margin-bottom: var(--space-xl);
}

.page-banner__buttons {
    justify-content: center;
    margin-top: 0;
}


/* Breadcrumbs */

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--fs-sm);
    line-height: 2.2;
    color: #EADED0;
}

.breadcrumbs__item+.breadcrumbs__item::before {
    content: ">";
    color: #EADED0;
    opacity: 0.7;
}

.breadcrumbs__item a {
    color: #EADED0;
}

.breadcrumbs__item a:hover {
    color: var(--color-white);
}

.breadcrumbs__item--current {
    font-weight: var(--fw-semi);
}

.page-banner__breadcrumbs {
    margin-bottom: var(--space-xs);
}

@media only screen and (max-width: 767px) {
    .page-banner {
        min-height: 0;
        padding-top: calc(var(--header-height) + var(--space-2xl));
        padding-bottom: var(--space-2xl);
    }
    .page-banner--waves::before,
    .page-banner--waves::after {
        opacity: 0.6;
    }
}


/*------------------------------------*\
    9c. TICK LIST

    One asset (img/icon-check-white.svg) covers both variants: a white check
    on a gold disc by default, and the bare white check on imagery.
\*------------------------------------*/

.tick-list {
    display: grid;
    gap: var(--space-sm);
    list-style: none;
    margin: var(--space-lg) 0 0;
    padding: 0;
}

.tick-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* The disc; the check itself is the masked pseudo-element below. A mask is
   used rather than a background image because the asset is white-only and the
   banner variant needs a gold check. */

.tick-list__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tick-size, 30px);
    height: var(--tick-size, 30px);
    margin-top: 0.2rem;
    border-radius: 50%;
    background-color: var(--tick-disc, var(--color-accent));
}

.tick-list__icon::before {
    content: "";
    display: block;
    width: var(--tick-check-size, 15px);
    height: var(--tick-check-size, 15px);
    background-color: var(--tick-check, var(--color-white));
    -webkit-mask-image: url('../img/icon-check-white.svg');
    mask-image: url('../img/icon-check-white.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.tick-list__text {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: 1.45;
    color: var(--color-text);
}


/* Bare gold check on imagery — no disc, 16px per the design */

.tick-list--plain {
    --tick-disc: transparent;
    --tick-check: var(--color-accent);
    --tick-size: 16px;
    --tick-check-size: 100%;
}

.tick-list--plain .tick-list__text {
    color: var(--color-white);
}


/*------------------------------------*\
    9d. SERVICES GRID + SERVICE SINGLE
\*------------------------------------*/

.services-grid .section-header {
    margin-bottom: var(--space-2xl);
}

.services-grid.align-center .section-header {
    text-align: center;
}

.services-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--services-cols, 3), minmax(0, 1fr));
    gap: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Carousel variant — Slick needs the track to lay out, so the grid is off.
   Dark chevrons in the margin, as on the campervans carousel. */

.services-grid--carousel .services-grid__list {
    --arrow-color: #888888;
    --arrow-size: 22px;
    --arrow-weight: 3px;
    display: block;
    position: relative;
    /* Pull the track out by the slide padding below, so the outer cards' edges
       land exactly on the container rather than 12px inside it. The chevrons
       move out into the page margin to make room — see the arrow rules. */
    margin-left: calc(-1 * var(--space-lg) / 2);
    margin-right: calc(-1 * var(--space-lg) / 2);
    padding: 0;
}

.services-grid--carousel .services-grid__item {
    padding: 0 calc(var(--space-lg) / 2);
}


/* Before Slick initialises, show only the first row */

.services-grid--carousel .services-grid__list:not(.slick-initialized) {
    display: grid;
    /* No track yet, so no slide padding to compensate for */
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.services-grid--carousel .services-grid__list:not(.slick-initialized) .services-grid__item {
    padding: 0;
}

.services-grid--carousel .services-grid__list:not(.slick-initialized) .services-grid__item:nth-child(n+4) {
    display: none;
}

.services-grid__buttons {
    justify-content: center;
    margin-top: var(--space-2xl);
}

.services-grid.align-left .services-grid__buttons {
    justify-content: flex-start;
}

.service-card {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-grey-light);
    aspect-ratio: var(--services-ratio, 1/1);
}

.service-card:hover {
    opacity: 1;
}

.service-card__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.service-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 600ms ease;
}

.service-card:hover .service-card__img {
    transform: scale(1.04);
}


/* Scrim so the name stays readable whatever the photo */

.service-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.service-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--space-lg) var(--space-xl);
    font-size: 24px;
    line-height: 1.35;
    text-align: center;
    color: var(--color-white);
}

@media only screen and (max-width: 767px) {
    .services-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    /* Slick drops the arrows below 768px, so reclaim their gutter */
    .services-grid--carousel .services-grid__list {
        padding: 0;
    }
}

@media only screen and (max-width: 479px) {
    .services-grid__list {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Service banner — left aligned, with the price card alongside */

.page-banner--service .page-banner__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
}

.page-banner__content--left {
    max-width: 680px;
    margin: 0;
    text-align: left;
}

.page-banner__content--left .breadcrumbs__list {
    justify-content: flex-start;
}

.page-banner__content--left .page-banner__buttons {
    justify-content: flex-start;
}


/* Tighter stack than the centred page banner — the service banner carries
   more elements (breadcrumbs, title, intro, ticks) in the same height */

.page-banner--service .page-banner__heading {
    margin-bottom: var(--space-sm);
}

.page-banner--service .page-banner__text {
    margin-bottom: 0;
}

.page-banner__ticks {
    margin-top: var(--space-lg);
}


/* Price card */

.price-card {
    --card-overlap: clamp(2.4rem, 3vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    padding: clamp(2rem, 2.2vw, 3rem);
}

.price-card__label {
    display: block;
    font-size: 1.2rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.2rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-charcoal);
}

.price-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0;
}

.price-card__amount {
    font-size: clamp(3.6rem, 3.4vw, 4.8rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.1rem;
    line-height: 1;
    color: var(--color-primary);
}

.price-card__note {
    font-size: var(--fs-sm);
    color: var(--color-charcoal);
}

.price-card__text {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--color-charcoal);
    margin: 0;
}


/* Hairline above the actions, as in the design */

.price-card__buttons {
    display: grid;
    gap: 1.4rem;
    margin: 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--color-border);
}

.price-card__buttons .btn {
    width: 100%;
    padding: 1.4rem 2rem;
    font-size: var(--fs-body);
    font-weight: var(--fw-semi);
}

.price-card__contact {
    font-size: var(--fs-xs);
    color: var(--color-charcoal);
    text-align: center;
    margin: 0;
}

@media only screen and (min-width: 992px) {
     .promise-banner__heading {
        padding-right: 8.5rem;
    }
    .page-banner--service .page-banner__grid {
        /* 480px matches the design's card (420 content + 30 padding each side) */
        grid-template-columns: minmax(0, 1fr) 480px;
        gap: var(--space-2xl);
        align-items: start;
    }
    .page-banner--service .page-banner__content--left {
        /* Nudge the copy down so it optically centres against the card */
        padding-top: var(--space-lg);
    }
    .page-banner--has-card {
        /* The card crosses this edge, so the banner must not clip it */
        overflow: visible;
    }
    /* The card hangs past the banner edge, as in the design. Sitting it on the
       container's bottom edge and then pulling it down by the banner's own
       padding-bottom plus the overlap makes the amount exact — pulling a
       start-aligned card instead left the overlap at the mercy of whichever
       grid column happened to be taller. */
    .page-banner--has-card .price-card {
        align-self: end;
        margin-bottom: calc(-1 * (var(--space-2xl) + var(--card-overlap)));
    }
}

@media only screen and (max-width: 991px) {
    .page-banner--service {
        padding-bottom: var(--space-2xl);
    }
    .price-card {
        max-width: 480px;
    }
}


/*------------------------------------*\
    10. BLOCKS — TEXT & IMAGE

    Flexible content layout "text_image".
    Column split comes from --ti-content / --ti-media so the ratio holds
    whichever side the image is on.
\*------------------------------------*/

.text-image__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-gap, clamp(3.2rem, 5vw, 10rem));
}

.text-image__content {
    flex: var(--ti-content, 40) 1 0;
    min-width: 0;
}

.text-image__media {
    flex: var(--ti-media, 60) 1 0;
    min-width: 0;
}

.text-image--image-left .text-image__media {
    order: -1;
}


/* Cut-out PNGs sit on the page with no frame */

.text-image--frame-plain .text-image__img {
    border-radius: 0;
}


/* Gold contour lines behind the image. Sized from the media box and allowed
   to spill past it; overflow-x: clip stops the page scrolling sideways while
   still letting the graphic breathe above and below (unlike overflow: hidden,
   which would force clipping on both axes). */

.text-image--backdrop {
    overflow-x: clip;
}

.text-image--backdrop .text-image__media {
    position: relative;
}

/* Two independent layers so they can appear together: ::before is the
   left-hand graphic (sits low), ::after the right-hand one (sits high).
   Together they wrap around the image, which is how the design uses them. */

.text-image--backdrop .text-image__media::before,
.text-image--backdrop .text-image__media::after {
    content: "";
    display: none;
    position: absolute;
    width: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.text-image--backdrop-left .text-image__media::before {
    display: block;
    left: var(--backdrop-left-x, -16%);
    bottom: var(--backdrop-left-y, -4%);
    height: var(--backdrop-left-h, 100%);
    aspect-ratio: 1118 / 1016;
    background-image: url('../img/image-waves-left.png');
}

.text-image--backdrop-right .text-image__media::after {
    display: block;
    right: var(--backdrop-right-x, -12%);
    top: var(--backdrop-right-y, -10%);
    height: var(--backdrop-right-h, 112%);
    aspect-ratio: 1066 / 1096;
    background-image: url('../img/image-waves-right.png');
}

/* Style 2 — the concentric closed contours, as used on the Key Features
   section. Same placement, different artwork and intrinsic shape. */

.text-image--backdrop-style-2.text-image--backdrop-left .text-image__media::before {
    aspect-ratio: 4 / 4;
    background-image: url('../img/image-waves-left-style-2.png');
    left: -410px;
    bottom: -244px;
    right: unset !important;
    max-width: 686px;
}
.vw-t7-conversions .promise-banner{
    position: relative;
    z-index: 1;
}
.vw-t7-conversions .text-image{
    position: relative;
    z-index: 0;
}
.text-image--backdrop-style-2.text-image--backdrop-right .text-image__media::after {
    aspect-ratio: 4 / 5;
    background-image: url('../img/image-waves-right-style-2.png');
    max-width: 686px;
    right: -345px;
    top: -512px;
    max-width: 653px;
    z-index: -1;

}

.text-image--backdrop .text-image__img {
    position: relative;
    z-index: 1;
}


/* White contour lines over the bottom-left of the photo (image on the left
   only — see the template). Drawn above the image, unlike the gold waves above,
   which sit behind it, and allowed to spill a little past the corner as the
   design does. Its own element, so both effects can be used on one block. */

.text-image__media {
    position: relative;
}

.text-image__contour {
    position: absolute;
    left: var(--ti-contour-x, -4%);
    bottom: var(--ti-contour-y, -1%);
    width: var(--ti-contour-w, 85%);
    aspect-ratio: 989 / 804;
    background-image: url('../img/contour-white-image-bg-left-btm.png');
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    /* Above the photo, below anything interactive */
    z-index: 2;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .text-image__contour {
        width: var(--ti-contour-w-mobile, 72%);
    }
}

@media only screen and (max-width: 767px) {
    .text-image--backdrop-left .text-image__media::before {
        height: var(--backdrop-left-h-mobile, 85%);
        left: var(--backdrop-left-x-mobile, -8%);
    }
    .text-image--backdrop-right .text-image__media::after {
        height: var(--backdrop-right-h-mobile, 95%);
        right: var(--backdrop-right-x-mobile, -6%);
    }
}


/* Column splits — text / image */

.text-image--50-50 {
    --ti-content: 50;
    --ti-media: 50;
}

.text-image--40-60 {
    --ti-content: 40;
    --ti-media: 60;
}

.text-image--30-70 {
    --ti-content: 30;
    --ti-media: 70;
}

.text-image--60-40 {
    --ti-content: 60;
    --ti-media: 40;
}

.text-image__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}


/* Optional crop, driven by the ACF "Crop" select */

.text-image__img.is-cropped {
    aspect-ratio: var(--ti-crop, 1/1);
    object-fit: cover;
    object-position: center center;
}

.text-image__intro {
    margin-bottom: var(--space-lg);
}

.text-image__text {
    margin-bottom: 0;
}


/* Second copy block, below the tick list */

.text-image__text--after {
    margin-top: var(--space-lg);
}

.text-image__content .btn-group {
    margin-top: var(--space-xl);
}

.text-image__content .feature-list+.btn-group {
    margin-top: var(--space-2xl);
}

@media only screen and (max-width: 991px) {
    .text-image__grid {
        flex-direction: column;
        align-items: stretch;
        /* Keep breathing room when stacked, even on "None" */
        row-gap: max(var(--block-gap, 3.2rem), 2.4rem);
    }
    .text-image__content,
    .text-image__media {
        flex: 1 1 100%;
        width: 100%;
    }

    /* Stacked, the picture always leads — whichever side it takes at desktop.
       The content comes first in the markup, so this is an explicit order on
       both children rather than only on the image. */
    .text-image__media {
        order: -1;
    }

    .text-image__content {
        order: 0;
    }
}


/*------------------------------------*\
    11. BLOCKS — IMAGE CAROUSEL (Slick)
\*------------------------------------*/

.image-carousel .section-header {
    margin-bottom: var(--space-2xl);
}

.image-carousel.align-center .section-header {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.image-carousel__slider {
    position: relative;
    z-index: 1;
}


/* Before Slick initialises, only show the first slide so there is no
   flash of a stacked column. */

.image-carousel__slider:not(.slick-initialized) .image-carousel__slide+.image-carousel__slide {
    display: none;
}

.image-carousel__slide {
    padding: 0 12px;
}

.image-carousel__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--carousel-ratio, 16/9);
    /* Height ceiling so slides don't get enormous on very wide screens.
       It grows with the viewport — 567px at 1440 (the natural 16:9 height, so
       no crop there), ~660px at 1920, topping out at 780px. Wherever the cap
       bites, the slide becomes wider than the chosen ratio and object-fit
       crops it; a taller cap means less of the photo is lost.
       The ACF "Max slide height" field replaces this with a fixed px value. */
    max-height: var(--carousel-max-h, clamp(48rem, 28.8rem + 19.4vw, 78rem));
    object-fit: cover;
    object-position: center center;
    border-radius: var(--radius-md);
}

.image-carousel__buttons {
    margin-top: var(--space-2xl);
}

.image-carousel.align-center .image-carousel__buttons {
    justify-content: center;
}


/* Text position "below" — one row under the slider: copy on the left, buttons
   pushed to the right. The copy is left-aligned even in a centred block, which
   is why it lives here rather than in .section-header. */

.image-carousel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg) var(--space-2xl);
    margin-top: var(--space-2xl);
    text-align: left;
}

.image-carousel__footer .image-carousel__text {
    /* Long paragraphs stay readable rather than running the full width */
    flex: 1 1 auto;
    max-width: 62ch;
}

.image-carousel__footer .image-carousel__text :last-child {
    margin-bottom: 0;
}

/* Its own margin comes from the row */

.image-carousel__footer .image-carousel__buttons {
    flex: 0 0 auto;
    margin-top: 0;
}

.image-carousel.align-center .image-carousel__footer .image-carousel__buttons {
    justify-content: flex-end;
}

/* Stacked once there is no room for two columns */

@media only screen and (max-width: 767px) {
    .image-carousel__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .image-carousel.align-center .image-carousel__footer .image-carousel__buttons {
        justify-content: flex-start;
    }
}


/* Button alignment, from the block's "Button alignment" field.

   .container sits in the middle of the selector so one rule covers both
   arrangements — buttons on their own under the slider, and buttons sharing the
   footer row with the text. It also puts these at three classes, enough to beat
   the alignment defaults above wherever they apply, including the mobile
   override. In the footer the group is sized to its content, so the auto
   margins do the work there and justify-content does it when the group spans
   the full width. */

.image-carousel--buttons-left .container .image-carousel__buttons {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: auto;
}

.image-carousel--buttons-center .container .image-carousel__buttons {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.image-carousel--buttons-right .container .image-carousel__buttons {
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 0;
}


/* Arrows and dots are scoped to .js-carousel so every carousel block shares
   them; each block sets the --arrow-* vars for its own colour and inset.
   Thin chevrons drawn with two borders on a rotated box. Drawn with two borders on a rotated box rather
   than an icon font, so the stroke weight is exactly controllable. */

/* Every var() below carries a fallback. They cannot be defaulted on
   .js-carousel itself, because blocks that set them on an ancestor (like
   .image-carousel) would then lose the cascade — and an undefined
   --arrow-weight makes border-width invalid, which renders the chevron as a
   full square. */

.image-carousel {
    --arrow-size: 18px;
    --arrow-weight: 2px;
    --arrow-color: var(--color-white);
    --arrow-shadow: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.45));
    /* Distance from the outer edge of the slider */
    --arrow-offset: clamp(8px, 2.6vw, 60px);
}

.js-carousel .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

.js-carousel .slick-prev {
    left: var(--arrow-offset, 0px);
    right: auto;
    transform: translateY(-50%);
}

.js-carousel .slick-next {
    right: var(--arrow-offset, 0px);
    left: auto;
    transform: translateY(-50%);
}

/* Outside the cards where the layout allows it. (100vw - 100%) / 2 is the
   room between the track and the viewport edge, so the max() keeps the chevron
   on screen on narrower windows instead of sliding off it. */

.vehicles-block .js-carousel .slick-prev,
.vehicles-block .js-carousel .slick-next,
.services-grid--carousel .js-carousel .slick-prev,
.services-grid--carousel .js-carousel .slick-next {
    /* 1.4rem of slack, not just a visual gap: 100vw counts the scrollbar while
       the track is measured without it, so the sum overstates the free space by
       half a scrollbar. Without the allowance the chevron clips at the edge. */
    --arrow-inset: max(-4rem, calc(-1 * ((100vw - 100%) / 2 - 1.4rem)));
    transform: translateY(-50%);
}

.vehicles-block .js-carousel .slick-prev,
.services-grid--carousel .js-carousel .slick-prev {
    left: var(--arrow-inset);
    right: auto;
}

.vehicles-block .js-carousel .slick-next,
.services-grid--carousel .js-carousel .slick-next {
    right: var(--arrow-inset);
    left: auto;
}


/* A 22px box rotated 45deg reads as a 16 x 32 chevron, matching the design */

.js-carousel .slick-prev::before,
.js-carousel .slick-next::before {
    content: "";
    display: block;
    width: var(--arrow-size, 22px);
    height: var(--arrow-size, 22px);
    border-style: solid;
    border-color: var(--arrow-color, #888888);
    opacity: 1;
    filter: var(--arrow-shadow, none);
    transition: opacity var(--transition-fast);
}

.js-carousel .slick-prev::before {
    border-width: 0 0 var(--arrow-weight, 3px) var(--arrow-weight, 3px);
    transform: rotate(45deg);
}

.js-carousel .slick-next::before {
    border-width: var(--arrow-weight, 3px) var(--arrow-weight, 3px) 0 0;
    transform: rotate(45deg);
}

.js-carousel .slick-arrow:hover::before {
    opacity: 0.7;
}

.js-carousel .slick-arrow.slick-disabled::before {
    opacity: 0.4;
}


/* Dots */

.js-carousel .slick-dots {
    position: static;
    margin: var(--space-lg) 0 0;
}

.js-carousel .slick-dots li,
.js-carousel .slick-dots li button {
    width: 10px;
    height: 10px;
}

.js-carousel .slick-dots li button::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-ink);
    opacity: 0.25;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
}

.js-carousel .slick-dots li.slick-active button::before {
    background-color: var(--color-primary);
    opacity: 1;
}

.section--dark .slick-dots li button::before {
    background-color: var(--color-white);
}

@media only screen and (max-width: 767px) {
    .image-carousel__slide {
        padding: 0 6px;
    }
}


/*------------------------------------*\
    12. FEATURE LIST (icon + label)
\*------------------------------------*/

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-xl);
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
}

.feature-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.feature-list__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.feature-list__label {
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--color-ink);
}

.section--dark .feature-list__label {
    color: var(--color-white);
}

@media only screen and (max-width: 575px) {
    .feature-list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }
}


/* Pills — each feature in its own outlined capsule, wrapping as many to a row
   as fit. Values from the design: 11px/16px padding, 8px between icon and
   label, 14px label, and a border that is already the theme's --color-divider
   (#E6E1D4). The radius is deliberately a flat 999px rather than
   --radius-pill so the ends stay semicircular whatever the label height. */

.feature-list--pills {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.feature-list--pills .feature-list__item {
    gap: var(--space-xs);
    padding: 1.1rem 1.6rem;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    background-color: var(--color-white);
}

.feature-list--pills .feature-list__icon {
    width: var(--feature-icon-size, 20px);
    height: var(--feature-icon-size, 20px);
}

.feature-list--pills .feature-list__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: normal;
    color: var(--color-charcoal);
}

/* On a dark section a white capsule would shout; outline it instead. */

.section--dark .feature-list--pills .feature-list__item {
    border-color: var(--color-border-light);
    background-color: rgba(255, 255, 255, 0.08);
}

@media only screen and (max-width: 575px) {
    /* Pills keep wrapping — the single-column grid above must not apply */
    .feature-list--pills {
        gap: var(--space-xs);
    }

    .feature-list--pills .feature-list__item {
        padding: 1rem 1.4rem;
    }
}


/*------------------------------------*\
    13. BLOCKS — CONTACT + FORM

    The pale card floats over the dark panel, which bleeds off the right edge.
    On desktop the card is absolutely positioned so the panel keeps its own
    flow width; the layout's padding-left reserves the space for it.
\*------------------------------------*/

.contact-block {
    overflow-x: clip;
    /* Makes the cqw units below resolve against this section, whose width
       excludes the scrollbar — unlike vw. Both the panel bleed and the form
       inset are measured from it, so they stay exact at every width. */
    container-type: inline-size;
}

.contact-block__layout {
    position: relative;
}

.contact-block__card {
    background-color: #F5F5F3;
    border-radius: var(--radius-md);
    padding: clamp(2.8rem, 4vw, 4.8rem);
    z-index: 2;
}

.contact-block__heading {
    font-size: clamp(3rem, 1.6rem + 2.5vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: -0.04rem;
    color: var(--color-charcoal);
    margin-bottom: var(--space-xl);
}

.contact-block__text {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-lg);
}

.contact-block__panel {
    background-color: var(--color-charcoal);
    border-radius: var(--radius-md);
    padding: clamp(2.4rem, 4vw, 7.9rem) clamp(2.4rem, 6vw, 12.2rem) clamp(3.2rem, 5vw, 9.6rem);
}

/* The form sits in its own hairline card on the dark panel */

.contact-block__form {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 3vw, 4.8rem);
}

.contact-block__missing {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--fs-sm);
    margin: 0;
}


/* Contact details list */

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-lg);
}

.contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
}

.contact-list__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: rgba(167, 140, 72, 0.2);
    color: var(--color-accent);
    font-size: 1.4rem;
}

.contact-list__body {
    display: block;
    padding-top: 0.3rem;
}

.contact-list__label {
    display: block;
    font-size: 1.55rem;
    letter-spacing: 0.0155rem;
    color: var(--color-charcoal);
}

.contact-list__label a {
    color: inherit;
}

.contact-list__label a:hover {
    color: var(--color-primary);
}

.contact-list__note {
    display: block;
    font-size: var(--fs-xs);
    color: rgba(50, 50, 50, 0.7);
    margin-top: 0.2rem;
}

@media only screen and (min-width: 992px) {
    .contact-block__layout {
        /* Room for the floating card: card width minus the overlap */
        padding-left: 364px;
    }
    .contact-block__card {
        position: absolute;
        top: 50%;
        left: 32px;
        width: 444px;
        transform: translateY(-50%);
    }
    .contact-block__panel {
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        padding-left: clamp(2.4rem, 12vw, 17.5rem);
        /* Reach the viewport edge. Independent of the containing block so the
           layout's padding-left cannot skew it. */
        margin-right: calc(-1 * (max(0px, (100cqw - var(--container-wide)) / 2) + var(--gutter)));
        /* Pull the form back off that bleed so its right edge lands on the
           standard container edge, lining it up with every other block. */
        padding-right: calc(max(0px, (100cqw - var(--container)) / 2) + var(--gutter));
    }
}

@media only screen and (max-width: 991px) {
    .contact-block__card {
        margin-bottom: var(--space-lg);
    }
}


/*------------------------------------*\
    14. GRAVITY FORMS (shared, palette driven by --gf-* vars)
\*------------------------------------*/

.gf-styled .gform_wrapper {
    margin: 0;
}


/* The design carries its own small print, so hide GF's legend */

.gf-styled .gform_required_legend {
    display: none;
}

/* The 12-column grid is defined here rather than relying on Gravity Forms'
   own stylesheet, which can be switched off in GF settings (this install
   renders with gform-theme--no-framework, i.e. no GF layout CSS).

   Hoisting the body wrappers with display:contents makes every .gfield AND
   .gform_footer direct children of the form grid, so the small print (7 cols)
   and the submit button (5 cols) land on the same final row — no magic
   numbers, and it still works if GF's CSS is later switched back on. */

.gf-styled .gform_wrapper.gravity-theme form,
.gf-styled .gform_wrapper form {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-lg);
    row-gap: var(--space-lg);
    align-items: start;
}


/* The .gravity-theme variants outrank GF's own stylesheet if it is enabled */

.gf-styled .gform_wrapper.gravity-theme .gform-body,
.gf-styled .gform_wrapper.gravity-theme .gform_body,
.gf-styled .gform_wrapper.gravity-theme .gform_fields,
.gf-styled .gform_wrapper .gform-body,
.gf-styled .gform_wrapper .gform_body,
.gf-styled .gform_wrapper .gform_fields {
    display: contents;
}

.gf-styled .gform_wrapper .gfield {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    /* .gfield can be a fieldset (choice fields) — strip the UA border */
    padding: 0;
    border: 0;
}

.gf-styled .gform_wrapper .gfield--width-quarter {
    grid-column: span 3;
}

.gf-styled .gform_wrapper .gfield--width-third {
    grid-column: span 4;
}

.gf-styled .gform_wrapper .gfield--width-five-twelfths {
    grid-column: span 5;
}

.gf-styled .gform_wrapper .gfield--width-half {
    grid-column: span 6;
}

.gf-styled .gform_wrapper .gfield--width-seven-twelfths {
    grid-column: span 7;
}

.gf-styled .gform_wrapper .gfield--width-two-thirds {
    grid-column: span 8;
}

.gf-styled .gform_wrapper .gfield--width-full {
    grid-column: 1 / -1;
}

.gf-styled .gform_wrapper .gform_validation_errors {
    grid-column: 1 / -1;
}

.gf-styled .gform_wrapper .gform_heading {
    margin: 0;
}

.gf-styled .gform_wrapper .ginput_container {
    margin: 0;
}

@media only screen and (max-width: 639px) {
    .gf-styled .gform_wrapper .gfield,
    .gf-styled .gform_wrapper .gfield--width-half,
    .gf-styled .gform_wrapper .gfield--width-third,
    .gf-styled .gform_wrapper .gfield--width-quarter,
    .gf-styled .gform_wrapper .gfield--width-five-twelfths,
    .gf-styled .gform_wrapper .gfield--width-seven-twelfths,
    .gf-styled .gform_wrapper .gfield--width-two-thirds {
        grid-column: 1 / -1;
    }
}

.gf-styled .gform_wrapper .gfield_label,
.gf-styled .gform_wrapper .gform-field-label {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--gf-label, #EADED0);
    margin-bottom: 0.8rem;
}

.gf-styled .gform_wrapper .gfield_required {
    color: #f00;
    margin-left: 0.2rem;
}

.gf-styled .gform_wrapper input[type="text"],
.gf-styled .gform_wrapper input[type="email"],
.gf-styled .gform_wrapper input[type="tel"],
.gf-styled .gform_wrapper input[type="url"],
.gf-styled .gform_wrapper input[type="number"],
.gf-styled .gform_wrapper select,
.gf-styled .gform_wrapper textarea {
    box-sizing: border-box;
    width: 100%;
    height: 47px;
    padding: 0 1.6rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--gf-input-text, var(--color-white));
    background-color: var(--gf-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--gf-input-border, rgba(255, 255, 255, 0.2));
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast);
}

/* GF sets rows="10"; the design's box is shorter, so height wins */

.gf-styled .gform_wrapper textarea {
    height: 13rem;
    min-height: 13rem;
    padding: 1.2rem 1.6rem;
    line-height: var(--lh-body);
    resize: vertical;
}

.gf-styled .gform_wrapper input:focus,
.gf-styled .gform_wrapper select:focus,
.gf-styled .gform_wrapper textarea:focus {
    outline: 0;
    border-color: var(--gf-input-border-focus, rgba(255, 255, 255, 0.55));
}

.gf-styled .gform_wrapper ::placeholder {
    color: var(--gf-placeholder, rgba(255, 255, 255, 0.35));
    opacity: 1;
}


/* Consent / checkbox rows */

.gf-styled .gform_wrapper .gfield_checkbox,
.gf-styled .gform_wrapper .gfield_consent {
    margin: 0;
}

.gf-styled .gform_wrapper .gchoice {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}


/* Fields set to "hidden label" still print a legend */

.gf-styled .gform_wrapper .hidden_label>.gfield_label,
.gf-styled .gform_wrapper .hidden_label>legend.gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.gf-styled .gform_wrapper .gchoice input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--color-primary);
    background-color: transparent;
    border: 1px solid var(--gf-check-border, rgba(255, 255, 255, 0.5));
    border-radius: 2px;
}

.gf-styled .gform_wrapper .gchoice label,
.gf-styled .gform_wrapper .gfield_consent_label {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--gf-choice-text, #EDE3CE);
    margin: 0;
}


/* Small print, added to the form as an HTML field */

.gf-styled .gform_wrapper .gfield--type-html {
    font-size: 1.2rem;
    color: var(--gf-note, #CABD9F);
    align-self: center;
}


/* Submit. GF 2.7 renders it as <input type="submit"> inside .gform_footer;
   2.9+ can place it inline in the last grid row (the form already carries that
   config), so both are styled. */

.gf-styled .gform_wrapper.gravity-theme .gform_footer,
.gf-styled .gform_wrapper .gform_footer {
    grid-column: span 5;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
}

.gf-styled .gform_wrapper .gfield--type-submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.gf-styled .gform_wrapper .gform_button,
.gf-styled .gform_wrapper .gform-button--width-full,
.gf-styled .gform_wrapper button[type="submit"],
.gf-styled .gform_wrapper input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: auto;
    height: auto;
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-medium);
    line-height: 1.4667;
    color: var(--color-white);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    padding: 1.2rem 3rem;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.gf-styled .gform_wrapper .gform_button:hover,
.gf-styled .gform_wrapper button[type="submit"]:hover,
.gf-styled .gform_wrapper input[type="submit"]:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}


/* Chevron. An <input> cannot have pseudo-elements, so it comes in as a
   background image — this keeps GF's own button markup (and its
   double-submit guard) untouched. */

.gf-styled .gform_wrapper input[type="submit"] {
    padding-right: 4.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 1l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2.4rem center;
    background-size: 7px 12px;
}

.gf-styled .gform_wrapper button[type="submit"]::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
}


/* Validation + confirmation */

.gf-styled .gform_wrapper .gform_validation_errors {
    background-color: rgba(191, 30, 46, 0.15);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--gf-error-summary, var(--color-white));
    margin-bottom: var(--space-lg);
}

.gf-styled .gform_wrapper .gform_validation_errors h2,
.gf-styled .gform_wrapper .gform_validation_errors ol {
    font-size: 22px;
    color: var(--gf-error-summary, var(--color-white));
    margin: 0;
    padding: 0.8rem 1.6rem;
}

/* Pale pink reads on the dark panel; light panels override --gf-error below */
.gf-styled .gform_wrapper .gfield_validation_message,
.gf-styled .gform_wrapper .validation_message {
    background: none;
    border: 0;
    padding: 0.4rem 0 0;
    font-size: var(--fs-xs);
    color: var(--gf-error, #F5A3AB);
}

/* A field that failed validation gets a red edge, not just a message */
.gf-styled .gform_wrapper .gfield_error input[type="text"],
.gf-styled .gform_wrapper .gfield_error input[type="email"],
.gf-styled .gform_wrapper .gfield_error input[type="tel"],
.gf-styled .gform_wrapper .gfield_error input[type="number"],
.gf-styled .gform_wrapper .gfield_error select,
.gf-styled .gform_wrapper .gfield_error textarea {
    border-color: var(--color-primary);
}

.gf-styled .gform_confirmation_message {
    color: var(--color-white);
    font-size: var(--fs-body);
}


/*------------------------------------*\
    14a. DATEPICKER (Gravity Forms date fields)

    jQuery UI appends #ui-datepicker-div to <body>, so it sits outside
    .gf-styled and is styled globally. No jQuery UI theme stylesheet is
    loaded on this site, which is why it otherwise renders as a bare table
    with "Prev"/"Next" text and no panel.
\*------------------------------------*/

#ui-datepicker-div {
    /* jQuery UI's own stylesheet hides this with .ui-datepicker { display: none }
       and we do not load it, so without this the panel renders at the end of
       <body> — below the footer — until a field is opened and closed once.
       Opening it sets display inline, which wins over this. */
    display: none;
    width: 300px;
    padding: 1.2rem;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-charcoal);
    /*
     * jQuery UI writes a low z-index inline, derived from the field's ancestors,
     * so this has to be !important to beat it.
     *
     * The value must clear Fancybox as well as the header: the enquiry modal is
     * a Fancybox container at 1050 (its own close button is 1053), and the date
     * fields inside it open this panel. At anything lower the calendar does open
     * — with display: block, correctly positioned — but paints behind the modal,
     * so it reads as the picker being broken.
     */
    z-index: 1100 !important;
}


/* Header: prev / month + year / next */

#ui-datepicker-div .ui-datepicker-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

#ui-datepicker-div .ui-datepicker-prev {
    order: 1;
}

#ui-datepicker-div .ui-datepicker-title {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    gap: 0.8rem;
    min-width: 0;
}

#ui-datepicker-div .ui-datepicker-next {
    order: 3;
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    background-color: var(--color-off-white);
    color: var(--color-primary);
    opacity: 1;
}


/* The icon spans hold literal "Prev"/"Next" text — hide it and draw chevrons */

#ui-datepicker-div .ui-icon {
    display: block;
    font-size: 0;
    line-height: 0;
}

#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    line-height: 1;
}

#ui-datepicker-div .ui-datepicker-prev::before {
    content: "\f053";
}

#ui-datepicker-div .ui-datepicker-next::before {
    content: "\f054";
}

#ui-datepicker-div select.ui-datepicker-month,
#ui-datepicker-div select.ui-datepicker-year {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0 0.8rem;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--color-charcoal);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}


/* Calendar grid */

#ui-datepicker-div .ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

#ui-datepicker-div .ui-datepicker-calendar th {
    padding: 0.4rem 0;
    font-size: 1.1rem;
    font-weight: var(--fw-semi);
    text-align: center;
    color: var(--color-text-muted);
}

#ui-datepicker-div .ui-datepicker-calendar td {
    padding: 1px;
    text-align: center;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    text-decoration: none;
    color: var(--color-charcoal);
    transition: background-color var(--transition-fast);
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover {
    background-color: var(--color-off-white);
    color: var(--color-charcoal);
    opacity: 1;
}


/* Selected day */

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}


/* Today, when it is not the selected day */

#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight:not(.ui-state-active) {
    box-shadow: inset 0 0 0 1px var(--color-accent);
    color: var(--color-charcoal);
}


/* Padding days from the neighbouring months, and days ruled out by minDate */

#ui-datepicker-div .ui-datepicker-other-month span,
#ui-datepicker-div .ui-state-disabled span {
    color: var(--color-text-muted);
    opacity: 0.45;
}

#ui-datepicker-div .ui-datepicker-unselectable {
    cursor: default;
}

/* The month arrows: dimmed once minDate leaves nothing to step back to */

#ui-datepicker-div .ui-datepicker-header .ui-state-disabled {
    opacity: 0.3;
    cursor: default;
}

#ui-datepicker-div .ui-datepicker-header .ui-state-disabled:hover {
    background-color: transparent;
}


/*------------------------------------*\
    14b. BLOCKS — TEXT & FORM

    The panel colour drives the --gf-* variables consumed by the shared
    .gf-styled rules, so one set of form styles covers light and dark panels.
\*------------------------------------*/

.text-form__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-gap, clamp(3.2rem, 5vw, 8rem));
}

.text-form__content {
    flex: var(--tf-content, 40) 1 0;
    min-width: 0;
}

.text-form__panel {
    flex: var(--tf-form, 60) 1 0;
    min-width: 0;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 3vw, 4rem);
}

.text-form--form-left .text-form__panel {
    order: -1;
}

.text-form--50-50 {
    --tf-content: 50;
    --tf-form: 50;
}

.text-form--40-60 {
    --tf-content: 40;
    --tf-form: 60;
}

.text-form--30-70 {
    --tf-content: 30;
    --tf-form: 70;
}

.text-form__heading {
    margin-bottom: var(--space-md);
}

.text-form__text {
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.text-form__content .btn-group {
    margin-top: var(--space-lg);
}

.text-form__missing {
    font-size: var(--fs-sm);
    margin: 0;
}


/* Panel colours — each sets the form's palette */

.text-form--panel-sand .text-form__panel {
    background-color: var(--color-sand);
}

.text-form--panel-light .text-form__panel {
    background-color: var(--color-off-white);
}

.text-form--panel-white .text-form__panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
}

.text-form--panel-sand .text-form__panel,
.text-form--panel-light .text-form__panel,
.text-form--panel-white .text-form__panel,
.campervan-enquiry {
    --gf-label: #0A0A0A;
    --gf-input-bg: var(--color-white);
    --gf-input-border: rgba(10, 10, 10, 0.2);
    --gf-input-border-focus: var(--color-primary);
    --gf-input-text: var(--color-charcoal);
    --gf-placeholder: rgba(50, 50, 50, 0.5);
    --gf-choice-text: var(--color-charcoal);
    --gf-check-border: rgba(10, 10, 10, 0.35);
    --gf-note: var(--color-charcoal);
    --gf-error: var(--color-primary);
    --gf-error-summary: var(--color-primary);
}

.text-form--panel-dark .text-form__panel {
    background-color: var(--color-charcoal);
}


/* Section headings inside a form ("Request date of hire") */

.gf-styled .gform_wrapper .gsection {
    border: 0;
    margin: 0;
    padding: var(--space-xs) 0 0;
}

.gf-styled .gform_wrapper .gsection_title {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: var(--gf-section, var(--color-charcoal));
    margin: 0;
}

.text-form--panel-dark .text-form__panel {
    --gf-section: var(--color-white);
}


/* Datepicker fields carry their own calendar icon so it can be brand red */

.gf-styled .gform_wrapper .ginput_container_date input {
    padding-right: 4.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1.5' y='3.5' width='17' height='15' rx='2.5' stroke='%23BF1E2E' stroke-width='1.6'/%3E%3Cpath d='M1.5 8.5h17M6 1.5v4M14 1.5v4' stroke='%23BF1E2E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 18px 18px;
}

.gf-styled .gform_wrapper .ginput_container_date img.ui-datepicker-trigger {
    display: none;
}

@media only screen and (max-width: 991px) {
    .text-form__grid {
        flex-direction: column;
        align-items: stretch;
        row-gap: max(var(--block-gap, 3.2rem), 2.4rem);
    }
    .text-form__content,
    .text-form__panel {
        flex: 1 1 100%;
        width: 100%;
    }
    .text-form--form-left .text-form__panel {
        order: 0;
    }
}


/*------------------------------------*\
    15. FOOTER
\*------------------------------------*/

.site-footer {
    background-color: var(--color-white);
    padding-top: var(--section-y-sm);
}

.site-footer__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    text-align: center;
}

.site-footer__logo-img {
    display: block;
    width: auto;
    height: clamp(72px, 8vw, 110px);
}

.site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.6rem, 2.4vw, 4rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__menu a {
    font-size: var(--fs-body);
    color: var(--color-charcoal);
}

.site-footer__menu a:hover,
.site-footer__menu .current-menu-item>a {
    color: var(--color-primary);
}

.site-footer__bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
}

.site-footer__copyright {
    font-size: var(--fs-sm);
    color: var(--color-charcoal);
    margin: 0;
}

.site-footer__socials {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-primary);
}

@media only screen and (max-width: 575px) {
    .site-footer__bottom-inner {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}


/*------------------------------------*\
    16. BLOCKS — PROCESS STEPS
\*------------------------------------*/

.process-block__panel {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-charcoal);
    padding: clamp(2.4rem, 3.4vw, 4.8rem);
}

.process-block__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.process-block__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* Charcoal wash over the photo, driven by the ACF range field */

.process-block__panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(50, 50, 50, var(--process-overlay, 0.88));
    z-index: 1;
}

.process-block__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(2.4rem, 3.5vw, 5.6rem);
    align-items: center;
}

.process-block__heading {
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.process-block__text {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-xl);
}

.process-block__intro .btn-group {
    margin-top: 0;
}


/* Step cards */

.process-steps {
    display: grid;
    grid-template-columns: repeat(var(--steps-cols, 2), minmax(0, 1fr));
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.process-steps__item {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: clamp(1.6rem, 1.6vw, 2.2rem);
}

.process-steps__number {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-heavy);
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.process-steps__title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    color: var(--color-white);
    margin: 0 0 0.6rem;
}

.process-steps__text {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

@media only screen and (max-width: 991px) {
    .process-block__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .process-block__text {
        margin-bottom: var(--space-lg);
    }
}

@media only screen and (max-width: 575px) {
    .process-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*------------------------------------*\
    17. BLOCKS — CAMPERVANS

    One card design (.campervan-card) serves the carousel, the filtered
    listing and "Other Campervans for Sale" on the single, so the three can
    never drift apart. See sections/campervan-card.php.
\*------------------------------------*/
.vehicles-block{
    overflow-x: hidden;
}
.vehicles-block .section-header {
    margin-bottom: var(--space-2xl);
}

.vehicles-block.align-center .section-header {
    text-align: center;
}

.vehicles-block__slider {
    --arrow-color: var(--color-ink);
    --arrow-offset: 0.4rem;
    position: relative;
    /* Slides carry side padding to space the cards apart, which would inset the
       first and last card from the container. Pulling the track out by that
       same amount lands the outer card edges exactly on the container edge, in
       line with every other block. */
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm));
}

.vehicles-block__slider:not(.slick-initialized) {
    display: flex;
    gap: var(--space-lg);
}

.vehicles-block__slider:not(.slick-initialized) .vehicles-block__slide {
    flex: 1 1 0;
    min-width: 0;
}

.vehicles-block__slide {
    padding: 0 var(--space-sm);
    height: auto;
}


/* Equal-height cards inside Slick's floated slides */

.vehicles-block__slider .slick-track {
    display: flex;
    align-items: stretch;
}

.vehicles-block__slider .slick-slide {
    height: auto;
}

.vehicles-block__slider .slick-slide>div {
    height: 100%;
}

.vehicles-block__buttons {
    justify-content: center;
    margin-top: var(--space-2xl);
}

.vehicles-block.align-left .vehicles-block__buttons {
    justify-content: flex-start;
}

.vehicles-block__empty,
.campervan-listing__empty {
    text-align: center;
    color: var(--color-text-muted);
    margin: 0;
}


/* Card */

.campervan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    overflow: hidden;
}

.campervan-card__media {
    position: relative;
}

.campervan-card__media-link {
    display: block;
}

.campervan-card__img,
.campervan-card__placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center center;
}

.campervan-card__placeholder {
    background-color: var(--color-off-white);
}


/* SALE flag, top-left of the photo */

.campervan-card__badge {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    z-index: 2;
    padding: 0.9rem 1rem;
    border-radius: 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1rem;
    line-height: 1;
    text-transform: uppercase;
}

.campervan-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    flex: 1 1 auto;
}

.campervan-card__title {
    font-size: 1.7rem;
    font-weight: var(--fw-semi);
    line-height: 1.35;
    color: var(--color-charcoal);
    margin: 0;
}

.campervan-card__title a {
    color: inherit;
    text-decoration: none;
}

.campervan-card__title a:hover,
.campervan-card__title a:focus {
    color: var(--color-primary);
}


/* Spec chips — berths, weight, roof */

.campervan-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.campervan-chips__item {
    padding: 0.5rem 1.1rem;
    border-radius: 100px;
    background-color: #F1EEE8;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--color-charcoal);
}


/* Price. margin-top: auto pins the price and actions to the bottom so cards
   of differing title lengths still line up across a row. */

.campervan-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: auto 0 0;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-divider);
}

.campervan-card__price-prefix {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

.campervan-card__price-amount {
    font-size: 2.6rem;
    font-weight: var(--fw-bold);
    letter-spacing: -0.05rem;
    line-height: 1;
    color: var(--color-primary);
}

.campervan-card__price-was {
    font-size: 1.3rem;
    color: var(--color-text-muted);
}

.campervan-card__price-was s {
    text-decoration: line-through;
}

.campervan-card__flash {
    align-self: flex-start;
    margin: 0;
    padding: 0.5rem 1.1rem;
    border-radius: 4px;
    background-color: rgba(191, 30, 46, 0.1);
    color: var(--color-primary);
    font-size: 1.15rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.05rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.campervan-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: center;
}

.campervan-card__actions .btn {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
}

.campervan-card__details {
    white-space: nowrap;
}

@media only screen and (max-width: 575px) {
    .vehicles-block__slider {
        padding: 0 var(--space-sm);
    }
}


/*------------------------------------*\
    17a. BLOCKS — CAMPERVAN LISTING

    Filters post back as a GET form, so a filtered view can be linked and
    indexed and still works with JavaScript off.
\*------------------------------------*/

.campervan-listing__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    background-color: #FBF9F6;
    border: 1px solid var(--color-divider);
    border-radius: 100px;
}

.campervan-listing__count {
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: var(--fw-semi);
    color: var(--color-charcoal);
    white-space: nowrap;
    margin: 0;
}

.campervan-listing__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
}

.campervan-listing__sort {
    margin-left: auto;
}

/* Native selects, restyled as pills. The chevron is a background image so it
   survives appearance: none on every browser. */

.campervan-filter {
    position: relative;
}

.campervan-filter__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.campervan-filter__select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.9rem 3.4rem 0.9rem 1.6rem;
    border: 1px solid var(--color-divider);
    border-radius: 100px;
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23323232' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4rem center;
    background-size: 11px 7px;
    font-family: var(--font-body);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--color-charcoal);
    cursor: pointer;
}

.campervan-filter__select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* A chosen filter reads as active */

.campervan-filter__select[data-active="1"] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--fw-semi);
}

.campervan-listing__sort .campervan-filter__select {
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: var(--fw-semi);
}

/* Only shown when JavaScript is off, where change events cannot auto-submit */

.campervan-listing__submit {
    padding: 0.9rem 1.8rem;
    font-size: 1.35rem;
}

.js .campervan-listing__submit {
    display: none;
}

.campervan-listing__reset {
    font-size: 1.3rem;
    color: var(--color-text-muted);
    text-decoration: underline;
}

.campervan-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

/* Nothing the visitor selects may change the toolbar's shape.

   Two things used to break it. A native select is as wide as its widest
   option, so a long value could not resize it — but the Clear filters link
   appearing the moment a filter was applied pushed the row past the container
   and the pill wrapped onto two lines. So: the row never wraps, the filters in
   the middle scroll if they run out of room, and Clear filters keeps its space
   whether or not it is showing. */

@media only screen and (min-width: 992px) {
    .campervan-filter__select {
        max-width: 13.2rem;
    }
    .campervan-listing__toolbar {
        flex-wrap: nowrap;
    }

    .campervan-listing__filters {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        /* No visible scrollbar: one would add to the group height and so change
           the toolbar height, which is exactly what this is here to avoid. It
           only ever overflows if a taxonomy term is unusually long, and the
           pills can still be dragged or trackpad-scrolled. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .campervan-listing__filters::-webkit-scrollbar {
        display: none;
    }

    .campervan-listing__filters .campervan-filter {
        flex: 0 0 auto;
    }

    .campervan-listing__sort,
    .campervan-listing__reset {
        flex: 0 0 auto;
    }

    /* Reserved rather than removed, so applying a filter causes no reflow */
    .campervan-listing__reset.is-hidden {
        visibility: hidden;
    }
}

/* Below the breakpoint the pill becomes a rounded box and is free to wrap, so
   the link can take its space back. */

@media only screen and (max-width: 991px) {
    .campervan-listing__reset.is-hidden {
        display: none;
    }
}

/* Capped so one long option cannot hog the row. Sized so real values — a make
   like Volkswagen, a price band — fit outright; only an unusually long term
   truncates, and it truncates rather than breaking the row. */

.campervan-filter__select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campervan-listing__sort .campervan-filter__select {
    /* Shows the current sort, which is worth a little more room */
    max-width: 16rem;
}


/* Pagination */

.campervan-listing__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: var(--space-2xl);
}

.campervan-listing__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--color-divider);
    border-radius: 100px;
    background-color: var(--color-white);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    line-height: 1;
    color: var(--color-charcoal);
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.campervan-listing__pagination a.page-numbers:hover,
.campervan-listing__pagination a.page-numbers:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.campervan-listing__pagination .page-numbers.current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* The gap marker is not a button */

.campervan-listing__pagination .page-numbers.dots {
    min-width: auto;
    border-color: transparent;
    background: none;
    color: var(--color-text-muted);
}

.campervan-listing__pagination .prev,
.campervan-listing__pagination .next {
    gap: 0.6rem;
    font-weight: var(--fw-semi);
}

.campervan-listing__pagination .prev::before,
.campervan-listing__pagination .next::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75em;
}

.campervan-listing__pagination .prev::before {
    content: "\f053";
}

.campervan-listing__pagination .next::after {
    content: "\f054";
}

@media only screen and (max-width: 575px) {
    /* Numbers only — prev/next carry the labels and would wrap awkwardly */
    .campervan-listing__pagination .page-numbers {
        min-width: 3.6rem;
        height: 3.6rem;
        padding: 0 0.9rem;
        font-size: 1.3rem;
    }
}

/* Held in place, not removed, while new results load: the controls stay where
   they are so nothing below them moves, but they cannot be clicked twice. */

.campervan-listing__pagination.is-loading {
    opacity: 0.45;
    pointer-events: none;
}


/* Loading state. The results keep their height while a request is in flight so
   the page never collapses and jumps back, and skeleton cards stand in for the
   real ones at the same shape. */

.campervan-listing__results {
    position: relative;
}

.campervan-skeleton {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    overflow: hidden;
}

.campervan-skeleton__media {
    aspect-ratio: 4 / 3;
}

.campervan-skeleton__body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: var(--space-md);
}

.campervan-skeleton__line {
    display: block;
    height: 1.4rem;
    border-radius: 100px;
}

.campervan-skeleton__line--title {
    width: 78%;
    height: 1.8rem;
}

.campervan-skeleton__line--chips {
    width: 62%;
}

.campervan-skeleton__line--price {
    width: 44%;
    height: 2.4rem;
}

/* The shimmer: the site's sand tones rather than the usual grey, with a paler
   highlight sweeping across. background-size is 200% so the gradient has room
   to travel. */

.campervan-skeleton__media,
.campervan-skeleton__line {
    background-color: #F1EEE8;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: -150% 0;
    animation: campervan-shimmer 1.4s ease-in-out infinite;
}

.campervan-skeleton__media {
    background-color: #EDE8DF;
}

@keyframes campervan-shimmer {
    from {
        background-position: -150% 0;
    }
    to {
        background-position: 150% 0;
    }
}

/* Stagger the columns so the grid reads as one sweep rather than a flicker */

.campervan-listing__grid--loading .campervan-skeleton:nth-child(3n + 2) .campervan-skeleton__media,
.campervan-listing__grid--loading .campervan-skeleton:nth-child(3n + 2) .campervan-skeleton__line {
    animation-delay: 120ms;
}

.campervan-listing__grid--loading .campervan-skeleton:nth-child(3n + 3) .campervan-skeleton__media,
.campervan-listing__grid--loading .campervan-skeleton:nth-child(3n + 3) .campervan-skeleton__line {
    animation-delay: 240ms;
}


/* Cards fading up as a result set arrives.
   Opt-in: an untouched grid — first paint, or no JavaScript — carries no class
   and is simply visible. The script adds .is-loaded to a freshly injected grid.

   A keyframe animation rather than a transition, deliberately: a transition
   needs its start state painted before the end state is applied, which means
   leaning on requestAnimationFrame — and that pauses in a background tab, so a
   visitor who filtered and switched away could come back to cards stuck at
   opacity 0. An animation carries its own start state and self-heals. */

[data-campervan-grid].is-loaded .campervan-card {
    animation: campervan-card-in 420ms ease both;
}

@keyframes campervan-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

[data-campervan-grid].is-loaded .campervan-card:nth-child(2) {
    animation-delay: 70ms;
}

[data-campervan-grid].is-loaded .campervan-card:nth-child(3) {
    animation-delay: 140ms;
}

[data-campervan-grid].is-loaded .campervan-card:nth-child(4) {
    animation-delay: 210ms;
}

[data-campervan-grid].is-loaded .campervan-card:nth-child(5) {
    animation-delay: 280ms;
}

[data-campervan-grid].is-loaded .campervan-card:nth-child(n + 6) {
    animation-delay: 350ms;
}

@media (prefers-reduced-motion: reduce) {
    .campervan-skeleton__media,
    .campervan-skeleton__line {
        animation: none;
    }
    [data-campervan-grid].is-loaded .campervan-card {
        animation: none;
    }
}

@media only screen and (max-width: 991px) {
    .campervan-listing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .campervan-listing__toolbar {
        border-radius: var(--radius-md);
    }
    .campervan-listing__sort {
        margin-left: 0;
    }
}

@media only screen and (max-width: 575px) {
    .campervan-listing__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .campervan-filter,
    .campervan-filter__select {
        width: 100%;
    }
}


/*------------------------------------*\
    17b. SINGLE CAMPERVAN
\*------------------------------------*/

/* No page banner here, so the header is solid and stays in flow — this only
   needs breathing room, not the header's height. */

.campervan {
    padding-top: var(--space-xl);
}

.campervan__back {
    margin: 0 0 var(--space-lg);
}

.campervan__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--fs-sm);
    color: var(--color-charcoal);
    text-decoration: none;
}

.campervan__back-link::before {
    content: "\f053";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8em;
}

.campervan__back-link:hover,
.campervan__back-link:focus {
    color: var(--color-primary);
}


/* Gallery — one large photo with two stacked thumbnails */

.campervan-gallery {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 17fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.campervan-gallery--single {
    grid-template-columns: minmax(0, 1fr);
}

.campervan-gallery__main {
    position: relative;
}

.campervan-gallery__main a,
.campervan-gallery__thumb {
    display: block;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.campervan-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center center;
}

.campervan-gallery__thumbs {
    position: relative;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.campervan-gallery__thumbs .campervan-gallery__img {
    aspect-ratio: auto;
}

/* Extra photos live in the lightbox only, so the grid keeps its shape */

.campervan-gallery__hidden {
    display: none;
}

.campervan-gallery__more {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    padding: 0.5rem 1.2rem;
    border-radius: 100px;
    background-color: rgba(10, 10, 10, 0.7);
    color: var(--color-white);
    font-size: 1.2rem;
    line-height: 1.2;
    pointer-events: none;
}

.campervan-gallery__flags {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    z-index: 2;
}

.campervan-gallery__badge {
    position: static;
}

.campervan-gallery__flash {
    padding: 0.9rem 1rem;
    border-radius: 20px;
    background: rgba(253, 244, 245, 0.60);
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: var(--fw-semi);
    letter-spacing: 0.05rem;
    line-height: 1;
    text-transform: uppercase;
}


/* Price bar */

.campervan-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-2xl);
    background-color: #FBF9F6;
    border: 1px solid var(--color-divider);
    border-radius: 10px;
}

.campervan-bar__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.campervan-bar__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
}

.campervan-bar__prefix {
    font-size: 1.3rem;
    color: var(--color-text-muted);
}

.campervan-bar__amount {
    font-size: clamp(2.8rem, 2rem + 1.6vw, 4rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.1rem;
    line-height: 1;
    color: var(--color-primary);
}

.campervan-bar__was {
    font-size: 1.4rem;
    color: var(--color-text-muted);
}

.campervan-bar__title {
    font-size: clamp(2.2rem, 1.6rem + 1.2vw, 3.2rem);
    line-height: 1.2;
    color: var(--color-heading);
    margin: 0;
}

.campervan-bar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.campervan-bar__spec::before {
    content: "\f02f";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    margin-right: 0.8rem;
}


/* Tabs. Panels are all visible until the script confirms it can manage them,
   so the page still reads top to bottom with JavaScript off. */

.campervan-tabs__nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--space-xl);
}

.campervan-tabs:not(.is-enhanced) .campervan-tabs__nav {
    display: none;
}

.campervan-tabs__tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 1.2rem;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    cursor: pointer;
}

.campervan-tabs__tab:hover {
    color: var(--color-charcoal);
}

.campervan-tabs__tab.is-active {
    border-bottom-color: var(--color-charcoal);
    color: var(--color-charcoal);
}

.campervan-tabs__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.campervan-panel {
    padding-bottom: var(--space-2xl);
}

.campervan-tabs.is-enhanced .campervan-panel {
    display: none;
    padding-bottom: 0;
}

.campervan-tabs.is-enhanced .campervan-panel.is-active {
    display: block;
}

/* With tabs running, the panel heading would repeat the tab label */

.campervan-tabs.is-enhanced .campervan-panel__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.campervan-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.campervan-tabs.is-enhanced .campervan-panel__head {
    justify-content: flex-end;
}

.campervan-panel__heading {
    font-size: var(--fs-h4);
    color: var(--color-heading);
    margin: 0 0 var(--space-lg);
}

.campervan-panel__head .campervan-panel__heading {
    margin: 0;
}

.campervan-panel__download {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-accent);
    text-decoration: none;
}

.campervan-panel__download::before {
    content: "\f019";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
}

.campervan-panel__download:hover,
.campervan-panel__download:focus {
    text-decoration: underline;
}


/* Specification table + floorplan */

.campervan-spec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
}

/* No floorplan, so the table takes the full width rather than leaving a hole */

.campervan-spec--full {
    grid-template-columns: minmax(0, 1fr);
}

.campervan-spec__table {
    width: 100%;
    /* A collapsed table ignores border-radius, so the borders stay separate and
       border-spacing: 0 keeps the single-line grid look. overflow clips the
       striped cell backgrounds to the corners. */
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    overflow: hidden;
    font-size: var(--fs-sm);
}

.campervan-spec__table th,
.campervan-spec__table td {
    padding: 1.2rem 1.6rem;
    text-align: left;
    font-weight: var(--fw-regular);
    color: var(--color-charcoal);
    /* Inner edges only — the table's own border draws the outside. Without
       collapsing, a border on every cell would double up on shared edges. */
    border: 0;
    border-bottom: 1px solid var(--color-divider);
}

.campervan-spec__table th {
    width: 45%;
    font-weight: var(--fw-medium);
    border-right: 1px solid var(--color-divider);
}

/* The table's own border closes the bottom */

.campervan-spec__table tr:last-child th,
.campervan-spec__table tr:last-child td {
    border-bottom: 0;
}

/* Zebra striping, as in the design */

.campervan-spec__table tr:nth-child(odd) th,
.campervan-spec__table tr:nth-child(odd) td {
    background-color: #FAF8F5;
}

.campervan-spec__floorplan {
    margin: 0;
}

.campervan-spec__floorplan-img {
    display: block;
    width: 100%;
    height: auto;
}


/* Key features — three columns of gold ticks */

.campervan-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md) var(--space-xl);
    list-style: none;
    margin: 0;
    padding: 0;
}

.campervan-features__item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    font-size: var(--fs-sm);
    color: var(--color-charcoal);
}

/* Same white check SVG as the service ticks, masked so one asset serves both */

.campervan-features__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-accent);
    position: relative;
}

.campervan-features__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    -webkit-mask-image: url('../img/icon-check-white.svg');
    mask-image: url('../img/icon-check-white.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
}


/* Finance — the provider's own embed, so only the frame is ours */

.campervan-finance {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--color-divider);
}

.campervan-finance__heading {
    font-size: var(--fs-h4);
    text-align: center;
    color: var(--color-heading);
    margin: 0 0 var(--space-xl);
}

.campervan-finance__embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.campervan-others {
    margin-top: var(--space-2xl);
}


/* Enquiry modal — the shared Gravity Form opened by every Enquire button */

.campervan-enquiry {
    display: none;
    width: 100%;
    max-width: 620px;
    padding: clamp(2.4rem, 3vw, 4rem);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
}

/* Fancybox v4 adds its own class to this very element (it does not wrap it)
   and sets display inline, which is what actually reveals the modal. */

.campervan-enquiry.fancybox__content {
    flex-direction: column;
}

.campervan-enquiry__heading {
    font-size: var(--fs-h4);
    color: var(--color-heading);
    margin: 0 0 var(--space-sm);
}

.campervan-enquiry__vehicle {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    margin: 0 0 var(--space-lg);
}

@media only screen and (max-width: 991px) {
    .campervan-spec {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
    .campervan-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .campervan-gallery {
        grid-template-columns: minmax(0, 1fr);
    }
    .campervan-gallery__thumbs {
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .campervan-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .campervan-bar__actions .btn {
        flex: 1 1 auto;
    }
    .campervan-tabs__nav {
        justify-content: flex-start;
        gap: var(--space-md);
    }
}

@media only screen and (max-width: 575px) {
    .campervan-features {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*------------------------------------*\
    18. BLOCKS — VIDEO
\*------------------------------------*/

.video-block .section-header {
    margin-bottom: var(--space-2xl);
}

.video-block.align-center .section-header {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.video-block__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--video-ratio, 16/9);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-grey-light);
    box-shadow: var(--shadow-md);
    max-width: var(--container);
    margin: 0 auto;
}

.video-block__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* Play button — 92px white disc with a soft glow, per the design */

.video-block__play {
    --play-size: clamp(5.6rem, 6.4vw, 9.2rem);
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--play-size);
    height: var(--play-size);
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
    transition: transform var(--transition), box-shadow var(--transition);
}

.video-block__play:hover {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.35);
}

.video-block__play--inactive {
    cursor: default;
}

.video-block__play--inactive:hover {
    transform: none;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
}


/* Triangle drawn with borders so it scales with the disc.
   Ratios come from the design's 25x28 glyph in a 92px button, and it is
   nudged right so it reads as optically centred. */

.video-block__play-icon {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--play-size) * 0.152) 0 calc(var(--play-size) * 0.152) calc(var(--play-size) * 0.272);
    border-color: transparent transparent transparent var(--color-ink);
    margin-left: calc(var(--play-size) * 0.055);
}

.video-block__play:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}


/*------------------------------------*\
    19. WYSIWYG CONTENT
\*------------------------------------*/

.wysiwyg> :last-child {
    margin-bottom: 0;
}

.wysiwyg ul,
.wysiwyg ol {
    padding-left: 2rem;
}

.wysiwyg li {
    margin-bottom: var(--space-xxs);
}

.wysiwyg a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wysiwyg img {
    border-radius: var(--radius-md);
}

.section--dark .wysiwyg a {
    color: var(--color-white);
}


/*------------------------------------*\
    20. COOKIE BAR
\*------------------------------------*/

#siteCookie {
    background-color: var(--color-overlay-strong);
    position: fixed;
    z-index: 30;
    bottom: 0;
    padding: 10px 0;
    width: 100%;
}

#siteCookie,
#siteCookie p,
#siteCookie a,
#siteCookie .fa {
    color: var(--color-white);
    font-weight: var(--fw-semi);
}

#siteCookie p {
    font-size: var(--fs-sm);
    margin-right: 20px;
    margin-bottom: 0;
}

#siteCookie a {
    text-decoration: underline;
}

#siteCookie .inner {
    display: flex;
    align-items: center;
}

#siteCookie .fa {
    font-size: 28px;
    margin-left: auto;
}

#siteCookie i {
    cursor: pointer;
}


/*------------------------------------*\
    21. BLOCKS — EVENTS

    One row per event: date panel, photo, details. Sizes come from the design —
    183px panel, 388px photo, 10px radii — but as maxima, so the row reflows
    rather than overflowing on narrow screens.
\*------------------------------------*/

.events-listing__list {
    display: grid;
    gap: var(--space-2xl);
}

.event-card {
    display: grid;
    grid-template-columns: 183px 388px minmax(0, 1fr);
    align-items: stretch;
    gap: 1.9rem;
}

/* The date panel. It stretches to the row's height, with the day and month
   pairs centred in it — one pair for a single day or a range inside one month,
   two stacked when the range crosses months. */

.event-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.6rem;
    border-radius: 10px;
    background-color: var(--color-surface-neutral);
    text-align: center;
}

.event-card--ongoing .event-card__date {
    background-color: var(--color-surface-green);
}

.event-card__day {
    font-size: 3.6rem;
    font-weight: var(--fw-medium);
    line-height: 1.25;
    color: var(--color-charcoal);
}

.event-card__month {
    font-size: var(--fs-sm);
    font-weight: var(--fw-heavy);
    line-height: normal;
    color: var(--color-accent);
}

/* The gap between the two pairs of a cross-month range is bigger than the gap
   inside a pair, so each date reads as one unit. */

.event-card__month+.event-card__day {
    margin-top: var(--space-lg);
}

.event-card__media {
    align-self: stretch;
}

/* The photo keeps the design's 388 x 249 shape whatever it was uploaded as.
   Without a ratio here, height: 100% against an auto-height row resolves to
   auto and a square upload would make the row as tall as it is wide. */

.event-card__media-link {
    display: block;
    height: 100%;
    aspect-ratio: 388 / 249;
    border-radius: 10px;
    overflow: hidden;
}

.event-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.event-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-md);
}

/* Green pill with its own dot, drawn rather than an icon */

.event-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    background-color: var(--color-surface-green);
    font-size: 1.3rem;
    font-weight: var(--fw-semi);
    line-height: normal;
    color: var(--color-green);
}

.event-card__badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.event-card__title {
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.event-card__title a {
    color: inherit;
    text-decoration: none;
}

.event-card__title a:hover,
.event-card__title a:focus-visible {
    color: var(--color-primary);
}

.event-card__meta {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: normal;
    color: var(--color-accent);
}

.event-card__summary {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--color-text);
}

.event-card__summary p {
    margin-bottom: 0;
}

.event-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xxs);
}

.events-listing__empty {
    margin: 0;
    font-size: var(--fs-lead);
    color: var(--color-text-muted);
}

.events-listing__pagination {
    margin-top: var(--space-2xl);
}


/* The photo gives up its fixed width first, then the whole row stacks: date
   panel and photo side by side, details beneath. */

@media only screen and (max-width: 1199px) {
    .event-card {
        grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--space-md);
    }
}

@media only screen and (max-width: 991px) {
    .event-card {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .event-card__body {
        grid-column: 1 / -1;
    }

    .event-card__day {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 575px) {
    .event-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-card__date {
        /* A short banner rather than a tall panel once it is full width */
        flex-direction: row;
        gap: var(--space-xs);
        padding: 1.2rem 1.6rem;
    }

    .event-card__month+.event-card__day {
        margin-top: 0;
        margin-left: var(--space-md);
    }

    .event-card__actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/*------------------------------------*\
    22. BLOCKS — GALLERY GRID

    Tiled photographs. Every tile is cropped to one ratio so the rows line up
    however mixed the uploads are, and the column count comes from the block
    through --gallery-columns.
\*------------------------------------*/

.gallery-grid__items {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-grid__item {
    margin: 0;
}

.gallery-grid__link {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.gallery-grid__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--gallery-ratio, 4 / 3);
    object-fit: cover;
    object-position: center center;
    border-radius: var(--radius-sm);
}

/* The link already clips to the same radius, so the image inside it does not
   need its own — and a nested radius would show a hairline at the corners. */

.gallery-grid__link .gallery-grid__img {
    border-radius: 0;
}

.gallery-grid__link {
    transition: opacity var(--transition-fast);
}

.gallery-grid__link:hover,
.gallery-grid__link:focus-visible {
    opacity: 0.88;
}

.gallery-grid__buttons {
    margin-top: var(--space-2xl);
    justify-content: center;
}

/* Two up on tablet, and a single column only on the narrowest phones — a
   three-across grid of photographs stops being readable well before that. */

@media only screen and (max-width: 991px) {
    .gallery-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
    }
}

@media only screen and (max-width: 479px) {
    .gallery-grid__items {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*------------------------------------*\
    23. BLOCKS — PROMISE BANNER

    Full-bleed photograph, dark overlay, statement heading on the left and a
    checklist on the right. Always dark, so it carries the light-on-dark
    palette itself rather than taking the shared Background choice.
\*------------------------------------*/

.promise-banner {
    position: relative;
    overflow: hidden;
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.promise-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.promise-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.promise-banner__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(50, 50, 50, var(--process-overlay, 0.12));
}

/* Above the photograph */

.promise-banner > .container {
    position: relative;
    z-index: 1;
}

.promise-banner__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-xl) clamp(3.2rem, 5vw, 8rem);
}

.promise-banner__heading {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-light);
    line-height: 1.15;
    color: var(--color-white);
}

.promise-banner__text {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.promise-banner__text :last-child {
    margin-bottom: 0;
}

/* Each promise sits on its own translucent gold bar. The tick disc and check
   come from the shared .tick-list component. */

.promise-banner__ticks {
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.promise-banner__ticks .tick-list__item {
    gap: var(--space-md);
    padding: 1.4rem 1.8rem;
    border-radius: var(--radius-sm);
    background: rgba(167, 140, 72, 0.21);
}

.promise-banner__ticks .tick-list__icon {
    --tick-size: 38px;
    margin-top: 0;
    background-color: var(--color-accent);
}

.promise-banner__ticks .tick-list__text {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-white);
}

.promise-banner__buttons {
    margin-top: var(--space-lg);
}

/* Stacked below the breakpoint, heading first */

@media only screen and (max-width: 991px) {
    .promise-banner__inner {
        grid-template-columns: minmax(0, 1fr);
    }
   


}


/*------------------------------------*\
    24. SCROLL REVEAL

    A short fade and rise as blocks come into view. See js/reveal.js for which
    elements take part and the several ways they can be revealed.

    The hiding is deliberately gated on .has-reveal, a class only that script
    adds: with JavaScript off, or if the file fails to load, nothing here
    applies and the page renders as normal. Never hide anything on the strength
    of a class the stylesheet sets itself.
\*------------------------------------*/

.has-reveal .reveal {
    opacity: 0;
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Staggered sets get their step from the script */
    transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal .reveal.is-visible {
    opacity: 1;
}

/* The rise is kept off .reveal--fade, which marks elements positioned by a
   transform of their own — the contact card is centred with translateY(-50%),
   and writing transform here at all, even "none", moves it. Those fade only.
   Neither state below may mention transform for them. */

.has-reveal .reveal:not(.reveal--fade) {
    transform: translateY(14px);
}

.has-reveal .reveal.is-visible:not(.reveal--fade) {
    transform: none;
}

/* Belt and braces — the script already refuses to run under reduced motion */

@media (prefers-reduced-motion: reduce) {
    .has-reveal .reveal {
        opacity: 1;
        transition: none;
    }

    .has-reveal .reveal:not(.reveal--fade) {
        transform: none;
    }
}


/*------------------------------------*\
    REDUCED MOTION
\*------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}