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

   The page walks a first-time visitor from "what is this" to "talk to us".
   Every block is its own layout so no two sections read the same way:

     1. Hero          - headline + two CTAs left, framed photo right
     2. Problem       - dark navy band, three outlined cards
     3. Who it's for  - mixed-width image card grid (2 wide + 3 standard)
     4. How we help   - three services on one identical card layout
     5. Process       - photo banner headline + connected four-step roadmap
     6. Deliverables  - full-bleed photo band with a floating centre panel
     7. Why BTC       - copy left, 2x2 trust cards right
     8. FAQ           - Bootstrap accordion, restyled to the page
     9. Contact       - CTA copy left, green enquiry form right
   ========================================================================== */


/* --------------------------------------------------------------------------
   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;
}

/* The hero buttons scroll to these sections; leave room for the sticky
   header so the section heading is not hidden under it on arrival. */
.page-healthcare-it section[id^="hit-"] {
    scroll-margin-top: 100px;
}

/* 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 dark bands the base rule's green tint is !important, so the .style-2
   white fill needs the same weight to land. */
.page-healthcare-it .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;
    text-transform: capitalize;
}

.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;
}

/* Shared centred section header used by sections 3, 4 and 8. */
.hit-tech-head,
.hit-services-head,
.hit-faq-head {
    max-width: 760px;
    margin: 0 auto 50px;
    text-align: center;
}

/* Wide enough for "Three services, one consistent way of working" to sit on
   one line at 36px; the intro paragraph keeps the narrower measure. */
.hit-services-head {
    max-width: 940px;
    margin-bottom: 34px;
}

.hit-services-head p {
    max-width: 760px;
    margin: 0 auto;
}

.hit-tech-head h2,
.hit-services-head h2,
.hit-faq-head h2,
.hit-problem-head h2,
.hit-receive-panel h2,
.hit-why-copy h2,
.hit-contact-head h2 {
    font-size: 36px;
    margin-bottom: 14px;
}

/* Outline pill that pairs with .theme-btn. Same 46px height and 55px radius
   so the two sit level in the hero. */
.hit-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 24px;
    border-radius: 55px;
    border: 2px solid var(--hit-navy);
    color: var(--hit-navy);
    font-family: "Satoshi", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
    transition: all .3s ease-in-out;
}

.hit-btn-ghost i {
    font-size: 13px;
    transition: transform .3s ease;
}

.hit-btn-ghost:hover {
    background: var(--hit-navy);
    color: #fff;
}

.hit-btn-ghost:hover i {
    transform: translateY(3px);
}


/* --------------------------------------------------------------------------
   1. HERO
   White band. Copy column is wider; the photo column carries the framed
   image with the offset green plate and the caption chip.
   -------------------------------------------------------------------------- */

.hit-hero {
    padding: 60px 0;
    background: #fff;
}

.hit-hero-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 60px;
    align-items: stretch;
}

.hit-hero-copy h2 {
    font-size: 44px;
    margin-bottom: 14px;
}

.hit-hero-sub {
    max-width: 600px;
    font-size: 18px;
    margin-bottom: 0;
}

/* Service explanation panel. */
.hit-hero-scroll {
    position: relative;
    max-width: 640px;
    margin-top: 16px;
    border: 1px solid var(--hit-line);
    border-radius: 14px;
    background: var(--hit-tint);
}

.hit-hero-scroll-inner {
    padding: 16px 20px 18px;
}

/* Heading for the intro box. */
.hit-hero-intro-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--hit-ink);
    margin-bottom: 6px;
}

.hit-hero-intro-title i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--hit-green);
    color: #fff;
    font-size: 13px;
}

.page-healthcare-it .hit-hero-intro {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
}

/* The three things the service covers. */
.hit-hero-points {
    list-style: none;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--hit-line);
}

.hit-hero-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 5px 0;
}

.hit-hero-points li i {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--hit-green);
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(0, 152, 74, .14);
}

.hit-hero-points strong {
    display: block;
    color: var(--hit-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2px;
}

.hit-hero-points span {
    display: block;
    color: var(--hit-body);
    font-size: 15px;
    line-height: 23px;
}

.hit-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

/* The copy column sets the row height; the photo column stretches to match
   it, so both sides of the hero are always the same height. The frame grows
   to fill the column and the image covers whatever size that gives it. */
.hit-hero-media {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Offset green plate behind the photo. */
.hit-hero-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 {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    border-radius: var(--hit-radius);
    overflow: hidden;
    box-shadow: var(--hit-shadow);
}

.hit-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    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;
}


/* --------------------------------------------------------------------------
   2. THE PROBLEM
   Navy-to-ink gradient band. Cards are translucent so the band shows
   through; the icon plate stays white to match every other badge on the
   page.
   -------------------------------------------------------------------------- */

.hit-problem {
    position: relative;
    padding: 90px 0;
    background: linear-gradient(140deg, #204066 0%, #0f2237 100%);
    overflow: hidden;
}

.hit-problem-head {
    max-width: 780px;
    margin: 0 auto 46px;
    text-align: center;
}

.hit-problem-head h2 {
    color: #fff;
}

.hit-problem-head p {
    color: rgba(255, 255, 255, .78);
}

.hit-problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hit-problem-card {
    padding: 32px 28px 30px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: background .3s ease, transform .3s ease;
}

.hit-problem-card:hover {
    background: rgba(255, 255, 255, .11);
    transform: translateY(-6px);
}

.hit-problem-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--hit-green);
    font-size: 21px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.hit-problem-card h6 {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    margin: 20px 0 10px;
}

.hit-problem-card p {
    color: rgba(255, 255, 255, .75);
    line-height: 30px;
}


/* --------------------------------------------------------------------------
   3. WHO THIS IS FOR
   Six-column grid: the first two cards take three columns each, the last
   three take two each - so the row rhythm changes halfway down. Two
   routing lines close the section for visitors on the wrong page.
   -------------------------------------------------------------------------- */

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

.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;
}

.hit-route {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.hit-route-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed rgba(0, 152, 74, .45);
}

.hit-route-item > i {
    flex: 0 0 auto;
    color: var(--hit-green);
    font-size: 22px;
}

.hit-route-item p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--hit-ink);
}

.hit-route-item a {
    display: inline-block;
    margin-left: 4px;
    color: var(--hit-navy);
    font-weight: 700;
    white-space: nowrap;
    transition: color .3s ease;
}

.hit-route-item a i {
    margin-left: 6px;
    transition: transform .3s ease;
}

.hit-route-item a:hover {
    color: var(--hit-green);
}

.hit-route-item a:hover i {
    transform: translateX(4px);
}
/* --------------------------------------------------------------------------
   4. HOW WE HELP
   Three tabs across the top - number, name, one-line hint and an icon -
   with a single detail panel beneath for the selected service: photo on
   the left carrying a number badge, copy on the right running kicker,
   name, plain-terms lead, "you need this when" callout and an "includes"
   checklist. Bootstrap's tab plugin handles the switching.
   -------------------------------------------------------------------------- */

.hit-services {
    padding: 70px 0;
    background: #fff;
}

.hit-tabs {
    border-radius: 20px;
    background: var(--hit-tint);
    padding: 12px;
}

.hit-tab-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

/* The grid stretches each <li> to the tallest tab; flex passes that height
   on to the button so all three cards match even when a name wraps. */
.hit-tab-nav .nav-item {
    display: flex;
}

.hit-tab {
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.hit-tab:hover {
    background: rgba(255, 255, 255, .7);
}

.hit-tab.active {
    background: #fff;
    border-color: var(--hit-line);
    box-shadow: var(--hit-shadow);
}

.hit-tab-no {
    flex: 0 0 auto;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: rgba(0, 152, 74, .35);
    transition: color .3s ease;
}

.hit-tab.active .hit-tab-no {
    color: var(--hit-green);
}

.hit-tab-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.hit-tab-txt strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--hit-ink);
}

.hit-tab-txt small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--hit-body);
}

.hit-tab > i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: var(--hit-green);
    font-size: 17px;
    transition: background .3s ease, color .3s ease;
}

.hit-tab.active > i {
    background: var(--hit-green);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 152, 74, .25);
}

/* Detail panel. */
.hit-tab-panels {
    margin-top: 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--hit-line);
}

.hit-service {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 40px;
    align-items: stretch;
    padding: 26px;
}

/* The copy column sets the panel height; the photo fills whatever that is,
   so the two sides always end level. */
.hit-service-media {
    position: relative;
    min-height: 360px;
}

.hit-service-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

/* Number + label badge floating on the photo's bottom corner. */
.hit-service-badge {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--hit-shadow);
}

.hit-service-badge-no {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--hit-green);
}

.hit-service-badge-txt {
    padding-left: 14px;
    border-left: 1px solid var(--hit-line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hit-ink);
}

.hit-service-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hit-green);
    margin-bottom: 10px;
}

.hit-service-kicker i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--hit-green);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(0, 152, 74, .25);
}

.hit-service h3 {
    font-size: 32px;
    line-height: 1.25;
    color: var(--hit-ink);
    margin: 0 0 12px;
}

.hit-service-lead {
    font-size: 18px;
    line-height: 31px;
}

.hit-service-lead strong {
    color: var(--hit-ink);
    font-weight: 600;
}

/* "You need this when" callout. */
.hit-service-when {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
    padding: 14px 18px 12px;
    border-radius: 12px;
    background: var(--hit-tint);
    border-left: 3px solid var(--hit-green);
}

.hit-service-when > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--hit-green);
    font-size: 18px;
}

.hit-service-when span,
.hit-service-includes > span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hit-green);
    margin-bottom: 4px;
}

.hit-service-when p {
    font-size: 16px;
    line-height: 27px;
    color: var(--hit-ink);
}

.hit-service-includes {
    margin-top: 18px;
}

.hit-service-includes > span {
    margin-bottom: 10px;
}

.hit-service-includes ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
}

.hit-service-includes li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    color: var(--hit-ink);
}

.hit-service-includes li i {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hit-green-soft);
    color: var(--hit-green);
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   5. HOW AN ENGAGEMENT WORKS
   A wide photo banner carries the heading, then four steps run along a
   connector line - four across on desktop, two-up on tablet, a vertical
   rail on mobile.
   -------------------------------------------------------------------------- */

.hit-process {
    /* No top padding: the services section above already carries the gap. */
    padding: 0 0 90px;
    background: #fff;
}

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

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

.hit-process-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-process-banner-copy h2 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 14px;
}

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

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

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

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

.hit-step:first-child::before {
    left: 50%;
}

.hit-step:last-child::before {
    right: 50%;
}

/* Same badge as the other sections use: 54px, white plate, green glyph and a
   green-tinted shadow. Radius matches the rounded square on the other 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 {
    font-size: 16px;
    line-height: 28px;
    max-width: 280px;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   6. WHAT YOU RECEIVE
   Full-bleed photographic band, darkened, with a white panel floating on it
   and the five deliverables laid out as a single icon-tile row.
   -------------------------------------------------------------------------- */

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

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

.hit-receive-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-receive-panel > p {
    max-width: 700px;
    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;
}


/* --------------------------------------------------------------------------
   7. WHY BLOOD TEST CONSULTANCY
   Copy column with a routing note to the Consultancy page, and a 2x2 grid
   of trust cards. The stat slot holds either a number or an icon so the
   four cards share one shape.
   -------------------------------------------------------------------------- */

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

.hit-why-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.hit-why-copy h2 {
    margin-bottom: 18px;
}

/* Three product-specific reasons under the intro. */
.hit-why-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.hit-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 5px 0;
    font-size: 16px;
    line-height: 27px;
    color: var(--hit-ink);
}

.hit-why-list li i {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--hit-green-soft);
    color: var(--hit-green);
    font-size: 11px;
}

.hit-why-route {
    margin-top: 22px;
    padding: 14px 18px;
    border-left: 3px solid var(--hit-green);
    border-radius: 0 12px 12px 0;
    background: var(--hit-tint);
    font-size: 16px;
    line-height: 27px;
    color: var(--hit-body);
}

.hit-why-route strong {
    display: inline;
    color: var(--hit-ink);
    font-weight: 600;
    margin-right: 4px;
}

.hit-why-route a {
    color: var(--hit-navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .3s ease;
}

.hit-why-route a:hover {
    color: var(--hit-green);
}

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

.hit-why-card {
    padding: 22px 22px 20px;
    border-radius: 14px;
    background: var(--hit-tint);
    border: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.hit-why-card:hover {
    background: #fff;
    border-color: var(--hit-line);
    box-shadow: var(--hit-shadow);
    transform: translateY(-5px);
}

.hit-why-stat {
    display: block;
    min-height: 36px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--hit-navy);
    margin-bottom: 8px;
}

.hit-why-stat i {
    font-size: 24px;
    color: var(--hit-green);
    line-height: 36px;
}

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

.hit-why-card p {
    font-size: 15px;
    line-height: 25px;
}


/* --------------------------------------------------------------------------
   8. FAQ
   Bootstrap's accordion, restyled: white cards on the tint band, a round
   plus / minus badge instead of the default chevron.
   -------------------------------------------------------------------------- */

.hit-faq {
    padding: 90px 0;
    background: var(--hit-tint);
}

.hit-faq-head {
    margin-bottom: 44px;
}

.hit-faq-items {
    max-width: 860px;
    margin: 0 auto;
}

.hit-faq-items .accordion-item {
    border: 1px solid var(--hit-line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.hit-faq-items .accordion-item + .accordion-item {
    margin-top: 14px;
}

.hit-faq-items .accordion-header {
    margin: 0;
}

.hit-faq-items .accordion-button {
    padding: 22px 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    color: var(--hit-ink);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    transition: color .3s ease;
}

.hit-faq-items .accordion-button:not(.collapsed) {
    color: var(--hit-green);
    background: #fff;
    box-shadow: none;
}

.hit-faq-items .accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.hit-faq-items .accordion-button::after {
    content: "\f067";
    font-family: "Font Awesome 5 Pro";
    font-weight: 500;
    font-size: 13px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    flex: 0 0 36px;
    margin-left: auto;
    text-align: center;
    border-radius: 50%;
    background-image: none;
    background-color: var(--hit-tint);
    color: var(--hit-ink);
    transition: background-color .3s ease, color .3s ease;
}

.hit-faq-items .accordion-button:not(.collapsed)::after {
    content: "\f068";
    background-image: none;
    background-color: var(--hit-green);
    color: #fff;
    transform: none;
}

.hit-faq-items .accordion-body {
    padding: 0 26px 24px;
}

.hit-faq-items .accordion-body p {
    font-size: 17px;
    line-height: 30px;
}

.hit-faq-items .accordion-body a {
    color: var(--hit-navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hit-faq-items .accordion-body a:hover {
    color: var(--hit-green);
}


/* --------------------------------------------------------------------------
   9. CTA + FORM
   Heading centred on a white band, then one wide navy card
   holding the form on a three-column field grid (name / company / type,
   then stage, then the message) with the submit button centred beneath.
   The stage picker is three radio pills so the choice is one tap on mobile.
   -------------------------------------------------------------------------- */

.hit-contact {
    padding: 90px 0;
    background: #fff;
}
/* Soft highlight in the top-right corner of the band. */
.hit-contact-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.hit-contact-head h2 {
    color: var(--hit-ink);
    font-size: 38px;
    margin-bottom: 12px;
}

.hit-contact-head p {
    color: var(--hit-body);
}

.hit-contact-box {
    max-width: 1040px;
    margin: 0 auto;
    padding: 34px 36px 30px;
    border-radius: 18px;
    background: linear-gradient(140deg, #204066 0%, #16304f 100%);
    box-shadow: 0 10px 28px rgba(32, 64, 102, .14);
}

.hit-contact-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
}


.hit-contact-span3 {
    grid-column: 1 / -1;
}

.hit-contact-box .form-clt label,
.hit-contact-box .form-clt > span {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.hit-contact-box .form-clt input,
.hit-contact-box .form-clt select,
.hit-contact-box .form-clt textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--hit-line);
    background: #fff;
    color: var(--hit-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.hit-contact-box .form-clt input::placeholder,
.hit-contact-box .form-clt textarea::placeholder {
    color: rgba(100, 100, 100, .75);
}

.hit-contact-box .form-clt input:focus,
.hit-contact-box .form-clt select:focus,
.hit-contact-box .form-clt textarea:focus {
    background: #fff;
    border-color: var(--hit-green);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

/* Native select with the browser arrow swapped for a navy chevron. The
   nice-select plugin only picks up .single-select, so this stays native. */
.hit-contact-box .form-clt select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23204066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* Reads as a placeholder until an option is picked. */
.hit-contact-box .form-clt select:invalid {
    color: rgba(100, 100, 100, .75);
}

.hit-contact-box .form-clt textarea {
    min-height: 88px;
    resize: vertical;
}

.hit-stage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hit-stage label {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}

/* Visually hidden but still keyboard-focusable. */
.hit-stage input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hit-stage label span {
    display: block;
    padding: 11px 10px;
    border-radius: 8px;
    border: 1px solid var(--hit-line);
    background: #fff;
    color: var(--hit-ink);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.hit-stage label:hover span {
    border-color: var(--hit-green);
}

.hit-stage input:checked + span {
    background: var(--hit-green);
    border-color: var(--hit-green);
    color: #fff;
}

.hit-stage input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

/* Footer row: consent line on top, submit button centred beneath it. Both are
   stacked (not side by side) so the long consent sentence never collides with
   the button at desktop widths. */
.hit-contact-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

/* Consent sits on the navy card, so the grey default would vanish - go white,
   link included, matching the treatment on the contact page's dark panel. */
.hit-contact-foot .form-consent {
    max-width: 720px;
    justify-content: center;
    text-align: center;
}

.hit-contact-foot .form-consent,
.hit-contact-foot .form-consent label {
    color: #fff;
}

.hit-contact-foot .form-consent a {
    color: #fff;
}

/* Navy on the navy card would vanish - go green, ink on hover. */
.hit-contact-foot .theme-btn {
    background: var(--hit-green);
}

.hit-contact-foot .theme-btn:hover {
    background: var(--hit-ink);
}

#hitFormMessage .alert {
    margin: 18px 0 0;
}


/* --------------------------------------------------------------------------
   9b. SITE CTA BAND
   The green "Ready to Build..." box that closes every service page. Those
   pages get its look from lab-service.css, which this page does not load,
   so the same rules are repeated here: strip the template's photo overlay,
   fill the box green and round it.
   -------------------------------------------------------------------------- */

.page-healthcare-it .cta-left-items .icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.page-healthcare-it .cta-bg {
    background: #00984a;
    border-radius: 20px;
}

.page-healthcare-it .cta-wrapper-2,
.page-healthcare-it .zoom-effect-style {
    background-image: none !important;
    position: relative;
    margin-top: 0 !important;
    z-index: 1;
}

.page-healthcare-it .cta-wrapper-2::before,
.page-healthcare-it .cta-wrapper-2::after,
.page-healthcare-it .zoom-effect-style::before,
.page-healthcare-it .zoom-effect-style::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 767px) {
    .page-healthcare-it .cta-right-items .theme-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
    }
}


/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */

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

    .hit-hero-copy h2 {
        /* "Make Your Healthcare Software Work" has to fit the ~670px copy
           column on 1200-1399px screens so the heading stays on two lines. */
        font-size: 38px;
    }

    .hit-service {
        grid-template-columns: 420px 1fr;
        gap: 40px;
    }

    .hit-service h3 {
        font-size: 28px;
    }
}

@media (max-width: 1199px) {
    .hit-problem,
    .hit-services,
    .hit-why,
    .hit-faq {
        padding: 70px 0;
    }

    .hit-hero {
        padding: 50px 0;
    }

    .hit-process {
        padding: 0 0 70px;
    }

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

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

    /* Hero stacks: copy first, then the photo at a capped width. */
    .hit-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hit-hero-media {
        max-width: 620px;
    }

    /* The stacked layout means the plate offset would overflow the column
       edge, so hide it from tablet down. */
    .hit-hero-media::before {
        display: none;
    }

    .hit-frame {
        flex: none;
        min-height: 0;
        height: 340px;
    }

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

    .hit-service {
        grid-template-columns: 380px 1fr;
        gap: 34px;
        padding: 28px;
    }

    /* Still side by side here - keep stretching, just a lower floor. */
    .hit-service-media {
        min-height: 320px;
    }

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

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

    .hit-why-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

@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-problem-card p,
    .hit-tech-body p,
    .hit-why-card p,
    .hit-step p {
        line-height: 27px;
    }

    .hit-hero-copy h2 {
        font-size: 34px;
    }

    .hit-hero-sub {
        font-size: 17px;
    }

    .page-healthcare-it .hit-hero-intro {
        font-size: 16px;
        line-height: 26px;
    }

    .hit-hero-points span {
        font-size: 15px;
        line-height: 25px;
    }

    .hit-tech-head h2,
    .hit-services-head h2,
    .hit-faq-head h2,
    .hit-problem-head h2,
    .hit-receive-panel h2,
    .hit-why-copy h2,
    .hit-contact-head h2,
    .hit-process-banner-copy h2 {
        font-size: 28px;
    }

    /* Problem cards become icon-left rows so the copy keeps its width. */
    .hit-problem-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hit-problem-card {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 24px 24px 22px;
    }

    .hit-problem-icon {
        flex: 0 0 54px;
    }

    .hit-problem-card h6 {
        margin-top: 4px;
    }

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

    /* Tabs stack into a vertical list; panel puts the photo above the copy. */
    .hit-tab-nav {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hit-tab {
        padding: 14px 16px;
    }

    .hit-service {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
    }

    /* Stacked: photo goes back to a fixed height above the copy. */
    .hit-service-media {
        min-height: 0;
        height: 320px;
    }

    .hit-service h3 {
        font-size: 26px;
    }

    .hit-service-lead {
        font-size: 17px;
        line-height: 29px;
    }

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

    .hit-process-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:first-child::before,
    .hit-step:last-child::before {
        left: -14px;
        right: -14px;
    }

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

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

    .hit-faq-items .accordion-button {
        font-size: 17px;
        padding: 18px 20px;
    }

    .hit-faq-items .accordion-body {
        padding: 0 20px 20px;
    }

    .hit-faq-items .accordion-body p {
        font-size: 16px;
        line-height: 28px;
    }

    .hit-contact-box {
        padding: 26px 24px 24px;
    }

    /* Two columns: name/company, then product type; stage and message span the row. */
    .hit-contact-fields {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Product type is the odd one out, so it takes the whole row too. */
    .hit-contact-fields > .form-clt:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@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 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-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-tile-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hit-process-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,
    .hit-step:first-child::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;
    }

    .hit-why-cards {
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .hit-hero,
    .hit-problem,
    .hit-tech,
    .hit-services,
    .hit-why,
    .hit-faq,
    .hit-contact {
        padding: 55px 0;
    }

    .hit-process {
        padding: 0 0 55px;
    }

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

    .hit-hero-copy h2 {
        font-size: 28px;
    }

    .hit-tech-head h2,
    .hit-services-head h2,
    .hit-faq-head h2,
    .hit-problem-head h2,
    .hit-receive-panel h2,
    .hit-why-copy h2,
    .hit-contact-head h2,
    .hit-process-banner-copy h2 {
        font-size: 24px;
    }

    .hit-frame {
        height: 260px;
    }

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

    /* Icon-left rows are too cramped at phone width - stack again. */
    .hit-problem-card {
        display: block;
        padding: 24px 20px 22px;
    }

    .hit-problem-card h6 {
        margin-top: 18px;
    }

    .hit-route-item {
        align-items: flex-start;
        padding: 16px 18px;
    }

    .hit-route-item a {
        display: block;
        margin: 6px 0 0;
    }

    .hit-tabs {
        padding: 8px;
        border-radius: 16px;
    }

    .hit-service {
        padding: 16px;
        gap: 20px;
    }

    .hit-tab-txt strong {
        font-size: 15px;
    }

    .hit-tab-txt small {
        display: none;
    }

    .hit-service-media {
        height: 240px;
    }

    .hit-service-badge {
        left: 14px;
        bottom: 14px;
        padding: 10px 14px;
        gap: 10px;
    }

    .hit-service-badge-no {
        font-size: 22px;
    }

    .hit-service h3 {
        font-size: 22px;
    }

    .hit-service-when {
        padding: 16px 16px 14px;
    }

    .hit-service-includes ul {
        grid-template-columns: 1fr;
    }

    .hit-receive-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-process-banner {
        border-radius: 14px;
        margin-bottom: 44px;
    }

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

    .hit-process-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;
    }

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

    .hit-contact-box {
        padding: 22px 18px 20px;
        border-radius: 14px;
    }

    .hit-contact-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hit-stage {
        gap: 8px;
    }

    .hit-stage label span {
        padding: 11px 6px;
        font-size: 14px;
    }
}

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

   Both of these grids 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 hero photo keeps the 620px cap set in the 1199px block,
       so it sits short against the full-width copy above it. On tablet let
       it run the full column width instead. */
    .hit-hero-media {
        max-width: 100%;
    }

    /* "Who This Is For" - 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;
    }

    /* "What You Receive" - 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 ("Why Blood Test Consultancy") 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;
    }
}