.page-weld-joints {
  --wj-ink: #102631;
  --wj-deep: #071822;
  --wj-muted: #687982;
  --wj-line: #dce3e4;
  --wj-paper: #f6f7f3;
  --wj-red: #e8302f;
  --wj-green: #8eaa32;
  --wj-green-soft: #c6dc79;
}

.page-weld-joints :where(.weld-joints-overview,.weld-joints-features,.connection-library,.weld-joints-final) { padding-block: clamp(5rem,8vw,7.5rem); }
.page-weld-joints :where(.weld-joints-overview,.weld-joints-features,.connection-library,.weld-joints-final) h2 { font-size: clamp(2rem,3.2vw,2.5rem); line-height: 1.14; letter-spacing: -.035em; }
.page-weld-joints :where(.weld-joints-overview,.weld-joints-features,.connection-library,.weld-joints-final) h2 span { color: var(--wj-red); }

.weld-joints-banner { position: relative; overflow: hidden; background: radial-gradient(circle at 77% 21%,rgba(232,48,47,.18),transparent 30%),radial-gradient(circle at 17% 83%,rgba(142,170,50,.11),transparent 27%),linear-gradient(135deg,#07151e,#102c39 58%,#091923); }
.weld-joints-banner::after { content: ''; position: absolute; right: -8rem; bottom: -10rem; width: 29rem; height: 29rem; border: 1px solid rgba(255,255,255,.065); border-radius: 50%; box-shadow: 0 0 0 3.5rem rgba(255,255,255,.018),0 0 0 7rem rgba(255,255,255,.011); pointer-events: none; }

.weld-joints-overview { background: #fff; }
.weld-joints-overview__grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr); align-items: center; gap: clamp(3rem,7vw,7rem); }
.weld-joints-overview__copy h2 { max-width: 44rem; margin-top: 1.25rem; color: var(--wj-ink); }
.weld-joints-overview__text { margin-top: 1.45rem; }
.weld-joints-overview__text p { color: var(--wj-muted); font-size: 1rem; line-height: 1.78; }
.weld-joints-overview__text p + p { margin-top: .95rem; }
.weld-joints-overview__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.weld-joints-overview__visual { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e2e6e2; border-radius: 1.8rem; background: #f3f2ed; box-shadow: 0 26px 65px rgba(7,24,34,.1); }
.weld-joints-overview__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(7,24,34,.9),transparent 44%); pointer-events: none; }
.weld-joints-overview__visual img { width: 100%; aspect-ratio: 1.23/1; object-fit: cover; }
.weld-joints-overview__visual figcaption { position: absolute; z-index: 1; right: 1.55rem; bottom: 1.45rem; left: 1.55rem; color: #fff; }
.weld-joints-overview__visual figcaption span { color: var(--wj-green-soft); font-size: .67rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.weld-joints-overview__visual figcaption strong { display: block; max-width: 29rem; margin-top: .5rem; font-size: 1.04rem; line-height: 1.5; }

.weld-joints-proof { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 3rem; border-block: 1px solid var(--wj-line); }
.weld-joints-proof li { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); align-items: center; gap: .85rem; min-width: 0; padding: 1.2rem 1rem; }
.weld-joints-proof li + li { border-left: 1px solid var(--wj-line); }
.weld-joints-proof li > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .76rem; background: #fff0ef; color: var(--wj-red); }
.weld-joints-proof strong { display: block; color: var(--wj-ink); font-size: .82rem; line-height: 1.35; }
.weld-joints-proof small { display: block; margin-top: .22rem; color: var(--wj-muted); font-size: .68rem; line-height: 1.42; }

.weld-joints-features { position: relative; overflow: hidden; background: linear-gradient(135deg,#07151e,#102c39 64%,#091b25); color: #fff; }
.weld-joints-features__texture { position: absolute; inset: 0; opacity: .58; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(circle at 87% 14%,rgba(232,48,47,.18),transparent 30%),radial-gradient(circle at 7% 88%,rgba(142,170,50,.09),transparent 25%); background-size: 58px 58px,58px 58px,auto,auto; pointer-events: none; }
.weld-joints-features__layout { display: grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); align-items: start; gap: clamp(3rem,8vw,8rem); }
.weld-joints-features__intro h2 { margin-top: 1.25rem; }
.weld-joints-features__intro h2 span { color: var(--wj-green-soft); }
.weld-joints-features__intro > p:not(.eyebrow-dark) { margin-top: 1.35rem; color: rgba(255,255,255,.58); font-size: 1rem; line-height: 1.75; }
.weld-joints-features__list { border-top: 1px solid rgba(255,255,255,.13); }
.weld-joints-features__list article { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.weld-joints-features__list article > span { padding-top: .17rem; color: #f0716e; font-family: ui-monospace,monospace; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.weld-joints-features__list h3 { color: #fff; font-size: 1rem; line-height: 1.4; }
.weld-joints-features__list p { margin-top: .42rem; color: rgba(255,255,255,.54); font-size: .84rem; line-height: 1.66; }
.weld-joints-features__note { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .85rem; max-width: 39rem; margin: 1.35rem 0 0; border: 1px solid rgba(198,220,121,.18); border-left: 3px solid var(--wj-green); border-radius: 0 1.1rem 1.1rem 0; padding: .9rem 1rem; background: rgba(255,255,255,.045); }
.weld-joints-features__note > span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: 50%; background: rgba(142,170,50,.13); color: var(--wj-green-soft); }
.weld-joints-features__note p { color: rgba(255,255,255,.58); font-size: .84rem; line-height: 1.68; }

.connection-library { position: relative; overflow: hidden; background: var(--wj-paper); }
.connection-library__texture { position: absolute; inset: 0; opacity: .52; background-image: linear-gradient(rgba(16,38,49,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(16,38,49,.027) 1px,transparent 1px),radial-gradient(circle at 91% 9%,rgba(142,170,50,.1),transparent 24%); background-size: 54px 54px,54px 54px,auto; pointer-events: none; }
.connection-library__heading { max-width: 55rem; margin-inline: auto; text-align: center; }
.connection-library__heading h2 { margin-top: 1.25rem; color: var(--wj-ink); }
.connection-library__heading h2 > span { display: block; }
.connection-library__heading > p:last-child { max-width: 45rem; margin: 1.2rem auto 0; color: var(--wj-muted); font-size: 1rem; line-height: 1.75; }
.connection-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-top: 3rem; }
.connection-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #dfe5e6; border-radius: 1.25rem; background: #fff; box-shadow: 0 12px 28px rgba(7,24,34,.045); transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.connection-card::after { content: ''; position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg,var(--wj-red),var(--wj-green),var(--wj-red)); background-size: 220% 100%; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.connection-card:hover { transform: translateY(-5px); border-color: rgba(142,170,50,.4); box-shadow: 0 22px 46px rgba(7,24,34,.1); }
.connection-card:hover::after { transform: scaleX(1); animation: weld-joint-line 1.2s linear infinite; }
.connection-card__media { position: relative; overflow: hidden; aspect-ratio: 1.06/1; border-radius: 1.17rem 1.17rem 0 0; background: #f2f0eb; }
.connection-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1),filter .35s ease; }
.connection-card:hover .connection-card__media img { filter: saturate(1.05) contrast(1.02); transform: scale(1.018); }
.connection-card__media > span { position: absolute; z-index: 2; top: .75rem; left: .75rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid rgba(255,255,255,.66); border-radius: .62rem; background: rgba(16,38,49,.91); color: #fff; font-family: ui-monospace,monospace; font-size: .62rem; font-weight: 800; letter-spacing: .08em; box-shadow: 0 8px 20px rgba(7,24,34,.14); }
.connection-card__copy { padding: 1rem 1rem 1.15rem; }
.connection-card__copy > p { color: var(--wj-green); font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.connection-card__copy h3 { margin-top: .42rem; color: var(--wj-ink); font-size: .91rem; line-height: 1.42; }
.connection-card__copy > div { margin-top: .5rem; color: var(--wj-muted); font-size: .76rem; line-height: 1.6; }

.weld-joints-final { background: #fff; }
.weld-joints-final__panel { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3rem; overflow: hidden; border: 1px solid #dfe4e5; border-radius: 2rem; padding: clamp(2rem,5vw,4rem); background: linear-gradient(120deg,#fff,#fafafa 56%,#f2f7e5); box-shadow: 0 24px 60px rgba(7,24,34,.07); }
.weld-joints-final__panel::after { content: ''; position: absolute; right: -8rem; top: -11rem; width: 25rem; height: 25rem; border-radius: 50%; background: radial-gradient(circle,rgba(142,170,50,.17),transparent 68%); }
.weld-joints-final__panel > * { position: relative; z-index: 1; }
.weld-joints-final h2 { max-width: 52rem; margin-top: 1.1rem; color: var(--wj-ink); }
.weld-joints-final p:not(.eyebrow) { max-width: 50rem; margin-top: 1rem; color: var(--wj-muted); font-size: .95rem; line-height: 1.72; }
.weld-joints-final__actions { display: flex; min-width: 14rem; flex-direction: column; gap: .7rem; }
.weld-joints-final__actions > a:not(.weld-joints-final__email) { justify-content: center; }
.weld-joints-final__email { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .15rem; color: var(--wj-green); font-size: .78rem; font-weight: 700; transition: color .25s; }
.weld-joints-final__email:hover { color: var(--wj-red); }

@keyframes weld-joint-line { to { background-position: -220% 0; } }

@media (max-width: 1100px) {
  .weld-joints-overview__grid { grid-template-columns: minmax(0,1fr) minmax(360px,.92fr); gap: 3.5rem; }
  .connection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .page-weld-joints :where(.weld-joints-overview,.weld-joints-features,.connection-library,.weld-joints-final) { padding-block: 5rem; }
  .weld-joints-overview__grid,
  .weld-joints-features__layout { grid-template-columns: 1fr; }
  .weld-joints-overview__visual { max-width: 44rem; margin-inline: auto; }
  .weld-joints-proof { grid-template-columns: repeat(2,minmax(0,1fr)); border-left: 1px solid var(--wj-line); }
  .weld-joints-proof li { border-right: 1px solid var(--wj-line); border-bottom: 1px solid var(--wj-line); }
  .weld-joints-proof li + li { border-left: 0; }
  .weld-joints-features__layout { gap: 3rem; }
  .weld-joints-final__panel { grid-template-columns: 1fr; }
  .weld-joints-final__actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .weld-joints-final__email { width: 100%; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .connection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 639px) {
  .page-weld-joints :where(.weld-joints-overview,.weld-joints-features,.connection-library,.weld-joints-final) { padding-block: 4rem; }
  .page-weld-joints :where(.weld-joints-overview,.weld-joints-features,.connection-library,.weld-joints-final) h2 { font-size: clamp(1.75rem,8vw,2.05rem); line-height: 1.18; }
  .weld-joints-overview__grid { gap: 2.5rem; }
  .weld-joints-overview__actions { flex-direction: column; align-items: stretch; }
  .weld-joints-overview__actions a { justify-content: center; text-align: center; white-space: normal; }
  .weld-joints-overview__visual { border-radius: 1.35rem; }
  .weld-joints-overview__visual img { aspect-ratio: 1/1.06; }
  .weld-joints-overview__visual figcaption { right: 1.1rem; bottom: 1.05rem; left: 1.1rem; }
  .weld-joints-proof { grid-template-columns: 1fr; }
  .weld-joints-proof li + li { border-top: 1px solid var(--wj-line); }
  .weld-joints-features__list article { grid-template-columns: 2.4rem minmax(0,1fr); }
  .weld-joints-features__note { padding: .9rem 1rem; }
  .connection-library__heading { text-align: left; }
  .connection-library__heading > p:last-child { margin-left: 0; }
  .connection-grid { grid-template-columns: 1fr; gap: .8rem; margin-top: 2.25rem; }
  .connection-card { display: grid; grid-template-columns: 8.75rem minmax(0,1fr); min-height: 8.75rem; border-radius: 1.15rem; }
  .connection-card__media { height: 100%; min-height: 8.75rem; aspect-ratio: auto; border-radius: 1.08rem 0 0 1.08rem; }
  .connection-card__copy { align-self: center; padding: .9rem; }
  .connection-card__copy h3 { font-size: .84rem; }
  .connection-card__copy > div { display: -webkit-box; overflow: hidden; font-size: .72rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .connection-card__media > span { top: .55rem; left: .55rem; width: 1.8rem; height: 1.8rem; }
  .weld-joints-final__panel { border-radius: 1.4rem; padding: 1.5rem; }
  .weld-joints-final__actions { flex-direction: column; }
  .weld-joints-final__actions a { white-space: normal; text-align: center; }
  .weld-joints-final__email { justify-content: center; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-card,
  .connection-card__media img { transition: none; }
  .connection-card:hover::after { animation: none; }
}
