:root {
    --navy: #102a43;
    --sand: #f3ebdd;
    --emerald: #1e7a62;
    --white: #fafaf7;
    --ink: #17202a;
    --muted: #607080;
    --border: rgba(16,42,67,.12);
    --shadow: 0 18px 50px rgba(16,42,67,.1);
    --radius: 24px --navy: #061b2c;
    --green: #0a9b5b;
    --green-dark: #067747;
    --green-soft: #eaf8f1;
    --cream: #f7f2e9;
    --off-white: #fafaf8;
    --text-dark: #0d1b2a;
    --border: #dfe5e3
}


* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    overflow-x: clip;
    max-width: 100%
}

body {
    font-family: Inter,system-ui,sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.7;
    overflow-x: clip;
    max-width: 100%
}

h1, h2, h3, h4, .navbar-brand {
    font-family: "Plus Jakarta Sans",sans-serif;
    color: var(--navy);
    font-weight: 700;
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(2.7rem,6vw,5.4rem);
    line-height: 1.02
}

h2 {
    font-size: clamp(2rem,4vw,3.55rem);
    line-height: 1.12
}

h3 {
    line-height: 1.25
}

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

img {
    max-width: 100%
}

.section {
    padding: 96px 0
}

.section-sm {
    padding: 62px 0
}

.eyebrow {
    color: var(--emerald);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .76rem
}

.lead-copy {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 680px
}

.bg-sand {
    background: var(--sand)
}

.bg-navy {
    background: var(--navy);
    color: #fff
}

    .bg-navy h2, .bg-navy h3, .bg-navy .eyebrow {
        color: #fff
    }

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


* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    overflow-x: clip;
    max-width: 100%
}

body {
    font-family: Inter,system-ui,sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.7;
    overflow-x: clip;
    max-width: 100%
}

h1, h2, h3, h4, .navbar-brand {
    font-family: "Plus Jakarta Sans",sans-serif;
    color: var(--navy);
    font-weight: 700;
    letter-spacing: -.035em
}




h3 {
    line-height: 1.25
}

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

img {
    max-width: 100%
}

.section {
    padding: 96px 0
}

.section-sm {
    padding: 62px 0
}

.eyebrow {
    color: var(--emerald);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .76rem
}

.lead-copy {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 680px
}

.bg-sand {
    background: var(--sand)
}

.bg-navy {
    background: var(--navy);
    color: #fff
}

    .bg-navy h2, .bg-navy h3, .bg-navy .eyebrow {
        color: #fff
    }

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

.navbar {
    padding:0;
    transition: .25s;
    background: transparent;
    box-shadow: 0 8px 25px rgba(6, 27, 53, .16);
    backdrop-filter: blur(14px)
}

    .navbar.scrolled {
        padding: 10px 0;
        box-shadow: 0 8px 30px rgba(16,42,67,.08)
    }

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--emerald);
    color: #fff;
    margin-right: 9px;
    font-size: 1rem
}

.navbar-brand {
    font-size: 1.4rem
}

.nav-link {
    font-weight: 650;
    color: var(--navy) !important;
    margin: 0 .22rem
}

    .nav-link:hover, .nav-link.active {
        color: var(--emerald) !important
    }

.btn {
    border-radius: 999px;
    padding: .8rem 1.3rem;
    font-weight: 750;
    border-width: 2px;
    transition: .2s
}

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

    .btn-primary:hover {
        background: #17664f;
        border-color: #17664f;
        transform: translateY(-2px)
    }

.btn-outline-primary {
    border-color: var(--navy);
    color: var(--navy)
}

    .btn-outline-primary:hover {
        background: var(--navy);
        border-color: var(--navy)
    }

.hero {
    padding: 160px 0 90px;
    overflow: hidden;
    position: relative
}

    .hero:after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: rgba(243,235,221,.8);
        right: -150px;
        top: 70px;
        z-index: -1
    }

.hero-media {
    min-height: 590px;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative
}

    .hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute
    }

.floating-note {
    position: absolute;
    left: -35px;
    bottom: 35px;
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: var(--shadow);
    max-width: 240px
}

.trust-strip {
    border-block: 1px solid var(--border)
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: var(--navy)
}

.icon-box {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(30,122,98,.1);
    color: var(--emerald);
    font-size: 1.2rem;
    flex: none
}

.card-premium {
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: 0 10px 35px rgba(16,42,67,.055);
    transition: .25s
}

    .card-premium:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow)
    }

.step-num {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--emerald)
}

.audience-card {
    min-height: 370px;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center
}

    .audience-card:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent,rgba(16,42,67,.94))
    }

    .audience-card > * {
        position: relative
    }

    .audience-card h3 {
        color: #fff
    }

.check-list {
    padding: 0;
    list-style: none
}

    .check-list li {
        margin-bottom: 13px;
        padding-left: 30px;
        position: relative
    }

        .check-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--emerald);
            font-weight: 900
        }

.image-banner {
    min-height: 570px;
    background: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1800&q=85') center/cover;
    border-radius: 32px;
    display: flex;
    align-items: flex-end;
    padding: 50px;
    position: relative;
    overflow: hidden
}

    .image-banner:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 20%,rgba(16,42,67,.9))
    }

    .image-banner .content {
        position: relative;
        color: #fff;
        max-width: 650px
    }

    .image-banner h2 {
        color: #fff
    }

.price-card {
    background: #fff;
    border-radius: 30px;
    padding: 45px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}

.form-shell {
    background: #fff;
    border-radius: 30px;
    padding: clamp(25px,5vw,55px);
    box-shadow: var(--shadow)
}

.form-control, .form-select {
    border: 1px solid #ccd4da;
    border-radius: 12px;
    padding: .82rem 1rem;
    color: #0d1b2a;
    background-color: #fff;
    font-size: 16px
}

    .form-control:focus, .form-select:focus {
        border-color: var(--emerald);
        box-shadow: 0 0 0 .22rem rgba(30,122,98,.13)
    }

.form-label {
    font-weight: 700;
    color: var(--navy)
}

.accordion-item {
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 14px
}

.accordion-button {
    font-weight: 750;
    color: var(--navy);
    padding: 1.25rem
}

    .accordion-button:not(.collapsed) {
        background: rgba(30,122,98,.07);
        color: var(--emerald);
        box-shadow: none
    }

.page-hero {
    padding: 155px 0 82px;
    background: linear-gradient(135deg,var(--sand),var(--white))
}

.photo-card {
    border-radius: 28px;
    min-height: 480px;
    width: 100%;
    object-fit: cover;
    box-shadow: var(--shadow)
}

.footer {
    background: #0b2033;
    color: #ced8e0;
    padding: 75px 0 25px
}

    .footer h3, .footer h4, .footer .navbar-brand {
        color: #fff
    }

    .footer a:hover {
        color: #fff
    }

.footer-links {
    list-style: none;
    padding: 0
}

    .footer-links li {
        margin-bottom: 9px
    }

.social-link {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    margin-right: 8px
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: .65s ease
}

    .reveal.visible {
        opacity: 1;
        transform: none
    }

.skip-link {
    position: absolute;
    top: -50px;
    left: 10px;
    background: #fff;
    padding: 10px;
    z-index: 9999
}

    .skip-link:focus {
        top: 10px
    }

@media(max-width:991px) {
    .navbar-collapse {
        background: #fff;
        padding: 20px;
        border-radius: 18px;
        box-shadow: var(--shadow);
        margin-top: 12px
    }

    .hero {
        padding-top: 130px
    }

    .hero-media {
        min-height: 450px;
        margin-top: 35px
    }

    .floating-note {
        left: 20px
    }

    .section {
        padding: 74px 0
    }

    .page-hero {
        padding: 130px 0 68px
    }
}

@media(max-width:575px) {
    h1 {
        font-size: 2.6rem
    }

    .hero-media {
        min-height: 380px
    }

    .image-banner {
        min-height: 500px;
        padding: 28px
    }

    .btn {
        width: 100%
    }

    .hero .btn + .btn {
        margin-top: 10px
    }

    .floating-note {
        display: none
    }

    .section {
        padding: 58px 0
    }

    .trust-item {
        margin-bottom: 20px
    }
}

/* Reference-matched StayPilot homepage */
.home-page {
    --navy: #061b35;
    --navy-light: #102a43;
    --green: #087653;
    --green-dark: #045b40;
    --cream: #f7f2e9;
    --off-white: #fafaf8;
    --text-dark: #0d1b2a;
    --text-muted: #556270;
    --border: #dfe5e3;
    background: #fff;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden
}

/*.container {
    width: min(1440px,calc(100% - 64px));
    margin-inline: auto
}*/

.sp-header {
    height: 70px;
    background: #061b2c !important;
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    max-width: 100%;
    overflow: visible
}

    .sp-header .navbar {
        height: 70px;
        padding: 0;
        background: #061b2c !important;
        backdrop-filter: none;
        width: 100%;
        max-width: 100%;
        box-shadow: none
    }

    .sp-header .navbar.fixed-top {
        background: #061b2c !important;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%
    }

.sp-logo {
    display: flex;
    align-items: center;
    color: #fff !important;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0
}

    .sp-logo:hover {
        color: #fff !important
    }

    .sp-logo > i {
        font-size: 33px;
        margin-right: 9px;
        color: #f7f2e9
    }

    .sp-logo .sp-logo-mark {
        width: 40px;
        height: 40px;
        margin-right: 9px;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        object-fit: contain;
        flex-shrink: 0;
        display: block;
        background: transparent !important;
        padding: 0;
        mix-blend-mode: normal
    }

    .sp-logo b {
        font: 700 28px/1 "Plus Jakarta Sans";
        color: #fff
    }

        .sp-logo b span {
            color: #58ad75
        }

    .sp-logo small {
        display: block;
        font-size: 11px;
        letter-spacing: .01em;
        margin-top: 5px;
        color: #fff
    }

.sp-header .nav-link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    padding: 25px 10px !important;
    margin: 0;
    white-space: nowrap
}

    .sp-header .nav-link:hover, .sp-header .nav-link.active {
        color: #76c393 !important
    }

.sp-header .navbar-toggler {
    border: 1px solid rgba(255,255,255,.35);
    padding: .4rem .55rem
}

.sp-header .navbar-toggler:focus {
    box-shadow: 0 0 0 .15rem rgba(88,173,117,.35)
}

.sp-header .navbar-toggler-icon {
    filter: invert(1) grayscale(100%) brightness(200%)
}

.sp-btn {
    border-radius: 7px;
    padding: 10px 22px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent
}

.sp-btn-green {
    background: var(--green);
    border-color: var(--green);
    color: #fff
}

    .sp-btn-green:hover {
        background: var(--green-dark);
        border-color: var(--green-dark);
        color: #fff
    }

.sp-header .sp-btn {
    padding: 10px 22px
}

.sp-hero {
    height: 510px;
    display: block;
    position: relative;
    max-width: 100%;
    width: 100%;
    overflow: hidden
}

.sp-hero-copy {
    padding: 62px 30px 42px max(5vw,calc((100% - 1440px)/2));
    position: relative;
    z-index: 2;
    background: transparent;
    min-width: 0;
    max-width: 100%
}

    .sp-hero-copy:after {
        display: none
    }

.sp-kicker {
    text-transform: uppercase;
    color: var(--green);
    font-size: 11px;
    letter-spacing: .035em;
    font-weight: 700;
    margin: 0 0 14px
}

.sp-hero h1 {
    font-size: 47px;
    line-height: 1.1;
    letter-spacing: -.04em;
    margin: 0;
    color: var(--navy);
    white-space: normal;
    overflow-wrap: break-word
}

    .sp-hero h1 span {
        color: var(--green)
    }

.sp-hero-lead {
    max-width: 500px;
    color: #4f5964;
    font-size: 15px;
    line-height: 1.65;
    margin: 22px 0 25px
}

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

    .sp-actions .sp-btn {
        height: 51px;
        display: inline-flex;
        align-items: center;
        gap: 18px;
        padding: 0 25px;
        font-size: 13px
    }

.sp-btn-outline {
    background: #fff;
    border-color: var(--navy);
    color: var(--navy)
}

    .sp-btn-outline:hover {
        background: var(--navy);
        color: #fff
    }

.sp-hero-image {
    position: relative;
    overflow: hidden
}

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

.sp-results-card {
    position: absolute;
    width: 280px;
    right: 7%;
    bottom: 38px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 20px;
    box-shadow: 0 10px 30px rgba(6,27,53,.24)
}

    .sp-results-card > div {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border)
    }

        .sp-results-card > div:last-child {
            border: 0
        }

    .sp-results-card i {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--green);
        color: #fff;
        font-size: 20px;
        flex: none
    }

    .sp-results-card p {
        margin: 0
    }

    .sp-results-card strong, .sp-results-card small {
        display: block
    }

    .sp-results-card strong {
        font-size: 12px;
        color: var(--navy)
    }

    .sp-results-card small {
        font-size: 10px;
        color: var(--text-muted);
        margin-top: 4px
    }

.sp-trust {
    background: linear-gradient(90deg,#fbf7ef,#fff,#fbf7ef);
    padding: 24px 0
}

.sp-trust-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr)
}

.sp-trust article {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-right: 1px solid #d8ddd9;
    min-height: 62px;
    padding: 8px 20px;
    box-sizing: border-box
}

    .sp-trust article:last-child {
        border: 0
    }

.sp-trust i {
    font-size: 35px;
    color: var(--navy);
    flex-shrink: 0;
    margin-left: 2px
}

.sp-trust p {
    margin: 0
}

.sp-trust strong, .sp-trust span {
    display: block
}

.sp-trust strong {
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 4px
}

.sp-trust span {
    font-size: 14px;
    line-height: 1.4
}

.sp-section {
    padding: 27px 0
}

.sp-section-head {
    text-align: center;
    margin-bottom: 18px
}

    .sp-section-head .sp-kicker {
        margin-bottom: 6px
    }

    .sp-section-head h2, .sp-estimate h2, .sp-faq h2 {
        font-size: 25px;
        letter-spacing: -.03em;
        margin-bottom: 5px
    }

    .sp-section-head p:last-child {
        font-size: 12px;
        line-height: 1.5;
        margin: 0
    }

.sp-service-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 10px;
    justify-content: center;
    width: 100%;
    max-width: 100%
}

    .sp-service-grid article {
        min-width: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        text-align: center;
        padding: 19px 10px 14px;
        min-height: 180px;
        transition: .2s;
        background: #fff
    }

        .sp-service-grid article:hover {
            transform: translateY(-4px);
            box-shadow: 0 9px 22px rgba(6,27,53,.08)
        }

    .sp-service-grid i {
        font-size: 31px;
        color: var(--green)
    }

    .sp-service-grid h3 {
        font-size: 16px;
        line-height: 1.35;
        margin: 9px 0 9px;
        color: var(--navy)
    }

    .sp-service-grid p {
        font-size: 14px;
        line-height: 1.55;
        margin: 0
    }

.sp-management {
    padding-top: 3px
}

.sp-management-grid {
    display: grid;
    grid-template-columns: 26% 36% 38%;
    min-height: 405px;
    align-items: stretch
}

.sp-steps {
    padding: 18px 28px 5px 0
}

    .sp-steps h2 {
        font-size: 24px;
        margin-bottom: 24px
    }

    .sp-steps ol {
        list-style: none;
        padding: 0;
        margin: 0
    }

    .sp-steps li {
        display: flex;
        gap: 16px;
        position: relative;
        padding-bottom: 20px
    }

        .sp-steps li:not(:last-child):after {
            content: "";
            position: absolute;
            width: 1px;
            background: #a4c8bc;
            left: 16px;
            top: 32px;
            bottom: 0
        }

        .sp-steps li > b {
            width: 33px;
            height: 33px;
            border-radius: 50%;
            background: var(--green);
            color: #fff;
            display: grid;
            place-items: center;
            flex: none;
            font-size: 14px;
            z-index: 1
        }

    .sp-steps strong, .sp-steps span {
        display: block
    }

    .sp-steps strong {
        font-size: 15px;
        margin-bottom: 3px
    }

    .sp-steps span {
        font-size: 14px;
        line-height: 1.5;
        max-width: 250px
    }

.sp-living img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sp-audience {
    background: var(--navy);
    color: #fff;
    border-radius: 9px;
    padding: 25px 32px
}

    .sp-audience h2 {
        color: #fff;
        font-size: 22px;
        border-bottom: 1px solid rgba(255,255,255,.25);
        padding-bottom: 15px;
        margin-bottom: 8px
    }

    .sp-audience article {
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 8px 0
    }

        .sp-audience article i {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--cream);
            color: var(--green);
            display: grid;
            place-items: center;
            font-size: 22px;
            flex: none
        }

    .sp-audience p {
        margin: 0
    }

    .sp-audience strong, .sp-audience span {
        display: block
    }

    .sp-audience strong {
        font-size: 13px
    }

    .sp-audience span {
        font-size: 10px;
        line-height: 1.4;
        margin-top: 2px
    }

.sp-benefits {
    margin-top: 15px;
    background: linear-gradient(90deg,#fcf9f2,#fff,#fcf9f2);
    border-radius: 8px;
    min-height: 77px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    align-items: center;
    padding: 8px 18px;
    width: 100%;
    max-width: 100%
}

    .sp-benefits span {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 9px;
        line-height: 1.35
    }

    .sp-benefits i {
        color: var(--green);
        font-size: 22px
    }

.sp-estimate {
    padding-top: 0
}

.sp-estimate-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 42px;
    align-items: center
}

    .sp-estimate-grid > img {
        width: 100%;
        height: 245px;
        object-fit: cover;
        border-radius: 8px
    }

.sp-estimate h2 {
    margin: 0
}

.sp-estimate p {
    font-size: 10px;
    margin: 4px 0 10px
}

.sp-form-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

    .sp-form-grid label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0)
    }

    .sp-form-grid input, .sp-form-grid select, .sp-form-grid textarea {
        width: 100%;
        height: 34px;
        border: 1px solid var(--border);
        border-radius: 5px;
        background: #fff;
        padding: 7px 11px;
        font: 10px Inter;
        color: var(--text-dark)
    }

    .sp-form-grid textarea {
        height: 76px;
        resize: none
    }

.sp-form-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 9px;
    align-items: center
}

.sp-consent {
    font-size: 8px
}

    .sp-consent input {
        margin-right: 5px
    }

.sp-form-bottom .sp-btn {
    grid-column: 2;
    height: 34px;
    padding: 5px 16px
}

.form-status {
    font-size: 10px
}

.sp-faq {
    padding: 0 0 14px
}

    .sp-faq header {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .sp-faq header a {
            font-size: 10px;
            color: var(--green)
        }

.sp-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.sp-faq .accordion-item {
    border-radius: 6px !important;
    margin: 0;
    border-color: var(--border) !important
}

    .sp-faq .accordion-item + .accordion-item {
        border-top: 0 !important
    }

.sp-faq .accordion-button {
    min-height: 52px;
    padding: 14px 18px;
    font-size: 15px
}

    .sp-faq .accordion-button:after {
        width: 12px;
        height: 12px;
        background-size: 12px
    }

.sp-faq .accordion-body {
    font-size: 15px;
    line-height: 1.7;
    padding: 2px 18px 16px
}

.sp-faq h3 {
    margin: 0
}

.sp-cta-wrap {
    padding: 0
}

.sp-cta {
    min-height: 75px;
    background: linear-gradient(100deg,#075a47,#046a4e);
    border-radius: 9px;
    color: #fff;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    padding: 12px 38px 12px 80px
}

    .sp-cta > i {
        font-size: 42px
    }

    .sp-cta h2 {
        color: #fff;
        font-size: 20px;
        margin: 0
    }

    .sp-cta p {
        font-size: 15px;
        margin: 3px 0 0
    }

    .sp-cta .btn {
        background: var(--cream);
        border-radius: 7px;
        font-size: 14px;
        font-weight: 700;
        padding: 11px 25px;
        color: var(--navy)
    }

        .sp-cta .btn i {
            margin-left: 22px
        }

.sp-footer {
    background: #061b2c !important;
    color: #fff;
    padding: 40px 0 18px
}

.sp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 28px 40px;
    align-items: start
}

    .sp-footer-grid > div {
        padding: 0;
        border-right: 0
    }

        .sp-footer-grid > div:first-child {
            padding-left: 0
        }

        .sp-footer-grid > div:last-child {
            border: 0
        }

.sp-footer .sp-logo b {
    font-size: 22px
}

.sp-footer .sp-logo > i,
.sp-footer .sp-logo .sp-logo-mark {
    width: 32px;
    height: 32px;
    font-size: 28px
}

.sp-footer .sp-logo small {
    font-size: 11px
}

.sp-footer p, .sp-footer li, .sp-footer a {
    font-size: 14px;
    color: rgba(255,255,255,.82)
}

.sp-footer a:hover {
    color: #76c393
}

.sp-footer p {
    max-width: 340px;
    line-height: 1.6;
    margin: 14px 0 0
}

.sp-footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color .2s ease
}

.sp-footer-phone i {
    font-size: 14px;
    color: #76c393
}

.sp-footer-phone:hover {
    color: #76c393
}

.sp-footer h3 {
    font-size: 13px;
    color: #fff;
    letter-spacing: .02em;
    margin: 0 0 14px;
    font-weight: 700
}

.sp-footer ul {
    list-style: none;
    padding: 0;
    columns: 1;
    margin: 0;
    display: grid;
    gap: 8px
}

.sp-footer li {
    margin-bottom: 0;
    break-inside: avoid
}

.sp-footer-grid > div:nth-child(2) ul,
.sp-footer-grid > div:nth-child(3) ul {
    columns: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px
}

.sp-social {
    display: none
}

.sp-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.18);
    margin-top: 28px;
    padding: 14px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 11px;
    color: rgba(255,255,255,.7)
}

    .sp-footer-bottom a {
        display: none
    }

@media(max-width:1199px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box
    }

    .sp-header .navbar-collapse {
        background: #061b2c !important;
        margin: 0;
        padding: 15px 25px;
        border-radius: 0;
        box-shadow: 0 12px 20px rgba(0,0,0,.2)
    }

    .sp-header .nav-link {
        padding: 9px !important
    }

    .sp-header .sp-btn {
        margin-top: 10px
    }

    .sp-hero {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important
    }

    .sp-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 35px
    }

    .sp-hero h1 {
        font-size: 38px
    }

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

    .sp-management-grid {
        grid-template-columns: 1fr 1.25fr
    }

    .sp-audience {
        grid-column: 1/-1
    }

    .sp-benefits {
        grid-template-columns: repeat(4,1fr);
        gap: 15px
    }

    .sp-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px
    }

        .sp-footer-grid > div {
            border: 0
        }

        .sp-footer-brand {
            grid-column: 1 / -1
        }
}

@media(max-width:767px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box
    }

    .sp-header, .sp-header .navbar {
        height: 64px;
        width: 100% !important;
        max-width: 100% !important
    }

    .sp-logo b {
        font-size: 23px
    }

    .sp-hero {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0
    }

    .sp-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 45px 22px !important;
        box-sizing: border-box
    }

        .sp-hero-copy:after {
            display: none
        }

    .sp-hero h1 {
        font-size: clamp(34px,10vw,46px);
        white-space: normal
    }

    .sp-actions {
        display: grid
    }

    .sp-hero-image {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        overflow: hidden;
        background: var(--navy);
        padding-bottom: 0
    }

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

    .sp-results-card {
        position: relative;
        width: calc(100% - 28px);
        right: auto;
        bottom: auto;
        margin: -45px auto 0
    }

    .sp-trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .sp-trust article {
        border: 0;
        justify-content: flex-start
    }

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

    .sp-management-grid {
        display: block
    }

    .sp-steps {
        padding-right: 0
    }

    .sp-living img {
        height: 360px
    }

    .sp-audience {
        margin-top: 14px
    }

    .sp-benefits {
        grid-template-columns: 1fr 1fr
    }

    .sp-estimate-grid {
        display: block
    }

        .sp-estimate-grid > img {
            margin-bottom: 24px
        }

    .sp-form-grid {
        grid-template-columns: 1fr
    }

        .sp-form-grid textarea {
            height: 60px
        }

    .sp-form-bottom {
        display: block
    }

    .sp-consent {
        display: block;
        margin: 10px 0
    }

    .sp-form-bottom .sp-btn {
        width: 100%
    }

    .sp-faq-grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .sp-cta {
        grid-template-columns: 60px 1fr;
        padding: 20px
    }

        .sp-cta .btn {
            grid-column: 1/-1;
            margin-top: 15px;
            width: 100%
        }

    .sp-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px
    }

        .sp-footer-grid > div {
            padding: 0;
            border: 0
        }

    .sp-footer-grid > div:nth-child(2) ul,
    .sp-footer-grid > div:nth-child(3) ul {
        grid-template-columns: 1fr 1fr
    }

    .sp-footer-bottom {
        display: block;
        margin-top: 22px;
        padding-top: 12px
    }

        .sp-footer-bottom span {
            display: block;
            margin-bottom: 0
        }

        .sp-footer-bottom a {
            display: none
        }
}

@media(max-width:480px) {
    .sp-trust-grid, .sp-benefits {
        grid-template-columns: 1fr
    }

    .sp-service-grid {
        grid-template-columns: 1fr
    }

    .sp-hero-copy {
        padding-inline: 14px
    }

    .sp-hero h1 {
        font-size: 35px
    }

    .sp-hero-lead {
        font-size: 13px
    }

    .sp-results-card {
        width: calc(100% - 20px)
    }

    .sp-audience {
        padding: 24px 18px
    }

    .sp-section-head h2, .sp-estimate h2, .sp-faq h2 {
        font-size: 22px
    }
}

/* Internal pages aligned to the homepage visual system */
.inner-page {
    --navy: #061b35;
    --navy-light: #102a43;
    --green: #087653;
    --green-dark: #045b40;
    --cream: #f7f2e9;
    --off-white: #fafaf8;
    --text-dark: #0d1b2a;
    --text-muted: #556270;
    --border: #dfe5e3;
    background: #fff;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.65
}

.inner-container {
    width: min(1440px, calc(100% - 64px));
    max-width: min(1440px, calc(100% - 64px));
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box
}

.inner-page h1, .inner-page h2, .inner-page h3, .inner-page h4 {
    color: var(--navy);
    font-family: "Plus Jakarta Sans",sans-serif
}

.inner-page .inner-nav {
    height: 70px;
    padding: 0;
    background: var(--navy);
    backdrop-filter: none
}

.inner-nav.scrolled {
/*    background: rgba(6,27,53,.98);*/
    box-shadow: 0 8px 25px rgba(6,27,53,.16)
}

.inner-nav .nav-link {
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    padding: 25px 14px !important;
    margin: 0
}

    .inner-nav .nav-link:hover, .inner-nav .nav-link.active {
        color: #76c393 !important
    }

.inner-nav .sp-btn {
    padding: 10px 20px
}

.inner-page .page-hero {
    padding: 145px 0 78px;
    background: linear-gradient(110deg,var(--cream),#fff 72%);
    border-bottom: 1px solid var(--border)
}

    .inner-page .page-hero h1 {
        font-size: clamp(40px,5vw,68px);
        line-height: 1.08;
        letter-spacing: -.045em;
        max-width: 1040px
    }

    .inner-page .page-hero .lead-copy {
        font-size: 16px;
        line-height: 1.7;
        color: var(--text-muted);
        max-width: 760px
    }

.inner-page .eyebrow {
    color: var(--green);
    font-size: 11px;
    letter-spacing: .05em
}

.inner-page .section {
    padding: 78px 0
}

    .inner-page .section h2:not(.h3) {
        font-size: clamp(30px,3.5vw,48px);
        line-height: 1.15
    }

.inner-page .bg-sand {
    background: var(--cream)
}

.inner-page .bg-navy {
    background: var(--navy)
}

.inner-page .card-premium {
    border-radius: 10px;
    border-color: var(--border);
    padding: 30px;
    box-shadow: 0 8px 25px rgba(6,27,53,.06)
}

    .inner-page .card-premium:hover {
        transform: translateY(-4px);
        box-shadow: 0 13px 32px rgba(6,27,53,.1)
    }

    .inner-page .card-premium .h3, .inner-page .card-premium h3 {
        font-size: 21px
    }

.inner-page .step-num {
    color: var(--green);
    font-size: 11px
}

.inner-page .check-list li:before {
    color: var(--green)
}

.inner-page .photo-card {
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(6,27,53,.12)
}

.inner-page .btn {
    border-radius: 7px;
    font-size: 12px;
    padding: 10px 21px
}

.inner-page .btn-primary {
    background: var(--green);
    border-color: var(--green)
}

    .inner-page .btn-primary:hover {
        background: var(--green-dark);
        border-color: var(--green-dark)
    }

.inner-page .btn-outline-primary {
    border-color: var(--navy);
    color: var(--navy)
}

.inner-page .form-shell {
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(6,27,53,.07)
}

.inner-page .form-control, .inner-page .form-select {
    border-radius: 6px;
    font-size: 13px
}

.inner-page .accordion-item {
    border-radius: 7px !important
}

.inner-page .inner-footer {
    padding-top: 32px
}

    .inner-page .inner-footer h3 {
        color: #fff
    }

    .inner-page .inner-footer .inner-container {
        width: min(1440px,calc(100% - 64px));
        margin-inline: auto
    }

@media(max-width:1199px) {
    .inner-container, .inner-page .inner-footer .inner-container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box
    }

    .inner-nav .navbar-collapse {
        background: var(--navy);
        margin: 0 -20px;
        padding: 15px 25px;
        border-radius: 0;
        box-shadow: 0 12px 20px rgba(0,0,0,.2)
    }

    .inner-nav .nav-link {
        padding: 9px !important
    }

    .inner-nav .sp-btn {
        margin-top: 10px
    }
}

@media(max-width:767px) {
    .inner-container, .inner-page .inner-footer .inner-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box
    }

    .inner-page .inner-nav {
        height: 64px
    }

    .inner-page .page-hero {
        padding: 115px 0 58px
    }

        .inner-page .page-hero h1 {
            font-size: 38px
        }

    .inner-page .section {
        padding: 58px 0
    }

    .inner-page .card-premium {
        padding: 24px
    }
}

.sp-disclaimer {
    max-width: none !important;
    border-top: 1px solid rgba(255,255,255,.18);
    margin: 14px 10px 0 !important;
    padding: 10px 0 0;
    color: #d4dfdf;
    font-size: 13px !important;
    line-height: 1.5
}

.sp-cta-actions {
    display: flex;
    gap: 8px
}

    .sp-cta-actions .btn {
        white-space: nowrap
    }

    .sp-cta-actions .sp-btn-outline {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,.65)
    }

/* Lead-generation additions: compact, responsive, and aligned to the existing homepage. */
.sp-reassurance {
    font-size: 10px;
    color: #53606b;
    margin: 12px 0 0
}

    .sp-reassurance i {
        color: var(--green);
        margin-right: 5px
    }

.estimate-step h3 {
    font-size: 16px;
    margin: 2px 0 9px
}

.estimate-step-label {
    color: var(--green);
    font-size: 10px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 !important
}

.estimate-step[hidden] {
    display: none
}

.estimate-fields {
    margin-bottom: 9px
}

.form-message {
    grid-column: span 2
}

.estimate-controls {
    grid-template-columns: 1fr 1fr !important
}

    .estimate-controls .sp-btn {
        grid-column: auto !important;
        justify-self: start
    }

.sp-agent-card {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    gap: 13px;
    align-items: center;
    border-top: 1px solid var(--border);
    margin-top: 14px;
    padding-top: 14px
}

.agent-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--green);
    font-size: 21px
}

.sp-agent-card .sp-kicker {
    margin-bottom: 2px
}

.sp-agent-card h3 {
    font-size: 14px;
    margin: 0
}

.sp-agent-card p:not(.sp-kicker) {
    font-size: 10px;
    margin: 4px 0
}

.sp-agent-card strong, .sp-agent-card span {
    display: block;
    font-size: 9px
}

.sp-agent-card span {
    color: var(--text-muted)
}

.agent-actions {
    display: flex;
    gap: 7px;
    flex-direction: column
}

    .agent-actions .sp-btn {
        padding: 8px 12px;
        white-space: nowrap
    }

.sp-next-steps {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--border)
}

    .sp-next-steps h3 {
        font-size: 14px;
        margin: 0 0 8px
    }

    .sp-next-steps > div {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 9px
    }

    .sp-next-steps article {
        display: flex;
        gap: 7px
    }

    .sp-next-steps b {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--green);
        color: #fff;
        font-size: 9px;
        flex: none
    }

    .sp-next-steps p {
        margin: 0 !important
    }

    .sp-next-steps strong, .sp-next-steps span {
        display: block;
        font-size: 9px;
        line-height: 1.35
    }

    .sp-next-steps span {
        color: var(--text-muted)
    }

.sp-mobile-contact {
    display: none
}

.sp-listing-review {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    padding: 18px
}

    .sp-listing-review h2 {
        font-size: 17px;
        line-height: 1.2;
        margin: 4px 0 9px
    }

    .sp-listing-review p:not(.sp-kicker) {
        font-size: 10px;
        line-height: 1.45;
        margin-bottom: 12px
    }

    .sp-listing-review .btn {
        display: block;
        text-align: center;
        margin-top: 8px;
        padding: 8px 10px
    }

    .sp-listing-review .sp-kicker {
        margin: 0;
        color: var(--green)
    }

@media(max-width:767px) {
    .sp-reassurance {
        font-size: 9px
    }

    .form-message {
        grid-column: auto
    }

    .sp-agent-card {
        grid-template-columns: 42px 1fr
    }

    .agent-actions {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .agent-actions .sp-btn {
            text-align: center
        }

    .sp-next-steps > div {
        grid-template-columns: 1fr
    }

    .sp-mobile-contact {
        position: fixed;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1035;
        background: var(--navy);
        padding: 7px env(safe-area-inset-right,8px) calc(7px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,8px);
        box-shadow: 0 -6px 18px rgba(6,27,53,.18)
    }

        .sp-mobile-contact a {
            color: #fff;
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            padding: 11px 6px;
            background: var(--green);
            border-radius: 5px
        }

    .home-page {
        padding-bottom: 70px
    }

    .estimate-controls {
        display: flex !important;
        gap: 8px
    }

        .estimate-controls .sp-btn {
            width: auto !important;
            flex: 1
        }

    .sp-form-bottom.estimate-controls {
        margin-top: 8px
    }

    .sp-cta {
        grid-template-columns: 60px 1fr
    }

    .sp-cta-actions {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

        .sp-cta-actions .btn {
            width: 100%;
            font-size: 10px;
            padding: 10px 5px
        }
}

/* Approved conversion-section composition */
@media(min-width:992px) {
    .sp-estimate-grid {
        grid-template-columns: 280px minmax(0,1fr) 270px;
        gap: 22px;
        align-items: start
    }

        .sp-estimate-grid > div:last-child {
            display: contents
        }

            .sp-estimate-grid > div:last-child > h2, .sp-estimate-grid > div:last-child > p, .sp-estimate-grid > div:last-child > form {
                grid-column: 2
            }

        .sp-estimate-grid > .sp-listing-review {
            grid-column: 1;
            grid-row: 1/4
        }

        .sp-estimate-grid .sp-agent-card {
            grid-column: 3;
            grid-row: 1/4;
            margin: 0;
            padding: 22px 16px;
            border: 0;
            border-radius: 10px;
            background: var(--soft-green,#eef7f3);
            display: block
        }

    .sp-agent-card .agent-avatar {
        margin: 14px 0
    }

    .sp-agent-card .agent-actions {
        margin-top: 14px
    }

    .sp-estimate-grid .sp-next-steps {
        grid-column: 1/-1
    }

    .sp-listing-review {
        min-height: 285px
    }

    .sp-next-steps > div {
        grid-template-columns: repeat(3,1fr)
    }

    .sp-comparison {
        padding: 8px 0 18px
    }

    .comparison-grid {
        display: grid;
        grid-template-columns: 1.45fr .9fr;
        gap: 25px;
        align-items: stretch
    }

        .comparison-grid h2 {
            font-size: 18px;
            margin: 0 0 10px
        }

    .comparison-table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--border);
        border-radius: 9px;
        overflow: hidden;
        background: #fff
    }

        .comparison-table > div {
            padding: 13px 17px
        }

            .comparison-table > div + div {
                border-left: 1px solid var(--border)
            }

        .comparison-table h3 {
            font-size: 11px;
            text-align: center;
            margin: 0 0 8px;
            color: #d64545
        }

        .comparison-table > div + div h3 {
            color: var(--green)
        }

        .comparison-table ul {
            list-style: none;
            padding: 0;
            margin: 0
        }

        .comparison-table li {
            font-size: 10px;
            padding: 4px 0
        }

            .comparison-table li:before {
                content: '⊗';
                color: #d64545;
                margin-right: 8px
            }

        .comparison-table > div + div li:before {
            content: '✓';
            color: var(--green)
        }

    .comparison-grid aside {
        background: var(--cream);
        border-radius: 10px;
        padding: 25px;
        text-align: center
    }

        .comparison-grid aside h2 {
            font-size: 18px
        }

        .comparison-grid aside p {
            font-size: 10px
        }

        .comparison-grid aside .btn {
            display: block;
            margin-top: 8px;
            width: 100%
        }
}

@media(max-width:991px) {
    .sp-listing-review {
        margin-bottom: 22px
    }

        .sp-listing-review h2 {
            font-size: 23px
        }

    .sp-agent-card {
        margin-top: 20px
    }

    .comparison-grid {
        display: grid;
        gap: 18px
    }

    .comparison-table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--border);
        border-radius: 9px;
        overflow: hidden
    }

        .comparison-table > div {
            padding: 14px
        }

            .comparison-table > div + div {
                border-left: 1px solid var(--border)
            }

        .comparison-table ul {
            list-style: none;
            padding: 0
        }

        .comparison-table li {
            font-size: 11px;
            margin: 7px 0
        }

    .comparison-grid aside {
        margin-top: 18px;
        padding: 22px;
        border-radius: 10px;
        background: var(--cream)
    }

        .comparison-grid aside .btn {
            display: block;
            width: 100%;
            margin-top: 8px
        }
}

/* New approved hands-off owner experience direction. */
.home-page {
    --navy: #061b2c;
    --green: #0a9b5b;
    --green-dark: #067747;
    --green-soft: #eaf8f1
}

.sp-hero {
    min-height: 640px;
    height: auto;
    display: block;
    position: relative;
    background: var(--navy);
    overflow: hidden;
    width: 100%;
    max-width: 100%
}

.sp-hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden
}

    .sp-hero-image:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(3,19,31,.98) 0%,rgba(3,19,31,.83) 34%,rgba(3,19,31,.2) 64%,rgba(3,19,31,.02) 100%)
    }

.sp-hero-copy {
    position: relative;
    z-index: 2;
    width: min(640px, calc(100% - max(32px, calc((100% - 1440px) / 2)) - 340px));
    max-width: 100%;
    min-height: 640px;
    height: auto;
    margin-left: max(32px, calc((100% - 1440px) / 2));
    padding: 88px 0 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    color: #fff;
    min-width: 0;
    box-sizing: border-box
}

@media (max-width: 991px) {
    .sp-hero {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .sp-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        padding: 56px 24px 40px !important
    }

    .sp-hero-image {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 320px !important
    }

    .sp-results-card {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        margin: 16px auto;
        max-width: min(280px, calc(100% - 40px));
    }
}

    .sp-hero-copy:after {
        display: none
    }

.sp-hero h1 {
    color: #fff;
    font-size: clamp(34px, 3.2vw, 46px)
}

.sp-hero-lead {
    color: #fff;
    max-width: 480px
}

@media (min-width: 1400px) {
    .sp-hero .sp-actions {
        flex-wrap: nowrap
    }
}

.sp-reassurance {
    color: #e5f7ed
}

.sp-results-card {
    z-index: 3;
    right: max(32px, calc((100% - 1440px) / 2));
    bottom: 90px
}

.sp-trust {
    position: relative;
    z-index: 5;
    margin: -34px auto 0;
    width: min(1440px, calc(100% - 64px));
    max-width: min(1440px, calc(100% - 64px));
    border-radius: 18px;
    box-shadow: 0 13px 32px rgba(6,27,53,.12);
    padding: 18px 0;
    background: #fff;
    box-sizing: border-box
}

    .sp-trust + .sp-section {
        padding-top: 48px
    }

.sl-experience {
    position: relative;
    background: linear-gradient(125deg,#061b2c,#062f2a);
    color: #fff;
    padding: 70px 0 95px
}

    .sl-experience h2 {
        color: #fff;
        font-size: 30px
    }

.sl-experience-grid {
    display: grid;
    grid-template-columns: 33% 67%;
    gap: 34px;
    align-items: center
}

.sl-process .sp-kicker {
    color: #35d28b
}

.sl-process ol {
    padding: 0;
    list-style: none
}

.sl-process li {
    display: flex;
    gap: 15px;
    margin: 24px 0;
    position: relative
}

    .sl-process li:not(:last-child):after {
        content: "";
        position: absolute;
        left: 17px;
        top: 36px;
        height: 35px;
        width: 1px;
        background: #31bd7e
    }

    .sl-process li > b {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        background: var(--green);
        border-radius: 50%;
        flex: none
    }

.sl-process p {
    margin: 0
}

.sl-process strong, .sl-process span {
    display: block
}

.sl-process strong {
    font-size: 16px
}

.sl-process span {
    font-size: 14px;
    opacity: .9;
    line-height: 1.5
}

.sl-dashboard {
    background: #fff;
    color: var(--navy);
    border-radius: 17px;
    padding: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,.25)
}

.dash-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px
}

    .dash-title span {
        padding: 7px 11px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 9px
    }

.dash-metrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 9px;
    margin: 15px 0
}

    .dash-metrics > div {
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 11px
    }

    .dash-metrics small, .dash-metrics em {
        display: block;
        font-size: 8px;
        color: var(--text-muted);
        font-style: normal
    }

    .dash-metrics b {
        display: block;
        font-size: 20px;
        margin: 7px 0;
        color: var(--green)
    }

.dash-bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px
}

.dash-chart, .dash-bookings {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px
}

    .dash-chart svg {
        width: 100%;
        height: 145px
    }

    .dash-bookings p {
        font-size: 9px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
        margin: 0
    }

    .dash-bookings i {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--cream)
    }

    .dash-bookings b {
        color: var(--green)
    }

.sl-metric-strip {
    position: absolute;
    bottom: -37px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1440px, calc(100% - 64px));
    max-width: min(1440px, calc(100% - 64px));
    display: grid;
    grid-template-columns: repeat(5,1fr);
    background: linear-gradient(145deg,#fffdf9,#f6f0e7);
    color: var(--navy);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    border-radius: 15px;
    padding: 17px 25px
}

    .sl-metric-strip span {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1.35
    }

    .sl-metric-strip i {
        font-size: 25px;
        color: var(--green)
    }

.sl-experience + .sp-section {
    padding-top: 85px
}

@media(max-width:991px) {
    .sp-hero-copy {
        width: 100%;
        max-width: 100%;
        padding-left: 28px;
        padding-right: 28px
    }

    .sl-experience-grid {
        grid-template-columns: 1fr
    }

    .sl-experience {
        padding-bottom: 40px;
        overflow: hidden
    }

    .sl-metric-strip,
    .sl-metric-strip.is-illustrative {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 24px 0 0;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px;
        box-sizing: border-box
    }

    .sl-experience + .sp-section {
        padding-top: 24px
    }

    .sp-estimate,
    .calculator-section {
        padding-top: 40px !important
    }
}

@media(max-width:767px) {
    .sp-hero {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important
    }

    .sp-hero-image {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 280px !important
    }

    .sp-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-left: 0 !important;
        padding: 45px 22px !important
    }

    .sp-hero h1 {
        font-size: 37px
    }

    .sp-trust {
        width: calc(100% - 28px);
        max-width: 100%;
        margin: -18px auto 0
    }

    .sl-experience {
        padding: 55px 0 32px;
        overflow: hidden
    }

    .sl-metric-strip,
    .sl-metric-strip.is-illustrative {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 0 !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 16px !important
    }

    .dash-metrics {
        grid-template-columns: 1fr 1fr
    }

    .dash-bottom {
        grid-template-columns: 1fr
    }

    .sl-experience + .sp-section {
        padding-top: 24px
    }

    .sp-estimate,
    .calculator-section {
        padding-top: 36px !important
    }

    .calculator-heading h2 {
        font-size: 24px;
        line-height: 1.2
    }

    .image-slider-control {
        grid-template-columns: 48px minmax(0,1fr) 48px;
        width: 100%;
        max-width: 100%
    }

    .sp-footer-grid {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .sp-footer-grid > div {
        padding: 0;
        border: 0
    }

    .sp-footer-brand {
        grid-column: auto
    }

    .sp-footer ul {
        columns: 1
    }

    .inner-container {
        width: calc(100% - 24px) !important;
        max-width: 100%;
        padding-inline: 0;
        box-sizing: border-box
    }

    .container {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px
    }

    .sp-mobile-contact {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box
    }
}

/* Keep the estimate area as compact as the approved conversion reference. */
@media(min-width:992px) {
    .sp-estimate {
        padding: 18px 0 10px
    }

    .sp-estimate-grid {
        grid-template-columns: 250px minmax(0,1fr) 245px;
        gap: 20px
    }

        .sp-estimate-grid > div:last-child > h2 {
            font-size: 25px;
            line-height: 1.15;
            margin: 0
        }

        .sp-estimate-grid > div:last-child > p {
            font-size: 14px;
            line-height: 1.5;
            margin: 5px 0 10px
        }

    .estimate-step h3 {
        font-size: 16px;
        margin: 2px 0 7px
    }

    .estimate-step-label {
        font-size: 12px !important
    }

    .sp-form-grid {
        gap: 6px
    }

        .sp-form-grid input, .sp-form-grid select, .sp-form-grid textarea {
            height: 42px;
            padding: 8px 12px;
            font-size: 14px
        }

    .estimate-fields {
        margin-bottom: 6px
    }

    .estimate-controls {
        margin-top: 4px
    }

        .estimate-controls .sp-btn {
            height: 29px !important;
            padding: 4px 14px;
            font-size: 9px
        }

    .sp-listing-review {
        min-height: 0;
        padding: 15px
    }

        .sp-listing-review h2 {
            font-size: 14px
        }

        .sp-listing-review p:not(.sp-kicker) {
            font-size: 8px;
            line-height: 1.45;
            margin-bottom: 9px
        }

        .sp-listing-review .btn {
            font-size: 8px;
            padding: 7px
        }

    .sp-estimate-grid .sp-agent-card {
        padding: 15px;
        min-height: 0
    }

    .agent-avatar {
        width: 46px;
        height: 46px;
        background: var(--cream);
        margin: 8px 0 !important
    }

        .agent-avatar i {
            font-size: 23px
        }

    .sp-agent-card h3 {
        font-size: 13px
    }

    .sp-agent-card p:not(.sp-kicker) {
        font-size: 8px;
        line-height: 1.4
    }

    .sp-agent-card strong, .sp-agent-card span {
        font-size: 8px
    }

    .agent-actions {
        margin-top: 9px !important
    }

        .agent-actions .sp-btn {
            font-size: 8px;
            padding: 7px
        }

    .sp-next-steps {
        margin-top: 10px;
        padding-top: 8px
    }

        .sp-next-steps h3 {
            font-size: 13px;
            margin-bottom: 6px
        }

        .sp-next-steps strong, .sp-next-steps span {
            font-size: 8px
        }

        .sp-next-steps article {
            gap: 5px
        }

        .sp-next-steps b {
            width: 18px;
            height: 18px;
            font-size: 8px
        }
}

/* Approved homepage composition: only the new primary journey remains visible. */
.sp-management {
    display: none
}

.sl-why {
    padding: 48px 0 36px;
    text-align: center
}

    .sl-why h2 {
        font-size: clamp(28px, 3vw, 36px);
        margin: 0 0 28px;
        letter-spacing: -.02em
    }

.sl-why-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 18px
}

    .sl-why-grid article {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        text-align: left
    }

    .sl-why-grid i {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        flex: none;
        font-size: 22px;
        border-radius: 50%;
        background: var(--green-soft, #eaf8f1);
        color: var(--green)
    }

    .sl-why-grid strong, .sl-why-grid span {
        display: block
    }

    .sl-why-grid strong {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 4px;
        color: var(--navy)
    }

    .sl-why-grid span {
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-muted)
    }

.sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.sp-header-phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: #fff;
    font: 600 13px/1 "Plus Jakarta Sans", sans-serif;
    text-decoration: none;
    white-space: nowrap
}

    .sp-header-phone:hover {
        color: #55dc98
    }

    .sp-header-phone i {
        font-size: 14px
    }

.sp-footer-phone {
    margin: 14px 0 0
}

    .sp-footer-phone a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #55dc98;
        font: 600 15px/1.2 "Plus Jakarta Sans", sans-serif;
        text-decoration: none
    }

        .sp-footer-phone a:hover {
            color: #fff
        }

.sp-reassurance a {
    color: inherit;
    text-decoration: none;
    font-weight: 600
}

    .sp-reassurance a:hover {
        color: var(--green, #0a9b5b)
    }

    .sp-header-actions .sp-btn-outline {
        border-color: rgba(255,255,255,.75);
        background: transparent;
        color: #fff
    }

        .sp-header-actions .sp-btn-outline:hover {
            background: #fff;
            color: var(--navy)
        }

.sp-comparison {
    padding: 12px 0 18px
}

.comparison-grid aside {
    background: linear-gradient(135deg,#071d2d,#063c35) !important;
    color: #fff;
    text-align: left
}

    .comparison-grid aside h2 {
        color: #fff
    }

    .comparison-grid aside p {
        color: rgba(255,255,255,.84)
    }

    .comparison-grid aside .sp-btn-outline {
        background: #fff;
        color: var(--navy);
        border-color: #fff
    }

.sp-cta {
    background: linear-gradient(105deg,#061b2c,#0b594a)
}

.comparison-grid > div > h2 {
    display: none
}

.comparison-table {
    position: relative !important;
    gap: 18px !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important
}

    .comparison-table:after {
        content: "VS";
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 43px;
        height: 43px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #081b2c;
        color: #fff;
        font: 800 12px/1 "Plus Jakarta Sans",sans-serif;
        box-shadow: 0 5px 13px rgba(6,27,53,.22)
    }

    .comparison-table > div {
        border: 0 !important;
        border-radius: 11px;
        padding: 22px 28px !important
    }

        .comparison-table > div:first-child {
            background: linear-gradient(135deg,#fff0ef,#fff8f8)
        }

        .comparison-table > div + div {
            background: linear-gradient(135deg,#effbf5,#f8fffb)
        }

    .comparison-table h3 {
        text-align: left !important;
        font-size: 16px !important;
        margin-bottom: 12px !important
    }

    .comparison-table li {
        font-size: 14px !important;
        padding: 6px 0 !important
    }

        .comparison-table li:before {
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 1px solid #ff7474;
            border-radius: 50%;
            content: "×" !important;
            text-align: center;
            line-height: 15px;
            font-size: 14px;
            margin-right: 10px !important
        }

    .comparison-table > div + div li:before {
        content: "✓" !important;
        color: #209262;
        border-color: #75caa4;
        font-size: 11px;
        line-height: 16px
    }

.sl-metric-strip {
    padding: 15px 24px !important;
    min-height: 72px;
    align-items: center
}

    .sl-metric-strip span {
        display: grid !important;
        grid-template-columns: 43px 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        justify-content: start !important;
        text-align: left;
        line-height: 1.15
    }

    .sl-metric-strip i {
        grid-row: 1/-1;
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        border: 1px solid #dce7e2;
        border-radius: 50%;
        background: #fff;
        font-size: 19px !important
    }

    .sl-metric-strip b {
        font-size: 14px;
        font-weight: 800;
        color: var(--navy)
    }

    .sl-metric-strip small {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 3px
    }

.sp-estimate-grid .sp-agent-card {
    background: linear-gradient(135deg,#f1fbf7,#e8f6f0) !important
}

.sp-agent-card .sp-kicker {
    color: var(--green) !important
}

.sp-agent-card h3 {
    line-height: 1.13 !important;
    letter-spacing: -.035em
}

.agent-avatar {
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(6,27,53,.12);
    background: linear-gradient(135deg,#f8efe4,#d9eae2) !important;
    color: var(--navy) !important
}

.agent-actions .sp-btn i {
    margin-right: 5px
}

.sp-estimate-grid .sp-listing-review {
    background: linear-gradient(145deg,#fffdf9,#f6f0e7)
}

.agent-avatar {
    overflow: hidden
}

    .agent-avatar img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center 25%
    }

.agent-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px
}

    .agent-profile .agent-avatar {
        width: 54px;
        height: 54px;
        margin: 0 !important;
        flex: none
    }

    .agent-profile strong {
        font-size: 14px !important;
        line-height: 1.25
    }

    .agent-profile span {
        font-size: 13px !important;
        line-height: 1.4;
        margin-top: 3px
    }

.sp-agent-card .agent-copy > p:not(.sp-kicker) {
    margin-bottom: 0 !important
}

.sp-listing-review .sp-kicker {
    font-size: 12px !important;
    letter-spacing: .06em
}

.sp-listing-review h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 6px 0 12px !important
}

.sp-listing-review p:not(.sp-kicker) {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important
}

.sp-listing-review .sp-btn {
    min-height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px !important
}

.sp-listing-review .sp-btn-outline i {
    color: var(--green);
    font-size: 15px;
    margin-right: 7px
}

/* Keep the estimate title clear of the overlapping highlights panel. */
@media(min-width:768px) {
    .sp-estimate {
        padding-top: 68px !important
    }
}

@media(max-width:767px) {
    .sp-estimate {
        padding-top: 36px !important
    }
}

.sp-hero .sp-btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,.8);
    color: #fff
}

    .sp-hero .sp-btn-outline:hover {
        background: #fff;
        color: var(--navy)
    }

.sp-reassurance {
    display: flex;
    flex-wrap: wrap;
    gap: 18px
}

    .sp-reassurance span {
        white-space: nowrap
    }

    .sp-reassurance i {
        color: #36cf8a;
        margin-right: 5px
    }

/* Reporting dashboard section, aligned to the approved process-panel composition. */
@media(min-width:992px) {
    .sl-experience {
        padding: 64px 0 92px
    }

    .sl-experience-grid {
        grid-template-columns: 34% 66%;
        gap: 34px;
        align-items: center
    }

    .sl-process {
        padding-left: 14px
    }

        .sl-process h2 {
            font-size: 31px;
            line-height: 1.08;
            margin-bottom: 21px
        }

        .sl-process li {
            margin: 21px 0
        }

            .sl-process li:not(:last-child):after {
                height: 39px
            }

    .sl-dashboard {
        padding: 16px;
        border-radius: 18px
    }

    .dash-metrics {
        margin: 12px 0;
        gap: 8px
    }

        .dash-metrics > div {
            padding: 11px
        }

        .dash-metrics b {
            font-size: 18px
        }

    .dash-bottom {
        gap: 10px
    }

    .dash-chart, .dash-bookings {
        min-height: 170px
    }

        .dash-chart svg {
            height: 145px
        }

        .dash-bookings p {
            padding: 9px 0
        }

    .sl-metric-strip {
        bottom: -36px
    }
}

.dash-metrics em {
    color: var(--green) !important;
    font-weight: 700
}

.dash-chart {
    position: relative;
    background: repeating-linear-gradient(0deg,transparent 0,transparent 34px,#edf2ef 35px),repeating-linear-gradient(90deg,transparent 0,transparent 72px,#edf2ef 73px)
}

    .dash-chart small {
        position: relative;
        z-index: 1
    }

    .dash-chart svg {
        position: relative;
        z-index: 1
    }

.dash-bookings p i {
    background: url('../images/property-specialist.png') center/cover !important
}

.sl-metric-strip.is-illustrative {
    position: absolute
}

@media (max-width: 991px) {
    .sl-metric-strip.is-illustrative {
        position: relative
    }
}

.sl-metric-strip .sl-metric-note {
    position: absolute;
    right: 16px;
    top: 5px;
    color: #89938f;
    font-size: 7px;
    font-weight: 500
}

.sl-metric-strip.is-illustrative span {
    padding-top: 4px
}

.dash-metrics b {
    color: var(--text-dark) !important
}

.dash-chart {
    background: #fff !important
}

    .dash-chart svg {
        overflow: visible
    }

/* Inner pages use the same dark hospitality-led opening as the homepage. */
.inner-page .page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #071d2d !important;
    color: #fff
}

    .inner-page .page-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: url('../images/living-room.jpg') center/cover
    }

    .inner-page .page-hero:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg,rgba(4,22,35,.98),rgba(4,22,35,.82) 48%,rgba(4,22,35,.32))
    }

    .inner-page .page-hero h1 {
        color: #fff;
        max-width: 820px
    }

    .inner-page .page-hero .lead-copy {
        color: rgba(255,255,255,.86)
    }

    .inner-page .page-hero .eyebrow {
        color: #46d58e
    }

.inner-page .section.bg-navy {
    background: linear-gradient(105deg,#061b2c,#0a5849) !important
}

    .inner-page .section.bg-navy h2 {
        color: #fff
    }

    .inner-page .section.bg-navy .btn-light {
        border-radius: 7px;
        color: var(--navy);
        font-weight: 750
    }

.inner-page .card-premium {
    border-radius: 12px
}

.inner-page .photo-card {
    border-radius: 12px
}

.inner-page .price-card {
    border-radius: 14px
}

.inner-page .form-shell {
    border-radius: 12px
}

.calculator-section {
    padding: 70px 0 !important
}

.calculator-heading {
    max-width: 760px;
    margin: 0 auto 25px;
    text-align: center
}

    .calculator-heading h2 {
        font-size: 30px
    }

    .calculator-heading p {
        font-size: 15px;
        color: var(--text-muted)
    }

.calculator-layout {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr);
    gap: 22px;
    align-items: start
}

.calculator-form, .calculator-result {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 12px 32px rgba(6,27,53,.07)
}

    .calculator-form fieldset {
        border: 0;
        padding: 0;
        margin: 0 0 18px
    }

    .calculator-form legend {
        font: 700 14px "Plus Jakarta Sans";
        color: var(--navy);
        margin-bottom: 10px
    }

.calculator-fields, .performance-fields {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px
}

.calculator-fields-location .field-full {
    grid-column: 1 / -1
}

.city-combobox-control {
    position: relative
}

.city-combobox-control input[type="text"] {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23061b35' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center
}

.city-combobox-control input[type="text"]:disabled {
    background-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed
}

.city-combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    max-height: min(280px, 45vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(6, 27, 44, .14)
}

.city-combobox-list [role="option"] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    font: 15px/1.3 Inter, sans-serif;
    color: var(--navy);
    cursor: pointer
}

.city-combobox-list [role="option"]:hover,
.city-combobox-list [role="option"].is-active {
    background: rgba(10, 155, 91, .1);
    color: var(--navy)
}

.city-combobox-list .city-combobox-empty {
    padding: 10px 12px;
    font: 14px/1.4 Inter, sans-serif;
    color: #64748b
}

.calculator-form label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px
}

.calculator-form input, .calculator-form select, .calculator-lead input, .calculator-lead select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 46px;
    padding: 8px 12px;
    font: 15px/1.3 Inter, sans-serif;
    color: var(--navy);
    background: #fff;
    appearance: none;
    -webkit-appearance: none
}

.calculator-form select, .calculator-lead select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23061b35' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer
}

.calculator-form input:focus, .calculator-form select:focus, .calculator-lead input:focus, .calculator-lead select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(10,155,91,.12)
}

.calculator-form input::placeholder {
    color: #94a3b8
}

.hosting-options {
    display: grid;
    gap: 9px
}

    .hosting-options label {
        margin: 0;
        cursor: pointer
    }

    .hosting-options input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: 0;
        padding: 0
    }

    .hosting-options span {
        display: block;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 600;
        color: var(--navy);
        background: #fff;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease
    }

    .hosting-options input:checked + span {
        border-color: var(--green);
        background: rgba(10, 155, 91, .08);
        box-shadow: 0 0 0 2px rgba(10, 155, 91, .16)
    }

    .hosting-options input:focus-visible + span {
        border-color: var(--green);
        box-shadow: 0 0 0 3px rgba(10, 155, 91, .18)
    }

.quality-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px
}

    .quality-options input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: 0;
        padding: 0
    }

    .quality-options span {
        display: grid;
        gap: 4px;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 11px;
        cursor: pointer
    }

    .quality-options input:checked + span {
        border-color: var(--green);
        box-shadow: 0 0 0 2px rgba(10,155,91,.16)
    }

    .quality-options i {
        color: var(--green);
        font-size: 18px
    }

    .quality-options small {
        font-size: 13px;
        color: var(--text-muted)
    }

.amenity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

    .amenity-chips label {
        margin: 0
    }

    .amenity-chips input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        min-height: 0;
        margin: 0;
        padding: 0
    }

    .amenity-chips span {
        display: block;
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer
    }

    .amenity-chips input:checked + span {
        background: var(--green);
        border-color: var(--green);
        color: #fff
    }

.calculator-submit {
    width: 100%;
    justify-content: center
}

.calculator-status {
    font-size: 14px;
    margin: 9px 0 0;
    color: var(--green)
}

.calculator-result {
    background: linear-gradient(145deg,#f4fbf7,#fff);
    position: sticky;
    top: 90px
}

.result-empty {
    text-align: center;
    padding: 60px 15px
}

    .result-empty i {
        font-size: 42px;
        color: var(--green)
    }

    .result-empty h3 {
        font-size: 21px;
        margin-top: 10px
    }

    .result-empty p, .result-disclaimer {
        font-size: 10px;
        color: var(--text-muted)
    }

.result-revenue {
    font-size: 33px;
    color: var(--green);
    margin: 4px 0
}

.result-nights {
    font-size: 11px
}

.result-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 18px 0
}

    .result-stats div {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px
    }

    .result-stats small, .result-stats b {
        display: block
    }

    .result-stats small {
        font-size: 13px
    }

    .result-stats b {
        font-size: 15px;
        margin-top: 4px
    }

.revenue-bars {
    border-top: 1px solid var(--border);
    padding-top: 12px
}

    .revenue-bars > small {
        font-weight: 700;
        font-size: 13px
    }

    .revenue-bars span {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 8px;
        align-items: center;
        font-size: 13px;
        margin-top: 8px
    }

    .revenue-bars i {
        height: 8px;
        background: linear-gradient(90deg,#8fdcb6,#0a9b5b);
        border-radius: 99px
    }

    .revenue-bars span:nth-child(3) i {
        width: 78%
    }

    .revenue-bars span:nth-child(4) i {
        width: 94%
    }

.result-improvement {
    font-size: 14px;
    font-weight: 700;
    color: var(--green)
}

.calculator-explain, .result-actions button, .result-actions a {
    border: 0;
    background: none;
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
    padding: 5px 0
}

.calculation-explainer {
    font-size: 14px;
    padding: 10px;
    background: #fff;
    border-radius: 7px
}

.calculator-lead {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 8px
}

    .calculator-lead h3 {
        font-size: 15px;
        margin: 0
    }

    .calculator-lead p {
        font-size: 14px;
        margin: 0
    }

.lead-consent {
    font-size: 13px !important;
    font-weight: 400 !important
}

    .lead-consent input {
        width: auto !important;
        height: auto !important
    }

.result-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px
}

.calculator-seo-copy {
    max-width: 900px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted)
}

@media(max-width:991px) {
    .calculator-layout {
        grid-template-columns: 1fr
    }

    .calculator-result {
        position: static
    }
}

@media(max-width:575px) {
    .calculator-section {
        padding: 46px 0 !important
    }

    .calculator-form, .calculator-result {
        padding: 17px
    }

    .calculator-fields, .performance-fields {
        grid-template-columns: 1fr
    }

    .quality-options {
        grid-template-columns: 1fr
    }

    .result-stats {
        grid-template-columns: 1fr
    }

    .calculator-result {
        order: 2
    }

    .calculator-submit {
        min-height: 46px
    }
}

.management-difference {
    padding: 72px 0;
    background: linear-gradient(135deg,#f8faf8,#eef7f2)
}

.split-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 30px;
    align-items: center
}

    .split-grid h2 {
        font-size: 30px;
        margin-bottom: 18px
    }

.compare-image {
    position: relative;
    height: 315px;
    border-radius: 14px;
    overflow: hidden;
    background: #061b2c
}

    .compare-image > img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.before-overlay {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    background: linear-gradient(90deg,rgba(6,27,44,.85),rgba(6,27,44,.36));
    border-right: 3px solid #fff
}

.compare-image input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize
}

.compare-label {
    position: absolute;
    top: 15px;
    padding: 5px 10px;
    border-radius: 99px;
    color: #fff;
    font-size: 10px;
    font-weight: 800
}

.before-label {
    left: 15px;
    background: #d84d4d
}

.after-label {
    right: 15px;
    background: var(--green)
}

.before-after {
    display: grid;
    gap: 16px
}

    .before-after article {
        border-radius: 12px;
        padding: 22px;
        background: #fff;
        box-shadow: 0 9px 22px rgba(6,27,53,.06)
    }

    .before-after span {
        font-weight: 800;
        font-size: 14px
    }

    .before-after ul {
        list-style: none;
        padding: 0;
        margin: 12px 0 0
    }

    .before-after li {
        font-size: 11px;
        padding: 5px 0
    }

        .before-after li:before {
            display: inline-grid;
            place-items: center;
            width: 17px;
            height: 17px;
            border-radius: 50%;
            margin-right: 8px
        }

    .before-after .bad {
        color: #d84d4d
    }

        .before-after .bad + ul li:before {
            content: '×';
            color: #d84d4d;
            background: #fff0f0
        }

    .before-after .good {
        color: var(--green)
    }

        .before-after .good + ul li:before {
            content: '✓';
            color: var(--green);
            background: #eaf8f1
        }

@media(max-width:767px) {
    .management-difference {
        padding: 48px 0
    }

    .split-grid {
        grid-template-columns: 1fr
    }

    .compare-image {
        height: 245px
    }
}

/* Keep the process copy, replacing the dashboard with the requested property visual only. */
.sl-experience .sl-dashboard {
    position: relative;
    min-height: 335px;
    --image-split: 50%;
    background: linear-gradient(90deg,rgba(6,27,44,.1),rgba(6,27,44,.02)),url('../images/hero-property.jpg') center/cover !important;
    border: 5px solid #fff !important;
    box-shadow: 0 20px 40px rgba(0,0,0,.28) !important
}

    .sl-experience .sl-dashboard > * {
        visibility: hidden
    }

    .sl-experience .sl-dashboard .property-difference-overlay {
        visibility: visible;
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 28px;
        color: #fff;
        background: linear-gradient(90deg,rgba(3,19,31,.88) 0%,rgba(3,19,31,.72) var(--image-split),rgba(3,19,31,.12) calc(var(--image-split) + 14%),rgba(3,19,31,.12) 100%)
    }

.property-difference-overlay h3 {
    color: #fff;
    font-size: 27px;
    line-height: 1.08;
    margin: 0 0 7px;
    max-width: 430px
}

.property-difference-overlay p {
    font-size: 11px;
    margin: 0 0 18px
}

.image-slider-control {
    display: grid;
    grid-template-columns: 45px minmax(160px,280px) 45px;
    gap: 9px;
    align-items: center;
    font-size: 10px;
    font-weight: 800
}

    .image-slider-control input {
        accent-color: var(--green);
        cursor: ew-resize
    }

    .image-slider-control span:last-child {
        text-align: right
    }

@media(max-width:767px) {
    .property-difference-overlay h3 {
        font-size: 22px
    }

    .sl-experience .sl-dashboard .property-difference-overlay {
        padding: 19px
    }
}

/* Premium comparison composition aligned to the homepage cards and CTA language. */
.sp-comparison {
    padding: 68px 0 !important;
    background: linear-gradient(180deg,#fff,#f5faf7)
}

.comparison-grid {
    gap: 28px !important
}

    .comparison-grid > div > h2 {
        display: block !important;
        font-size: 24px !important;
        margin: 0 0 15px !important
    }

.comparison-table {
    gap: 22px !important
}

    .comparison-table > div {
        min-height: 260px;
        padding: 24px 28px !important;
        box-shadow: 0 9px 26px rgba(6,27,53,.045)
    }

    .comparison-table:after {
        width: 46px !important;
        height: 46px !important;
        font-size: 14px !important;
        box-shadow: 0 8px 22px rgba(6,27,53,.24) !important
    }

    .comparison-table h3 {
        font-size: 16px !important;
        margin-bottom: 15px !important
    }

    .comparison-table li {
        font-size: 14px !important;
        padding: 6px 0 !important
    }

.comparison-grid aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 14px !important;
    padding: 32px !important;
    box-shadow: 0 14px 32px rgba(6,27,53,.14)
}

    .comparison-grid aside h2 {
        font-size: 24px !important;
        line-height: 1.14
    }

    .comparison-grid aside p {
        font-size: 15px !important;
        line-height: 1.55
    }

    .comparison-grid aside .btn {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important
    }

        .comparison-grid aside .btn:first-of-type {
            margin-top: 18px !important
        }

@media(max-width:767px) {
    .sp-comparison {
        padding: 48px 0 !important
    }

    .comparison-grid > div > h2 {
        font-size: 21px !important
    }

    .comparison-table {
        gap: 12px !important
    }

        .comparison-table > div {
            min-height: 0;
            padding: 19px 14px !important
        }

    .comparison-grid aside {
        padding: 24px !important;
        margin-top: 20px
    }
}

/* Expanded FAQ treatment. */
.sp-faq {
    padding: 62px 0 28px !important;
    background: linear-gradient(135deg,#f7fbf8,#fff) !important
}

    .sp-faq header {
        align-items: end !important;
        margin-bottom: 22px;
        padding-bottom: 16px;
        border-bottom: 1px solid #dce8e1
    }

        .sp-faq header h2 {
            font-size: 31px !important;
            margin: 0
        }

            .sp-faq header h2:before {
                content: 'Helpful answers';
                display: block;
                color: var(--green);
                font: 800 9px/1 Inter;
                letter-spacing: .09em;
                text-transform: uppercase;
                margin-bottom: 8px
            }

        .sp-faq header a {
            font-size: 11px !important;
            font-weight: 800;
            background: #eaf8f1;
            border-radius: 999px;
            padding: 9px 14px
        }

.sp-faq-grid {
    gap: 16px !important
}

.sp-faq .accordion-item {
    border: 1px solid #dbe7e1 !important;
    border-radius: 10px !important;
    box-shadow: 0 7px 18px rgba(6,27,53,.035);
    margin-bottom: 9px !important;
    background: #fff
}

    .sp-faq .accordion-item + .accordion-item {
        border-top: 1px solid #dbe7e1 !important
    }

.sp-faq .accordion-button {
    min-height: 56px !important;
    padding: 16px 18px !important;
    font-size: 15px !important;
    line-height: 1.4;
    font-weight: 650;
    text-align: left;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 10px !important
}

    .sp-faq .accordion-button:not(.collapsed) {
        background: #eaf8f1 !important;
        color: var(--navy) !important
    }

    .sp-faq .accordion-button:after {
        filter: none;
        flex: none;
        margin-left: auto
    }

.sp-faq .accordion-body {
    font-size: 15px !important;
    line-height: 1.7;
    padding: 2px 56px 18px 18px !important;
    color: var(--text-dark);
    text-align: left
}

@media(max-width:767px) {
    .sp-faq {
        padding: 46px 0 !important
    }

        .sp-faq header {
            align-items: flex-start !important;
            gap: 12px;
            flex-direction: column
        }

            .sp-faq header h2 {
                font-size: 26px !important
            }
}

.sp-faq .accordion-item {
    transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease
}

    .sp-faq .accordion-item:hover {
        transform: translateY(-2px);
        border-color: #9fdbc0 !important;
        box-shadow: 0 13px 26px rgba(6,27,53,.09)
    }

.sp-faq .accordion-button:after {
    display: grid;
    place-items: center;
    width: 24px !important;
    height: 24px !important;
    background-image: none !important;
    content: '+';
    font-size: 20px;
    line-height: 1;
    color: var(--green);
    border: 1px solid #bfe5d0;
    border-radius: 50%;
    transition: transform .25s ease,background .25s ease
}

.sp-faq .accordion-button:not(.collapsed):after {
    content: '−';
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    transform: rotate(180deg)
}

.sp-faq .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(10,155,91,.17)
}

.sp-faq .accordion-body {
    animation: faqReveal .25s ease both
}

@keyframes faqReveal {
    from {
        opacity: 0;
        transform: translateY(-5px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .sp-faq .accordion-item, .sp-faq .accordion-button:after {
        transition: none
    }

    .sp-faq .accordion-body {
        animation: none
    }
}

.sp-faq-grid > #faqLeft {
    grid-column: 1;
    grid-row: 1
}

.sp-faq-grid > #faqRight {
    grid-column: 2;
    grid-row: 1
}

.sp-closing {
    padding: 0 0 48px
}

.sp-closing-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
    width: 100%
}

.sp-closing-grid > .faq-review {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important
}

.sp-closing-grid > .sp-cta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important
}

.faq-review {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    border-radius: 13px;
    padding: 24px 26px;
    background: linear-gradient(135deg,#062033,#0a5749);
    color: #fff;
    box-shadow: 0 14px 28px rgba(6,27,53,.16);
    box-sizing: border-box
}

    .faq-review .sp-kicker {
        flex: none;
        color: #55dc98;
        margin: 0;
        font-size: 12px !important
    }

.faq-review-slide:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0
}

.faq-review-slide .review-quote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%
}

.review-stars {
    color: #ffd36a;
    letter-spacing: 3px;
    font-size: 15px
}

.faq-review blockquote {
    font: 600 16px/1.45 "Plus Jakarta Sans";
    margin: 0
}

.faq-review p {
    margin: 0
}

.review-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    flex: none
}

    .review-controls button {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 50%;
        background: transparent;
        color: #fff
    }

    .review-controls span {
        font-size: 13px;
        margin: 0 3px;
        white-space: nowrap
    }

.sp-closing .sp-cta {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch !important;
    text-align: left !important;
    gap: 16px;
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 28px 28px;
    box-sizing: border-box;
    border-radius: 13px
}

.sp-closing .sp-cta-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0
}

.sp-closing .sp-cta-main > i {
    flex: none;
    font-size: 40px;
    line-height: 1;
    margin-top: 2px
}

.sp-closing .sp-cta-copy {
    min-width: 0;
    flex: 1 1 auto
}

    .sp-closing .sp-cta h2 {
        font-size: 22px !important;
        line-height: 1.25;
        margin: 0
    }

    .sp-closing .sp-cta p {
        font-size: 15px !important;
        margin: 6px 0 0;
        max-width: none
    }

.sp-closing .sp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin-left: 56px
}

    .sp-closing .sp-cta-actions .btn {
        white-space: nowrap
    }

@media (max-width: 991px) {
    .sp-closing-grid {
        grid-template-columns: 1fr !important
    }

    .sp-closing-grid > .faq-review,
    .sp-closing-grid > .sp-cta {
        grid-column: 1 !important;
        grid-row: auto !important
    }

    .sp-closing .sp-cta-actions {
        margin-left: 0
    }
}

@media (max-width: 767px) {
    .sp-faq-grid > #faqLeft,
    .sp-faq-grid > #faqRight {
        grid-column: auto;
        grid-row: auto
    }

    .sp-closing {
        padding-bottom: 28px
    }

    .sp-closing .sp-cta {
        padding: 22px 18px
    }

    .sp-closing .sp-cta-main {
        flex-direction: column
    }

        .sp-closing .sp-cta-actions .btn {
            width: 100%
        }
}

.faq-review .review-person {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    min-width: 140px
}

.review-person > img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.8);
    object-fit: cover;
    object-position: center 25%
}

.faq-review .review-person span {
    margin: 0 !important;
    opacity: 1 !important
}

.faq-review .review-person strong {
    font-size: 15px !important
}

.faq-review .review-person em {
    display: block;
    font-size: 13px !important;
    font-style: normal;
    opacity: .75;
    margin-top: 2px
}

.comparison-grid aside .sp-btn-gallery {
    margin-top: 9px;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.65)
}

    .comparison-grid aside .sp-btn-gallery:hover {
        background: #fff;
        color: var(--navy)
    }

.sp-btn-gallery i {
    margin-right: 7px
}

.presentation-modal .modal-content {
    border: 0;
    border-radius: 16px;
    overflow: hidden
}

.presentation-modal .modal-header {
    align-items: start;
    padding: 26px 28px 16px;
    border: 0
}

    .presentation-modal .modal-header h2 {
        font-size: 25px;
        margin: 5px 0 0
    }

.presentation-modal .modal-body {
    padding: 10px 28px 28px
}

.presentation-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}

    .presentation-grid figure {
        margin: 0;
        border-radius: 11px;
        overflow: hidden;
        background: #f4f8f6
    }

    .presentation-grid img {
        display: block;
        width: 100%;
        height: 245px;
        object-fit: cover
    }

    .presentation-grid figcaption {
        padding: 14px
    }

    .presentation-grid strong, .presentation-grid span {
        display: block
    }

    .presentation-grid strong {
        font-size: 12px
    }

    .presentation-grid span {
        font-size: 10px;
        color: var(--text-muted);
        line-height: 1.45;
        margin-top: 4px
    }

.presentation-modal .modal-footer {
    justify-content: space-between;
    padding: 17px 28px;
    border: 0;
    background: #f4faf6
}

    .presentation-modal .modal-footer p {
        margin: 0;
        font-size: 11px;
        font-weight: 700
    }

@media(max-width:767px) {
    .presentation-modal .modal-header, .presentation-modal .modal-body {
        padding-inline: 18px
    }

    .presentation-grid {
        grid-template-columns: 1fr
    }

        .presentation-grid img {
            height: 190px
        }

    .presentation-modal .modal-footer {
        padding: 16px 18px;
        display: grid;
        gap: 10px
    }

        .presentation-modal .modal-footer .btn {
            width: 100%
        }
}

/* Shared inner-page polish so every route carries the homepage's premium feel. */
.inner-page main {
    background: linear-gradient(180deg,#fff 0%,#f8fbf9 100%)
}

.inner-page .page-hero {
    min-height: 420px;
    display: flex;
    align-items: center
}

    .inner-page .page-hero h1 {
        font-size: clamp(40px,5vw,62px) !important
    }

    .inner-page .page-hero .lead-copy {
        max-width: 690px
    }

.inner-page .section {
    position: relative;
    padding: 88px 0
}

    .inner-page .section:not(.bg-sand):not(.bg-navy):after {
        content: "";
        position: absolute;
        inset: auto 7% 0;
        height: 1px;
        background: linear-gradient(90deg,transparent,#dbe9e1,transparent)
    }

.inner-page .bg-sand {
    background: linear-gradient(135deg,#f4f8f5,#edf7f1) !important
}

.inner-page .card-premium {
    height: 100%;
    background: rgba(255,255,255,.94);
    border: 1px solid #dbe8e1 !important;
    box-shadow: 0 12px 30px rgba(6,27,53,.055) !important
}

    .inner-page .card-premium:hover {
        border-color: #9edbbb !important
    }

    .inner-page .card-premium .step-num {
        display: inline-flex;
        background: #e9f8f0;
        border-radius: 999px;
        padding: 5px 9px;
        font-size: 9px
    }

.inner-page .btn-primary {
    box-shadow: 0 8px 18px rgba(10,155,91,.2)
}

.inner-page .btn-outline-primary {
    background: #fff
}

.inner-page .photo-card {
    box-shadow: 0 18px 38px rgba(6,27,53,.15) !important
}

.inner-page .form-shell {
    box-shadow: 0 18px 38px rgba(6,27,53,.09) !important
}

.inner-page .inner-footer {
    background: linear-gradient(110deg,#061b2c,#063b35) !important
}

    .inner-page .inner-footer:before {
        content: "";
        display: block;
        height: 4px;
        background: linear-gradient(90deg,#0a9b5b,#8be0b3,#0a9b5b);
        margin-bottom: 28px
    }

@media(max-width:767px) {
    .inner-page .page-hero {
        min-height: 340px
    }

    .inner-page .section {
        padding: 58px 0
    }

    .inner-page .page-hero h1 {
        font-size: 38px !important
    }
}

@media(min-width:992px) {
    .estimate-step[data-step="2"][hidden] {
        display: block !important;
        opacity: .56;
        pointer-events: none
    }

    .estimate-step[data-step="2"] {
        border-left: 1px solid var(--border);
        padding-left: 12px
    }

    .sp-estimate-grid form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .sp-estimate-grid .estimate-step {
        min-width: 0
    }

        .sp-estimate-grid .estimate-step .sp-form-grid {
            grid-template-columns: 1fr
        }

        .sp-estimate-grid .estimate-step .form-message {
            grid-column: auto
        }

        .sp-estimate-grid .estimate-step .sp-form-bottom {
            grid-template-columns: 1fr 1fr
        }

            .sp-estimate-grid .estimate-step .sp-form-bottom .sp-btn {
                grid-column: auto
            }

                .sp-estimate-grid .estimate-step .sp-form-bottom .sp-btn:first-child {
                    grid-column: 1/-1
                }

        .sp-estimate-grid .estimate-step[data-step="2"] .sp-form-bottom .sp-btn:first-child {
            grid-column: auto
        }

        .sp-estimate-grid .estimate-step[data-step="2"] .sp-form-bottom .sp-btn:last-child {
            grid-column: auto
        }

        .sp-estimate-grid .estimate-step .form-status {
            grid-column: 1/-1
        }

        .sp-estimate-grid .estimate-step .sp-consent {
            font-size: 8px
        }

        .sp-estimate-grid .estimate-step h3 {
            font-size: 13px
        }
}

@media(max-width:991px) {
    .sl-why-grid {
        grid-template-columns: repeat(3,1fr);
        row-gap: 18px
    }
}

@media(max-width:767px) {
    .sl-why {
        padding: 35px 0
    }

    .sl-why-grid {
        grid-template-columns: 1fr 1fr
    }

        .sl-why-grid article {
            align-items: flex-start
        }

            .sl-why-grid article:last-child {
                grid-column: 1/-1;
                justify-self: center;
                width: min(250px,100%)
            }

    .sp-hero-image > img {
        height: 340px;
        object-position: center
    }

    .sp-results-card {
        margin-top: -70px
    }

    .sp-trust {
        padding: 15px 10px
    }

        .sp-trust article {
            gap: 11px;
            padding: 6px 12px
        }

        .sp-trust i {
            font-size: 26px
        }

        .sp-trust strong {
            font-size: 10px
        }

        .sp-trust span {
            font-size: 8px
        }
}

@media(max-width:767px) {
    .comparison-table {
        gap: 10px !important
    }

        .comparison-table > div {
            padding: 18px 14px !important
        }

        .comparison-table:after {
            width: 34px;
            height: 34px;
            font-size: 12px
        }

        .comparison-table li {
            font-size: 13px !important
        }

            .comparison-table li:before {
                width: 15px;
                height: 15px;
                line-height: 12px;
                font-size: 12px;
                margin-right: 5px !important
            }
}

@media(max-width:1199px) {
    .sp-header-actions {
        display: grid;
        gap: 8px;
        margin-top: 10px
    }

        .sp-header-actions .sp-btn {
            margin-top: 0
        }
}

.sp-header-inner .navbar {
    padding: 0 !important;
    background: #061b2c !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.sp-header-inner .navbar .nav-link {
    font-weight: 500 !important;
    color: #fff !important;
    margin: 0 !important;
    font-size: 13px !important;
}

.sp-header .navbar-collapse {
    background: #061b2c;
}

@media (max-width: 991px) {
    .sp-header .navbar {
        height: auto;
        min-height: 64px;
    }

    .sp-header .navbar-collapse {
        background: #061b2c;
        margin: 0 -12px;
        padding: 12px 16px 18px;
        border-top: 1px solid rgba(255,255,255,.08);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    .sp-header .nav-link {
        padding: 12px 8px !important;
        white-space: normal;
    }

    .sp-header-actions {
        display: grid !important;
        gap: 8px;
        margin-top: 8px;
        width: 100%;
    }

    .sp-header-actions .sp-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .sp-logo b {
        font-size: 22px !important;
    }

    .sp-logo > i {
        font-size: 26px;
    }
}

/* Layout overflow / responsiveness safety net */
html, body, .home-page, main {
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
}

.sp-hero,
.sp-section,
.sp-trust,
.sp-service-grid,
.sp-footer,
.sl-experience,
.calculator-section,
.inner-container,
.container {
    max-width: 100%;
    box-sizing: border-box;
}

.sp-hero-image,
.sp-hero-image > img {
    max-width: 100%;
}

.sp-results-card {
    max-width: min(280px, calc(100% - 40px));
}

.sl-experience {
    position: relative;
    overflow-x: clip;
}

@media (max-width: 1199px) {
    .container,
    .inner-container {
        width: min(1440px, calc(100% - 48px)) !important;
        max-width: min(1440px, calc(100% - 48px)) !important;
        margin-inline: auto !important;
        box-sizing: border-box;
        padding-inline: 0;
    }

    .sp-hero h1 {
        font-size: 40px;
    }
}

@media (max-width: 991px) {
    .sp-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-management-grid {
        grid-template-columns: 1fr;
    }

    .calculator-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767px) {
    .sl-metric-strip,
    .sl-metric-strip.is-illustrative {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-page .container,
    .home-page .inner-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .sp-footer .inner-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sp-mobile-contact {
        width: 100%;
        max-width: 100%;
        margin: 0;
        left: 0;
        right: 0;
    }
}

@media (max-width: 575px) {
    .sp-service-grid {
        grid-template-columns: 1fr;
    }

    .sp-trust {
        width: calc(100% - 24px) !important;
    }

    .sl-why-grid {
        grid-template-columns: 1fr;
    }

    .sl-metric-strip {
        grid-template-columns: 1fr !important;
    }
}

/* Shared content rail: align header + page sections on the same left/right edges */
:root {
    --content-max: 1440px;
    --content-gutter: 32px;
    --content-inline: max(var(--content-gutter), calc((100% - var(--content-max)) / 2));
}

.home-page .container,
.inner-page .container,
.home-page .inner-container,
.inner-page .inner-container,
.sp-footer .inner-container {
    width: min(var(--content-max), calc(100% - (var(--content-gutter) * 2))) !important;
    max-width: min(var(--content-max), calc(100% - (var(--content-gutter) * 2))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important
}

.sp-trust,
.sl-metric-strip,
.sl-metric-strip.is-illustrative {
    width: min(var(--content-max), calc(100% - (var(--content-gutter) * 2))) !important;
    max-width: min(var(--content-max), calc(100% - (var(--content-gutter) * 2))) !important
}

.sp-hero-copy {
    margin-left: var(--content-inline) !important;
    padding-left: 0 !important;
    padding-right: 0 !important
}

.sp-results-card {
    right: var(--content-inline) !important
}

@media (max-width: 991px) {
    .sp-results-card {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: calc(100% - 32px) !important;
        max-width: 320px !important;
        margin: 16px auto !important
    }
}

.sp-cta {
    width: auto;
    max-width: 100%;
    box-sizing: border-box
}

@media (max-width: 991px) {
    :root {
        --content-gutter: 24px
    }

    .sp-hero-copy {
        margin-left: 0 !important;
        padding-left: var(--content-gutter) !important;
        padding-right: var(--content-gutter) !important
    }
}

@media (max-width: 767px) {
    :root {
        --content-gutter: 16px
    }

    .home-page .container,
    .inner-page .container,
    .home-page .inner-container,
    .inner-page .inner-container,
    .sp-footer .inner-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--content-gutter) !important;
        padding-right: var(--content-gutter) !important
    }

    .sp-trust {
        width: calc(100% - (var(--content-gutter) * 2)) !important;
        max-width: calc(100% - (var(--content-gutter) * 2)) !important
    }
}

/* Readability: larger type, clearer contrast, contact/FAQ fixes */
.home-page,
.inner-page {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-dark)
}

.home-page p,
.inner-page p,
.home-page li,
.inner-page li {
    font-size: 16px;
    line-height: 1.7
}

.sp-kicker,
.inner-page .eyebrow {
    font-size: 13px !important;
    letter-spacing: .06em
}

.sp-logo small,
.sp-footer .sp-logo small {
    font-size: 11px !important
}

.sp-header .nav-link,
.inner-nav .nav-link {
    font-size: 15px !important
}

.sp-actions .sp-btn,
.sp-header .sp-btn,
.sp-header-actions .sp-btn {
    font-size: 14px !important
}

.sp-hero-lead {
    font-size: 18px !important;
    line-height: 1.7
}

.sp-reassurance,
.sp-reassurance span {
    font-size: 14px !important
}

.sp-results-card strong {
    font-size: 14px !important
}

.sp-results-card small {
    font-size: 13px !important
}

.sp-trust strong {
    font-size: 15px !important
}

.sp-trust span {
    font-size: 14px !important;
    line-height: 1.45
}

.sp-section-head h2,
.sp-estimate h2,
.sp-faq h2 {
    font-size: clamp(28px, 3vw, 36px) !important
}

.sp-section-head p,
.sp-section-head p:last-child {
    font-size: 16px !important;
    line-height: 1.65 !important;
    max-width: 720px;
    margin-inline: auto
}

.sp-service-grid h3,
.sp-service-grid article h3 {
    font-size: 16px !important;
    line-height: 1.3
}

.sp-service-grid p,
.sp-service-grid article p {
    font-size: 14px !important;
    line-height: 1.55
}

.sl-process strong {
    font-size: 16px !important
}

.sl-process span {
    font-size: 14px !important;
    line-height: 1.55 !important;
    opacity: .9
}

.sl-process h2,
.property-difference-overlay h3 {
    font-size: clamp(26px, 2.8vw, 32px) !important
}

.property-difference-overlay p {
    font-size: 15px !important
}

.comparison-table h3 {
    font-size: 16px !important
}

.comparison-table li {
    font-size: 14px !important;
    line-height: 1.5
}

.sl-metric-strip b {
    font-size: 14px !important
}

.sl-metric-strip span,
.sl-metric-strip small,
.sl-metric-strip em {
    font-size: 13px !important
}

.sl-why-grid article h3,
.sl-why-grid h3,
.sl-why-grid strong {
    font-size: 16px !important;
    line-height: 1.3
}

.sl-why-grid article p,
.sl-why-grid p,
.sl-why-grid span {
    font-size: 14px !important;
    line-height: 1.5
}

.sl-why h2 {
    font-size: clamp(28px, 3vw, 36px) !important
}

.sp-cta h2 {
    font-size: 24px !important
}

.sp-cta p {
    font-size: 15px !important;
    line-height: 1.5
}

.sp-cta .btn,
.sp-cta-actions .btn {
    font-size: 14px !important
}

.sp-footer p,
.sp-footer li,
.sp-footer a {
    font-size: 14px !important;
    line-height: 1.6
}

.sp-footer h3 {
    font-size: 16px !important
}

.sp-footer-bottom,
.sp-footer-bottom span {
    font-size: 13px !important
}

.sp-faq header h2 {
    font-size: 34px !important
}

.sp-faq header h2:before {
    font-size: 13px !important
}

.sp-faq .accordion-button {
    font-size: 16px !important;
    line-height: 1.4
}

.sp-faq .accordion-body {
    font-size: 15px !important;
    line-height: 1.7
}

.faq-review blockquote {
    font-size: 18px !important;
    line-height: 1.5
}

.faq-review p strong {
    font-size: 14px !important
}

.faq-review p span,
.review-controls span {
    font-size: 13px !important
}

.sp-mobile-contact a {
    font-size: 14px !important
}

.sp-audience strong {
    font-size: 15px !important
}

.sp-audience span {
    font-size: 13px !important
}

.sp-benefits span,
.sp-next-steps span,
.sp-next-steps b {
    font-size: 13px !important
}

.form-status,
.estimate-step-label {
    font-size: 14px !important
}

.estimate-step h3 {
    font-size: 18px !important
}

.calculator-heading h2 {
    font-size: clamp(28px, 3vw, 34px) !important
}

.calculator-heading p,
.calculator-lead p,
.calculation-explainer,
.result-disclaimer {
    font-size: 14px !important;
    line-height: 1.6
}

.calculator-form legend {
    font-size: 16px !important
}

.calculator-form label,
.calculator-lead label,
.lead-consent {
    font-size: 14px !important;
    font-weight: 600 !important
}

.calculator-form input,
.calculator-form select,
.calculator-lead input,
.calculator-lead select {
    color: #0d1b2a !important;
    font-size: 15px !important;
    height: 46px;
    min-height: 46px
}

.calculator-form .quality-options input,
.calculator-form .amenity-chips input,
.calculator-form .hosting-options input {
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0
}

.calculator-explain,
.result-actions button,
.result-actions a {
    font-size: 14px !important
}

.result-revenue {
    font-size: 28px !important
}

.result-nights,
.result-rate,
.result-occupancy,
.result-annual,
.result-improvement {
    font-size: 14px !important
}

.revenue-bars > small,
.revenue-bars span {
    font-size: 13px !important
}

.quality-options span,
.amenity-chips span,
.hosting-options span {
    font-size: 14px !important
}

.dash-title,
.dash-metrics b {
    font-size: 15px !important
}

.dash-metrics small,
.dash-metrics em,
.dash-bookings p {
    font-size: 12px !important
}

.inner-page .card-premium,
.inner-page .card-premium p,
.inner-page .card-premium li {
    font-size: 16px !important;
    line-height: 1.65
}

.inner-page .card-premium .h3,
.inner-page .card-premium h3 {
    font-size: 20px !important
}

.inner-page .step-num {
    font-size: 13px !important
}

.inner-page .btn {
    font-size: 15px !important
}

/* Contact hero card sits on a dark hero — force readable dark text */
.inner-page .page-hero .card-premium {
    color: var(--text-dark);
    background: #fff
}

.inner-page .page-hero .card-premium h2,
.inner-page .page-hero .card-premium .h3,
.inner-page .page-hero .card-premium strong {
    color: var(--navy)
}

.inner-page .page-hero .card-premium a {
    color: var(--green);
    font-weight: 650;
    text-decoration: none
}

.inner-page .page-hero .card-premium a:hover {
    color: var(--green-dark);
    text-decoration: underline
}

.inner-page .page-hero .card-premium p {
    color: var(--text-dark);
    font-size: 16px !important
}

/* Contact / estimate form fields must stay dark on white */
.form-shell .form-control,
.form-shell .form-select,
.inner-page .form-control,
.inner-page .form-select {
    color: #0d1b2a !important;
    background-color: #fff !important;
    font-size: 16px !important;
    line-height: 1.45;
    min-height: 48px
}

.form-shell .form-control::placeholder,
.inner-page .form-control::placeholder {
    color: #6b7785 !important;
    opacity: 1
}

.form-shell .form-label,
.inner-page .form-label,
.form-shell .form-check-label,
.inner-page .form-check-label {
    color: var(--navy) !important;
    font-size: 15px !important
}

.form-shell textarea.form-control {
    min-height: 120px
}

.inner-page .lead-copy {
    font-size: 18px !important
}

.inner-page .section h2:not(.h3) {
    font-size: clamp(28px, 3.2vw, 40px) !important
}

/* Force closing row: testimonial 1/3 + CTA 2/3 */
@media (min-width: 992px) {
    .sp-closing-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .sp-closing-grid > .faq-review {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
    }

    .sp-closing-grid > .sp-cta {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
    }
}

/* ===== Contact page ===== */
.sp-contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 64px 0 56px;
    background: #071d2d;
    color: #fff
}

.sp-contact-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/living-room.jpg") center/cover;
    transform: scale(1.02)
}

.sp-contact-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 60% at 85% 20%, rgba(10,155,91,.28), transparent 55%),
        linear-gradient(105deg, rgba(4,22,35,.97) 0%, rgba(4,22,35,.88) 46%, rgba(4,22,35,.55) 100%)
}

.sp-contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 40px;
    align-items: center
}

.sp-contact-copy .sp-kicker {
    color: #55dc98;
    margin-bottom: 14px
}

.sp-contact-copy h1 {
    margin: 0 0 14px;
    color: #fff;
    font: 800 clamp(32px, 4.2vw, 48px)/1.12 "Plus Jakarta Sans", sans-serif;
    letter-spacing: -.02em;
    max-width: 18ch
}

.sp-contact-lead {
    margin: 0 0 20px;
    max-width: 34em;
    color: rgba(255,255,255,.86);
    font-size: 17px;
    line-height: 1.65
}

.sp-contact-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.sp-contact-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.92);
    font: 600 15px/1.45 "Plus Jakarta Sans", sans-serif
}

.sp-contact-points i {
    color: #55dc98;
    font-size: 18px;
    margin-top: 1px
}

.sp-contact-direct {
    display: grid;
    gap: 10px;
    max-width: 420px
}

.sp-contact-direct-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none
}

.sp-contact-direct-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: #fff;
    text-align: left;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
    cursor: pointer;
    width: 100%;
    font: inherit
}

.sp-contact-direct-link:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(85,220,152,.45);
    color: #fff;
    transform: translateY(-1px)
}

.sp-contact-direct-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(10,155,91,.22);
    color: #55dc98;
    flex: none;
    font-size: 18px
}

.sp-contact-direct-link small {
    display: block;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2px
}

.sp-contact-direct-link strong {
    display: block;
    color: #fff;
    font: 700 16px/1.2 "Plus Jakarta Sans", sans-serif
}

.sp-contact-panel {
    display: flex;
    align-items: flex-start;
    height: fit-content
}

.sp-contact-form {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 26px 26px 22px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 24px 50px rgba(0,0,0,.28) !important;
    color: var(--text-dark, #1a2b3c)
}

.sp-contact-form-kicker {
    margin: 0 0 10px;
    color: var(--green, #0a9b5b);
    font: 700 12px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase
}

.sp-contact-form .sp-kicker {
    color: var(--green, #0a9b5b);
    margin-bottom: 8px
}

.sp-contact-form h2 {
    margin: 0 0 6px;
    color: var(--navy, #061b2c);
    font: 800 26px/1.2 "Plus Jakarta Sans", sans-serif
}

.sp-contact-form-lead {
    margin: 0;
    color: #5a6b7a;
    font-size: 14px;
    line-height: 1.5
}

.sp-contact-form-proof {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f3faf6;
    border: 1px solid rgba(10,155,91,.14)
}

.sp-contact-form-stars {
    color: #e6a700;
    letter-spacing: 1px;
    font-size: 13px;
    line-height: 1.4;
    flex: none;
    padding-top: 1px
}

.sp-contact-form-proof p {
    margin: 0;
    color: #3d5163;
    font-size: 13px;
    line-height: 1.45
}

.sp-contact-form-proof strong {
    color: var(--navy, #061b2c)
}

.sp-contact-fields {
    display: grid;
    gap: 12px;
    margin-bottom: 14px
}

.sp-contact-form-perks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px
}

.sp-contact-form-perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3d5163;
    font: 600 13px/1.35 "Plus Jakarta Sans", sans-serif
}

.sp-contact-form-perks i {
    color: var(--green, #0a9b5b);
    font-size: 15px;
    flex: none
}

.sp-contact-form .form-label {
    margin-bottom: 6px;
    font-size: 13px
}

.sp-contact-form .form-control {
    border-radius: 10px;
    border-color: #d5dde4;
    padding: .9rem 1rem;
    transition: border-color .2s ease, box-shadow .2s ease
}

.sp-contact-form .form-control:focus {
    border-color: var(--green, #0a9b5b);
    box-shadow: 0 0 0 .2rem rgba(10,155,91,.16)
}

.sp-contact-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 10px !important;
    font-weight: 750 !important;
    font-size: 16px !important
}

.sp-contact-reassure {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    color: #6a7b8a;
    font-size: 13px;
    line-height: 1.45
}

.sp-contact-reassure i {
    color: var(--green, #0a9b5b);
    margin-top: 2px
}

.sp-contact-form .form-status {
    margin-top: 12px
}

.sp-contact-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(85, 220, 152, .14);
    color: #55dc98;
    font: 700 12px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sp-contact-trust-badge i {
    font-size: 15px
}

.sp-contact-copy h1 span {
    display: block;
    color: #55dc98
}

.sp-contact-benefits {
    display: grid;
    gap: 14px;
    margin: 0 0 28px
}

.sp-contact-benefit {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start
}

.sp-contact-benefit-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    color: #55dc98;
    font-size: 18px
}

.sp-contact-benefit h4 {
    margin: 0 0 4px;
    color: #fff;
    font: 700 15px/1.3 "Plus Jakarta Sans", sans-serif
}

.sp-contact-benefit p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 1.45
}

.sp-contact-form-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px
}

.sp-contact-form-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(10, 155, 91, .12);
    color: var(--green, #0a9b5b);
    font-size: 22px;
    flex-shrink: 0
}

.sp-contact-form-header h2 {
    margin: 0 0 4px
}

.sp-contact-form-header .sp-contact-form-lead {
    margin: 0
}

.sp-contact-input-wrap {
    position: relative
}

.sp-contact-input-icon {
    position: absolute;
    left: 14px;
    top: 38px;
    color: #7a8b9a;
    font-size: 16px;
    pointer-events: none;
    z-index: 1
}

.sp-contact-input-wrap .form-control {
    padding-left: 42px
}

.sp-contact-phone-wrap {
    position: relative
}

.sp-contact-country-code {
    position: absolute;
    right: 0;
    top: 0;
    font: 700 13px/1 "Plus Jakarta Sans", sans-serif;
    color: var(--green, #0a9b5b)
}

.sp-contact-phone-fields {
    display: grid;
    grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
    gap: 10px;
    align-items: start
}

.sp-contact-country-box .form-select {
    min-height: 48px;
    border-radius: 10px;
    border-color: #d7e0e8;
    font-size: 14px
}

.sp-contact-phone-input {
    margin: 0
}

.sp-contact-phone-input .sp-contact-input-icon {
    top: 14px
}

.sp-contact-phone-wrap > .form-label {
    display: block
}

.sp-field-error,
.sp-contact-validation {
    display: block;
    margin-top: 6px;
    font-size: 13px
}

.sp-contact-form .form-control.is-invalid,
.sp-contact-form .form-select.is-invalid {
    border-color: #dc3545
}

.sp-contact-form .form-control.is-valid,
.sp-contact-form .form-select.is-valid {
    border-color: var(--green, #0a9b5b)
}

.sp-contact-steps {
    padding: 64px 0 !important;
    background: #f6f8f7
}

.sp-contact-steps-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px
}

.sp-contact-steps-head .sp-kicker {
    color: var(--green, #0a9b5b)
}

.sp-contact-steps-head h2 {
    margin: 8px 0 0;
    color: var(--navy, #061b2c)
}

.sp-contact-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

.sp-contact-steps-grid article {
    padding: 8px 4px
}

.sp-contact-steps-grid span {
    display: block;
    margin-bottom: 12px;
    color: var(--green, #0a9b5b);
    font: 800 15px/1 "Plus Jakarta Sans", sans-serif;
    letter-spacing: .08em
}

.sp-contact-steps-grid h3 {
    margin: 0 0 8px;
    color: var(--navy, #061b2c);
    font: 750 20px/1.25 "Plus Jakarta Sans", sans-serif
}

.sp-contact-steps-grid p {
    margin: 0;
    color: #5a6b7a;
    font-size: 15px;
    line-height: 1.6
}

.sp-contact-cta {
    padding: 56px 0 !important
}

.sp-contact-cta h2 {
    margin: 0 0 10px;
    color: #fff
}

.sp-contact-cta p {
    margin: 0 0 22px;
    color: rgba(255,255,255,.82);
    font-size: 17px
}

.sp-contact-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center
}

.sp-contact-cta-actions .btn {
    min-width: 200px
}

.sp-contact-cta-actions .sp-btn-outline {
    border-color: rgba(255,255,255,.7);
    color: #fff;
    background: transparent
}

.sp-contact-cta-actions .sp-btn-outline:hover {
    background: #fff;
    color: var(--navy, #061b2c)
}

@media (max-width: 991px) {
    .sp-contact-hero {
        padding: 48px 0 40px
    }

    .sp-contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .sp-contact-copy h1 {
        max-width: none
    }

    .sp-contact-direct {
        max-width: none
    }

    .sp-contact-direct-inline {
        grid-template-columns: 1fr
    }

    .sp-contact-steps-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }
}

@media (max-width: 575px) {
    .sp-contact-form {
        padding: 22px 18px 20px !important
    }

    .sp-contact-phone-fields {
        grid-template-columns: 1fr
    }

    .sp-contact-form-proof {
        flex-direction: column;
        gap: 6px
    }

    .sp-contact-cta-actions .btn {
        width: 100%;
        min-width: 0
    }
}

/* ===== Mobile layout fixes ===== */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important
}

.sp-mobile-contact {
    display: none !important
}

.home-page {
    padding-bottom: 0 !important
}

@media (max-width: 991px) {
    .home-page .container,
    .inner-page .container,
    .home-page .inner-container,
    .inner-page .inner-container,
    .sp-footer .inner-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important
    }

    /* Keep Bootstrap row gutters in sync with the 16px container padding above. */
    .home-page .row,
    .inner-page .row {
        --bs-gutter-x: 32px
    }

    .sp-header .navbar .inner-container,
    .sp-header .container-fluid.inner-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important
    }

    .sp-header .navbar-collapse {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .sp-header-phone {
        white-space: normal;
        font-size: 12px
    }

    .sp-hero,
    .sp-hero-copy,
    .sp-hero-image,
    .sp-section,
    .sp-trust,
    .sp-footer,
    .sl-experience,
    .calculator-section {
        max-width: 100% !important;
        box-sizing: border-box !important
    }

    .sp-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 48px 16px 32px !important
    }

    .sp-hero .sp-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important
    }

    .sp-hero .sp-actions .sp-btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important
    }

    .sp-reassurance {
        display: grid !important;
        gap: 8px !important;
        font-size: 13px !important
    }

    .sp-trust {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin: -24px auto 0 !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important
    }

    .sp-trust > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important
    }

    .sp-trust-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important
    }

    .sp-trust article {
        border-right: 0 !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: 100% !important
    }

    .sp-results-card {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: calc(100% - 32px) !important;
        max-width: 320px !important;
        margin: 16px auto !important;
        box-sizing: border-box !important
    }

    .sl-metric-strip,
    .sl-metric-strip.is-illustrative {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin: 20px auto 0 !important;
        box-sizing: border-box !important
    }
}

@media (max-width: 575px) {
    .sp-trust,
    .sl-metric-strip,
    .sl-metric-strip.is-illustrative {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important
    }

    .sp-hero h1 {
        font-size: clamp(28px, 8vw, 36px) !important
    }
}