/*
 * ShuiYiYuan homepage master v18
 *
 * This file is intentionally loaded after styles.css and site-layout-v1.css.
 * It only controls the homepage. Removing this stylesheet restores the
 * previous homepage layout without affecting service or resource pages.
 *
 * Layout contract:
 * - section backgrounds may span the viewport;
 * - all meaningful homepage content shares one 1792px centered shell;
 * - reading widths may be narrower, but always start on the shell grid;
 * - desktop, tablet and mobile use one breakpoint system.
 */

html:has(> body.global-tech-page[data-page="home"]) >
  body.global-tech-page.global-tech-page.global-tech-page[data-page="home"] {
  --home-master-max: 1792px;
  --home-master-gutter: 72px;
  --home-master-edge: max(
    var(--home-master-gutter),
    calc((100% - var(--home-master-max)) / 2)
  );
  --home-master-section-y: clamp(76px, 5vw, 96px);
  --home-master-heading-gap: 38px;
  --home-master-column-gap: clamp(44px, 4vw, 72px);
}

html:has(> body.global-tech-page[data-page="home"]) >
  body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
  main,
html:has(> body.global-tech-page[data-page="home"]) >
  body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
  main
  > section {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/*
 * Standard homepage sections.
 * Each section owns the full-width background; its direct content uses the
 * same computed left and right edge.
 */
@media (min-width: 1181px) {
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    ) {
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    )
    > :is(
      .section-head,
      .buyer-grid,
      .service-grid-six,
      .capability-grid,
      .application-topic-grid,
      .project-grid,
      .faq-grid
    ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    )
    > .section-head {
    margin-bottom: var(--home-master-heading-gap) !important;
  }

  /*
   * Hero: the copy and image now end on the same shell used by the sections
   * below instead of using an independent 64/134px canvas.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: var(--home-master-column-gap) !important;
    min-height: 700px !important;
    padding:
      64px
      var(--home-master-edge)
      124px !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero-content {
    width: 100% !important;
    max-width: 780px !important;
    margin: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero::after {
    inset:
      54px
      var(--home-master-edge)
      auto
      calc(50% + 24px) !important;
    width: auto !important;
    height: 624px !important;
    background-position: center right !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  /*
   * The hero artwork is a complete engineering composition, not a texture.
   * Keep the whole 1672 × 941 frame visible so the formed tube is never
   * cropped by the narrower right-hand column.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero-media
    :is(.asset-picture, img) {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1672 / 941 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero-media
    img {
    object-fit: contain !important;
    object-position: center !important;
  }

  /*
   * Process: copy and six-step flow are one shell-level grid.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-ribbon {
    grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) !important;
    gap: var(--home-master-column-gap) !important;
    min-height: 0 !important;
    padding:
      84px
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-ribbon-copy,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-flow {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-flow {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.35vw, 26px) !important;
  }

  /*
   * Feasibility review: remove the floating inset card geometry. The section
   * background remains full bleed while both columns sit on the master shell.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage {
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr) !important;
    gap: var(--home-master-column-gap) !important;
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage
    > :is(.section-head, .tech-copy) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage
    .section-head {
    padding-left: 22px !important;
  }

  /*
   * Capability strip: its six cells use the same shell rather than running
   * from 64px to the opposite viewport edge.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .capability-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    padding:
      0
      var(--home-master-edge) !important;
  }

  /*
   * Detailed capability table: heading, explanatory copy and table all stay
   * inside the same shell.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    #specs {
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    #specs
    .specs-layout {
    grid-template-columns: minmax(320px, .36fr) minmax(0, 1fr) !important;
    column-gap: var(--home-master-column-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /*
   * Project section: the wrapper, feature and three supporting cards no
   * longer center themselves independently.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .projects
    :is(.project-feature, .project-mini-grid) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .project-section-head {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr) !important;
    align-items: end !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .section-head-actions {
    align-self: end !important;
    padding-top: 0 !important;
  }

  /*
   * FAQ: five questions become two balanced rows plus a full-width final
   * question instead of leaving a visibly empty card position.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .faq-grid
    details:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /*
   * RFQ: background remains full width, but copy and form now share the same
   * master shell as FAQ and every section above.
   */
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact {
    grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr) !important;
    gap: var(--home-master-column-gap) !important;
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact
    > :is(.contact-copy, .quote-form) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/*
 * Narrow desktop: keep the shell, but change the six-step row before text
 * becomes cramped.
 */
@media (min-width: 1181px) and (max-width: 1350px) {
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"] {
    --home-master-gutter: 56px;
    --home-master-column-gap: 44px;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-ribbon {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px 24px !important;
  }
}

/*
 * Tablet master: one 32px edge and deliberate one/two-column grids.
 */
@media (min-width: 768px) and (max-width: 1180px) {
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"] {
    --home-master-gutter: 32px;
    --home-master-edge: var(--home-master-gutter);
    --home-master-section-y: 64px;
    --home-master-heading-gap: 30px;
    --home-master-column-gap: 32px;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq,
      #specs
    ) {
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    )
    > :is(
      .section-head,
      .buyer-grid,
      .service-grid-six,
      .capability-grid,
      .application-topic-grid,
      .project-grid,
      .faq-grid
    ),
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      #specs .specs-layout,
      .projects .project-feature,
      .projects .project-mini-grid
    ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    )
    > .section-head {
    margin-bottom: var(--home-master-heading-gap) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero {
    padding:
      64px
      var(--home-master-edge)
      54px !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero
    > :is(.hero-content, .hero-media) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-ribbon {
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage
    > :is(.section-head, .tech-copy) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .capability-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding:
      0
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    #specs
    .specs-layout,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact {
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact
    > :is(.contact-copy, .quote-form) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .faq-grid
    details:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
}

/*
 * Mobile master: every module shares one 18px edge and one-column content.
 */
@media (max-width: 767px) {
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"] {
    --home-master-gutter: 18px;
    --home-master-edge: var(--home-master-gutter);
    --home-master-section-y: 48px;
    --home-master-heading-gap: 24px;
    --home-master-column-gap: 24px;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq,
      #specs
    ) {
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    )
    > :is(
      .section-head,
      .buyer-grid,
      .service-grid-six,
      .capability-grid,
      .application-topic-grid,
      .project-grid,
      .faq-grid
    ),
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      #specs .specs-layout,
      .projects .project-feature,
      .projects .project-mini-grid
    ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    :is(
      .buyer-path,
      .services,
      .capabilities,
      .applications,
      .projects,
      .faq
    )
    > .section-head {
    margin-bottom: var(--home-master-heading-gap) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero {
    padding:
      46px
      var(--home-master-edge)
      42px !important;
  }

  html:lang(zh):has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero
    h1,
  html:lang(zh):has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero
    h1
    span,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero
    h1,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .hero
    h1
    span {
    font-size: clamp(31px, 7.7vw, 36px) !important;
    line-height: 1.16 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .process-ribbon,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    padding:
      var(--home-master-section-y)
      var(--home-master-edge) !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .tech-advantage
    > :is(.section-head, .tech-copy),
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .contact
    > :is(.contact-copy, .quote-form) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .capability-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding:
      0
      var(--home-master-edge) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .faq-grid,
  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    #specs
    .specs-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:has(> body.global-tech-page[data-page="home"]) >
    body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
    .faq-grid
    details:last-child:nth-child(odd) {
    grid-column: auto !important;
  }
}

/*
 * Hero image integrity rule for every breakpoint.
 * The 16:9 engineering artwork must always be shown in full.
 */
html:has(> body.global-tech-page[data-page="home"]) >
  body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
  .hero-media
  :is(.asset-picture, img) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1672 / 941 !important;
}

html:has(> body.global-tech-page[data-page="home"]) >
  body.global-tech-page.global-tech-page.global-tech-page[data-page="home"]
  .hero-media
  img {
  object-fit: contain !important;
  object-position: center !important;
}