/* 7.1 UI layer. Source content and the inherited production bundle stay intact. */
:root {
  --page-gutter: clamp(20px, 3.5vw, 48px);
  --section-space: clamp(64px, 6vw, 80px);
  --ui-column-gap: clamp(28px, 4vw, 56px);
}

/* Shared edges, readable measures and a consistent heading hierarchy. */
:is(.section-heading, .directory-heading) { max-width: 820px; }
.section-heading > p:not(.eyebrow) { max-width: 68ch; }
.section-heading-centered { margin-inline: 0; text-align: left; }
:is(.section-heading, .directory-heading) h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.section-heading .eyebrow { margin-bottom: 16px; }
.section-heading h2 { margin-bottom: 24px; }
.section-heading > p:last-child { margin-bottom: 0; }
.buyer-v70 h2 { max-width: none; }
.button { min-height: 48px; white-space: normal; }
.header-inner { align-items: center; }
.footer-grid { align-items: start; gap: 32px; }
.footer-grid h2 { margin-top: 0; }

/* Text and image occupy complementary areas rather than competing at the center. */
:is(.hero, .capability-hero, .industry-hero, .quality-v30-hero, .directory-hero) {
  min-height: 0;
  align-items: center;
}
:is(.hero-content, .capability-hero-content, .industry-hero-content, .quality-v30-hero-content, .directory-hero-content) {
  max-width: var(--container-width);
  padding-block: 144px 72px;
}
:is(.hero, .capability-hero, .industry-hero, .quality-v30-hero, .directory-hero) h1 {
  max-width: 760px;
  font-size: clamp(44px, 4.45vw, 64px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin-block: 0 24px;
  text-wrap: balance;
  overflow-wrap: normal;
}
.hero h1 { max-width: 800px; }
:is(.hero-description, .capability-hero-description, .industry-hero-description, .quality-v30-lead) {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 32px;
}
.directory-hero-content > p:last-child { max-width: 62ch; }
.breadcrumb { margin-bottom: 40px; }
.quality-v30-hero .breadcrumb { margin-bottom: 40px; }
.hero-actions { gap: 16px; align-items: stretch; }
.hero-actions .button { flex: 0 1 auto; min-width: 176px; }
.answer-brief-grid { gap: var(--ui-column-gap); align-items: start; }
.answer-brief-links { gap: 12px 20px; margin-top: 24px; }
.answer-brief-links a { line-height: 1.5; }

/* Corresponding rows share content-driven baselines; mobile removes the row grouping. */
@supports (grid-template-rows: subgrid) {
  .part-grid-v70:not(.single-part-v70) { row-gap: 24px; }
  .part-grid-v70:not(.single-part-v70) > .part-card-v70 {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .part-grid-v70:not(.single-part-v70) .part-card-copy-v70 {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .part-grid-v70:not(.single-part-v70) .buyer-links-v70 { align-self: end; }
  .capability-grid > .capability-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .capability-card-link {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .capability-card-content {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .directory-grid > .directory-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .directory-card-content {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.part-card-copy-v70 { padding: 24px; }
.part-card-copy-v70 .buyer-links-v70 { display: grid; gap: 12px; padding-top: 16px; }
.part-card-copy-v70 h3 { margin-bottom: 16px; }
.part-card-copy-v70 p { margin-bottom: 16px; }
.capabilities .section-heading { margin-inline: 0; text-align: left; margin-bottom: 32px; }
.capability-card :is(h3, p) { min-height: 0; }
.capability-card h3 { font-size: 18px; line-height: 1.35; margin-bottom: 16px; }
.capability-card p { font-size: 14px; line-height: 1.65; margin-bottom: 24px; }
.capability-card-cta { align-self: end; margin-top: 0; }
.capability-card-link > img { aspect-ratio: 4 / 3; height: auto; }
.directory-card h3 { font-size: 22px; line-height: 1.3; margin-bottom: 16px; }
.directory-card p { margin-bottom: 24px; }
.directory-card strong { align-self: end; }
:is(.order-steps-v70, .response-grid-v70) h3 { text-wrap: balance; }

/* Shared section title, aligned column starts and consistent internal card starts. */
#our-story .company-story-heading { max-width: 900px; margin-bottom: 32px; }
.company-intro-grid.company-story-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--ui-column-gap);
  align-items: stretch;
}
.company-story-grid > .company-stat-grid {
  align-self: stretch;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.company-story-grid .company-stat {
  min-height: 0;
  padding: 32px 24px;
  justify-content: start;
}
.company-story-grid .company-stat strong { font-size: 25px; line-height: 1.25; margin-bottom: 16px; }
.company-story-grid .company-stat span { font-size: 14px; font-weight: 500; line-height: 1.65; }
.company-intro-copy p { margin-bottom: 24px; }
:is(.factory-grid, .capability-overview-layout, .materials-layout, .quality-system-grid, .industry-quality-grid) {
  gap: var(--ui-column-gap);
  align-items: start;
}
.buyer-split-v70 { gap: var(--ui-column-gap); align-items: start; }
.single-part-v70 .part-card-v70 { align-items: stretch; }
.single-part-v70 .part-card-copy-v70 { padding: 32px; }
.buyer-callout-v70 { gap: 24px; }
.supplier-profile-v70 { gap: 24px; }

/* One RFQ region, with a consistent outer and inner edge. */
#rfq-builder > .container { max-width: 940px; }
#rfq-builder .section-heading { max-width: none; }
#rfq-builder .decision-intro { max-width: 72ch; }
.rfq-layout { max-width: none; margin-inline: 0; }
.rfq-steps { gap: 16px; margin-block: 24px 32px; }
.rfq-steps li { padding: 16px 24px; }
.rfq-editor > .rfq-fields { padding: 24px; }
.rfq-details { padding: 24px; }
.rfq-fields { gap: 24px; }
.rfq-field :is(input, select, textarea) { min-height: 48px; }
.rfq-field label { line-height: 1.5; }
.rfq-help { line-height: 1.65; }
.rfq-details summary { min-height: 24px; }
.rfq-send-actions { margin-top: 24px; padding-top: 24px; }
.order-faq-v70 { max-width: 940px; }
.order-faq-v70 summary { padding-inline: 0; }
.order-faq-v70 details p { padding-inline: 0; }

@media (max-width: 1100px) {
  .part-grid-v70:not(.single-part-v70) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-grid-v70 .part-card-v70:last-child:nth-child(3) { grid-column: auto; max-width: none; }
  .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 900px) {
  .company-intro-grid.company-story-grid { grid-template-columns: 1fr; }
  .company-story-grid > .company-stat-grid { grid-template-rows: auto; }
  :is(.hero-content, .capability-hero-content, .industry-hero-content, .quality-v30-hero-content, .directory-hero-content) {
    padding-block: 120px 64px;
  }
  /* The mobile contact shortcut joins the header, leaving content unobstructed. */
  .whatsapp-contact {
    top: 12px;
    right: calc(var(--page-gutter) + 76px);
    bottom: auto;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 4px;
    gap: 0;
    justify-content: center;
    z-index: 110;
  }
  .whatsapp-contact-label { display: none; }
  .whatsapp-contact-icon { width: 34px; height: 34px; }
  .header-inner > .brand { max-width: calc(100% - 148px); }
}
@media (max-width: 800px) {
  .answer-brief-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  :root { --page-gutter: 20px; --section-space: 56px; --ui-column-gap: 28px; }
  :is(.hero-content, .capability-hero-content, .industry-hero-content, .quality-v30-hero-content, .directory-hero-content) {
    padding-block: 112px 48px;
  }
  :is(.hero, .capability-hero, .industry-hero, .quality-v30-hero, .directory-hero) h1 {
    font-size: clamp(30px, 8vw, 36px);
    max-width: 100%;
    margin-bottom: 24px;
    line-height: 1.12;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  :is(.hero-description, .capability-hero-description, .industry-hero-description, .quality-v30-lead) {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 32px;
  }
  .breadcrumb { gap: 8px; margin-bottom: 32px; }
  .quality-v30-hero .breadcrumb { margin-bottom: 32px; }
  .quality-v30-hero-overlay {
    background: linear-gradient(90deg, rgb(2 7 12 / 90%), rgb(2 7 12 / 68%)),
      linear-gradient(180deg, rgb(2 7 12 / 15%), rgb(2 7 12 / 65%));
  }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero-actions .button { width: 100%; min-width: 0; padding: 14px 20px; }
  :is(.section-heading, .directory-heading) h2 { font-size: 28px; line-height: 1.2; text-wrap: pretty; }
  .section-heading h2 { margin-bottom: 20px; }
  .section-heading .eyebrow { margin-bottom: 12px; }
  .answer-brief { padding-block: 32px; }
  .answer-brief-copy h2 { font-size: 25px; line-height: 1.2; }
  .answer-brief-links { gap: 16px 20px; }
  .buyer-v70 { padding-block: 56px; scroll-margin-top: 16px; }
  .part-grid-v70:not(.single-part-v70) { display: flex; flex-direction: column; gap: 24px; }
  .part-grid-v70:not(.single-part-v70) > .part-card-v70 { display: flex; flex-direction: column; }
  .part-grid-v70:not(.single-part-v70) .part-card-copy-v70 { display: flex; flex-direction: column; }
  .part-card-copy-v70 { padding: 24px; }
  .part-card-copy-v70 .buyer-links-v70 { margin-top: 0; padding-top: 8px; }
  .capability-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .capability-grid > .capability-card { display: block; grid-row: auto; }
  .capability-card-link { display: flex; }
  .capability-card-content { display: flex; padding: 24px; }
  .directory-grid { grid-template-columns: 1fr; }
  .directory-grid > .directory-card { display: flex; grid-row: auto; }
  .directory-card-content { display: flex; padding: 24px; }
  .capability-card :is(h3, p) { min-height: 0; }
  .company-story-grid > .company-stat-grid { grid-template-columns: 1fr; gap: 16px; }
  .company-story-grid .company-stat { padding: 24px; min-height: 0; }
  .single-part-v70 .part-card-copy-v70 { padding: 24px; }
  .single-part-v70 img { min-height: 0; height: auto; }
  .buyer-callout-v70 { padding: 24px; }
  .supplier-profile-v70 > div { padding: 24px; }
  .buyer-v70 a { overflow-wrap: break-word; }
  .footer-grid { gap: 32px; }
  .rfq-editor > .rfq-fields { padding: 20px 16px; }
  .rfq-details { padding: 20px 16px; }
  .rfq-fields { grid-template-columns: 1fr; gap: 20px; }
  .rfq-steps { flex-direction: column; gap: 8px; }
  .rfq-steps li { padding: 16px; }
  .rfq-send-actions .button { width: 100%; }
}
@media (max-width: 360px) {
  :root { --page-gutter: 16px; }
  .brand-subtitle { display: none; }
  .part-card-copy-v70, .capability-card-content { padding: 20px; }
}