@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,0&display=block');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

/* BookaBuilderUK — colour system.
   Brand values supplied by the client are authoritative:
   Light Blue #71C5E3 · Roof Blue #4B8FA7 · Dark Blue #222C43 · Green #0A9E3C
   Ramps around them are derived tints/shades for UI use. */

:root{
    /* --- Brand core --- */
    --bab-light-blue:#71C5E3;
    --bab-roof-blue:#4B8FA7;
    --bab-dark-blue:#222C43;
    --bab-green:#0A9E3C;
    /* --- Light Blue ramp (primary) --- */
    --blue-50:#F1F9FD;
    --blue-100:#DCEFF8;
    --blue-200:#BFE3F2;
    --blue-300:#9BD5EA;
    --blue-400:#71C5E3;
    --blue-500:#57B4D6;
    --blue-600:#4B8FA7;
    --blue-700:#3B7286;
    --blue-800:#2E5766;
    --blue-900:#1F3B45;
    /* --- Dark Blue ramp (secondary / navy) --- */
    --navy-50:#F3F4F7;
    --navy-100:#E1E4EB;
    --navy-200:#C3C8D5;
    --navy-300:#949CB2;
    --navy-400:#5F6A87;
    --navy-500:#3A4560;
    --navy-600:#2C3752;
    --navy-700:#222C43;
    --navy-800:#1A2234;
    --navy-900:#121826;
    /* --- Green ramp (CTA) --- */
    --green-50:#EAF9EF;
    --green-100:#CDF0DA;
    --green-200:#9CE2B6;
    --green-300:#52C77E;
    --green-400:#16AE4B;
    --green-500:#0A9E3C;
    --green-600:#08872F;
    --green-700:#076B26;
    --green-800:#05501C;
    --green-900:#043A14;
    /* --- Neutrals (cool, navy-tinted) --- */
    --grey-0:#FFFFFF;
    --grey-25:#FAFBFC;
    --grey-50:#F5F7F9;
    --grey-100:#EDF0F4;
    --grey-200:#DFE4EA;
    --grey-300:#C7CED8;
    --grey-400:#9AA4B2;
    --grey-500:#6B7688;
    --grey-600:#4E586A;
    --grey-700:#39414F;
    --grey-800:#262C38;
    --grey-900:#151A22;
    /* --- Status --- */
    --status-success:#0A9E3C;
    --status-success-bg:#EAF9EF;
    --status-warning:#F0A020;
    --status-warning-bg:#FEF6E7;
    --status-danger:#D93025;
    --status-danger-bg:#FDECEA;
    --status-info:#4B8FA7;
    --status-info-bg:#F1F9FD;
    /* --- Membership tiers (directory badges) --- */
    --tier-toptier:#222C43;
    --tier-premier:#71C5E3;
    --tier-standard:#9AA4B2;
    /* --- Semantic surfaces --- */
    --surface-page:#FFFFFF;
    --surface-subtle:#F5F7F9;
    --surface-card:#FFFFFF;
    --surface-inverse:#222C43;
    --surface-brand:#71C5E3;
    --surface-brand-soft:#F1F9FD;
    --surface-overlay:rgba(34,44,67,.6);
    /* --- Semantic text --- */
    --text-heading:#222C43;
    --text-body:#39414F;
    --text-muted:#6B7688;
    --text-faint:#9AA4B2;
    --text-on-brand:#FFFFFF;
    --text-on-inverse:#FFFFFF;
    --text-link:#3B7286;
    --text-link-hover:#222C43;
    /* --- Semantic borders --- */
    --border-subtle:#EDF0F4;
    --border-default:#DFE4EA;
    --border-strong:#C7CED8;
    --border-brand:#71C5E3;
    --border-focus:#4B8FA7;
    /* --- Action colours --- */
    --action-primary:#0A9E3C;
    --action-primary-hover:#08872F;
    --action-primary-active:#076B26;
    --action-secondary:#222C43;
    --action-secondary-hover:#2C3752;
    --action-brand:#71C5E3;
    --action-brand-hover:#57B4D6;
    --action-disabled-bg:#EDF0F4;
    --action-disabled-text:#9AA4B2;
}

/* BookaBuilderUK — type system.
   Display/headings: Montserrat (closest Google Fonts match to the wordmark's
   geometric sans). Body/UI: Open Sans. Both are SUBSTITUTIONS — see readme.md. */

:root{
    --font-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
    --font-body:'Open Sans','Helvetica Neue',Arial,sans-serif;
    --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
    --weight-regular:400;
    --weight-semibold:600;
    --weight-bold:700;
    --weight-extrabold:800;
    /* Type scale — 1.25 ratio, rounded to whole px */
    --size-xs:12px;
    --size-sm:14px;
    --size-base:16px;
    --size-md:18px;
    --size-lg:20px;
    --size-xl:24px;
    --size-2xl:30px;
    --size-3xl:38px;
    --size-4xl:48px;
    --size-5xl:60px;
    --leading-tight:1.1;
    --leading-snug:1.25;
    --leading-normal:1.5;
    --leading-relaxed:1.65;
    --tracking-tight:-0.02em;
    --tracking-normal:0;
    --tracking-wide:0.04em;
    --tracking-eyebrow:0.12em;
    /* Semantic roles */
    --text-hero-family:var(--font-display);
    --text-hero-size:var(--size-4xl);
    --text-hero-weight:var(--weight-extrabold);
    --text-hero-leading:var(--leading-tight);
    --text-h1-size:var(--size-3xl);
    --text-h2-size:var(--size-2xl);
    --text-h3-size:var(--size-xl);
    --text-h4-size:var(--size-md);
    --text-eyebrow-size:var(--size-xs);
    --text-eyebrow-weight:var(--weight-bold);
    --text-eyebrow-tracking:var(--tracking-eyebrow);
    --text-body-size:var(--size-base);
    --text-body-leading:var(--leading-relaxed);
    --text-small-size:var(--size-sm);
    --text-caption-size:var(--size-xs);
    --text-button-family:var(--font-display);
    --text-button-weight:var(--weight-bold);
    --text-button-size:var(--size-base);
}

/* BookaBuilderUK — spacing, sizing and layout. 4px base grid. */

:root{
    --space-0:0;
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;
    --space-20:80px;
    --space-24:96px;
    --space-32:128px;
    /* Layout */
    --container-max:1200px;
    --container-narrow:760px;
    --container-pad:24px;
    --section-pad-y:80px;
    --section-pad-y-tight:48px;
    --grid-gutter:24px;
    /* Controls */
    --control-h-sm:36px;
    --control-h-md:44px;
    --control-h-lg:52px;
    --control-pad-x-sm:14px;
    --control-pad-x-md:20px;
    --control-pad-x-lg:28px;
    --tap-min:44px;
    /* Card interiors */
    --card-pad:24px;
    --card-pad-tight:16px;
}

/* BookaBuilderUK — radii, borders, elevation, motion. */

:root{
    --radius-xs:4px;
    --radius-sm:6px;
    --radius-md:8px;
    --radius-lg:12px;
    --radius-xl:16px;
    --radius-2xl:24px;
    --radius-pill:999px;
    --border-width:1px;
    /* @kind spacing */
    --border-width-strong:2px;
    /* @kind spacing */
    --border-width-accent:4px;
    /* @kind spacing */
    /* Elevation — low-alpha navy, never black */
    --shadow-xs:0 1px 2px rgba(34,44,67,.06);
    --shadow-sm:0 1px 3px rgba(34,44,67,.08),0 1px 2px rgba(34,44,67,.04);
    --shadow-md:0 4px 12px rgba(34,44,67,.10);
    --shadow-lg:0 12px 28px rgba(34,44,67,.14);
    --shadow-xl:0 24px 48px rgba(34,44,67,.18);
    --shadow-inset:inset 0 1px 2px rgba(34,44,67,.08);
    --shadow-focus:0 0 0 3px rgba(113,197,227,.45);
    --shadow-focus-green:0 0 0 3px rgba(10,158,60,.30);
    /* Motion */
    --ease-standard:cubic-bezier(.4,0,.2,1);
    /* @kind other */
    --ease-out:cubic-bezier(0,0,.2,1);
    /* @kind other */
    --ease-in:cubic-bezier(.4,0,1,1);
    /* @kind other */
    --duration-fast:120ms;
    /* @kind other */
    --duration-base:180ms;
    /* @kind other */
    --duration-slow:280ms;
    /* @kind other */
    --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
    /* Protection scrim used over photography */
    --scrim-navy:linear-gradient(180deg,rgba(34,44,67,0) 0%,rgba(34,44,67,.72) 100%);
    /* @kind color */
    --scrim-navy-left:linear-gradient(90deg,rgba(34,44,67,.85) 0%,rgba(34,44,67,.35) 55%,rgba(34,44,67,0) 100%);
    /* @kind color */
    /* z-index */
    --z-sticky:100;
    /* @kind other */
    --z-dropdown:200;
    /* @kind other */
    --z-overlay:900;
    /* @kind other */
    --z-modal:1000;
    /* @kind other */
    --z-toast:1100;
    /* @kind other */
}

/* BookaBuilderUK — iconography.
   The live product uses Google Material Symbols by ligature name
   (expand_more, done, send, outbox, notifications_active, sms, call, close,
   chevron_left, chevron_right, menu). We load the Rounded variant. */

.bab-icon{
    font-family:'Material Symbols Rounded';
    font-weight:400;
    font-style:normal;
    font-size:24px;
    line-height:1;
    letter-spacing:normal;
    text-transform:none;
    display:inline-block;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

.bab-icon--filled{
    font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24
}

.bab-icon--sm{
    font-size:20px;
    font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20
}

.bab-icon--lg{
    font-size:32px
}

/* BookaBuilderUK — minimal element defaults. Consumers get sensible text
   colours, link colours and box-sizing without any layout opinions. */

*,*::before,*::after{
    box-sizing:border-box
}

body{
    margin:0;
    font-family:var(--font-body);
    font-size:var(--text-body-size);
    line-height:var(--text-body-leading);
    color:var(--text-body);
    background:var(--surface-page);
    -webkit-font-smoothing:antialiased;
    text-wrap:pretty
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-display);
    color:var(--text-heading);
    margin:0 0 var(--space-4);
    line-height:var(--leading-snug);
    letter-spacing:var(--tracking-tight)
}

h1{
    font-size:var(--text-h1-size);
    font-weight:var(--weight-extrabold)
}

h2{
    font-size:var(--text-h2-size);
    font-weight:var(--weight-bold)
}

h3{
    font-size:var(--text-h3-size);
    font-weight:var(--weight-bold)
}

h4{
    font-size:var(--text-h4-size);
    font-weight:var(--weight-bold)
}

p{
    margin:0 0 var(--space-4)
}

a{
    color:var(--text-link);
    text-decoration:underline;
    text-underline-offset:2px;
    transition:color var(--duration-fast) var(--ease-standard)
}

a:hover{
    color:var(--text-link-hover)
}

strong,b{
    font-weight:var(--weight-bold);
    color:var(--text-heading)
}

small{
    font-size:var(--text-small-size)
}

:focus-visible{
    outline:none;
    box-shadow:var(--shadow-focus)
}

img{
    max-width:100%;
    display:block
}

/* Responsive layout primitives — media queries and focus rings cannot be inline. */

body {
    margin: 0;
    background: #fff;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--text-link);
}

a:hover {
    color: var(--text-link-hover);
}

.wrap {
    width: min(1200px, 100% - 32px);
    margin: 0 auto;
}

.sec {
    padding-top: 56px;
    padding-bottom: 56px;
}

.stack {
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
}

.split {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr);
}

.g4 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g3 {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
}

.g2 {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

.jobbar {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.jobbar > .jb-go {
    grid-column: 1 / -1;
}

.jb-2 {
    border-top: 1px solid var(--border-subtle);
}

.statrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat {
    min-width: 0;
    padding: 6px 10px;
    text-align: center;
}

.stat + .stat {
    border-left: 1px solid rgba(34,44,67,.2);
}

.partnergrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-default);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    overflow: hidden;
}

.partnercell {
    background: #fff;
    min-height: 104px;
    display: grid;
    place-items: center;
    padding: 20px 24px;
}

.tile {
    aspect-ratio: 1 / 1;
}

.desk {
    display: none !important;
}

.heroshot {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.heroscrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(34,44,67,.72) 0%, rgba(34,44,67,.88) 46%, #222C43 100%);
}

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(113,197,227,.7);
}

@media (min-width: 480px) {
    .jobbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    }

    .jb-2 {
        border-top: none;
        border-left: 1px solid var(--border-subtle);
    }
}

@media (min-width: 640px) {
    .g4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .g3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

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

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

    .tile {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 780px) {
    .sec {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 44px;
        align-items: center;
    }

    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        -moz-column-gap: 44px;
        column-gap: 44px;
        row-gap: 24px;
        align-items: start;
        grid-template-areas: "head visual" "body visual";
    }

    .sp-head {
        grid-area: head;
    }

    .sp-body {
        grid-area: body;
    }

    .sp-visual {
        grid-area: visual;
        align-self: center;
    }

    .jobbar {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) auto;
    }

    .jobbar > .jb-go {
        grid-column: auto;
    }
}

@media (min-width: 1000px) {
    .g4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }

    .g3 {
        gap: 24px;
    }

    .sec {
        padding-top: 92px;
        padding-bottom: 92px;
    }

    .stack {
        gap: 56px;
    }

    .split {
        -moz-column-gap: 56px;
        column-gap: 56px;
    }

    .heroscrim {
        background: linear-gradient(100deg, #222C43 0%, #222C43 38%, rgba(34,44,67,.84) 54%, rgba(34,44,67,.22) 80%, rgba(34,44,67,.08) 100%);
    }
}

@media (min-width: 1080px) {
    .mob {
        display: none !important;
    }

    .desk {
        display: flex !important;
    }

    .shell {
        padding-bottom: 0 !important;
    }

    .mobbar {
        display: none !important;
    }
}

/* Shared navigation and interaction components. */

[hidden]{
    display:none!important
}

.site-nav__group{
    position:relative;
    flex:0 0 auto
}

.site-nav__link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:12px 0;
    border-bottom:2px solid transparent;
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:var(--transition-control)
}
.site-nav__link:hover {
    color:var(--blue-400)
}

.site-nav__group:hover>.site-nav__link,.site-nav__group:focus-within>.site-nav__link{
    border-bottom-color:var(--bab-light-blue)
}

.site-nav__dropdown{
    position:absolute;
    top:100%;
    left:-14px;
    z-index:70;
    display:none;
    min-width:262px;
    flex-direction:column;
    padding:8px;
    border:1px solid var(--border-default);
    border-radius:var(--radius-md);
    background:#fff;
    box-shadow:var(--shadow-lg)
}

.site-nav__group:hover>.site-nav__dropdown,.site-nav__group:focus-within>.site-nav__dropdown{
    display:flex
}

.site-nav__dropdown-link{
    padding:12px;
    border-radius:var(--radius-sm);
    color:var(--text-body);
    font-size:14px;
    text-decoration:none
}

.site-nav__dropdown-link:hover{
    color:var(--text-body);
}

.mobile-menu{
    max-height:78vh;
    overflow:auto;
    border-top:1px solid rgba(255,255,255,.14);
    background:var(--bab-dark-blue)
}

.mobile-menu__inner{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:18px;
    padding-bottom:24px
}

.mobile-nav__button{
    display:flex;
    min-height:52px;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-md);
    font-family:var(--font-display);
    font-size:16px;
    font-weight:700;
    text-decoration:none
}

.mobile-nav__button--primary{
    background:var(--bab-green);
    color:#fff
}

.mobile-nav__button--secondary{
    border:1px solid var(--bab-light-blue);
    color:var(--bab-light-blue)
}

.mobile-nav__group{
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12)
}

.mobile-nav__heading{
    margin-bottom:6px;
    color:var(--bab-light-blue);
    font-family:var(--font-display);
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase
}

.mobile-nav__link{
    display:flex;
    min-height:48px;
    align-items:center;
    color:rgba(255,255,255,.8);
    font-size:16px;
    text-decoration:none
}

.mobile-nav__link:hover {
    color:var(--blue-400);
}

.mobile-nav__link--primary{
    color:#fff
}

.mobile-nav__signin{
    display:flex;
    min-height:48px;
    align-items:center;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
    color:#fff;
    font-size:16px;
    font-weight:600;
    text-decoration:none
}

[data-category-tile].is-selected{
    border-color:var(--bab-green)
}

.tile-check{
    position:absolute;
    top:10px;
    right:10px;
    display:flex;
    width:30px;
    height:30px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--bab-green)
}

.tile-check__icon{
    color:#fff
}

.transition-control{
    transition:var(--transition-control)
}

.transition-panel{
    transition:var(--transition-panel,280ms cubic-bezier(.4,0,.2,1))
}

.transition-toggle{
    transition:background 180ms cubic-bezier(.4,0,.2,1),box-shadow 180ms cubic-bezier(.4,0,.2,1)
}

.transition-transform-slow{
    transition:transform 280ms cubic-bezier(.4,0,.2,1)
}

.transition-width-slow{
    transition:width 280ms cubic-bezier(.4,0,.2,1)
}

.is-safepay-off [data-safepay-panel]{
    border-color:var(--border-default);
    background:var(--grey-25)
}

.is-safepay-off [data-safepay-track]{
    background:var(--grey-300);
    box-shadow:inset 0 1px 3px rgba(34,44,67,.18)
}

.is-safepay-off [data-safepay-thumb]{
    transform:translateX(0)
}

.is-safepay-off [data-safepay-icon]{
    color:var(--grey-500)
}

.is-safepay-off [data-safepay-tags]>span{
    background:var(--grey-100);
    color:var(--grey-500)
}

.is-safepay-off [data-plan-chip]{
    background:var(--grey-100);
    color:var(--grey-600)
}

.is-safepay-off [data-plan-progress]{
    width:0;
    background:var(--grey-300)
}

/* Hero search control: reusable across landing pages. */

.jobbar{
    gap:8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 24px 60px rgba(10,16,28,.36)
}

.jobbar>label{
    position:relative;
    gap:12px;
    min-height:60px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:12px;
    background:var(--grey-50);
    transition:var(--transition-control)
}

.jobbar>label:hover{
    background:var(--blue-50)
}

.jobbar>label:focus-within{
    border-color:var(--bab-light-blue);
    background:#fff;
    box-shadow:0 0 0 3px rgba(113,197,227,.25)
}

.jobbar .jb-2{
    border-top:1px solid transparent;
    border-left:1px solid transparent
}

.jobbar label>.bab-icon{
    display:grid;
    width:36px;
    height:36px;
    padding:8px;
    place-items:center;
    border-radius:10px;
    background:var(--blue-100);
    color:var(--bab-roof-blue)
}

.jobbar select,.jobbar input{
    width:100%;
    height:58px;
    border:0;
    background-color:transparent;
    color:var(--text-heading);
    font-family:var(--font-body);
    font-size:16px;
    font-weight:600;
    line-height:1.4;
    box-shadow:none
}

.jobbar select{
    padding:0 38px 0 0;
    -moz-appearance:none;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B8FA7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 6px center;
    background-size:20px
}

.jobbar input{
    padding:0
}

.jobbar input::-moz-placeholder{
    color:var(--grey-500);
    opacity:1
}

.jobbar input::placeholder{
    color:var(--grey-500);
    opacity:1
}

.jobbar input:focus-visible,.jobbar select:focus-visible{
    outline:none;
    box-shadow:none
}

.jobbar>.jb-go{
    min-height:60px;
    padding:0 28px;
    border-radius:12px;
    white-space:nowrap
}

@media (min-width:780px){
    .jobbar{
        gap:10px
    }
}

.homepage-bg-hero-extension {
    background-image: url("/images/heros/hero-extension.jpg");
}

.partner-bg-logo {
    background-image: url("/images/partner/the-bathroom-showroom/Logo.png");
}

.partner-bg-wren-kitchens {
    background-image: url("/images/partner/wren/wren-kitchens.png");
}

.partner-bg-kingsbridge-logo {
    background-image: url("/images/partner/kingsbridge/kingsbridge-logo.png");
}

.partner-bg-zempler-bank-logo {
    background-image: url("/images/partner/zempler-bank/zempler-bank-logo.svg");
}

.category-bg-extensions {
    background-image: url("/images/content/extensions.jpg");
}

.category-bg-kitchen-installer {
    background-image: url("/images/content/kitchen-installer.jpg");
}

.category-bg-bathroom-fitter {
    background-image: url("/images/content/bathroom-fitter.jpg");
}

.category-bg-loft-conversion {
    background-image: url("/images/content/loft-conversion.jpg");
}

.category-bg-roofer {
    background-image: url("/images/content/roofer.jpg");
}

.category-bg-carepentry {
    background-image: url("/images/content/carepentry.jpg");
}

.category-bg-renovations {
    background-image: url("/images/content/renovations.jpg");
}

.category-bg-builder {
    background-image: url("/images/content/builder.jpg");
}