/* ExpatChina approved Homepage refinement — staging only, 2026-09-23. */
.home .ec-home-about,
.home .ec-home-works,
.home .ec-home-help,
.home .ec-home-about *,
.home .ec-home-works *,
.home .ec-home-help * {
  box-sizing: border-box;
}

.home .ec-home-about,
.home .ec-home-works,
.home .ec-home-help {
  width: 100%;
  font-family: var(--ec-sans, Inter, "Helvetica Neue", Arial, sans-serif);
}

.home .ec-home-about :where(h2, h3, p, figure, nav, ol),
.home .ec-home-works :where(h2, h3, p, figure, nav, ol),
.home .ec-home-help :where(h2, h3, p, figure, nav, ol) {
  margin: 0;
}

.home .ec-home-about .ec-eyebrow::before,
.home .ec-home-works .ec-eyebrow::before,
.home .ec-home-help .ec-eyebrow::before {
  display: none;
}

.home .ec-home-about .ec-eyebrow,
.home .ec-home-works .ec-eyebrow,
.home .ec-home-help .ec-eyebrow {
  display: block;
  width: 100%;
  height: 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Desktop 1440: Figma node 21:68, 1440 × 564. */
.home .ec-home-about {
  min-height: 564px;
  padding-block: 72px;
  background: #fff;
}

.home .ec-home-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 684px);
  gap: 72px;
  align-items: center;
}

.home .ec-home-about__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 420px;
}

.home .ec-home-about__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home .ec-home-about .ec-eyebrow {
  color: #ff8200;
}

.home .ec-home-about .ec-section-title {
  width: 540px;
  max-width: none;
  color: #00263e;
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -3.6px;
}

.home .ec-home-about .ec-intro {
  width: 540px;
  max-width: none;
  color: #506a79;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.home .ec-home-about__links {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  width: 540px;
  overflow: hidden;
}

.home .ec-home-about__links a {
  flex: 0 0 auto;
  color: #379a97;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
}

.home .ec-home-about__visual {
  width: 684px;
  height: 420px;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
}

.home .ec-home-about__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Desktop 1440: Figma node 21:107, 1440 × 457. */
.home .ec-home-works {
  min-height: 457px;
  padding-block: 72px;
  background: #f7f7f4;
}

.home .ec-home-works > .ec-shell {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.home .ec-home-works .ec-eyebrow {
  color: #379a97;
}

.home .ec-home-works__intro {
  display: grid;
  grid-template-columns: 620px 604px;
  gap: 72px;
  align-items: end;
}

.home .ec-home-works .ec-section-title {
  width: 620px;
  max-width: none;
  color: #00263e;
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -3.6px;
}

.home .ec-home-works .ec-intro {
  width: 604px;
  max-width: none;
  padding-bottom: 0;
  color: #506a79;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.home .ec-home-works__principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  height: 121px;
  padding: 0;
  border-top: 1px solid #d7e0e4;
  list-style: none;
}

.home .ec-home-works__principles li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: 120px;
  padding: 20px 24px 12px;
  border-left: 1px solid #d7e0e4;
}

.home .ec-home-works__principles li:first-child {
  padding-left: 0;
  border-left: 0;
}

.home .ec-home-works__principles span {
  color: #379a97;
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
}

.home .ec-home-works__principles strong {
  color: #00263e;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -.4px;
}

/* Desktop 1440: Figma node 21:124, 1440 × 812. */
.home .ec-home-help {
  min-height: 812px;
  padding-block: 96px;
  background: #00263e;
  color: #fff;
}

.home .ec-home-help > .ec-shell {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.home .ec-home-help .ec-eyebrow {
  color: #ff8200;
}

.home .ec-home-help__grid {
  display: grid;
  grid-template-columns: 520px 640px;
  gap: 64px;
  align-items: start;
  overflow: hidden;
}

.home .ec-home-help__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 520px;
}

.home .ec-home-help .ec-section-title {
  width: 520px;
  max-width: none;
  color: #fff;
  font-size: 60.48px;
  font-weight: 700;
  line-height: 59.27px;
  letter-spacing: -3.63px;
}

.home .ec-home-help .ec-intro {
  width: 520px;
  max-width: none;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.home .ec-home-help__copy .ec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home .ec-home-help .ec-button {
  height: 50px;
  min-height: 50px;
  padding: 15px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
}

.home .ec-home-help__copy .ec-button:first-child,
.home .ec-home-enquiry .ec-button {
  border-color: #ff8200;
  background: #ff8200;
  color: #fff;
}

.home .ec-home-help__copy .ec-button--quiet {
  border-color: #d7e0e4;
  background: #fff;
  color: #00263e;
}

.home .ec-home-enquiry {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 640px;
  max-width: 640px;
  padding: 32px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: #00263e;
}

.home .ec-home-enquiry h3 {
  width: 100%;
  color: #00263e;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -1.4px;
}

.home .ec-home-enquiry label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  color: #00263e;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.home .ec-home-enquiry :where(input, textarea) {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  resize: none;
  border: 1px solid #d7e0e4;
  border-radius: 14px;
  background: #fff;
  color: #00263e;
  font: inherit;
}

.home .ec-home-enquiry .ec-button {
  align-self: flex-start;
}

@media (max-width: 1100px) and (min-width: 768px) {
  .home .ec-home-about__grid,
  .home .ec-home-works__intro,
  .home .ec-home-help__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px;
  }

  .home .ec-home-about__copy,
  .home .ec-home-about .ec-section-title,
  .home .ec-home-about .ec-intro,
  .home .ec-home-about__links,
  .home .ec-home-about__visual,
  .home .ec-home-works .ec-section-title,
  .home .ec-home-works .ec-intro,
  .home .ec-home-help__copy,
  .home .ec-home-help .ec-section-title,
  .home .ec-home-help .ec-intro,
  .home .ec-home-enquiry {
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* Mobile 390: Figma node 21:154, 390 × 629. */
  .home .ec-home-about {
    min-height: 629px;
    padding-block: 56px;
  }

  .home .ec-home-about > .ec-shell,
  .home .ec-home-works > .ec-shell,
  .home .ec-home-help > .ec-shell {
    padding-inline: 24px;
  }

  .home .ec-home-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .home .ec-home-about__copy {
    display: contents;
  }

  .home .ec-home-about__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-row: 1;
  }

  .home .ec-home-about .ec-section-title {
    width: 342px;
    font-size: 40px;
    line-height: 43px;
    letter-spacing: -2.1px;
    white-space: nowrap;
  }

  .home .ec-home-about .ec-intro {
    width: 342px;
    font-size: 18px;
    line-height: 28px;
  }

  .home .ec-home-about__visual {
    grid-row: 2;
    width: 342px;
    height: 228px;
  }

  .home .ec-home-about__links {
    grid-row: 3;
    gap: 28px;
    width: 342px;
    line-height: 22px;
  }

  .home .ec-home-about__links a:nth-child(3) {
    display: none;
  }

  /* Mobile 390: Figma node 21:193, 390 × 584. */
  .home .ec-home-works {
    min-height: 584px;
    padding-block: 56px;
  }

  .home .ec-home-works > .ec-shell {
    gap: 24px;
  }

  .home .ec-home-works__intro {
    display: contents;
  }

  .home .ec-home-works .ec-section-title {
    width: 342px;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -1.7px;
  }

  .home .ec-home-works .ec-intro {
    width: 342px;
    font-size: 18px;
    line-height: 28px;
  }

  .home .ec-home-works__principles {
    display: flex;
    flex-direction: column;
    width: 342px;
    height: 224px;
    border-top: 0;
  }

  .home .ec-home-works__principles li,
  .home .ec-home-works__principles li:first-child {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    height: 56px;
    min-height: 56px;
    padding: 15px 0;
    border-top: 1px solid #d7e0e4;
    border-left: 0;
  }

  .home .ec-home-works__principles span {
    width: 26px;
    font-size: 15px;
    line-height: 22px;
  }

  .home .ec-home-works__principles strong {
    width: 304px;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -.3px;
  }

  /* Mobile 390: Figma node 21:210, 390 × 1186. */
  .home .ec-home-help {
    min-height: 1186px;
    padding-block: 64px;
  }

  .home .ec-home-help > .ec-shell {
    gap: 42px;
  }

  .home .ec-home-help__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 342px;
    overflow: visible;
  }

  .home .ec-home-help__copy {
    gap: 24px;
    width: 342px;
    height: 376px;
    overflow: hidden;
  }

  .home .ec-home-help .ec-section-title {
    width: 342px;
    font-size: 40px;
    line-height: 43px;
    letter-spacing: -1.8px;
  }

  .home .ec-home-help .ec-intro {
    width: 342px;
    font-size: 20px;
    line-height: 32px;
  }

  .home .ec-home-help__copy .ec-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .home .ec-home-enquiry {
    gap: 12px;
    width: 342px;
    max-width: 342px;
    padding: 32px 20px;
  }

  .home .ec-home-enquiry h3 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -1.4px;
  }
}

/* Homepage-only WCAG contrast fix: light-surface eyebrows. */
body.home :is(.ec-hero, .ec-journeys, .ec-essential, .ec-guides, .ec-home-about) p.ec-eyebrow {
  color: #bd4b00;
}

/* Homepage-only WCAG contrast fix: orange action surfaces and closing CTA. */
body.home :is(.ec-hero, .ec-search-panel) .ec-button,
body.home .ec-home-help__copy .ec-button:first-child,
body.home .ec-home-enquiry .ec-button {
  border-color: #bd4b00;
  background: #bd4b00;
  color: #fff;
}

body.home .ec-final {
  background: #bd4b00;
}

/* Homepage-only WCAG contrast fix: orange and teal text on light surfaces. */
body.home .ec-guide__index {
  color: #bd4b00;
}

body.home .ec-guide .ec-arrow-link,
body.home .ec-guide .ec-arrow-link::after,
body.home .ec-home-about__links a {
  color: #2f817e;
}

body.home .ec-home-works .ec-eyebrow,
body.home .ec-home-works__principles span {
  color: #2d7b78;
}

/*
 * Production compatibility debt (2026-09-27).
 * These Homepage-only resets neutralise three inherited rules that exist in
 * production style.css 38ca3ff8… but not staging style.css a5397140….
 * Remove this block after the global stylesheets are reconciled and parity is
 * re-verified at 1440 and 390.
 */
body.home .ec-home-works .ec-intro {
  margin-bottom: 0;
}

body.home .ec-home-enquiry h3 {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  body.home .ec-home-about__links {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  body.home .ec-home-about__links a:nth-child(3) {
    display: none;
  }
}