/* ==========================================================================
   HEALTHCARE IT SERVICES PAGE
   Loads after main.css, scoped to body.page-healthcare-it.

   The page no longer uses the shared single-service layout (sticky sidebar
   + .btc-service-* card lists). Every block below is its own layout so no
   two sections read the same way as you scroll:

     1. Validation   - framed image left, numbered icon card grid right
     2. Localization - full-bleed photo band with a floating centre panel
     3. Advisory     - image banner headline + connected step roadmap
     4. Technologies - mixed-width image card grid (2 wide + 3 standard)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. PAGE TOKENS + SHARED PIECES
   -------------------------------------------------------------------------- */

.page-healthcare-it {
    --hit-green: #00984a;
    --hit-green-soft: rgba(0, 152, 74, .10);
    --hit-navy: #204066;
    --hit-ink: #1b1b1b;
    --hit-body: #6b7280;
    --hit-line: #e6e9ee;
    --hit-tint: #f5f8f6;
    --hit-radius: 16px;
    --hit-shadow: 0 18px 46px rgba(20, 40, 60, .09);
}

.page-healthcare-it section > .container {
    position: relative;
    z-index: 2;
}

/* Section sub-titles reuse .section-title span from main.css, exactly as the
   About page does, so the chip and its char-stagger match site-wide. Only the
   gap below the chip is set here - main.css leaves it to .section-title. */
.page-healthcare-it .section-title .subtitle {
    margin-bottom: 22px;
}

/* On the advisory photo banner the base rule's green tint is !important, so
   the .style-2 white fill needs the same weight to land. */
.hit-advisory-banner-copy .section-title span.style-2 {
    background: rgba(255, 255, 255, .16) !important;
    color: #fff;
}

.page-healthcare-it h2 {
    color: var(--hit-ink);
    line-height: 1.28;
}

.page-healthcare-it h6 {
    color: var(--hit-ink);
    line-height: 1.45;
    margin: 0;
}

/* Body copy runs at 18px on desktop across every section - card blurbs
   included - and steps down at the tablet breakpoint. */
.page-healthcare-it p {
    color: var(--hit-body);
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   1. CLINICAL & DOMAIN VALIDATION
   White band - the cards read as outlined boxes against it. The image column
   is narrower than the content column and sticks while the six numbered
   cards scroll past it on large screens.
   -------------------------------------------------------------------------- */

.hit-validation {
    padding: 90px 0;
    background: #fff;
}

.hit-validation-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    align-items: start;
}

.hit-validation-media {
    position: sticky;
    top: 120px;
}

.hit-frame {
    position: relative;
    border-radius: var(--hit-radius);
    overflow: hidden;
    box-shadow: var(--hit-shadow);
}

/* Offset green plate behind the photo. */
.hit-validation-media::before {
    content: "";
    position: absolute;
    inset: 24px -24px -24px 24px;
    border-radius: var(--hit-radius);
    border: 2px solid var(--hit-green);
    opacity: .35;
}

.hit-frame img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.hit-frame-chip {
    position: relative;
    z-index: 2;
    margin: -34px 24px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--hit-shadow);
}

.hit-frame-chip i {
    color: var(--hit-green);
    font-size: 20px;
}

.hit-frame-chip span {
    font-size: 15px;
    font-weight: 600;
    color: var(--hit-ink);
    line-height: 1.4;
}

.hit-validation-copy h2 {
    font-size: 34px;
    margin-bottom: 18px;
}

.hit-validation-copy > p {
    margin-bottom: 38px;
}

.hit-num-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.hit-num-card {
    position: relative;
    padding: 30px 26px 26px;
    background: #fff;
    border: 1px solid var(--hit-line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hit-num-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--hit-shadow);
}

/* Ghost number sitting behind the card content. */
.hit-num {
    position: absolute;
    top: 6px;
    right: 14px;
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 152, 74, .09);
    transition: color .3s ease;
}

.hit-num-card:hover .hit-num {
    color: rgba(0, 152, 74, .18);
}

.hit-num-card > i {
    display: block;
    font-size: 26px;
    color: var(--hit-green);
    margin-bottom: 16px;
}

.hit-num-card h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.hit-num-card p {
    line-height: 30px;
}


/* --------------------------------------------------------------------------
   2. HEALTHCARE TECHNOLOGY LOCALIZATION FOR INDIA
   Full-bleed photographic band, darkened, with a white panel floating on it
   and the five services laid out as a single icon-tile row.
   -------------------------------------------------------------------------- */

.hit-localize {
    position: relative;
    padding: 110px 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hit-localize-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(32, 64, 102, .92), rgba(0, 62, 40, .86));
}

.hit-localize-panel {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 52px 48px 44px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(10, 30, 50, .25);
}

.hit-localize-panel h2 {
    font-size: 34px;
    margin-bottom: 18px;
}

.hit-localize-panel > p {
    max-width: 760px;
    margin: 0 auto;
}

.hit-tile-row {
    list-style: none;
    margin: 42px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.hit-tile-row li {
    padding: 26px 14px 22px;
    border-radius: 14px;
    background: var(--hit-tint);
    border: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.hit-tile-row li:hover {
    background: #fff;
    border-color: var(--hit-line);
    transform: translateY(-5px);
}

.hit-tile-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--hit-green);
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(0, 152, 74, .16);
    transition: background .3s ease, color .3s ease;
}

.hit-tile-row li:hover .hit-tile-icon {
    background: var(--hit-green);
    color: #fff;
}

.hit-tile-row h6 {
    font-size: 15px;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   3. HEALTHCARE IMPLEMENTATION ADVISORY
   A wide photo banner carries the heading, then six steps run along a
   connector line - three per row on desktop, a vertical rail on mobile.
   -------------------------------------------------------------------------- */

.hit-advisory {
    padding: 90px 0;
}

.hit-advisory-banner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
}

.hit-advisory-banner img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

.hit-advisory-banner-copy {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px;
    max-width: 680px;
    background: linear-gradient(90deg, rgba(15, 34, 55, .94) 30%, rgba(15, 34, 55, .55) 70%, rgba(15, 34, 55, 0) 100%);
}

.hit-advisory-banner-copy h2 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 14px;
}

.hit-advisory-banner-copy p {
    color: rgba(255, 255, 255, .85);
}

.hit-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 54px 32px;
    position: relative;
}

.hit-step {
    position: relative;
    text-align: center;
}

/* Connector rail behind each row of three. */
.hit-step::before {
    content: "";
    position: absolute;
    top: 27px;
    left: -16px;
    right: -16px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--hit-line) 0 10px, transparent 10px 18px);
    z-index: 0;
}

.hit-step:nth-child(3n + 1)::before {
    left: 50%;
}

.hit-step:nth-child(3n)::before {
    right: 50%;
}

/* Same badge as the other sections use: 54px, white plate, green glyph and a
   green-tinted shadow instead of a grey border. Was 74px with a 2px border,
   which made it the only icon on the page that did not match. Radius matches
   the rounded square on the Technologies cards. */
.hit-step-dot {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--hit-green);
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(0, 152, 74, .16);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.hit-step:hover .hit-step-dot {
    background: var(--hit-green);
    color: #fff;
    transform: translateY(-4px);
}

.hit-step-no {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hit-green);
    margin-bottom: 8px;
}

.hit-step h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.hit-step p {
    line-height: 30px;
    max-width: 320px;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   4. TECHNOLOGIES WE SUPPORT
   Six-column grid: the first two cards take three columns each, the last
   three take two each - so the row rhythm changes halfway down.
   -------------------------------------------------------------------------- */

.hit-tech {
    padding: 90px 0 100px;
    background: var(--hit-tint);
    position: relative;
    overflow: hidden;
}

.hit-tech-head {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.hit-tech-head h2 {
    font-size: 34px;
    margin-bottom: 14px;
}

.hit-tech-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px;
}

.hit-tech-card {
    grid-column: span 2;
    background: #fff;
    border-radius: var(--hit-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 40, 60, .06);
    transition: transform .35s ease, box-shadow .35s ease;
}

.hit-tech-card--wide {
    grid-column: span 3;
}

.hit-tech-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hit-shadow);
}

.hit-tech-img {
    position: relative;
    overflow: hidden;
}

.hit-tech-img img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.hit-tech-card--wide .hit-tech-img img {
    height: 260px;
}

.hit-tech-card:hover .hit-tech-img img {
    transform: scale(1.06);
}

.hit-tech-body {
    position: relative;
    padding: 34px 26px 28px;
}

/* Icon chip straddling the image / body edge. */
.hit-tech-icon {
    position: absolute;
    top: -26px;
    left: 26px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--hit-green);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 22px rgba(0, 152, 74, .30);
}

.hit-tech-body h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.hit-tech-body p {
    line-height: 30px;
}


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1399px) {
    .hit-validation-grid {
        grid-template-columns: 360px 1fr;
        gap: 44px;
    }
}

@media (max-width: 1199px) {
    .hit-validation,
    .hit-advisory {
        padding: 70px 0;
    }

    .hit-tech {
        padding: 70px 0 80px;
    }

    .hit-localize {
        padding: 80px 0;
    }

    .hit-validation-grid {
        grid-template-columns: 1fr;
    }

    /* Stacked: the image stops sticking and the plate offset would overflow. */
    .hit-validation-media {
        position: static;
        max-width: 620px;
    }

    /* The stacked layout drops position:sticky above, so this absolutely
       positioned plate loses its containing block and its border runs down
       the page over the copy. Hide the plate from tablet down. */
    .hit-validation-media::before {
        display: none;
    }

    .hit-frame img {
        height: 340px;
    }

    .hit-tile-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .hit-localize-panel {
        padding: 44px 34px 38px;
    }

    .hit-tech-card,
    .hit-tech-card--wide {
        grid-column: span 3;
    }
}

@media (max-width: 991px) {
    /* Sub-title matches the About page from tablet down: About leaves the
       chip on main.css's own 15px gap, so drop this page's wider 22px. */
    .page-healthcare-it .section-title .subtitle {
        margin-bottom: 15px;
    }

    /* 18px is a desktop size - below lg it costs too many line breaks. */
    .page-healthcare-it p {
        font-size: 16px;
        line-height: 28px;
    }

    .hit-num-card p,
    .hit-step p,
    .hit-tech-body p {
        line-height: 27px;
    }

    .hit-validation-copy h2,
    .hit-localize-panel h2,
    .hit-advisory-banner-copy h2,
    .hit-tech-head h2 {
        font-size: 28px;
    }

    .hit-advisory-banner img {
        height: 300px;
    }

    .hit-advisory-banner-copy {
        padding: 0 36px;
        max-width: 100%;
        background: linear-gradient(90deg, rgba(15, 34, 55, .94) 55%, rgba(15, 34, 55, .70) 100%);
    }

    .hit-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 44px 26px;
    }

    /* Rail resets to a 2-up rhythm. */
    .hit-step:nth-child(3n + 1)::before,
    .hit-step:nth-child(3n)::before {
        left: -16px;
        right: -16px;
    }

    .hit-step:nth-child(odd)::before {
        left: 50%;
    }

    .hit-step:nth-child(even)::before {
        right: 50%;
    }
}

@media (max-width: 767px) {
    /* main.css centres .section-title below 768px. about.css overrides that
       back to left-aligned, but this page does not load about.css - so the
       sub-titles centred here while the About page's stayed left. Match it.
       The two wrappers that carry Bootstrap's .text-center keep their
       centring, since that utility is !important. */
    .page-healthcare-it .section-title {
        text-align: left;
        margin-bottom: 0;
    }

    .hit-num-grid {
        grid-template-columns: 1fr;
    }

    .hit-tile-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hit-tech-card,
    .hit-tech-card--wide {
        grid-column: span 6;
    }

    .hit-tech-card--wide .hit-tech-img img,
    .hit-tech-img img {
        height: 200px;
    }

    .hit-advisory-banner img {
        height: 380px;
    }

    /* Steps become a single vertical rail with the icon on the left. */
    .hit-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Column and rail track the 54px badge: rail sits at half its width. */
    .hit-step {
        display: grid;
        grid-template-columns: 54px 1fr;
        column-gap: 20px;
        text-align: left;
        padding: 0 0 34px;
        /* Rail sits on the badge's centre line. Kept as a variable so the
           575px badge change only has to move this one number. */
        --hit-rail-x: 26px;
    }

    .hit-step::before {
        top: 54px;
        bottom: 0;
        left: var(--hit-rail-x);
        right: auto;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--hit-line) 0 10px, transparent 10px 18px);
    }

    /* The 991px block above offsets odd/even steps to 50% to build the
       two-up horizontal rail. Those selectors carry an :nth-child(), so they
       outrank the plain .hit-step::before here and drag the vertical rail
       into the middle of the card. Reset them at equal specificity. */
    .hit-step:nth-child(odd)::before,
    .hit-step:nth-child(even)::before {
        left: var(--hit-rail-x);
        right: auto;
    }

    .hit-step:last-child::before {
        display: none;
    }

    .hit-step-dot {
        grid-row: span 3;
        margin: 0;
    }

    .hit-step p {
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 575px) {
    .hit-validation,
    .hit-advisory,
    .hit-tech {
        padding: 55px 0;
    }

    .hit-localize {
        padding: 60px 0;
    }

    .hit-validation-copy h2,
    .hit-localize-panel h2,
    .hit-advisory-banner-copy h2,
    .hit-tech-head h2 {
        font-size: 24px;
    }

    .hit-validation-media::before {
        display: none;
    }

    .hit-frame-chip {
        margin: -24px 14px 0;
        padding: 14px 16px;
    }

    .hit-localize-panel {
        padding: 34px 20px 28px;
        border-radius: 16px;
    }

    .hit-tile-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Single column: tiles read better as icon-left rows. */
    .hit-tile-row li {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
        padding: 14px 16px;
    }

    .hit-tile-icon {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        margin: 0;
        font-size: 18px;
    }

    .hit-advisory-banner {
        border-radius: 14px;
        margin-bottom: 44px;
    }

    .hit-advisory-banner img {
        height: 420px;
    }

    .hit-advisory-banner-copy {
        padding: 0 22px;
        background: rgba(15, 34, 55, .88);
    }

    /* 46px here, the same as .hit-tile-icon drops to at this width. */
    .hit-step {
        grid-template-columns: 46px 1fr;
        column-gap: 16px;
        --hit-rail-x: 22px;
    }

    .hit-step-dot {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .hit-step::before {
        top: 46px;
    }
}

/* ---------------------------------------------------------------------
   Tablet only (768px - 1199px): centre the orphaned cards on the last row.

   Both of these sections hold five items, so the final row is short and
   sits hard against the left edge. Below 768px each grid collapses again
   (tech cards go full width, tiles go two-up), so these rules stay inside
   the tablet band and leave the other breakpoints untouched.
--------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {

    /* The stacked validation photo keeps the 620px cap set in the 1199px
       block, so it sits short against the full-width copy beneath it.
       On tablet let it run the full column width instead. */
    .hit-validation-media {
        max-width: 100%;
    }

    /* "Technologies We Support" - two up, so card 5 is alone.
       Span the full row, then hold the two-up width and centre it.
       Track maths: 6 columns, 26px gap -> a span-3 card is calc(50% - 13px). */
    .hit-tech-grid > .hit-tech-card:last-child {
        grid-column: 1 / -1;
        width: calc(50% - 13px);
        justify-self: center;
    }

    /* "Our Services" - three up, so tiles 4 and 5 are left-aligned.
       Re-cut the row into 6 columns (a span-2 tile is exactly the same
       width as a third of a 3-column row) and start tile 4 at column 2,
       which leaves half a column of space at each end. */
    .hit-tile-row {
        grid-template-columns: repeat(6, 1fr);
    }

    .hit-tile-row > li {
        grid-column: span 2;
    }

    .hit-tile-row > li:nth-last-child(2) {
        grid-column: 2 / span 2;
    }
}


/* ==========================================================
   Sub-title chip - narrow screens
   main.css:602 gives .section-title span line-height:1px; the
   chip's height comes from its 18px padding instead. That only
   holds while the text stays on one line - once it wraps, the
   two 1px line boxes land on top of each other and the words
   overlap. Tightening the type keeps the longest chip on this
   page ("Technologies We Support") on a single line, and the
   real line-height stops any wrap from overlapping.
========================================================== */
@media (max-width: 420px) {
    .page-healthcare-it .section-title .subtitle {
        font-size: 12px;
        letter-spacing: 2px;
        line-height: 1.6;
        padding: 11px 14px;
    }
}