/* Common Styles */
:root {
    --transition-duration: 0.3s;
    --card-width: 240px;
    --card-height: 225px;
    --card-radius: 5px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 72px;
    line-height: 120%;
    margin-bottom: 50px;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 20px 0;
}

.process-name {
    font-weight: 700;
    color: var(--white);
    margin: 0;
}


/* Truly empty span -> show a blank line */
span[style*="white-space: pre-wrap"i]:empty {
    min-height: 1rem;
}

span[style*="white-space: pre-wrap"i]:empty::before {
    content: "\00a0";
}


/* Hero Section */
.hero-section {
    position: relative;
    overflow: hidden;
    min-height: min(750px, 100vh);
    height: min(750px, 100vh);
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* Override grid layout from section:has(.umb-block-grid__area) */
    grid-template-columns: unset !important;
    gap: unset !important;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1440px !important;
    margin: 0 auto;
    width: 100%;
    transform: translateY(-10%);
    box-sizing: border-box;
}

.hero-inner>.umb-block-grid__area {
    max-width: 720px;
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    /* Override global grid properties for flex layout */
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: auto !important;
}

.hero-inner>.umb-block-grid__area:last-child {
    display: flex;
    justify-content: flex-end;
}

.sub-h1 {
    color: var(--black);
    font-size: 21px;
    line-height: 130%;
    margin-bottom: 30px;
    font-weight: 600;
}

.hero-fine {
    font-size: 12px;
    color: var(--black);
    line-height: 15px;
    margin-top: 10px;
}

/* Shared Subheading Styles */
.benefits-heading, .checkout-title {
    font-size: 21px;
    line-height: 130%;
    margin-bottom: 30px;
    color: var(--white);
}

/* Book Online Button */
.btn-yellow:link,
.btn-yellow:visited {
    height: 50px;
}

/* Hero Cards */
.hero-cards-container {
    display: flex;
    gap: 20px;
}

.hero-card {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--box-shadow);
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}

.hero-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.hero-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.hero-card-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-card-image img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform var(--transition-duration) ease;
}

.hero-card:hover .hero-card-image img {
    transform: scale(1.02);
}

.hero-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--blue);
    padding: 15px 20px;
}

.hero-card-title {
    font-size: 18px;
    line-height: 110%;
    color: var(--white);
    font-weight: 600;
    margin: 0;
    display: block;
    text-align: start;
}

.pricing-circle {
    width: 245px;
    height: 230px;
}

/* Hero Promo Postcode Finder */
.hero-promo-postcode-finder {
    width: 365px;
    height: 265px;
    background-color: #E10D12;
    border-radius: 10px;
    padding: 30px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
}

.hero-promo-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-promo-postcode-finder .location-icon {
    margin-bottom: 10px;
    color: var(--white);
}


.hero-promo-heading {
    font-size: 26px;
    line-height: 110%;
    color: var(--white);
    font-weight: 700;
    margin: 0 0 25px 0;
    text-align: center;
}

.hero-promo-form {
    width: 100%;
}

.postcode-input-wrapper {
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 60px;
}

.hero-promo-postcode-finder .postcode-input {
    flex: 1;
    border: none;
    padding-left: 18px;
    padding-right: 12px;
    font-size: 16px;
    background: var(--white);
    outline: none;
    color: var(--blue);
    height: 100%;
    font-weight: 600;
}

.hero-promo-postcode-finder .postcode-input::placeholder {
    color: #E10D12;
    opacity: 1;
    font-size: 14px;
    font-weight: 500;
    font-family: polymath;
}

.hero-promo-postcode-finder .hero-promo-submit {
    border: none;
    background: var(--yellow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    min-width: 60px;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -10px;
}

.hero-promo-postcode-finder .hero-promo-submit:hover {
    background: #F5C842;
}

.hero-promo-postcode-finder .hero-promo-submit svg {
    width: 25px;
    height: 25px;
}

/* Benefits Section */
.benefits-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 120px 0;
}

.benefits-inner {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
}

/* Benefits Header Styling */
.benefits-header {
    text-align: center;
    margin-bottom: 120px;
}

.benefits-heading {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2em;
    max-width: 660px;
}


.benefits-heading {
    color: var(--blue);
}

.benefits-sub, .process-sub {
    font-size: 18px;
    line-height: 130%;
    font-weight: 600;
}

.benefits-sub {
    color: var(--black);
}

.benefits-header--flex-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
    text-align: start;
}

.benefits-header--flex-row .benefits-heading,
.benefits-header--flex-row .benefits-sub,
.process-header--flex-row .process-heading,
.process-header--flex-row .process-sub {
    flex: 1 1 0;       /* equal basis */
    min-width: 0;       /* prevent content from forcing wider */
    margin: 0;
}

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

.benefits-header--center .benefits-heading,
.benefits-header--center .benefits-sub {
    margin: 0 auto;
    text-align: center;
}

/* Benefits Grid */
.benefit-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
    gap: 36px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: auto;
}

.benefit-item {
    background-color: #CDE9FF;
    padding: 30px;
    border-radius: 10px;
    text-align: start;
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    will-change: transform;
}

.benefit-icon {
    margin-bottom: 12px;
}

.benefit-title {
    margin-bottom: 12px;
}

.benefit-title h3 {
    color: var(--blue);
    font-size: 21px;
    line-height: 1.3;
}

.benefit-description {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--black);
}

/* Process Cards Section */
.process-section {
    padding: 100px 0 100px 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.process-header--center {
    text-align: center;
    display: flex;
    justify-content: center;
}

.process-inner {
    max-width: 1440px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

.process-header--flex-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 100px;
    text-align: start;
}

.process-heading {
    color: var(--blue);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2em;
    max-width: 615px;
}

.process-sub {
    color: var(--black);
}

/* Process Cards Container */
.process-cards-container {
    display: flex;
    gap: 30px;
    margin-top: 60px;
    margin-bottom: 60px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    user-select: none;
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 100%;
}

/* Custom Scrollbar Styling */
.process-cards-container::-webkit-scrollbar {
    height: 8px;
}

.process-cards-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.process-cards-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.process-cards-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Process Card */
.process-card {
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    min-width: 200px;
    max-width: 325px;
    width: 325px;
    height: auto;
    flex-shrink: 0;
    position: relative;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: visible;
}

.process-number {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.process-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
}

/* Step Number Badge */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--yellow);
    color: var(--blue);
    font-size: 28px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Process Content */
.process-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    height: 100%;
}

.process-content-inner {
    padding: 40px 25px 30px 25px;
    text-align: center;
    background: var(--blue);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    flex: 1 0 auto;
}

.process-name {
    font-size: 21px;
    line-height: 130%;
    margin-bottom: 20px;
}

.process-description {
    color: var(--white);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    flex: 1;
}

.process-content-fineprint {
    font-size: 12px;
    line-height: 15px;
    margin-top: 15px;
    font-style: italic;
    font-weight: 300;
}

.process-description p {
    margin-bottom: 0;
}

/* Process Image */
.process-image {
    height: auto;
    width: 100%;
}

.process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-duration) ease;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Process Cards Wrapper - Desktop */
.process-cards-wrapper {
    display: flex;
    gap: 30px;
    position: relative;
    width: fit-content;
}

/* Ensure wrapper doesn't interfere with layout */
.desktop-scroll-wrapper {
    will-change: transform;
    transform: translateZ(0);
}

/* Process Pin Wrapper - maintains layout flow */
.process-pin-wrapper {
    position: relative !important;
    width: 100%;
    height: auto;
    display: block;
}

/* Neutralise GSAP pin-spacer auto-padding only for the process section */
.process-section.pin-spacer {
    padding: 0 !important;
    margin: 0 !important;
}

/* Our custom scroll spacer — replaces GSAP's pinSpacing padding */
.process-pin-scroll-spacer {
    pointer-events: none;

    position: relative;
    z-index: -1;
}

/* Ensure smooth transitions */
.process-header {
    transition: transform 0.3s ease-out;
}

/* Override absolute positioning for specific elements */
.process-section .process-number {
    position: absolute !important;
}

/* Ensure containers maintain relative positioning */
.process-section .process-cards-container,
.process-section .process-cards-wrapper,
.process-section .process-inner {
    position: relative !important;
}

/* Subtle overflow for process cards */
.process-cards-container {
    scroll-padding-left: 20px;
    scroll-padding-right: 0px;
}

/* Initial states for animations */
.benefits-header,
.benefit-item,
.process-header,
.process-card,
.result-header,
.result-frame {
    opacity: 0;
}

.cta-content-container {
    max-width: 660px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 20px;
}

.cta-content-container p {
    font-size: 12px;
    line-height: 150%;
}

/* FAQ Section */
.faq-section {
    padding: 90px 0 140px 0;
    background-color: #004185;
    position: relative;
}

.faq-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
}

.faq-section--side .faq-header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.faq-header--flex-row {
    flex-direction: row;
}

.faq-header--center {
    flex-direction: column;
    text-align: center;
    align-items: center;

}

.faq-heading {
    font-size: 48px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2em;
}

.faq-container--side .faq-sub {
    margin-top: 30px;
}

.faq-sub {
    color: var(--white);
}

.faq-sub p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--white);
    margin: 0;
}

.faq-container--side .faq-sub {
    text-align: left;
}

.faq-container--split .faq-sub {
    text-align: center;
}

.faq-content-area .btn,
.faq-button-placeholder .btn {
    display: block;
    margin: 0 auto;
    max-width: fit-content;
}

.faq-container--stacked .faq-button-placeholder {
    margin: 0 auto;
    display: flex;
}

/* Side variant: flex row layout */
.faq-container--side {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.faq-container--side .faq-button-placeholder {
    margin-top: 40px;
}

/* FAQ Cards */
.faq-cards-container {
    margin-top: 50px;
}

.faq-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 100%;
}

.faq-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.faq-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.faq-card-content {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.faq-card-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* Contact button in FAQ section */
.faq-section .btn-yellow {
    margin-top: 40px;
}

/* Primary White Button Style */
.btn-primary-white {
    background-color: var(--white);
    color: #004185;
    border: 2px solid var(--white);
    padding: 15px 30px !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 150px;
}

.btn-primary-white:hover {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
    text-decoration: none;
}

.btn-primary-white:active {
    transform: translateY(1px);
}

/* FAQ Layout Variants */
.faq-section--side .faq-header--side {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 3rem;
}

.faq-section--side .faq-header-left {
    flex: 1;
    max-width: 60%;
}

.faq-section--side .faq-header-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.faq-section--stacked .faq-header--stacked {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-section--stacked .faq-heading {
    margin: 0 auto;
    text-align: center;
    max-width: 660px;
}

/* Testimonials Section */
.testimonials-section {
    padding: 100px 0 0 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.testimonials-inner {
    max-width: 1440px;
    margin: 0 auto;
    overflow: visible;
    position: relative;
}

/* Testimonials Header Styling */
.testimonials-header {
    margin-bottom: 60px;
    background-color: #004185;
}

.testimonials-heading {
    font-size: 48px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2em;
    max-width: 660px;
}

.testimonials-sub {
    font-size: 20px;
    line-height: 1.4em;
    font-weight: 500;
    color: var(--white);
}

/* Testimonials Header Layout Classes */
.testimonials-header--flex-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
    text-align: start;
}

.testimonials-header--flex-row .testimonials-heading,
.testimonials-header--flex-row .testimonials-sub {
    flex: 1;
    margin: 0;
}

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

.testimonials-header--center .testimonials-heading,
.testimonials-header--center .testimonials-sub {
    margin: 0 auto;
    text-align: center;
}

/* Testimonials Container */
.testimonials-container {
    margin-top: 60px;
    position: relative;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-height: 700px;
    max-height: 700px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 60px;
    overflow: hidden;
}

/* Testimonials Carousel Container - wraps everything */
.testimonials-carousel-container {
    position: relative;
    width: 100%;
    overflow: visible;
    margin: 0 auto;
    max-width: 1440px;
}

/* Testimonials Carousel Wrapper */
.testimonials-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.testimonials-carousel {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 30px;
    will-change: transform;
    align-items: stretch;
}

.testimonial-card {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    flex-shrink: 0;
    width: calc(25% - 22.5px);
    position: relative;
    overflow: hidden;
}


.testimonial-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Customer header with avatar and info */
.testimonial-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E91E63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--white);
    font-size: 18px;
    flex-shrink: 0;
}

.testimonial-customer-info {
    flex: 1;
    min-width: 0;
}

.testimonial-customer-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.testimonial-star {
    color: #FFD700;
    font-size: 18px;
}

.testimonial-content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--white);
    flex: 1;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
    /* Space for Google logo */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Limit to 4 lines */
    line-clamp: 4;
    /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 102px;
    /* Approximately 4 lines at 1.6 line-height */
}

/* Fallback for browsers that don't support -webkit-line-clamp */
@supports not (-webkit-line-clamp: 4) {
    .testimonial-content {
        display: block;
        max-height: 102px;
        overflow: hidden;
        position: relative;
    }

    .testimonial-content::after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        padding-left: 20px;
        color: var(--white);
    }
}

/* Content container */
.testimonial-content-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    /* Space for Google logo */
}

.testimonial-google-logo {
    position: absolute;
    bottom: 20px;
    left: 30px;
    opacity: 0.7;
    z-index: 1;
}

.testimonial-google-logo svg {
    width: 60px;
    height: auto;
}

/* Legacy styles for backwards compatibility */
.testimonial-author {
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    margin-bottom: 5px;
}

.testimonials-loading {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 18px;
}

.testimonials-content-inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}

/* Testimonials Carousel Controls */
.testimonials-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: -45px;
    /* Half button width to create overlap */
    right: -45px;
    /* Half button width to create overlap */
    transform: translateY(-50%);
    padding: 0;
    pointer-events: none;
    z-index: 10;
}

.testimonials-nav-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #004185;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--white);
    box-shadow: 0 4px 20px rgba(0, 65, 133, 0.3);
    pointer-events: all;
    position: relative;
    z-index: 20;
}

.testimonials-nav-btn:hover:not(:disabled) {
    background-color: #003366;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 65, 133, 0.4);
}

.testimonials-nav-btn:disabled {
    background-color: rgba(204, 204, 204, 0.6);
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.testimonials-nav-btn svg {
    width: 17px;
    height: 27px;
    transition: transform 0.3s ease;
}

.testimonials-nav-btn:hover:not(:disabled) svg {
    transform: scale(1.1);
}

/* Left arrow - flip the SVG horizontally */
.testimonials-prev svg {
    transform: scaleX(-1);
}

.testimonials-prev:hover:not(:disabled) svg {
    transform: scaleX(-1) scale(1.1);
}

/* Testimonials Pagination Indicators */
.testimonials-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 30px;
    justify-content: center;
}

.testimonials-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #D9D9D9;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    padding: 0;
    position: relative;
}

.testimonials-dot.active {
    background-color: #D9D9D9;
    width: 24px;
    border-radius: 4px;
    transform: none;
}

.testimonials-dot:hover:not(.active) {
    background-color: rgba(0, 65, 133, 0.4);
    transform: scale(1.2);
}

/* Initial state for animations */
.testimonials-header,
.testimonial-card {
    opacity: 0;
}

.ti-reviews-container-wrapper {
    overflow-x: hidden;
}

/* BrightLocal Widget Iframe Styles */
.testimonials-widget {
    margin-top: 60px;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.brightlocal-widget-frame {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.faq-section--stacked .faq-header {
    display: flex;
    gap: 30px;
    flex-direction: column;
    margin-bottom: 30px;
}

.faq-section--stacked .faq-header {
    display: flex;
    gap: 30px;
}

.faq-section--stacked .faq-sub {
    max-width: 800px;
    margin: 0 auto;
}

.faq-cards-wrapper {
    margin-bottom: 2rem;
}

.faq-button-bottom {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2rem;
}

.faq-section--stacked .faq-accordion {
    max-width: 740px;
    margin: 0 auto 40px auto;
}


/* FAQ Accordion Styles */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Active/Open FAQ Accordion Item */
.faq-accordion-item.active {
    background-color: #004185 !important;
}

.faq-accordion-item {
    background: none;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-accordion-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-accordion-item.active:hover {
    background-color: #004185 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-accordion-header {
    padding: 0;
}

.faq-accordion-button {
    width: 100%;
    padding: 25px 30px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
}

.faq-accordion-button:focus {
    outline: none;
    box-shadow: none;
}

.faq-accordion-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    line-height: 130%;
    margin: 0;
    padding-right: 20px;
}

.faq-accordion-icon {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #003873;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.faq-accordion-icon::before,
.faq-accordion-icon::after {
    content: '';
    position: absolute;
    transition: all 0.3s ease;
}

/* Horizontal line (always visible) */
.faq-accordion-icon::before {
    width: 14px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--faq-icon-color, var(--white));
}

.faq-accordion-icon::after {
    width: 3px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    background-color: var(--faq-icon-color, var(--white));
}

.faq-accordion-button:not(.collapsed) .faq-accordion-icon {
    background: var(--blue);
}

.faq-accordion-button:not(.collapsed) .faq-accordion-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-accordion-button:not(.collapsed) .faq-accordion-icon {
    transform: rotate(180deg);
}

.accordion-collapse {
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
    opacity: 0;
}

.accordion-collapse.show {
    max-height: 1000px;
    opacity: 1;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-body {
    padding: 0 30px 30px 30px;
    font-size: 16px;
    line-height: 150%;
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-10px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-body ul {
    padding-left: 20px;
}

.accordion-collapse.show .faq-accordion-body {
    transform: translateY(0);
}

.faq-accordion-body p {
    margin: 0 0 10px 0;
    color: rgba(255, 255, 255, 0.9);
}

.faq-accordion-body p:last-child {
    margin-bottom: 0;
}

.faq-container--stacked .faq-button-wrapper {
    text-align: center;
}

/** FAQ Split Layout **/
.faq-container--split .faq-heading {
    text-align: center;
}

.faq-split-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 100%;
    margin: 50px 0 0 0;
    align-items: start;
}

/* Individual columns within split layout */
.faq-split-columns .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-container--split .faq-accordion-item {
    margin: 0;
    width: 100%;
}

/* Ensure accordion items fill their grid cell */
.faq-container--split .faq-accordion-button {
    width: 100%;
}

/* Adjust accordion body for split layout */
.faq-container--split .faq-accordion-body {
    max-width: 100%;
}

.faq-accordion-item ol,
.faq-accordion-item ul {
    padding-left: 20px;
}

/* FAQ Section - end */

/* =========================================
   Umbraco Block Grid - Three Column Layout
   ========================================= */

/* Only apply grid to sections that explicitly use 4-column layout */
section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    align-items: center;
}

/* Each block grid area uses CSS custom properties for column/row spanning */
section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) .umb-block-grid__area {
    grid-column: span var(--umb-block-grid--area-col-span, 12);
    grid-row: span var(--umb-block-grid--area-row-span, 1);
    min-width: 0; /* Prevents grid items from overflowing */
}

/* Three column layout: each area spans 4 columns (4+4+4=12) */
section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) .umb-block-grid__area {
    grid-column: span 4;
}

/* Responsive adjustments for three column layout */
@media (max-width: 1024px) {
    section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) {
        grid-template-columns: repeat(8, 1fr);
        gap: 15px;
    }

    section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) .umb-block-grid__area {
        grid-column: span 4;
    }

    /* Hero section: override grid layout */
    .hero-section {
        grid-template-columns: unset !important;
        gap: unset !important;
    }
}

@media (max-width: 768px) {
    section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) .umb-block-grid__area {
        grid-column: span 4;
    }

    /* Hero section: override grid layout */
    .hero-section {
        grid-template-columns: unset !important;
        gap: unset !important;
    }
}

@media (max-width: 480px) {
    section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    section:has(.umb-block-grid__area[style*="--umb-block-grid--area-col-span: 4"]) .umb-block-grid__area {
        grid-column: span 1;
    }

    /* Hero section: override grid layout */
    .hero-section {
        grid-template-columns: unset !important;
        gap: unset !important;
    }
}

/* Rich Text Block styling within Block Grid */
.rich-text-block {
    width: 100%;
}

.rich-text-block p {
    margin: 0;
}

/** Two Column Section **/
.two-column-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.two-column-inner {
    padding-inline: 0;
    max-width: 1440px;
    margin: 0 auto;
}

.two-col {
    width: 100%;
    margin: 3rem 0;
}

.two-col-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 60px;
}

.two-col-img {
    flex: 0 0 50%;
    max-width: 50%;
}

.two-col-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.two-col-content {
    flex: 1;
    padding-right: 2rem;
}

.two-col-content h2 {
    margin: 0 0 30px 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 120%;
    color: #004185;
}

.two-col-content h3 {
    font-size: 21px;
    line-height: 130%;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Content RTE styles */
.content-rte {
    display: flex;
    flex-direction: column;
}

.content-rte>* {
    margin: 0 0 1rem 0;
}

.content-rte p {
    font-size: 16px;
    line-height: 130%;
    color: var(--black);
}

.content-rte>*:last-child {
    margin-bottom: 0;
}

.two-col .u-card {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.two-col .u-card>*:first-child {
    margin-top: 0;
}

.two-col .u-card>*:last-child {
    margin-bottom: 0;
}

.two-col .u-feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.two-col .u-feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.two-col .u-feature-list li:last-child {
    margin-bottom: 0;
}

.two-col ul.u-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: #4caf50;
    color: var(--white);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: bold;
}

.two-col ol.u-feature-list {
    counter-reset: feature-counter;
}

.two-col ol.u-feature-list li {
    counter-increment: feature-counter;
}

.two-col ol.u-feature-list li::before {
    content: counter(feature-counter);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: #2196f3;
    color: var(--white);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: bold;
}

.two-col-content .btn {
    margin-top: 40px;
    margin-bottom: 10px;
    display: inline-block;
}

.content-fineprint {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--black);
    line-height: 15px;
    max-width: 600px;
}

.two-col-content .btn+.content-fineprint {
    margin-top: 0;
}

.content-rte ol {
    list-style: none;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 30px 25px;
    background: #F2F8FC;
    counter-reset: step;
    border-radius: 10px;
}

.content-rte ol li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 15px;
    align-items: start;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #004185;
}

.content-rte ul {
    list-style: none;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 30px 25px;
    background: #F2F8FC;
    counter-reset: step;
    border-radius: 10px;
}

.content-rte ul li {
    counter-increment: step;
    display: grid;
    column-gap: 15px;
    align-items: start;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #004185;
}

.content-rte ol li:first-child {
    padding-top: 0;
}

.content-rte ul li:first-child {
    padding-top: 0;
}

.content-rte ol li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.content-rte ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.content-rte ol li::before {
    content: counter(step);
    width: 30px;
    height: 30px;
    background: #CDE9FF;
    color: #004185;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}


/** Result Section **/
.result-section {
    padding-bottom: 140px;
}

.result-inner {
    padding-inline: 0;
    max-width: 1440px;
    margin: 0 auto;
}

.result-header h2 {
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 700;
    color: #004185;
}

.result-carousel-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 60px;
    height: 60px;
}

.result-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
}

.result-carousel-buttons {
    display: flex;
    gap: 30px;
}

/* Muted state for result carousel buttons at edges */
.result-carousel-button:disabled,
.result-carousel-button[disabled] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    filter: grayscale(100%);
}

/* Result carousel structure */
.result-carousel {
    width: 100%;
    overflow: visible;
}

.result-carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    gap: 30px;
}

.result-frame {
    display: flex;
    gap: 0;
    width: 1200px;
    flex: 0 0 1200px;
}

.result-panel {
    position: relative;
    background: #D9D9D9;
    height: 500px;
    overflow: hidden;
}

.result-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.result-panel--center {
    background: #000;
}

/* Next frame reveal is handled by track overflow; no third panel here */
.result-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: var(--white);
    font-weight: 700;
    user-select: none;
}

.result-panel--before {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.result-panel--after {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/** End Result Section **/


/** Local Service Section **/
.local-service-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.local-service-inner {
    padding-inline: 0;
    max-width: 1440px;
    margin: 0 auto;
}

/* Local Service: layout - desktop first */
.local-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(24px, 6vw, 90px);
    row-gap: 0px;
    align-items: start;
}

.local-service-grid .lss-col--left {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.local-service-grid .lss-col--map {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.local-service-grid .lss-info-left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    color: #F2F8FC;
}

.local-service-grid .lss-info-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    color: #F2F8FC;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.local-service-section .lss-heading {
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 700;
    color: #F2F8FC;
    margin: 0 0 20px 0;
}

.local-service-section .lss-sub {
    color: #F2F8FC;
}

.lss-sub {
    font-size: 16px;
}

.lss-business-hours-card {
    margin-top: 50px;
}

.lss-card-header {
    padding-left: 30px;
    padding-top: 17px;
    padding-bottom: 17px;
    background: #0F2B49;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: var(--white)
}

.lss-card-body {
    padding: 30px;
    background: #004195;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.lss-card-body ul {
    padding-left: 20px;
}

/* =========================================
   Local Service Section — Business Hours Table
   ========================================= */
.lss-hours-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--white);
}

.lss-hours-table thead th {
    text-align: left;
    font-weight: 700;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.lss-hours-table thead th:first-child {
    width: 30%;
}

.lss-hours-table thead th:nth-child(2) {
    width: 35%;
}

.lss-hours-table thead th:nth-child(3) {
    width: 35%;
}


.lss-hours-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.lss-hours-table tbody tr:last-child {
    border-bottom: none;
}

.lss-hours-table tbody th,
.lss-hours-table tbody td {
    padding: 14px 0;
    vertical-align: top;
}

.lss-hours-table tbody th.day {
    font-weight: 700;
    white-space: nowrap;
    text-align: start;
}

.lss-hours-empty {
    color: var(--white);
    opacity: 0.85;
}

/* Mobile grid structure (hidden on desktop) */
.lss-hours-mobile {
    display: none;
    color: var(--white);
}

.lss-hours-mobile .lssmh-header,
.lss-hours-mobile .lssmh-subheading {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
}

.lss-hours-mobile .lssmh-day,
.lss-hours-mobile .lssmh-hours {
    font-size: 16px;
    line-height: 1.5;
}

.lss-hours-mobile .lssmh-day {
    font-weight: 700;
}

.lss-card-header h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0;
}

.lss-meta {
    margin-top: 10px;
}

.lss-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #F2F8FC;
}

.lss-pagename {
    font-size: 16px;
    color: var(--white);
    font-weight: 700;
}

.lss-meta-icon svg {
    display: block;
}

.lss-phone {
    color: #F2F8FC;
    text-decoration: none;
}

.lss-feefo {
    margin-top: 30px;
}


.lss-map iframe {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-top: 40px;
}

/* Info cards row */
.lss-hours-title,
.lss-service-area-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #F2F8FC;

}


.lss-service-area {
    margin-top: 30px;
}

.lss-hours-body {
    font-size: 16px;
    line-height: 1.6;
    color: #F2F8FC;
}

.lss-service-area {
    width: 100%;
    margin-top: 30px;

}

.lss-service-area-title {
    text-align: center;
}

.lss-service-area-body {
    max-width: 760px;
    margin: 0 auto;
}

.more-services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0px 30px;
    align-items: stretch;
}

.more-service-card {
    width: 100%;
}

.more-service-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    background: #004195;
    border-radius: 10px;
    text-decoration: none;
    color: var(--white);
    transition: background 0.3s ease;
}

.more-service-media {
    width: 100%;
    height: 160px;
    overflow: hidden;
    flex-shrink: 0;

}

.more-service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top;
}

.more-service-link:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.18);
}

.more-service-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3em;
    color: var(--white);
    margin: 0;
    padding: 10px 30px;
    display: block;
    text-align: center;
    min-height: 66px;
    display: flex;
    align-items: center;
}

.moreServiceHeading {
    font-size: 32px;
    font-weight: 700;
    color: var(--white);
    margin-top: 70px;
    margin-bottom: 30px;
}

/** End Local Service Section **/


/** Comparison Table Section **/
.comparison-container {
    max-width: 1140px;
    margin: 0 auto;
    background-color: rgb(239, 248, 255);
    border-radius: 10px;
    overflow: hidden;
}

.comparison-section {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: rgb(239, 248, 255);
}

.comparison-section h2 {
    font-weight: 700;
    color: #004185;
    margin-bottom: 10px;
    line-height: 1.3em;
    font-size: 48px;
    text-align: center;
}

.container-inner {
    padding-inline: 3rem;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    display: table;
    margin-top: 50px;
}

/* Header Row */
.comparison-header {
    display: table-row;
    width: 100%;
}

.header-cell {
    display: table-cell;
    width: 33.333%;
    height: 108px;
    vertical-align: middle;
    text-align: center;
    font-size: 22px;
    line-height: 130%;
    color: #F2F8FC;
    font-weight: bold;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 20px;
}

.header-cell:first-child {
    background-color: rgb(239, 248, 255);;
    border-top-left-radius: 10px;
}

.header-cell:nth-child(2) {
    background-image: url('/media/mkyff1br/electrodry-tile-and-grout-cleaning-checklist.png');
    border-top-left-radius: 10px;
}

.header-cell:last-child {
    background-image: url('/media/hdydc1gt/other-tile-cleaning-general.png');

    border-top-right-radius: 10px;
}

/* Table Body */
.comparison-row {
    display: table-row;
    width: 100%;
    position: relative;
}


.cell {
    display: table-cell;
    width: 33.333%;
    padding: 20px 40px;
    vertical-align: initial;
}

/* First Column Styling */
.cell:first-child {
    background-color: #CDE9FF;
    font-size: 18px;
    color: #004185;
    font-weight: 600;
    padding-right: 40px;
    padding-left: 60px;
    justify-content: flex-end;
    text-align: right;
}

/* Border radius for first row's first cell */
.comparison-table>.comparison-row:nth-child(2) .cell:first-child {
    border-top-left-radius: 15px;
}

/* Border radius for last row's first cell */
.comparison-row:last-child .cell:first-child {
    border-bottom-left-radius: 15px;
}

/* Border radius for last row's third cell */
.comparison-row:last-child .cell:last-child {
    border-bottom-right-radius: 15px;
}


/* Bottom border for first column cells */
.comparison-row:not(:last-child) .cell:first-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 0;
    height: 1px;
    background-color: #F2F8FC;
}

/* Second Column Styling */
.cell:nth-child(2) {
    background-color: #004185;
    color: var(--white);
    font-size: 16px;
    line-height: 150%;
    padding: 20px 30px 30px 30px;
    gap: 10px;
}

/* Third Column Styling */
.cell:last-child {
    background-color: #787878;
    color: var(--white);
    font-size: 16px;
    line-height: 150%;
    padding: 20px 50px 20px 40px;
    gap: 10px;
}

.button-container .btn-yellow {
    height: 50px !important;
}

/* Horizontal Line Styling within colored cells */
.comparison-row .cell:nth-child(2),
.comparison-row .cell:last-child {
    position: relative;
    width: auto;
}

.button-container {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.comparison-row:not(:last-child) .cell:nth-child(2)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #F2F8FC;
}

.comparison-row:not(:last-child) .cell:last-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 40px;
    height: 1px;
    background-color: #F2F8FC;
}

/* Icon and Text Container */
.feature-content {
    display: flex;
    align-items: self-start;
    gap: 10px;
    width: 100%;
}

.feature-icon {
    flex-shrink: 0;
}

.cell-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/** End Comparison Table Section **/


/** Electroshield banner Section **/
.electroshield-banner {
    padding-top: 80px;
    padding-bottom: 80px;
}

.electroshield-inner {
    padding-inline: 3rem;
    margin: 0 auto;
    max-width: 1440px;
}

.electroshield-banner-container {
    background-color: #004185;
    background-image: url('/media/0hvn2nur/electroshield-banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    min-height: 450px;
    padding-top: 70px;
    padding-left: 70px;
}

.electroshield-banner-container .box {
    background: #E10D12;
    width: fit-content;
    padding: 5px 8px;
    color: #fff;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
}

.electroshield-copy {
    max-width: 500px;
    font-weight: bold;
    margin-top: 30px;
    color: #fff;
    font-size: 16px;
    line-height: 130%;
}

/** End Electroshield banner Section **/

/** Start Two Column Layout Section **/

.media-content {
    width: 100%;
    display: block;
}

.media-content__image {
    border-radius: 10px;
}

.two-column-layout-container .media-content,
.two-column-layout-container .media-content__image,
.two-column-layout-container .media-content__video {
    width: 100%;
    max-width: none;
}

.media-content__image,
.media-content__video {
    width: 100%;
    height: auto;
    display: block;
}

.two-column-layout-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    justify-content: space-between;
}

/* The Dominant First Column */
.two-column-layout-container > .umb-block-grid__area:first-child {
    flex: 0 0 780px; /* Do not grow, do not shrink, stay at 780px */
    max-width: 780px;
}

/* The Flexible Second Column */
.two-column-layout-container > .umb-block-grid__area:last-child {
    flex: 1; /* Take up all remaining space */
    min-width: 0; /* Prevents content from pushing the width wide */
}

/* Ensure the container handles the gap */
.two-column-layout-container {
    display: flex;
    gap: 60px;
    max-width: 1440px; /* Based on your original calculation */
    margin: 0 auto;
}

.two-column-layout-container h2 {
    max-width: 600px;
    font-size: 44px;
    line-height: 120%;
    font-weight: 700;
    color: #004185;
    margin: 0 0 30px 0;
}

/* Two Column Layout - Handle empty paragraphs from RTE new lines */
.two-column-layout-container p:empty {
    min-height: 1em;
    display: block;
}

.two-column-layout-container p:empty::before {
    content: "\00a0";
}

.two-column-layout-container p span:empty {
    display: inline-block;
    min-height: 1em;
    min-width: 1px;
}

.two-column-layout-container p span:empty::before {
    content: "\00a0";
}

.two-column-layout-container p:has(> span:only-child:empty) {
    min-height: 1em;
    display: block;
}

.two-column-text-content {
    font-size: 16px;
    line-height: 130%;
    max-width: 600px;
}

.two-column-text-fineprint {
    font-size: 12px;
    line-height: 15px;
    margin-top: 15px;
}

/** End Two Column Layout Section **/

/** checklist-box **/
.checklist-box {
    background: #F2F8FC;
    padding: 30px 40px;
    border-radius: 10px;
    width: 87%;
    margin-top: 30px;
    margin-bottom: 50px;
}

.checklist-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-box ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    padding-bottom: 10px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 130%;
    color: var(--blue);
    font-weight: 600;
    border-bottom: 1px solid var(--blue);
}

.checklist-box ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/** tile promo banner section **/
.tile-promo-banner-section {
    padding-bottom: 50px;
}

.tile-promo-banner-container {
    max-width: 1440px;
    margin: 0 auto;
}

.tile-promo-banner-content {
    background: #ec2426;
    padding: 40px;
    color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-promo-banner-box {
    display: flex;
    align-items: stretch;
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    background: #ec2426;
}

.tile-promo-banner-box img { 
    width: 49%;
    min-height: 364px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tile-promo-banner-title {
    max-width: 560px;
    font-family: "Polymath", sans-serif;
    font-size: 33px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 22px;
}

.tile-promo-banner-text {
    max-width: 560px;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 34px;
}

.tile-promo-banner-content .btn-yellow,
.tile-promo-banner-content .btn-yellow:link,
.tile-promo-banner-content .btn-yellow:visited {
    min-width: 192px;
    min-height: 60px;
    padding: 0 34px;
    border-radius: 6px;
    font-family: "Polymath", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #ec2426;
    align-self: flex-start;
}

.tile-promo-banner-fine {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}


/** how to book section **/
.how-to-book-section {
    padding-bottom: 100px;
    background: #EFF8FF;
}

.how-to-book-container {
    max-width: 1440px;
    margin: 0 auto;
}

.how-to-book-section h2  {
    font-size: 44px;
    line-height: 1.2em;
    font-weight: 700;
    color: #004185;
    text-align: center;
}

.how-to-book-lists {
    display: flex;
    margin-top: 50px;
    height: 130px;
}

.how-to-book-lists ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
}

.how-to-book-lists ul li {
    display: flex;
    align-items: center;
}

.how-to-book-content {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    max-width: 460px;
    min-width: 460px;
}

.how-to-book-img {
    width: 460px;
    height: 130px;
    position: absolute;
}

.round-step {
    font-size: 28px;
    font-weight: bold;
    color: #004185;
    background: #fd0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    max-width: 70px;
    min-width: 70px;
    min-height: 70px;
}

.how-to-book-text {
    font-size: 18px;
    line-height: 130%;
    color: var(--white);
}

/** Blog Section **/
.blogSection-inner {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.blog-section {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #EFF8FF;
}

.blog-section.has-padding-top {
    padding-top: 80px;
}

.blog-section.spb {
    padding-bottom: 80px;
}

.blog-section-heading {
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    font-family: 'Polymath', sans-serif;
    color: var(--blue) !important;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 660px;
    padding: 0;
    line-height: 120%;
}

.blog-section-sub {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.blog-section-sub p {
    font-size: 16px;
    color: var(--darkgray);
    line-height: 1.6;
}

.blog-section-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}

/* Blog section column variations */
.blog-section-items--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.blog-section-items--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.blog-section-item {
    display: flex;
    flex-direction: column;
}

.blog-section-item a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.blog-section-item a:hover {
    opacity: 0.8;
}

.blog-section-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
}

.blog-section-item h3 {
    font-size: 22px;
    font-weight: bold;
    color: var(--blue);
    margin: 0;
    line-height: 130%;
    display: block;
}

.blog-section-cta {
    text-align: center;
    margin-top: 40px;
}

.blog-section-cta a.btn {
    padding: 15px 30px;
}

.blog-section-cta a.btn.btn-yellow {
    background-color: var(--yellow);
    color: var(--blue);
}

.blog-section-cta a.btn.btn-yellow:hover {
    background-color: #ffd700;
}

/** Tile Types Section **/

.tile-types-section {
    padding: 100px 0 96px 0;
    overflow: hidden;
}

.tile-types-section > .container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.tile-types-shell {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

.tile-types-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin: 0 0 40px 0;
    transition: transform 0.3s ease-out;
}

.tile-types-header--stack {
    flex-direction: column;
}

.tile-types-heading {
    margin: 0;
    color: #00439c;
    font-family: "Polymath", sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.tile-types-sub {
    color: #333333;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}


.tile-types-sub p:last-child {
    margin-bottom: 0;
}

.tile-types-rail {
    display: flex;
    gap: 30px;
    margin: 0 0 40px 0;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 1440px;
}

.tile-type-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 285px;
    height: 300px;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 43, 93, 0.08);
}

.tile-type-card__details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.tile-type-card__summary {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    list-style: none;
    cursor: pointer;
}

.tile-type-card__summary::-webkit-details-marker {
    display: none;
}

.tile-type-card__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 31px;
    padding: 30px 20px;
    background: #004185;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3
}

.tile-type-card__plus {
    flex: 0 0 auto;
    position: relative;
    width: 22px;
    height: 22px;
}

.tile-type-card__plus::before,
.tile-type-card__plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 3px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.tile-type-card__plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.tile-type-card__details[open] .tile-type-card__plus::after {
    opacity: 0;
}

.tile-type-card__image-wrap {
    flex: 1 1 auto;
    min-height: 0;
    background: #dce7f5;
    display: block;
    overflow: hidden;
}

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

.tile-type-card__body {
    display: none;
    min-height: 0;
    padding: 22px 24px 24px;
    background: #004185;
    overflow-y: auto;
}

.tile-type-card__details[open] .tile-type-card__summary {
    flex: 0 0 auto;
}

.tile-type-card__details[open] .tile-type-card__image-wrap {
    display: none;
}

.tile-type-card__details[open] .tile-type-card__body {
    display: block;
    flex: 1 1 auto;
}

/* Chrome 131+ wraps the disclosed content in a ::details-content pseudo-element,
   which becomes the flex item instead of the body. Make that wrapper a flex
   column that fills the card so the blue description panel reaches the bottom
   (no white strip). Safari/iPad have no such pseudo, so the body grows directly. */
.tile-type-card__details::details-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tile-type-card__details[open]::details-content {
    flex: 1 1 auto;
}

.tile-type-card__description {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.tile-type-card__description p,
.tile-type-card__description li {
    color: #ffffff;
}

.tile-type-card__description p:last-child {
    margin-bottom: 0;
}

.tile-types-cta {
    display: flex;
    justify-content: center;
}

.tile-types-cta__button.btn-yellow {
    padding: 15px 30px;
    margin-top: 40px;
    font-size: 16px;
}

.tile-types-cards-wrapper {
    display: flex;
    gap: 30px;
    position: relative;
    width: fit-content;
}

.tile-types-section .tile-types-rail,
.tile-types-section .tile-types-cards-wrapper,
.tile-types-section .tile-types-shell {
    position: relative !important;
}

/** End Tile Types Section **/

/* Catch MacBook Air 13" at default scaling */
@media (max-width: 1536px) {

    /* Padding for all sections */
    .hero-inner,
    .benefits-inner,
    .process-inner,
    .two-column-inner,
    .faq-inner,
    .testimonials-inner,
    .testimonials-carousel-container,
    .result-inner,
    .local-service-inner,
    .two-column-layout-container,
    .tile-promo-banner-container,
    .tile-type-section > .container {
        padding-inline: 2.5rem;
    }

    /* End: Padding for all sections */

    h1 {
        font-size: 60px;
    }

    .sub-h1 {
        font-size: 20px;
    }

    .benefits-heading,
    .process-heading {
        font-size: 40px;
    }

    .benefits-sub,
    .process-sub {
        font-size: 18px;
    }

    .benefit-title h3 {
        font-size: 20px;
    }

    .process-name {
        font-size: 20px;
    }


    /** Testimonial Section - Large Desktop **/
    .testimonials-heading {
        font-size: 40px;
    }

    .testimonials-sub {
        font-size: 18px;
    }

    /**Our Result Before and after **/
    .result-header h2 {
        font-size: 40px;
    }

    /** Local Service Section - Large Desktop **/
    .local-service-section .lss-heading {
        font-size: 40px;
    }

    .more-service-title {
        font-size: 18px;
    }

    /**Comparison Section - Large Desktop **/
    .comparison-section h2 {
        font-size: 40px;
    }

    /** FAQ Section - Large Desktop **/
    .faq-heading {
        font-size: 40px;
    }

}

/* 0-1439 px — everything under 1440 needs breathing room */
@media (max-width: 1439px) {
    /* Padding for all sections */
    .hero-inner,
    .benefits-inner,
    .process-inner,
    .two-column-inner,
    .faq-inner,
    .testimonials-inner,
    .testimonials-carousel-container,
    .result-inner,
    .local-service-inner,
    .two-column-layout-container,
    .tile-promo-banner-container,
    .blogSection-inner,
    .tile-types-shell {
        padding-inline: 3rem;
    }

    .testimonials-content-inner {
        margin: 0 auto;
    }
    /* End: Padding for all sections */


    /** Tile Promo Banner Section - Large Desktop **/
    .tile-promo-banner-content {
        padding: 40px;
    }

    .tile-promo-banner-box img {
        width: 46%;
        min-height: 340px;
    }

    .tile-promo-banner-title {
        font-size: 33px;
    }

    .tile-promo-banner-text {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .tile-promo-banner-content .btn-yellow,
    .tile-promo-banner-content .btn-yellow:link,
    .tile-promo-banner-content .btn-yellow:visited {
        min-width: 184px;
        min-height: 56px;
        font-size: 16px;
    }
    /** End Tile Promo Banner Section - Large Desktop **/

    /** How to Book Section - Large Desktop **/
    .how-to-book-lists ul {
        gap: 10px;
    }

    /** End How to Book Section - Large Desktop **/
    
    .two-column-layout-container > .umb-block-grid__area:first-child,
    .two-column-layout-container > .umb-block-grid__area:last-child {
        flex: 1 1 0;
        max-width: calc(50% - 30px);
    }

}

@media (max-width: 1024.98px) {
    /* Two Column Section - Tablet/iPad styles */
    .two-col-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .two-col-img {
        max-width: 100%;
        flex: 0 0 auto;
        width: 100%;
    }

    .two-col-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 24px 24px;
        align-items: start;
        padding-left: 0;
        padding-right: 0;
    }

    .two-col-content h2 {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 20px 0;
        font-size: 36px;
    }

    .two-col-content h3 {
        font-size: 18px;
    }

    .content-rte ol,
    .content-rte ul {
        margin-top: 0;
    }

    .two-col-content:not(:has(.content-rte>ol, .content-rte>ul)) {
        grid-template-columns: 1fr;
    }
    /* End Two Column Section - Tablet/iPad styles */

    /* How to Book Section - horizontal scroll on iPad and down */
    .how-to-book-lists {
        overflow-x: auto;
        overflow-y: hidden;
        height: auto;
        min-height: 130px;
        padding-left: 3rem;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
        /* hide scrollbar but keep scroll/drag */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .how-to-book-lists::-webkit-scrollbar {
        display: none;
    }

    .how-to-book-lists.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .how-to-book-lists.is-dragging ul,
    .how-to-book-lists.is-dragging ul * {
        /* prevent text/image selection while dragging */
        user-select: none;
        pointer-events: none;
    }

    .how-to-book-lists ul {
        flex-wrap: nowrap;
        width: max-content;
        padding-right: 3rem;
    }

    .how-to-book-lists ul li {
        flex: 0 0 auto;
        position: relative;
        height: 130px;
    }

    /* Fill the whole card so a peeking step shows the image, not blank space */
    .how-to-book-lists .how-to-book-img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* End How to Book Section - horizontal scroll on iPad and down */

    /* Hero Section - Tablet/iPad styles */
    h1 {
        font-size: 55px;
        margin-bottom: 20px;
    }

    h2, .benefits-heading {
        font-size: 36px;
    }

    .hero-inner {
        transform: none;
        gap: 10px;
    }

    .hero-inner[data-align="left"] {
        text-align: left;
        align-items: flex-start;
    }

    .hero-inner[data-align="center"] {
        text-align: center;
        align-items: center;
    }

    .hero-inner[data-align="right"] {
        text-align: right;
        align-items: flex-end;
    }

    .hero-inner>.umb-block-grid__area {
        flex: 1 1 50%;
    }

    .hero-inner>.umb-block-grid__area {
        max-width: 500px;
    }

    .hero-inner>.umb-block-grid__area:last-child {
        max-width: 300px;
    }

    .hero-card {
        width: 145px;
        height: 145px;
    }

    .hero-card-title {
        font-size: 14px;
    }

    .hero-promo-postcode-finder {
        width: 306px;
        height: fit-content;
    }

    .hero-promo-postcode-finder .postcode-input {
        width: 100%;
    }

    .hero-promo-content-inner {
        display: flex;
        gap: 15px;
    }

    .hero-promo-heading {
        font-size: 21px;
        text-align: start;
        margin-bottom: 20px;
    }

    .hero-inner .sub-h1 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .tile-pricing {
        width: 214px;
        height: auto;
    }

    /* End: Hero Section - Tablet/iPad styles */

    /* Benefits Section - Tablet/iPad styles */
    .benefits-sub {
        font-size: 18px;
    }

    .benefit-title h3 {
        font-size: 20px;
    }

    .benefits-header--flex-row {
        flex-direction: column;
        gap: 30px;
    }

    .benefit-items-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: auto;
    }

    /* End: Benefits Section - Tablet/iPad styles */


    /* Process Section - Tablet/iPad styles */
    .process-header--flex-row {
        flex-direction: column;
        gap: 30px;
    }

    .process-heading {
        font-size: 36px;
    }

    /* End: Process Section - Tablet/iPad styles */

    /* Testimonials Section */
    .testimonials-header--flex-row {
        gap: 28px;
    }

    .testimonials-heading {
        font-size: 36px;
    }

    .testimonials-controls {
        display: none;
    }

    .testimonial-card {
        width: calc(40% - 12px);
    }
    /* End: Testimonials Section - Tablet/iPad styles */

    /* FAQ Section - Tablet/iPad styles */
    .faq-heading {
        font-size: 36px;
    }

    .faq-accordion-title {
        font-size: 18px;
    }

    .faq-sub p {
        font-size: 16px;
    }

    .faq-split-columns {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 30px 0;
        grid-template-columns: none;
    }

    .faq-container--split .faq-accordion {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 0;
    }

    .faq-container--split .faq-accordion-item {
        width: 100%;
    }
    /* End: FAQ Accordion - Split Layout Mobile */

    /* Result Section - Tablet/iPad styles */
    .result-section {
        padding-bottom: 100px;
    }

    .result-frame {
        gap: 20px;
    }

    .result-panel--before {
        border-radius: 10px;
    }

    .result-panel--after {
        border-radius: 10px;
    }

    .result-carousel-track {
        padding-right: 300px;
    }

    .result-header {
        justify-content: center;
        margin-bottom: 50px;
    }

    .result-carousel-buttons {
        display: none;
    }

    .result-header h2 {
        font-size: 36px;
    }

    /* End: Result Section - Tablet/iPad styles */

    /* Local Service Section - Tablet/iPad styles */
    .local-service-grid {
        gap: 40px;
    }

    .local-service-section .lss-heading {
        font-size: 36px;
    }


    .lss-map iframe {
        min-height: 330px;
        aspect-ratio: auto;
    }

    .lss-service-area {
        text-align: start;
    }

    .lss-service-area-title {
        text-align: start;
    }

    .more-services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .moreServiceHeading {
        font-size: 24px;
    }

    .more-service-title {
        font-size: 18px;
    }

    /* =========================================
       Local Service Section — Business Hours Table (iPad)
       ========================================= */
    /* Hide desktop table and render mobile grid */
    .lss-hours-table {
        display: none;
    }

    .lss-hours-mobile {
        display: grid;
        grid-template-columns: minmax(110px, 1fr) 1fr;
        column-gap: 24px;
        row-gap: 12px;
    }

    .lss-hours-mobile .lssmh-header {
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    .lss-hours-mobile .lssmh-subheading {
        padding-bottom: 12px;
        margin-top: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Add separation for the row containing Day (spacer) + Online Booking Hours */
    .lss-hours-mobile .lssmh-spacer {
        padding-bottom: 12px;
        margin-top: 30px;
        font-weight: bold;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    .lssmh-day, .lssmh-hours {
        margin-top: 15px;
    }

    /* End: Local Service Section - Tablet/iPad styles */


    /** Comparison Table Section - Tablet/iPad styles **/
    .comparison-section h2 {
        font-size: 36px;
    }

    /* Reduce first column width on iPad */
    .header-cell:first-child,
    .cell:first-child {
        width: 25%;
    }

    /* Increase second and third column widths proportionally */
    .header-cell:nth-child(2),
    .cell:nth-child(2) {
        width: 37.5%;
    }

    .header-cell:last-child,
    .cell:last-child {
        width: 37.5%;
    }

    /* Adjust padding for better fit */
    .cell:first-child {
        padding-left: 30px;
        padding-right: 20px;
    }

    .header-cell {
        font-size: 18px;
    }

    .cell:first-child,
    .cell:nth-child(2),
    .cell:last-child {
        font-size: 14px;
    }

    .cell:nth-child(2) {
        padding: 20px;
    }

    .cell:last-child {
        padding: 20px;
    }

    .comparison-row:not(:last-child) .cell:first-child::after {
        left: 20px;
    }

    .comparison-row:not(:last-child) .cell:last-child::after {
        right: 20px;
    }

    /** End Comparison Table Section - Tablet/iPad styles **/

    /** Two Column Layout Section - Tablet/iPad styles **/
    .two-column-layout-container {
        gap: 40px;
        padding-inline: 3rem;
    }

    .two-column-layout-container h2 {
        font-size: 36px;
    }

    /** End Two Column Layout Section - Tablet/iPad styles **/

    /** Electroshield banner Section - Tablet/iPad styles **/
    .electroshield-banner-container {
        background-position: right center;
        background-size: cover;
        padding-left: 60px;
    }

    .electroshield-logo {
        width: 300px;
        height: 100px;
    }

    /** End Electroshield banner Section - Tablet/iPad styles **/


    /** Process Card Section - Tablet/iPad styles **/
    .process-name {
        font-size: 20px;
    }
    /** End Process Card Section - Tablet/iPad styles **/

    /** Testimonials Section - Tablet/iPad styles **/

    .testimonials-sub {
        font-size: 18px;
    }

    /** End: Testimonials Section - Tablet/iPad styles **/

    /** Tile Promo Banner Section - Tablet/iPad styles **/
    .tile-promo-banner-content {
        padding: 34px 32px 32px;
    }

    .tile-promo-banner-box img {
        width: 44%;
        min-height: 320px;
    }

    .tile-promo-banner-title {
        font-size: 32px;
        line-height: 1.16;
    }

    .tile-promo-banner-text {
        font-size: 18px;
        line-height: 1.45;
        margin-bottom: 24px;
    }

    .tile-promo-banner-content .btn-yellow {
        min-width: 176px;
        min-height: 54px;
        font-size: 16px;
    }
    /** End Tile Promo Banner Section - Tablet/iPad styles **/

    /** How to Book Section - Tablet/iPad styles **/
    .how-to-book-section h2 {
        font-size: 36px;
    }


    /** End How to Book Section - Tablet/iPad styles **/
    
    
    /* Blog Section - Tablet/iPad styles */
    .blog-section-items,
    .blog-section-items--cols-3,
    .blog-section-items--cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .blog-section-heading {
        font-size: 36px;
    }
    /* End: Blog Section - Tablet/iPad styles */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 45px;
        line-height: 120%;
        word-wrap: break-word;
        margin-bottom: 20px;
    }

    /* Two Column Section - Mobile styles */
    .two-col-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .two-col-img {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .two-col-content {
        padding-left: 0;
        padding-right: 0;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .two-col-content h2 {
        font-size: 30px;
    }

    .two-col .content-rte {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }

    .two-col .content-rte>* {
        grid-column: auto;
    }

    .two-col .content-rte>.u-card:first-of-type,
    .two-col .content-rte>ul.u-feature-list:first-of-type,
    .two-col .content-rte>ol.u-feature-list:first-of-type {
        grid-column: auto;
        grid-row: auto;
        max-width: none;
    }

    .two-column-inner {
        padding-inline: 1.6rem;
    }
    /* End: Two Column Section - Mobile styles */

    /* Benefits Section - Mobile styles */
    .benefits-sub {
        font-size: 16px;
    }

    .benefits-header--flex-row {
        flex-direction: column;
        text-align: start;
        gap: 1rem;
    }

    .benefits-header {
        margin-bottom: 60px;
    }

    .benefits-header--center .benefits-heading {
        text-align: start;
    }

    .benefits-header--flex-row .benefits-heading {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .benefits-heading {
        font-size: 30px;
    }

    .benefit-title h3 {
        font-size: 18px;
    }

    .benefit-items-container {
        grid-template-columns: 1fr;
    }
    /* End: Benefits Section - Mobile styles */

    /* Hero Section - Mobile styles */

    .hero-cards-container {
        gap: 15px;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .hero-card {
        width: auto;
        height: 160px;
        flex: 1;
    }

    /* postcode finder */
    .hero-promo-postcode-finder {
        width: 320px;
        height: 240px;
        padding: 25px 20px;
    }

    .hero-promo-heading {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .hero-promo-postcode-finder .location-icon svg {
        width: 24px;
        height: 33px;
    }

    /* End: Hero Section - Mobile styles */

    /* Process Section - Mobile styles */
    .process-heading {
        font-size: 30px;
    }

    .process-name {
        font-size: 18px;
    }

    .process-sub {
        font-size: 16px;
    }

    .process-cards-container {
        margin-top: 30px;
    }

    /* End: Process Section - Mobile styles */

    /* Testimonials section - Mobile styles */
    .testimonials-header--flex-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        text-align: center;
    }

    .testimonials-header--flex-row .testimonials-heading,
    .testimonials-header--flex-row .testimonials-sub {
        text-align: center;
    }

    .testimonials-heading {
        font-size: 30px;
    }

    .testimonials-sub {
        font-size: 16px;
    }

    .testimonials-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .brightlocal-widget-frame {
        height: 800px;
    }

    .testimonials-container {
        min-height: 600px;
    }

    .testimonials-content-inner {
        padding-inline: 0;
        transform: scale(0.9);
    }

    .testimonials-controls {
        display: none;
    }

    .testimonial-card {
        width: 100%;
    }

    .testimonials-carousel {
        gap: 20px;
    }

    /* End: Testimonials Section - Mobile styles */

    /* FAQ Section - Mobile styles */
    .faq-section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .faq-accordion {
        gap: 10px;
    }

    .faq-accordion-item {
        border-radius: 6px;
    }

    .faq-accordion-title {
        font-size: 18px;
    }

    .faq-header,
    .faq-header--flex-row {
        flex-direction: column;
        gap: 30px;
    }

    .faq-heading {
        font-size: 30px;
        flex: none;
    }

    .faq-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .faq-card {
        padding: 20px;
    }

    .faq-card-title {
        font-size: 18px;
    }

    .faq-card-content {
        font-size: 14px;
    }

    .faq-section--side .faq-header--side {
        flex-direction: column;
        gap: 1.5rem;
    }

    .faq-section--side .faq-header-left {
        max-width: 100%;
    }

    .faq-section--side .faq-header-right {
        width: 100%;
        justify-content: center;
    }

    .faq-header-wrapper {
        width: 100%;
    }

    .faq-section--stacked .faq-header,
    .faq-section--side .faq-header {
        gap: 20px;
        text-align: center;
        align-items: center;
    }

    .faq-container--side .faq-sub {
        margin-top: 0;
    }

    .faq-container--side {
        flex-direction: column;
        gap: 30px;
    }

    .faq-container--side .faq-button-placeholder {
        margin-top: 0;
        display: none;
    }

    .faq-content-area .btn,
    .faq-button-placeholder .btn {
        margin: 40px auto 0 auto;
    }

    .faq-button-wrapper {
        text-align: center;
        margin-top: 40px;
    }

    /* End: FAQ Section - Mobile styles */

    /* Result Section - Mobile styles */
    .result-frame {
        max-width: 600px;
        flex: 0 0 600px;
    }

    .result-inner {
        padding-inline: 1.6rem;
    }

    .result-header h2 {
        font-size: 30px;
    }

    .result-header {
        margin-bottom: 40px;
    }

    .result-carousel-track {
        padding-right: 300px;
    }

    .result-panel {
        width: 315px;
        height: 260px;
    }

    .result-carousel-buttons {
        gap: 16px;
    }
    /* End: Result Section - Mobile styles */

    /* Local Service Section - Mobile styles */
    .local-service-inner {
        padding-inline: 1.6rem;
    }

    .local-service-section .lss-heading {
        font-size: 30px;
    }

    .local-service-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .local-service-grid .lss-col--left,
    .local-service-grid .lss-col--map,
    .local-service-grid .lss-info-right {
        display: contents;
    }

    .local-service-grid .lss-header {
        order: 1;
    }

    .local-service-grid .lss-meta {
        order: 3;
        width: 100%;
    }

    .local-service-grid .lss-map {
        order: 4;
        width: 100%;
    }

    .lss-map iframe {
        margin-top: 30px;
    }

    .local-service-grid .lss-business-hours-card {
        order: 6;
        margin-top: 10px;
        width: 100%;
    }

    .local-service-grid .lss-service-area {
        order: 7;
        margin-top: 0px;
    }

    .local-service-grid .lss-feefo {
        order: 5;
        margin-top: 0;
    }

    .more-services-grid {
        gap: 23px 29px;
        grid-template-columns: repeat(2, 1fr);

    }

    .more-service-link {
        flex-direction: column;
    }

    .moreServiceHeading {
        margin-bottom: 30px;
    }

    .more-service-media {
        width: 100%;
        height: 160px;
        border-radius: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .more-service-title {
        padding: 14px 17px;
        font-size: 16px;
        text-align: center;
        min-height: 69px;
    }

    /* =========================================
       Local Service Section — Business Hours Table (Mobile)
       ========================================= */
    .lss-hours-mobile {
        grid-template-columns: minmax(95px, 1fr) 1fr;
        column-gap: 0;
        row-gap: 10px;
    }

    .lss-hours-mobile .lssmh-header {
        padding-bottom: 15px;
    }

    .lss-hours-mobile .lssmh-subheading {
        padding-top: 10px;
        margin-top: 30px;
    }

    /* Add separation for the row containing Day (spacer) + Online Booking Hours */
    .lss-hours-mobile .lssmh-spacer {
        margin-top: 40px;
    }
    /* End: Local Service Section - Mobile styles */

    /** Comparison Table Section - Mobile styles **/
    .container-inner {
        padding-inline: 1.6rem;
    }

    .comparison-header {
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
    }

    /* Header cells responsive layout */
    .header-cell {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* First header cell - fixed width to match row cells */
    .header-cell:first-child {
        flex: 0 0 85px;
        min-width: 85px;
        max-width: 85px;
        border-radius: 0;
    }

    /* Second and third header cells - flexible width */
    .header-cell:nth-child(2),
    .header-cell:last-child {
        flex: 1;
        padding: 15px;
        min-width: 0;
    }

    /* Make comparison rows use flexbox on mobile for better responsiveness */
    .comparison-row {
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
    }

    /* Make cells responsive with flexbox */
    .cell {
        display: flex !important;
        align-items: center;
    }

    /* First column - fixed width */
    .cell:first-child {
        flex: 0 0 85px;
        min-width: 85px;
        max-width: 85px;
        text-align: right;
        font-size: 12px;
        padding: 10px 8px;
        justify-content: flex-end;
    }

    /* Second and third columns - flexible width */
    .cell:nth-child(2),
    .cell:last-child {
        flex: 1;
        padding: 15px;
        min-width: 0;
        /* Allow shrinking */
    }

    /* Second column font size */
    .cell:nth-child(2),
    .cell:last-child {
        font-size: 12px;
    }

    /* Feature content column layout with center alignment */
    .feature-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
    }

    /* Bottom border adjustment for first column */
    .comparison-row:not(:last-child) .cell:first-child::after {
        left: 14px;
    }

    .comparison-row:not(:last-child) .cell:last-child::after {
        right: 14px;
    }

    .button-container .btn-yellow {
        display: inline-flex !important; 
        justify-content: center;
        align-items: center;
        font-size: 0 !important;
        padding: 0 10px !important; 
        height: 50px;    
        min-width: fit-content !important; 
    }

    .button-container .btn-yellow::after {
        content: "BOOK NOW";
        font-size: 16px; 
        color: var(--blue);
        text-transform: uppercase;
        font-weight: bold; 
        display: block;
        line-height: 1;
    }

    .comparison-section h2 {
        font-size: 30px;
    }
    /** End Comparison Table Section - Mobile styles **/

    /** Two Column Layout Section - Mobile styles **/
    .two-column-layout-container {
        flex-direction: column;
        gap: 30px;
        padding-inline: 1.6rem;
    }

    .two-column-layout-container > .umb-block-grid__area {
        max-width: 100%;
        flex: 1 1 auto;
    }
    
    .two-column-layout-container > .umb-block-grid__area:first-child,
    .two-column-layout-container > .umb-block-grid__area:last-child {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .two-column-layout-container h2 {
        font-size: 30px;
    }
    /** End Two Column Layout Section - Mobile styles **/

    /** tile banner box section - mobile styles **/
    .tile-promo-banner-container {
        padding-inline: 1.6rem;
    }
    
    .tile-promo-banner-box {
        flex-direction: column;
    }

    .tile-promo-banner-box img {
        width: 100%;
        min-height: 240px;
    }

    .tile-promo-banner-content {
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        padding: 30px 24px 28px;
        text-align: center;
        align-items: center;
    }

    .tile-promo-banner-title {
        font-size: 30px;
        line-height: 1.18;
        text-align: center;
        margin-bottom: 16px;
    }

    .tile-promo-banner-text {
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 22px;
    }
    
    .tile-promo-banner-content .btn-yellow {
        min-width: 164px !important;
        min-height: 52px;
        font-size: 16px;
        align-self: center;
    }
    /** End tile banner box section - mobile styles **/

    /** How to Book Section - Mobile styles **/
    /* .how-to-book-container {
        padding-inline: 1.6rem;
    } */

    .how-to-book-container h2 {
        font-size: 30px;
    }
    /** End How to Book Section - Mobile styles **/


    /* Checklist Content - Mobile styles */
    .checklist-box {
        width: 100%;
    }
    /* End: Checklist Content - Mobile styles */
    
    /** Blog Section - Mobile styles **/
    .blogSection-inner {
        padding-inline: 1.6rem;
    }
     
    .blog-section-items,
    .blog-section-items--cols-3,
    .blog-section-items--cols-4 {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /** Tile Types Section - Mobile styles **/
    .tile-types-section > .container {
        padding-inline: 1.6rem;
    }


}

@media (max-width: 600px) {

    /* Hero Section - Mobile styles */
    .hero-section {
        padding-bottom: 50px;
        align-items: flex-end;
        height: 750px;
    }

    .hero-inner:has(.umb-block-grid__area .hero-promo-postcode-finder) {
        flex-direction: column-reverse;
    }

    .hero-inner {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-inline: 1.6rem;
        transform: translateY(0);
        gap: 30px;
    }

    .pricing-circle {
        width: 152px;
        height: fit-content;
    }

    .hero-inner>.umb-block-grid__area,
    .hero-inner>.umb-block-grid__area:last-child {
        max-width: 100%;
    }

    .hero-inner>.umb-block-grid__area {
        text-align: center;
    }

    .hero-inner>.umb-block-grid__area:last-child {
        justify-content: center;
    }

    .hero-cards-container {
        flex-direction: row;
    }

    .hero-promo-postcode-finder {
        max-width: 320px;
        height: 190px;
    }

    .hero-section:first-of-type .hero-inner>.umb-block-grid__area:first-child {
        order: 2;
    }

    .hero-section:first-of-type .hero-inner>.umb-block-grid__area:last-child {
        order: 1;
    }

    .hero-section:nth-of-type(3) .btn-yellow:last-of-type {
        display: none;
    }

    .hero-section:first-of-type .hero-inner>.umb-block-grid__area:first-child {
        order: 2;
    }

    .hero-section:first-of-type .hero-inner>.umb-block-grid__area:last-child {
        order: 1;
    }

    .hero-section:nth-of-type(3) .btn-yellow:last-of-type {
        display: none;
    }

    /* End: Hero Section - Mobile styles */

    /* Benefits Section - Mobile styles */

    .benefits-inner {
        padding-inline: 1.6rem;
    }

    /* End: Benefits Section - Mobile styles */


    /* Process Section - Mobile styles */
    .process-section {
        padding: 60px 0 80px 0;
        min-height: auto;
    }

    .process-cards-container {
        display: flex;
        flex-direction: row;
        overflow: visible !important;
        width: 100%;
        max-width: 100%;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .process-inner {
        padding-inline: 1.6rem;
    }

    .process-cards-container {
        position: relative;
    }

    .process-cards-wrapper {
        display: contents;
    }
    
    .process-content-inner {
        flex: none;
    }

    .process-card {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        height: 550px;
        margin: 0;
        flex: none;
        display: flex;
    }

    .process-image {
        flex: 1 1 0;
        position: relative;
    }

    .process-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        object-position: bottom;
    }

    /* Show carousel controls on mobile */
    .process-carousel-controls {
        display: flex;
    }

    /* End: Process Section - Mobile styles */

    /* Testimonials Section - Mobile styles */
    .testimonials-inner,
    .testimonials-carousel-container {
        padding-inline: 1.6rem;
    }

    /* End: Testimonials Section - Mobile styles */

    /* FAQ Section - Mobile styles */
    .faq-inner {
        padding-inline: 1.6rem;
    }

    .faq-section--side .faq-cards-container {
        margin-bottom: 40px;
    }

    .faq-section--side .faq-button-placeholder[data-variant="side"] {
        display: none !important;
    }

    .faq-section--side .faq-button-placeholder[data-variant="stacked"] {
        display: block !important;
        text-align: center;
        margin-top: 40px;
        width: 100%;
    }

    .faq-button-placeholder[data-variant="stacked"] {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* End: FAQ Section - Mobile styles */
    
    /* Button styles - Mobile styles */
    .btn-yellow:link,
    .btn-yellow:visited {
        max-width: 250px;
        min-width: 250px;
        padding: 0;
    }
    
    /** Blog Section - Mobile styles **/
    .blogSection-inner {
        padding-inline: 1.6rem;
    }
    
    .blog-section-heading {
        font-size: 30px;
    }
}

@media (max-width: 480px) {

    /* Hero Section - Mobile styles */
    .hero-promo-postcode-finder {
        width: 100%;
        height: fit-content;
        padding: 30px 26px;
    }

    .hero-promo-heading {
        font-size: 20px;
        margin-bottom: 18px;
    }

    .tile-pricing {
        width: 185px;
        height: auto;
    }

    /** End Hero Section - Mobile styles **/

    /** Electroshield banner Section - Mobile styles **/
    .electroshield-banner-container {
        background: url('/media/vopbnkum/electroshield_hero_mobile-2.jpg');
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        min-height: 520px;
        padding: 50px 30px 30px;
    }

            
    .electroshield-inner {
        padding-inline: 1.6rem;
    }

    .electroshield-banner-container .box {
        width: 100%;
        text-align: center;
        font-size: 13px;
    }

    .electroshield-logo {
        width: min(100%, 280px);
        height: auto;
        display: block;
    }

    .electroshield-copy {
        text-align: center
    }

    /** End Electroshield banner Section - Mobile styles **/
}

@media (max-width: 376px) {

    /** Comparison Table Section - Mobile styles **/
    .comparison-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /** End Comparison Table Section - Mobile styles **/
}


@media (min-width: 1200px) {
    .tile-types-header--split {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tile-types-header--split .tile-types-heading,
    .tile-types-header--split .tile-types-sub {
        max-width: none;
        min-width: 0;
    }
}


@media (max-width: 1199px) {
    .tile-types-heading {
        font-size: 29px;
    }

    .tile-types-sub {
        max-width: 320px;
        font-size: 16px;
    }

    .tile-type-card {
        width: 240px;
        height: 300px;
    }

    .tile-type-card__label {
        padding: 21px 24px;
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .tile-types-section {
        padding: 34px 0 38px;
    }

    .tile-types-shell {
        padding: 0;
    }

    .tile-types-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 20px;
    }

    .tile-types-heading {
        max-width: none;
        font-size: 30px;
        text-align: left;
    }


    .tile-types-rail {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        margin: 0 -16px 18px;
        padding: 0 16px 8px;
        scroll-snap-type: x proximity;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .tile-types-rail::-webkit-scrollbar {
        display: none;
    }

    .tile-type-card {
        flex: 0 0 285px;
        width: 285px;
        height: 300px;
        scroll-snap-align: start;
    }

    .tile-type-card__label {
        min-height: 0;
        padding: 18px 20px;
        font-size: 18px;
    }

    .tile-type-card__body {
        padding: 16px 18px 20px;
    }

    .tile-type-card__description {
        font-size: 14px;
        line-height: 1.5;
    }
}