/* ==========================================================================
   Healthcare App Development Page
   Page-specific styles for page-healthcare-app-development.php. Kept out of
   main.css/style.css so this page's styles ship only where they're used.
   ========================================================================== */

/* ---- Hero ----
   Full-screen background-photo hero — same content construction as the Real
   Estate App Development hero (title, copy, primary CTA, feature chip row)
   but built on a full-bleed image instead of video, following the same
   image-hero pattern used on the About/Portfolio pages: a horizontal dark
   gradient (strong at the left where the copy sits, fading out before the
   midpoint) plus two soft drifting accent glows for depth. */

.healthcare-page {
  position: relative;
  background: #04070d;
}

.healthcare-hero {
  position: relative;
  isolation: isolate;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #04070d;
}

.healthcare-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.healthcare-hero-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
  transform-origin: center center;
  will-change: transform;
  filter: brightness(1.02) saturate(1.05) contrast(1.02);
}

.healthcare-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, .9), rgba(0, 0, 0, .0));
}

.healthcare-hero-glow {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  animation: healthcareHeroDrift 18s ease-in-out infinite;
}

.healthcare-hero-glow--cyan {
  top: -12%;
  left: -8%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.22) 0%, transparent 70%);
}

.healthcare-hero-glow--violet {
  bottom: -16%;
  left: 14%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.16) 0%, transparent 70%);
  animation-delay: -9s;
}

@keyframes healthcareHeroDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(24px, -16px) scale(1.06);
  }
}

.healthcare-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 150px 0 120px;
  text-align: left;
}

.healthcare-hero-title {
  font-weight: 700;
  font-size: 58px;
  line-height: 1.05;
  color: #ffffff;
  text-wrap: balance;
  max-width: 720px;
  text-align: left;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1680px) {
  .healthcare-hero-title {
    font-size: 56px;
  }
}

@media (max-width: 1550px) {
  .healthcare-hero-title {
    font-size: 54px;
  }
}

@media (max-width: 1440px) {
  .healthcare-hero-title {
    font-size: 52px;
  }
}

@media (max-width: 1366px) {
  .healthcare-hero-title {
    font-size: 50px;
  }
}

@media (max-width: 1280px) {
  .healthcare-hero-title {
    font-size: 48px;
  }
}

@media (max-width: 1200px) {
  .healthcare-hero-title {
    font-size: 46px;
  }
}

@media (max-width: 1024px) {
  .healthcare-hero-title {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  .healthcare-hero-title {
    font-size: 40px;
  }
}

@media (max-width: 650px) {
  .healthcare-hero-title {
    font-size: 24px;
  }
}

.healthcare-hero-copy {
  margin: 20px 0 0;
  max-width: 640px;
  color: rgba(241, 246, 255, 1);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-wrap: balance;
  text-align: left;
}

.healthcare-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 32px;
}

.healthcare-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: #ffffff;
  color: #000000;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* ---- Feature chip row ---- */

.healthcare-hero-features {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 780px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.healthcare-hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(241, 246, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.healthcare-hero-feature svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #00c2ff;
  stroke-width: 2;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .healthcare-hero-inner {
    width: min(100% - 32px, 1140px);
    padding: 130px 0 170px;
  }
}

@media (max-width: 767px) {
  .healthcare-hero {
    align-items: flex-end;
    height: auto;
  }

  .healthcare-hero-shade {
    background:
      linear-gradient(180deg, rgba(4, 7, 13, 0.25) 0%, rgba(4, 7, 13, 0.55) 45%, rgba(4, 7, 13, 0.94) 100%),
      linear-gradient(90deg, rgba(4, 7, 13, 0.9) 0%, rgba(4, 7, 13, 0.55) 65%, rgba(4, 7, 13, 0.2) 100%);
  }

  .healthcare-hero-inner {
    padding: 108px 20px 64px;
  }

  .healthcare-hero-title {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.2;
    max-width: none;
  }

  .healthcare-hero-copy {
    font-size: 15px;
    max-width: none;
  }

  .healthcare-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-top: 28px;
  }

  .healthcare-hero-primary {
    width: 100%;
  }

  .healthcare-hero-features {
    margin-top: 32px;
    gap: 10px;
  }

  .healthcare-hero-feature {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .healthcare-hero-inner {
    padding: 100px 20px 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-hero-glow {
    animation: none;
  }

  .healthcare-hero-bg img {
    transform: none;
  }
}

/* ==========================================================================
   By the Numbers — sits directly under the hero. A centered lead line over
   a five-tile photo row: one full-height portrait photo (no stat) bled past
   the left edge of the container, then four stat cards (three light,
   one dark) in normal flow. The bled tile is pulled out of flex flow with
   `position: absolute` — anchored to `.healthcare-numbers-row-container`
   (the `.container` div) rather than the row itself — so it can hang off
   the left edge without shifting the four stat cards that follow it, which
   stay aligned to the same left edge as the lead line above them. See
   healthcare-numbers.php for the counter/scroll-reveal wiring.
   ========================================================================== */

.healthcare-numbers {
  position: relative;
  background: #000000;
  padding: 80px 0 80px;
  overflow: hidden;
}

.healthcare-numbers-intro-wrap {
  margin-bottom: 56px;
}

.healthcare-numbers-intro {
  max-width: 820px;
  margin: 0 auto;
  color: #ffffff;
  font-size: clamp(18px, 1.1vw + 12px, 20px);
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
}

.healthcare-numbers-row-container {
  position: relative;
}

.healthcare-numbers-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 300px;
}

.healthcare-numbers-tile {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

/* ---- Bled photo tile (no stat) ---- */

.healthcare-numbers-tile--bleed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -240px;
  width: 280px;
}

.healthcare-numbers-tile--bleed img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

/* ---- Stat cards ---- */

.healthcare-numbers-row>.healthcare-numbers-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* The photo is the card's own background — a full-bleed `<img>` pinned
   behind a light-to-dark gradient scrim, so the value/label stay readable
   over any part of the photo while the photo itself stays fully visible
   (not just a cropped strip under the text, as an earlier version of this
   card did). */
.healthcare-numbers-tile--photo-card {
  background: #0b1420;
}

.healthcare-numbers-tile-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.healthcare-numbers-tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(219, 236, 250, 0.96) 0%,
      rgba(219, 236, 250, 0.88) 22%,
      rgba(219, 236, 250, 0.34) 46%,
      rgba(219, 236, 250, 0.04) 64%,
      rgba(4, 7, 13, 0.4) 100%);
}

.healthcare-numbers-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px 0;
}

.healthcare-numbers-value {
  font-size: clamp(30px, 2.4vw, 40px);
  font-weight: 800;
  line-height: 1;
  color: #04070d;
}

.healthcare-numbers-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2b3648;
  max-width: 16ch;
}

/* ---- Dark "years" tile ---- */

.healthcare-numbers-tile--dark {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 24px;
  background: #060810;
}

.healthcare-numbers-scallop {
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(circle at 50% -20%, transparent 0, transparent 54px, rgba(0, 194, 255, 0.12) 55px, rgba(0, 194, 255, 0.12) 56px, transparent 57px),
    repeating-radial-gradient(circle at 50% 120%, transparent 0, transparent 54px, rgba(124, 58, 237, 0.14) 55px, rgba(124, 58, 237, 0.14) 56px, transparent 57px);
  opacity: 0.9;
}

.healthcare-numbers-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.healthcare-numbers-tile--dark .healthcare-numbers-value {
  color: #ffffff;
}

.healthcare-numbers-label--dark {
  position: relative;
  z-index: 1;
  color: rgba(241, 246, 255, 0.75);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
  .healthcare-numbers-tile--bleed {
    left: -150px;
    width: 230px;
  }
}

@media (max-width: 1023px) {
  .healthcare-numbers-row {
    height: 400px;
  }

  .healthcare-numbers-tile--bleed {
    left: -90px;
    width: 190px;
  }
}

@media (max-width: 767px) {
  .healthcare-numbers {
    padding: 72px 0 80px;
  }

  .healthcare-numbers-intro-wrap {
    padding: 0 20px;
    margin-bottom: 32px;
  }

  .healthcare-numbers-intro {
    font-size: 18px;
    text-align: left;
    margin: 0;
  }

  /* Below 768px the bled tile can't hang off a container edge that no
     longer has a gutter to bleed into, so the whole row (bled tile + the
     four cards) becomes one horizontal-scroll filmstrip instead. `.healthcare-numbers-row`
     is unwrapped with `display: contents` so its card children become
     direct flex items of `.healthcare-numbers-row-container` alongside the
     bled tile, rather than nesting one flex container inside another. */
  .healthcare-numbers-row-container {
    display: flex;
    align-items: stretch;
    gap: 20px;
    height: 340px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 20px;
  }

  .healthcare-numbers-row {
    display: contents;
  }

  .healthcare-numbers-row>.healthcare-numbers-tile {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  .healthcare-numbers-tile--bleed {
    position: static;
    flex: 0 0 190px;
    width: auto;
    height: 340px;
    scroll-snap-align: start;
  }

  .healthcare-numbers-value {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .healthcare-numbers-badge {
    width: 100px;
    height: 100px;
  }
}

/* ==========================================================================
   Sectors We Help Modernize — sits directly under Numbers. Header (title +
   intro copy + prev/next/counter) on black, over a one-slide-per-view
   Swiper (`.healthcare-sectors-swiper`, see initHealthcareSectors in
   healthcare-app-development.js) of full-bleed sector cards: a white copy
   panel beside a full-height photo, no rounded corners — an immersive,
   edge-to-edge panel rather than a floating card, unlike the Real Estate
   page's Project List slider it's otherwise modeled on. The prev/next
   buttons and "01 / 06" counter live once in the header (not once per
   slide, as that slider does) since this section only needs one copy of
   them.
   ========================================================================== */

.healthcare-sectors {
  position: relative;
  background: #000000;
  padding: 0px 0 80px;
  overflow: hidden;
}

.healthcare-sectors-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 48px;
}

.healthcare-sectors-head-text {
  max-width: 720px;
}

.healthcare-sectors-title {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
}

.healthcare-sectors-intro {
  margin: 16px 0 0;
  max-width: 640px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.7);
}

.healthcare-sectors-head-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.healthcare-sectors-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.healthcare-sectors-nav-btn:hover {
  border-color: rgba(0, 194, 255, 0.55);
  background: rgba(0, 194, 255, 0.12);
  color: #00c2ff;
}

.healthcare-sectors-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.healthcare-sectors-nav-btn svg {
  width: 16px;
  height: 16px;
}

.healthcare-sectors-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00c2ff, #3b82f6);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Slider ---- */

.healthcare-sectors-slider-wrap {
  width: 100%;
}

.healthcare-sectors-card {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  min-height: 320px;
  background: #ffffff;
}

.healthcare-sectors-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px min(7vw, 96px);
}

.healthcare-sectors-card-title {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.3;
  font-weight: 700;
  color: #12161c;
  text-wrap: balance;
}

.healthcare-sectors-card-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 22px 0;
  background: #e3e6eb;
}

.healthcare-sectors-card-desc {
  margin: 0;
  max-width: 480px;
  font-size: 15.5px;
  line-height: 1.75;
  color: #5b6472;
}

.healthcare-sectors-card-media {
  position: relative;
  overflow: hidden;
  background: #0a0e14;
}

.healthcare-sectors-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms ease;
}

.healthcare-sectors-card:hover .healthcare-sectors-card-media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-sectors-card-media img {
    transition: none;
  }

  .healthcare-sectors-card:hover .healthcare-sectors-card-media img {
    transform: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 1279px) {
  .healthcare-sectors {
    padding: 88px 0 0;
  }

  .healthcare-sectors-head {
    padding: 0 20px 40px;
  }
}

@media (max-width: 1023px) {
  .healthcare-sectors-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .healthcare-sectors-card-text {
    padding: 44px 32px;
  }

  .healthcare-sectors-card-media {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  .healthcare-sectors {
    padding: 64px 0 0;
  }

  .healthcare-sectors-head {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px 32px;
  }

  .healthcare-sectors-head-nav {
    margin-top: 24px;
  }

  .healthcare-sectors-card-text {
    padding: 36px 24px;
  }

  .healthcare-sectors-card-divider {
    margin: 16px 0;
  }

  .healthcare-sectors-card-desc {
    max-width: none;
  }

  .healthcare-sectors-card-media {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   Closing CTA banner — sits directly under Sectors, black section
   background continuing the page's alternating light/dark rhythm (white
   Sector cards → this). One rounded blue-gradient card (reusing the Real
   Estate page's `.reapp-cta-panel--copy` gradient so the two pages' CTA
   banners read as the same component) rather than that page's two
   separate panels: copy on the left, a decorative visual — diamond-dot
   pattern + a soft glowing cross behind a bottom-aligned photo, plus a
   small floating icon badge overlapping the photo — on the right.
   ========================================================================== */

.healthcare-cta {
  position: relative;
  background: #000000;
  padding: 0 0 80px;
}

.healthcare-cta-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: stretch;
  min-height: 380px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(135deg, #3b6bf0 0%, #2f5fe6 48%, #1a3696 100%);
}

.healthcare-cta-glow {
  position: absolute;
  top: -25%;
  left: -12%;
  z-index: 0;
  width: 60%;
  height: 90%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 42%, transparent 72%);
  filter: blur(40px);
  animation: healthcareCtaGlowDrift 14s ease-in-out infinite;
  pointer-events: none;
}

@keyframes healthcareCtaGlowDrift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(6%, 8%) scale(1.08);
  }
}

.healthcare-cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 540px;
  padding: 56px 0 56px 56px;
}

.healthcare-cta-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-cta-copy {
  margin: 18px 0 0;
  max-width: 400px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

.healthcare-cta-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 30px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b1220;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(4, 7, 13, 0.55);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.healthcare-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -16px rgba(4, 7, 13, 0.6);
}

/* ---- Visual ---- */

.healthcare-cta-visual {
  position: relative;
  min-height: 380px;
}

.healthcare-cta-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(115deg, black 0%, black 58%, transparent 82%);
  mask-image: linear-gradient(115deg, black 0%, black 58%, transparent 82%);
}

.healthcare-cta-cross {
  position: absolute;
  top: 16%;
  left: 12%;
  z-index: 1;
  width: 56px;
  height: 56px;
  opacity: 0.95;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.85));
}

.healthcare-cta-cross::before,
.healthcare-cta-cross::after {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 999px;
}

.healthcare-cta-cross::before {
  top: 0;
  left: 50%;
  width: 10px;
  height: 100%;
  transform: translateX(-50%);
}

.healthcare-cta-cross::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 10px;
  transform: translateY(-50%);
}

.healthcare-cta-photo {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 70%;
  height: 88%;
  border-radius: 20px 0 0 0;
  overflow: hidden;
  box-shadow: -24px 0 60px -20px rgba(4, 7, 13, 0.45);
}

.healthcare-cta-photo::before {
  content: '';
  position: absolute;
  inset: -16px -16px 16px 16px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
}

.healthcare-cta-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.healthcare-cta-badge {
  position: absolute;
  z-index: 3;
  left: 25%;
  bottom: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  color: #2f5fe6;
  box-shadow: 0 14px 30px -10px rgba(4, 7, 13, 0.5);
}

.healthcare-cta-badge svg {
  width: 22px;
  height: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-cta-glow {
    animation: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .healthcare-cta-content {
    padding: 44px 0 44px 40px;
  }
}

@media (max-width: 860px) {
  .healthcare-cta-card {
    grid-template-columns: 1fr;
  }

  .healthcare-cta-content {
    max-width: none;
    padding: 40px 32px 32px;
  }

  .healthcare-cta-visual {
    min-height: 260px;
  }

  .healthcare-cta-photo {
    width: 62%;
  }

  .healthcare-cta-badge {
    width: 44px;
    height: 44px;
  }

  .healthcare-cta-badge svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .healthcare-cta {
    padding: 64px 0;
  }

  .healthcare-cta-content {
    padding: 36px 22px 28px;
  }

  .healthcare-cta-copy {
    max-width: none;
  }

  .healthcare-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .healthcare-cta-visual {
    min-height: 220px;
  }

  .healthcare-cta-photo {
    width: 68%;
  }
}

/* ==========================================================================
   What We Build — category explorer. Sits directly under the CTA banner,
   black section background. A 2x2 grid of tiles (`role="tablist"`, one
   `is-active`/blue, the rest dark) beside a synced white detail panel —
   icon + title + description + a scrollable checklist. Same WAI-ARIA tabs
   construction as the Real Estate page's "Apps We Build" explorer
   (`.reapp-svc-*`): every tab/panel is server-rendered up front with only
   the first carrying `is-active`, so the section is fully readable with JS
   off, just without the switching interaction. See `initHealthcareBuild` in
   healthcare-app-development.js.
   ========================================================================== */

.healthcare-build {
  position: relative;
  background: #000000;
  padding: 0 0 80px;
}

.healthcare-build-head {
  max-width: 700px;
  margin-bottom: 44px;
}

.healthcare-build-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5b301;
  background: #f5b4012c;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 180, 1, 0.4);
}

.healthcare-build-title {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-build-intro {
  margin: 16px 0 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.7);
}

/* ---- Panel ---- */

.healthcare-build-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  align-items: stretch;
}

/* ---- Tiles ---- */

.healthcare-build-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(150px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.healthcare-build-tiles li {
  display: block;
  height: 100%;
}

.healthcare-build-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-height: 150px;
  padding: 22px;
  border: 0;
  border-radius: 20px;
  background: #0a0e14;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 260ms ease, box-shadow 260ms ease;
}

.healthcare-build-tile-label {
  position: relative;
  z-index: 1;
  max-width: 82%;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
  transition: color 200ms ease;
}

.healthcare-build-tile:hover .healthcare-build-tile-label {
  color: rgba(255, 255, 255, 0.9);
}

.healthcare-build-tile-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 220ms ease, transform 220ms ease;
}

.healthcare-build-tile-arrow svg {
  width: 15px;
  height: 15px;
}

.healthcare-build-tile.is-active {
  background: linear-gradient(150deg, #2f5fe6 0%, #1a3696 100%);
  box-shadow: 0 20px 44px -18px rgba(47, 95, 230, 0.55);
}

.healthcare-build-tile.is-active .healthcare-build-tile-label {
  color: #ffffff;
}

.healthcare-build-tile.is-active .healthcare-build-tile-arrow {
  opacity: 1;
  transform: scale(1);
}

/* ---- Detail ---- */

.healthcare-build-detail {
  position: relative;
  display: grid;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 40px 90px -30px rgba(4, 7, 13, 0.28);
  overflow: hidden;
}

.healthcare-build-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 36px 36px 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 380ms ease, transform 380ms ease;
}

.healthcare-build-slide.is-active {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.healthcare-build-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: linear-gradient(150deg, #2f5fe6 0%, #1a3696 100%);
  color: #ffffff;
}

.healthcare-build-icon svg {
  width: 24px;
  height: 24px;
}

.healthcare-build-slide-title {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.6vw, 25px);
  font-weight: 800;
  line-height: 1.3;
  color: #04070d;
  text-wrap: balance;
}

.healthcare-build-slide-desc {
  margin: 0;
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(4, 7, 13, 0.62);
}

.healthcare-build-checklist {
  flex: 1;
  min-height: 0;
  margin: 22px 0 0;
  padding: 0 36px 28px 0;
  list-style: none;
  overflow-y: auto;
  max-height: 320px;
}

.healthcare-build-checklist::-webkit-scrollbar {
  width: 5px;
}

.healthcare-build-checklist::-webkit-scrollbar-track {
  background: transparent;
}

.healthcare-build-checklist::-webkit-scrollbar-thumb {
  background: rgba(4, 7, 13, 0.15);
  border-radius: 999px;
}

.healthcare-build-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(4, 7, 13, 0.08);
}

.healthcare-build-checklist li:first-child {
  padding-top: 0;
}

.healthcare-build-checklist li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.healthcare-build-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: #2f5fe6;
  color: #ffffff;
}

.healthcare-build-check svg {
  width: 10px;
  height: 10px;
}

.healthcare-build-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.healthcare-build-item-text strong {
  font-size: 14.5px;
  font-weight: 700;
  color: #04070d;
}

.healthcare-build-item-text span {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(4, 7, 13, 0.58);
}

.healthcare-build-item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: rgba(4, 7, 13, 0.3);
}

.healthcare-build-item-link svg {
  width: 13px;
  height: 13px;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .healthcare-build-panel {
    grid-template-columns: 1fr;
  }

  .healthcare-build-tiles {
    grid-template-rows: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 767px) {
  .healthcare-build {
    padding: 64px 0;
  }

  .healthcare-build-head {
    padding: 0 20px;
    margin-bottom: 32px;
  }

  .healthcare-build-panel {
    padding: 0 20px;
    gap: 16px;
  }

  .healthcare-build-tiles {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }

  .healthcare-build-tile {
    min-height: 96px;
    padding: 18px;
  }

  .healthcare-build-slide {
    padding: 28px 24px 0;
  }

  .healthcare-build-checklist {
    padding: 0 24px 24px 0;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .healthcare-build-tile,
  .healthcare-build-tile-label,
  .healthcare-build-tile-arrow,
  .healthcare-build-slide {
    transition: none;
  }
}

/* ==========================================================================
   Technology Capabilities — full-screen slider. Sits directly under "What
   We Build", black section background. Centered heading over a
   one-slide-per-view Swiper (`.healthcare-tech-swiper`, see
   `initHealthcareTechCapabilities` in healthcare-app-development.js — same
   construction as the Sectors swiper above it). Each slide is a full-bleed
   color card: a duotone background made from a solid brand-color gradient
   plus a photo blended in with `mix-blend-mode: luminosity` (so the photo
   always reads in the slide's color without needing a pre-tinted image
   asset), behind a title/link-icon header, a divider, and a two-column
   body — description left, numbered "Solutions We Deliver" list right.
   ========================================================================== */

.healthcare-tech {
  position: relative;
  background: #000000;
  padding: 0 0 80px;
  overflow: hidden;
}

.healthcare-tech-head {
  max-width: 800px;
  margin: 0 auto 44px;
  text-align: center;
}

.healthcare-tech-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5b301;
  background: #f5b4012c;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 180, 1, 0.4);
}

.healthcare-tech-title {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.3;
  font-weight: 700;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-tech-slider-wrap {
  width: 100%;
}

.healthcare-tech-swiper {
  border-radius: 28px;
}

/* ---- Card ---- */

.healthcare-tech-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 66vh;
  border-radius: 28px;
  overflow: hidden;
}

.healthcare-tech-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.55;
}

.healthcare-tech-card-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: multiply;
}

.healthcare-tech-card--olive .healthcare-tech-card-tint {
  background: linear-gradient(135deg, #6a6a16 0%, #26260a 100%);
}

.healthcare-tech-card--blue .healthcare-tech-card-tint {
  background: linear-gradient(135deg, #2f5fe6 0%, #0d1a4a 100%);
}

.healthcare-tech-card--orange .healthcare-tech-card-tint {
  background: linear-gradient(135deg, #ff7a1a 0%, #a33500 100%);
}

.healthcare-tech-card--violet .healthcare-tech-card-tint {
  background: linear-gradient(135deg, #8324e6 0%, #2c0a52 100%);
}

/* A flat color wash above the tint keeps text legible over any part of
   the photo, regardless of how bright/busy that part of the image is —
   the tint above supplies the hue, this supplies contrast. */
.healthcare-tech-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.35) 0%, rgba(4, 7, 13, 0.15) 40%, rgba(4, 7, 13, 0.55) 100%);
}

.healthcare-tech-card-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 44px 44px;
}

.healthcare-tech-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.healthcare-tech-card-title {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-tech-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.healthcare-tech-card-link svg {
  width: 18px;
  height: 18px;
}

.healthcare-tech-card-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  flex: 1;
  align-items: start;
  padding-top: 26px;
}

.healthcare-tech-card-desc {
  margin: 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}

.healthcare-tech-solutions {
  padding-left: 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.healthcare-tech-solutions h4 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.healthcare-tech-solutions ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.healthcare-tech-solutions li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}

.healthcare-tech-solutions li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.healthcare-tech-solutions-index {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}

.healthcare-tech-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.healthcare-tech-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.healthcare-tech-nav-btn:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.healthcare-tech-nav-btn.swiper-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.healthcare-tech-nav-btn svg {
  width: 17px;
  height: 17px;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .healthcare-tech-card {
    min-height: 0;
  }

  .healthcare-tech-card-inner {
    padding: 32px 32px 36px;
  }

  .healthcare-tech-card-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .healthcare-tech-solutions {
    padding-left: 0;
    border-left: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .healthcare-tech-card-desc {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .healthcare-tech {
    padding: 64px 0;
  }

  .healthcare-tech-head {
    padding: 0 20px;
    margin-bottom: 32px;
  }

  .healthcare-tech-slider-wrap {
    padding: 0 20px;
  }

  .healthcare-tech-swiper {
    border-radius: 22px;
  }

  .healthcare-tech-card {
    border-radius: 22px;
  }

  .healthcare-tech-card-inner {
    padding: 26px 22px 28px;
  }

  .healthcare-tech-card-head {
    padding-bottom: 20px;
  }

  .healthcare-tech-card-link {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-tech-nav-btn {
    transition: none;
  }
}

/* ==========================================================================
   Why Teams Choose Us — sits directly under Technology Capabilities, black
   section. Static (no tab/slider interaction): a fixed-width left column
   (eyebrow + title + intro) beside a 3x2 grid of white "(0N)" numbered
   cards.
   ========================================================================== */

.healthcare-why {
  position: relative;
  background: #000000;
  padding: 0 0 80px;
}

.healthcare-why-inner {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.healthcare-why-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5b301;
}

.healthcare-why-title {
  margin: 0;
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.25;
  font-weight: 800;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-why-intro {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(226, 232, 240, 0.7);
}

.healthcare-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.healthcare-why-card {
  padding: 26px 24px;
  border-radius: 18px;
  background: #ffffff;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.healthcare-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(4, 7, 13, 0.5);
}

.healthcare-why-card-index {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(4, 7, 13, 0.4);
}

.healthcare-why-card-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: #04070d;
  text-wrap: balance;
}

.healthcare-why-card-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(4, 7, 13, 0.6);
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .healthcare-why-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .healthcare-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .healthcare-why {
    padding: 64px 0;
  }

  .healthcare-why-inner {
    padding: 0 20px;
  }

  .healthcare-why-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-why-card {
    transition: none;
  }
}

/* ==========================================================================
   Awards & Recognitions — sits directly under Why Teams Choose Us. Plain
   Swiper carousel (`initHealthcareAwards` in healthcare-app-development.js).
   Same construction as the Real Estate page's Awards section
   (`.reapp-awards-*`) — dark section continuing this page's alternating
   rhythm, kept as its own independent Swiper instance.
   ========================================================================== */

.healthcare-awards {
  position: relative;
  background: #000000;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 80px 0;
}

.healthcare-awards-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.healthcare-awards-title {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.3;
  font-weight: 700;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-awards-intro {
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.75;
  color: rgba(226, 232, 240, 0.7);
}

/* ---- Slider ---- */

.healthcare-awards-slider-wrap {
  position: relative;
}

.healthcare-awards-swiper {
  padding: 4px 4px 8px;
}

.healthcare-awards-swiper .swiper-slide {
  height: auto;
}

.healthcare-awards-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 260px;
  padding: 32px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.healthcare-awards-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 194, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.healthcare-awards-card-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00c2ff;
}

.healthcare-awards-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  margin: 18px 0;
}

.healthcare-awards-card-media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.healthcare-awards-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c2ff, #2f5fe6);
  color: #ffffff;
}

.healthcare-awards-card-icon svg {
  width: 34px;
  height: 34px;
}

.healthcare-awards-card-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.healthcare-awards-card-caption {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.62);
}

/* ---- Prev/next nav ---- */

.healthcare-awards-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.healthcare-awards-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.healthcare-awards-nav-btn:hover {
  border-color: rgba(0, 194, 255, 0.5);
  background: rgba(0, 194, 255, 0.12);
  color: #00c2ff;
}

.healthcare-awards-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.healthcare-awards-nav-btn svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-awards-card {
    transition: none;
  }

  .healthcare-awards-card:hover {
    transform: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .healthcare-awards {
    padding-top: 80px;
  }

  .healthcare-awards-head {
    margin-bottom: 44px;
  }
}

@media (max-width: 640px) {
  .healthcare-awards {
    padding-top: 64px;
  }

  .healthcare-awards-card {
    min-height: 0;
    padding: 26px 20px;
  }

  .healthcare-awards-card-media {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
  }

  .healthcare-awards-card-icon svg {
    width: 26px;
    height: 26px;
  }
}

/* ==========================================================================
   Compliance & Regulatory Standards — full white section, sits directly
   after the closing CTA banner. Centered heading (two-tone: a plain lead
   word plus a gradient-text accent phrase, the same cyan-to-blue gradient
   used for the "01 / 06" counter badge in the Sectors section) over a
   4-column grid of badge cards, each a solid blue-gradient shield icon +
   code + full name. Adapted from the Real Estate page's own Compliance
   section (`.reapp-compliance-*`) — centered instead of left-aligned, and
   a 4-column card grid instead of that page's 5-column outline-icon grid.
   ========================================================================== */

.healthcare-compliance {
  position: relative;
  background: #ffffff;
  padding: 80px 0;
}

.healthcare-compliance-head {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.healthcare-compliance-title {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.3;
  font-weight: 800;
  color: #04070d;
  text-wrap: balance;
}

.healthcare-compliance-accent {
  background: linear-gradient(90deg, #00c2ff, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.healthcare-compliance-intro {
  margin: 16px 0 0;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: rgba(4, 7, 13, 0.62);
}

/* ---- Badge grid ---- */

.healthcare-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 0;
  list-style: none;
}

.healthcare-compliance-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(4, 7, 13, 0.08);
  text-align: center;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.healthcare-compliance-badge:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 194, 255, 0.32);
  box-shadow: 0 18px 36px -22px rgba(4, 7, 13, 0.22);
}

.healthcare-compliance-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: linear-gradient(150deg, #00c2ff 0%, #2f5fe6 100%);
  color: #ffffff;
}

.healthcare-compliance-badge-icon svg {
  width: 22px;
  height: 22px;
}

.healthcare-compliance-badge-code {
  font-size: 15px;
  font-weight: 800;
  color: #04070d;
}

.healthcare-compliance-badge-name {
  max-width: 170px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(4, 7, 13, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-compliance-badge {
    transition: none;
  }

  .healthcare-compliance-badge:hover {
    transform: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .healthcare-compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .healthcare-compliance {
    padding: 64px 0;
  }

  .healthcare-compliance-inner {
    padding: 0 20px;
  }

  .healthcare-compliance-grid {
    margin-top: 40px;
    gap: 16px;
  }

  .healthcare-compliance-badge {
    padding: 26px 16px;
  }
}

@media (max-width: 480px) {
  .healthcare-compliance-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Enterprise-Grade Technology Foundation — sits directly under Compliance,
   black section. Centered two-tone heading over a row of pill category
   tabs (one `is-active`/orange, the rest dark) plus a synced chip panel.
   Same WAI-ARIA tabs construction as this page's own "What We Build"
   explorer (`.healthcare-build-*`, `initHealthcareBuild`) — just a single
   pill row instead of a 2x2 tile grid, and a flat chip-tag panel instead
   of an icon/description/checklist panel. See `initHealthcareStack` in
   healthcare-app-development.js.
   ========================================================================== */

.healthcare-stack {
  position: relative;
  background: #000000;
  padding: 90px 0;
}

.healthcare-stack-title {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.3;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  text-wrap: balance;
}

.healthcare-stack-accent {
  color: #00c2ff;
}

.healthcare-stack-tabs {
  margin-top: 40px;
}

/* ---- Pills ---- */

.healthcare-stack-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.healthcare-stack-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.7);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.healthcare-stack-pill:hover {
  border-color: rgba(0, 194, 255, 0.32);
  color: #ffffff;
}

.healthcare-stack-pill.is-active {
  border-color: transparent;
  border: none;
  background: linear-gradient(150deg, #00c2ff 0%, #2f5fe6 100%);
  color: #ffffff;
  box-shadow: 0 14px 30px -14px rgba(0, 194, 255, 0.6);
}

/* ---- Chip panel ---- */

.healthcare-stack-panels {
  display: grid;
  margin-top: 32px;
}

.healthcare-stack-panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}

.healthcare-stack-panel.is-active {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.healthcare-stack-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.healthcare-stack-chips li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(226, 232, 240, 0.86);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Responsive ---- */

@media (max-width: 767px) {
  .healthcare-stack {
    padding: 64px 0;
  }

  .healthcare-stack-inner {
    padding: 0 20px;
  }

  .healthcare-stack-pills {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 -20px;
    padding: 0 20px 4px;
  }

  .healthcare-stack-pill {
    flex: 0 0 auto;
  }

  .healthcare-stack-chips {
    justify-content: flex-start;
  }

  .healthcare-stack-chips li {
    height: 40px;
    padding: 0 18px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .healthcare-stack-pill,
  .healthcare-stack-panel {
    transition: none;
  }
}

/* ==========================================================================
   FAQ — full white section, sits directly under Technology Foundation.
   Direct port of the Real Estate page's FAQ section
   (`.reapp-faq-*` in real-estate-app-development.css): centered plain
   heading, left accordion (bracketed index, underlined-divider rows,
   plus-icon-rotates-to-cross toggle) beside a right blue-gradient
   "still have questions" CTA card with a giant faint "?" mark — same
   `grid-template-rows: 0fr -> 1fr` collapsible technique, same colors,
   same breakpoints.
   ========================================================================== */

.healthcare-faq {
  position: relative;
  background: #ffffff;
  padding: 96px 0 104px;
}

.healthcare-faq-title {
  margin: 0 auto;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 700;
  color: #04070d;
  text-align: center;
  text-wrap: balance;
}

/* Same font-size cascade as the other section headings on this page. */
@media (max-width: 1550px) {
  .healthcare-faq-title {
    font-size: 38px;
  }
}

@media (max-width: 1440px) {
  .healthcare-faq-title {
    font-size: 36px;
  }
}

@media (max-width: 1200px) {
  .healthcare-faq-title {
    font-size: 40px;
  }
}

@media (max-width: 1024px) {
  .healthcare-faq-title {
    font-size: 36px;
  }
}

@media (max-width: 912px) {
  .healthcare-faq-title {
    font-size: 32px;
  }
}

@media (max-width: 820px) {
  .healthcare-faq-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .healthcare-faq-title {
    font-size: 27px;
  }
}

@media (max-width: 650px) {
  .healthcare-faq-title {
    font-size: 22px;
  }
}

.healthcare-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  margin-top: 56px;
}

/* ---- Accordion ---- */

.healthcare-faq-accordion {
  display: flex;
  flex-direction: column;
}

.healthcare-faq-item {
  border-bottom: 1px solid rgba(4, 7, 13, 0.1);
}

.healthcare-faq-heading {
  margin: 0;
}

.healthcare-faq-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  padding: 22px 2px;
  border: 0;
  background: none;
  color: #04070d;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.healthcare-faq-index {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  color: rgba(4, 7, 13, 0.35);
}

.healthcare-faq-question {
  flex: 1 1 auto;
  font-size: 16.5px;
  font-weight: 700;
  color: #04070d;
  transition: color 200ms ease;
}

.healthcare-faq-header:hover .healthcare-faq-question {
  color: #0284c7;
}

.healthcare-faq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  border: 1px solid rgba(4, 7, 13, 0.16);
  color: #04070d;
  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1), background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.healthcare-faq-toggle svg {
  width: 14px;
  height: 14px;
}

/* Plus rotates 45° into a cross when open — one icon, no swap needed. */
.healthcare-faq-item.is-open .healthcare-faq-toggle {
  transform: rotate(45deg);
  background: #00c2ff;
  border-color: #00c2ff;
  color: #ffffff;
}

/* Same `grid-template-rows` collapsible technique as the Sectors
   accordion — sizes correctly regardless of answer length, no magic
   numbers. */
.healthcare-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.65, 0, 0.35, 1);
}

.healthcare-faq-item.is-open .healthcare-faq-panel {
  grid-template-rows: 1fr;
}

.healthcare-faq-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.healthcare-faq-answer {
  margin: 0 0 24px;
  padding-right: 40px;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(4, 7, 13, 0.66);
}

@media (prefers-reduced-motion: reduce) {

  .healthcare-faq-panel,
  .healthcare-faq-toggle {
    transition: none;
  }
}

/* ---- "Still have questions" CTA card ---- */

.healthcare-faq-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  border-radius: 28px;
  padding: 40px 36px;
  background: linear-gradient(150deg, #2f5fe6 0%, #1a3696 100%);
  color: #ffffff;
}

.healthcare-faq-cta-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  z-index: 0;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.healthcare-faq-cta-mark {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 0 12px;
  font-size: 180px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.14);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
}

.healthcare-faq-cta-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  text-align: center;
}

.healthcare-faq-cta-title {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.3;
  color: #ffffff;
  text-wrap: balance;
}

.healthcare-faq-cta-copy {
  margin: 14px 0 0;
  /* max-width: 380px; */
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.healthcare-faq-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b1220;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(4, 7, 13, 0.4);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.healthcare-faq-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -16px rgba(4, 7, 13, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .healthcare-faq-cta-btn:hover {
    transform: none;
  }
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .healthcare-faq {
    padding: 80px 0 88px;
  }

  .healthcare-faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .healthcare-faq-cta {
    min-height: 0;
    padding: 36px 28px;
  }

  .healthcare-faq-cta-mark {
    font-size: 120px;
  }
}

@media (max-width: 640px) {
  .healthcare-faq {
    padding: 64px 0 72px;
  }

  .healthcare-faq-header {
    gap: 12px;
    padding: 18px 2px;
  }

  .healthcare-faq-question {
    font-size: 15px;
  }

  .healthcare-faq-answer {
    padding-right: 0;
    font-size: 14px;
  }

  .healthcare-faq-cta-mark {
    font-size: 96px;
  }
}