/* ============================================================
   Expedite Software Services — additions on top of the
   Expedite theme CSS (global.css / style.css / responsive.css)
   ============================================================ */

* { font-family: 'Source Sans 3', Source-Sans-Pro, sans-serif; }
body { background-color: #002633; color: #fff; }

/* ---------- ONE site-wide background video ---------- */
.site-bg-video {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}
.site-bg-overlay {
    position: fixed;
    inset: 0;
    background: var(--background-overlay);
    z-index: -1;
    pointer-events: none;
}
.main:before { display: none; }   /* overlay now handled by .site-bg-overlay */

/* ---------- Header / navigation ---------- */
.header-row { align-items: center; }
header .logo img { height: 6.4rem; width: auto; }
.main-navigation { margin-top: 0; }
.main-navigation li.current > a { color: var(--primary-color); }
@media only screen and (min-width: 1280px) {
    .main-navigation .inline-ul { column-gap: 3rem; }
    .main-navigation a { padding-right: 0; font-size: 1.7rem; }
}
@media only screen and (max-width: 1279px) {
    .main-navigation .inline-ul { row-gap: 0.6rem; }
    .main-navigation > .inline-ul a { font-size: 2.2rem; }
}

/* ---------- Home: banner ---------- */
.banner .btn { margin-top: 1rem; }
.banner .discover-link { display: inline-block; margin-top: 4.2rem; font-size: 2.2rem; letter-spacing: .02em; }
.banner .discover-link img { height: 2rem; margin-left: .4rem; transition: transform .3s; }
.banner .discover-link:hover img { transform: translateY(.4rem); }

/* ---------- Home: feature counters ---------- */
.feature .count { font-weight: 300; white-space: nowrap; }

/* ---------- Home: service cards (match live homepage) ---------- */
.services .gradient-bg { position: relative; }
.services .gradient-bg img.icon { width: 6rem; height: 6rem; display: block; filter: brightness(0) invert(1); }
.services .gradient-bg h3 { font-size: 3.2rem; line-height: 3.8rem; }
.services .gradient-bg .link-with-icon .arrow { position: static; margin-left: 1rem; }

/* ---------- Home: who we are ---------- */
.about .section-heading { color: #fff; }
.about p { font-size: 1.8rem; line-height: 1.5; }
.about-right img { border-radius: 0 0 3.7rem; display: block; }
.about { padding-bottom: 15rem; }

/* ---------- Home: why partner ---------- */
.why-partner .ul-grid { margin-top: 5rem; }
.why-partner .ul-grid .grid-item p { font-size: 1.8rem; line-height: 1.5; color: #002633; }

/* ---------- Home: success stories ---------- */
.success-stories .gradient-bg .tile-img { object-fit: cover; aspect-ratio: 420 / 284; }
.success-stories .gradient-bg h3 { padding-right: 8rem; }
.success-stories .section-heading { color: #00968f; }

/* ---------- Home: client testimonials ---------- */
.client-saying { color: #002633; padding-bottom: 2rem; }
.client-saying .section-heading { color: #00968f; }
.client-saying .left-side p { margin-top: 0; }
.client-saying .accordion h3 { font-size: 2.4rem; line-height: 1.4; padding-right: 5rem; }
.client-saying .accordion-content { padding-right: 10rem; }
.client-saying .accordion-content p { font-size: 3.2rem; line-height: 1.45; color: #002633; }

/* ---------- Home: client logo strip ---------- */
.logos { overflow: hidden; padding: 2rem 0 8rem; }
.logos-track { display: flex; width: max-content; }
.logos-slide img { height: 9.2rem; width: auto; }

/* ---------- White content area ---------- */
.white-bg .success-stories { padding: 12rem 0; }
.white-bg .success-stories + .success-stories { padding-top: 0; }
.white-bg .ul-grid.ul-100 { margin-top: 0; row-gap: 3.6rem; }
.white-bg .ul-grid .grid-item { padding-right: 0; }
.white-bg .ul-grid .grid-item p { font-size: 1.8rem; line-height: 1.5; margin: 0; color: #002633; }
.white-bg .ul-grid h4 { margin-bottom: 0.6rem; }
.white-bg .tile-img { width: 100%; height: auto; display: block; }

.engagement { color: #002633; padding-bottom: 12rem; }
.engagement .section-heading { margin-bottom: 5rem; }
.engagement .accordion-content p { font-size: 2rem; line-height: 1.5; color: #002633; }
.accordion-content ul { padding-left: 2rem; margin-bottom: 1.5rem; }
.accordion-content ul li { font-size: 1.8rem; line-height: 1.6; color: #002633; }

.cta-band {
    background: linear-gradient(112.9deg, #00968f 0, #002633 100%);
    color: #fff;
    padding: 6rem 0;
}
.cta-band .d-flex { align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.cta-band h3 { font-size: 3.6rem; line-height: 1.2; max-width: 78rem; }
.cta-band .btn { background-color: #002633; border-color: #002633; }
.cta-band .btn .arrow { background-color: #00968f; }

/* ---------- Job seekers ---------- */
.banner-inner-page .btn + .btn { margin-left: 1.8rem; }
.jobs-intro { color: #002633; padding-top: 0; }
.jobs-intro .section-heading { color: #00968f; }

/* ---------- Footer sits on the video ---------- */
footer { position: relative; background: transparent; }

/* ---------- Responsive tweaks ---------- */
@media only screen and (max-width: 991px) {
    .client-saying .accordion-content { padding-right: 0; }
    .client-saying .accordion-content p { font-size: 2.2rem; }
    .about { padding-bottom: 7rem; }
    .about .two-columns > div.about-right { order: 1; }
    .logos-track { display: block; width: 100%; }
    .logos-slide[aria-hidden] { display: none; }
}
@media only screen and (max-width: 991px) {
    header .logo img { height: 4.4rem; }
    .services { background-color: transparent; padding-bottom: 8rem; }
    .about, .services.withMargin { background-color: transparent; }
    .white-bg .success-stories { padding: 7rem 0; }
    .engagement { padding-bottom: 7rem; }
    .cta-band h3 { font-size: 2.8rem; }
    .banner-inner-page .btn + .btn { margin: 1rem 0 0; }
    .feature .three-columns { display: grid; }
}
@media only screen and (max-width: 767px) {
    .logos-slide img { height: 7rem; }
}

/* Buttons inside .success-stories: undo the case-study card arrow styling */
.success-stories .btn .arrow {
    position: absolute;
    right: 6px;
    bottom: auto;
    width: 3.6rem;
    height: 3.6rem;
    background-color: #002633;
}
.success-stories .btn:hover .arrow { right: calc(100% - 4.2rem); }

/* Footer address */
.footer-left .footer-address { font-size: 1.6rem; line-height: 1.5; margin-top: 1.5rem; max-width: 42rem; }

/* Keep menu items on one line */
@media only screen and (min-width: 1280px) {
    .main-navigation .inline-ul { column-gap: 2.6rem; }
    .main-navigation li { white-space: nowrap; }
    header .logo img { height: 6rem; }
    .footer-right { padding-right: 16rem; column-gap: 3rem; grid-template-columns: auto auto; justify-content: end; }
}
footer .divider img { width: 16rem; height: auto; }

/* Testimonials: theme sets the 2-column grid with !important, so stack it on small screens */
.client-saying .right-side { min-width: 0; }
@media only screen and (max-width: 991px) {
    .client-saying .two-columns { grid-template-columns: 100% !important; row-gap: 4rem; }
    .client-saying .left-side { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 2rem; }
    .client-saying .left-side > div { margin-bottom: 0; }
    .client-saying .left-side .count { font-size: 5.6rem; }
    .client-say { overflow: hidden; }
}

/* Technologies strip */
.tech-strip { color: #002633; padding: 8rem 0 10rem; }
.tech-strip .tag-list li { font-size: 2.8rem; color: #8a9aa0; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding: 0 3rem; }
.tech-strip .tag-list li:hover { color: #00968f; }
.testimonials-list { margin-top: 4rem; }
@media only screen and (max-width: 767px) {
    .tech-strip .tag-list { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 1.2rem 0; }
    .tech-strip .tag-list li { font-size: 2rem; padding: 0 1.5rem; }
}

/* Technology names shown in the logo-strip style */
.tech-logos .logos-slide { align-items: center; }
.tech-logos .tech-logo {
    display: inline-block;
    margin: 0 3.4rem;
    font-size: 3.4rem;
    font-weight: 600;
    color: #002633;
    opacity: .35;
    white-space: nowrap;
    transition: opacity .3s;
}
.tech-logos .tech-logo:hover { opacity: 1; color: #00968f; }
.about .two-columns { min-height: 30rem; }
@media only screen and (max-width: 767px) {
    .tech-logos .tech-logo { font-size: 2.6rem; margin: 0; }
}

/* ---------- Breadcrumb navigation (SEO) ---------- */
.breadcrumb { padding: 1.6rem 0 0; position: relative; z-index: 1; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; font-size: 1.4rem; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-color); }
.breadcrumb li[aria-current] { color: var(--primary-color); }

/* ---------- Process steps (staff augmentation) ---------- */
.process-steps { margin-top: 5rem; display: grid; row-gap: 3rem; }
.process-step { display: flex; align-items: flex-start; gap: 2.4rem; }
.step-number {
    flex-shrink: 0;
    width: 5.6rem; height: 5.6rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #00968f, #002633);
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}
.step-content h4 { font-size: 2.2rem; margin-bottom: 0.6rem; color: #002633; }
.step-content p { font-size: 1.8rem; line-height: 1.5; color: #002633; margin: 0; }
@media only screen and (max-width: 767px) {
    .step-number { width: 4.4rem; height: 4.4rem; font-size: 2rem; }
    .step-content h4 { font-size: 2rem; }
    .process-steps { row-gap: 2.4rem; }
}

/* Case-study cards in two-column grid */
.success-stories .two-columns .gradient-bg { height: 100%; display: flex; flex-direction: column; }
.success-stories .two-columns .gradient-bg h3 { padding-right: 0; }
.success-stories .two-columns .gradient-bg .tile-img { aspect-ratio: 800 / 533; }
@media only screen and (max-width: 991px) {
    .success-stories .two-columns { row-gap: 3.6rem !important; }
}

/* Service page: padding tweaks */
.padding-top-0 { padding-top: 0 !important; }
.page-section { padding: 10rem 0; }
.page-section + .page-section { padding-top: 0; }

/* ---------- The Challenge: dark box ---------- */
.challenge-box {
    background: #0a1628;
    border-radius: 1.6rem;
    padding: 4.8rem;
    color: #fff;
}
.challenge-box .section-heading { color: #fff; }
.pain-list { margin-top: 3rem; display: grid; row-gap: 2.4rem; }
.pain-item { display: flex; align-items: flex-start; gap: 1.6rem; }
.pain-ico { flex-shrink: 0; width: 2.8rem; height: 2.8rem; line-height: 1; }
.pain-item strong { display: block; font-size: 1.8rem; color: #fff; }
.pain-item p { font-size: 1.5rem; line-height: 1.5; color: rgba(255,255,255,.6); margin: 0.3rem 0 0; }
@media only screen and (max-width: 991px) {
    .challenge-box { padding: 3.2rem 2.4rem; }
}

/* ---------- Roles grid ---------- */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.role-chip {
    background: #f3f7f9;
    border: 1px solid #e0e8ec;
    border-radius: 1.2rem;
    padding: 2.4rem;
    transition: border-color .3s, box-shadow .3s;
}
.role-chip:hover { border-color: #00968f; box-shadow: 0 4px 16px rgba(0,150,143,.12); }
.role-chip h4 { font-size: 1.9rem; color: #002633; margin: 0 0 0.6rem; }
.role-chip p { font-size: 1.4rem; line-height: 1.5; color: #5a7080; margin: 0; }
@media only screen and (max-width: 991px) {
    .roles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 575px) {
    .roles-grid { grid-template-columns: 1fr; }
}

/* ---------- Why-CTA panel ---------- */
.why-cta-panel {
    background: #0a1628;
    color: #fff;
    border-radius: 1.6rem;
    padding: 4.8rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.why-cta-panel h3 { font-size: 3rem; line-height: 1.25; margin-bottom: 1.4rem; }
.why-cta-panel p { font-size: 1.7rem; line-height: 1.55; color: rgba(255,255,255,.65); margin-bottom: 2.6rem; }
.why-cta-panel .btn { background-color: #00968f; border-color: #00968f; }

/* ---------- Process section (dark background) ---------- */
.process-section {
    background: #0a1628;
    color: #fff;
    padding: 10rem 0;
    border-radius: 0;
}
.process-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem; }
.timeline-step { text-align: center; position: relative; }
.timeline-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3rem;
    right: -1.2rem;
    width: 2.4rem;
    height: 2px;
    background: rgba(255,255,255,.15);
}
.timeline-num {
    width: 6rem; height: 6rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #00968f, #002633);
    border: 2px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
}
.timeline-step h4 { font-size: 2rem; margin-bottom: 0.6rem; color: #fff; }
.timeline-step p { font-size: 1.5rem; line-height: 1.5; color: rgba(255,255,255,.55); margin: 0; }
@media only screen and (max-width: 991px) {
    .process-timeline { grid-template-columns: 1fr; gap: 2rem; }
    .timeline-step { text-align: left; display: flex; align-items: flex-start; gap: 2rem; }
    .timeline-step:not(:last-child)::after { display: none; }
    .timeline-num { margin: 0; flex-shrink: 0; width: 5rem; height: 5rem; font-size: 2rem; }
    .process-section { padding: 7rem 0; }
}

/* ---------- Industry grid ---------- */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
}
.industry-card {
    background: #f3f7f9;
    border: 1px solid #e0e8ec;
    border-radius: 1.2rem;
    padding: 3rem 2.4rem;
    transition: transform .25s, box-shadow .25s;
}
.industry-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,38,51,.1); }
.industry-ico { display: block; width: 3.2rem; height: 3.2rem; margin-bottom: 1.2rem; }
.industry-card h4 { font-size: 2rem; color: #002633; margin: 0 0 0.6rem; }
.industry-card p { font-size: 1.5rem; line-height: 1.5; color: #5a7080; margin: 0; }
@media only screen and (max-width: 991px) {
    .industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 575px) {
    .industry-grid { grid-template-columns: 1fr; }
}

/* ---------- Featured case study ---------- */
.cs-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.6rem;
    background: #0a1628;
    border-radius: 1.6rem;
    overflow: hidden;
}
.cs-featured-left { padding: 4.8rem; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.cs-featured-left h3 { font-size: 2.8rem; line-height: 1.3; margin-bottom: 1.4rem; color: #fff; }
.cs-featured-left p { font-size: 1.7rem; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0 0 2rem; }
.cs-featured-right { position: relative; }
.cs-featured-right .tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-tag {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #00968f;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}
.cs-metrics { display: flex; gap: 3rem; margin-bottom: 2rem; }
.cs-metric-val { font-size: 3.2rem; font-weight: 300; color: #00968f; line-height: 1; }
.cs-metric-lbl { font-size: 1.2rem; color: rgba(255,255,255,.5); margin-top: 0.4rem; }
.cs-tech-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cs-tech-tag {
    display: inline-block;
    font-size: 1.2rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 0.4rem;
    color: rgba(255,255,255,.6);
    white-space: nowrap;
}
@media only screen and (max-width: 991px) {
    .cs-featured { grid-template-columns: 1fr; }
    .cs-featured-left { padding: 3.2rem 2.4rem; }
    .cs-featured-right { max-height: 28rem; }
}

/* ---------- Testimonials grid ---------- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-top: 4rem;
}
.testimonial-card {
    background: #f3f7f9;
    border: 1px solid #e0e8ec;
    border-radius: 1.2rem;
    padding: 3.2rem;
    display: flex;
    flex-direction: column;
}
.testi-stars { color: #f5a623; font-size: 2rem; margin-bottom: 1.6rem; letter-spacing: .15em; }
.testi-text { font-size: 1.7rem; line-height: 1.6; color: #002633; flex: 1; margin: 0 0 2rem; }
.testi-author { display: flex; align-items: center; gap: 1.2rem; }
.testi-avatar {
    width: 4.4rem; height: 4.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #00968f, #002633);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.testi-author strong { display: block; font-size: 1.6rem; color: #002633; }
.testi-author span { font-size: 1.3rem; color: #5a7080; }
@media only screen and (max-width: 991px) {
    .testimonials-grid { grid-template-columns: 1fr; }
}

/* ---------- Comparison table ---------- */
.comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.7rem;
    min-width: 64rem;
}
.comparison-table thead th {
    background: #002633;
    color: #fff;
    font-weight: 600;
    padding: 1.8rem 2.4rem;
    text-align: left;
    white-space: nowrap;
}
.comparison-table thead th:first-child { border-radius: 1rem 0 0 0; }
.comparison-table thead th:last-child { border-radius: 0 1rem 0 0; }
.comparison-table thead th.col-highlight { background: #00968f; }
.comparison-table tbody td {
    padding: 1.6rem 2.4rem;
    border-bottom: 1px solid #e0e8ec;
    color: #002633;
    vertical-align: top;
}
.comparison-table tbody td.col-highlight { background: rgba(0,150,143,.06); }
.comparison-table tbody td.col-highlight.yes { color: #00796b; font-weight: 500; }
.comparison-table tbody td.muted { color: #7d8e96; }
.comparison-table tbody tr:last-child td:first-child { border-radius: 0 0 0 1rem; }
.comparison-table tbody tr:last-child td:last-child { border-radius: 0 0 1rem 0; }
@media only screen and (max-width: 767px) {
    .comparison-table { font-size: 1.5rem; }
    .comparison-table thead th,
    .comparison-table tbody td { padding: 1.2rem 1.4rem; }
}

/* ---------- Section image placeholder ---------- */
.section-img-placeholder {
    margin: 2.4rem 0;
    border-radius: 1.2rem;
    overflow: hidden;
}
.section-img-placeholder img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.2rem;
    object-fit: cover;
}

/* ---------- Approach header with image ---------- */
.approach-header.two-columns { align-items: center; margin-bottom: 3rem; }
.approach-img-wrap { border-radius: 1.2rem; overflow: hidden; }
.approach-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.2rem;
    object-fit: cover;
}
@media only screen and (max-width: 991px) {
    .approach-header.two-columns { margin-bottom: 2rem; }
    .approach-img-wrap { margin-top: 2rem; }
}

/* ---------- Why Expedite layout with image ---------- */
.why-layout.two-columns { align-items: flex-start; }
.why-img-wrap {
    border-radius: 1.2rem;
    overflow: hidden;
    position: sticky;
    top: 12rem;
}
.why-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.2rem;
    object-fit: cover;
}
@media only screen and (max-width: 991px) {
    .why-img-wrap { position: static; margin-top: 3rem; }
}

/* ---------- Visual break image row ---------- */
.visual-break { padding: 0; }
.break-img-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.break-img-col {
    border-radius: 1.2rem;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.break-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.break-img-col:hover img { transform: scale(1.05); }
@media only screen and (max-width: 767px) {
    .break-img-row { grid-template-columns: 1fr; gap: 1.2rem; }
    .break-img-col { aspect-ratio: 16 / 9; }
}

/* ---------- Case study cards: homepage style ---------- */
.cs-card-link {
    display: block;
    text-decoration: none;
    color: #fff;
}
.cs-card-link:hover { color: #fff; }
.cs-card-link .arrow {
    background-color: #00968f;
    transition: background-color .3s, transform .3s;
}
.cs-card-link:hover .arrow {
    background-color: #002633;
    transform: scale(1.1);
}
.cs-card-link .arrow img {
    width: 1.6rem;
    height: auto;
}

/* ---------- Engagement models grid (IT Outsourcing) ---------- */
.models-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
    margin-top: 4rem;
}
.model-card {
    background: #f3f7f9;
    border: 1px solid #e0e8ec;
    border-radius: 1.2rem;
    padding: 3.2rem 2.8rem;
    border-top: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: transform .25s, box-shadow .25s;
}
.model-card::before {
    content: "";
    position: absolute;
    inset: -3px -1px -1px;
    border-radius: 1.2rem 1.2rem 0 0;
    border-top: 3px solid;
    border-image: linear-gradient(135deg, #00968f, #002633) 1;
    pointer-events: none;
}
.model-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,38,51,.1); }
.model-ico { display: block; width: 3.6rem; height: 3.6rem; margin-bottom: 1.4rem; }
.model-ico svg { width: 100%; height: 100%; }
.model-tag {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #00968f;
    margin-bottom: 1rem;
}
.model-card h4 { font-size: 2.2rem; color: #002633; margin: 0 0 0.8rem; }
.model-card > p { font-size: 1.5rem; line-height: 1.55; color: #5a7080; margin: 0 0 1.6rem; }
.model-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    row-gap: 0.8rem;
}
.model-list li {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #002633;
    padding-left: 2rem;
    position: relative;
}
.model-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.8rem;
    height: 0.8rem;
    border-right: 2px solid #00968f;
    border-top: 2px solid #00968f;
    transform: rotate(45deg);
}
@media only screen and (max-width: 991px) {
    .models-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Service tag pills */
.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.2rem;
}
.svc-tag {
    display: inline-block;
    background: rgba(0, 150, 143, 0.1);
    color: #00968f;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(0, 150, 143, 0.25);
    line-height: 1.4;
}

/* SEO deep-dive content boxes */
.seo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
}
.seo-box {
    background: #f7f9fa;
    border: 1px solid #e2e8ed;
    border-radius: 1rem;
    padding: 2.8rem;
}
.seo-box h4 {
    font-size: 1.8rem;
    color: #002633;
    margin-bottom: 1.2rem;
    line-height: 1.35;
}
.seo-box p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #3a4a56;
}
.seo-list {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0 0;
}
.seo-list li {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #3a4a56;
    padding-left: 2rem;
    position: relative;
    margin-bottom: 0.6rem;
}
.seo-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.8rem;
    height: 0.8rem;
    border-right: 2px solid #00968f;
    border-top: 2px solid #00968f;
    transform: rotate(45deg);
}
@media only screen and (max-width: 991px) {
    .seo-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   SERVICE PAGES — COMPREHENSIVE MOBILE RESPONSIVE
   ============================================================= */

/* ---------- Stats 4-column → 2x2 on tablet, 1-col on phone ---------- */
.feature .three-columns.stats-4col { grid-template-columns: repeat(4, 1fr) !important; column-gap: 4rem; }
@media only screen and (max-width: 991px) {
    .feature .three-columns.stats-4col { grid-template-columns: repeat(2, 1fr) !important; row-gap: 3rem; column-gap: 4rem; }
}
@media only screen and (max-width: 575px) {
    .feature .three-columns.stats-4col { grid-template-columns: 1fr !important; }
}

/* ---------- Page section padding reduction ---------- */
@media only screen and (max-width: 991px) {
    .page-section { padding: 6rem 0; }
    .page-section + .page-section { padding-top: 0; }
    .process-section { padding: 6rem 0; }
}
@media only screen and (max-width: 575px) {
    .page-section { padding: 4rem 0; }
    .process-section { padding: 4rem 0; }
}

/* ---------- Banner inner page mobile ---------- */
@media only screen and (max-width: 991px) {
    .banner-inner-page h1 { font-size: 4rem; line-height: 4.6rem; }
    .banner-inner-page p { font-size: 1.8rem; }
    .banner-inner-page .btn + .btn { margin-left: 0; margin-top: 1rem; }
}
@media only screen and (max-width: 575px) {
    .banner-inner-page h1 { font-size: 3rem; line-height: 3.6rem; }
    .banner-inner-page p { font-size: 1.6rem; }
    .banner-inner-page .banner-inner .btn { display: inline-flex; width: 100%; justify-content: center; }
}

/* ---------- Section titles / headings mobile ---------- */
@media only screen and (max-width: 767px) {
    .section-heading { font-size: 3.2rem !important; line-height: 3.8rem !important; }
    h3 { font-size: 2.2rem; line-height: 2.6rem; }
}
@media only screen and (max-width: 575px) {
    .section-heading { font-size: 2.6rem !important; line-height: 3.2rem !important; }
}

/* ---------- Feature counters mobile ---------- */
@media only screen and (max-width: 767px) {
    .feature .count { font-size: 7rem; }
    .feature p { font-size: 1.7rem; }
    .feature { padding: 3rem 0; }
}

/* ---------- Challenge box mobile ---------- */
@media only screen and (max-width: 575px) {
    .challenge-box { padding: 2.4rem 1.8rem; border-radius: 1.2rem; }
    .challenge-box .section-heading { font-size: 2.4rem !important; line-height: 3rem !important; }
    .pain-item { gap: 1.2rem; }
    .pain-ico { width: 2.4rem; height: 2.4rem; }
    .pain-item strong { font-size: 1.6rem; }
    .pain-item p { font-size: 1.4rem; }
}

/* ---------- Approach header mobile ---------- */
@media only screen and (max-width: 575px) {
    .approach-header.two-columns { margin-bottom: 1.5rem; }
}

/* ---------- UL grid (Why Partner, Our Approach lists) mobile ---------- */
@media only screen and (max-width: 991px) {
    .ul-grid { row-gap: 2rem; }
    .ul-grid .grid-item h4 { font-size: 2rem; }
}

/* ---------- Roles grid mobile ---------- */
@media only screen and (max-width: 575px) {
    .role-chip { padding: 2rem 1.8rem; }
    .role-chip h4 { font-size: 1.7rem; }
    .role-chip p { font-size: 1.3rem; }
}

/* ---------- Process timeline mobile ---------- */
@media only screen and (max-width: 575px) {
    .timeline-step { gap: 1.4rem; }
    .timeline-num { width: 4.2rem; height: 4.2rem; font-size: 1.8rem; }
    .timeline-step h4 { font-size: 1.7rem; }
    .timeline-step p { font-size: 1.4rem; }
}

/* ---------- Industry grid mobile ---------- */
@media only screen and (max-width: 575px) {
    .industry-card { padding: 2.4rem 2rem; }
    .industry-card h4 { font-size: 1.8rem; }
    .industry-card p { font-size: 1.4rem; }
}

/* ---------- Testimonial cards mobile ---------- */
@media only screen and (max-width: 575px) {
    .testimonial-card { padding: 2.4rem 2rem; }
    .testi-text { font-size: 1.5rem; }
    .testi-author strong { font-size: 1.4rem; }
    .testi-author span { font-size: 1.2rem; }
    .testi-avatar { width: 3.6rem; height: 3.6rem; font-size: 1.3rem; }
}

/* ---------- Comparison table mobile ---------- */
@media only screen and (max-width: 575px) {
    .comparison-table { font-size: 1.3rem; min-width: 52rem; }
    .comparison-table thead th,
    .comparison-table tbody td { padding: 1rem 1rem; }
    .comparison-table-wrap { margin: 0 -1.4rem; padding: 0 1.4rem; }
}

/* ---------- Featured case study mobile ---------- */
@media only screen and (max-width: 575px) {
    .cs-featured-left { padding: 2.4rem 2rem; }
    .cs-featured-left h3 { font-size: 2.2rem; }
    .cs-featured-left p { font-size: 1.5rem; }
    .cs-metrics { gap: 2rem; flex-wrap: wrap; }
    .cs-metric-val { font-size: 2.6rem; }
    .cs-featured-right { max-height: 22rem; }
}

/* ---------- Engagement models grid mobile ---------- */
@media only screen and (max-width: 575px) {
    .model-card { padding: 2.4rem 2rem; }
    .model-card h4 { font-size: 2rem; }
    .model-card > p { font-size: 1.4rem; }
    .model-list li { font-size: 1.3rem; }
}

/* ---------- SEO boxes mobile ---------- */
@media only screen and (max-width: 575px) {
    .seo-box { padding: 2rem 1.8rem; }
    .seo-box h4 { font-size: 1.6rem; }
    .seo-box p { font-size: 1.3rem; }
    .seo-list li { font-size: 1.3rem; }
}

/* ---------- CTA band mobile ---------- */
@media only screen and (max-width: 767px) {
    .cta-band { padding: 4rem 0; }
    .cta-band h3 { font-size: 2.4rem; }
    .cta-band .d-flex { flex-direction: column; align-items: flex-start; }
}
@media only screen and (max-width: 575px) {
    .cta-band h3 { font-size: 2rem; }
    .cta-band .btn { width: 100%; justify-content: center; }
}

/* ---------- Why CTA panel mobile ---------- */
@media only screen and (max-width: 991px) {
    .why-cta-panel { padding: 3.2rem 2.4rem; margin-top: 2rem; }
    .why-cta-panel h3 { font-size: 2.4rem; }
    .why-cta-panel p { font-size: 1.5rem; }
}

/* ---------- Service card icons mobile ---------- */
@media only screen and (max-width: 767px) {
    .services .gradient-bg h3 { font-size: 2.4rem; line-height: 3rem; }
    .services .gradient-bg img.icon { width: 4.8rem; height: 4.8rem; }
}

/* ---------- Process steps (Why Expedite) mobile ---------- */
@media only screen and (max-width: 575px) {
    .process-step { gap: 1.6rem; }
    .step-content h4 { font-size: 1.8rem; }
    .step-content p { font-size: 1.5rem; }
}

/* ---------- Tech strip / tech logos mobile ---------- */
@media only screen and (max-width: 991px) {
    .tech-strip { padding: 5rem 0 6rem; }
}
@media only screen and (max-width: 575px) {
    .tech-strip { padding: 3rem 0 4rem; }
    .tech-logos .tech-logo { font-size: 2rem; margin: 0 1.2rem; }
}

/* ---------- Service tags mobile ---------- */
@media only screen and (max-width: 575px) {
    .svc-tags { gap: 0.5rem; }
    .svc-tag { font-size: 1.1rem; padding: 0.3rem 0.8rem; }
}

/* ---------- Visual break image row mobile ---------- */
@media only screen and (max-width: 575px) {
    .break-img-col { aspect-ratio: 3 / 2; }
}

/* ---------- Success stories section mobile ---------- */
@media only screen and (max-width: 767px) {
    .success-stories .gradient-bg h3 { font-size: 2rem; padding: 2rem 2rem 2rem 2.4rem; }
}

/* ---------- Accordion / FAQ mobile ---------- */
@media only screen and (max-width: 575px) {
    .accordion h3 { font-size: 1.7rem !important; padding: 1.8rem 4rem 1.8rem 0 !important; }
    .accordion-content p { font-size: 1.6rem; }
    .accordion-content ul li { font-size: 1.5rem; }
}

/* ---------- White-bg two-columns stacking (ensure images go below text) ---------- */
@media only screen and (max-width: 991px) {
    .white-bg .two-columns > div:has(img.tile-img) { order: 2; }
    .white-bg .two-columns > .left-side { order: 1; }
    .white-bg .reverse-order .right-side { order: 2; }
}

/* ---------- Breadcrumb mobile ---------- */
@media only screen and (max-width: 575px) {
    .breadcrumb ol { font-size: 1.2rem; }
}

/* ---------- Contact form mobile ---------- */
@media only screen and (max-width: 575px) {
    .form-wrapper { padding: 2rem; }
    .contact-wrapper .contform-info { padding: 2rem 0 0; }
    .contform-info h3.section-heading { font-size: 2.4rem !important; }
}

/* ---------- About page banner-columns (core values) mobile ---------- */
@media only screen and (max-width: 575px) {
    .banner-columns > div { padding: 2rem 1.6rem; }
    .banner-columns > div h3 { font-size: 1.8rem; }
}

/* ---------- About page Our Logo section mobile ---------- */
@media only screen and (max-width: 991px) {
    .our-logo .two-columns { align-items: center; }
    .our-logo .left-side img { max-width: 20rem; margin: 0 auto; display: block; }
}

/* ---------- General mobile body text ---------- */
@media only screen and (max-width: 575px) {
    .page-section p { font-size: 1.6rem !important; line-height: 1.5 !important; }
    .engagement .accordion-content p { font-size: 1.6rem; }
}

/* =============================================================
   CASE STUDY LISTING — IMAGE CARD GRID
   ============================================================= */

.cs-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 4rem;
}
.cs-card {
    position: relative;
    display: block;
    border-radius: 1.2rem;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    color: #fff;
}
.cs-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.cs-card:hover .cs-card__img {
    transform: scale(1.05);
}
.cs-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.5rem;
    background: linear-gradient(0deg, rgba(0,38,51,.85) 0%, rgba(0,38,51,.45) 40%, transparent 70%);
}
.cs-card__title {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 0.5rem;
    padding-right: 5rem;
}
.cs-card__arrow {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #00968f;
    border-radius: 50%;
    transition: background-color .3s;
}
.cs-card:hover .cs-card__arrow {
    background-color: #016060;
}
.cs-card__arrow img {
    width: 2rem;
    height: 2rem;
    filter: brightness(0) invert(1);
}

/* ---------- Case study cards — tablet ---------- */
@media only screen and (max-width: 991px) {
    .cs-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* ---------- Case study cards — mobile ---------- */
@media only screen and (max-width: 575px) {
    .cs-cards-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cs-card { aspect-ratio: 3 / 4; }
    .cs-card__title { font-size: 1.8rem; }
}

/* =============================================================
   CASE STUDY DETAIL — BRAND COLOUR OVERRIDES
   Override pink/magenta gradients from style.css with brand teal
   ============================================================= */

/* Gradient background sections (Challenge / Conclusion) */
.success-stories .with-bg,
.success-stories.with-bg.with-bg-gradient {
    background: linear-gradient(135deg, #00968f 0%, #002633 100%) !important;
}

/* Ensure all text inside gradient sections stays white */
.success-stories.with-bg.with-bg-gradient * {
    color: #fff;
}
.success-stories.with-bg.with-bg-gradient .ul-grid .grid-item p,
.success-stories.with-bg.with-bg-gradient .ul-grid .grid-item,
.success-stories.with-bg.with-bg-gradient .ul-grid.inline-ul .grid-item p,
.success-stories.with-bg.with-bg-gradient p,
.success-stories.with-bg.with-bg-gradient .section-heading {
    color: #fff !important;
}

/* Accent colour for h4 inside gradient sections */
.success-stories.with-bg.with-bg-gradient .grid-item h4,
.success-stories.with-bg.with-bg-gradient .ul-grid .grid-item h4,
.success-stories.with-bg.with-bg-gradient .ul-grid.inline-ul .grid-item h4 {
    color: #67e7e1 !important;
}

/* Section title brackets inside gradient sections */
.success-stories.with-bg.with-bg-gradient .section-title,
.success-stories.with-bg.with-bg-gradient .section-title::before,
.success-stories.with-bg.with-bg-gradient .section-title::after {
    color: #67e7e1 !important;
}

/* Override any remaining pink accent colours */
.pink-elem::after,
.pink-elem::before,
.ul-grid.red h4 {
    color: #00968f !important;
}
.ul-grid.red .grid-item::before {
    background: linear-gradient(135deg, #00968f 0%, #002633 100%) !important;
}

/* =============================================================
   CASE STUDY DETAIL — SPACING OVERRIDES
   ============================================================= */

/* --- 1. BANNER AREA --- */
/* Remove the 100vh min-height on .main so banner doesn't leave a big gap */
.main:has(.banner-inner-page) {
    min-height: auto !important;
}
.white-bg {
    margin-top: 0 !important;
}

/* Add bottom padding to inner-page banners so text doesn't touch content */
.banner.banner-inner-page {
    padding-bottom: 6rem !important;
}
.banner-inner-page .banner-inner p {
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 1.8rem;
}
.banner-inner-page .banner-inner p:last-child {
    margin-bottom: 0;
}
.banner-inner-page h1 {
    margin-bottom: 2.5rem;
}

/* --- 2. MAIN CONTENT SECTIONS --- */
.white-bg .success-stories.page-section {
    padding: 6rem 0 !important;
}
.white-bg > .success-stories.page-section:first-child {
    padding-top: 6rem !important;
}
.success-stories.page-section.padding-top-0 {
    padding-top: 3rem !important;
}

/* Section title label (OVERVIEW, CHALLENGE, etc.) → heading gap
   Global default is 2.8rem — keep generous spacing */
.success-stories.page-section .section-title {
    margin-bottom: 2.8rem;
}

/* Section heading → content gap */
.success-stories.page-section .section-heading {
    margin-bottom: 2.5rem;
}

/* --- 3. GRID ITEMS --- */
.success-stories.page-section .ul-grid.inline-ul {
    margin-top: 3rem;
}
.success-stories.page-section .ul-grid .grid-item {
    margin-bottom: 3.5rem;
}
/* h4 → paragraph gap inside each grid item */
.success-stories.page-section .ul-grid .grid-item h4 {
    margin-bottom: 1rem;
}
.success-stories.page-section .ul-grid .grid-item p {
    margin-top: 0.5rem;
    line-height: 1.7;
    font-size: 1.6rem;
}

/* --- 4. GRADIENT SECTIONS (Challenge / Conclusion) --- */
.success-stories.page-section.padding-top-7 {
    padding: 6rem 0 !important;
    margin-top: 0;
    margin-bottom: 0;
}
.success-stories .with-bg,
.success-stories.with-bg {
    padding: 6rem 10rem !important;
}
.success-stories.with-bg.with-bg-gradient .section-title {
    margin-bottom: 2.8rem;
}
.success-stories.with-bg.with-bg-gradient .section-heading {
    margin-bottom: 2.5rem;
}
.success-stories.with-bg.with-bg-gradient .ul-grid.inline-ul {
    margin-top: 3rem !important;
}
.success-stories.with-bg.with-bg-gradient .ul-grid .grid-item {
    margin-bottom: 3.5rem;
}
.success-stories.with-bg.with-bg-gradient .ul-grid .grid-item h4 {
    margin-bottom: 1rem;
}
.success-stories.with-bg.with-bg-gradient .ul-grid .grid-item p {
    margin-top: 0.5rem;
    line-height: 1.7;
    font-size: 1.6rem;
    color: #fff !important;
}

/* --- 5. REMOVE GAPS BETWEEN SECTIONS --- */
.success-stories.page-section + .success-stories.page-section {
    margin-top: 0;
}
.success-stories.with-bg {
    margin-bottom: 0 !important;
}

/* ---------- Case study category listing — grouped sections ---------- */
.cs-category-section {
    margin-bottom: 5rem;
}
.cs-category-section:last-child {
    margin-bottom: 0;
}
.cs-category-section h3.section-heading {
    margin-bottom: 0.5rem;
}
.cs-category-section > p {
    font-size: 1.6rem;
    color: #666;
    margin-bottom: 0;
}