/* HOW WE WORK: full-width rail above a 1520px three-column content area. */
.home-page .services {
  height: auto;
  padding: 0;
  background: #e8e8e6;
  color: #111;
  text-align: left;
}

.home-page .services .shell {
  width: min(1520px, calc(100% - 48px));
  max-width: 1520px;
  margin-inline: auto;
}

.home-page .services-hero {
  position: relative;
  height: clamp(290px, 20.2vw, 388px);
  overflow: hidden;
}

/* Hide the light edge baked into the background without editing the original. */
.home-page .services-hero::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: url('../images/home/how_we_work_back_bottom.png') center bottom / 100% auto no-repeat,
    url('../images/home/how_we_work_back_top.png') center center / cover no-repeat;
}

.home-page .services .service-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 40px;
  height: auto;
  padding: clamp(52px, 3.65vw, 70px) 0 0;
}

.home-page .services .service-heading .eyebrow {
  position: static;
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: .035em;
  color: #111;
  text-align: left;
}

.home-page .services .service-heading .muted {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 21px;
  color: #555;
}

.home-page .services .service-statement {
  justify-self: end;
  margin: 22px 145px 0 0;
  font-size: 27px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: .18em;
  white-space: nowrap;
  color: #4c4c4c;
}

.home-page .services-rail {
  position: absolute;
  top: min(4.75vw, 91px);
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.home-page .services-details {
  padding: 86px 0 76px;
}

.home-page .services .service-grid {
  display: grid;
  grid-template-columns: 30.5% 36.5% 33%;
  gap: 0;
  padding: 0;
  border-top: 0;
}

.home-page .services .service-grid article {
  position: relative;
  min-width: 0;
  min-height: 182px;
  padding: 0 52px 0 0;
}

.home-page .services .service-grid article + article {
  border-left: 1px solid #b7b7b7;
  padding: 0 0 0 86px;
}

.home-page .services .service-grid article:nth-child(2) {
  padding-right: 32px;
}

.home-page .services .service-grid .number {
  display: inline-block;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 25px;
  line-height: 29px;
  font-weight: 300;
  transform: scaleX(.72);
  transform-origin: left center;
  color: #222;
}

.home-page .services .service-grid h3 {
  margin: 7px 0 0;
  font-size: 21px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -.035em;
  color: #111;
}

.home-page .services .service-grid .service-lead {
  position: static;
  max-width: none;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 24px;
  white-space: normal;
  color: #222;
}

.home-page .services .service-grid .service-description {
  position: static;
  max-width: none;
  margin: 26px 0 0;
  font-size: 14px;
  line-height: 21px;
  white-space: normal;
  color: #858585;
  word-break: keep-all;
}

@media (min-width: 1101px) and (max-width: 1600px) {
  .home-page .services .service-grid article + article { padding-left: 60px; }
  .home-page .services .service-heading .eyebrow { font-size: 18px; }
  .home-page .services .service-heading .muted { font-size: 13px; line-height: 18px; }
  .home-page .services .service-statement { font-size: 22px; margin-right: 60px; }
  .home-page .services .service-grid h3 { font-size: 17px; }
  .home-page .services .service-grid .service-lead { font-size: 13px; line-height: 20px; }
  .home-page .services .service-grid .service-description { font-size: 12px; line-height: 18px; }
}

@media (max-width: 1100px) {
  .home-page .services .service-heading { gap: 24px; padding-top: 40px; }
  .home-page .services .service-heading .eyebrow { font-size: 19px; }
  .home-page .services .service-heading .muted { font-size: 13px; line-height: 20px; margin-top: 8px; }
  .home-page .services .service-statement { font-size: 20px; margin: 18px 0 0; letter-spacing: .08em; }
  .home-page .services-rail { top: 100px; width: 135%; left: -17.5%; }
  .home-page .services-details { padding: 52px 0; }
  .home-page .services .service-grid article { padding-right: 24px; }
  .home-page .services .service-grid article + article { padding-left: 24px; }
  .home-page .services .service-grid h3 { font-size: 18px; }
  .home-page .services .service-grid .service-lead { font-size: 14px; }
  .home-page .services .service-grid .service-description { font-size: 13px; }
}

@media (max-width: 700px) {
  .home-page .services .service-heading { width: 80%; grid-template-columns: 1fr; gap: 15px; padding-top: 36px; }
  .home-page .services .service-heading .eyebrow { font-size: 19px; line-height: 27px; font-weight: 600; letter-spacing: .03em; }
  .home-page .services .service-heading .muted { font-size: 14px; line-height: 21px; margin-top: 14px; color: #444; word-break: keep-all; overflow-wrap: normal; }
  .home-page .services .desktop-break,
  .home-page .services .service-copy-break { display: none; }
  .home-page .services .service-statement { justify-self: start; margin: 0; font-size: 18px; line-height: 27px; letter-spacing: .18em; }
  .home-page .services-hero { height: max(290px, 71.6vw); }
  .home-page .services-hero::before { background: url('../images/home/how_we_work_back_top.png') center center / cover no-repeat; }
  .home-page .services-rail { top: max(130px, 32.1vw); width: 250%; left: -75%; }
  .home-page .services-details { padding: 44px 0 55px; }
  .home-page .services .service-grid { width: 86%; grid-template-columns: 1fr; gap: 37px; }
  .home-page .services .service-grid article,
  .home-page .services .service-grid article + article,
  .home-page .services .service-grid article:nth-child(2) { min-height: 0; padding: 0; border-left: 0; }
  .home-page .services .service-grid article + article:nth-child(n) { border-top: 1px solid #aaa; padding-top: 20px; }
  .home-page .services .service-grid { font-family: 'Noto Sans KR', sans-serif; }
  .home-page .services .service-grid .number { font-size: 24px; line-height: 34px; transform: none; }
  .home-page .services .service-grid h3 { margin-top: 7px; font-family: inherit; font-size: 20px; line-height: 32px; }
  .home-page .services .service-grid .service-lead { margin-top: 27px; font-family: inherit; font-size: 15px; line-height: 24px; }
  .home-page .services .service-grid .service-description { margin-top: 28px; font-family: inherit; font-size: 14px; line-height: 22px; color: #858585; }
  .home-page .services .service-grid .service-lead,
  .home-page .services .service-grid .service-description { word-break: keep-all; overflow-wrap: normal; }
}

@media (max-width: 360px) {
  .home-page .services-hero { height: 320px; }
  .home-page .services-rail { top: 165px; }
}