/*
Theme Name: Builders choice
Theme URI:
Author: Walter Wakefield
Description: Builders choice.
Version: 1.0.0

/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-translate-x: 0;
            --tw-translate-y: 0;
            --tw-translate-z: 0;
            --tw-scale-x: 1;
            --tw-scale-y: 1;
            --tw-scale-z: 1;
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-tracking: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-backdrop-blur: initial;
            --tw-backdrop-brightness: initial;
            --tw-backdrop-contrast: initial;
            --tw-backdrop-grayscale: initial;
            --tw-backdrop-hue-rotate: initial;
            --tw-backdrop-invert: initial;
            --tw-backdrop-opacity: initial;
            --tw-backdrop-saturate: initial;
            --tw-backdrop-sepia: initial;
            --tw-duration: initial;
            --tw-ease: initial
        }
    }
}

@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-black: #000;
        --color-white: #fff;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --ease-out: cubic-bezier(0, 0, .2, 1);
        --aspect-video: 16 / 9;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol, ul, menu {
        list-style: none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

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

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple],[size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple],[size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab,red,red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }textarea {
         resize: vertical
     }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input:where([type=button],[type=reset],[type=submit]) {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .pointer-events-auto {
        pointer-events: auto
    }

    .pointer-events-none {
        pointer-events: none
    }

    .visible {
        visibility: visible
    }

    .absolute {
        position: absolute
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .sticky {
        position: sticky
    }

    .inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    .inset-\[-0\.5px_0\] {
        top: -.5px;
        right: 0;
        bottom: -.5px;
        left: 0
    }

    .inset-\[-1px_0_0_0\] {
        top: -1px;
        right: 0;
        bottom: 0;
        left: 0
    }

    .inset-\[-4\.17\%\] {
        top: -4.17%;
        right: -4.17%;
        bottom: -4.17%;
        left: -4.17%
    }

    .inset-\[12\.5\%\] {
        top: 12.5%;
        right: 12.5%;
        bottom: 12.5%;
        left: 12.5%
    }

    .-top-\[20px\] {
        top: -20px
    }

    .top-0 {
        top: 0
    }

    .top-1\/2 {
        top: 50%
    }

    .top-\[-7\.87\%\] {
        top: -7.87%
    }

    .top-\[-8\%\] {
        top: -8%
    }

    .top-\[-8\.68\%\] {
        top: -8.68%
    }

    .top-\[-13\.56\%\] {
        top: -13.56%
    }

    .top-\[-17\.63\%\] {
        top: -17.63%
    }

    .top-\[-25\%\] {
        top: -25%
    }

    .top-\[-103\.3\%\] {
        top: -103.3%
    }

    .top-\[3\.11px\] {
        top: 3.11px
    }

    .top-\[12px\] {
        top: 12px
    }

    .top-\[27\.76px\] {
        top: 27.76px
    }

    .top-\[53px\] {
        top: 53px
    }

    .top-\[55\.5px\] {
        top: 55.5px
    }

    .top-\[63px\] {
        top: 63px
    }

    .top-\[68\.25px\] {
        top: 68.25px
    }

    .top-\[107px\] {
        top: 107px
    }

    .top-\[113px\] {
        top: 113px
    }

    .top-\[123\.15px\] {
        top: 123.15px
    }

    .top-\[127px\] {
        top: 127px
    }

    .top-\[134px\] {
        top: 134px
    }

    .top-\[139px\] {
        top: 139px
    }

    .top-\[171px\] {
        top: 171px
    }

    .top-\[205\.5px\] {
        top: 205.5px
    }

    .top-\[265px\] {
        top: 265px
    }

    .top-\[277\.25px\] {
        top: 277.25px
    }

    .top-\[304px\] {
        top: 304px
    }

    .top-\[314px\] {
        top: 314px
    }

    .top-\[324px\] {
        top: 324px
    }

    .top-\[330\.67px\] {
        top: 330.67px
    }

    .top-\[365px\] {
        top: 365px
    }

    .top-\[368px\] {
        top: 368px
    }

    .top-\[403px\] {
        top: 403px
    }

    .top-\[472\.5px\] {
        top: 472.5px
    }

    .top-\[518px\] {
        top: 518px
    }

    .top-\[535px\] {
        top: 535px
    }

    .top-\[580px\] {
        top: 580px
    }

    .top-\[619\.85px\] {
        top: 619.85px
    }

    .top-\[628px\] {
        top: 628px
    }

    .top-\[658px\] {
        top: 658px
    }

    .top-\[680\.71px\] {
        top: 680.71px
    }

    .top-\[682px\] {
        top: 682px
    }

    .top-\[687px\] {
        top: 687px
    }

    .top-\[701px\] {
        top: 701px
    }

    .top-\[706px\] {
        top: 706px
    }

    .top-\[900px\] {
        top: 900px
    }

    .top-\[1800px\] {
        top: 1800px
    }

    .top-\[2700px\] {
        top: 2700px
    }

    .top-\[3468px\] {
        top: 3468px
    }

    .top-\[4107\.71px\] {
        top: 4107.71px
    }

    .top-\[4368px\] {
        top: 4368px
    }

    .top-\[5349px\] {
        top: 5349px
    }

    .top-\[6265px\] {
        top: 6265px
    }

    .top-\[7131px\] {
        top: 7131px
    }

    .top-\[8031px\] {
        top: 8031px
    }

    .top-\[8165px\] {
        top: 8165px
    }

    .top-\[8897px\] {
        top: 8897px
    }

    .top-\[calc\(100\%\+3px\)\] {
        top: calc(100% + 3px)
    }

    .top-px {
        top: 1px
    }

    .-right-\[20px\] {
        right: -20px
    }

    .-right-\[144px\] {
        right: -144px
    }

    .right-0 {
        right: 0
    }

    .right-\[12px\] {
        right: 12px
    }

    .right-\[16px\] {
        right: 16px
    }

    .-bottom-\[4px\] {
        bottom: -4px
    }

    .-bottom-\[14px\] {
        bottom: -14px
    }

    .-bottom-\[16px\] {
        bottom: -16px
    }

    .-bottom-\[18px\] {
        bottom: -18px
    }

    .-bottom-\[30px\] {
        bottom: -30px
    }

    .bottom-0 {
        bottom: 0
    }

    .bottom-\[16px\] {
        bottom: 16px
    }

    .bottom-\[20px\] {
        bottom: 20px
    }

    .bottom-\[24px\] {
        bottom: 24px
    }

    .-left-\[70px\] {
        left: -70px
    }

    .-left-\[200px\] {
        left: -200px
    }

    .left-0 {
        left: 0
    }

    .left-1\/2 {
        left: 50%
    }

    .left-\[-57\.81\%\] {
        left: -57.81%
    }

    .left-\[-83\.73\%\] {
        left: -83.73%
    }

    .left-\[-94\.04\%\] {
        left: -94.04%
    }

    .left-\[-105\.54\%\] {
        left: -105.54%
    }

    .left-\[-111\.56\%\] {
        left: -111.56%
    }

    .left-\[-112\.48\%\] {
        left: -112.48%
    }

    .left-\[20px\] {
        left: 20px
    }

    .left-\[42\.5px\] {
        left: 42.5px
    }

    .left-\[47px\] {
        left: 47px
    }

    .left-\[48px\] {
        left: 48px
    }

    .left-\[50px\] {
        left: 50px
    }

    .left-\[51px\] {
        left: 51px
    }

    .left-\[55px\] {
        left: 55px
    }

    .left-\[57\.48px\] {
        left: 57.48px
    }

    .left-\[58px\] {
        left: 58px
    }

    .left-\[59\.98px\] {
        left: 59.98px
    }

    .left-\[60\.79px\] {
        left: 60.79px
    }

    .left-\[60px\] {
        left: 60px
    }

    .left-\[61px\] {
        left: 61px
    }

    .left-\[62px\] {
        left: 62px
    }

    .left-\[371\.98px\] {
        left: 371.98px
    }

    .left-\[394\.04px\] {
        left: 394.04px
    }

    .left-\[483px\] {
        left: 483px
    }

    .left-\[494\.55px\] {
        left: 494.55px
    }

    .left-\[508px\] {
        left: 508px
    }

    .left-\[509px\] {
        left: 509px
    }

    .left-\[682px\] {
        left: 682px
    }

    .left-\[733\.3px\] {
        left: 733.3px
    }

    .left-\[782px\] {
        left: 782px
    }

    .left-\[810\.65px\] {
        left: 810.65px
    }

    .left-\[842px\] {
        left: 842px
    }

    .left-\[934px\] {
        left: 934px
    }

    .left-\[943\.09px\] {
        left: 943.09px
    }

    .left-\[955px\] {
        left: 955px
    }

    .left-\[956px\] {
        left: 956px
    }

    .left-\[957px\] {
        left: 957px
    }

    .left-\[1068\.02px\] {
        left: 1068.02px
    }

    .left-\[1068\.37px\] {
        left: 1068.37px
    }

    .left-\[1068\.38px\] {
        left: 1068.38px
    }

    .left-\[1068px\] {
        left: 1068px
    }

    .left-\[1136px\] {
        left: 1136px
    }

    .left-\[1376\.55px\] {
        left: 1376.55px
    }

    .left-\[1380px\] {
        left: 1380px
    }

    .z-10 {
        z-index: 10
    }

    .z-50 {
        z-index: 50
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .col-1 {
        grid-column: 1
    }

    .row-1 {
        grid-row: 1
    }

    .container {
        width: 100%
    }

    @media (min-width: 40rem) {
        .container {
            max-width: 40rem
        }
    }@media (min-width: 48rem) {
    .container {
        max-width: 48rem
    }
}@media (min-width: 64rem) {
    .container {
        max-width: 64rem
    }
}@media (min-width: 80rem) {
    .container {
        max-width: 80rem
    }
}@media (min-width: 96rem) {
    .container {
        max-width: 96rem
    }
}.m-0 {
     margin: 0
 }

    .mx-auto {
        margin-inline: auto
    }

    .-mt-\[8px\] {
        margin-top: -8px
    }

    .-mt-\[80px\] {
        margin-top: -80px
    }

    .-mt-\[96px\] {
        margin-top: -96px
    }

    .-mt-\[360px\] {
        margin-top: -360px
    }

    .mt-0 {
        margin-top: 0
    }

    .mt-\[2\.05px\] {
        margin-top: 2.05px
    }

    .mt-\[4px\] {
        margin-top: 4px
    }
   .mt-\[8px\] {
        margin-top: 8px
    }

    .mt-\[12px\] {
        margin-top: 12px
    }

    .mt-\[16px\] {
        margin-top: 16px
    }

    .mt-\[24px\] {
        margin-top: 24px
    }

    .mt-\[32px\] {
        margin-top: 32px
    }

    .mt-\[48px\] {
        margin-top: 48px
    }

    .mr-\[40px\] {
        margin-right: 40px
    }

    .-mb-\[8px\] {
        margin-bottom: -8px
    }

    .mb-0 {
        margin-bottom: 0
    }

    .mb-\[32px\] {
        margin-bottom: 32px
    }

    .mb-\[40px\] {
        margin-bottom: 40px
    }

    .mb-\[44px\] {
        margin-bottom: 44px
    }

    .mb-\[48px\] {
        margin-bottom: 48px
    }

    .mb-\[64px\] {
        margin-bottom: 64px
    }

    .mb-\[var\(--spacing-vertical\\\/spacing-vertical-base\,16px\)\] {
        margin-bottom: var(--spacing-vertical\/spacing-vertical-base, 16px)
    }

    .-ml-\[19px\] {
        margin-left: -19px
    }

    .ml-0 {
        margin-left: 0
    }

    .ml-\[27\.84px\] {
        margin-left: 27.84px
    }

    .ml-\[40px\] {
        margin-left: 40px
    }

    .block {
        display: block
    }

    .contents {
        display: contents
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline-block {
        display: inline-block
    }

    .inline-flex {
        display: inline-flex
    }

    .inline-grid {
        display: inline-grid
    }

    .\!aspect-auto {
        aspect-ratio: auto !important
    }

    .aspect-\[3\/2\] {
        aspect-ratio: 3/2
    }

    .aspect-square {
        aspect-ratio: 1
    }

    .aspect-video {
        aspect-ratio: var(--aspect-video)
    }

    .size-\[6px\] {
        width: 6px;
        height: 6px
    }

    .size-\[8px\] {
        width: 8px;
        height: 8px
    }

    .size-\[16px\] {
        width: 16px;
        height: 16px
    }

    .size-\[17px\] {
        width: 17px;
        height: 17px
    }

    .size-\[20px\] {
        width: 20px;
        height: 20px
    }

    .size-\[24px\] {
        width: 24px;
        height: 24px
    }

    .size-\[28px\] {
        width: 28px;
        height: 28px
    }

    .size-\[32px\] {
        width: 32px;
        height: 32px
    }

    .size-\[39\.298px\] {
        width: 39.298px;
        height: 39.298px
    }

    .size-\[40px\] {
        width: 40px;
        height: 40px
    }

    .size-\[44px\] {
        width: 44px;
        height: 44px
    }

    .size-\[46\.5px\] {
        width: 46.5px;
        height: 46.5px
    }

    .size-\[46px\] {
        width: 46px;
        height: 46px
    }

    .size-\[48px\] {
        width: 48px;
        height: 48px
    }

    .size-\[56px\] {
        width: 56px;
        height: 56px
    }

    .size-\[84px\] {
        width: 84px;
        height: 84px
    }

    .size-\[126px\] {
        width: 126px;
        height: 126px
    }

    .size-\[168px\] {
        width: 168px;
        height: 168px
    }

    .size-full {
        width: 100%;
        height: 100%
    }

    .h-0 {
        height: 0
    }

    .h-\[2px\] {
        height: 2px
    }

    .h-\[9\.602px\] {
        height: 9.602px
    }

    .h-\[10px\] {
        height: 10px
    }

    .h-\[14px\] {
        height: 14px
    }

    .h-\[16px\] {
        height: 16px
    }

    .h-\[24px\] {
        height: 24px
    }

    .h-\[36px\] {
        height: 36px
    }

    .h-\[37\.251px\] {
        height: 37.251px
    }

    .h-\[37px\] {
        height: 37px
    }

    .h-\[60\.867px\] {
        height: 60.867px
    }

    .h-\[72px\] {
        height: 72px
    }

    .h-\[75px\] {
        height: 75px
    }

    .h-\[80px\] {
        height: 80px
    }

    .h-\[83px\] {
        height: 83px
    }

    .h-\[112px\] {
        height: 112px
    }

    .h-\[116\%\] {
        height: 116%
    }

    .h-\[116\.96\%\] {
        height: 116.96%
    }

    .h-\[137\.35\%\] {
        height: 137.35%
    }

    .h-\[145px\] {
        height: 145px
    }

    .h-\[146\.43\%\] {
        height: 146.43%
    }

    .h-\[150\%\] {
        height: 150%
    }

    .h-\[151px\] {
        height: 151px
    }

    .h-\[156\.26\%\] {
        height: 156.26%
    }

    .h-\[160\.53\%\] {
        height: 160.53%
    }

    .h-\[162\.77\%\] {
        height: 162.77%
    }

    .h-\[183px\] {
        height: 183px
    }

    .h-\[200px\] {
        height: 200px
    }

    .h-\[213px\] {
        height: 213px
    }

    .h-\[235px\] {
        height: 235px
    }

    .h-\[245\.843px\] {
        height: 245.843px
    }

    .h-\[246px\] {
        height: 246px
    }

    .h-\[278px\] {
        height: 278px
    }

    .h-\[280px\] {
        height: 280px
    }

    .h-\[301\.1\%\] {
        height: 301.1%
    }

    .h-\[317px\] {
        height: 317px
    }

    .h-\[328\.5px\] {
        height: 328.5px
    }

    .h-\[329px\] {
        height: 329px
    }

    .h-\[336\.5px\] {
        height: 336.5px
    }

    .h-\[350\.041px\] {
        height: 350.041px
    }

    .h-\[356px\] {
        height: 356px
    }

    .h-\[363px\] {
        height: 363px
    }

    .h-\[373px\] {
        height: 373px
    }

    .h-\[379px\] {
        height: 379px
    }

    .h-\[396\.243px\] {
        height: 396.243px
    }

    .h-\[397px\] {
        height: 397px
    }

    .h-\[439px\] {
        height: 439px
    }

    .h-\[465px\] {
        height: 465px
    }

    .h-\[474px\] {
        height: 474px
    }

    .h-\[480px\] {
        height: 480px
    }

    .h-\[600px\] {
        height: 600px
    }

    .h-\[632px\] {
        height: 632px
    }

    .h-\[866px\] {
        height: 866px
    }

    .h-\[881px\] {
        height: 881px
    }

    .h-\[896\.892px\] {
        height: 896.892px
    }

    .h-\[900px\] {
        height: 900px
    }

    .h-\[916px\] {
        height: 916px
    }

    .h-\[981px\] {
        height: 981px
    }

    .h-\[9270px\] {
        height: 9270px
    }

    .h-auto {
        height: auto
    }

    .h-full {
        height: 100%
    }

    .max-h-\[288px\] {
        max-height: 288px
    }

    .min-h-0 {
        min-height: 0
    }

    .min-h-\[240px\] {
        min-height: 240px
    }

    .min-h-\[480px\] {
        min-height: 480px
    }

    .min-h-max {
        min-height: max-content
    }

    .min-h-px {
        min-height: 1px
    }

    .w-0 {
        width: 0
    }

    .w-\[2px\] {
        width: 2px
    }

    .w-\[16px\] {
        width: 16px
    }

    .w-\[22px\] {
        width: 22px
    }

    .w-\[25\.603px\] {
        width: 25.603px
    }

    .w-\[26px\] {
        width: 26px
    }

    .w-\[112\.164px\] {
        width: 112.164px
    }

    .w-\[144\%\] {
        width: 144%
    }

    .w-\[160\.456px\] {
        width: 160.456px
    }

    .w-\[200px\] {
        width: 200px
    }

    .w-\[215\.62\%\] {
        width: 215.62%
    }

    .w-\[220px\] {
        width: 220px
    }

    .w-\[253\.12\%\] {
        width: 253.12%
    }

    .w-\[267\.46\%\] {
        width: 267.46%
    }

    .w-\[269\.97\%\] {
        width: 269.97%
    }

    .w-\[280px\] {
        width: 280px
    }

    .w-\[288\.08\%\] {
        width: 288.08%
    }

    .w-\[300\.08\%\] {
        width: 300.08%
    }

    .w-\[300px\] {
        width: 300px
    }

    .w-\[312px\] {
        width: 312px
    }

    .w-\[313px\] {
        width: 313px
    }

    .w-\[373px\] {
        width: 373px
    }

    .w-\[419\.342px\] {
        width: 419.342px
    }

    .w-\[419px\] {
        width: 419px
    }

    .w-\[422px\] {
        width: 422px
    }

    .w-\[423px\] {
        width: 423px
    }

    .w-\[425\.521px\] {
        width: 425.521px
    }

    .w-\[425px\] {
        width: 425px
    }

    .w-\[511px\] {
        width: 511px
    }

    .w-\[538px\] {
        width: 538px
    }

    .w-\[560px\] {
        width: 560px
    }

    .w-\[569px\] {
        width: 569px
    }

    .w-\[580px\] {
        width: 580px
    }

    .w-\[584px\] {
        width: 584px
    }

    .w-\[598px\] {
        width: 598px
    }

    .w-\[646\.719px\] {
        width: 646.719px
    }

    .w-\[650px\] {
        width: 650px
    }

    .w-\[651\.915px\] {
        width: 651.915px
    }

    .w-\[658px\] {
        width: 658px
    }

    .w-\[676px\] {
        width: 676px
    }

    .w-\[770px\] {
        width: 770px
    }

    .w-\[772px\] {
        width: 772px
    }

    .w-\[872px\] {
        width: 872px
    }

    .w-\[881px\] {
        width: 881px
    }

    .w-\[896\.892px\] {
        width: 896.892px
    }

    .w-\[900px\] {
        width: 900px
    }

    .w-\[1111\.5px\] {
        width: 1111.5px
    }

    .w-\[1315\.759px\] {
        width: 1315.76px
    }

    .w-\[1316\.547px\] {
        width: 1316.55px
    }

    .w-\[1316px\] {
        width: 1316px
    }

    .w-\[1320px\] {
        width: 1320px
    }

    .w-\[1440px\] {
        width: 1440px
    }

    .w-\[clamp\(300px\,26vw\,520px\)\] {
        width: clamp(300px, 26vw, 520px)
    }

    .w-\[min-content\] {
        width: min-content
    }

    .w-auto {
        width: auto
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .w-screen {
        width: 100vw
    }

    .max-w-\[46\%\] {
        max-width: 46%
    }

    .max-w-\[600px\] {
        max-width: 600px
    }

    .max-w-\[650px\] {
        max-width: 650px
    }

    .max-w-\[652px\] {
        max-width: 652px
    }

    .max-w-\[757px\] {
        max-width: 757px
    }

    .max-w-\[800px\] {
        max-width: 800px
    }

    .max-w-\[822px\] {
        max-width: 822px
    }

    .max-w-\[872px\] {
        max-width: 872px
    }

    .max-w-\[1236px\] {
        max-width: 1236px
    }

    .max-w-\[1392px\] {
        max-width: 1392px
    }

    .max-w-\[1440px\] {
        max-width: 1440px
    }

    .max-w-full {
        max-width: 100%
    }

    .max-w-none {
        max-width: none
    }

    .min-w-full {
        min-width: 100%
    }

    .min-w-px {
        min-width: 1px
    }

    .flex-1 {
        flex: 1
    }

    .flex-\[1_0_0\] {
        flex: 1 0 0
    }

    .flex-none {
        flex: none
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .-translate-x-1\/2 {
        --tw-translate-x: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-x-\[80px\] {
        --tw-translate-x: -80px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-x-\[32px\] {
        --tw-translate-x: 32px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-1\/2 {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-\[6px\] {
        --tw-translate-y: -6px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-translate-y-full {
        --tw-translate-y: -100%;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-0 {
        --tw-translate-y: 0;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-\[6px\] {
        --tw-translate-y: 6px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-\[12px\] {
        --tw-translate-y: 12px;
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .translate-y-\[calc\(-50\%\+112px\)\] {
        --tw-translate-y: calc(-50% + 112px);
        translate: var(--tw-translate-x) var(--tw-translate-y)
    }

    .-scale-y-100 {
        --tw-scale-y: -100%;
        scale: var(--tw-scale-x) var(--tw-scale-y)
    }

    .-rotate-45 {
        rotate: -45deg
    }

    .rotate-45 {
        rotate: 45deg
    }

    .rotate-90 {
        rotate: 90deg
    }

    .rotate-180 {
        rotate: 180deg
    }

    .transform {
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
    }

    .cursor-ew-resize {
        cursor: ew-resize
    }

    .cursor-grab {
        cursor: grab
    }

    .cursor-pointer {
        cursor: pointer
    }

    .touch-none {
        touch-action: none
    }

    .resize {
        resize: both
    }

    .appearance-none {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .grid-cols-1 {
        grid-template-columns:repeat(1, minmax(0, 1fr))
    }

    .grid-cols-\[max-content\] {
        grid-template-columns:max-content
    }

    .grid-rows-\[max-content\] {
        grid-template-rows:max-content
    }

    .flex-col {
        flex-direction: column
    }

    .flex-row {
        flex-direction: row
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .place-items-start {
        place-items: start
    }

    .content-center {
        align-content: center
    }

    .content-stretch {
        align-content: stretch
    }

    .items-center {
        align-items: center
    }

    .items-end {
        align-items: flex-end
    }

    .items-start {
        align-items: flex-start
    }

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

    .justify-center {
        justify-content: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .gap-\[4px\] {
        gap: 4px
    }

    .gap-\[6px\] {
        gap: 6px
    }

    .gap-\[8px\] {
        gap: 8px
    }

    .gap-\[10px\] {
        gap: 10px
    }

    .gap-\[12px\] {
        gap: 12px
    }

    .gap-\[16px\] {
        gap: 16px
    }

    .gap-\[17px\] {
        gap: 17px
    }

    .gap-\[19px\] {
        gap: 19px
    }

    .gap-\[20px\] {
        gap: 20px
    }

    .gap-\[23px\] {
        gap: 23px
    }

    .gap-\[24px\] {
        gap: 24px
    }

    .gap-\[25px\] {
        gap: 25px
    }

    .gap-\[27px\] {
        gap: 27px
    }

    .gap-\[28px\] {
        gap: 28px
    }

    .gap-\[32px\] {
        gap: 32px
    }

    .gap-\[40px\] {
        gap: 40px
    }

    .gap-\[40px_24px\] {
        gap: 40px 24px
    }

    .gap-\[48px\] {
        gap: 48px
    }

    .gap-\[56px\] {
        gap: 56px
    }

    .gap-\[64px\] {
        gap: 64px
    }

    .gap-\[80px\] {
        gap: 80px
    }

    .gap-\[var\(--spacing\\\/spacing-2xs\,8px\)\] {
        gap: var(--spacing\/spacing-2xs, 8px)
    }

    .self-start {
        align-self: flex-start
    }

    .self-stretch {
        align-self: stretch
    }

    .overflow-clip {
        overflow: clip
    }

    .overflow-hidden {
        overflow: hidden
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .overflow-y-clip {
        overflow-y: clip
    }

    .scroll-smooth {
        scroll-behavior: smooth
    }

    .rounded-\[2px\] {
        border-radius: 2px
    }

    .rounded-\[8px\] {
        border-radius: 8px
    }

    .rounded-\[12px\] {
        border-radius: 12px
    }

    .rounded-\[16px\] {
        border-radius: 16px
    }

    .rounded-\[23\.25px\] {
        border-radius: 23.25px
    }

    .rounded-\[100px\] {
        border-radius: 100px
    }

    .rounded-\[var\(--spacing\\\/spacing-4\,4px\)\] {
        border-radius: var(--spacing\/spacing-4, 4px)
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .rounded-t-\[8px\] {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px
    }

    .rounded-t-\[24px\] {
        border-top-left-radius: 24px;
        border-top-right-radius: 24px
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-0 {
        border-style: var(--tw-border-style);
        border-width: 0
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-l {
        border-left-style: var(--tw-border-style);
        border-left-width: 1px
    }

    .border-solid {
        --tw-border-style: solid;
        border-style: solid
    }

    .border-\[\#5d5d5d\] {
        border-color: #5d5d5d
    }

    .border-\[\#aaa\] {
        border-color: #aaa
    }

    .border-\[\#c3c3c3\] {
        border-color: #c3c3c3
    }

    .border-\[\#ededea\] {
        border-color: #ededea
    }

    .border-\[\#fcaf17\] {
        border-color: #fcaf17
    }

    .border-\[var\(--brand-colours\\\/primary\,\#fcaf17\)\] {
        border-color: var(--brand-colours\/primary, #fcaf17)
    }

    .border-\[var\(--brand-colours\\\/white\,white\)\] {
        border-color: var(--brand-colours\/white, white)
    }

    .border-\[var\(--button\\\/primary\\\/default\,\#fcaf17\)\] {
        border-color: var(--button\/primary\/default, #fcaf17)
    }

    .border-\[var\(--colours\\\/grey\\\/grey-300\,\#c3c3c3\)\] {
        border-color: var(--colours\/grey\/grey-300, #c3c3c3)
    }

    .border-\[var\(--colours\\\/grey\\\/grey-400\,\#aaa\)\] {
        border-color: var(--colours\/grey\/grey-400, #aaa)
    }

    .border-\[var\(--colours\\\/grey\\\/grey-700\,\#5d5d5d\)\] {
        border-color: var(--colours\/grey\/grey-700, #5d5d5d)
    }

    .border-\[var\(--colours\\\/yellow\\\/yellow-400\,\#ffda66\)\] {
        border-color: var(--colours\/yellow\/yellow-400, #ffda66)
    }

    .border-transparent {
        border-color: #0000
    }

    .border-white {
        border-color: var(--color-white)
    }

    .bg-\[\#3d3d35\] {
        background-color: #3d3d35
    }

    .bg-\[\#fcaf17\] {
        background-color: #fcaf17
    }

    .bg-\[\#fdcf74\] {
        background-color: #fdcf74
    }

    .bg-\[\#fedfa2\] {
        background-color: #fedfa2
    }

    .bg-\[\#feefd1\] {
        background-color: #feefd1
    }

    .bg-\[\#e2e3de\] {
        background-color: #e2e3de
    }

    .bg-\[\#fff7ec\] {
        background-color: #fff7ec
    }

    .bg-\[rgba\(0\,0\,0\,0\.6\)\] {
        background-color: #0009
    }

    .bg-\[rgba\(22\,22\,22\,0\.01\)\] {
        background-color: #16161603
    }

    .bg-\[rgba\(26\,26\,26\,0\.7\)\] {
        background-color: #1a1a1ab3
    }

    .bg-\[rgba\(255\,255\,255\,0\.85\)\] {
        background-color: #ffffffd9
    }

    .bg-\[var\(--brand-colours\\\/primary\,\#fcaf17\)\] {
        background-color: var(--brand-colours\/primary, #fcaf17)
    }

    .bg-\[var\(--brand-colours\\\/white\,\#ffffff\)\] {
        background-color: var(--brand-colours\/white, #fff)
    }

    .bg-\[var\(--brand-colours\\\/white\,white\)\] {
        background-color: var(--brand-colours\/white, white)
    }

    .bg-\[var\(--button\\\/primary\\\/default\,\#fcaf17\)\] {
        background-color: var(--button\/primary\/default, #fcaf17)
    }

    .bg-\[var\(--colours\\\/primary\\\/primary-100\,\#feefd1\)\] {
        background-color: var(--colours\/primary\/primary-100, #feefd1)
    }

    .bg-\[var\(--colours\\\/primary\\\/primary-200\,\#fedfa2\)\] {
        background-color: var(--colours\/primary\/primary-200, #fedfa2)
    }

    .bg-\[var\(--colours\\\/primary\\\/primary-400\,\#fdbf45\)\] {
        background-color: var(--colours\/primary\/primary-400, #fdbf45)
    }

    .bg-\[var\(--colours\\\/secondary\\\/secondary-500\,\#3d3d35\)\] {
        background-color: var(--colours\/secondary\/secondary-500, #3d3d35)
    }

    .bg-black\/25 {
        background-color: #00000040
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/25 {
            background-color: color-mix(in oklab, var(--color-black) 25%, transparent)
        }
    }.bg-black\/45 {
         background-color: #00000073
     }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-black\/45 {
            background-color: color-mix(in oklab, var(--color-black) 45%, transparent)
        }
    }.bg-transparent {
         background-color: #0000
     }

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

    .bg-white\/85 {
        background-color: #ffffffd9
    }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/85 {
            background-color: color-mix(in oklab, var(--color-white) 85%, transparent)
        }
    }.bg-white\/90 {
         background-color: #ffffffe6
     }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/90 {
            background-color: color-mix(in oklab, var(--color-white) 90%, transparent)
        }
    }.bg-white\/95 {
         background-color: #fffffff2
     }

    @supports (color:color-mix(in lab,red,red)) {
        .bg-white\/95 {
            background-color: color-mix(in oklab, var(--color-white) 95%, transparent)
        }
    }.bg-gradient-to-t {
         --tw-gradient-position: to top in oklab;
         background-image: linear-gradient(var(--tw-gradient-stops))
     }

    .from-black\/85 {
        --tw-gradient-from: #000000d9
    }

    @supports (color:color-mix(in lab,red,red)) {
        .from-black\/85 {
            --tw-gradient-from: color-mix(in oklab, var(--color-black) 85%, transparent)
        }
    }.from-black\/85 {
         --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
     }

    .via-black\/0 {
        --tw-gradient-via: #0000
    }

    @supports (color:color-mix(in lab,red,red)) {
        .via-black\/0 {
            --tw-gradient-via: color-mix(in oklab, var(--color-black) 0%, transparent)
        }
    }.via-black\/0 {
         --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
         --tw-gradient-stops: var(--tw-gradient-via-stops)
     }

    .to-transparent {
        --tw-gradient-to: transparent;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))
    }

    .object-contain {
        object-fit: contain
    }

    .object-cover {
        object-fit: cover
    }

    .object-\[20\%_center\] {
        object-position: 20% center
    }

    .object-\[22\%_50\%\] {
        object-position: 22% 50%
    }

    .object-\[65\%_bottom\] {
        object-position: 65% bottom
    }

    .object-bottom {
        object-position: bottom
    }

    .object-left {
        object-position: left
    }

    .p-0 {
        padding: 0
    }

    .p-\[7px\] {
        padding: 7px
    }

    .p-\[16px\] {
        padding: 16px
    }

    .p-\[24px\] {
        padding: 24px
    }

    .p-\[32px\] {
        padding: 32px
    }

    .p-\[48px\] {
        padding: 48px
    }

    .px-\[12px\] {
        padding-inline: 12px
    }

    .px-\[14px\] {
        padding-inline: 14px
    }

    .px-\[16px\] {
        padding-inline: 16px
    }

    .px-\[20px\] {
        padding-inline: 20px
    }

    .px-\[24px\] {
        padding-inline: 24px
    }

    .px-\[40px\] {
        padding-inline: 40px
    }

    .px-\[59px\] {
        padding-inline: 59px
    }

    .px-\[var\(--spacing-horizontal\\\/spacing-horizontal-base\,16px\)\] {
        padding-inline: var(--spacing-horizontal\/spacing-horizontal-base, 16px)
    }

    .py-\[4px\] {
        padding-block: 4px
    }

    .py-\[8px\] {
        padding-block: 8px
    }

    .py-\[10px\] {
        padding-block: 10px
    }

    .py-\[12px\] {
        padding-block: 12px
    }

    .py-\[24px\] {
        padding-block: 24px
    }

    .py-\[32px\] {
        padding-block: 32px
    }

    .py-\[36px\] {
        padding-block: 36px
    }

    .py-\[60px\] {
        padding-block: 60px
    }

    .py-\[64px\] {
        padding-block: 64px
    }

    .py-\[80px\] {
        padding-block: 80px
    }

    .py-\[100px\] {
        padding-block: 100px
    }

    .py-\[120px\] {
        padding-block: 120px
    }

    .py-\[var\(--spacing-vertical\\\/spacing-vertical-sm\,12px\)\] {
        padding-block: var(--spacing-vertical\/spacing-vertical-sm, 12px)
    }

    .pt-\[8px\] {
        padding-top: 8px
    }

    .pt-\[16px\] {
        padding-top: 16px
    }

    .pt-\[24px\] {
        padding-top: 24px
    }

    .pt-\[64px\] {
        padding-top: 64px
    }

    .pt-\[80px\] {
        padding-top: 80px
    }

    .pt-\[104px\] {
        padding-top: 104px
    }

    .pt-\[112px\] {
        padding-top: 112px
    }

    .pt-\[120px\] {
        padding-top: 120px
    }

    .pt-\[140px\] {
        padding-top: 140px
    }

    .pr-\[40px\] {
        padding-right: 40px
    }

    .pb-\[4px\] {
        padding-bottom: 4px
    }

    .pb-\[12px\] {
        padding-bottom: 12px
    }

    .pb-\[20px\] {
        padding-bottom: 20px
    }

    .pb-\[24px\] {
        padding-bottom: 24px
    }

    .pb-\[40px\] {
        padding-bottom: 40px
    }

    .pb-\[48px\] {
        padding-bottom: 48px
    }

    .pb-\[64px\] {
        padding-bottom: 64px
    }

    .pb-\[80px\] {
        padding-bottom: 80px
    }

    .pb-\[100px\] {
        padding-bottom: 100px
    }

    .pl-\[24px\] {
        padding-left: 24px
    }

    .text-center {
        text-align: center
    }

    .text-left {
        text-align: left
    }

    .font-\[\'Corben\'\] {
        font-family: Corben
    }

    .font-\[\'Manrope\'\] {
        font-family: Manrope
    }

    .font-\[\'Stack_Sans_Text\:Regular\'\] {
        font-family: Stack Sans Text\:Regular
    }

    .font-\[family-name\:var\(--font-family\\\/body-font\,\'Stack_Sans_Text\:Regular\'\)\] {
        font-family: var(--font-family\/body-font, "Stack Sans Text:Regular")
    }

    .font-\[family-name\:var\(--font-family\\\/heading-font\,\'Stack_Sans_Text\:Light\'\)\] {
        font-family: var(--font-family\/heading-font, "Stack Sans Text:Light")
    }

    .text-\[0px\] {
        font-size: 0
    }

    .text-\[12px\] {
        font-size: 12px
    }

    .text-\[13px\] {
        font-size: 13px
    }

    .text-\[14px\] {
        font-size: 14px
    }

    .text-\[15px\] {
        font-size: 15px
    }

    .text-\[16px\] {
        font-size: 16px
    }

    .text-\[18px\] {
        font-size: 18px
    }

    .text-\[20px\] {
        font-size: 20px
    }

    .text-\[22px\] {
        font-size: 22px
    }

    .text-\[24px\] {
        font-size: 24px
    }

    .text-\[28px\] {
        font-size: 28px
    }

    .text-\[32px\] {
        font-size: 32px
    }

    .text-\[36px\] {
        font-size: 36px
    }

    .text-\[40px\] {
        font-size: 40px
    }

    .text-\[46px\] {
        font-size: 46px
    }

    .text-\[64px\] {
        font-size: 64px
    }

    .text-\[length\:var\(--font-size\\\/body\\\/base\,16px\)\] {
        font-size: var(--font-size\/body\/base, 16px)
    }

    .text-\[length\:var\(--font-size\\\/body\\\/small\,14px\)\] {
        font-size: var(--font-size\/body\/small, 14px)
    }

    .text-\[length\:var\(--font-size\\\/headings\\\/display-1\,64px\)\] {
        font-size: var(--font-size\/headings\/display-1, 64px)
    }

    .text-\[length\:var\(--font-size\\\/headings\\\/heading-1\,48px\)\] {
        font-size: var(--font-size\/headings\/heading-1, 48px)
    }

    .text-\[length\:var\(--font-size\\\/headings\\\/heading-2\,40px\)\] {
        font-size: var(--font-size\/headings\/heading-2, 40px)
    }

    .text-\[length\:var\(--font-size\\\/headings\\\/heading-5\,20px\)\] {
        font-size: var(--font-size\/headings\/heading-5, 20px)
    }

    .text-\[length\:var\(--font-size\\\/label\\\/base\,14px\)\] {
        font-size: var(--font-size\/label\/base, 14px)
    }

    .text-\[length\:var\(--font-size\\\/label\\\/small\,12px\)\] {
        font-size: var(--font-size\/label\/small, 12px)
    }

    .leading-\[0\] {
        --tw-leading: 0;
        line-height: 0
    }

    .leading-\[16px\] {
        --tw-leading: 16px;
        line-height: 16px
    }

    .leading-\[18px\] {
        --tw-leading: 18px;
        line-height: 18px
    }

    .leading-\[20px\] {
        --tw-leading: 20px;
        line-height: 20px
    }

    .leading-\[22px\] {
        --tw-leading: 22px;
        line-height: 22px
    }

    .leading-\[24px\] {
        --tw-leading: 24px;
        line-height: 24px
    }

    .leading-\[26px\] {
        --tw-leading: 26px;
        line-height: 26px
    }

    .leading-\[28px\] {
        --tw-leading: 28px;
        line-height: 28px
    }

    .leading-\[32px\] {
        --tw-leading: 32px;
        line-height: 32px
    }

    .leading-\[36px\] {
        --tw-leading: 36px;
        line-height: 36px
    }

    .leading-\[38px\] {
        --tw-leading: 38px;
        line-height: 38px
    }

    .leading-\[46px\] {
        --tw-leading: 46px;
        line-height: 46px
    }

    .leading-\[48px\] {
        --tw-leading: 48px;
        line-height: 48px
    }

    .leading-\[52px\] {
        --tw-leading: 52px;
        line-height: 52px
    }

    .leading-\[66px\] {
        --tw-leading: 66px;
        line-height: 66px
    }

    .leading-\[var\(--line-height\\\/body\\\/base\,24px\)\] {
        --tw-leading: var(--line-height\/body\/base, 24px);
        line-height: var(--line-height\/body\/base, 24px)
    }

    .leading-\[var\(--line-height\\\/body\\\/small\,20px\)\] {
        --tw-leading: var(--line-height\/body\/small, 20px);
        line-height: var(--line-height\/body\/small, 20px)
    }

    .leading-\[var\(--line-height\\\/headings\\\/display-1\,72px\)\] {
        --tw-leading: var(--line-height\/headings\/display-1, 72px);
        line-height: var(--line-height\/headings\/display-1, 72px)
    }

    .leading-\[var\(--line-height\\\/headings\\\/heading-1\,54px\)\] {
        --tw-leading: var(--line-height\/headings\/heading-1, 54px);
        line-height: var(--line-height\/headings\/heading-1, 54px)
    }

    .leading-\[var\(--line-height\\\/headings\\\/heading-2\,48px\)\] {
        --tw-leading: var(--line-height\/headings\/heading-2, 48px);
        line-height: var(--line-height\/headings\/heading-2, 48px)
    }

    .leading-\[var\(--line-height\\\/label\\\/base\,20px\)\] {
        --tw-leading: var(--line-height\/label\/base, 20px);
        line-height: var(--line-height\/label\/base, 20px)
    }

    .leading-\[var\(--line-height\\\/label\\\/small\,16px\)\] {
        --tw-leading: var(--line-height\/label\/small, 16px);
        line-height: var(--line-height\/label\/small, 16px)
    }

    .leading-none {
        --tw-leading: 1;
        line-height: 1
    }

    .font-\[var\(--font-weight\\\/light\,normal\)\] {
        --tw-font-weight: var(--font-weight\/light, normal);
        font-weight: var(--font-weight\/light, normal)
    }

    .font-\[var\(--font-weight\\\/regular\,normal\)\] {
        --tw-font-weight: var(--font-weight\/regular, normal);
        font-weight: var(--font-weight\/regular, normal)
    }

    .font-\[var\(--font-weight\\\/thin\,normal\)\] {
        --tw-font-weight: var(--font-weight\/thin, normal);
        font-weight: var(--font-weight\/thin, normal)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .tracking-\[-0\.4px\] {
        --tw-tracking: -.4px;
        letter-spacing: -.4px
    }

    .tracking-\[-0\.5px\] {
        --tw-tracking: -.5px;
        letter-spacing: -.5px
    }

    .tracking-\[-0\.28px\] {
        --tw-tracking: -.28px;
        letter-spacing: -.28px
    }

    .tracking-\[-0\.48px\] {
        --tw-tracking: -.48px;
        letter-spacing: -.48px
    }

    .tracking-\[-0\.64px\] {
        --tw-tracking: -.64px;
        letter-spacing: -.64px
    }

    .tracking-\[-0\.72px\] {
        --tw-tracking: -.72px;
        letter-spacing: -.72px
    }

    .tracking-\[-0\.96px\] {
        --tw-tracking: -.96px;
        letter-spacing: -.96px
    }

    .tracking-\[-1\.28px\] {
        --tw-tracking: -1.28px;
        letter-spacing: -1.28px
    }

    .tracking-\[0\.5px\] {
        --tw-tracking: .5px;
        letter-spacing: .5px
    }

    .\[word-break\:break-word\] {
        word-break: break-word
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .text-\[\#3d3d35\] {
        color: #3d3d35
    }

    .text-\[\#5d5d5d\] {
        color: #5d5d5d
    }

    .text-\[\#322305\] {
        color: #322305
    }

    .text-\[\#767676\] {
        color: #767676
    }

    .text-\[\#FCAF17\] {
        color: #fcaf17
    }

    .text-\[\#aaa\] {
        color: #aaa
    }

    .text-\[\#fdbf45\] {
        color: #fdbf45
    }

    .text-\[color\:var\(--brand-colours\\\/secondary\,\#3d3d35\)\] {
        color: var(--brand-colours\/secondary, #3d3d35)
    }

    .text-\[color\:var\(--brand-colours\\\/white\,white\)\] {
        color: var(--brand-colours\/white, white)
    }

    .text-\[color\:var\(--colours\\\/grey\\\/grey-200\,\#ddd\)\] {
        color: var(--colours\/grey\/grey-200, #ddd)
    }

    .text-\[color\:var\(--colours\\\/grey\\\/grey-300\,\#c3c3c3\)\] {
        color: var(--colours\/grey\/grey-300, #c3c3c3)
    }

    .text-\[color\:var\(--colours\\\/grey\\\/grey-400\,\#aaa\)\] {
        color: var(--colours\/grey\/grey-400, #aaa)
    }

    .text-\[color\:var\(--colours\\\/grey\\\/grey-500\,\#909090\)\] {
        color: var(--colours\/grey\/grey-500, #909090)
    }

    .text-\[color\:var\(--colours\\\/grey\\\/grey-600\,\#767676\)\] {
        color: var(--colours\/grey\/grey-600, #767676)
    }

    .text-\[color\:var\(--colours\\\/grey\\\/grey-700\,\#5d5d5d\)\] {
        color: var(--colours\/grey\/grey-700, #5d5d5d)
    }

    .text-\[color\:var\(--colours\\\/secondary\\\/secondary-500\,\#3d3d35\)\] {
        color: var(--colours\/secondary\/secondary-500, #3d3d35)
    }

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

    .not-italic {
        font-style: normal
    }

    .no-underline {
        text-decoration-line: none
    }

    .underline {
        text-decoration-line: underline
    }

    .decoration-solid {
        text-decoration-style: solid
    }

    .decoration-from-font {
        text-decoration-thickness: from-font
    }

    .opacity-0 {
        opacity: 0
    }

    .opacity-60 {
        opacity: .6
    }

    .opacity-100 {
        opacity: 1
    }

    .shadow-\[0px_1px_2px_0px_rgba\(198\,228\,246\,0\.05\)\] {
        --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, #c6e4f60d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_2px_8px_0px_rgba\(0\,0\,0\,0\.15\)\] {
        --tw-shadow: 0px 2px 8px 0px var(--tw-shadow-color, #00000026);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_4px_20px_2px_rgba\(0\,0\,0\,0\.05\)\] {
        --tw-shadow: 0px 4px 20px 2px var(--tw-shadow-color, #0000000d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-\[0px_10px_40px_2px_rgba\(0\,0\,0\,0\.06\)\] {
        --tw-shadow: 0px 10px 40px 2px var(--tw-shadow-color, #0000000f);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .blur {
        --tw-blur: blur(8px);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    .brightness-0 {
        --tw-brightness: brightness(0%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    .invert {
        --tw-invert: invert(100%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
    }

    .backdrop-blur-\[4px\] {
        --tw-backdrop-blur: blur(4px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
    }

    .backdrop-blur-\[8px\] {
        --tw-backdrop-blur: blur(8px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
    }

    .backdrop-blur-\[10px\] {
        --tw-backdrop-blur: blur(10px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)
    }

    .transition {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition\! {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
        transition-duration: var(--tw-duration, var(--default-transition-duration)) !important
    }

    .transition-\[grid-template-rows\] {
        transition-property: grid-template-rows;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[padding\] {
        transition-property: padding;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-\[transform\,background-color\,border-color\,backdrop-filter\] {
        transition-property: transform, background-color, border-color, -webkit-backdrop-filter, backdrop-filter;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-transform {
        transition-property: transform, translate, scale, rotate;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .duration-500 {
        --tw-duration: .5s;
        transition-duration: .5s
    }

    .ease-out {
        --tw-ease: var(--ease-out);
        transition-timing-function: var(--ease-out)
    }

    .select-none {
        -webkit-user-select: none;
        user-select: none
    }

    .\[text-underline-position\:from-font\] {
        text-underline-position: from-font
    }

    @media (hover: hover) {
        .group-hover\:pointer-events-auto:is(:where(.group):hover *) {
            pointer-events: auto
        }

        .group-hover\:opacity-0:is(:where(.group):hover *) {
            opacity: 0
        }

        .group-hover\:opacity-100:is(:where(.group):hover *) {
            opacity: 1
        }

        .hover\:border-\[\#c3c3c3\]:hover {
            border-color: #c3c3c3
        }
    }.active\:cursor-grabbing:active {
         cursor: grabbing
     }

    @media (min-width: 40rem) {
        .sm\:mt-0 {
            margin-top: 0
        }

        .sm\:hidden {
            display: none
        }

        .sm\:aspect-auto {
            aspect-ratio: auto
        }

        .sm\:h-\[300px\] {
            height: 300px
        }

        .sm\:h-\[360px\] {
            height: 360px
        }

        .sm\:h-\[380px\] {
            height: 380px
        }

        .sm\:h-\[720px\] {
            height: 720px
        }

        .sm\:w-\[calc\(50\%-12px\)\] {
            width: calc(50% - 12px)
        }

        .sm\:grid-cols-2 {
            grid-template-columns:repeat(2, minmax(0, 1fr))
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:gap-\[8px\] {
            gap: 8px
        }

        .sm\:gap-\[64px\] {
            gap: 64px
        }

        .sm\:p-\[48px\] {
            padding: 48px
        }

        .sm\:px-\[24px\] {
            padding-inline: 24px
        }

        .sm\:text-\[20px\] {
            font-size: 20px
        }

        .sm\:text-\[34px\] {
            font-size: 34px
        }

        .sm\:text-\[36px\] {
            font-size: 36px
        }

        .sm\:text-\[42px\] {
            font-size: 42px
        }

        .sm\:text-\[48px\] {
            font-size: 48px
        }

        .sm\:leading-\[28px\] {
            --tw-leading: 28px;
            line-height: 28px
        }

        .sm\:leading-\[40px\] {
            --tw-leading: 40px;
            line-height: 40px
        }

        .sm\:leading-\[42px\] {
            --tw-leading: 42px;
            line-height: 42px
        }

        .sm\:leading-\[46px\] {
            --tw-leading: 46px;
            line-height: 46px
        }

        .sm\:leading-\[50px\] {
            --tw-leading: 50px;
            line-height: 50px
        }

        .sm\:tracking-\[-0\.96px\] {
            --tw-tracking: -.96px;
            letter-spacing: -.96px
        }
    }
    @media (min-width: 64rem) {
    .lg\:order-1 {
        order: 1
    }

    .lg\:order-2 {
        order: 2
    }

    .lg\:mx-0 {
        margin-inline: 0
    }

    .lg\:mt-\[64px\] {
        margin-top: 64px
    }

    .lg\:mb-\[40px\] {
        margin-bottom: 40px
    }

    .lg\:mb-\[48px\] {
        margin-bottom: 48px
    }

    .lg\:mb-\[64px\] {
        margin-bottom: 64px
    }

    .lg\:block {
        display: block
    }

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:inline {
        display: inline
    }

    .lg\:h-\[43px\] {
        height: 43px
    }

    .lg\:h-\[356px\] {
        height: 356px
    }

    .lg\:h-\[480px\] {
        height: 480px
    }

    .lg\:h-\[540px\] {
        height: 540px
    }

    .lg\:h-\[900px\] {
        height: 900px
    }

    .lg\:w-\[425px\] {
        width: 425px
    }

    .lg\:w-\[580px\] {
        width: 580px
    }

    .lg\:max-w-\[425px\] {
        max-width: 425px
    }

    .lg\:max-w-full {
        max-width: 100%
    }

    .lg\:shrink-0 {
        flex-shrink: 0
    }

    .lg\:grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:items-center {
        align-items: center
    }

    .lg\:items-start {
        align-items: flex-start
    }

    .lg\:justify-between {
        justify-content: space-between
    }

    .lg\:justify-start {
        justify-content: flex-start
    }

    .lg\:gap-\[24px\] {
        gap: 24px
    }

    .lg\:gap-\[32px\] {
        gap: 32px
    }

    .lg\:gap-\[40px\] {
        gap: 40px
    }

    .lg\:gap-\[64px\] {
        gap: 64px
    }

    .lg\:gap-\[80px\] {
        gap: 80px
    }

    .lg\:px-\[40px\] {
        padding-inline: 40px
    }

    .lg\:py-\[80px\] {
        padding-block: 80px
    }

    .lg\:py-\[100px\] {
        padding-block: 100px
    }

    .lg\:pt-\[104px\] {
        padding-top: 104px
    }

    .lg\:pt-\[112px\] {
        padding-top: 112px
    }

    .lg\:pt-\[180px\] {
        padding-top: 180px
    }

    .lg\:pb-\[48px\] {
        padding-bottom: 48px
    }

    .lg\:pb-\[80px\] {
        padding-bottom: 80px
    }

    .lg\:pb-\[100px\] {
        padding-bottom: 100px
    }

    .lg\:text-left {
        text-align: left
    }

    .lg\:text-\[40px\] {
        font-size: 40px
    }

    .lg\:text-\[46px\] {
        font-size: 46px
    }

    .lg\:text-\[56px\] {
        font-size: 56px
    }

    .lg\:text-\[64px\] {
        font-size: 64px
    }

    .lg\:leading-\[46px\] {
        --tw-leading: 46px;
        line-height: 46px
    }

    .lg\:leading-\[52px\] {
        --tw-leading: 52px;
        line-height: 52px
    }

    .lg\:leading-\[60px\] {
        --tw-leading: 60px;
        line-height: 60px
    }

    .lg\:leading-\[66px\] {
        --tw-leading: 66px;
        line-height: 66px
    }

    .lg\:tracking-\[-1\.28px\] {
        --tw-tracking: -1.28px;
        letter-spacing: -1.28px
    }
}
}

@font-face {
    font-family: Stack Sans Text;
    src: url(fonts/stack-sans-text-latin.woff2) format("woff2");
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Stack Sans Text;
    src: url(fonts/stack-sans-text-latin-ext.woff2) format("woff2");
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Stack Sans Text\:Regular;
    src: url(fonts/stack-sans-text-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Stack Sans Text\:Regular;
    src: url(fonts/stack-sans-text-latin-ext.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Stack Sans Text\:Light;
    src: url(fonts/stack-sans-text-latin.woff2) format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Stack Sans Text\:Light;
    src: url(fonts/stack-sans-text-latin-ext.woff2) format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Corben;
    src: url(fonts/corben-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Corben;
    src: url(fonts/corben-latin-ext.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Corben\:Regular;
    src: url(fonts/corben-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope;
    src: url(fonts/manrope-latin.woff2) format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: Manrope;
    src: url(fonts/manrope-latin-ext.woff2) format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: Manrope\:Regular;
    src: url(fonts/manrope-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope\:Medium;
    src: url(fonts/manrope-latin.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope\:SemiBold;
    src: url(fonts/manrope-latin.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope\:Bold;
    src: url(fonts/manrope-latin.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Manrope\:ExtraBold;
    src: url(fonts/manrope-latin.woff2) format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

html, body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    background: #e9e9e6;
    margin: 0;
    padding: 0;
    font-family: Stack Sans Text, Stack Sans Text\:Regular, Helvetica Neue, Arial, sans-serif
}

.bc-page {
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    display: flex
}

.bc-frame {
    background: #fff;
    flex: none;
    position: relative
}
#c2-enquire-card .wpcf7-form-control-wrap{
    width: 100%;
}
section.w-full ul{
    list-style: disc;
    padding-left: 20px;
}
section.w-full ol{
    list-style: decimal;
    padding-left: 20px;
}
@media (prefers-reduced-motion: no-preference) {
    .bc-reveal {
        opacity: 0;
        will-change: opacity, transform;
        transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1);
        transform: translateY(18px)
    }

    .bc-reveal.bc-in {
        opacity: 1;
        transform: none
    }

    .bc-line {
        opacity: 0;
        transition: opacity .6s
    }

    .bc-line.bc-in {
        opacity: 1
    }

    .bc-fade {
        opacity: 0;
        transition: opacity .6s
    }

    .bc-fade.bc-in {
        opacity: 1
    }
}

.bc-flip {
    perspective: 1400px
}

.bc-flip-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    position: relative
}

.bc-flip.is-flipped .bc-flip-inner {
    transform: rotateY(180deg)
}

.bc-flip-face {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.bc-flip-back {
    transform: rotateY(180deg)
}

@media (prefers-reduced-motion: reduce) {
    .bc-flip-inner {
        transition: none
    }
}

.bc-cta {
    cursor: pointer;
    transition: transform .2s, filter .2s, opacity .2s
}

.bc-cta:hover {
    filter: brightness(1.04);
}

.bc-cta:active {
    transform: translateY(0)
}

.bc-link {
    cursor: pointer;
    transition: opacity .2s, color .2s
}

.bc-link:hover {
    opacity: .65
}

.bc-cta:focus-visible, .bc-link:focus-visible {
    outline-offset: 3px;
    border-radius: 4px;
    outline: 2px solid #fcaf17
}

.bc-no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.bc-no-scrollbar::-webkit-scrollbar {
    display: none
}

@media (min-width: 64rem) {
    .bc-tool-video {
        width: 855px;
        max-width: 100%;
        margin-inline: auto
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

/* ---- Vanilla-JS additions (not in the compiled Tailwind output) -------- */

/* Page background = ink green, so iOS rubber-band overscroll past the footer
   (and above the hero) shows the footer/splash colour, not white. */
/* The compiled Tailwind bundle's html,body rule (line 1) is a leftover
   from Concept 1's font stack (font-family:Stack Sans Text...) and the
   wrong background (#e9e9e6) — this overrides both at the root so nothing
   inheriting from html/body falls back to the wrong font. */
html, body {
    background-color: #3d3d35;
    font-family: Manrope, sans-serif
}

/* Steps carousel images — 4:3 rather than square. aspect-[4/3] was never
   generated into the compiled bundle (only aspect-square happened to be
   used elsewhere), so it would silently do nothing if used directly. */
.bc-step-img {
    aspect-ratio: 4/3
}

/* about.html's image/text split sections use lg:grid-cols-2, which was never
   generated into the compiled Tailwind bundle above (only lg:grid-cols-3
   exists) — added by hand so the two-column layout actually applies at lg. */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

/* about.html team card photo backdrop (dark green) — a new brand colour not
   used anywhere else in the compiled bundle, so it was never generated. */
.bg-\[\#0f2e22\] {
    background-color: #0f2e22
}

/* about.html team card name/role pills sit over the photo with left-[12px]/
   bottom-[12px] — neither was ever generated into the compiled bundle
   (no other element on the site used those exact offsets), so added by hand. */
.left-\[12px\] {
    left: 12px
}

.bottom-\[12px\] {
    bottom: 12px
}

/* about.html closing CTA button spacing — mt-[16px] was never generated into
   the compiled Tailwind bundle, so it's added by hand here. */
.bc-cta-mt-16 {
    margin-top: 16px
}

/* about.html closing CTA underline under "build" — h-[18.4px] (16px + 15%)
   was never generated into the compiled bundle. */
.bc-underline-cta-build {
    height: 18.4px
}

/* about.html "meet the team" arrow below the intro paragraph — h-[50px] was
   never generated into the compiled bundle either; sized here at 25% smaller
   (37.5px), flipped horizontally and shifted right. */
.bc-arrow-team {
    height: 46.875px;
    width: auto;
    transform: translateX(240px) translateY(-24px) scaleX(-1)
}

@media (max-width: 39.99rem) {
    .bc-arrow-team {
        transform: translateX(140px) translateY(-24px) scaleX(-1)
    }
}

/* eligibility-check.html arrow — flipped back to its unmirrored orientation,
   scoped so it doesn't affect the shared .bc-arrow-team usage on about.html. */
.bc-arrow-team-flip {
    height: 58.59375px;
    transform: translateX(320px) translateY(-24px) rotate(-24deg) scaleX(1)
}

@media (max-width: 39.99rem) {
    .bc-arrow-team-flip {
        transform: translateX(140px) translateY(-24px) scaleX(-1)
    }
}

/* about.html "meet the team" grid — grid-cols-2 (mobile) and sm:grid-cols-4
   were never generated into the compiled bundle (only grid-cols-4 exists
   unconditionally), so the 2-per-row mobile layout is added by hand. */
.grid-cols-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

@media (min-width: 40rem) {
    .sm\:grid-cols-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

/* about.html's image placeholders use aspect-[4/3], also never generated into
   the compiled bundle above (only aspect-[3/2] exists) — added by hand so all
   three image blocks share the same 4:3 ratio instead of collapsing to 0 height. */
.aspect-\[4\/3\] {
    aspect-ratio: 4/3
}

@media (max-width: 1023px) {
    .hide_mob{
        display:none
    }
    [data-no-mobile-fade] {
        opacity: 1 !important;
        transform: none !important
    }
}

/* Testimonials heading panel — min-h-[397px] was never generated into the
   compiled bundle (only the fixed h-[397px] used by the quote cards exists),
   so it's added by hand here to let the panel grow past 397px rather than
   crop its heading at the original (unshrunk) font sizes. */
.min-h-\[397px\] {
    min-height: 397px
}

/* about.html "meet the team" grid — bare grid-cols-3 (base breakpoint) was
   never generated into the compiled bundle (only lg:grid-cols-3 exists), so
   the 3-per-row layout is added by hand for it to apply at every width. */
.grid-cols-3 {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

/* Page banners (about/floor-plans/house-and-land) — height relative to the
   homepage hero's 100vh/100svh (.bc-hero-full, hand-written rather than a
   Tailwind utility): 50vh -> 62.5vh (+25%) -> 75vh (+20%) -> 82.5vh (+10%)
   -> 90.75vh (+10%). Neither arbitrary value was ever generated into the
   compiled bundle, so added here. */
.h-\[90\.75vh\] {
    height: 90.75vh
}

.h-\[90\.75svh\] {
    height: 90.75svh
}

/* border-[#3d3d35] was never generated into the compiled bundle even though
   a couple of outline-button instances already reference it (floor-plans.html,
   house-and-land.html) — those have been silently borderless all along.
   Added by hand here so it actually renders, including for the new house &
   land filter pills' active state. */
.border-\[\#3d3d35\] {
    border-color: #3d3d35
}

/* house-and-land.html exclusive lot listing grid — hand-written rather than
   composed from Tailwind utilities: too many of the needed arbitrary
   values/variants (p-[20px], group-hover:*, hover:shadow-[...], mt-auto,
   etc.) were never generated into the compiled bundle above. Scoped to this
   page only — the shared bc-house-track/bc-house-card teaser carousel on
   index.html/floor-plans.html is untouched. */
/* border-top/bottom would only span the filter bar's own (max-w-[1392px]
   padded) container — these full-bleed pseudo-elements stretch the lines
   edge-to-edge across the viewport instead. */
.bc-plan-filters {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    padding: 24px 0
}

.bc-plan-filters::before, .bc-plan-filters::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 1px;
    background: #ededea
}

.bc-plan-filters::before {
    top: 0
}

.bc-plan-filters::after {
    bottom: 0
}

@media (min-width: 64rem) {
    .bc-plan-filters {
        margin-bottom: 48px
    }
}

.bc-plan-filter-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    row-gap: 12px
}

.bc-plan-filter-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.bc-plan-filter-label {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #5d5d5d;
    white-space: nowrap
}

.bc-plan-pills {
    display: flex;
    align-items: center;
    gap: 6px
}

.bc-plan-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid #c3c3c3;
    background: #fff;
    padding: 7px 14px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: #3d3d35;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease
}

.bc-plan-pill:hover {
    border-color: #3d3d35
}

.bc-plan-pill.is-active {
    background: #3d3d35;
    border-color: #3d3d35;
    color: #fff
}

.bc-plan-clear {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #5d5d5d;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0
}

.bc-plan-clear:hover {
    color: #3d3d35
}

.bc-plan-sort {
    display: flex;
    align-items: center;
    gap: 8px
}

.bc-plan-sort select {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 100px;
    border: 1px solid #c3c3c3;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3d35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding: 8px 38px 8px 16px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #3d3d35;
    cursor: pointer
}

.bc-plan-empty {
    display: none;
    padding: 48px 24px;
    text-align: center;
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #5d5d5d
}

.bc-plan-empty.is-visible {
    display: block
}

.bc-plan-card[hidden] {
    display: none
}

/* house-and-land.html lot cards — floor plan as the primary visual (right),
   stacked spec icons (left), footer bar with wishlist + View Design. A
   separate component from .bc-plan-card since floor-plans.html keeps the
   render-photo + hover-reveal pattern; this page's cards are always-visible
   floor plans instead. */
.bc-lot-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #c3c3c3;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .3s ease
}

.bc-lot-card:hover {
    box-shadow: 0px 10px 40px 2px rgba(0, 0, 0, .08)
}

.bc-lot-card[hidden] {
    display: none
}

.bc-lot-header {
    padding: 20px 20px 0
}

.bc-lot-address {
    font-family: Corben, serif;
    font-size: 18px;
    line-height: 22px;
    color: #3d3d35
}

.bc-lot-price {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #5d5d5d;
    margin-top: 6px
}

.bc-lot-body {
    display: flex;
    gap: 16px;
    padding: 20px
}

.bc-lot-specs-col {
    display: flex;
    flex: 0 0 56px;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

.bc-lot-spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #3d3d35
}

.bc-lot-spec-icon {
    width: 32px;
    height: 32px
}

.bc-lot-floorplan {
    position: relative;
    flex: 1;
    aspect-ratio: 3/4;
    background: #f4f4f1;
    border-radius: 8px;
    overflow: hidden
}

.bc-lot-floorplan img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px
}

.bc-lot-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px
}

.bc-lot-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #3d3d35;
    transition: opacity .18s ease
}

/* Matches .bc-team-bio__cta-icon (team bio "Get in touch" button) — same
   circular yellow badge treatment, just without the rotation since this
   arrow glyph is already drawn pointing up-right. */
.bc-lot-view-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    background: #fcaf17
}

/* floor-plans.html per-card "View floor plan" button — same text+icon
   treatment as .bc-lot-view, just as an actual <button> (it opens the
   shared floor-plan lightbox via data-design-tile) with browser button
   chrome reset and pinned to the bottom of the card like the old CTA. */
.bc-plan-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    margin-top: auto;
    background: none;
    border: 0;
    padding: 0;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #3d3d35;
    cursor: pointer
}

.bc-lot-view svg {
    transition: transform .25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bc-lot-card:hover .bc-lot-view svg {
    transform: rotate(45deg)
}

.bc-lot-empty {
    display: none;
    padding: 48px 24px;
    text-align: center;
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #5d5d5d
}

.bc-lot-empty.is-visible {
    display: block
}

.bc-lot-grid {
    display: grid;
    grid-template-columns:repeat(1, minmax(0, 1fr));
    gap: 24px
}

@media (min-width: 40rem) {
    .bc-lot-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 64rem) {
    .bc-lot-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.bc-plan-grid {
    display: grid;
    grid-template-columns:repeat(1, minmax(0, 1fr));
    gap: 24px
}

@media (min-width: 40rem) {
    .bc-plan-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 64rem) {
    .bc-plan-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.bc-plan-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid #c3c3c3;
    background: #fff;
    cursor: pointer;
    transition: box-shadow .3s ease
}

.bc-plan-card:hover {
    box-shadow: 0px 10px 40px 2px rgba(0, 0, 0, .08)
}

.bc-plan-photo {
    position: relative;
    aspect-ratio: 4/3;
    width: 100%;
    overflow: hidden
}

.bc-plan-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

.bc-plan-card:hover .bc-plan-photo img {
    transform: scale(1.05)
}

/* Hovering a design card swaps the render for its floor plan (a diagram, so
   contain+white background rather than the render's cover crop; no
   hover-zoom scale either — it should just appear, not scale like a photo). */
.bc-plan-photo .bc-plan-floorplan {
    object-fit: contain;
    background: #fff;
    padding: 16px;
    opacity: 0;
    transition: opacity .3s ease
}

.bc-plan-card:hover .bc-plan-photo .bc-plan-floorplan {
    opacity: 1;
    transform: none
}

.bc-plan-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 20px
}

.bc-plan-name {
    font-family: Corben, serif;
    font-size: 20px;
    line-height: 24px;
    color: #3d3d35
}

.bc-plan-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px
}

.bc-plan-spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #5d5d5d;
    white-space: nowrap
}

.bc-plan-spec-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #3d3d35
}

.bc-plan-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #ededea;
    padding-top: 16px
}

.bc-plan-price {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #3d3d35
}

/* eligibility-check.html step-by-step wizard — one question per screen
   (intro -> 6 steps -> thanks), same interaction model as Verve's Smart
   Property Form: single-select options auto-advance on click, free-text
   steps (deposit, contact) need an explicit Continue/Submit button, and a
   bottom bar carries the Previous button + step counter. Hand-written since
   this is a distinct component, not composed from existing utilities. */
.elig-intro {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center
}

.elig-intro.active {
    display: flex
}

.elig-step {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    animation: elig-in .3s cubic-bezier(.22, 1, .36, 1) both
}

.elig-step.active {
    display: flex
}

.elig-step.going-back {
    animation: elig-in-back .3s cubic-bezier(.22, 1, .36, 1) both
}

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

@keyframes elig-in-back {
    from {
        opacity: 0;
        transform: translateY(-12px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.elig-question {
    font-family: Corben, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 27px;
    color: #fff
}

@media (min-width: 40rem) {
    .elig-question {
        font-size: 26px;
        line-height: 31px
    }
}

.elig-hint {
    font-family: Manrope, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, .65);
    margin-top: -12px
}

.elig-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 50%
}

.elig-option {
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    padding: 16px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease
}

.elig-option:hover {
    border-color: #fff
}

.elig-option.selected {
    background: #fcaf17;
    border-color: #fcaf17;
    color: #3d3d35
}

.elig-inputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%
}

#elig-card #elig-step-4 .bc-field-border {
    width: 50%
}

.elig-nav {
    display: flex;
    justify-content: center;
    margin-top: 8px
}

.elig-btn-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    border: 1px solid #fcaf17;
    background: #fcaf17;
    color: #3d3d35;
    padding: 12px 16px;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: opacity .18s ease
}

.elig-btn-next:hover {
    opacity: .82
}

.elig-btn-next .btn-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.elig-bottom-bar {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    align-items: center;
    width: 50%;
    margin: 24px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .15)
}

.elig-prev-btn {
    background: none;
    border: 0;
    padding: 0;
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease
}

.elig-prev-btn.visible {
    opacity: 1;
    visibility: visible
}

.elig-prev-btn:hover {
    color: #fff
}

.elig-step-label {
    font-family: Manrope, sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: rgba(255, 255, 255, .6);
    text-align: center
}

/* #elig-card sits directly on the section's dark-green background (no panel
   styling) — bc-form-input/bc-field-border/thanks text are shared with the
   light-background enquire form on book-a-free-consultation.html/index.html,
   so these are scoped to #elig-card only, not changed globally). */
#elig-card .bc-form-input {
    color: #fff;
    text-align: center
}

#elig-card .bc-form-input::placeholder {
    color: rgba(255, 255, 255, .45)
}

#elig-card .bc-field-border {
    border-color: rgba(255, 255, 255, .3)
}

#elig-card #elig-thanks h3 {
    color: #fff
}

#elig-card #elig-thanks p {
    color: rgba(255, 255, 255, .7)
}

/* floor-plans.html "Explore some of our popular designs" heading — sm:text-
   [32px]/sm:leading-[38px] were never generated into the compiled bundle
   (nearby sm sizes exist but not these exact values), so added by hand. */
@media (min-width: 40rem) {
    .sm\:text-\[32px\] {
        font-size: 32px
    }

    .sm\:leading-\[38px\] {
        line-height: 38px
    }
}

/* floor-plans.html intro paragraph — w-3/4 was never generated into the
   compiled bundle, added by hand. */
.w-3\/4 {
    width: 75%
}

/* index.html eyebrow labels — uppercase was never generated into the
   compiled bundle, added by hand. */
.uppercase {
    text-transform: uppercase
}

/* Brand splash — quick reveal of the ink-green + B mark before the homepage content, shown once per load. Hand-written (not Tailwind-generated) so it survives if styles.css is ever recompiled. */
.bc-splash {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3d3d35;
    transform: translateY(0);
    transition: transform .6s cubic-bezier(.65, 0, .35, 1)
}

/* Subtle fade + scale reveal of the real B mark (assets/builders-choice-b.svg,
   inlined as plain filled paths — no draw/mask/zoom effects). */
.bc-splash__logo {
    height: 105px;
    width: auto;
    opacity: 0;
    transform: scale(.9);
    transition: opacity .5s ease-out, transform .5s ease-out
}

.bc-splash--visible .bc-splash__logo {
    opacity: 1;
    transform: scale(1)
}

.bc-splash--exit {
    transform: translateY(-100%)
}

@media (prefers-reduced-motion: reduce) {
    .bc-splash {
        display: none
    }
}

/* Floor plan lightbox — replaces the old hover/tap-to-reveal-in-place tile
   behaviour with a click-to-open modal (see initHomeDesignTiles in
   script.js). One shared lightbox per page, populated from each tile's
   data-floorplan-img/-alt/-name/-specs/-price attributes. */
.bc-floorplan-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s
}

.bc-floorplan-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease
}

.bc-floorplan-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(61, 61, 53, .92)
}

.bc-floorplan-lightbox__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    transform: scale(.96);
    transition: transform .3s cubic-bezier(.65, 0, .35, 1)
}

.bc-floorplan-lightbox.is-open .bc-floorplan-lightbox__panel {
    transform: scale(1)
}

.bc-floorplan-lightbox__close {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 1;
    display: flex;
    height: 44px;
    width: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .15);
    font-size: 24px;
    line-height: 1;
    color: #3d3d35
}

/* Floor plan zoom + pan (initHomeDesignTiles in script.js): the wrapper is a
   fixed-height scroll region; the +/- controls widen the image past the
   wrapper's edges and native scroll (wheel/trackpad) plus a pointer-drag
   layer handle panning while zoomed in. */
.bc-floorplan-lightbox__imgstage {
    position: relative
}

.bc-floorplan-lightbox__imgwrap {
    position: relative;
    height: 60vh;
    max-height: 60vh;
    overflow: auto;
    background: #fff;
    touch-action: none
}

.bc-floorplan-lightbox__img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 16px;
    user-select: none;
    -webkit-user-drag: none
}

.bc-floorplan-lightbox__imgwrap.is-zoomable {
    cursor: grab
}

.bc-floorplan-lightbox__imgwrap.is-dragging {
    cursor: grabbing
}

.bc-floorplan-lightbox__zoomctrls {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .15);
    padding: 4px
}

.bc-floorplan-lightbox__zoombtn {
    display: flex;
    height: 32px;
    width: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 18px;
    line-height: 1;
    color: #3d3d35;
    transition: opacity .2s ease
}

.bc-floorplan-lightbox__zoombtn:hover:not(:disabled) {
    background: #f2f2ef
}

.bc-floorplan-lightbox__zoombtn:disabled {
    opacity: .35;
    cursor: default
}

.bc-floorplan-lightbox__zoomreset {
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600
}

.bc-floorplan-lightbox__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 20px
}

.bc-floorplan-lightbox__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.bc-floorplan-lightbox__cta {
    flex-shrink: 0
}

/* House & Land Packages — horizontal swipe carousel on mobile (same pattern as .bc-testimonial-track), reverts to the original 2-up grid at sm and up so desktop/tablet is unchanged. */
.bc-house-track {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory
}

.bc-house-card {
    width: 85%;
    flex-shrink: 0;
    scroll-snap-align: center
}

@media (min-width: 40rem) {
    .bc-house-track {
        display: grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        align-items: start;
        overflow-x: visible;
        scroll-snap-type: none
    }

    .bc-house-card {
        width: auto;
        flex-shrink: 1;
        scroll-snap-align: none
    }
}

/* Land→build slider: let vertical swipes scroll the page (pan-y). Only the
   grips keep touch-action:none, so a horizontal handle-drag still works but a
   vertical finger drag over the slider body scrolls normally. */
[data-stage-slider] {
    touch-action: pan-y
}

.bc-hero-underline {
    width: 475px;
    height: auto;
    max-width: none;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    z-index: -1
}

/* narrower variant — floor-plans.html banner ("Find a design") only, other
   pages' hero underlines keep the default width */
.bc-hero-underline--narrow {
    width: 330px;
    bottom: -22px
}

@media (max-width: 39.99rem) {
    .bc-hero-underline--narrow {
        width: 175px;
        bottom: -14px
    }
}

.bc-underline-behind {
    z-index: -1
}

.bc-arrow-handpicked {
    top: 50%;
    left: 100%;
    margin-left: 80px;
    height: 50px;
    width: auto;
    transform: translateY(calc(-50% + 24px)) scaleX(-1)
}

/* about.html headings ("About us", "different") — arrow sits clearly to the
   right of a single short word, unlike .bc-arrow-why-side which is tuned to
   tuck into a specific 2-line heading on the homepage. */
.bc-arrow-right-of-text {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 16px;
    height: 44px;
    width: auto;
    transform: translateY(calc(-50% + 28px))
}

@media (min-width: 64rem) {
    .bc-arrow-right-of-text {
        height: 56px;
        margin-left: 24px
    }
}

/* Only show the "hand-picked" arrow on desktop — below lg its position depends
   on where the word wraps, which varies by device and can land over the text. */
@media (max-width: 63.99rem) {
    .bc-arrow-handpicked {
        display: none
    }
}

.bc-mobile-overlay {
    background-color: rgba(61, 61, 53, .75);
    z-index: 40
}

.bc-arrow-why-side {
    top: 50%;
    left: 100%;
    margin-left: -128px;
    height: 80px;
    width: auto;
    transform: translateY(calc(-50% + 24px))
}

/* ---- Scribble hover fill on CTAs (huts.com-style) ------------------------
   Buttons stay solid yellow at rest; on hover a thick #3d3d35 scribble draws
   across the pill (only stroke-dashoffset animates) and the label flips to
   white. The border flips to ink too so no yellow ring rings the fill. The
   SVG scribble markup lives inside each .bc-scribble button — pure CSS. */
.bc-scribble {
    position: relative;
    overflow: hidden;
    border-width: 0
}

.bc-scribble:hover, .bc-scribble:active {
    transform: none
}

.scribble__fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.scribble__path {
    stroke: #3d3d35;
    stroke-width: 40;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .55s ease-out
}

.bc-scribble:hover .scribble__path, .bc-scribble:focus-visible .scribble__path {
    stroke-dashoffset: 0
}

.scribble__label {
    position: relative;
    z-index: 1;
    transition: color .3s ease-out
}

.bc-scribble:hover .scribble__label, .bc-scribble:focus-visible .scribble__label {
    color: #fff
}

/* Outlined (white-bg) buttons using the scribble hover need their border
   back — .bc-scribble zeroes border-width for the solid-yellow CTAs (see
   above), which would otherwise erase the visible outline at rest. */
.bc-scribble-outline {
    border-width: 1px
}

/* house-and-land.html benefit-list bullets — size-[22px]/size-[13px] were
   never generated into the compiled bundle (only other size-[Npx] values
   happened to be used elsewhere), so the circle + tick collapsed to zero
   size and were invisible. Added by hand. */
.size-\[22px\] {
    width: 22px;
    height: 22px
}

.size-\[13px\] {
    width: 13px;
    height: 13px
}

/* house-and-land.html "why choose h&l" 4-per-row card grid — lg:grid-cols-4
   was never generated into the compiled bundle (only lg:grid-cols-3 exists). */
@media (min-width: 64rem) {
    .lg\:grid-cols-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

/* house-and-land.html intro heading wrapper — max-w-[900px] was never
   generated into the compiled bundle (only 800/1000/1200 exist), needed so
   "designed for the way you live." fits on its own line at the lg font size. */
.max-w-\[900px\] {
    max-width: 900px
}

/* house-and-land.html gap between the H1 and the image/text row below it —
   mt-[64px]/lg:mt-[100px] were never generated into the compiled bundle,
   added to match the section-to-section rhythm used elsewhere (e.g. about.html). */
.mt-\[64px\] {
    margin-top: 64px
}

@media (min-width: 64rem) {
    .lg\:mt-\[100px\] {
        margin-top: 100px
    }
}

/* house-and-land.html "why build with us" photo placeholder — lg:items-stretch
   was never generated into the compiled bundle, needed so the placeholder
   fills the full height of the row instead of only its own aspect ratio. */
@media (min-width: 64rem) {
    .lg\:items-stretch {
        align-items: stretch
    }
}

/* house-and-land.html house & land packages section — halves the gap below
   the "why build with us" dark shape (pt-[32px]/lg:pt-[50px] were never
   generated into the compiled bundle). */
.pt-\[32px\] {
    padding-top: 32px
}

@media (min-width: 64rem) {
    .lg\:pt-\[50px\] {
        padding-top: 50px
    }
}

/* ---- Hero video parallax --------------------------------------------------
   Slightly oversized so the [data-parallax] translate (script.js initParallax)
   never exposes an edge as the video drifts. */
.bc-hero-video {
    top: -9%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 118%;
    object-fit: cover;
    will-change: transform
}

/* ---- Staggered reveal (steps carousel) -----------------------------------
   The .bc-stagger class is added by JS (initScrollReveal), so with no JS the
   cards stay visible. Each direct child eases up with an increasing delay once
   the group scrolls into view (.bc-in). Same easing as the site's other
   reveals for consistency. */
.bc-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    will-change: opacity, transform;
    transition: opacity .6s cubic-bezier(.16, .84, .44, 1), transform .6s cubic-bezier(.16, .84, .44, 1)
}

.bc-stagger.bc-in > * {
    opacity: 1;
    transform: none
}

.bc-stagger.bc-in > *:nth-child(1) {
    transition-delay: .10s
}

.bc-stagger.bc-in > *:nth-child(2) {
    transition-delay: .19s
}

.bc-stagger.bc-in > *:nth-child(3) {
    transition-delay: .28s
}

.bc-stagger.bc-in > *:nth-child(4) {
    transition-delay: .37s
}

.bc-stagger.bc-in > *:nth-child(5) {
    transition-delay: .46s
}

.bc-stagger.bc-in > *:nth-child(6) {
    transition-delay: .55s
}

.bc-stagger.bc-in > *:nth-child(n+7) {
    transition-delay: .6s
}

@media (prefers-reduced-motion: reduce) {
    .scribble__path {
        transition: none
    }

    .bc-hero-video {
        top: 0;
        height: 100%
    }

    .bc-stagger > * {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* =========================================================================
   Responsive refinements (batch)
   mobile <= 39.99rem · tablet 40–63.99rem · desktop >= 64rem
   ========================================================================= */

/* 1. Full-height hero banner */
.bc-hero-full {
    height: 100vh;
    height: 100svh
}

/* 2. Pointer cursor on slider buttons + accordion triggers */
[data-steps-prev], [data-steps-next], [data-accordion-trigger] {
    cursor: pointer
}

/* mt-[80px]/mt-[96px] aren't in the compiled Tailwind bundle (no prior use of these values) — hand-written so the steps-carousel arrow row actually gets its spacing (card description lengths vary, so this needs to clear the tallest 3-line one). */
.mt-\[80px\] {
    margin-top: 80px
}

.mt-\[96px\] {
    margin-top: 96px
}

.bg-\[\#fdbf45\] {
    background-color: #fdbf45
}

.p-\[12px\] {
    padding: 12px
}

.pt-\[20px\] {
    padding-top: 20px
}

.pb-\[16px\] {
    padding-bottom: 16px
}

.grid-cols-4 {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

.bg-\[\#f4f4f1\] {
    background-color: #f4f4f1
}

.top-\[104px\] {
    top: 104px
}

@media (min-width: 64rem) {
    .lg\:sticky {
        position: sticky
    }

    .lg\:self-start {
        align-self: flex-start
    }

    .lg\:top-\[104px\] {
        top: 104px
    }
}

@media (max-width: 39.99rem) {
    /* Hero underline: half width, nudged up 8px */
    .bc-hero-underline {
        width: 250px;
        bottom: -13px
    }

    /* 3. "Why use a broker" arrow: nudge right 120px, 25% smaller */
    .bc-arrow-why-side {
        margin-left: -48px;
        height: 60px
    }

    /* 4. House & Land thumbnails 4:3 (tap opens the floor plan lightbox) */
    .bc-house-card {
        aspect-ratio: 4/3
    }

    .bc-tile-name {
        bottom: 56px
    }

    .bc-tile-viewinfo {
        left: 20px;
        right: auto;
        bottom: 16px
    }

    /* Home Visualiser: drop the "future home" underline at this width */
    .bc-underline-tool {
        display: none
    }

}

@media (min-width: 40rem) and (max-width: 63.99rem) {
    /* 6. "Independent, tailored" arrow: sit just to the right of the text.
        Shrink the heading to content width so left:100% lands at the text end. */
    .bc-why-heading {
        width: fit-content
    }

    .bc-arrow-why-side {
        left: 100%;
        right: auto;
        margin-left: 20px;
        height: 72px;
        transform: translateY(-50%)
    }

    /* 7. Why-use accordion: image beside text (2-column) when expanded */
    [data-why-accordion] [data-accordion-panel] .overflow-hidden {
        display: flex;
        gap: 48px;
        align-items: flex-start
    }

    [data-why-accordion] [data-accordion-panel] .overflow-hidden > p {
        flex: 1;
        min-width: 0
    }

    [data-why-accordion] [data-accordion-panel] .overflow-hidden > img {
        width: 38%;
        flex-shrink: 0
    }

    /* 8. Footer: Explore/Get-in-touch stay side-by-side from sm, but the
        three-column row (matching the enquire form split) waits until lg —
        see the min-width:64rem grid rule below — so footer and enquire
        share the same breakpoint and stay aligned at every width. */
    .bc-footer-top a {
        white-space: nowrap
    }

    /* Brand tagline narrowed (~1/3, then +25%) */
    .bc-footer-top > div:first-child > p {
        max-width: 200px
    }

}

/* ── Concept 1 panel swap: testimonials + enquire (hand-written — these
   exact colour/width values weren't in the original Tailwind compile) ── */
#c2-enquire {
    background-color: #fdbf45
}

/* Enquire form fields — were static styled divs with no real inputs; these
   make them functional while keeping the exact same visual (underline-only
   border, no native chrome). */
.bc-form-input {
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-family: Manrope;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #3d3d35;
    padding: 0
}

.bc-thanks-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #fcaf17
}

.bc-thanks-tick svg {
    width: 28px;
    height: 28px
}

.bc-form-input::placeholder {
    color: #aaa;
    opacity: 1
}

.bc-form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3d35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px;
    padding-right: 24px
}

.bc-form-select:invalid {
    color: #aaa
}

/* eligibility-check.html "Process in steps" — numbered cards (no photos),
   prev/next inline with the heading rather than below the track. Hand-
   written since the number size (56px) and its muted tan colour aren't
   part of the compiled bundle/site palette. */
.bc-process-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px
}

.bc-process-nav {
    display: none;
    align-items: center;
    gap: 12px
}

@media (min-width: 64rem) {
    .bc-process-nav {
        display: flex
    }
}

.bc-process-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    border: 0;
    background: #fcaf17;
    cursor: pointer
}

.bc-process-card {
    display: flex;
    flex: 0 0 clamp(260px, 22vw, 320px);
    flex-direction: column;
    gap: 24px;
    border-radius: 16px;
    background: #f4f4f1;
    padding: 40px 32px 32px
}

.bc-process-num {
    font-family: Corben, serif;
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
    color: #3d3d35
}

/* Aligns the first process card's left edge with the section heading above
   it (the heading sits in a max-w-[1392px] mx-auto container; the track is a
   full-bleed edge-to-edge scroller outside that container, so a fixed
   ml-[Npx] on the first card only lines up when the viewport is exactly
   1392px — this reproduces the container's actual left inset at any width). */
.bc-process-track-wrap {
    padding-left: max(24px, calc((100vw - 1392px) / 2 + 24px))
}

@media (min-width: 64rem) {
    .bc-process-track-wrap {
        padding-left: max(40px, calc((100vw - 1392px) / 2 + 40px))
    }
}

.bc-muted-white {
    color: rgba(255, 255, 255, .7)
}

.bc-process-name {
    font-family: Corben, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #3d3d35
}

.bc-process-desc {
    font-family: Manrope, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #5d5d5d
}

/* closing CTA — half text / half image, reused as-is on about.html,
   house-and-land.html, floor-plans.html and eligibility-check.html.
   align-items:stretch + height:auto on the media column is what makes the
   image fill the full height of the row (matching whatever height the text
   column's padding/content ends up being) rather than sitting at its own
   intrinsic aspect-ratio height. */
.bc-cta-split {
    display: flex;
    flex-direction: column-reverse
}

@media (min-width: 64rem) {
    .bc-cta-split {
        flex-direction: row;
        align-items: stretch
    }
}

.bc-cta-split-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    padding: 64px 24px;
    text-align: center
}

/* Left padding mirrors the max-w-[1392px] mx-auto px-[24/40px] container used
   by the grids/tiles above (house & land packages, floor plans, process
   steps) — this section is a full-bleed row outside that container, so a
   fixed padding would only line up when the viewport is exactly 1392px wide. */
@media (min-width: 64rem) {
    .bc-cta-split-text {
        width: 50%;
        align-items: flex-start;
        padding: 100px 40px;
        padding-left: max(40px, calc((100vw - 1392px) / 2 + 40px));
        text-align: left
    }
}

.bc-cta-split-media {
    width: 100%;
    height: 280px;
    overflow: hidden
}

@media (min-width: 64rem) {
    .bc-cta-split-media {
        width: 50%;
        height: auto
    }
}

.bc-cta-split-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bc-field-error {
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #d1453b;
    margin-top: -4px
}

.bc-consent-error {
    margin-top: 12px
}

.bc-field-border.is-invalid {
    border-color: #d1453b
}

.bc-form-input[rows], textarea.bc-form-input {
    resize: none;
    height: 100%
}

.bc-form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 0;
    border-radius: 2px;
    border: 1px solid #aaa;
    cursor: pointer;
    position: relative
}

.bc-form-checkbox:checked {
    background: #fcaf17;
    border-color: #fcaf17
}

.bc-form-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #3d3d35;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

#c2-enquire-thanks.flex {
    display: flex
}

/* Desktop/tablet: card height is locked to the form's own height on
   submit (see initEnquireForm), so the shorter thank-you message needs to
   vertically center within that leftover space instead of sitting at the
   top. Mobile shrinks the card instead (see JS), so no centering there. */
/* Gated entirely by this real-time media query (not a JS viewport check at
   submit time) so it stays correct if the window is resized afterwards —
   min-height alone doesn't make percentage heights resolve on children, so
   the card itself becomes the flex container that centers the panel. */
@media (min-width: 40rem) {
    #c2-enquire-card.is-submitted {
        min-height: var(--card-locked-height);
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    #elig-card.is-submitted {
        min-height: var(--card-locked-height);
        display: flex;
        flex-direction: column;
        justify-content: center
    }
}

#c2-enquire-thanks p {
    max-width: 420px
}

/* imgBcLogosAndPosLine22.png has ~12px of built-in padding around the B
   mark (bbox 605,437-3490,3659 in a 4096 canvas) — pulled left so the
   visible ink sits flush with the margin instead of the padded box edge. */
.bc-footer-logo {
    margin-left: -12px
}

/* Same 9-column grid as .bc-testi-row/.bc-footer-top — text takes card1's
   column, the form spans from card2's start through card3's end, so both
   line up exactly with the testimonial cards and footer columns. */
@media (min-width: 40rem) {
    .c2-enquire-row {
        display: grid;
        grid-template-columns:1fr 1px 24px 1px 1fr 1px 24px 1px 1fr;
        column-gap: 0;
        align-items: start
    }

    .c2-enquire-text {
        grid-column: 1
    }

    .c2-enquire-form-wrap {
        grid-column: 5 / -1
    }
}

/* Home Visualiser: top padding reduced independent of the bottom (which
   matches the site's standard py-[64px] lg:py-[100px]) to tighten the gap
   after the fixed-height Why-use section above it. */
#c2-tool {
    padding-top: 16px;
    padding-bottom: 48px
}

@media (min-width: 64rem) {
    #c2-tool {
        padding-top: 24px;
        padding-bottom: 120px
    }
}

.bc-testi-scrim {
    background-color: rgba(26, 26, 26, .7)
}

/* Low alpha (near Concept 1's 0.01) so the backdrop-blur itself reads as
   the visual effect — a heavier tint here just looks like a flat dark box
   and hides the blur, instead of a frosted-glass card. */
/* backdrop-filter reached the element correctly (confirmed via computed
   styles) but wasn't visibly rendering, so this uses a manual blurred
   layer instead — a ::before with the same photo, positioned relative to
   the viewport (so it lines up with the real photo behind it) and blurred
   with plain `filter`, which doesn't depend on backdrop-filter support. */
.bc-testi-card {
    position: relative;
    background-color: rgba(20, 20, 20, .2);
    isolation: isolate
}

/* background-attachment:fixed made each card's blur scroll independently
   from the real (normally-scrolling) panel photo behind it — looked like a
   separate floating image rather than a blur of that panel. Using normal
   scroll attachment instead, with a different background-position per card
   (left/right) so each still reads as its own slice of the same panel
   image instead of 2 identical centered crops. */
.bc-testi-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(assets/c2TestimonialBg.jpg);
    background-size: cover, cover;
    filter: blur(30px);
    border-radius: inherit
}

.bc-testi-card--center::before {
    background-position: center, center center
}

.bc-testi-card--left::before {
    background-position: center, left center
}

.bc-testi-card--right::before {
    background-position: center, right center
}

.bc-testi-muted {
    color: #ddd
}

/* Mobile: horizontal swipe carousel (same pattern as .bc-house-track),
   reverts to the grid below at 40rem so desktop/tablet is unchanged. */
/* Breaks the track out of the data-reveal container's own side padding so
   it scrolls true edge-to-edge — padding-left (not a margin/width trick on
   both sides) puts that same 24px back just before the first card, so only
   it looks inset; the last card can still scroll flush to the true edge. */
.bc-testi-row {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    padding-left: 24px;
    padding-right: 24px
}

@media (min-width: 40rem) {
    .bc-testi-row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }
}

.bc-testi-row::-webkit-scrollbar {
    display: none
}

.bc-testi-row > * {
    flex-shrink: 0;
    scroll-snap-align: center
}

.bc-testi-row > .bc-testi-card {
    width: 85%
}

/* Outer vertical lines are desktop/tablet-only on mobile — just the
   full-width horizontal lines frame the (now horizontally scrolling)
   card row, since verticals would cut across the swipeable cards oddly. */
.bc-testi-vline--left, .bc-testi-vline--right {
    display: none
}

@media (min-width: 40rem) {
    .bc-testi-vline--left, .bc-testi-vline--right {
        display: block
    }
}

/* Six lines total (matching Concept 1): 2 outer edge lines + 2 lines at
   EACH of the 2 card boundaries (a line, a 24px gap, a line). All 6 live in
   their own full-section-height wrapper (sibling of data-reveal) so they
   run the true full height of the panel, not just the card row's height —
   the 4 inner ones are positioned via calc() to land exactly on the grid's
   own 1px/24px divider tracks below, wherever those actually render. */
@media (min-width: 40rem) {
    .bc-testi-row > * {
        flex-shrink: 1;
        scroll-snap-align: none
    }

    .bc-testi-row > .bc-testi-card {
        width: auto
    }

    /* 9 template columns, only 3 real children (heading panel + 2 cards) —
     the 1px/24px tracks are left empty on purpose, just providing the
     correct panel widths/spacing; the visible lines are the separate
     calc-positioned .bc-testi-vline-inner elements above, not grid
     children here. */
    .bc-testi-row {
        display: grid;
        grid-template-columns:1fr 1px 24px 1px 1fr 1px 24px 1px 1fr;
        gap: 0;
        overflow-x: visible;
        scroll-snap-type: none
    }

    .bc-testi-row > *:nth-child(1) {
        grid-column: 1
    }

    .bc-testi-row > *:nth-child(2) {
        grid-column: 5
    }

    .bc-testi-row > *:nth-child(3) {
        grid-column: 9
    }
}

.bc-testi-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .2);
    pointer-events: none;
    z-index: 5
}

/* left:0/right:0 sits at the wrapper's own outer edge (before its px-24/40
   padding is applied to children) — offsetting by that same padding value
   aligns the outer lines with the actual content margin (heading/cards). */
.bc-testi-vline--left {
    left: 24px
}

.bc-testi-vline--right {
    right: 24px
}

.bc-testi-vline-inner {
    --tpad: 24px;
    display: none
}

@media (min-width: 40rem) {
    .bc-testi-vline-inner {
        display: block
    }
}

@media (min-width: 64rem) {
    .bc-testi-vline--left {
        left: 40px
    }

    .bc-testi-vline--right {
        right: 40px
    }

    .bc-testi-vline-inner {
        --tpad: 40px
    }
}

.bc-testi-hline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    pointer-events: none;
    z-index: 5
}

/* Footer: same 3-column grid as the testimonial cards above (.bc-testi-row)
   — brand/Explore/Get-in-touch land in the identical 1fr tracks so their
   edges line up with each card. */
@media (min-width: 40rem) {
    .bc-footer-top {
        display: grid;
        grid-template-columns:1fr 1px 24px 1px 1fr 1px 24px 1px 1fr;
        column-gap: 0;
        align-items: start
    }

    .bc-footer-top > *:nth-child(1) {
        grid-column: 1
    }

    .bc-footer-top > *:nth-child(2) {
        grid-column: 5
    }

    .bc-footer-top > *:nth-child(3) {
        grid-column: 9
    }
}

/* Why-use-a-broker panel: full-height bled image (Concept 1 style) at lg+,
   falls back to the inline rounded/inset box below lg. */
#c2-why {
    background-color: #fdbf45
}

.c2-why-bleed {
    display: none
}

@media (min-width: 64rem) {
    .c2-why-bleed {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 45%
    }

    .c2-why-text {
        max-width: 600px
    }

    #c2-why [data-reveal] {
        height: 100%
    }
}

/* Third accordion state only: wireframe rectangle + grid lines over the
   photo, matching Concept 1's third-panel treatment. Positions are the
   same proportions as Concept 1's fixed 1440x900 canvas, converted to % of
   this image box (which occupies the same 782-1440px slice of that canvas). */
.c2-why-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, .2);
    pointer-events: none
}

.c2-why-hline {
    position: absolute;
    left: 9.1%;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .2);
    pointer-events: none
}

/* The wireframe rectangle is a window onto the SAME photo (imgRectangle13 is
   a wireframe render of the identical house scene as imgRectangle12) — the
   inner img is sized as if it filled the whole .c2-why-bleed box (100%/0.818
   and 100%/0.352 of the window's own size), so it renders at the same zoom
   level as the background photo instead of looking like a shrunk-down crop. */
.c2-why-wireframe {
    position: absolute;
    left: 9.1%;
    top: 40.6%;
    width: 81.8%;
    height: 35.2%;
    overflow: hidden;
    pointer-events: none
}

.c2-why-wireframe-img {
    position: absolute;
    left: -11.12%;
    top: -115.34%;
    width: 122.25%;
    height: 284.09%;
    object-fit: cover
}

.c2-why-wireframe-tint {
    position: absolute;
    inset: 0;
    background: rgba(252, 175, 23, .3);
    mix-blend-mode: multiply
}

/* ── Footer (Concept 1 layout, white bg) ── */
@media (min-width: 40rem) {
    .c2-footer-col {
        border-left: 1px solid #ffda66;
        padding-left: 24px
    }
}

/* Meet the team grid (about.html): force 3 cols at lg. The compiled
   .grid-cols-2 rule sits later in the Tailwind output than .lg\:grid-cols-3,
   so at equal (single-class) specificity it was winning even on desktop —
   this override just needs to come after it in the cascade. */
@media (min-width: 64rem) {
    .lg\:grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

/* Meet the team grid (about.html): tighter row-gap than the compiled
   gap-[…] utility gives (that shorthand sets column-gap too, so overriding
   row-gap alone here keeps the horizontal spacing unchanged). */
.bc-team-grid {
    row-gap: 8px
}

@media (min-width: 40rem) {
    .bc-team-grid {
        row-gap: 16px
    }
}

/* Stagger the middle column down so the row doesn't read as a flat line of
   identical tiles. Targeting the middle grid column specifically (rather
   than nth-child(even) on the flat list) means every row repeats the same
   col1/col2/col3 pattern, so the row-to-row gap stays identical across all
   three columns instead of columns 1 and 3 ending up with a bigger gap
   than column 2. */
@media (min-width: 64rem) {
    .bc-team-grid > :nth-child(3n+2) {
        margin-top: 16px
    }

    .bc-team-grid > :nth-child(3n+1), .bc-team-grid > :nth-child(3n+3) {
        margin-top: -24px
    }
}

/* Team bio modal (about.html, initTeamBios in script.js): click a team card
   to open a Follio-style two-column bio pop-up — photo left, name/role/
   LinkedIn/bio/CTA right, stacking on mobile. Hand-written (not Tailwind
   utilities) since it's a one-off component with no reuse elsewhere. */
.bc-team-bio {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s
}

.bc-team-bio.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease
}

.bc-team-bio__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(61, 61, 53, .92)
}

.bc-team-bio__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    background: #fff;
    border-radius: 24px;
    transform: scale(.96);
    transition: transform .3s cubic-bezier(.65, 0, .35, 1)
}

.bc-team-bio.is-open .bc-team-bio__panel {
    transform: scale(1)
}

.bc-team-bio__close {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .15);
    font-size: 22px;
    line-height: 1;
    color: #3d3d35
}

.bc-team-bio__photo {
    flex: 0 0 320px;
    padding: 16px;
    background: #fff
}

.bc-team-bio__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    background: #3d3d35
}

.bc-team-bio__content {
    flex: 1;
    min-width: 0;
    padding: 40px 40px 40px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.bc-team-bio__name {
    color: #3d3d35;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -.5px
}

.bc-team-bio__role {
    color: #5d5d5d;
    font-size: 16px;
    line-height: 24px;
    margin-top: -8px
}

.bc-team-bio__linkedin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 100px;
    background: #fcaf17;
    color: #3d3d35
}

.bc-team-bio__bio {
    color: #5d5d5d;
    font-size: 15px;
    line-height: 24px;
    white-space: pre-line
}

/* Text + circular arrow-badge CTA — used by the team bio "Get in touch"
   link and the floor-plans hero "Enquire now" link. .bc-cta-arrow--light
   is for use over a dark/photo background (white label instead of dark). */
.bc-cta-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #3d3d35;
    width: fit-content
}

.bc-cta-arrow--light {
    color: #fff
}

.bc-cta-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    background: #fcaf17;
    transform: rotate(-45deg);
    transition: transform .3s ease
}

.bc-cta-arrow-icon img {
    width: 18px;
    height: 18px
}

.bc-cta-arrow:hover .bc-cta-arrow-icon {
    transform: rotate(0deg)
}

@media (max-width: 768px) {
    .bc-team-grid{
        grid-template-columns: unset;
    }
    .bc-team-grid .bc-team-photo{
        max-width: 444px;
        margin-left: auto;
        margin-right: auto;
    }
    .bc-team-bio__panel {
        flex-direction: column;
        max-height: 92vh
    }

    .bc-team-bio__photo {
        flex: 0 0 auto;
        aspect-ratio: 1;
        padding: 16px 16px 0
    }

    .bc-team-bio__content {
        padding: 24px
    }
}

/* Meet the team photo tiles: the splash screen's B-mark (#bc-splash__logo
   in index.html) sits behind each deep-etched cutout — hidden by default,
   hidden in every state (kept in the markup, not shown). */
.bc-team-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46.5%;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0
}

.bc-team-mark path {
    fill: #fcaf17
}

/* Team card hover: portrait zooms in slightly, backdrop swaps to yellow. */
.bc-team-photo {
    transition: background-color .3s ease
}

.bc-team-photo > img {
    transition: transform .4s ease
}

.bc-team-photo:hover > img {
    transform: scale(1.06)
}

.bc-team-photo:hover {
    background-color: #fcaf17
}

/* Dedicated lot pages (lot-*.html): a few one-off arbitrary values that
   were never generated into the compiled Tailwind bundle. */
.h-\[70vh\] {
    height: 70vh
}

.h-\[70svh\] {
    height: 70svh
}

.gap-x-\[40px\] {
    column-gap: 40px
}

.gap-y-\[16px\] {
    row-gap: 16px
}