/* Premium ONKOD public presentation for home, services, workers, about, vehicles, and sales.
   Loaded from the public header. Selectors stay more specific than page style blocks. */

body.onkod-public {
    --ok-navy: #102a43;
    --ok-navy-deep: #081b2c;
    --ok-ink: #162433;
    --ok-muted: #5d6d7e;
    --ok-gold: #b58a42;
    --ok-gold-deep: #8d6a2e;
    --ok-gold-soft: #f6efe3;
    --ok-paper: #f7f5f1;
    --ok-line: #e6e0d6;
    --ok-card: #ffffff;
    --ok-shadow: 0 14px 34px rgba(16, 42, 67, .08);
    --ok-radius: 1.15rem;
}

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) {
    background:
        radial-gradient(ellipse 70% 42% at 100% -8%, rgba(181, 138, 66, .14), transparent 52%),
        radial-gradient(ellipse 48% 32% at -6% 18%, rgba(16, 42, 67, .05), transparent 46%),
        var(--ok-paper);
    color: var(--ok-ink);
}

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) main.public-main {
    background: transparent;
}

body.onkod-public main.public-main:is(
    :has(.hero-section),
    :has(.about-hero)
) {
    padding-top: 0 !important;
}

/* ------------------------------------------------------------------ navbar */

body.onkod-public .main-navbar {
    background: rgba(8, 27, 44, .96) !important;
    border-bottom: 1px solid rgba(181, 138, 66, .35);
    backdrop-filter: blur(14px);
}

body.onkod-public .main-navbar .nav-link {
    font-size: .92rem;
    letter-spacing: .01em;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    body.onkod-public .main-navbar {
        padding-top: .7rem !important;
        padding-bottom: .7rem !important;
    }

    body.onkod-public .main-navbar .container {
        width: min(100% - 1.5rem, 1540px);
    }

    body.onkod-public .navbar-brand .brand-logo-shell {
        width: 9.4rem;
        height: 3.2rem;
    }

    body.onkod-public .main-navbar .nav-link {
        font-size: .8rem;
        padding: .4rem .38rem !important;
    }

    body.onkod-public .main-navbar .btn-nav-book {
        padding: .5rem .9rem !important;
    }
}

body.onkod-public .main-navbar .nav-link:hover,
body.onkod-public .main-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(181, 138, 66, .16);
    border-bottom-color: var(--ok-gold);
}

body.onkod-public .main-navbar .btn-nav-book {
    background: var(--ok-gold) !important;
    color: #fff !important;
    border-radius: .7rem !important;
    box-shadow: 0 8px 18px rgba(141, 106, 46, .28);
}

body.onkod-public .main-navbar .btn-nav-book:hover {
    background: var(--ok-gold-deep) !important;
}

@media (max-width: 1399.98px) {
    body.onkod-public .navbar-nav .nav-link {
        border-left: 3px solid transparent;
    }

    body.onkod-public .navbar-nav .nav-link.active,
    body.onkod-public .navbar-nav .nav-link:hover {
        border-left-color: var(--ok-gold);
        background: var(--ok-gold-soft);
        color: var(--ok-navy) !important;
    }
}

/* ------------------------------------------------------------------ type */

body.onkod-public :is(
    .hero-section,
    .about-page,
    .services-page,
    .workers-section,
    .vehicle-hero,
    .vehicles-page,
    .sales-page,
    .home-intro,
    .home-featured,
    .home-workers,
    .home-values,
    .home-mv-section,
    .services-section,
    .why-section,
    .testimonials-section,
    .home-promo,
    .stats-section,
    .cta-section
) :is(h1, h2, h3, h4) {
    letter-spacing: -.03em;
    color: var(--ok-navy);
}

body.onkod-public .eyebrow {
    color: var(--ok-gold-deep);
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.onkod-public .page-hero-copy h1 {
    color: var(--ok-navy) !important;
    font-weight: 700;
    letter-spacing: -.035em;
    text-wrap: balance;
}

body.onkod-public .page-hero-copy h1::after {
    content: "";
    display: block;
    width: 3.4rem;
    height: 3px;
    margin: .9rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ok-gold-deep), #e6d2a4);
}

body.onkod-public .sales-page .page-hero-copy {
    max-width: 40rem;
}

body.onkod-public .sales-page .page-hero-copy h1::after {
    margin-left: 0;
}

body.onkod-public .page-hero-copy p {
    color: var(--ok-muted);
    max-width: 42rem;
}

body.onkod-public .services-page .page-hero-copy p,
body.onkod-public .workers-section .page-hero-copy p {
    margin-inline: auto;
}

/* ------------------------------------------------------------------ buttons */

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) :is(.btn-primary, .btn-prop-book) {
    background: var(--ok-navy) !important;
    border-color: var(--ok-navy) !important;
    color: #fff !important;
    border-radius: .75rem !important;
    font-weight: 650;
}

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) :is(.btn-primary, .btn-prop-book):hover {
    background: var(--ok-gold) !important;
    border-color: var(--ok-gold) !important;
    color: #fff !important;
}

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) :is(.btn-outline-primary, .btn-prop-details, .btn-view) {
    background: #fff !important;
    border: 1px solid #d9d0c2 !important;
    color: var(--ok-navy) !important;
    border-radius: .75rem !important;
    font-weight: 650;
}

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) :is(.btn-outline-primary, .btn-prop-details, .btn-view):hover {
    background: var(--ok-navy) !important;
    border-color: var(--ok-navy) !important;
    color: #fff !important;
}

body.onkod-public :is(.services-page, .workers-section, .vehicles-page, .sales-page, .home-featured) .btn {
    min-height: 2.7rem;
}

body.onkod-public .btn:focus-visible,
body.onkod-public .nav-link:focus-visible,
body.onkod-public .filter-btn:focus-visible,
body.onkod-public .filter-pill:focus-visible {
    outline: 3px solid rgba(181, 138, 66, .55);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ home */

body.onkod-public .hero-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 4.25rem;
    height: auto;
    min-height: clamp(32rem, 78vh, 46rem);
    border-radius: 0 0 2rem 2rem;
    align-items: center;
    box-shadow: 0 22px 48px rgba(8, 27, 44, .16);
}

body.onkod-public .hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 18, 32, .78) 0%, rgba(8, 27, 44, .42) 52%, rgba(8, 27, 44, .12) 100%);
}

body.onkod-public .hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: clamp(2.5rem, 6vw, 5.25rem) clamp(1.25rem, 4vw, 4rem);
}

body.onkod-public .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    color: #ead7b1;
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.onkod-public .hero-kicker::before {
    content: "";
    width: 2rem;
    height: 2px;
    background: var(--ok-gold);
}

body.onkod-public .hero-content h1 {
    max-width: 14ch;
    margin-bottom: 1rem;
    color: #fff;
    font-size: clamp(2.35rem, 5.2vw, 4.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-wrap: balance;
}

body.onkod-public .hero-content p {
    max-width: 38rem;
    margin-bottom: 1.75rem;
    color: #e7eef6;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
}

body.onkod-public .hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

body.onkod-public .hero-btns .btn {
    margin: 0;
    min-height: 3rem;
    padding: .85rem 1.45rem;
    border-radius: .75rem;
}

body.onkod-public .btn-explore {
    background: var(--ok-gold) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 12px 24px rgba(141, 106, 46, .28);
}

body.onkod-public .btn-explore:hover {
    background: var(--ok-gold-deep) !important;
    color: #fff !important;
}

body.onkod-public .btn-contact-hero {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
}

body.onkod-public .btn-contact-hero:hover {
    background: #fff !important;
    color: var(--ok-navy) !important;
}

body.onkod-public .section-header {
    margin-bottom: 2.15rem;
}

body.onkod-public .section-header h2 {
    margin-bottom: .35rem;
    padding-bottom: .7rem;
    color: var(--ok-navy);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 700;
}

body.onkod-public .section-header h2::after {
    width: 3rem;
    height: 3px;
    background: var(--ok-gold);
}

body.onkod-public .section-header.text-start h2::after {
    left: 0;
    transform: none;
}

body.onkod-public .home-intro-img {
    width: 100%;
    min-height: 280px;
    max-height: 460px;
    object-fit: cover;
    border-radius: 1.25rem;
    box-shadow: var(--ok-shadow);
}

body.onkod-public .home-intro .text-muted,
body.onkod-public .home-mv-card p,
body.onkod-public .home-value-card p,
body.onkod-public .why-card p {
    color: var(--ok-muted) !important;
    line-height: 1.7;
}

body.onkod-public :is(.services-section, .home-mv-section) {
    margin: 3rem 0;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--ok-line);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--ok-shadow);
}

body.onkod-public :is(.services-section, .home-mv-section, .cta-section) > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

body.onkod-public .home-mv-card,
body.onkod-public .home-value-card,
body.onkod-public .why-card,
body.onkod-public .service-item {
    border: 1px solid var(--ok-line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: none;
}

body.onkod-public .home-mv-card {
    padding: clamp(1.4rem, 3vw, 2rem);
    border-top: 3px solid var(--ok-gold);
}

body.onkod-public .home-mv-icon,
body.onkod-public .home-value-icon,
body.onkod-public .why-icon,
body.onkod-public .service-icon {
    background: var(--ok-gold-soft) !important;
    color: var(--ok-gold-deep) !important;
    border-radius: .9rem;
}

body.onkod-public .home-value-card,
body.onkod-public .why-card {
    padding: 1.6rem 1.25rem 1.45rem;
}

body.onkod-public .home-value-card:hover,
body.onkod-public .why-card:hover,
body.onkod-public .service-item:hover,
body.onkod-public .home-featured .prop-card:hover,
body.onkod-public .home-workers .worker-card:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 138, 66, .55);
    box-shadow: var(--ok-shadow);
}

body.onkod-public .service-item {
    gap: 1rem;
    padding: 1.25rem;
    align-items: flex-start;
}

body.onkod-public .service-thumb {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: .85rem;
    object-fit: cover;
}

body.onkod-public .service-category {
    background: var(--ok-gold-soft);
    color: var(--ok-gold-deep);
}

body.onkod-public .service-content h4,
body.onkod-public .why-card h4,
body.onkod-public .home-value-card h4 {
    color: var(--ok-navy);
}

body.onkod-public .home-featured .prop-card,
body.onkod-public .home-workers .worker-card {
    overflow: hidden;
    border: 1px solid var(--ok-line) !important;
    border-radius: 1.1rem !important;
    background: #fff;
    box-shadow: 0 8px 22px rgba(16, 42, 67, .05) !important;
}

body.onkod-public .home-featured .prop-img-wrapper {
    height: 220px;
}

body.onkod-public .home-featured .prop-badge {
    background: var(--ok-navy);
    border-radius: 999px;
    letter-spacing: .04em;
}

body.onkod-public .home-featured .prop-price-tag {
    color: var(--ok-navy);
    border-radius: .7rem;
    font-weight: 750;
}

body.onkod-public .home-featured .prop-title,
body.onkod-public .home-workers .worker-card h3 {
    color: var(--ok-navy);
}

body.onkod-public .home-workers .worker-card img {
    height: 210px;
    object-fit: cover;
}

body.onkod-public .home-promo {
    border: 1px solid var(--ok-line);
    border-radius: 1.25rem !important;
    box-shadow: var(--ok-shadow);
}

body.onkod-public .home-promo-vehicles {
    background:
        linear-gradient(135deg, #102a43 0%, #1a4564 72%, #8d6a2e 140%) !important;
    border-color: transparent;
}

body.onkod-public .home-promo-vehicles h2,
body.onkod-public .home-promo-vehicles p {
    color: #fff;
}

body.onkod-public .home-promo-sales,
body.onkod-public .home-promo-help {
    background: #fff !important;
}

body.onkod-public .home-promo .btn {
    min-height: 2.85rem;
    border-radius: .75rem;
    font-weight: 650;
}

body.onkod-public .stats-section {
    border: 0;
    border-radius: 1.4rem;
    background:
        radial-gradient(circle at 100% 0, rgba(181, 138, 66, .28), transparent 16rem),
        linear-gradient(145deg, #081b2c 0%, #102a43 58%, #1a4564 100%);
    box-shadow: 0 18px 40px rgba(8, 27, 44, .18);
}

body.onkod-public .stats-kicker,
body.onkod-public .stat-icon {
    color: #ead7b1;
}

body.onkod-public .stat-divider {
    background: var(--ok-gold);
}

body.onkod-public .testimonials-section {
    padding-bottom: 3rem;
}

body.onkod-public .testi-card {
    border: 1px solid var(--ok-line);
    border-radius: 1.1rem;
    box-shadow: none;
}

body.onkod-public .testi-card:hover {
    border-color: rgba(181, 138, 66, .5);
    box-shadow: var(--ok-shadow);
}

body.onkod-public .testi-quote {
    color: #e6d2a4;
}

body.onkod-public .testi-stars {
    color: var(--ok-gold);
}

body.onkod-public .cta-section {
    margin-top: 2.5rem;
    padding: clamp(3rem, 7vw, 5rem) 1.25rem;
    border-radius: 1.4rem;
    background:
        linear-gradient(135deg, rgba(8, 27, 44, .92), rgba(16, 42, 67, .82)),
        var(--cta-image, none) center / cover no-repeat;
}

body.onkod-public .cta-section h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

body.onkod-public .btn-cta-wa {
    background: #1faa59;
    border-radius: .8rem;
    box-shadow: 0 12px 24px rgba(18, 140, 126, .22);
}

/* ------------------------------------------------------------------ services + workers */

body.onkod-public :is(.services-page, .workers-section) {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    padding: 2.5rem 0 3.5rem;
    background: transparent;
}

body.onkod-public :is(.services-page, .workers-section) > .container {
    width: min(100% - 2rem, 1320px);
    max-width: none;
}

body.onkod-public .services-page .filter-container,
body.onkod-public .workers-section .filter-pills {
    justify-content: flex-start;
    gap: .55rem;
    margin-bottom: 1.75rem;
}

body.onkod-public .services-page .filter-btn,
body.onkod-public .workers-section .filter-pill {
    border: 1px solid var(--ok-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ok-ink);
    font-weight: 650;
    box-shadow: 0 1px 0 rgba(16, 42, 67, .03);
}

body.onkod-public .services-page .filter-btn:hover,
body.onkod-public .services-page .filter-btn.active,
body.onkod-public .workers-section .filter-pill:hover,
body.onkod-public .workers-section .filter-pill.active {
    background: var(--ok-navy);
    border-color: var(--ok-navy);
    color: #fff;
    box-shadow: none;
}

body.onkod-public :is(.services-page, .workers-section) .prop-card {
    border: 1px solid var(--ok-line);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 42, 67, .05);
}

body.onkod-public :is(.services-page, .workers-section) .prop-card:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 138, 66, .45);
    box-shadow: var(--ok-shadow);
}

body.onkod-public .services-page .prop-img-container {
    height: auto;
    padding-top: 62%;
    background: #efeae2;
}

body.onkod-public .services-page .badge-type {
    top: .85rem;
    left: .85rem;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    display: inline-block;
    background: rgba(16, 42, 67, .92);
    border-radius: 999px;
    letter-spacing: .04em;
}

body.onkod-public :is(.services-page, .workers-section) .prop-title {
    color: var(--ok-navy);
    font-size: 1.12rem;
}

body.onkod-public :is(.services-page, .workers-section) .prop-desc,
body.onkod-public :is(.services-page, .workers-section) .prop-location {
    color: var(--ok-muted);
}

body.onkod-public :is(.services-page, .workers-section) .prop-price {
    color: var(--ok-navy);
}

body.onkod-public .workers-section .worker-profile-image {
    height: 230px;
    object-fit: cover;
    background: #efeae2;
}

body.onkod-public .workers-section .search-box {
    max-width: 40rem;
    margin-bottom: 1.35rem;
}

body.onkod-public .workers-section .search-box .input-group {
    overflow: hidden;
    border: 1px solid var(--ok-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--ok-shadow);
}

body.onkod-public .workers-section .search-input {
    min-height: 3.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
}

body.onkod-public .workers-section .search-input:focus {
    box-shadow: none;
}

body.onkod-public .job-seeker-cta-box {
    border: 0;
    border-radius: 1.15rem;
    background:
        linear-gradient(135deg, #102a43 0%, #1a4564 100%);
    box-shadow: var(--ok-shadow);
}

/* ------------------------------------------------------------------ about */

body.onkod-public .about-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 3.5rem;
    padding: clamp(4.5rem, 10vw, 7rem) 1.25rem;
    border-radius: 0 0 2rem 2rem;
    box-shadow: 0 18px 40px rgba(8, 27, 44, .16);
}

body.onkod-public .about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 27, 44, .18), rgba(8, 27, 44, .28));
}

body.onkod-public .about-hero .container {
    position: relative;
    z-index: 1;
}

body.onkod-public .about-hero h1 {
    color: #fff !important;
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -.04em;
    text-wrap: balance;
}

body.onkod-public .about-hero p,
body.onkod-public .about-hero .breadcrumb-custom {
    color: rgba(255, 255, 255, .92) !important;
}

body.onkod-public .about-hero p {
    font-size: clamp(1rem, 1.7vw, 1.2rem);
}

body.onkod-public .about-page .section-title {
    color: var(--ok-navy);
    font-weight: 700;
}

body.onkod-public .about-page .section-title::after {
    background: var(--ok-gold);
}

body.onkod-public .about-page .intro-img {
    border-radius: 1.25rem;
    box-shadow: var(--ok-shadow);
}

body.onkod-public .about-page .mv-section {
    margin: 3rem 0;
    padding: clamp(1.75rem, 4vw, 3rem) 0;
    border: 1px solid var(--ok-line);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .72);
}

body.onkod-public .about-page .mv-card,
body.onkod-public .about-page .value-card,
body.onkod-public .about-page .team-card {
    border: 1px solid var(--ok-line);
    border-radius: 1.1rem;
    box-shadow: none;
}

body.onkod-public .about-page .mv-card {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 3px solid var(--ok-gold);
}

body.onkod-public .about-page .mv-icon,
body.onkod-public .about-page .value-icon {
    color: var(--ok-gold-deep);
}

body.onkod-public .about-page .mv-icon {
    background: var(--ok-gold-soft);
}

body.onkod-public .about-page .value-card {
    padding: 1.7rem 1.2rem;
    background: #fff;
}

body.onkod-public .about-page .value-card:hover {
    background: var(--ok-navy);
    border-color: var(--ok-navy);
    transform: translateY(-4px);
}

body.onkod-public .about-page .team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ok-shadow);
}

body.onkod-public .about-page .team-name {
    color: var(--ok-navy);
}

body.onkod-public .about-page .team-pos {
    color: var(--ok-gold-deep);
}

body.onkod-public .about-page .team-social a:hover {
    background: var(--ok-gold);
    color: #fff;
}

body.onkod-public .about-page .stat-number {
    color: var(--ok-navy);
    font-size: clamp(2rem, 4vw, 3.1rem);
    letter-spacing: -.04em;
}

body.onkod-public .about-page .stat-label {
    color: var(--ok-muted);
    letter-spacing: .08em;
}

body.onkod-public .about-page .partner-item {
    border: 1px solid var(--ok-line);
    border-radius: 1rem;
    background: #fff;
}

body.onkod-public .about-cta {
    border-radius: 1.4rem;
    box-shadow: var(--ok-shadow);
}

body.onkod-public .btn-about-cta {
    border-radius: .8rem;
    color: var(--ok-navy);
}

body.onkod-public .btn-about-cta:hover {
    background: var(--ok-gold-soft);
    color: var(--ok-navy);
}

/* ------------------------------------------------------------------ vehicles + sales */

body.onkod-public .vehicle-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(2.2rem, 5vw, 3.4rem) 1.5rem;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 100% 0, rgba(181, 138, 66, .35), transparent 14rem),
        linear-gradient(145deg, #081b2c, #163652 70%);
    box-shadow: var(--ok-shadow);
}

body.onkod-public .vehicle-hero h1,
body.onkod-public .vehicle-hero p {
    color: #fff;
}

body.onkod-public .vehicle-hero .bi {
    color: #ead7b1;
}

body.onkod-public .vehicle-card {
    border: 1px solid var(--ok-line);
    border-radius: 1.1rem;
    box-shadow: 0 10px 26px rgba(16, 42, 67, .05);
}

body.onkod-public .vehicle-card:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 138, 66, .45);
    box-shadow: var(--ok-shadow);
}

body.onkod-public .vehicle-image {
    height: 220px;
    object-fit: cover;
    background: #efeae2;
}

body.onkod-public .vehicle-card .badge {
    border-radius: 999px;
    background: var(--ok-navy) !important;
    font-weight: 650;
    letter-spacing: .03em;
}

body.onkod-public .vehicle-card h2 {
    color: var(--ok-navy);
    font-size: 1.2rem;
}

body.onkod-public .vehicle-price {
    color: var(--ok-navy);
    letter-spacing: -.03em;
}

body.onkod-public .vehicle-spec span {
    display: inline-flex;
    align-items: center;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--ok-gold-soft);
    color: var(--ok-ink);
}

body.onkod-public .vehicle-card .d-flex.gap-2 {
    flex-wrap: wrap;
}

body.onkod-public .sales-page {
    padding-bottom: .5rem;
}

body.onkod-public .sales-card {
    border: 1px solid var(--ok-line) !important;
    border-radius: 1.1rem !important;
    background: #fff;
    box-shadow: 0 10px 26px rgba(16, 42, 67, .05) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.onkod-public .sales-card:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 138, 66, .45) !important;
    box-shadow: var(--ok-shadow) !important;
}

body.onkod-public .sales-card-media,
body.onkod-public .sales-card > .bg-light {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: #efeae2;
}

body.onkod-public .sales-card h2 {
    color: var(--ok-navy);
}

body.onkod-public .sales-card .text-success {
    color: var(--ok-gold-deep) !important;
    letter-spacing: -.02em;
}

body.onkod-public .sales-card .card-body > p:not(.small) {
    color: var(--ok-muted);
}

/* ------------------------------------------------------------------ footer + motion */

body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) .footer-section {
    background: linear-gradient(180deg, #102a43 0%, #071624 100%) !important;
    border-top: 3px solid var(--ok-gold) !important;
}

body.onkod-public .footer-links a:hover {
    color: #ead7b1 !important;
}

@media (max-width: 991.98px) {
    body.onkod-public .services-page .filter-container,
    body.onkod-public .workers-section .filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .35rem;
        scrollbar-width: thin;
    }

    body.onkod-public .services-page .filter-btn,
    body.onkod-public .workers-section .filter-pill {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    body.onkod-public .hero-section {
        min-height: 0;
        margin-bottom: 2.25rem !important;
        border-radius: 0 0 1.25rem 1.25rem;
    }

    body.onkod-public .hero-content {
        padding: 3.25rem 1.15rem 2.25rem;
    }

    body.onkod-public .hero-content h1 {
        font-size: 2.15rem;
    }

    body.onkod-public .hero-btns,
    body.onkod-public .about-page .d-flex.gap-3 {
        flex-direction: column;
        align-items: stretch;
    }

    body.onkod-public .hero-btns .btn,
    body.onkod-public .about-page .d-flex.gap-3 .btn {
        width: 100%;
    }

    body.onkod-public .about-hero {
        padding: 3.5rem 1rem;
        border-radius: 0 0 1.25rem 1.25rem;
    }

    body.onkod-public .about-hero h1 {
        font-size: 2.15rem;
    }

    body.onkod-public :is(.services-section, .home-mv-section, .about-page .mv-section) {
        border-radius: 1rem;
    }

    body.onkod-public .home-featured .prop-actions {
        flex-wrap: wrap;
    }

    body.onkod-public .stat-item:not(:last-child) {
        border-right: 0;
    }

    body.onkod-public a,
    body.onkod-public button {
        min-width: 0;
    }

    body.onkod-public :is(.btn, .nav-link, .filter-btn, .filter-pill) {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.onkod-public :is(
        .prop-card,
        .worker-card,
        .vehicle-card,
        .sales-card,
        .service-item,
        .why-card,
        .home-value-card,
        .testi-card,
        .mv-card,
        .value-card,
        .team-card
    ) {
        transition: none;
    }
}

/* ------------------------------------------------------------------ dark theme */

html[data-theme='dark'] body.onkod-public:is(
    :has(.hero-section),
    :has(.services-page),
    :has(.workers-section),
    :has(.about-page),
    :has(.vehicle-hero),
    :has(.sales-page)
) {
    --ok-ink: #e7eef6;
    --ok-muted: #b7c3d1;
    --ok-paper: #0b1220;
    --ok-line: #2b3a4e;
    --ok-card: #131d2d;
    --ok-gold-soft: #2a2418;
    background: #0b1220;
}

html[data-theme='dark'] body.onkod-public :is(
    .home-mv-card,
    .home-value-card,
    .why-card,
    .service-item,
    .home-featured .prop-card,
    .home-workers .worker-card,
    .services-page .prop-card,
    .workers-section .prop-card,
    .vehicle-card,
    .sales-card,
    .testi-card,
    .about-page .mv-card,
    .about-page .value-card,
    .about-page .team-card,
    .home-promo-sales,
    .home-promo-help,
    .services-section,
    .home-mv-section,
    .about-page .mv-section,
    .workers-section .search-box .input-group
) {
    background: #131d2d !important;
    color: #e7eef6;
    border-color: #2b3a4e !important;
}

html[data-theme='dark'] body.onkod-public .vehicle-price,
html[data-theme='dark'] body.onkod-public .sales-card .text-success,
html[data-theme='dark'] body.onkod-public .home-featured .prop-price-tag,
html[data-theme='dark'] body.onkod-public :is(.services-page, .workers-section) .prop-price {
    color: #ead7b1 !important;
}

html[data-theme='dark'] body.onkod-public .page-hero-copy h1,
html[data-theme='dark'] body.onkod-public :is(
    .prop-title,
    .vehicle-card h2,
    .sales-card h2,
    .section-header h2,
    .section-title,
    .team-name,
    .service-content h4,
    .why-card h4,
    .home-value-card h4,
    .home-mv-card h3,
    .home-workers h3,
    .about-page h3,
    .about-page h4
) {
    color: #f4efe6 !important;
}

html[data-theme='dark'] body.onkod-public :is(.btn-outline-primary, .btn-prop-details, .btn-view) {
    background: #1a2738 !important;
    color: #f4efe6 !important;
    border-color: #3a4b61 !important;
}

html[data-theme='dark'] body.onkod-public .services-page .filter-btn,
html[data-theme='dark'] body.onkod-public .workers-section .filter-pill {
    background: #1a2738;
    color: #e7eef6;
    border-color: #3a4b61;
}