:root {
    --blue: #07538c;
    --blue2: #0b78ad;
    --navy: #102f46;
    --green: #63a82f;
    --green2: #8bc34a;
    --ink: #173044;
    --muted: #607889;
    --soft: #f1f8f6;
    --border: #dce9e5;
    --white: #fff
}

* {
    box-sizing: border-box
}

body {
    font-family: Manrope, system-ui, sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.7
}

.site-header {
    box-shadow: 0 5px 25px rgba(16, 47, 70, .08);
    z-index: 1030
}

.brand-logo {
    height: 82px;
    width: auto
}

.navbar {
    min-height: 100px
}

.navbar .nav-link {
    position: relative;
    font-weight: 700;
    color: #29495d;
    padding: .7rem .85rem !important
}

.navbar .nav-link:after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .25rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transform: scaleX(0);
    transition: .25s
}

.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--blue)
}

.navbar .nav-link.active:after {
    transform: scaleX(1)
}

.btn-obiks {
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    border: 0;
    color: #fff;
    border-radius: 999px;
    padding: .78rem 1.35rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(7, 83, 140, .16)
}

.btn-obiks:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-1px)
}

.btn-outline-obiks {
    border: 2px solid var(--blue);
    color: var(--blue);
    border-radius: 999px;
    font-weight: 800;
    padding: .7rem 1.3rem
}

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

.nav-cta.active {
    box-shadow: 0 0 0 3px rgba(99, 168, 47, .25)
}

.home-slider, .home-slider .carousel-item {
    height: 690px
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 48, 75, .92) 0%, rgba(7, 48, 75, .78) 42%, rgba(7, 48, 75, .18) 75%, rgba(7, 48, 75, .05) 100%)
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    color: #fff
}

.hero-content h1 {
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: 1.04;
    letter-spacing: -.03em;
    margin-top: 1rem
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 680px;
    color: rgba(255, 255, 255, .9)
}

.hero-kicker {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .78rem
}

.hero-btn {
    border-radius: 999px;
    padding: .85rem 1.35rem;
    font-weight: 800
}

.carousel-fade .carousel-item {
    transition: opacity 1.4s ease-in-out
}

.carousel-indicators {
    justify-content: flex-start;
    left: calc((100% - 1320px)/2);
    margin-left: 0
}

.carousel-indicators [data-bs-target] {
    width: 34px;
    height: 4px;
    border: 0;
    border-radius: 4px
}

.trust-strip {
    background: #fff;
    box-shadow: 0 8px 35px rgba(16, 47, 70, .08);
    position: relative;
    z-index: 3
}

.trust-item {
    padding: 1.35rem;
    border-right: 1px solid var(--border);
    font-weight: 800;
    color: #36586c
}

.trust-item:last-child {
    border-right: 0
}

.trust-item i {
    color: var(--green);
    font-size: 1.2rem;
    margin-right: .55rem
}

.section-space {
    padding: 6rem 0
}

.bg-soft {
    background: linear-gradient(180deg, #f5faf9, #edf7f4)
}

.eyebrow {
    display: inline-block;
    color: var(--blue);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .78rem
}

.display-section, .section-heading h2 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.1;
    color: var(--navy)
}

.lead-copy {
    font-size: 1.12rem;
    color: #47677a
}

.text-link {
    color: var(--blue);
    font-weight: 800;
    text-decoration: none
}

.text-link:hover {
    color: var(--green)
}

.image-stack {
    position: relative;
    padding: 0 2rem 2rem 0
}

.image-stack .main-img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 28px 70px rgba(16, 47, 70, .17)
}

.experience-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--blue);
    color: #fff;
    border: 8px solid #fff;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.experience-badge strong {
    font-family: "Playfair Display", serif;
    font-size: 2rem
}

.experience-badge span {
    font-size: .85rem
}

.section-heading {
    max-width: 760px
}

.section-heading p {
    color: var(--muted);
    font-size: 1.05rem
}

.service-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 1.5rem;
    transition: .3s;
    box-shadow: 0 10px 35px rgba(18, 59, 93, .05)
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 55px rgba(18, 59, 93, .13);
    border-color: #b7dacd
}

.service-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e8f6ee, #f2f9e9);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    margin-bottom: 1.25rem
}

.service-card h3 {
    font-size: 1.22rem;
    font-weight: 800
}

.service-card p {
    color: var(--muted)
}

.service-card span {
    color: var(--blue);
    font-weight: 800
}

.why-section {
    background: #fff
}

.why-card {
    height: 100%;
    padding: 1.8rem;
    border-radius: 1.4rem;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 35px rgba(18, 59, 93, .05)
}

.why-card i {
    font-size: 1.6rem;
    color: var(--green);
    margin-bottom: 1rem
}

.why-card h3 {
    font-weight: 800;
    font-size: 1.2rem
}

.why-card p {
    color: var(--muted);
    margin: 0
}

.photo-cta {
    position: relative;
    padding: 7rem 0;
    color: #fff;
    overflow: hidden
}

.photo-cta-bg, .photo-cta-overlay {
    position: absolute;
    inset: 0
}

.photo-cta-bg {
    background-size: cover;
    background-position: center 40%
}

.photo-cta-overlay {
    background: linear-gradient(90deg, rgba(7, 48, 75, .94), rgba(7, 83, 140, .72), rgba(7, 83, 140, .15))
}

.photo-cta h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2.4rem, 4vw, 4rem);
    margin: .8rem 0
}

.photo-cta p {
    font-size: 1.12rem;
    max-width: 650px
}

.page-hero {
    padding: 7rem 0 6rem;
    background: linear-gradient(135deg, #edf7fa, #edf7f2);
    position: relative;
    overflow: hidden
}

.page-hero-photo {
    color: #fff;
    background-image: linear-gradient(90deg, rgba(8, 48, 73, .9), rgba(8, 48, 73, .58), rgba(8, 48, 73, .25)), var(--banner-image);
    background-size: cover;
    background-position: center;
    min-height: 390px;
    display: flex;
    align-items: center
}

.page-hero-photo:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 7px;
    background: linear-gradient(90deg, var(--blue), var(--green), var(--blue2))
}

.page-hero h1 {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: clamp(2.7rem, 5vw, 4.7rem);
    letter-spacing: -.025em;
    max-width: 850px
}

.page-hero p {
    max-width: 720px;
    font-size: 1.15rem;
    color: inherit;
    opacity: .92
}

.content-card, .form-shell {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.6rem;
    padding: 2.25rem;
    box-shadow: 0 16px 45px rgba(18, 59, 93, .07)
}

.form-control, .form-select {
    border-radius: .85rem;
    padding: .85rem 1rem;
    border-color: #d4e3df;
    min-height: 52px
}

.form-control:focus, .form-select:focus {
    border-color: #72b99a;
    box-shadow: 0 0 0 .2rem rgba(99, 168, 47, .13)
}

.form-label {
    font-weight: 700
}

.form-security {
    color: #5f7887;
    font-size: .9rem
}

.form-security i {
    color: var(--green)
}

.mini-trust>div {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0
}

.mini-trust i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf5ee;
    color: var(--green)
}

.mini-trust span {
    display: flex;
    flex-direction: column
}

.mini-trust small {
    color: var(--muted)
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #d4e3df !important;
    border-radius: .85rem !important;
    min-height: 56px;
    padding: 7px
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #72b99a !important;
    box-shadow: 0 0 0 .2rem rgba(99, 168, 47, .13)
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #eaf5ee !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 4px 10px 4px 22px !important
}

.select2-dropdown {
    border-color: #d4e3df !important;
    border-radius: .8rem !important;
    overflow: hidden
}

.select2-search__field {
    outline: 0
}

.service-detail-body {
    font-size: 1.05rem
}

.service-benefit {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border)
}

.service-benefit i {
    color: var(--green);
    margin-right: .6rem
}

.social-links {
    display: flex;
    gap: .65rem
}

.social-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.05rem;
    transition: .2s
}

.social-link:hover {
    background: var(--green);
    transform: translateY(-2px)
}

.footer {
    background: #082f4b;
    color: #fff;
    margin-top: 0 !important
}

.footer a {
    color: #d8e8ef;
    text-decoration: none;
    line-height: 2
}

.footer a:hover {
    color: #fff
}

.footer-logo {
    height: 82px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .96
}

.footer-tagline {
    font-family: "Playfair Display", serif;
    font-size: 1.25rem
}

.soft-credit img {
    height: 22px;
    width: auto;
    margin: 0 .3rem
}

.text-obiks {
    color: var(--green)
}

@media(max-width:991px) {
    .brand-logo {
        height: 68px
    }

    .navbar {
        min-height: auto
    }

    .home-slider, .home-slider .carousel-item {
        height: 620px
    }

    .hero-overlay {
        background: rgba(7, 48, 75, .75)
    }

    .hero-content {
        text-align: center
    }

    .hero-content .row {
        width: 100%
    }

    .hero-content p {
        margin-inline: auto
    }

    .hero-content .d-flex {
        justify-content: center
    }

    .trust-item {
        border-bottom: 1px solid var(--border)
    }

    .section-space {
        padding: 4.5rem 0
    }

    .image-stack .main-img {
        height: 430px
    }

    .page-hero-photo {
        min-height: 330px
    }

    .carousel-indicators {
        left: 0;
        justify-content: center
    }
}

@media(max-width:576px) {
    .brand-logo {
        height: 58px
    }

    .home-slider, .home-slider .carousel-item {
        height: 640px
    }

    .hero-content h1 {
        font-size: 2.8rem
    }

    .hero-content p {
        font-size: 1rem
    }

    .carousel-control-prev, .carousel-control-next {
        display: none
    }

    .trust-item {
        padding: 1rem .4rem;
        font-size: .82rem
    }

    .trust-item i {
        display: block;
        margin: 0 auto .35rem
    }

    .section-space {
        padding: 3.75rem 0
    }

    .image-stack {
        padding: 0
    }

    .image-stack .main-img {
        height: 360px
    }

    .experience-badge {
        width: 120px;
        height: 120px;
        right: -4px;
        bottom: -25px
    }

    .page-hero {
        padding: 5rem 0
    }

    .content-card, .form-shell {
        padding: 1.35rem
    }

    .photo-cta {
        padding: 5rem 0
    }
}


/* ===== Obiks visual refinement v3 ===== */
body {
    padding-top: 0
}

.site-header.floating-header {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    background: transparent !important;
    box-shadow: none;
    z-index: 1040;
    transition: .35s ease
}

.site-header .nav-shell {
    max-width: 1500px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 28px;
    padding: .15rem 1.35rem;
    box-shadow: 0 18px 55px rgba(16, 47, 70, .13);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: .35s ease
}

.site-header .navbar {
    min-height: 92px;
    transition: .35s ease
}

.site-header .brand-logo {
    height: 78px;
    transition: .35s ease
}

.site-header.is-scrolled {
    top: 0;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 7px 28px rgba(16, 47, 70, .11)
}

.site-header.is-scrolled .nav-shell {
    max-width: 100%;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    padding-top: 0;
    padding-bottom: 0
}

.site-header.is-scrolled .navbar {
    min-height: 76px
}

.site-header.is-scrolled .brand-logo {
    height: 62px
}

.site-header+.home-slider, .site-header+main {}

.home-slider {
    padding-top: 0
}

.page-hero {
    padding-top: 10rem
}

.page-hero-photo {
    min-height: 500px
}

.page-hero-photo .container {
    z-index: 2
}

.page-hero-photo:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 48, 75, .88), rgba(7, 48, 75, .57) 52%, rgba(7, 48, 75, .14));
    z-index: 0
}

.page-hero-photo {
    background-image: var(--banner-image);
}

.page-hero-photo>* {
    position: relative
}

.home-slider, .home-slider .carousel-item {
    height: 760px
}

.hero-content {
    padding-top: 82px
}

.photo-cta-fixed .photo-cta-bg {
    background-attachment: fixed;
    background-position: center center
}

.footer-heading {
    position: relative;
    color: #fff !important;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 1.15rem;
    padding-bottom: .65rem
}

.footer-heading:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--green2), #5bd1bd)
}

.request-care-section {
    background: linear-gradient(180deg, #fff, #f5faf8)
}

.request-care-aside {
    position: relative
}

.request-care-aside h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.4rem;
    color: var(--navy)
}

.request-care-section .form-shell {
    position: relative;
    box-shadow: 0 28px 70px rgba(18, 59, 93, .11);
    border-top: 4px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--green), #45c0ad, var(--blue)) border-box
}

.request-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    border-top: 1px dashed #d6e6e0;
    margin-top: 2rem;
    padding-top: 1.2rem
}

.request-steps span {
    text-align: center;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.35
}

.request-steps b {
    display: grid;
    place-items: center;
    margin: 0 auto .5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e5f5ee;
    color: var(--green);
    font-size: .78rem
}

.content-card, .form-shell, .service-card, .why-card, .step-card {
    transition: transform .28s ease, box-shadow .28s ease
}

.content-card:hover, .why-card:hover, .step-card:hover {
    box-shadow: 0 24px 60px rgba(18, 59, 93, .10)
}

@media(max-width:991.98px) {
    .site-header.floating-header {
        top: 10px
    }

    .site-header .nav-shell {
        margin-left: 14px;
        margin-right: 14px;
        border-radius: 22px;
        padding: .15rem .8rem
    }

    .site-header .navbar {
        min-height: 78px
    }

    .site-header .brand-logo {
        height: 62px
    }

    .site-header .navbar-collapse {
        background: rgba(255, 255, 255, .98);
        border-radius: 18px;
        padding: 1rem;
        margin-top: .5rem;
        box-shadow: 0 18px 45px rgba(16, 47, 70, .12)
    }

    .site-header.is-scrolled .nav-shell {
        margin-left: 0;
        margin-right: 0
    }

    .home-slider, .home-slider .carousel-item {
        height: 680px
    }

    .hero-content {
        padding-top: 70px
    }

    .page-hero {
        padding-top: 8.5rem
    }

    .page-hero-photo {
        min-height: 430px
    }

    .photo-cta-fixed .photo-cta-bg {
        background-attachment: scroll
    }

    .request-steps {
        margin-bottom: 1.5rem
    }
}

@media(max-width:575.98px) {
    .site-header.floating-header {
        top: 8px
    }

    .site-header .nav-shell {
        margin-left: 8px;
        margin-right: 8px;
        border-radius: 18px
    }

    .site-header .brand-logo {
        height: 54px
    }

    .home-slider, .home-slider .carousel-item {
        height: 650px
    }

    .hero-content h1 {
        font-size: 2.75rem
    }

    .page-hero-photo {
        min-height: 400px
    }

    .page-hero h1 {
        font-size: 2.65rem
    }

    .request-steps {
        grid-template-columns: 1fr
    }

    .request-steps span {
        display: flex;
        align-items: center;
        text-align: left;
        gap: .6rem
    }

    .request-steps b {
        margin: 0
    }
}

/* ===== Obiks visual refinement v4 ===== */
.site-header .nav-shell {
    width: calc(100% - 64px);
    max-width: 1320px;
    margin-inline: auto;
    border-radius: 32px
}

.site-header .navbar .nav-link {
    border-radius: 999px;
    padding: .62rem 1rem !important;
    transition: color .22s ease, background .22s ease, box-shadow .22s ease
}

.site-header .navbar .nav-link:hover {
    background: rgba(99, 168, 47, .07);
    color: var(--green)
}

.site-header .navbar .nav-link.active {
    color: #08715e;
    background: linear-gradient(135deg, rgba(99, 168, 47, .14), rgba(11, 120, 173, .08));
    box-shadow: inset 0 0 0 1px rgba(99, 168, 47, .12)
}

.site-header .navbar .nav-link.active:after {
    left: 1rem;
    right: 1rem;
    bottom: .12rem;
    height: 3px;
    background: linear-gradient(90deg, var(--green), #36b6a0)
}

.site-header.is-scrolled .nav-shell {
    width: 100%;
    max-width: 100%
}

.site-header.is-scrolled .navbar .nav-link.active {
    background: rgba(99, 168, 47, .1)
}

.form-shell.form-soft, .request-care-section .form-shell {
    background: linear-gradient(145deg, #f3faf7, #f4f8fc);
    border-color: #d7e8e2
}

.form-shell.form-soft .form-control, .form-shell.form-soft .form-select, .request-care-section .form-control, .request-care-section .form-select {
    background: #fff
}

.request-care-section .select2-container--default .select2-selection--multiple {
    background: #fff
}

.how-intro {
    max-width: 800px;
    margin: 0 auto 3.5rem;
    text-align: center
}

.care-journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.15rem
}

.care-journey:before {
    content: "";
    position: absolute;
    top: 55px;
    left: 9%;
    right: 9%;
    height: 2px;
    background: linear-gradient(90deg, #d8ebe4, var(--green), #49b8a6, var(--blue), #d8ebe4);
    z-index: 0
}

.journey-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 .25rem
}

.journey-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #d9e9e4;
    color: #08746d;
    font-size: 1.45rem;
    box-shadow: 0 12px 35px rgba(16, 47, 70, .09)
}

.journey-number {
    position: absolute;
    top: -8px;
    right: calc(50% - 42px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--green), #36b6a0);
    color: #fff;
    font-weight: 800;
    font-size: .75rem;
    border: 3px solid #fff
}

.journey-step h3 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: .55rem
}

.journey-step p {
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.55
}

.how-feature {
    background: linear-gradient(145deg, #edf8f4, #eef6fb);
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: 2.5rem
}

.how-feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--green);
    font-size: 1.25rem;
    box-shadow: 0 10px 25px rgba(16, 47, 70, .08)
}

.how-cta {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    background: linear-gradient(120deg, #083b5b, #07538c 58%, #178c83);
    color: #fff;
    padding: 3.25rem
}

.how-cta h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 3.5vw, 3.2rem)
}

@media(max-width:1199.98px) {
    .site-header .nav-shell {
        width: calc(100% - 36px);
        max-width: 1140px
    }

    .site-header .navbar .nav-link {
        padding: .58rem .72rem !important
    }
}

@media(max-width:991.98px) {
    .site-header .nav-shell {
        width: calc(100% - 28px)
    }

    .care-journey {
        grid-template-columns: 1fr 1fr;
        gap: 1rem
    }

    .care-journey:before {
        display: none
    }

    .journey-step {
        text-align: left;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 1.3rem;
        padding: 1.35rem 1.35rem 1.2rem 5.7rem;
        min-height: 150px;
        box-shadow: 0 10px 30px rgba(16, 47, 70, .05)
    }

    .journey-icon {
        position: absolute;
        left: 1.25rem;
        top: 1.35rem;
        width: 58px;
        height: 58px;
        margin: 0
    }

    .journey-number {
        top: 1.05rem;
        left: 4.3rem;
        right: auto;
        width: 25px;
        height: 25px
    }

    .site-header.is-scrolled .nav-shell {
        width: 100%
    }
}

@media(max-width:575.98px) {
    .site-header .nav-shell {
        width: calc(100% - 16px)
    }

    .care-journey {
        grid-template-columns: 1fr
    }

    .how-feature, .how-cta {
        padding: 1.6rem
    }

    .journey-step {
        padding-left: 5.3rem
    }
}

/* ===== Obiks content & contact enhancement v5 ===== */
.home-purpose {
    background: #fff
}

.purpose-photo {
    position: relative
}

.purpose-photo img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 26px 65px rgba(16, 47, 70, .14)
}

.purpose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem
}

.purpose-card {
    border-radius: 1.5rem;
    padding: 1.7rem;
    height: 100%
}

.purpose-card.mission {
    background: linear-gradient(145deg, #073f66, #0b78ad);
    color: #fff
}

.purpose-card.vision {
    background: linear-gradient(145deg, #edf8f2, #e8f5f1);
    border: 1px solid #d3e8df
}

.purpose-card i {
    font-size: 1.4rem;
    margin-bottom: 1rem
}

.purpose-card.mission i {
    color: #a8df72
}

.purpose-card.vision i {
    color: var(--green)
}

.purpose-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.65rem
}

.purpose-card p {
    margin: 0
}

.family-reassurance {
    background: linear-gradient(135deg, #082f4b, #07538c 58%, #178c83);
    color: #fff
}

.family-reassurance .display-section {
    color: #fff
}

.family-benefit {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin: 1rem 0
}

.family-benefit i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    color: #b8ef86
}

.family-benefit strong {
    display: block
}

.family-benefit span {
    color: rgba(255, 255, 255, .78);
    font-size: .92rem
}

.home-care-signs {
    background: #f5faf8
}

.sign-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.35rem;
    box-shadow: 0 10px 30px rgba(16, 47, 70, .05)
}

.sign-card i {
    color: var(--green);
    margin-right: .55rem
}

.sign-card strong {
    color: var(--navy)
}

.contact-intro {
    max-width: 760px
}

.contact-method {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border)
}

.contact-method:last-child {
    border-bottom: 0
}

.contact-method-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e8f6ee, #edf6fb);
    color: var(--green);
    font-size: 1.1rem
}

.contact-method strong {
    display: block;
    color: var(--navy)
}

.contact-method a {
    color: var(--blue);
    text-decoration: none
}

.contact-reassurance {
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.35rem;
    padding: 1.45rem;
    box-shadow: 0 10px 30px rgba(16, 47, 70, .05)
}

.contact-reassurance i {
    font-size: 1.3rem;
    color: var(--green);
    margin-bottom: .85rem
}

.contact-reassurance h3 {
    font-size: 1.05rem;
    font-weight: 800
}

.contact-reassurance p {
    font-size: .92rem;
    color: var(--muted);
    margin: 0
}

.contact-form-title {
    font-family: "Playfair Display", serif;
    color: var(--navy);
    font-size: 2rem
}

.contact-hours {
    background: linear-gradient(145deg, #edf8f4, #eef6fb);
    border-radius: 1.5rem;
    padding: 1.7rem
}

.contact-final-cta {
    background: linear-gradient(120deg, #083b5b, #07538c 58%, #178c83);
    color: #fff;
    border-radius: 2rem;
    padding: 2.8rem
}

.contact-final-cta h2 {
    font-family: "Playfair Display", serif
}

@media(max-width:991.98px) {
    .purpose-grid {
        grid-template-columns: 1fr
    }

    .purpose-photo img {
        height: 430px
    }
}

@media(max-width:575.98px) {
    .purpose-photo img {
        height: 340px
    }

    .contact-final-cta {
        padding: 1.7rem
    }
}

/* ===== Obiks About + Services refinement v6 ===== */
.about-photo-wrap {
    position: relative
}

.about-photo-wrap img {
    width: 100%;
    height: 590px;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 28px 70px rgba(16, 47, 70, .14)
}

.about-photo-note {
    position: absolute;
    right: -24px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: #fff;
    border-radius: 1.2rem;
    padding: 1rem 1.3rem;
    box-shadow: 0 18px 45px rgba(16, 47, 70, .15);
    color: var(--navy)
}

.about-photo-note i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf7ef;
    color: var(--green)
}

.about-mission-section {
    background: linear-gradient(180deg, #f6faf9, #fff)
}

.about-purpose-card {
    height: 100%;
    border-radius: 2rem;
    padding: 2.4rem;
    position: relative;
    overflow: hidden
}

.about-purpose-card:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -70px;
    top: -70px;
    background: rgba(255, 255, 255, .08)
}

.about-purpose-card.mission {
    background: linear-gradient(135deg, #073f66, #0b78ad);
    color: #fff
}

.about-purpose-card.vision {
    background: linear-gradient(135deg, #edf8f2, #dff2eb);
    color: var(--navy);
    border: 1px solid #d3e8df
}

.about-purpose-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin-bottom: 1.4rem;
    background: rgba(255, 255, 255, .14);
    font-size: 1.35rem
}

.about-purpose-card.vision .about-purpose-icon {
    background: #fff;
    color: var(--green)
}

.about-purpose-card>span {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .76rem;
    font-weight: 800
}

.about-purpose-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    margin: 1rem 0
}

.about-value-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    padding: 1.55rem;
    box-shadow: 0 12px 35px rgba(16, 47, 70, .05);
    transition: .25s ease
}

.about-value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(16, 47, 70, .09)
}

.about-value-card i {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #eaf7ef;
    color: var(--green);
    margin-bottom: 1rem
}

.about-value-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy)
}

.about-value-card p {
    color: var(--muted);
    margin: 0
}

.about-cta {
    border-radius: 2rem;
    background: linear-gradient(120deg, #083b5b, #07538c 58%, #178c83);
    color: #fff;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem
}

.about-cta h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 3.5vw, 3.1rem);
    max-width: 750px
}

.about-cta p {
    max-width: 760px;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 0
}

.services-intro {
    padding-bottom: 2.5rem
}

.services-showcase {
    background: linear-gradient(180deg, #fff, #f6faf9)
}

.services-editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

.service-editorial-card {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    min-height: 285px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 1.6rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 12px 35px rgba(16, 47, 70, .06);
    transition: transform .28s ease, box-shadow .28s ease
}

.service-editorial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 55px rgba(16, 47, 70, .12)
}

.service-editorial-card.image-left .service-editorial-copy {
    order: 2
}

.service-editorial-card.image-left .service-editorial-image {
    order: 1
}

.service-editorial-copy {
    padding: 1.65rem;
    position: relative
}

.service-editorial-image {
    background-size: cover;
    background-position: center;
    min-height: 100%
}

.service-mini-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #edf8f3;
    color: var(--green);
    margin-bottom: 1rem
}

.service-number {
    position: absolute;
    right: 1.4rem;
    top: 1.3rem;
    color: #dbe8e4;
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    font-weight: 700
}

.service-editorial-copy h3 {
    font-family: "Playfair Display", serif;
    font-size: 1.45rem;
    color: var(--navy);
    padding-right: 2rem
}

.service-editorial-copy p {
    font-size: .93rem;
    color: var(--muted);
    line-height: 1.6
}

.service-learn {
    font-weight: 800;
    color: var(--blue);
    font-size: .88rem
}

.service-editorial-card:hover .service-learn {
    color: var(--green)
}

.services-help {
    padding-top: 3rem
}

.services-help-card {
    background: linear-gradient(120deg, #073f66, #075b8f 55%, #178c83);
    color: #fff;
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem
}

.services-help-card h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 3vw, 3rem)
}

.services-help-card p {
    max-width: 720px;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 0
}

@media(max-width:1199.98px) {
    .services-editorial-grid {
        grid-template-columns: 1fr
    }

    .service-editorial-card {
        min-height: 250px
    }

    .about-photo-note {
        right: 18px
    }
}

@media(max-width:991.98px) {
    .about-photo-wrap img {
        height: 460px
    }

    .about-cta, .services-help-card {
        display: block
    }

    .about-cta .d-flex, .services-help-card .d-flex {
        margin-top: 1.5rem
    }
}

@media(max-width:575.98px) {
    .about-photo-wrap img {
        height: 350px
    }

    .about-photo-note {
        left: 16px;
        right: 16px;
        bottom: 16px
    }

    .about-purpose-card, .about-cta, .services-help-card {
        padding: 1.6rem
    }

    .service-editorial-card {
        grid-template-columns: 1fr
    }

    .service-editorial-image {
        min-height: 210px;
        order: 1 !important
    }

    .service-editorial-copy {
        order: 2 !important
    }
}

/* Added */
/* =========================================================
   SERVICES - CLEAN ICON CARD LAYOUT
   ========================================================= */

.services-no-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.services-no-images .service-card-clean {
    display: block;
    position: relative;
    min-height: 300px;
    background: #ffffff;
    border: 1px solid rgba(13, 83, 114, 0.10);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 35px rgba(19, 57, 76, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Green accent at top */
.services-no-images .service-card-clean::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--obiks-green, #58ad2f),
        var(--obiks-blue, #0876a8)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.services-no-images .service-card-clean:hover {
    transform: translateY(-7px);
    border-color: rgba(46, 145, 99, 0.25);
    box-shadow: 0 20px 45px rgba(19, 57, 76, 0.12);
}

.services-no-images .service-card-clean:hover::before {
    opacity: 1;
}

.services-no-images .service-editorial-copy {
    width: 100%;
    height: 100%;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

/* Icon + number row */
.service-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.services-no-images .service-mini-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(49, 159, 105, 0.12),
        rgba(8, 118, 168, 0.10)
    );
    color: var(--obiks-green, #319f69);
    font-size: 23px;
}

.services-no-images .service-number {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(17, 57, 78, 0.35);
}

.services-no-images h3 {
    color: #12384d;
    font-size: 1.35rem;
    line-height: 1.3;
    margin-bottom: 14px;
}

.services-no-images p {
    color: #607783;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
}

.services-no-images .service-learn {
    color: var(--obiks-blue, #0876a8);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.services-no-images .service-learn i {
    transition: transform 0.25s ease;
}

.services-no-images .service-card-clean:hover .service-learn i {
    transform: translateX(5px);
}


/* Tablet */
@media (max-width: 991.98px) {

    .services-no-images {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* Mobile */
@media (max-width: 767.98px) {

    .services-no-images {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .services-no-images .service-card-clean {
        min-height: auto;
    }

    .services-no-images .service-editorial-copy {
        padding: 26px;
    }
}
/* ===== OBIKS CMS BACKEND ===== */
.admin-body{background:#f4f8fa;color:#16384b}.admin-shell{display:flex;min-height:100vh}.admin-sidebar{width:255px;background:#0b3853;padding:28px 18px;position:fixed;inset:0 auto 0 0;color:#fff}.admin-brand{display:block;padding:0 10px 25px}.admin-brand img{width:155px;filter:brightness(0) invert(1)}.admin-sidebar nav{display:flex;flex-direction:column;gap:6px}.admin-sidebar nav a{color:#dceaf0;text-decoration:none;padding:12px 14px;border-radius:12px;font-weight:600}.admin-sidebar nav a:hover{background:rgba(255,255,255,.09);color:#fff}.admin-sidebar nav a i{width:25px;color:#70c59c}.admin-sidebar nav a.disabled{opacity:.45;pointer-events:none}.admin-nav-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#83a8b8;margin:18px 14px 4px}.admin-main{margin-left:255px;width:calc(100% - 255px);min-height:100vh}.admin-toolbar{height:78px;background:#fff;border-bottom:1px solid #e2ebef;display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:10}.admin-toolbar>div{display:flex;flex-direction:column}.admin-kicker{font-size:.68rem;letter-spacing:.14em;color:#2b9c6a;font-weight:800}.admin-content{padding:34px}.admin-page-title{font-family:Georgia,serif;font-weight:700;color:#103b55}.admin-stat-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e0eaee;border-radius:18px;padding:22px;text-decoration:none;color:#173d51;box-shadow:0 8px 28px rgba(15,55,76,.05);transition:.25s}.admin-stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(15,55,76,.09)}.admin-stat-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#eaf7f1;color:#218b61;font-size:1.25rem}.admin-stat-card small{display:block;color:#6f8793}.admin-stat-card strong{display:block;font-size:1.7rem}.admin-panel{background:#fff;border:1px solid #e0eaee;border-radius:18px;padding:24px;box-shadow:0 8px 28px rgba(15,55,76,.04)}.admin-footer{padding:20px 34px;text-align:right;color:#78909c;font-size:.82rem}.admin-footer img{height:22px;margin:0 4px}@media(max-width:900px){.admin-sidebar{width:78px;padding:22px 10px}.admin-brand img{width:50px}.admin-sidebar nav a{font-size:0;text-align:center}.admin-sidebar nav a i{font-size:1.1rem;width:auto}.admin-nav-label{display:none}.admin-main{margin-left:78px;width:calc(100% - 78px)}.admin-content{padding:22px}.admin-toolbar{padding:0 22px}}

/* Route-aware public navigation active state */
.site-header .navbar-nav .nav-link.active{background:#dcefe8!important;color:#087c59!important;border-radius:999px;font-weight:800;padding-left:16px!important;padding-right:16px!important}.site-header .navbar-nav .nav-link.active:hover{background:#c6e7d8!important}.soft-credit a{color:inherit;text-decoration:none}.soft-credit a:hover{text-decoration:underline}

/* Explicit current-page nav state; overrides the default navbar styling. */
.site-header .navbar-nav .nav-item > a.nav-link.active,.site-header .navbar-nav .nav-item > a.nav-link[aria-current="page"]{background:#dcefe8!important;color:#087c59!important;border-radius:999px!important;font-weight:800!important;box-shadow:inset 0 0 0 1px #c2e3d2!important}.site-header .navbar-nav .nav-item > a.nav-link.active::after{display:none!important}

/* Active navigation - final overrides */
.site-header .navbar-nav a.nav-link.active,.site-header .navbar-nav a.nav-link[aria-current="page"]{background:#dcefe8!important;color:#087c59!important;border-radius:999px!important;font-weight:800!important;box-shadow:inset 0 0 0 1px #b4dec9!important;}
.site-header .navbar-nav a.nav-link.active:after{display:none!important;}

/* Footer refresh: a balanced top grid and dedicated business-hours band */
.footer-primary-row{align-items:start}.footer-primary-row>div{min-width:0}.footer-primary-row .footer-logo{max-width:100%;height:auto;max-height:74px}.footer-primary-row .footer-heading{margin-bottom:1.25rem}.footer-primary-row p{overflow-wrap:anywhere}.footer-hours{border-top:1px solid rgba(255,255,255,.15);display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;color:#c6dbe6}.footer-hours-label{color:#fff;white-space:nowrap}.footer-hours-days{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:5px}.footer-hours-days>div{font-size:.84rem}.footer .social-links{margin-top:1.25rem!important}@media(max-width:767px){.footer-hours{display:block}.footer-hours-days{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.footer-primary-row{row-gap:2rem!important}}