/*
 * 2026-09-04 approved UI integration.
 * The rules below preserve the exact cascade of the confirmed preview.
 */

/* Complete, portable image mappings. */
.a .product-row:nth-child(1) .fake-img,
.b .products .card:nth-child(1) .fake-img,
.c .productcards .card:nth-child(1) .fake-img {
  background-image: url('../images/banners/pu-02-floor.png') !important;
}

.a .product-row:nth-child(2) .fake-img,
.b .products .card:nth-child(2) .fake-img,
.c .productcards .card:nth-child(2) .fake-img {
  background-image: url('../images/banners/epoxy-02-logistics.png') !important;
}

.a .product-row:nth-child(3) .fake-img,
.b .products .card:nth-child(3) .fake-img,
.c .productcards .card:nth-child(3) .fake-img {
  background-image: url('../images/banners/waterbased-02-steel.png') !important;
}

.a .product-row:nth-child(4) .fake-img,
.b .products .card:nth-child(4) .fake-img,
.c .productcards .card:nth-child(4) .fake-img {
  background-image: url('../images/banners/putty-02-precast.png') !important;
}

.a .product-stage:nth-of-type(2) .fake-img { background-image: url('../images/banners/pu-01-roof.png') !important; }
.a .product-stage:nth-of-type(3) .fake-img { background-image: url('../images/banners/epoxy-01-manufacturing.png') !important; }
.a .product-stage:nth-of-type(4) .fake-img { background-image: url('../images/banners/waterbased-01-facade.png') !important; }
.a .product-stage:nth-of-type(5) .fake-img { background-image: url('../images/banners/putty-01-civil.png') !important; }

.a .cases .card:nth-child(1) .fake-img,
.b .applications .card:nth-child(1) .fake-img,
.c .usecases .card:nth-child(1) .fake-img { background-image: url('../images/b01.jpg') !important; }

.a .cases .card:nth-child(2) .fake-img,
.b .applications .card:nth-child(2) .fake-img,
.c .usecases .card:nth-child(2) .fake-img { background-image: url('../images/b02.jpg') !important; }

.a .cases .card:nth-child(3) .fake-img,
.b .applications .card:nth-child(3) .fake-img,
.c .usecases .card:nth-child(3) .fake-img { background-image: url('../images/b03.jpg') !important; }

.a .cases .card:nth-child(4) .fake-img,
.b .applications .card:nth-child(4) .fake-img,
.c .usecases .card:nth-child(4) .fake-img { background-image: url('../images/b04.jpg') !important; }

.b .projects .card:nth-child(1) .fake-img { background-image: url('../images/w01.jpg') !important; }
.b .projects .card:nth-child(2) .fake-img { background-image: url('../images/w02.jpg') !important; }
.b .projects .card:nth-child(3) .fake-img { background-image: url('../images/w03.jpg') !important; }
.b .projects .card:nth-child(4) .fake-img { background-image: url('../images/w04.jpg') !important; }
.b .stats > .fake-img { background-image: url('../images/4.jpg') !important; }
.c .about-visual { background-image: url('../images/hero-building.png') !important; }

@media (max-width: 640px) {
  .a .product-row .texture {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: 180px;
    min-height: 180px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Text collision safeguards. */
.concept :is(
  .hero-main,
  .body,
  .copy,
  .headrow,
  .card,
  .selector,
  .about,
  .contactbar,
  .production-contact,
  .contact-grid,
  .footer-grid,
  .wire-controlbar,
  .wire-tabs,
  .wire-tab
) > * {
  min-width: 0;
}

.concept :is(h1, h2, h3, h4, p, li, a, button, label, strong, th, td, .kicker, .tag) {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.concept h1,
.concept h2,
.concept h3,
.concept h4 {
  line-height: 1.2;
}

.concept .hero h1,
.concept .section-title,
.a .about h2,
.production-contact h2 {
  line-height: 1.12;
}

.wire-copy h2,
.b .wire-copy h2,
.c .wire-copy h2 {
  line-height: 1.15;
}

.concept .num,
.b .side .num {
  line-height: 1;
}

.btn,
.wire-tab,
.wire-counter,
.contact-submit,
.form-field label {
  line-height: 1.4;
}

@media (max-width: 760px) {
  .concept .hero h1,
  .concept .section-title,
  .a .about h2,
  .production-contact h2 {
    line-height: 1.16;
  }

  .wire-copy h2,
  .b .wire-copy h2,
  .c .wire-copy h2 {
    line-height: 1.18;
  }
}

/* Fine UI refinement and number/Chinese-label rhythm. */
.concept {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.concept p {
  line-height: 1.75;
}

.concept h2,
.concept h3,
.concept h4 {
  letter-spacing: -.025em;
}

.kicker,
.tag {
  line-height: 1.55;
  font-weight: 700;
}

.kicker {
  letter-spacing: .18em;
}

.tag {
  letter-spacing: .1em;
}

.concept .nav {
  min-height: 70px;
}

.concept .navlinks a {
  position: relative;
  padding: 5px 0;
  letter-spacing: .025em;
}

.btn {
  min-height: 48px;
  padding: 13px 20px;
  gap: 18px;
  line-height: 1.35;
  letter-spacing: .035em;
}

.wire-copy span {
  letter-spacing: .18em;
}

.wire-copy h2 {
  margin-top: 6px;
  margin-bottom: 7px;
}

.wire-copy p {
  line-height: 1.55;
  letter-spacing: .055em;
}

.wire-tab {
  gap: 12px;
  padding: 11px 14px;
}

.wire-tab span {
  min-width: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.wire-tab b {
  line-height: 1.35;
}

.wire-counter {
  letter-spacing: .05em;
}

.wire-control {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Concept A — warm editorial spacing and material hierarchy. */
.a .hero-main {
  gap: clamp(44px,5vw,76px);
}

.a .product-row {
  grid-template-columns: 140px minmax(0,.9fr) minmax(320px,1.1fr);
  min-height: 168px;
}

.a .product-row .n {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 26px 0 34px;
  border-right: 1px solid rgba(17,17,17,.08);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
}

.a .product-row > :nth-child(2) {
  padding: 26px clamp(28px,3vw,44px);
}

.a .product-row h3 {
  margin: 7px 0 8px;
}

.a .product-row p {
  margin: 0;
  color: #595959;
  font-size: 14px;
}

.a .product-row .texture {
  min-height: 168px;
}

.a .product-stage .copy {
  padding-top: 64px;
  padding-bottom: 64px;
}

.a .product-stage h2 {
  margin: .16em 0 .22em;
}

.a .selector {
  gap: clamp(48px,6vw,88px);
}

.a th {
  color: #555;
  font-size: 12px;
  letter-spacing: .08em;
}

.a .cases .card h3 {
  margin: 20px 18px 7px;
}

.a .cases .card p {
  margin: 0 18px;
  color: #5f5f5f;
}

.a .about .card {
  padding: 28px;
}

.a .cta {
  border: 1px solid #2f3532;
}

/* Concept B — strict catalogue grid with refined spacing. */
.b .nav {
  padding-top: 18px;
  padding-bottom: 18px;
}

.b .side {
  padding: 38px 28px;
}

.b .side .num {
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}

.b .side .orange-line {
  margin: 21px 0 25px;
}

.b .side h3 {
  margin: 0 0 11px;
  line-height: 1.4;
}

.b .side p {
  margin: 0;
  color: #555;
}

.b .body {
  padding: 38px;
}

.b .products .card {
  padding: 26px;
}

.b .products .tag {
  margin-bottom: 13px;
}

.b .products h3 {
  margin: 0 0 16px;
}

.b .products .fake-img {
  margin-bottom: 17px;
}

.b .products p {
  margin-bottom: 0;
  color: #4f4f4f;
}

.b .applications h3,
.b .projects h3 {
  margin-top: 19px;
  margin-bottom: 8px;
}

.b .applications p,
.b .projects p {
  margin-top: 0;
  color: #555;
}

.b .process .card {
  padding: 26px;
}

.b .process .card > b {
  display: block;
  color: #6a6a6a;
  font-size: 12px;
  letter-spacing: .12em;
}

.b .process h3 {
  margin: 0 0 8px;
}

.b .process p {
  margin: 0;
  color: #555;
}

.b .stats > div:first-child {
  padding-right: 12px;
}

.b .contactbar {
  padding: 54px;
}

/* Concept C — luminous cards and clear number-to-label rhythm. */
.c .headrow {
  margin-bottom: 40px;
}

.c .headrow > div {
  min-width: 0;
}

.c .productcards,
.c .advantages,
.c .usecases {
  gap: 16px;
}

.c .productcards .card {
  padding: 27px;
  background: linear-gradient(180deg,rgba(12,44,65,.94),rgba(4,12,21,.98));
  box-shadow: inset 0 1px 0 rgba(190,239,255,.06);
}

.c .productcards .tag {
  margin-bottom: 13px;
}

.c .productcards h3 {
  margin: 0 0 18px;
}

.c .productcards .fake-img {
  margin-bottom: 17px;
}

.c .productcards p {
  margin: 0;
}

.c .advantages .card {
  padding: 28px 20px;
  box-shadow: inset 0 1px 0 rgba(190,239,255,.06);
}

.c .advantages h3 {
  margin: 0 0 9px;
}

.c .advantages p {
  margin: 0;
  color: #b7cedd;
}

.c .usecases h3 {
  margin-top: 20px;
  margin-bottom: 0;
}

.c .step .hex {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.c .step h3 {
  margin: 24px 0 8px;
}

.c .step p {
  margin: 0;
  color: #a9c5d6;
}

.c .stat-c {
  padding: 25px 22px;
  line-height: 1.65;
}

.c .stat-c b {
  display: inline-block;
  margin-bottom: 5px;
}

/* Shared contact and footer details. */
.production-contact {
  row-gap: 46px;
}

.production-contact .contact-lead {
  margin-bottom: 0;
}

.contact-details {
  margin-top: 34px;
}

.contact-details li {
  padding: 14px 0;
}

.contact-details span {
  margin-bottom: 7px;
}

.contact-form {
  box-shadow: 0 18px 55px rgba(17,17,17,.055);
}

.contact-grid {
  gap: 22px;
}

.form-field label {
  margin-bottom: 9px;
  letter-spacing: .025em;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding-left: 14px;
  padding-right: 14px;
  background: rgba(255,255,255,.22);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 0 0 1px currentColor;
}

.contact-submit {
  letter-spacing: .04em;
}

.footer-grid {
  column-gap: clamp(28px,4vw,56px);
}

.footer-grid p {
  margin-top: 12px;
}

@media (max-width: 980px) {
  .a .hero-main {
    gap: 38px;
  }

  .a .product-row {
    grid-template-columns: 118px minmax(0,.9fr) minmax(280px,1.1fr);
  }

  .a .product-row .n {
    padding-left: 26px;
    padding-right: 22px;
  }

  .b .body {
    padding: 32px;
  }
}

@media (max-width: 760px) {
  .wire-tab {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .wire-tab span {
    margin-bottom: 5px;
  }

  .wire-tab b {
    line-height: 1.3;
  }

  .a .product-row {
    grid-template-columns: 78px minmax(0,1fr);
    min-height: 0;
  }

  .a .product-row .n {
    align-items: flex-start;
    padding: 31px 0 0 12px;
    border-right-color: rgba(17,17,17,.1);
    font-size: 36px;
  }

  .a .product-row > :nth-child(2) {
    padding: 27px 16px 25px 14px;
  }

  .a .product-row h3 {
    margin-top: 7px;
    font-size: 22px;
  }

  .a .product-row .texture {
    min-height: 190px;
    height: 190px;
  }

  .b .side {
    padding: 22px 18px 24px;
  }

  .b .side .orange-line {
    margin: 17px 0 20px;
  }

  .b .body {
    padding: 26px 18px;
  }

  .b .products .card,
  .b .process .card {
    padding: 24px 20px;
  }

  .b .contactbar {
    padding: 38px 20px;
  }

  .c .headrow {
    margin-bottom: 32px;
  }

  .c .productcards .card,
  .c .advantages .card {
    padding: 24px 20px;
  }

  .c .step h3 {
    margin-top: 21px;
  }

  .production-contact {
    row-gap: 38px;
  }

  .contact-form {
    padding: 23px 18px;
  }
}

@media (max-width: 390px) {
  .a .product-row {
    grid-template-columns: 76px minmax(0,1fr);
  }

  .a .product-row .n {
    padding-left: 11px;
    font-size: 35px;
  }

  .a .product-row > :nth-child(2) {
    padding-left: 15px;
  }
}

/* Minimum visible font size: 0.85rem. */
.concept .navlinks,
.concept .kicker,
.concept .tag,
.wire-copy span,
.wire-copy p,
.wire-tab span,
.wire-tab b,
.wire-counter,
.contact-details span,
.form-field label,
.a th,
.b .process .card > b {
  font-size: .85rem;
}

.helper,
.switcher button,
.preview-switcher .tabs a {
  font-size: .85rem;
}

:root {
  --banner-caption-height: 138px;
  --banner-controls-height: 78px;
}

.wire-copy,
.b .wire-copy,
.c .wire-copy {
  height: var(--banner-caption-height);
  padding-top: 14px;
  padding-bottom: 14px;
}

.wire-controlbar,
.b .wire-controlbar,
.c .wire-controlbar {
  min-height: var(--banner-controls-height);
}

@media (max-width: 760px) {
  :root {
    --banner-caption-height: 122px;
    --banner-controls-height: 134px;
  }

  .wire-tab {
    min-height: 70px;
  }

  .wire-transport {
    min-height: 64px;
  }
}

/* Balanced spacing after the hero carousel. */
.a .hero {
  min-height: auto;
  padding-bottom: 52px;
}

@media (min-width: 981px) and (max-width: 1100px) {
  .b .hero .body {
    grid-template-columns: 1fr;
  }
}

.c .hero {
  min-height: auto;
  padding-bottom: 56px;
}

@media (max-width: 980px) {
  .a .hero {
    padding-bottom: 52px;
  }

  .c .hero {
    padding-bottom: 60px;
  }
}

@media (max-width: 640px) {
  .a .hero {
    padding-bottom: 34px;
  }

  .c .hero {
    padding-bottom: 44px;
  }
}

.a .hero {
  padding-bottom: 76px;
}

.b .hero .body {
  padding-bottom: 64px;
}

.c .hero {
  padding-bottom: 72px;
}

@media (max-width: 980px) {
  .a .hero,
  .c .hero {
    padding-bottom: 72px;
  }

  .b .hero .body {
    padding-bottom: 56px;
  }
}

@media (max-width: 640px) {
  .a .hero {
    padding-bottom: 46px;
  }

  .b .hero .body {
    padding-bottom: 44px;
  }

  .c .hero {
    padding-bottom: 52px;
  }
}

/* Non-negotiable rule: show every source frame containing people in full. */
.wire-slide img,
.a .wire-slide img,
.b .wire-slide img,
.c .wire-slide img {
  object-fit: contain !important;
  object-position: center !important;
}

.a .product-row .texture,
.a .product-stage .fake-img,
.b .products .card .fake-img,
.c .productcards .card .fake-img {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.a .product-row .texture {
  background-color: #252a28;
}

.a .product-stage .fake-img {
  background-color: #0e1110;
}

.b .products .card .fake-img {
  background-color: #e8e9e9;
}

.c .productcards .card .fake-img {
  background-color: #071827;
}

.b .products .card .fake-img,
.c .productcards .card .fake-img {
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 1;
}

@media (max-width: 640px) {
  .a .product-stage .fake-img {
    min-height: 180px;
  }
}