/* ==========================================================================
   Industries - Healthcare page
   Colors from Figma: Blue #0272BB, Teal #0B7D78
   Fonts: Fustat (body/headings, already loaded sitewide), Fugaz One (step numbers)
   ========================================================================== */

.hc-page { overflow-x: hidden; }
.hc-page section { position: relative; }

.hc-container {
  max-width: 1452px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons (bespoke to this page's Figma spec — do not reuse sitewide .buttn,
   which is 50px/uppercase/12px/#2475C2 and does not match this design's 60px/normal-case/18px/#0272BB) ---------- */
.hc-buttn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 7px 10px 7px 33px;
  border-radius: 999px;
  background-color: #0272bb;
  text-decoration: none;
  white-space: nowrap;
  width: max-content;
}
.hc-buttn__label {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 0.42vw + 12.5px, 18px);
  line-height: 30px;
  color: #fff;
}
.hc-buttn__icon {
  display: block;
  width: 46.507px;
  height: 46px;
  flex-shrink: 0;
}
.hc-buttn--white {
  background-color: #fff;
}
.hc-buttn--white .hc-buttn__label {
  color: #000;
  letter-spacing: 0.54px;
}
.hc-buttn { transition: background-color .2s ease; }
.hc-buttn:hover { background-color: #025c96; }
.hc-buttn--white:hover { background-color: #f2f2f2; }

/* ---------- Hero ---------- */
.hc-hero {
  position: relative;
  height: 734px; /* explicit (not min-height) so the absolutely-positioned bg photo below,
    which is sized in % of this height, has a determinate containing block to resolve against */
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #0272bb;
}

/* Figma mirrors this photo horizontally (rotate 180 + flip vertical nets to a horizontal
   flip). Critically, that mirror is applied to a box spanning the FULL hero viewport, with
   the offset/oversized photo positioned *inside* it — mirroring the photo element itself
   (which is offset, not centered) would flip it around its own off-center midpoint instead
   of the viewport's, landing the figure in the wrong place. Verified by simulating both the
   correct (wrapper-mirrored) and incorrect (self-mirrored) crops against the source photo. */
.hc-hero__bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scaleX(-1);
}

/* Figma's exact box for this layer: 1948x820, pinned left:0 top:-56px inside the 1728x734
   hero — not a plain 100%-cover fill. object-fit:cover is kept only as a safety net since
   the box's own aspect ratio (2.376) already nearly matches the source photo (2.373). */
.hc-hero__bg {
  position: absolute;
  left: 0;
  top: -7.63%; /* -56px / 734px hero height */
  width: 112.73%; /* 1948 / 1728 */
  height: 111.72%; /* 820 / 734 */
  max-width: none;
  object-fit: cover;
}

/* Figma's black 20% overlay sits BEHIND this photo in its own layer stack (an earlier,
   fully-occluded sibling), so it never actually shows in the rendered design — intentionally
   not reproduced here. */

.hc-hero__glow {
  /* Literal recipe from the Figma "Ellipse 1" asset: a white ellipse, 30% opacity, blurred
     with a 100px Gaussian blur — not a radial-gradient approximation. */
  position: absolute;
  left: 33px;
  top: 104px;
  width: 776px;
  height: 557px;
  background: #fff;
  opacity: 0.3;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

/* Readability scrim: just enough of a fade behind the text column to hold WCAG AA contrast
   (3:1 for the 50px bold heading, the binding case being its blue #0272bb span — the
   lightest text color used — which needs an effective background luminance of ~0.57;
   targeting ~0.62 here for a safety margin) without reading as a solid white panel. Peak
   opacity is 0.6, not nearly-opaque, and it's fully transparent well before the photo's
   main subject. */
.hc-hero__scrim {
  /* The text column runs from ~8% to ~47% of the hero width (left:140px, up to a 677px-wide
     box, in a 1728px design). Full-strength opacity holds across that whole footprint, then
     fades out well past it — further into the photo than the text itself needs — per
     explicit direction to push the white further out rather than cut it close. */
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.68) 0%,
    rgba(255, 255, 255, 0.65) 55%,
    rgba(255, 255, 255, 0.38) 72%,
    rgba(255, 255, 255, 0) 90%
  );
  pointer-events: none;
}

.hc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1452px;
  margin: 0 auto;
  padding: 60px 24px;
}

.hc-hero__content {
  max-width: 677px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hc-hero__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  margin: 0;
}
.hc-hero__heading .is-blue { color: #0272bb; }
.hc-hero__heading .is-black { color: #000; }

.hc-hero__desc {
  font-family: 'Fustat', sans-serif;
  font-size: clamp(16px, 0.63vw + 13.8px, 22px);
  line-height: 30px;
  color: #464646;
  margin: 15px 0 0;
}

/* ---------- Breadcrumbs (its own 1488px/120px container — narrower side-padding than the
   138px/1452px container every other section uses) ---------- */
.hc-breadcrumbs {
  background: #f5f5f5;
  padding: 10px 0;
}
.hc-breadcrumbs__inner {
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 992px) {
  .hc-breadcrumbs__inner { padding: 0 120px; }
}
.hc-breadcrumbs p {
  margin: 0;
  font-family: 'Fustat', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}
.hc-breadcrumbs a,
.hc-breadcrumbs span.is-trail {
  color: rgba(2, 114, 187, 0.75);
  text-decoration: none;
}
.hc-breadcrumbs a:hover { text-decoration: underline; }
.hc-breadcrumbs .is-current {
  font-weight: 800;
  color: #0272bb;
}

/* ---------- Problem (shared by both "problem" sections) ---------- */
.hc-problem {
  background: #fff;
  padding: 80px 0 70px;
}
.hc-problem__inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.hc-problem__image {
  flex: 0 0 49.5%;
  max-width: 716px;
  border-radius: 15px;
  overflow: hidden;
}
.hc-problem__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-problem--tall .hc-problem__image { aspect-ratio: 716 / 635; }
.hc-problem--medium .hc-problem__image { aspect-ratio: 716 / 530; }
.hc-problem--short .hc-problem__image { aspect-ratio: 716 / 431; }

.hc-problem__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hc-problem__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  color: #000;
  margin: 0 0 20px;
}
.hc-problem__heading .is-blue { color: #0272bb; }
.hc-problem__heading .is-black { color: #000; }
.hc-problem__body {
  font-family: 'Fustat', sans-serif;
  font-size: clamp(16px, 0.63vw + 13.8px, 22px);
  line-height: 30px;
  color: #464646;
}
.hc-problem__body p { margin: 0 0 20px; }
.hc-problem__body p:last-child { margin-bottom: 0; }

/* ---------- Solution - Coverage Types ---------- */
.hc-solution-coverage {
  background: #fff;
  padding: 75px 0;
}
.hc-solution-coverage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 75px;
}
.hc-solution-coverage__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  text-align: center;
  max-width: 936px;
  margin: 0;
}
.hc-solution-coverage__heading .is-blue { color: #0272bb; }
.hc-solution-coverage__heading .is-black { color: #000; }

.hc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  width: 100%;
}
.hc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}
.hc-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 471 / 529;
  border-radius: 10px;
  overflow: hidden;
}
.hc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-card__label {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 20px 13px;
  text-align: center;
}
.hc-card__label span {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(17px, 0.73vw + 14.5px, 24px);
  line-height: 1.15;
  color: #0b7d78;
}
.hc-card__desc {
  font-family: 'Fustat', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 0.42vw + 12.5px, 18px);
  line-height: 1.35;
  color: #464646;
  text-align: center;
  max-width: 405px;
}

.hc-solution-coverage__closing {
  font-family: 'Fustat', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.04vw + 16.5px, 30px);
  line-height: 38px;
  color: #0b7d78;
  text-align: center;
  max-width: 912px;
  margin: 0;
}

/* ---------- Solution - Team Behind Your Team ---------- */
.hc-solution-team {
  position: relative;
  padding: 75px 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(134deg, #0272bb 0%, #0474aa 25%, #077895 50%, #0b7d78 78%, #108257 100%);
}
.hc-solution-team__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.hc-solution-team__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 75px;
}
.hc-solution-team__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  text-align: center;
  margin: 0;
}
.hc-solution-team__body {
  font-family: 'Fustat', sans-serif;
  font-size: clamp(16px, 0.63vw + 13.8px, 22px);
  line-height: 30px;
  text-align: center;
  max-width: 975px;
  margin: 15px auto 0;
}
.hc-solution-team__body p { margin: 0 0 20px; }
.hc-solution-team__body p:last-child { margin-bottom: 0; }

.hc-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  width: 100%;
}
.hc-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.hc-feature__icon {
  width: 100%;
  max-width: 447px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-feature__icon img { max-width: 100%; max-height: 100%; }
.hc-feature__title {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 1.04vw + 16.5px, 30px);
  line-height: 1.15;
  margin: 0;
}
.hc-feature__desc {
  font-family: 'Fustat', sans-serif;
  font-size: clamp(14px, 0.42vw + 12.5px, 18px);
  line-height: 1.35;
  max-width: 405px;
  margin: 0;
}

/* ---------- Solution - Process Steps ---------- */
.hc-solution-steps {
  background: #fff;
  padding: 75px 0;
}
.hc-solution-steps__inner {
  display: flex;
  flex-direction: column;
  gap: 75px;
}
.hc-solution-steps__head {
  display: flex;
  /*align-items: center;*/
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hc-solution-steps__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  margin: 0;
  /*display: flex;
  flex-wrap: wrap;*/
}

@media (min-width: 1100px) {
  .hc-solution-steps__heading {
    display: flex;
    flex-wrap: wrap;
    max-width: 50%;
  }
}

.hc-solution-steps__heading .is-blue { color: #0272bb; }
.hc-solution-steps__heading .is-black { color: #000; }

.hc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}
.hc-step {
  border: 2px solid #0272bb;
  border-radius: 20px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.hc-step__number {
  font-family: 'Fugaz One', 'Fustat', sans-serif;
  font-size: clamp(48px, 5.42vw + 29.5px, 100px);
  line-height: 1.15;
  color: #0272bb;
  margin: 0;
  display: none;
}
.hc-step__title {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 1.04vw + 16.5px, 30px);
  line-height: 1.15;
  color: #0272bb;
  margin: 0;
}
.hc-step__desc {
  font-family: 'Fustat', sans-serif;
  font-size: clamp(14px, 0.42vw + 12.5px, 18px);
  line-height: 1.35;
  color: #464646;
  margin: 0;
}

/* ---------- Solution - FAQ ---------- */
.hc-solution-faq {
  position: relative;
  background: #dedede;
  padding: 75px 0;
  overflow: hidden;
}
.hc-solution-faq__texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 369px;
  object-fit: cover;
  z-index: 0;
}
.hc-solution-faq__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 75px;
}
.hc-solution-faq__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  text-align: center;
  margin: 0;
}
.hc-solution-faq__heading .is-blue { color: #0272bb; }
.hc-solution-faq__heading .is-black { color: #000; }

.hc-accord {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 970px;
}
.hc-accord__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  background: #0b7d78;
  border: 0;
  border-radius: 20px;
  padding: 20px 30px;
  cursor: pointer;
  text-align: left;
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 1.04vw + 16.5px, 30px);
  line-height: 1.15;
  color: #fff;
  transition: border-radius .2s ease;
}
.hc-accord__trigger.is-open {
  border-radius: 20px 20px 0 0;
}
.hc-accord__panel {
  height: 0;
  overflow: hidden;
}
.hc-accord__panel.is-open { height: auto; }
.hc-accord__panel-inner {
  background: #fff;
  border-radius: 0 0 20px 20px;
  padding: 20px 30px;
  font-family: 'Fustat', sans-serif;
  font-size: clamp(16px, 0.63vw + 13.8px, 22px);
  line-height: 30px;
  color: #464646;
}

/* ---------- CTA ---------- */
.hc-cta {
  background: #fff;
  padding: 89px 0;
}
.hc-cta__box {
  position: relative;
  display: flex;
  align-items: center; /* Figma centers the content block with top:50%/translateY(-50%) —
    flex align-items:center reproduces that exactly */
  gap: 24px; /* real flex gap: guarantees a minimum horizontal separation at every width */
  min-height: 432px;
  padding-left: 66px; /* Figma: content left:204px, box left:138px → 66px inset */
  padding-right: 24px;
}
.hc-cta__box-bg {
  position: absolute;
  inset: 0;
  background: #0b7d78;
  border-radius: 10px;
  overflow: hidden;
  z-index: 0;
}
.hc-cta__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
/* Same mirror-pivot fix as .hc-hero__bg-wrap: Figma mirrors this pattern around the full
   box (the "Mask group", exactly matching .hc-cta__box-bg's own inset:0 bounds), not around
   this offset image's own midpoint. */
.hc-cta__vector-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scaleX(-1);
  pointer-events: none;
}
.hc-cta__vector {
  position: absolute;
  left: 28%;
  top: -206px;
  width: 84%;
  height: 908px;
  max-width: none;
}
.hc-cta__content {
  /* A true flex item now, not independently positioned against the photo by hand-tuned
     percentages (which only avoided overlap by luck at specific widths — the previous
     approach — and needed re-tuning per breakpoint, which is fragile and easy to miss a
     range with, as happened). flex:1 means this always gets "whatever space is left" after
     .hc-cta__photo-slot claims its own lane — the two literally cannot overlap, at any
     width, because the browser's flex layout guarantees it rather than my arithmetic. */
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
  max-width: 775px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}
.hc-cta__heading {
  font-family: 'Fustat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.5vw + 17.5px, 50px);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.hc-cta__body {
  font-family: 'Fustat', sans-serif;
  font-size: clamp(17px, 0.73vw + 14.5px, 24px);
  line-height: 30px;
  margin: 0 0 10px;
  text-wrap: pretty;
}
.hc-cta__photo-slot {
  /* Reserves a real lane in the flex row (flex-shrink:0 by way of a fixed basis — it isn't
     squeezed by the text growing, and the text can't be squeezed by it growing either).
     Sized fluidly with clamp() so the photo visibly shrinks as the viewport narrows instead
     of jumping between hand-picked breakpoint values, per direction to let it shrink
     gracefully rather than protect a fixed size. align-self:stretch gives it the box's
     current height as the positioning context for the photo's vertical bleed. */
  position: relative;
  flex: 0 0 clamp(220px, 38vw, 600px);
  align-self: stretch;
}
.hc-cta__photo {
  /* Bleeds ~89px above the box and sits flush with its bottom (Figma: photo h:521px vs
     box h:432px, top:0 relative to the section — see the CTA breakdown notes). Horizontal
     position is just inset:0 within the slot now, so it's physically confined to the lane
     .hc-cta__photo-slot reserved and can never reach into the text's space. */
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: calc(100% + 89px);
}
.hc-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ==========================================================================
   Responsive
   Tiers: desktop (≥1281px, base styles above) → laptop (1024–1280px, nothing
   reflows yet but oversized photos get reined in) → tablet (768–1024px, card
   grids go 2-up, sections stack, images get an explicit cap instead of
   stretching full-bleed) → phone (≤768px, everything finishes collapsing to a
   single column).
   ========================================================================== */

/* ---------- Laptop: 1024–1280px ---------- */
@media (max-width: 1280px) {
  .hc-hero { height: 620px; }
  .hc-problem__image { max-width: 560px; }
}

/* ---------- Tablet: up to 1024px ---------- */
@media (max-width: 1024px) {
  /* 2-up before collapsing all the way to 1 column, per client request */
  .hc-cards,
  .hc-features,
  .hc-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2-up with a centered orphan: 769px–1024px only */
  @media (min-width: 769px) and (max-width: 1024px) {
    .hc-cards, .hc-features {
      grid-template-columns: repeat(4, 1fr);
    }
    .hc-card, .hc-feature {
      grid-column: span 2;
    }
    /* Only fires when the last card is alone on its row (odd total count) */
    .hc-card:last-child:nth-child(odd), .hc-feature:last-child:nth-child(odd) {
      grid-column: 2 / span 2;
    }
  }

  /* Section vertical padding and internal gaps: these are 75-89px on desktop (matching
     Figma's 1728px-wide design) and were never reduced at any narrower tier, which reads
     as a huge dead gap once the viewport — and the content inside it — is much smaller.
     Scale them down at each tier instead of leaving them fixed. */
  .hc-problem { padding: 56px 0; }
  .hc-problem__inner { gap: 40px; }
  .hc-solution-coverage,
  .hc-solution-team,
  .hc-solution-steps,
  .hc-solution-faq {
    padding: 56px 0;
  }
  .hc-solution-coverage__inner,
  .hc-solution-team__inner,
  .hc-solution-steps__inner,
  .hc-solution-faq__inner {
    gap: 48px;
  }
  .hc-cta { padding: 56px 0; }

  .hc-hero { height: 560px; }
  .hc-hero__glow {
    left: -10%;
    top: -15%;
    width: 75%;
    height: 130%;
    opacity: 0.5;
    filter: blur(90px);
  }

  /* The decorative triangle "shape" behind the CTA photo was positioned with fixed px
     offsets tuned for the 432px-tall desktop box. Once the box stacks and grows much
     taller (text + photo stacked), those fixed offsets land in the wrong place relative
     to the new box size. Simplify to a full cover fill instead of trying to preserve the
     desktop crop, which doesn't make sense in a totally different layout anyway. */
  .hc-cta__vector {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .hc-problem__inner {
    flex-direction: column;
  }
  .hc-problem__image {
    max-width: 480px;
    flex-basis: auto;
    width: 100%;
    margin: 0 auto;
  }

  .hc-cta__box {
    flex-direction: column;
    /* No bottom padding: the photo has to sit flush against the box's bottom edge with
       zero gap, so padding only goes on the sides that aren't the photo's own edge. */
    padding: 40px 40px 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .hc-cta__content { max-width: 100%; }
  .hc-cta__photo-slot {
    /* Stacked below the text (source order already puts it last; .hc-cta__box's own
       gap:24px, inherited from the base rule, provides the space above it) and flush
       against the box's bottom edge — zero margin/padding below it, no exceptions. Sized
       *fluidly* (a % of the box, clamped between a floor and a ceiling) instead of jumping
       between fixed pixel values at each breakpoint: a small fixed box left huge empty
       margins on a wide tablet, and was taller than it needed to be on a narrow phone. This
       scales continuously — the person visibly shrinks as the screen narrows, which is the
       point, rather than the box staying oddly fixed-size while empty space grows around it. */
    flex: none;
    align-self: center;
    width: min(55%, 380px);
    height: clamp(180px, 38vw, 380px);
  }
  .hc-cta__photo {
    /* The 89px bleed-above-the-box is a desktop-specific Figma detail; in a slot this
       short it would push the photo up into the text above it, so just fill the slot. */
    z-index: 1;
    inset: 0;
    height: 100%;
  }
}

/* ---------- Small tablet / large phone: up to 768px ---------- */
@media (max-width: 768px) {
  .hc-cards,
  .hc-features,
  .hc-steps {
    grid-template-columns: 1fr;
  }
  .hc-problem__image { max-width: 420px; }

  .hc-problem { padding: 48px 0; }
  .hc-solution-coverage,
  .hc-solution-team,
  .hc-solution-steps,
  .hc-solution-faq {
    padding: 48px 0;
  }
  .hc-solution-coverage__inner,
  .hc-solution-team__inner,
  .hc-solution-steps__inner,
  .hc-solution-faq__inner {
    gap: 36px;
  }
  .hc-cta { padding: 40px 0; }
}

/* ---------- Phone: up to 640px ---------- */
@media (max-width: 640px) {
  .hc-hero { height: auto; min-height: 480px; padding: 40px 0; }
  .hc-hero__bg { left: 0; top: 0; width: 100%; height: 100%; }
  .hc-hero__inner { padding: 40px 24px; }
  .hc-hero__glow {
    left: -20%;
    top: -20%;
    width: 140%;
    height: 140%;
    opacity: 0.72;
    filter: blur(60px);
  }
  .hc-problem__image { max-width: 100%; }
  .hc-solution-steps__head { flex-direction: column; align-items: flex-start; }
  .hc-accord__trigger { padding: 16px 20px; }
  .hc-accord__panel-inner { padding: 16px 20px; }

  .hc-problem { padding: 32px 0; }
  .hc-problem__inner { gap: 28px; }
  .hc-solution-coverage,
  .hc-solution-team,
  .hc-solution-steps,
  .hc-solution-faq {
    padding: 32px 0;
  }
  .hc-solution-coverage__inner,
  .hc-solution-team__inner,
  .hc-solution-steps__inner,
  .hc-solution-faq__inner {
    gap: 28px;
  }
  .hc-cta { padding: 28px 0; }
  .hc-cards,
  .hc-features { gap: 32px; }
  .hc-steps { gap: 20px; }
  .hc-card { gap: 24px; }
}