/* Cable pulling lubricant product range. Scoped to the range wrapper. */
.wire-page { --wire-ink: #202322; --wire-muted: #5c625f; --wire-gold: #b3862f; --wire-paper: #f5f4ef; color: var(--wire-ink); background: #fff; }
.wire-page *, .wire-page *::before, .wire-page *::after { box-sizing: border-box; }
.wire-page h1, .wire-page h2, .wire-page h3 { color: var(--wire-ink); font-weight: 600; letter-spacing: -.035em; line-height: 1.18; margin: 0 0 20px; }
.wire-page h2 { font-size: clamp(28px, 3.2vw, 42px); }
.wire-page p { color: var(--wire-muted); font-size: 16px; line-height: 1.8; margin: 0 0 18px; }
.wire-page a { transition: background-color .2s, color .2s, border-color .2s; }
.wire-page a:focus-visible, .wire-page summary:focus-visible { outline: 3px solid var(--wire-gold); outline-offset: 5px; }
.wire-page section[id], .wire-page article[id] { scroll-margin-top: 110px; }
.wire-page .wire-eyebrow { display: block; color: #8b6520; font-size: 12px; font-weight: 700; letter-spacing: .14em; margin-bottom: 20px; }
.wire-page .wire-section { padding: 88px 0; }
.wire-page .wire-btn { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 50px; padding: 14px 22px; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; border-radius: 3px; text-align: center; }
.wire-page .wire-btn i { font-size: 22px; flex-shrink: 0; }
.wire-page .wire-btn-gold { color: #171a18; background: #d7b063; border-color: #d7b063; }
.wire-page .wire-btn-gold:hover { background: #e7c785; border-color: #e7c785; }
.wire-page .wire-product-top { display: flex; justify-content: space-between; gap: 12px; color: #6d745f; font-size: 11px; font-weight: 600; letter-spacing: .06em; margin-bottom: 28px; }
/* The introduction stays in view while the product cards stack on scroll. */
.wire-page .wire-range-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 64px; }
.wire-page .wire-range-copy { align-self: start; }
.wire-page .wire-range-copy h2 a { color: var(--wire-ink); }
.wire-page .wire-range-copy h2 a:hover { color: #8b6520; }
.wire-page .wire-range-copy h2 span { display: block; font-size: .7em; line-height: 1.35; margin-top: 12px; }
.wire-page .wire-range-copy p:last-child { margin-bottom: 0; }
.wire-page .wire-range-cards { display: grid; gap: 28px; min-width: 0; scroll-margin-top: 120px; }
.wire-page .wire-range-card { padding: 36px; border: 1px solid #dfe2da; border-top: 3px solid var(--wire-gold); border-radius: 8px; background: #fafbf8; }
.wire-page .wire-range-card .wire-product-top { margin-bottom: 22px; }
.wire-page .wire-range-card h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.3; }
.wire-page .wire-range-card ul { padding-left: 20px; margin: 0 0 28px; list-style: disc; }
.wire-page .wire-range-card li { padding-left: 4px; color: var(--wire-muted); font-size: 15px; line-height: 1.8; margin-bottom: 14px; }
.wire-page .wire-range-card li::marker { color: #8b6520; }
.wire-page .wire-range-card li:last-child { margin-bottom: 0; }
/* Pin both columns together. Every incoming card covers the same rectangle. */
.wire-page .wire-range.is-stacking .wire-range-layout {
    position: sticky;
    top: var(--wire-stack-top);
    min-height: var(--wire-stage-height);
    align-items: center;
}
.wire-page .wire-range.is-stacking .wire-range-copy {
    align-self: center;
}
.wire-page .wire-range.is-stacking .wire-range-cards {
    display: block;
    position: relative;
    height: var(--wire-card-height);
    overflow: clip;
    isolation: isolate;
    border-radius: 8px;
}
.wire-page .wire-range.is-stacking .wire-range-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    will-change: transform;
}
.wire-page .wire-range.is-stacking .wire-range-card .wire-btn {
    align-self: flex-start;
    margin-top: auto;
}
@media (min-width: 992px) and (max-height: 800px) {
    .wire-page .wire-range-layout { gap: 40px; }
    .wire-page .wire-range-card { padding: 24px; }
    .wire-page .wire-range-card li { line-height: 1.65; margin-bottom: 12px; }
    .wire-page .wire-range-copy p { font-size: 15px; line-height: 1.7; }
}
@media (max-width: 991px) {
    .wire-page .wire-range-layout { grid-template-columns: 1fr; gap: 36px; }
    .wire-page .wire-range-copy { position: static; }
    .wire-page .wire-section { padding: 64px 0; }
}
@media (max-width: 575px) {
    .wire-page .wire-range-card { padding: 24px; }
    .wire-page .wire-range-cards { gap: 20px; }
    .wire-page .wire-range-card .wire-btn { width: 100%; }
    .wire-page .wire-section { padding: 48px 0; }
}

/* Final project enquiry banner. */
.wire-page .wire-project-cta { padding: 88px 0; background: linear-gradient(90deg, rgb(17 23 20 / 0%), rgb(17 23 20 / 0%)), url(../img/armcwebsite/services/cablepulling/cable-pulling-project-bg.webp) center / cover no-repeat; border-top: 4px solid #d7b063; }
.wire-page .wire-project-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.wire-page .wire-project-copy { min-width: 0; }
.wire-page .wire-project-image { margin: 0; border: 1px solid rgba(231, 199, 133, .4); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 48px rgba(0, 0, 0, .24); }
.wire-page .wire-project-image img { display: block; width: 100%; height: auto; }
.wire-page .wire-project-copy h2 { color: #fff; font-size: clamp(28px, 3vw, 38px); }
.wire-page .wire-project-copy p { color: #d8ddda; font-size: 17px; }
.wire-page .wire-project-copy p:last-child { margin-bottom: 0; }
.wire-page .wire-project-copy p a { color: #e7c785; text-decoration: underline; text-underline-offset: 3px; }
.wire-page .wire-project-copy p a:hover { color: #fff; }
.wire-page .wire-project-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.wire-page .wire-btn-contact { color: #fff; border-color: #8a938c; background: transparent; }
.wire-page .wire-btn-contact:hover { color: #202322; border-color: #fff; background: #fff; }
@media (max-width: 991px) {
    .wire-page .wire-project-cta { padding: 64px 0; }
    .wire-page .wire-project-panel { grid-template-columns: 1fr; gap: 28px; }
    .wire-page .wire-project-actions { flex-direction: row; flex-wrap: wrap; }
    .wire-page .wire-project-image { width: 100%; max-width: 520px; justify-self: center; }
}
@media (max-width: 575px) {
    .wire-page .wire-project-cta { padding: 48px 0; }
    .wire-page .wire-project-actions { flex-direction: column; }
}

/* Closing quotation CTA, after the FAQs. */
.wire-page .wire-final-cta { background: var(--wire-paper); border-top: 3px solid var(--wire-gold); }
.wire-page .wire-final-copy { max-width: 880px; margin: 0 auto; text-align: center; }
.wire-page .wire-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.wire-page .wire-final-contact { color: var(--wire-ink); border-color: var(--wire-ink); background: transparent; }
.wire-page .wire-final-contact:hover { color: #fff; background: var(--wire-ink); }
@media (max-width: 575px) {
    .wire-page .wire-final-actions { flex-direction: column; }
}

/* One spacing scale for every content section below this page's hero. */
.cable-lubricant-page { --cable-section-space: 80px; }
.cable-lubricant-page > section,
.cable-lubricant-page > .wire-page > section {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--cable-section-space);
    padding-bottom: var(--cable-section-space);
}
@media (max-width: 991px) {
    .cable-lubricant-page { --cable-section-space: 64px; }
}
@media (max-width: 575px) {
    .cable-lubricant-page { --cable-section-space: 48px; }
}

/* Five-step selection guide before the applications section. */
.wire-page .wire-selection-guide { background: #f5f4ef; }
.wire-page .wire-selection-heading { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.wire-page .wire-selection-heading .wire-eyebrow { margin-bottom: 16px; }
.wire-page .wire-selection-heading p { margin-bottom: 0; }
.wire-page .wire-selection-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.wire-page .wire-selection-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 22px; padding: 32px; background: #fff; border: 1px solid #e0e2da; border-radius: 8px; }
.wire-page .wire-selection-number { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid #dfcb9e; border-radius: 50%; color: #80601e; background: #f8f2e6; font-size: 16px; font-weight: 600; }
.wire-page .wire-selection-steps h3 { font-size: 23px; line-height: 1.35; letter-spacing: -.02em; margin: 8px 0 14px; }
.wire-page .wire-selection-steps p { font-size: 16px; margin: 0; }
.wire-page .wire-selection-steps li:last-child { grid-column: 1 / -1; background: #f6edd9; border-color: #dfcb9e; }
.wire-page .wire-selection-note { max-width: 860px; margin: 28px auto 0; text-align: center; }
@media (max-width: 991px) {
    .wire-page .wire-selection-steps { gap: 20px; }
    .wire-page .wire-selection-steps li { grid-template-columns: 40px minmax(0, 1fr); padding: 24px; gap: 16px; }
    .wire-page .wire-selection-number { width: 40px; height: 40px; }
    .wire-page .wire-selection-steps h3 { font-size: 21px; margin-top: 4px; }
}
@media (max-width: 767px) {
    .wire-page .wire-selection-steps { grid-template-columns: 1fr; }
    .wire-page .wire-selection-heading { margin-bottom: 28px; }
}
