@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
.cp-lines-page { margin: 0; color: #f2f2f2; background: #080808; font: 14px/1.7 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
.cp-lines-page *, .cp-lines-page *::before, .cp-lines-page *::after { box-sizing: border-box; }
.cp-lines-page a { text-decoration: none; }
.cp-lines-page a:focus-visible { outline: 2px solid #ff6800; outline-offset: 5px; }
.cp-lines-page [id] { scroll-margin-top: 24px; }
.cp-lines-container { width: min(calc(100% - 48px), 1240px); margin-inline: auto; }
.cp-lines-skip { position: absolute; top: 10px; left: 16px; padding: 12px 16px; transform: translateY(-160%); z-index: 50; background: #ff6800; color: #080808; border-radius: 8px; }
.cp-lines-skip:focus { transform: none; }
.cp-lines-intro { padding: 26px 0 54px; border-bottom: 1px solid #ffffff14; background: radial-gradient(ellipse at 90% 0, #ff680009, transparent 60%); }
.cp-lines-breadcrumb { display: flex; gap: 13px; color: #8b8b8b; font-size: 11px; margin-bottom: 42px; }
.cp-lines-breadcrumb a { color: #aaa; }
.cp-lines-breadcrumb a:hover { color: #ff9954; }
.cp-lines-eyebrow, .cp-line-tag { color: #ff9954; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.cp-lines-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.cp-lines-eyebrow::before { content: ''; width: 28px; height: 2px; background: #ff6800; }
.cp-lines-heading { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 48px; margin-top: 18px; }
.cp-lines-heading h1 { margin: 0; font: 700 clamp(42px, 5vw, 66px)/1.05 'Outfit', sans-serif; letter-spacing: -.045em; }
.cp-lines-heading h1 strong { color: #ff6800; font-weight: inherit; }
.cp-lines-heading > p { max-width: 400px; margin: 0 0 4px; justify-self: end; color: #aaa; line-height: 1.85; }
.cp-lines-section { padding: 48px 0 72px; background: #101010; }
.cp-lines-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cp-line-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #ffffff18; border-radius: 16px; background: #161616; overflow: hidden; }
.cp-line-art { position: relative; aspect-ratio: 1.5; padding: 30px 24px 18px; border-bottom: 1px solid #ffffff12; }
.cp-line-art-solar { background: radial-gradient(ellipse at 50% 50%, #163648, #11181d 75%); }
.cp-line-art-automation { background: radial-gradient(ellipse at 50% 50%, #48301b, #1b1713 75%); }
.cp-line-art-industrial { background: radial-gradient(ellipse at 50% 50%, #383a3b, #1a1b1c 75%); }
.cp-line-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cp-line-number { position: absolute; left: 20px; top: 16px; color: #ffffff66; font: 500 12px 'Outfit', sans-serif; letter-spacing: .12em; }
.cp-line-copy { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.cp-line-copy h2 { margin: 10px 0 13px; font: 600 clamp(25px, 2.4vw, 31px)/1.2 'Outfit', sans-serif; letter-spacing: -.035em; }
.cp-line-copy > p { margin: 0 0 26px; color: #aaa; font-size: 13px; }
.cp-line-categories { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.cp-line-categories a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 12px 14px; border: 1px solid #ff680050; border-radius: 8px; color: #ffad75; font-size: 12px; font-weight: 600; background: #ff680008; transition: background-color 180ms ease, border-color 180ms ease; }
.cp-line-categories a:hover { background: #ff680018; border-color: #ff6800; }
.cp-line-categories a span { font-size: 18px; }
@media (max-width: 1000px) { .cp-lines-grid { gap: 16px; } .cp-line-copy { padding: 20px; } .cp-lines-heading { gap: 28px; } }
@media (max-width: 760px) {
    .cp-lines-container { width: calc(100% - 32px); }
    .cp-lines-intro { padding-bottom: 34px; }
    .cp-lines-heading { grid-template-columns: 1fr; gap: 20px; }
    .cp-lines-heading > p { justify-self: start; max-width: 550px; }
    .cp-lines-grid { grid-template-columns: 1fr; gap: 24px; }
    .cp-lines-section { padding: 30px 0 45px; }
    .cp-line-art { aspect-ratio: 1.7; max-height: 310px; }
    .cp-line-copy { padding: 25px; }
    .cp-lines-breadcrumb { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .cp-lines-page * { transition: none !important; } }
