/*
 * DATACORB SOLUTIONS — Final Layout & Dark-Mode Polish
 * Loaded after the existing theme styles. This file contains only targeted
 * presentation corrections and does not change JavaScript or business logic.
 */

/* --------------------------------------------------------------------------
   Home: center and spread the four "Why Businesses Work With" cards evenly.
   -------------------------------------------------------------------------- */
.why-business .business-grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    margin-inline: auto !important;
}

.why-business .business-box {
    width: auto !important;
    min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   About: complete dark-mode compatibility for all section shells and cards.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .about-intro .container,
html[data-theme="dark"] .who-we-are .container,
html[data-theme="dark"] .what-we-do .container,
html[data-theme="dark"] .philosophy .container,
html[data-theme="dark"] .how-we-work .container,
html[data-theme="dark"] .vision-mission .container,
html[data-theme="dark"] .commitment .container,
html[data-theme="dark"] .dc-hiring-section .dc-hiring-box {
    color: #eef3f9 !important;
    background: #0b1018 !important;
    border-color: rgba(215, 225, 238, .16) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .32) !important;
}

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 {
    color: #eef3f9 !important;
    background: #141b25 !important;
    border-color: rgba(215, 225, 238, .18) !important;
}

html[data-theme="dark"] .about-intro h1,
html[data-theme="dark"] .about-intro h2,
html[data-theme="dark"] .about-intro h3,
html[data-theme="dark"] .who-we-are h1,
html[data-theme="dark"] .who-we-are h2,
html[data-theme="dark"] .who-we-are h3,
html[data-theme="dark"] .what-we-do h1,
html[data-theme="dark"] .what-we-do h2,
html[data-theme="dark"] .what-we-do h3,
html[data-theme="dark"] .philosophy h1,
html[data-theme="dark"] .philosophy h2,
html[data-theme="dark"] .philosophy h3,
html[data-theme="dark"] .how-we-work h1,
html[data-theme="dark"] .how-we-work h2,
html[data-theme="dark"] .how-we-work h3,
html[data-theme="dark"] .vision-mission h1,
html[data-theme="dark"] .vision-mission h2,
html[data-theme="dark"] .vision-mission h3,
html[data-theme="dark"] .commitment h1,
html[data-theme="dark"] .commitment h2,
html[data-theme="dark"] .commitment h3,
html[data-theme="dark"] .dc-hiring-section h1,
html[data-theme="dark"] .dc-hiring-section h2,
html[data-theme="dark"] .dc-hiring-section h3,
html[data-theme="dark"] .about-intro .section-main-title,
html[data-theme="dark"] .who-we-are .section-main-title,
html[data-theme="dark"] .what-we-do .section-main-title,
html[data-theme="dark"] .philosophy .section-main-title,
html[data-theme="dark"] .how-we-work .section-main-title,
html[data-theme="dark"] .vision-mission .section-main-title,
html[data-theme="dark"] .commitment .section-main-title {
    color: #f8fafc !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .about-intro p,
html[data-theme="dark"] .who-we-are p,
html[data-theme="dark"] .what-we-do p,
html[data-theme="dark"] .philosophy p,
html[data-theme="dark"] .how-we-work p,
html[data-theme="dark"] .vision-mission p,
html[data-theme="dark"] .commitment p,
html[data-theme="dark"] .dc-hiring-section p,
html[data-theme="dark"] .about-intro .section-subtitle,
html[data-theme="dark"] .who-we-are .section-subtitle,
html[data-theme="dark"] .what-we-do .section-subtitle,
html[data-theme="dark"] .philosophy .section-subtitle,
html[data-theme="dark"] .how-we-work .section-subtitle,
html[data-theme="dark"] .vision-mission .section-subtitle,
html[data-theme="dark"] .commitment .section-subtitle {
    color: #d5dde8 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .about-badges span,
html[data-theme="dark"] .process-number {
    color: #07101b !important;
    background: #f5f8fc !important;
    border-color: #f5f8fc !important;
}

html[data-theme="dark"] .about-intro .container::after,
html[data-theme="dark"] .who-we-are .container::after,
html[data-theme="dark"] .what-we-do .container::after,
html[data-theme="dark"] .philosophy .container::after,
html[data-theme="dark"] .how-we-work .container::after,
html[data-theme="dark"] .vision-mission .container::after,
html[data-theme="dark"] .commitment .container::after {
    opacity: .08 !important;
}

/* --------------------------------------------------------------------------
   Contact: secondary image moves below "Why Reach Out Early" on the left;
   "What Happens Next" moves below the map on the right.
   -------------------------------------------------------------------------- */
.dc-contact-information .dc-contact-secondary-media {
    width: 100%;
    min-height: 360px;
    margin-top: 22px;
}

.dc-contact-right-stack .contact-next {
    width: 100%;
    margin-top: 0 !important;
}

.dc-contact-right-stack .contact-next .next-grid {
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Footer: navy text in the normal Contact Us button state only.
   Existing hover/focus styling remains unchanged.
   -------------------------------------------------------------------------- */
.site-footer .footer-btn:not(:hover):not(:focus-visible) {
    color: #0b2d52 !important;
}

@media (max-width: 760px) {
    .why-business .business-grid {
        grid-template-columns: 1fr !important;
    }

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

/* ==========================================================================
   DATACORB SOLUTIONS — About and Services Final Visual Corrections
   ========================================================================== */

/* --------------------------------------------------------------------------
   About page: make the "WE ARE HIRING!" heading readable in dark mode.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .dc-hiring-section .dc-hiring-box h2 {
    color: #f8fafc !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   Services page: remove rectangular backgrounds, borders and shadows
   from the three main section headings.
   -------------------------------------------------------------------------- */
.dc-services-table .dc-inner > h2,
.dc-feature-box > .dc-inner > h2,
.dc > h2 {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    color: var(--dt-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}


/* Keep the same headings clearly visible in dark mode. */
html[data-theme="dark"] .dc-services-table .dc-inner > h2,
html[data-theme="dark"] .dc-feature-box > .dc-inner > h2,
html[data-theme="dark"] .dc > h2 {
    color: #f8fafc !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   Service Capabilities table: larger and bolder column headings.
   Original size was approximately 1.25rem; desktop size is now doubled.
   -------------------------------------------------------------------------- */
.services-table thead th {
    padding: 18px 10px !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}


/* --------------------------------------------------------------------------
   Light mode: sub-service hover must use white bold text on black.
   This overrides the later theme color rule that kept the text dark.
   -------------------------------------------------------------------------- */
html[data-theme="light"] .services-table .svc-sub li:hover,
html[data-theme="light"] .services-table .svc-sub li:focus-visible {
    color: #ffffff !important;
    background: #05070b !important;
    font-weight: 800 !important;
}


/* --------------------------------------------------------------------------
   Service Pricing table: double-size bold column headings.
   -------------------------------------------------------------------------- */
.dc .table thead th {
    padding: 20px 14px !important;
    font-size: 2rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
    vertical-align: middle !important;
}


/* --------------------------------------------------------------------------
   Services bottom CTA: remove the sharp-edged outer container.
   The inner CTA keeps its rounded professional card design.
   -------------------------------------------------------------------------- */
.about-cta > .container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.about-cta .dc-services-cta {
    overflow: hidden !important;
    border-radius: 30px !important;
}


/* --------------------------------------------------------------------------
   Responsive protection: keep large table headings usable on smaller screens.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .services-table thead th {
        font-size: 1.15rem !important;
        padding: 16px 10px !important;
    }

    .dc .table thead th {
        font-size: 1.35rem !important;
        padding: 16px 10px !important;
    }
}

@media (max-width: 600px) {
    .dc .table thead th {
        font-size: 1.15rem !important;
    }
    
    .services-table thead th {
    font-size: 1rem !important;
    padding: 14px 8px !important;
}

    .about-cta .dc-services-cta {
        border-radius: 22px !important;
    }
}

/* ==========================================================================
   SERVICE PRICING TABLE — Corrected Desktop Layout
   ========================================================================== */

@media (min-width: 1100px) {

    /*
     * Cancel the previous breakout positioning.
     * Keep the pricing component centered inside its normal page layout.
     */
    .dc {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        max-width: 1400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        overflow: visible !important;
    }

    /*
     * Fit all five columns inside the available desktop width.
     */
    .dc .table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    /*
     * Reduce the oversized heading text and permit clean two-line wrapping
     * only when the available screen width requires it.
     */
    .dc .table thead th {
        padding: 18px 8px !important;
        font-size: 1.35rem !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /*
     * Give slightly less width to Service Type and distribute the rest
     * evenly between the four package columns.
     */
    .dc .table thead th:first-child,
    .dc .table tbody th:first-child,
    .dc .table tbody td:first-child {
        width: 18% !important;
    }

    .dc .table thead th:not(:first-child),
    .dc .table tbody th:not(:first-child),
    .dc .table tbody td:not(:first-child) {
        width: 20.5% !important;
    }
}


/*
 * Tablet and small desktop fallback.
 * Horizontal scrolling remains available where five columns cannot fit.
 */
@media (min-width: 769px) and (max-width: 1099px) {

    .dc {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .dc .table {
        width: 100% !important;
        min-width: 980px !important;
        table-layout: fixed !important;
    }

    .dc .table thead th {
        padding: 16px 8px !important;
        font-size: 1.15rem !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }
}


/* Mobile remains horizontally scrollable and readable. */
@media (max-width: 768px) {

    .dc {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        transform: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .dc .table {
        min-width: 850px !important;
    }

    .dc .table thead th {
        font-size: 1rem !important;
        white-space: normal !important;
    }
}

/* ==========================================================================
   HOME AND SERVICES CTA — PRECISE CORNER FIX
   ========================================================================== */

/* Home page only: round the CTA image without changing the main container. */
.home-cta .dc-services-cta picture,
.home-cta .dc-services-cta .dc-services-cta-media,
.home-cta .dc-services-cta .dc-services-cta-visual {
    display: block !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

.home-cta .dc-services-cta img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 24px !important;
}


/* Services page only: remove and clip the unwanted square outer edge. */
.about-cta,
.about-cta > .container {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.about-cta > .container {
    overflow: hidden !important;
    border-radius: 30px !important;
    clip-path: inset(0 round 30px) !important;
    isolation: isolate !important;
}

/* Remove decorative square borders created by pseudo-elements. */
.about-cta::before,
.about-cta::after,
.about-cta > .container::before,
.about-cta > .container::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Preserve the actual inner CTA card. */
.about-cta .dc-services-cta {
    overflow: hidden !important;
    border-radius: 30px !important;
}


/* Mobile sizing. */
@media (max-width: 768px) {
    .home-cta .dc-services-cta picture,
    .home-cta .dc-services-cta .dc-services-cta-media,
    .home-cta .dc-services-cta .dc-services-cta-visual,
    .home-cta .dc-services-cta img {
        border-radius: 18px !important;
    }

    .about-cta > .container {
        border-radius: 22px !important;
        clip-path: inset(0 round 22px) !important;
    }

    .about-cta .dc-services-cta {
        border-radius: 22px !important;
    }
}

/* ==========================================================================
   CTA IMAGES — STRONG ROUNDED CORNER ENFORCEMENT
   ========================================================================== */

/* Apply rounded corners to the image column itself. */
.home-cta .dc-services-cta-right,
.about-cta .dc-services-cta-right,
.home-cta .dc-services-cta-media,
.about-cta .dc-services-cta-media,
.home-cta .dc-services-cta-visual,
.about-cta .dc-services-cta-visual,
.home-cta .dc-services-cta-image,
.about-cta .dc-services-cta-image,
.home-cta .dc-services-cta-art,
.about-cta .dc-services-cta-art {
    overflow: hidden !important;
    border-radius: 26px !important;
    isolation: isolate !important;
    clip-path: inset(0 round 26px) !important;
}

/* Apply rounded corners to all possible image wrappers. */
.home-cta .dc-services-cta picture,
.about-cta .dc-services-cta picture,
.home-cta .dc-services-cta figure,
.about-cta .dc-services-cta figure,
.home-cta .dc-services-cta a,
.about-cta .dc-services-cta a {
    display: block !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    clip-path: inset(0 round 26px) !important;
}

/* Force the actual image to be rounded too. */
.home-cta .dc-services-cta img,
.about-cta .dc-services-cta img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 26px !important;
    clip-path: inset(0 round 26px) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .home-cta .dc-services-cta-right,
    .about-cta .dc-services-cta-right,
    .home-cta .dc-services-cta-media,
    .about-cta .dc-services-cta-media,
    .home-cta .dc-services-cta-visual,
    .about-cta .dc-services-cta-visual,
    .home-cta .dc-services-cta-image,
    .about-cta .dc-services-cta-image,
    .home-cta .dc-services-cta-art,
    .about-cta .dc-services-cta-art,
    .home-cta .dc-services-cta picture,
    .about-cta .dc-services-cta picture,
    .home-cta .dc-services-cta figure,
    .about-cta .dc-services-cta figure,
    .home-cta .dc-services-cta a,
    .about-cta .dc-services-cta a,
    .home-cta .dc-services-cta img,
    .about-cta .dc-services-cta img {
        border-radius: 18px !important;
        clip-path: inset(0 round 18px) !important;
    }
}

/* Home-page bottom CTA image: enforce rounded corners. */
.cta.section > .container > .dc-image-cta .dc-image-cta__media {
    display: block !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    clip-path: inset(0 round 26px) !important;
    isolation: isolate !important;
}

.cta.section > .container > .dc-image-cta .dc-image-cta__media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 26px !important;
    clip-path: inset(0 round 26px) !important;
}

@media (max-width: 768px) {
    .cta.section > .container > .dc-image-cta .dc-image-cta__media,
    .cta.section > .container > .dc-image-cta .dc-image-cta__media img {
        border-radius: 18px !important;
        clip-path: inset(0 round 18px) !important;
    }
}

/* Home hero — Explore Services button hover in dark mode */
html[data-theme="dark"] .hero a[href="/services.php"]:hover,
html[data-theme="dark"] .hero-section a[href="/services.php"]:hover,
html[data-theme="dark"] .home-hero a[href="/services.php"]:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #0b1f3a !important;
    font-weight: 700 !important;
}

/* Ensure inner text or icon inherits the navy hover color */
html[data-theme="dark"] .hero a[href="/services.php"]:hover *,
html[data-theme="dark"] .hero-section a[href="/services.php"]:hover *,
html[data-theme="dark"] .home-hero a[href="/services.php"]:hover * {
    color: inherit !important;
    font-weight: inherit !important;
}

/* About page — How We Work number labels */
html[data-theme="dark"] .how-we-work .process-number {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   ABOUT PAGE — WE ARE HIRING CTA FINAL LAYOUT FIX
   ========================================================================== */

/* Reset the outer section so it does not create a full-width bordered strip. */
.dc-hiring-section {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 72px 24px 80px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Keep any optional container wrapper centered and transparent. */
.dc-hiring-section > .container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Restore the centered hiring card. */
.dc-hiring-section .dc-hiring-box {
    width: 100% !important;
    max-width: 1180px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(48px, 5vw, 72px) clamp(28px, 6vw, 86px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    border: 1px solid rgba(15, 38, 66, 0.14) !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Heading */
.dc-hiring-section .dc-hiring-box h2 {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;

    font-size: clamp(2.25rem, 4.5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    text-align: center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Paragraph */
.dc-hiring-section .dc-hiring-box p {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;

    font-size: 1.08rem !important;
    line-height: 1.75 !important;
    text-align: center !important;
}

/* Center the Join Now button. */
.dc-hiring-section .dc-hiring-box > a,
.dc-hiring-section .dc-hiring-box .btn,
.dc-hiring-section .dc-hiring-box .button {
    width: auto !important;
    margin: 0 auto !important;
    align-self: center !important;
}

/* Light mode card */
html[data-theme="light"] .dc-hiring-section .dc-hiring-box {
    color: #10243e !important;
    background: #ffffff !important;
    border-color: rgba(15, 38, 66, 0.14) !important;
    box-shadow: 0 24px 60px rgba(18, 40, 66, 0.12) !important;
}

html[data-theme="light"] .dc-hiring-section .dc-hiring-box h2 {
    color: #10243e !important;
}

html[data-theme="light"] .dc-hiring-section .dc-hiring-box p {
    color: #46566a !important;
}

/* Dark mode card */
html[data-theme="dark"] .dc-hiring-section .dc-hiring-box {
    color: #eef3f9 !important;
    background: #0b1018 !important;
    border-color: rgba(215, 225, 238, 0.17) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] .dc-hiring-section .dc-hiring-box h2 {
    color: #f8fafc !important;
    background: transparent !important;
}

html[data-theme="dark"] .dc-hiring-section .dc-hiring-box p {
    color: #d5dde8 !important;
}

/* Tablet and mobile */
@media (max-width: 768px) {
    .dc-hiring-section {
        padding: 48px 16px 56px !important;
    }

    .dc-hiring-section .dc-hiring-box {
        padding: 40px 22px !important;
        border-radius: 22px !important;
    }

    .dc-hiring-section .dc-hiring-box h2 {
        margin-bottom: 16px !important;
        font-size: clamp(2rem, 10vw, 3rem) !important;
    }

    .dc-hiring-section .dc-hiring-box p {
        margin-bottom: 26px !important;
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================================================
   SERVICES PAGE HERO — FINAL VISUAL FIX
   ========================================================================== */

/*
 * Remove the faded server-infrastructure decoration
 * behind the right side of the Services hero.
 */
.services-page .services-hero::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/*
 * Keep only enough space to clear the fixed navbar,
 * then leave a small gap before the hero container.
 */
.services-page .services-hero {
    margin-top: var(--dt-header) !important;
    padding-top: 16px !important;
    padding-bottom: var(--dcr-section-space-small) !important;
    background-image: none !important;
}

/*
 * Request a Quote button:
 * white background with bold navy text on dark-mode hover.
 */
html[data-theme="dark"]
.services-page
.services-hero
.dc-services-hero-actions
.btn-outline:hover,
html[data-theme="dark"]
.services-page
.services-hero
.dc-services-hero-actions
.btn-outline:focus-visible {
    color: #0b1f3a !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
    font-weight: 700 !important;
}

/* Ensure any nested text or icon inherits the navy hover color. */
html[data-theme="dark"]
.services-page
.services-hero
.dc-services-hero-actions
.btn-outline:hover *,
html[data-theme="dark"]
.services-page
.services-hero
.dc-services-hero-actions
.btn-outline:focus-visible * {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Mobile: reduce the top gap further. */
@media (max-width: 760px) {
    .services-page .services-hero {
        margin-top: var(--dt-header) !important;
        padding-top: 10px !important;
        padding-bottom: 22px !important;
    }
}

/* ==========================================================================
   SERVICES PAGE — WHO WE SUPPORT FINAL GRID FIX
   ========================================================================== */

/* Center the eyebrow, heading and introduction. */
.services-page .industries .section-main-title {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    text-align: center !important;
}

/*
 * "DATACORB SOLUTIONS" is generated by the heading's ::before element,
 * so it follows the centered heading alignment.
 */
.services-page .industries .section-main-title::before {
    width: 100% !important;
    text-align: center !important;
}

.services-page .industries .section-subtitle {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Desktop: four industry boxes in each row. */
.services-page .industries .industry-grid {
    width: 100% !important;
    margin: 38px auto 0 !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;

    align-items: stretch !important;
}

/* Individual industry cards. */
.services-page .industries .industry-box {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 96px !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 20px 18px !important;

    text-align: center !important;
    line-height: 1.5 !important;

    border-radius: 18px !important;
    box-sizing: border-box !important;

    /* Stop the old floating animation from disturbing the grid. */
    animation: none !important;
    transform: none !important;
}

/* Keep a controlled hover effect. */
.services-page .industries .industry-box:hover {
    transform: translateY(-4px) !important;
}

/* Goal text below the final row. */
.services-page .industries .section-footer-text {
    width: 100% !important;
    max-width: 980px !important;

    margin: 46px auto 0 !important;
    padding: 0 !important;

    text-align: center !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

/* Tablet: two cards per row. */
@media (max-width: 1050px) {
    .services-page .industries .industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Mobile: one card per row. */
@media (max-width: 600px) {
    .services-page .industries .section-main-title {
        margin-bottom: 14px !important;
    }

    .services-page .industries .industry-grid {
        grid-template-columns: 1fr !important;
        margin-top: 28px !important;
        gap: 14px !important;
    }

    .services-page .industries .industry-box {
        min-height: 78px !important;
        padding: 17px 15px !important;
        border-radius: 15px !important;
    }

    .services-page .industries .section-footer-text {
        margin-top: 34px !important;
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================================================
   SERVICES PAGE BOTTOM CTA — MATCH HOME PAGE CTA
   ========================================================================== */

/* Main Services CTA card */
.services-page .about-cta .dc-services-cta {
    width: 100% !important;
    min-height: 455px !important;
    margin: 0 auto !important;
    padding: clamp(44px, 5vw, 68px) !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(400px, 0.92fr) !important;
    align-items: center !important;
    gap: clamp(40px, 5vw, 76px) !important;

    border-radius: 30px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Left text area */
.services-page .about-cta .dc-services-cta > :first-child {
    min-width: 0 !important;
    align-self: center !important;
}

.services-page .about-cta .dc-services-cta h2 {
    max-width: 650px !important;
    margin: 16px 0 20px !important;
    line-height: 1.06 !important;
}

.services-page .about-cta .dc-services-cta p {
    max-width: 650px !important;
    margin: 0 !important;
    line-height: 1.65 !important;
}

/* Restore the two buttons to one horizontal row */
.services-page .about-cta .dc-services-cta
:is(
    .dc-services-cta-actions,
    .cta-actions,
    .actions
) {
    width: auto !important;
    margin-top: 30px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
}

/* Stop the buttons from stretching across the full column */
.services-page .about-cta .dc-services-cta
:is(
    .dc-services-cta-actions,
    .cta-actions,
    .actions
) > a,
.services-page .about-cta .dc-services-cta a.btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 50px !important;

    flex: 0 0 auto !important;
    align-self: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 24px !important;
    border-radius: 13px !important;
}

/* Right-side image wrapper */
.services-page .about-cta .dc-services-cta
:is(
    .dc-services-cta-media,
    .dc-services-cta-visual,
    .dc-services-cta-image,
    figure,
    picture
) {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;

    display: block !important;
    overflow: hidden !important;

    border-radius: 24px !important;
    clip-path: inset(0 round 24px) !important;
    isolation: isolate !important;
}

/* Right-side image */
.services-page .about-cta .dc-services-cta img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1.5 / 1 !important;

    object-fit: cover !important;
    border-radius: 24px !important;
    clip-path: inset(0 round 24px) !important;
}

/* Dark-mode outline-button hover */
html[data-theme="dark"]
.services-page
.about-cta
.dc-services-cta
.btn-outline:hover,
html[data-theme="dark"]
.services-page
.about-cta
.dc-services-cta
.btn-outline:focus-visible {
    color: #0b1f3a !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
    font-weight: 700 !important;
}

html[data-theme="dark"]
.services-page
.about-cta
.dc-services-cta
.btn-outline:hover *,
html[data-theme="dark"]
.services-page
.about-cta
.dc-services-cta
.btn-outline:focus-visible * {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Tablet */
@media (max-width: 960px) {
    .services-page .about-cta .dc-services-cta {
        min-height: 0 !important;
        padding: 42px 32px !important;

        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    .services-page .about-cta .dc-services-cta img {
        aspect-ratio: 16 / 9 !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .services-page .about-cta .dc-services-cta {
        padding: 36px 22px !important;
        gap: 30px !important;
        border-radius: 22px !important;
    }

    .services-page .about-cta .dc-services-cta
    :is(
        .dc-services-cta-actions,
        .cta-actions,
        .actions
    ) {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .services-page .about-cta .dc-services-cta
    :is(
        .dc-services-cta-actions,
        .cta-actions,
        .actions
    ) > a,
    .services-page .about-cta .dc-services-cta a.btn {
        width: 100% !important;
    }

    .services-page .about-cta .dc-services-cta
    :is(
        .dc-services-cta-media,
        .dc-services-cta-visual,
        .dc-services-cta-image,
        figure,
        picture
    ),
    .services-page .about-cta .dc-services-cta img {
        border-radius: 18px !important;
        clip-path: inset(0 round 18px) !important;
    }
}

/* ==========================================================================
   HIRE REMOTE SUPPORT — HERO IMAGE AND PLAN PRICE FIX
   ========================================================================== */

/* Remove the grey empty area below the hero image. */
.hire-support .dc-hire-hero-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;
    background: transparent !important;
    border-radius: 24px !important;
}

/* Force the picture and image to fill the media wrapper completely. */
.hire-support .dc-hire-hero-media picture,
.hire-support .dc-hire-hero-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;

    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
}

/* Make FREE, Pay Per Project and Custom Rate bold. */
.hire-support .plans-grid .plan-card .price,
.hire-support-mobile .hs-card .hs-price {
    font-weight: 800 !important;
}

/* ==========================================================================
   HIRE REMOTE SUPPORT — SECTION HEADING SIZE
   ========================================================================== */

/* Increase these three section headings by approximately 50%. */
.hire-support .how-it-works h2,
.hire-support .how-it-works .section-title,
.hire-support .why-choose h2,
.hire-support .why-choose .section-title,
.hire-support .faq-section h2,
.hire-support .faq-section .section-title,
.hire-support #how-it-works h2,
.hire-support #why-choose h2,
.hire-support #faq h2 {
    font-size: clamp(3rem, 5vw, 4.5rem) !important;
    line-height: 1.08 !important;
}

/* Keep the larger headings responsive on mobile. */
@media (max-width: 768px) {
    .hire-support .how-it-works h2,
    .hire-support .how-it-works .section-title,
    .hire-support .why-choose h2,
    .hire-support .why-choose .section-title,
    .hire-support .faq-section h2,
    .hire-support .faq-section .section-title,
    .hire-support #how-it-works h2,
    .hire-support #why-choose h2,
    .hire-support #faq h2 {
        font-size: clamp(2.3rem, 10vw, 3.25rem) !important;
        line-height: 1.12 !important;
    }
}

/* ==========================================================================
   PUBLIC PAGES — RESTORE FLOATING COMPONENTS
   ABOUT HERO POSITION + BADGE HOVER
   ========================================================================== */

/*
 * Gentle floating motion for public-page visual cards and section shells.
 * Dashboard panels, forms and tables are intentionally excluded.
 */
@keyframes dcPublicComponentFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

body:not(.dashboard-page) :is(
    .industries > .container,
    .core-services > .container,
    .why-business > .container,

    .about-intro-card,
    .who-card,
    .what-we-do > .container,
    .philosophy > .container,
    .how-we-work > .container,
    .vision-mission > .container,
    .commitment > .container,
    .dc-hiring-box,

    .service-about-box,
    .philosophy-box,
    .process-box,
    .vision-box,
    .commitment-card,

    .industry-box,
    .business-box,
    .core-box,
    .service-card,

    .plan-card,
    .step-card,
    .why-card,
    .faq-card,
    .hs-card,
    .hs-small-card,

    .contact-left,
    .contact-right,
    .contact-form-box,
    .dc-contact-information,
    .contact-next,
    .dc-map-card,

    .dc-image-cta,
    .dc-services-cta,
    .cta-box
) {
    animation: dcPublicComponentFloat 6.5s ease-in-out infinite !important;
    will-change: translate;
}

/* Prevent every component from moving at exactly the same moment. */
body:not(.dashboard-page) :is(
    .industry-box,
    .business-box,
    .core-box,
    .service-card,
    .service-about-box,
    .philosophy-box,
    .process-box,
    .vision-box,
    .plan-card,
    .step-card,
    .why-card,
    .faq-card,
    .hs-card,
    .hs-small-card
):nth-child(2n) {
    animation-delay: -1.8s !important;
}

body:not(.dashboard-page) :is(
    .industry-box,
    .business-box,
    .core-box,
    .service-card,
    .service-about-box,
    .philosophy-box,
    .process-box,
    .vision-box,
    .plan-card,
    .step-card,
    .why-card,
    .faq-card,
    .hs-card,
    .hs-small-card
):nth-child(3n) {
    animation-delay: -3.2s !important;
}

/* Pause the continuous movement while the visitor interacts with a card. */
body:not(.dashboard-page) :is(
    .industry-box,
    .business-box,
    .core-box,
    .service-card,
    .service-about-box,
    .philosophy-box,
    .process-box,
    .vision-box,
    .plan-card,
    .step-card,
    .why-card,
    .faq-card,
    .hs-card,
    .hs-small-card
):hover {
    animation-play-state: paused !important;
}


/* ==========================================================================
   ABOUT PAGE — KEEP HERO BELOW FIXED NAVBAR
   ========================================================================== */

.about-intro {
    margin-top: var(--dt-header, 88px) !important;
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}

/* Mobile: keep only a small visible gap below the navbar. */
@media (max-width: 700px) {
    .about-intro {
        margin-top: var(--dt-header, 76px) !important;
        padding-top: 10px !important;
    }
}


/* ==========================================================================
   ABOUT HERO — FOUR SUPPORT BADGES HOVER
   ========================================================================== */

.about-badges span {
    position: relative;
    border: 1px solid rgba(15, 38, 66, 0.14) !important;

    transition:
        transform 0.26s ease,
        box-shadow 0.26s ease,
        border-color 0.26s ease,
        background-color 0.26s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .about-badges span:hover {
        transform: translateY(-6px) scale(1.025) !important;

        border-color: rgba(42, 125, 215, 0.58) !important;

        box-shadow:
            0 16px 30px rgba(20, 54, 92, 0.18),
            0 0 0 4px rgba(73, 153, 235, 0.10) !important;
    }

    html[data-theme="dark"] .about-badges span:hover {
        color: #07101b !important;
        background: #ffffff !important;
        border-color: rgba(112, 193, 255, 0.82) !important;

        box-shadow:
            0 16px 32px rgba(0, 0, 0, 0.40),
            0 0 22px rgba(92, 184, 255, 0.32) !important;
    }
}

/* Accessibility: disable continuous motion when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
    body:not(.dashboard-page) :is(
        .industries > .container,
        .core-services > .container,
        .why-business > .container,
        .about-intro-card,
        .who-card,
        .what-we-do > .container,
        .philosophy > .container,
        .how-we-work > .container,
        .vision-mission > .container,
        .commitment > .container,
        .dc-hiring-box,
        .service-about-box,
        .philosophy-box,
        .process-box,
        .vision-box,
        .commitment-card,
        .industry-box,
        .business-box,
        .core-box,
        .service-card,
        .plan-card,
        .step-card,
        .why-card,
        .faq-card,
        .hs-card,
        .hs-small-card,
        .contact-left,
        .contact-right,
        .contact-form-box,
        .dc-contact-information,
        .contact-next,
        .dc-map-card,
        .dc-image-cta,
        .dc-services-cta,
        .cta-box
    ) {
        animation: none !important;
        translate: none !important;
    }
}