/*
 * 2026-10-30 — bounded continuity pass, after process-design.css.
 * Eight named sections only. No Hero, navigation, industry, testimonials,
 * CTA, copy, font-token, button-surface or interaction overrides.
 */

/* One canvas replaces the alternating material/platform/workflow panels. */
.home :is(#materials, #why, #quality, #cases, #platform, #workflow, #resources, #faq) {
  background-color: #fff;
  border-block: 0;
}
.home #materials { background: #fff; padding-block: 100px 46px; }
.home #why { background: #fff; padding-block: 24px 62px; }
.home #quality {
  background: linear-gradient(180deg, #f5f6f4 0, #fff 96px, #fff 100%);
  padding-block: 96px 54px;
}
.home #cases { background: #fff; padding-block: 48px 100px; }
.home #platform {
  background: linear-gradient(180deg, #f6f6f3 0, #fff 100px, #fff 100%);
  padding-block: 92px 62px;
}
.home #workflow { background: #fff; padding-block: 58px 80px; }
.home #resources { background: #fff; padding-block: 72px 36px; }
.home #faq { background: #fff; padding-block: 38px 100px; }

/* Materials read as a working selection surface, not a colored section box. */
.home #materials .material-layout {
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(38px, 6vw, 84px);
}
.home #materials .material-selector-copy {
  position: relative;
  isolation: isolate;
}
.home #materials .material-selector-copy::before {
  content: "";
  position: absolute;
  inset: -22px -20px -18px -32px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 12% 35%, rgba(238,230,216,.45), rgba(247,243,236,.18) 50%, transparent 76%);
}
.home #materials .material-panel .home-media {
  height: clamp(310px, 30vw, 400px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.home #materials .material-detail { padding-top: 24px; }

/* Keep the existing panorama; remove the floating white-card boundary. */
@media (min-width: 901px) {
  .home #why .solution-layout { min-height: 600px; }
  .home #why .solution-photo {
    position: relative;
    height: 100%;
    min-height: 600px;
    border-radius: 0;
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  }
  .home #why .solution-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 23%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.84) 62%, #fff 86%);
  }
  .home #why .solution-photo img { object-position: 25% center; }
  .home #why .solution-copy {
    width: 46%;
    margin: 0;
    padding: 44px 0 44px 28px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* An explanation-led inspection spread gives the next view a different scale. */
.home #quality .quality-editorial {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .82fr);
  gap: clamp(44px, 7vw, 108px);
  align-items: start;
}
.home #quality .quality-proof { margin-top: 62px; }
.home #quality .quality-proof img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.home #quality .quality-proof figcaption { border-bottom: 0; padding-top: 20px; }
.home #quality .quality-method { border-bottom: 0; }

/* Injection stays first and dominant; secondary projects have two scales. */
.home #cases .case-editorial {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.8vw, 68px);
  align-items: start;
}
.home #cases .case-featured .home-media { width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.home #cases .home-media img { object-fit: contain; }
.home #cases .case-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}
.home #cases .case-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: 0;
  padding: 0;
}
.home #cases .case-compact .home-media { width: 100%; height: 190px; border-radius: 0; }
.home #cases .case-compact:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: 24px;
}
.home #cases .case-compact:first-child .home-media { height: 226px; }
.home #cases .case-compact .case-body { padding-block: 18px 0; }
.home #cases .case-compact:first-child .case-body { padding: 0; }

/* The platform remains a recognizable interface, not a surrounding gray slab. */
.home #platform .platform-heading {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(36px, 6vw, 80px);
  max-width: none;
  text-align: left;
  margin: 0 0 48px;
  align-items: start;
}
.home #platform .platform-heading h2 { margin: 0; text-wrap: balance; }
.home #platform .platform-heading p { margin: 0; }
.home #platform .platform-layout { gap: clamp(40px, 6vw, 80px); }
.home #platform .platform-accordions {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.home #platform .platform-interface { box-shadow: none; border-radius: 2px; }

/* Manufacturing and cooperation remain distinct, without nested card frames. */
.home #workflow .process-illustrated {
  margin-bottom: 48px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.home #workflow .process-illustrated .manufacturing-section-heading { padding: 0 0 24px; }
.home #workflow .process-illustrated .manufacturing-navigation { padding-inline: 0; border-bottom: 0; }
.home #workflow .process-illustrated .manufacturing-showcase {
  grid-template-columns: minmax(0, 1.38fr) minmax(0, .74fr);
  gap: 34px;
  margin-top: 24px;
}
.home #workflow .process-illustrated .manufacturing-visual { background: transparent; min-height: 360px; }
.home #workflow .process-illustrated .manufacturing-visual img { height: 380px; object-fit: cover; }
.home #workflow .process-illustrated .manufacturing-stage-copy { padding: 28px 0; }
.home #workflow .workflow-details { padding-block: 28px 16px; }

/* A lead technical story and two compact references replace identical rows. */
.home #resources .resource-index {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: 30px clamp(34px, 5vw, 72px);
  align-items: start;
}
.home #resources .resource-index-row {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px 24px;
  padding-block: 20px 0;
  border-top-color: #e4e9ec;
}
.home #resources .resource-index-row > .home-link { grid-column: 2; justify-self: start; }
.home #resources .resource-index-row .home-media { height: 130px; border-radius: 0; }
.home #resources .resource-index-row:first-child {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 0;
  border: 0;
}
.home #resources .resource-index-row:first-child .home-media { width: 100%; height: 320px; }
.home #resources .resource-index-row:first-child > .home-link { margin-top: -8px; }

/* FAQ continues the resource canvas instead of becoming another colored box. */
.home #faq .home-faq-layout {
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: clamp(36px, 6vw, 88px);
  padding-top: 28px;
}
.home #faq .home-faq-layout > div:first-child { align-self: start; }
.home #faq .home-faq-list { border-top: 0; }

@media (max-width: 1023px) {
  .home #cases .case-editorial { grid-template-columns: 1fr; gap: 34px; }
  .home #cases .case-featured .home-media { height: auto; }
  .home #cases .case-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .home #cases .case-compact:first-child { grid-column: auto; display: flex; gap: 0; }
  .home #cases .case-compact:first-child .home-media { height: 190px; }
  .home #cases .case-compact:first-child .case-body { padding-block: 18px 0; }
  .home #quality .quality-editorial { gap: 40px; }
}

@media (max-width: 900px) {
  .home #why .solution-layout { gap: 28px; }
  .home #why .solution-photo { height: 360px; min-height: 0; border-radius: 0; }
  .home #why .solution-copy { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .home #platform .platform-heading { display: block; }
  .home #platform .platform-heading p { margin-top: 20px; max-width: 66ch; }
}

/* Match the existing review-stage container as well as real mobile viewports. */
@media (max-width: 700px) {
  .home #materials { padding-block: 58px 30px; }
  .home #why { padding-block: 20px 44px; }
  .home #quality { padding-block: 64px 30px; }
  .home #cases { padding-block: 30px 62px; }
  .home #platform { padding-block: 64px 38px; }
  .home #workflow { padding-block: 38px 48px; }
  .home #resources { padding-block: 48px 26px; }
  .home #faq { padding-block: 26px 60px; }
  .home #materials .material-layout,
  .home #quality .quality-editorial,
  .home #platform .platform-heading,
  .home #resources .resource-index,
  .home #faq .home-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .home #materials .material-panel .home-media { height: 270px; }
  .home #quality .quality-proof { margin-top: 0; }
  .home #quality .quality-proof img { height: auto; aspect-ratio: 3 / 2; }
  .home #cases .case-secondary { display: block; }
  .home #cases .case-compact,
  .home #cases .case-compact:first-child { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 20px; margin-bottom: 24px; }
  .home #cases .case-compact .home-media,
  .home #cases .case-compact:first-child .home-media { height: 138px; }
  .home #cases .case-compact .case-body,
  .home #cases .case-compact:first-child .case-body { padding: 0; }
  .home #cases .case-featured .home-media { height: auto; }
  .home #workflow .process-illustrated .manufacturing-showcase { grid-template-columns: 1fr; gap: 0; }
  .home #workflow .process-illustrated .manufacturing-visual { min-height: 230px; }
  .home #workflow .process-illustrated .manufacturing-visual img { width: 100%; height: 270px; }
  .home #workflow .process-illustrated .manufacturing-stage-copy { padding: 24px 0 12px; }
  .home #workflow .process-illustrated .manufacturing-section-heading { padding: 0 0 20px; }
  .home #resources .resource-index-row:first-child { grid-row: auto; }
  .home #resources .resource-index-row:first-child .home-media { height: 250px; }
  .home #resources .resource-index-row { grid-template-columns: 110px minmax(0, 1fr); }
  .home #faq .home-faq-layout { padding-top: 12px; }
}

@container (max-width: 700px) {
  .home #materials { padding-block: 58px 30px; }
  .home #why { padding-block: 20px 44px; }
  .home #quality { padding-block: 64px 30px; }
  .home #cases { padding-block: 30px 62px; }
  .home #platform { padding-block: 64px 38px; }
  .home #workflow { padding-block: 38px 48px; }
  .home #resources { padding-block: 48px 26px; }
  .home #faq { padding-block: 26px 60px; }
  .home #materials .material-layout,
  .home #quality .quality-editorial,
  .home #platform .platform-heading,
  .home #resources .resource-index,
  .home #faq .home-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .home #materials .material-panel .home-media { height: 270px; }
  .home #why .solution-layout { display: grid; grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .home #why .solution-photo { grid-area: auto; height: 320px; min-height: 0; mask-image: none; }
  .home #why .solution-photo::after { display: none; }
  .home #why .solution-copy { grid-area: auto; justify-self: stretch; align-self: start; width: 100%; margin: 0; padding: 0; }
  .home #quality .quality-proof { margin-top: 0; }
  .home #quality .quality-proof img { height: auto; aspect-ratio: 3 / 2; }
  .home #cases .case-editorial { grid-template-columns: 1fr; gap: 28px; }
  .home #cases .case-secondary { display: block; }
  .home #cases .case-compact,
  .home #cases .case-compact:first-child { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-items: center; gap: 20px; margin-bottom: 24px; }
  .home #cases .case-compact .home-media,
  .home #cases .case-compact:first-child .home-media { height: 138px; }
  .home #cases .case-compact .case-body,
  .home #cases .case-compact:first-child .case-body { padding: 0; }
  .home #cases .case-featured .home-media { height: auto; }
  .home #platform .platform-heading { display: block; }
  .home #platform .platform-heading p { margin-top: 20px; }
  .home #workflow .process-illustrated .manufacturing-showcase { grid-template-columns: 1fr; gap: 0; }
  .home #workflow .process-illustrated .manufacturing-visual { min-height: 230px; }
  .home #workflow .process-illustrated .manufacturing-visual img { width: 100%; height: 270px; }
  .home #workflow .process-illustrated .manufacturing-stage-copy { padding: 24px 0 12px; }
  .home #workflow .process-illustrated .manufacturing-section-heading { padding: 0 0 20px; }
  .home #resources .resource-index-row:first-child { grid-row: auto; }
  .home #resources .resource-index-row:first-child .home-media { height: 250px; }
  .home #resources .resource-index-row { grid-template-columns: 110px minmax(0, 1fr); }
  .home #faq .home-faq-layout { padding-top: 12px; }
}
