/*
 * DATACORB SOLUTIONS — Editorial Image, Spacing and Dark-Mode Refresh
 * Loaded after the existing theme files. Presentation only: no form, route,
 * database or JavaScript behavior is changed by this stylesheet.
 */

:root {
    --dcr-section-space: clamp(24px, 3.6vw, 48px);
    --dcr-section-space-small: clamp(18px, 2.5vw, 34px);
    --dcr-media-radius: 24px;
}

/* ---------- Shared editorial media ---------- */
.dc-eyebrow {
    margin: 0 0 12px !important;
    color: var(--dt-accent) !important;
    font-family: var(--dt-mono) !important;
    font-size: clamp(.72rem, 1vw, .84rem) !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    line-height: 1.4 !important;
    text-transform: uppercase;
}

.dc-media-card,
.dc-editorial-media {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--dt-border);
    border-radius: var(--dcr-media-radius);
    background: var(--dt-surface-elevated);
    box-shadow: var(--dt-shadow-md);
    isolation: isolate;
}

.dc-media-card::after,
.dc-editorial-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(130deg, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(180deg, transparent 58%, rgba(4,9,16,.22));
}

.dc-media-card img,
.dc-editorial-media img,
.dc-editorial-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.dc-media-card img,
.dc-editorial-media img {
    object-fit: cover;
    transition: transform .7s var(--dt-ease), filter .35s ease;
}

.dc-media-card:hover img,
.dc-editorial-media:hover img {
    transform: scale(1.025);
}

.dc-editorial-media figcaption {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    color: #fff !important;
    background: rgba(5, 10, 18, .7);
    backdrop-filter: blur(10px);
    font-size: .88rem;
    font-weight: 700;
}

.dc-editorial-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: center;
    gap: clamp(24px, 4vw, 54px);
    margin: clamp(24px, 3.5vw, 46px) 0;
}

.dc-editorial-split .dc-editorial-media {
    min-height: 330px;
}

.dc-editorial-copy {
    max-width: 620px;
}

.dc-editorial-copy h3 {
    margin: 0 0 16px;
    font-family: var(--dt-serif) !important;
    font-size: clamp(1.65rem, 2.8vw, 2.65rem) !important;
    line-height: 1.08;
}

.dc-editorial-copy p:last-child {
    margin-bottom: 0;
    color: var(--dt-text) !important;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
}

/* ---------- Global spacing correction ---------- */
.home-page .section,
.hero + .section,
.why-business,
.core-services,
.cta,
.about-intro,
.who-we-are,
.what-we-do,
.philosophy,
.how-we-work,
.vision-mission,
.commitment,
.dc-hiring-section,
.dc-services-table,
.dc-feature-box,
.dc,
.industries,
.about-cta,
.hire-support,
.how-it-works,
.why-choose,
.faq-section {
    padding-top: var(--dcr-section-space) !important;
    padding-bottom: var(--dcr-section-space) !important;
}

.section-main-title,
.dc-services-table h2,
.dc-feature-box > .dc-inner > h2,
.hire-support h1,
.hire-support h2,
.how-it-works h2,
.why-choose h2,
.faq-section h2 {
    margin-top: 0 !important;
    margin-bottom: clamp(18px, 2.4vw, 30px) !important;
}

.section-subtitle {
    margin-bottom: clamp(22px, 3vw, 38px) !important;
}

/* ---------- Home ---------- */
.hero {
    padding-top: calc(var(--dt-header) + 24px) !important;
    padding-bottom: 18px !important;
}

.hero-card {
    grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr) !important;
    gap: clamp(30px, 4vw, 64px) !important;
    padding: clamp(30px, 4vw, 54px) !important;
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow-lg) !important;
}

.hero-left {
    max-width: 620px !important;
}

.hero-left h1 {
    margin-bottom: 18px !important;
    font-size: clamp(2.35rem, 4.2vw, 3.75rem) !important;
    line-height: 1.02 !important;
}

.hero-left p {
    margin-bottom: 30px !important;
    color: var(--dt-text) !important;
    font-size: clamp(1.02rem, 1.5vw, 1.18rem) !important;
    line-height: 1.72 !important;
}

.hero-tagline {
    color: var(--dt-muted) !important;
    font-weight: 750;
}

.dc-home-hero-visual {
    min-height: 520px;
}

.dc-home-hero-visual picture,
.dc-home-hero-visual img {
    min-height: 520px;
}

.dc-hero-identity {
    position: absolute;
    z-index: 3;
    left: clamp(14px, 2vw, 24px);
    right: clamp(14px, 2vw, 24px);
    bottom: clamp(14px, 2vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    color: #fff;
    background: rgba(4, 9, 16, .76);
    backdrop-filter: blur(15px) saturate(130%);
    box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.dc-hero-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-hero-brand .dt-brand-mark {
    flex: 0 0 auto;
    background: rgba(255,255,255,.92);
}

.dc-hero-brand strong,
.dc-hero-brand small {
    display: block;
    color: #fff !important;
}

.dc-hero-brand strong {
    font-size: clamp(.86rem, 1.4vw, 1.05rem);
    letter-spacing: .08em;
}

.dc-hero-brand small {
    margin-top: 4px;
    color: rgba(255,255,255,.72) !important;
    font-family: var(--dt-mono);
    font-size: .64rem;
    letter-spacing: .15em;
}

.dc-hero-contact {
    display: grid;
    gap: 5px;
    text-align: right;
}

.dc-hero-contact a {
    color: #fff !important;
    font-size: clamp(.76rem, 1.1vw, .9rem);
    font-weight: 750;
    text-decoration: none;
}

.why-business .container,
.core-services .container {
    padding: clamp(30px, 4vw, 54px) !important;
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow-md) !important;
    animation: none !important;
}

.dc-editorial-split--home .dc-editorial-media {
    min-height: 360px;
}

.business-grid,
.core-grid {
    gap: clamp(16px, 2vw, 24px) !important;
    margin-top: 26px !important;
}

.business-box,
.core-box {
    min-height: 210px !important;
    padding: clamp(26px, 3vw, 36px) !important;
    background: var(--dt-surface-elevated) !important;
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow-sm) !important;
    animation: none !important;
}

.dc-image-cta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
    align-items: stretch;
    gap: clamp(24px, 4vw, 48px);
    padding: clamp(30px, 4vw, 52px) !important;
    overflow: hidden;
    text-align: left !important;
    background: linear-gradient(135deg, #070b12, #101a28) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

.dc-image-cta__copy {
    align-self: center;
}

.dc-image-cta h2,
.dc-image-cta p {
    color: #fff !important;
    text-align: left !important;
}

.dc-image-cta .cta-actions {
    justify-content: flex-start !important;
}

.dc-image-cta__media {
    min-height: 300px;
    border-color: rgba(255,255,255,.17);
    box-shadow: 0 20px 48px rgba(0,0,0,.32);
}

.dc-image-cta .btn {
    color: #07090d !important;
    background: #fff !important;
    border-color: #fff !important;
}

.dc-image-cta .btn:hover {
    color: #fff !important;
    background: transparent !important;
}

.dc-image-cta .btn-outline {
    color: #fff !important;
    background: transparent !important;
    border-color: rgba(255,255,255,.72) !important;
}

.dc-image-cta .btn-outline:hover {
    color: #07090d !important;
    background: #fff !important;
}

/* ---------- About ---------- */
.dc-about-intro-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(30px, 4.5vw, 60px) !important;
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border) !important;
    box-shadow: var(--dt-shadow-lg) !important;
}

.dc-about-intro-copy h1 {
    font-size: clamp(2.2rem, 4vw, 4rem) !important;
}

.dc-about-intro-media {
    min-height: 520px;
}

.dc-about-intro-media img {
    min-height: 520px;
}

.dc-vision-layout {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
    gap: clamp(26px, 4vw, 52px);
    align-items: stretch;
}

.dc-vision-media {
    min-height: 440px;
}

.dc-vision-layout .vision-grid {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
}

.about-intro-card,
.who-card,
.service-about-box,
.philosophy-box,
.process-box,
.vision-box,
.commitment-card,
.dc-hiring-box {
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text) !important;
    box-shadow: var(--dt-shadow-sm) !important;
}

/* ---------- Services ---------- */
.services-page {
    padding-top: 0 !important;
}

.services-hero {
    padding: calc(var(--dt-header) + 24px) 0 var(--dcr-section-space-small) !important;
}

.services-hero .container {
    padding: clamp(30px, 4vw, 54px) !important;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-xl);
    background: var(--dt-surface);
    box-shadow: var(--dt-shadow-lg);
}

.dc-services-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(440px, 1.2fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
}

.dc-services-hero-copy h1 {
    margin: 0 0 16px;
    font-size: clamp(2.5rem, 5vw, 4.75rem) !important;
}

.dc-services-hero-copy > p:not(.dc-eyebrow) {
    color: var(--dt-text) !important;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.7;
}

.dc-services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.dc-services-hero-media {
    min-height: 430px;
}

.dc-services-capability-intro {
    margin-top: 8px;
}

.dc-services-table,
.dc-feature-box,
.dc,
.industries,
.about-cta {
    margin: 0 !important;
}

.dc-services-table .dc-inner,
.dc-feature-box .dc-inner,
.dc > h2,
.dc .selects,
.dc .table-wrap,
.dc .pricing-notes,
.industries .container,
.about-cta .container {
    position: relative;
}

.dc-services-table .dc-inner,
.dc-feature-box .dc-inner,
.dc {
    color: var(--dt-text) !important;
}

.dc-services-table .dc-inner,
.dc-feature-box .dc-inner,
.industries .container {
    max-width: var(--dt-container) !important;
}

.dc-services-table h2,
.dc-feature-box h2,
.dc h2 {
    color: var(--dt-ink) !important;
    background: var(--dt-surface-solid) !important;
    border-color: var(--dt-border-strong) !important;
}

.services-table,
.table,
.table-wrap,
.dc-box,
.mobile-card,
.pricing-notes {
    background: var(--dt-surface-solid) !important;
    border-color: var(--dt-border-strong) !important;
    color: var(--dt-text) !important;
}

.services-table th,
.services-table td,
.table th,
.table td {
    border-color: var(--dt-border-strong) !important;
}

.services-table .svc-title,
.services-table .svc-detail,
.services-table .svc-sub,
.services-table .svc-sub li,
.mobile-card .mob-service,
.mobile-card .mob-details,
.mobile-card .mob-subservices,
.mobile-card .mob-subservices li {
    color: var(--dt-text) !important;
}

.order-btn {
    min-width: min(100%, 430px) !important;
    min-height: 84px !important;
    padding: 20px 64px !important;
    border: 3px solid var(--dt-ink) !important;
    border-radius: 18px !important;
    color: var(--dt-inverse) !important;
    background: var(--dt-ink) !important;
    font-size: clamp(2rem, 3.7vw, 3.15rem) !important;
    line-height: 1 !important;
    box-shadow: var(--dt-shadow-md) !important;
}

.order-btn:hover,
.order-btn:focus-visible {
    color: var(--dt-ink) !important;
    background: var(--dt-surface-solid) !important;
    transform: translateY(-3px);
}

.dc-services-cta {
    margin-top: 0;
}

/* ---------- Hire Remote Support ---------- */
.hire-support,
.how-it-works,
.why-choose,
.faq-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.hire-support {
    padding-top: calc(var(--dt-header) + 24px) !important;
}

.hire-support > .container,
.how-it-works > .container,
.why-choose > .container,
.faq-section > .container,
.hs-wrapper,
.mobile-only.hs-section {
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text) !important;
    box-shadow: var(--dt-shadow-md) !important;
}

.hire-support > .container,
.how-it-works > .container,
.why-choose > .container,
.faq-section > .container {
    padding: clamp(30px, 4vw, 54px) !important;
    border-radius: var(--dt-radius-xl) !important;
}

.dc-hire-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    margin-bottom: clamp(28px, 4vw, 48px);
}

.dc-hire-hero-copy h1,
.dc-hire-hero-copy h2,
.how-it-works h2,
.why-choose h2,
.faq-section h2 {
    color: var(--dt-ink) !important;
}

.dc-hire-hero-copy > p:not(.dc-eyebrow),
.hire-support > .container > p,
.how-it-works > .container > p,
.why-choose > .container > p,
.faq-card p {
    color: var(--dt-text) !important;
}

.dc-hire-hero-media {
    min-height: 420px;
}

.plans-grid,
.steps-grid,
.why-grid,
.faq-grid {
    gap: clamp(16px, 2.2vw, 24px) !important;
}

.plan-card,
.step-card,
.why-card,
.faq-card,
.hs-card,
.hs-small-card {
    background: var(--dt-surface-elevated) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text) !important;
    box-shadow: var(--dt-shadow-sm) !important;
    animation: none !important;
}

.plan-card h3,
.step-card h3,
.why-card h3,
.faq-card h3,
.hs-card h3,
.hs-small-card strong,
.plan-card .price,
.hs-price {
    color: var(--dt-ink) !important;
}

.plan-card p,
.step-card p,
.why-card p,
.faq-card p,
.hs-card p,
.hs-small-card p {
    color: var(--dt-text) !important;
}

.hire-support .hero-btn,
.how-it-works .hero-btn,
.why-choose .hero-btn,
.faq-section .hero-btn,
.hire-support-mobile .hero-btn,
.mobile-only.hs-section .hero-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 13px 26px !important;
    border: 2px solid #0a0d12 !important;
    border-radius: 999px !important;
    color: #0a0d12 !important;
    background: #fff !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    box-shadow: 0 9px 22px rgba(0,0,0,.1) !important;
    transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.hire-support .hero-btn:hover,
.how-it-works .hero-btn:hover,
.why-choose .hero-btn:hover,
.faq-section .hero-btn:hover,
.hire-support-mobile .hero-btn:hover,
.mobile-only.hs-section .hero-btn:hover,
.hire-support .hero-btn:focus-visible,
.why-choose .hero-btn:focus-visible,
.faq-section .hero-btn:focus-visible {
    color: #fff !important;
    background: #0a0d12 !important;
    border-color: #0a0d12 !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,.18) !important;
}

.dc-hire-workflow-intro,
.dc-hire-support-tech {
    margin-top: 28px;
}

/* ---------- Contact ---------- */
.contact-page {
    padding: calc(var(--dt-header) + 24px) 22px var(--dcr-section-space) !important;
}

.contact-shell.dc-contact-layout {
    display: block !important;
    max-width: var(--dt-container) !important;
}

.dc-contact-header {
    max-width: 900px;
    margin: 0 auto clamp(28px, 4vw, 46px);
    text-align: center;
}

.dc-contact-header h1 {
    margin: 0 0 16px;
    font-size: clamp(2.35rem, 4.8vw, 4.7rem) !important;
}

.dc-contact-header .contact-sub {
    margin: 0;
    color: var(--dt-text) !important;
}

.dc-contact-top-grid,
.dc-contact-bottom-grid {
    display: grid;
    gap: clamp(24px, 3.5vw, 44px);
}

.dc-contact-top-grid {
    grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
    align-items: stretch;
}

.dc-contact-bottom-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
    align-items: start;
    margin-top: clamp(24px, 3.5vw, 44px);
}

.dc-contact-primary-media {
    min-height: 690px;
}

.dc-contact-primary-media img {
    min-height: 690px;
}

.contact-form-box,
.dc-contact-information,
.contact-next,
.contact-note,
.point,
.dc-map-card {
    background: var(--dt-surface) !important;
    border: 1px solid var(--dt-border) !important;
    color: var(--dt-text) !important;
    box-shadow: var(--dt-shadow-md) !important;
    animation: none !important;
}

.contact-form-box,
.dc-contact-information,
.dc-map-card {
    padding: clamp(24px, 3vw, 38px) !important;
    border-radius: var(--dt-radius-xl) !important;
    overflow: hidden;
}

.contact-form-box {
    min-width: 0;
}

.contact-form-box .form-container {
    width: 100% !important;
    max-width: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.contact-form-box h2,
.contact-note h3,
.contact-next h3,
.point h3,
.dc-map-card h2 {
    color: var(--dt-ink) !important;
}

.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select {
    color: var(--dt-text) !important;
    background: var(--dt-bg-soft) !important;
    border: 1px solid var(--dt-border-strong) !important;
}

.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
    color: var(--dt-muted) !important;
    opacity: 1;
}

.contact-form-box button {
    color: var(--dt-inverse) !important;
    background: var(--dt-ink) !important;
    border: 1px solid var(--dt-ink) !important;
}

.contact-form-box button:hover {
    color: var(--dt-ink) !important;
    background: var(--dt-surface-solid) !important;
}

.dc-contact-information {
    padding: clamp(24px, 3vw, 36px) !important;
}

.contact-points {
    margin-top: 0 !important;
}

.point,
.contact-note,
.contact-next {
    border-radius: 20px !important;
}

.point p,
.contact-note p,
.contact-next p,
.next-item p {
    color: var(--dt-text) !important;
}

.point span,
.next-item span {
    color: var(--dt-inverse) !important;
    background: var(--dt-ink) !important;
}

.contact-note,
.contact-next {
    padding: 24px !important;
}

.contact-next {
    margin-top: 22px !important;
}

.next-grid {
    grid-template-columns: 1fr !important;
}

.next-item {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
    padding: 18px !important;
    text-align: left !important;
    background: var(--dt-bg-soft) !important;
    border: 1px solid var(--dt-border) !important;
}

.next-item span {
    margin: 0 !important;
}

.dc-contact-right-stack {
    display: grid;
    gap: clamp(22px, 3vw, 34px);
}

.dc-map-card__heading {
    margin-bottom: 18px;
}

.dc-map-card h2 {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem) !important;
}

.dc-map-card iframe {
    display: block;
    width: 100%;
    min-height: 360px;
    border: 0;
    border-radius: 18px;
    filter: grayscale(.78) contrast(1.05);
}

.dc-contact-secondary-media {
    min-height: 360px;
}

/* ---------- Dark mode: comprehensive contrast correction ---------- */
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .why-business .container,
html[data-theme="dark"] .core-services .container,
html[data-theme="dark"] .about-intro-card,
html[data-theme="dark"] .who-card,
html[data-theme="dark"] .service-about-box,
html[data-theme="dark"] .philosophy-box,
html[data-theme="dark"] .process-box,
html[data-theme="dark"] .vision-box,
html[data-theme="dark"] .commitment-card,
html[data-theme="dark"] .dc-hiring-box,
html[data-theme="dark"] .services-hero .container,
html[data-theme="dark"] .hire-support > .container,
html[data-theme="dark"] .how-it-works > .container,
html[data-theme="dark"] .why-choose > .container,
html[data-theme="dark"] .faq-section > .container,
html[data-theme="dark"] .contact-form-box,
html[data-theme="dark"] .dc-contact-information,
html[data-theme="dark"] .dc-map-card,
html[data-theme="dark"] .contact-note,
html[data-theme="dark"] .contact-next,
html[data-theme="dark"] .point {
    background: rgba(15, 19, 26, .96) !important;
    border-color: rgba(215,225,238,.16) !important;
}

html[data-theme="dark"] .business-box,
html[data-theme="dark"] .core-box,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .faq-card,
html[data-theme="dark"] .hs-card,
html[data-theme="dark"] .hs-small-card,
html[data-theme="dark"] .mobile-card,
html[data-theme="dark"] .next-item,
html[data-theme="dark"] .dc-box,
html[data-theme="dark"] .services-table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .pricing-notes {
    background: #141a23 !important;
    border-color: rgba(215,225,238,.18) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .section-main-title,
html[data-theme="dark"] .plan-card .price,
html[data-theme="dark"] .hs-price,
html[data-theme="dark"] .mobile-card .mob-service {
    color: #f7f9fc !important;
    opacity: 1 !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] label,
html[data-theme="dark"] .hero-tagline,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .delivery,
html[data-theme="dark"] .na {
    color: #d7dde6 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .services-table .svc-title,
html[data-theme="dark"] .services-table .svc-detail,
html[data-theme="dark"] .services-table .svc-sub,
html[data-theme="dark"] .services-table .svc-sub li,
html[data-theme="dark"] .mobile-card .mob-details,
html[data-theme="dark"] .mobile-card .mob-subservices,
html[data-theme="dark"] .mobile-card .mob-subservices li {
    color: #f1f5fa !important;
}

html[data-theme="dark"] .services-table tbody tr,
html[data-theme="dark"] .table tbody tr,
html[data-theme="dark"] .feature-row td {
    background: #111720 !important;
}

html[data-theme="dark"] .services-table tbody tr:hover,
html[data-theme="dark"] .feature-line:hover,
html[data-theme="dark"] .feature-line:focus {
    background: #1a2330 !important;
}

html[data-theme="dark"] .services-table thead th,
html[data-theme="dark"] .table thead th {
    color: #fff !important;
    background: #030508 !important;
}

html[data-theme="dark"] .services-table th,
html[data-theme="dark"] .services-table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: rgba(215,225,238,.22) !important;
}

html[data-theme="dark"] .dc-services-table h2,
html[data-theme="dark"] .dc-feature-box h2,
html[data-theme="dark"] .dc h2 {
    color: #f7f9fc !important;
    background: #0f131a !important;
    border-color: rgba(215,225,238,.3) !important;
}

html[data-theme="dark"] .order-btn {
    color: #07090d !important;
    background: #fff !important;
    border-color: #fff !important;
}

html[data-theme="dark"] .order-btn:hover,
html[data-theme="dark"] .order-btn:focus-visible {
    color: #fff !important;
    background: #07090d !important;
}

html[data-theme="dark"] .hire-support .hero-btn,
html[data-theme="dark"] .how-it-works .hero-btn,
html[data-theme="dark"] .why-choose .hero-btn,
html[data-theme="dark"] .faq-section .hero-btn,
html[data-theme="dark"] .hire-support-mobile .hero-btn,
html[data-theme="dark"] .mobile-only.hs-section .hero-btn {
    color: #07090d !important;
    background: #fff !important;
    border-color: #fff !important;
}

html[data-theme="dark"] .hire-support .hero-btn:hover,
html[data-theme="dark"] .how-it-works .hero-btn:hover,
html[data-theme="dark"] .why-choose .hero-btn:hover,
html[data-theme="dark"] .faq-section .hero-btn:hover,
html[data-theme="dark"] .hire-support-mobile .hero-btn:hover,
html[data-theme="dark"] .mobile-only.hs-section .hero-btn:hover {
    color: #fff !important;
    background: #07090d !important;
}

html[data-theme="dark"] .contact-form-box input,
html[data-theme="dark"] .contact-form-box textarea,
html[data-theme="dark"] .contact-form-box select {
    color: #f1f5fa !important;
    background: #0b1017 !important;
    border-color: rgba(215,225,238,.24) !important;
}

html[data-theme="dark"] .contact-form-box button {
    color: #07090d !important;
    background: #fff !important;
    border-color: #fff !important;
}

html[data-theme="dark"] .contact-form-box button:hover {
    color: #fff !important;
    background: #07090d !important;
}

html[data-theme="dark"] .dc-map-card iframe {
    filter: grayscale(.86) invert(.88) hue-rotate(180deg) contrast(.9);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .hero-card,
    .dc-services-hero-grid,
    .dc-hire-hero-grid,
    .dc-about-intro-grid,
    .dc-vision-layout,
    .dc-contact-top-grid,
    .dc-contact-bottom-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-left,
    .dc-editorial-copy {
        max-width: none !important;
    }

    .dc-home-hero-visual,
    .dc-home-hero-visual picture,
    .dc-home-hero-visual img,
    .dc-about-intro-media,
    .dc-about-intro-media img,
    .dc-contact-primary-media,
    .dc-contact-primary-media img {
        min-height: 480px;
    }

    .dc-image-cta {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .dc-editorial-split {
        grid-template-columns: 1fr;
    }

    .dc-editorial-split .dc-editorial-media {
        min-height: 300px;
    }

    .order-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 70px !important;
        padding: 16px 26px !important;
        font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
    }

    .dc-contact-top-grid,
    .dc-contact-bottom-grid {
        gap: 22px;
    }
}

@media (max-width: 760px) {
    :root {
        --dcr-section-space: 28px;
        --dcr-section-space-small: 22px;
        --dcr-media-radius: 18px;
    }

    .container {
        width: min(calc(100% - 28px), var(--dt-container)) !important;
    }

    .hero {
        padding-top: calc(var(--dt-header) + 14px) !important;
    }

    .hero-card,
    .services-hero .container,
    .dc-about-intro-grid,
    .hire-support > .container,
    .how-it-works > .container,
    .why-choose > .container,
    .faq-section > .container {
        padding: 24px !important;
        border-radius: 22px !important;
    }

    .hero-left h1 {
        font-size: clamp(2.05rem, 10vw, 3rem) !important;
    }

    .hero-left p {
        font-size: 1rem !important;
    }

    .hero-actions,
    .dc-services-hero-actions,
    .cta-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .hero-actions .btn,
    .dc-services-hero-actions .btn,
    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .dc-home-hero-visual,
    .dc-home-hero-visual picture,
    .dc-home-hero-visual img,
    .dc-about-intro-media,
    .dc-about-intro-media img,
    .dc-services-hero-media,
    .dc-hire-hero-media,
    .dc-contact-primary-media,
    .dc-contact-primary-media img {
        min-height: 390px;
    }

    .dc-hero-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .dc-hero-contact {
        text-align: left;
    }

    .why-business .container,
    .core-services .container {
        padding: 24px !important;
        border-radius: 22px !important;
    }

    .business-grid,
    .core-grid {
        grid-template-columns: 1fr !important;
    }

    .business-box,
    .core-box {
        min-height: 0 !important;
    }

    .dc-image-cta {
        padding: 24px !important;
        border-radius: 22px !important;
    }

    .dc-image-cta__media {
        min-height: 250px;
    }

    .contact-page {
        padding: calc(var(--dt-header) + 14px) 14px 30px !important;
    }

    .contact-form-box,
    .dc-contact-information,
    .dc-map-card {
        padding: 20px !important;
        border-radius: 22px !important;
    }

    .point {
        grid-template-columns: 42px 1fr !important;
        gap: 13px !important;
        padding: 17px !important;
    }

    .point span,
    .next-item span {
        width: 42px !important;
        height: 42px !important;
    }

    .next-item {
        grid-template-columns: 42px 1fr !important;
    }

    .dc-map-card iframe {
        min-height: 300px;
    }

    .dc-contact-secondary-media {
        min-height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-media-card img,
    .dc-editorial-media img,
    .order-btn,
    .hero-btn {
        transition: none !important;
    }

    .dc-media-card:hover img,
    .dc-editorial-media:hover img,
    .order-btn:hover,
    .hero-btn:hover {
        transform: none !important;
    }
}
