.services-catalog { padding-bottom: 130px; padding-top: 90px; }
.service-filter { border-bottom: 1px solid var(--line); display: flex; gap: 25px; margin-bottom: 35px; overflow-x: auto; padding-bottom: 14px; }
.service-filter button { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 0; white-space: nowrap; }
.service-filter button.active, .service-filter button:hover { color: var(--coral); }
.service-card-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.service-card { background: var(--white); border: 1px solid rgba(21,25,28,.08); display: flex; flex-direction: column; min-height: 390px; padding: 25px; transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover { box-shadow: var(--shadow); transform: translateY(-5px); }
.service-card-top { align-items: center; display: flex; justify-content: space-between; }
.service-card .service-icon { background: var(--acid); color: var(--ink); display: inline-flex; font-size: 23px; height: 42px; justify-content: center; padding-top: 6px; width: 42px; }
.service-type { color: var(--coral); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.service-card h3 { font-size: 27px; margin: 45px 0 12px; }
.service-card > p { color: var(--ink-soft); font-size: 14px; }
.service-tech { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; margin: 14px 0; padding: 12px 0; }
.service-card-detail { flex: 1; }
.service-card-detail span { color: var(--coral); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.service-card-detail p { color: var(--ink-soft); font-size: 13px; }
.process-section { padding-bottom: 130px; }
.process-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); margin-top: 60px; }
.process-step { border-top: 2px solid var(--ink); padding-top: 15px; }
.process-step span { color: var(--coral); font-family: var(--mono); font-size: 11px; }
.process-step h3 { font-size: 23px; margin: 30px 0 10px; }
.process-step p { color: var(--ink-soft); font-size: 13px; }
.project-tools { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 35px; }
.project-search { display: flex; flex: 1; flex-direction: column; gap: 8px; max-width: 500px; }
.project-search span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.project-search input { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; outline: 0; padding: 10px 0; }
.project-search input:focus { border-color: var(--coral); }
.project-filter { border-bottom: 1px solid var(--line); display: flex; gap: 25px; margin-bottom: 35px; overflow-x: auto; padding-bottom: 14px; }
.project-filter button { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 0; white-space: nowrap; }
.project-filter button.active, .project-filter button:hover { color: var(--coral); }
.project-detail { align-items: center; display: grid; gap: 80px; grid-template-columns: 1fr 1fr; min-height: 680px; padding-bottom: 100px; padding-top: 70px; }
.project-detail-visual { background: var(--paper-deep); height: min(600px, 60vw); overflow: hidden; position: relative; }
.project-detail-visual img { height: 100%; object-fit: cover; width: 100%; }
.project-detail-visual span { background: var(--acid); bottom: 18px; font-family: var(--mono); font-size: 10px; left: 18px; padding: 8px; position: absolute; text-transform: uppercase; }
.project-detail-copy h1 { font-size: clamp(48px, 6vw, 82px); margin: 15px 0 25px; }
.project-meta { border-top: 1px solid var(--line); margin-top: 35px; }
.project-meta > div { border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 90px 1fr; padding: 14px 0; }
.project-meta span { color: var(--coral); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.project-meta p { color: var(--ink-soft); font-size: 13px; margin: 0; }
@media (max-width: 900px) { .project-detail { gap: 45px; } }
@media (max-width: 620px) { .project-tools { align-items: stretch; flex-direction: column; gap: 20px; }.project-search { max-width: none; }.project-detail { gap: 40px; grid-template-columns: 1fr; padding-bottom: 80px; padding-top: 45px; }.project-detail-visual { height: 85vw; }.project-detail-copy h1 { font-size: 52px; }.project-meta > div { grid-template-columns: 75px 1fr; } }
@media (max-width: 900px) { .service-card-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .service-card-grid, .process-grid { grid-template-columns: 1fr; } .service-card { min-height: 350px; } }
.catalog-tools { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 30px; }
.search-field, .sort-field { display: flex; flex-direction: column; gap: 8px; }
.search-field { flex: 1; max-width: 500px; }
.search-field span, .sort-field span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.search-field input, .sort-field select { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; outline: 0; padding: 10px 0; }
.search-field input:focus, .sort-field select:focus { border-color: var(--coral); }
.product-actions { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 16px; margin-top: 15px; padding-top: 13px; }
.cart-button { background: none; border: 0; color: var(--coral); cursor: pointer; padding: 0; }
.product-detail { align-items: center; display: grid; gap: 80px; grid-template-columns: 1fr 1fr; min-height: 680px; padding-bottom: 100px; padding-top: 70px; }
.detail-product-visual { background: var(--paper-deep); height: min(600px, 60vw); overflow: hidden; }
.detail-product-visual img { height: 100%; object-fit: cover; width: 100%; }
.detail-product-copy h1 { font-size: clamp(48px, 6vw, 82px); margin: 15px 0 25px; }
.detail-lede { font-family: var(--display); font-size: 24px; max-width: 470px; }
.detail-product-copy > p:not(.eyebrow):not(.detail-lede) { color: var(--ink-soft); max-width: 450px; }
.detail-price { font-family: var(--mono); font-size: 18px; margin-top: 28px; }
.detail-product-copy .text-link { display: inline-block; margin-top: 40px; }
.cart-toggle { background: var(--ink); border: 0; bottom: 22px; color: var(--paper); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 13px 16px; position: fixed; right: 22px; z-index: 20; }
.cart-toggle span { color: var(--acid); margin-left: 6px; }
.cart-drawer { background: var(--paper); box-shadow: -10px 0 35px rgba(21,25,28,.18); height: 100vh; max-width: 390px; padding: 90px 30px 30px; position: fixed; right: 0; top: 0; transform: translateX(105%); transition: transform .3s ease; width: 100%; z-index: 30; }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer h2 { font-size: 42px; }
.cart-drawer ul { border-top: 1px solid var(--line); list-style: none; margin: 30px 0; padding: 0; }
.cart-drawer li { border-bottom: 1px solid var(--line); display: flex; font-family: var(--mono); font-size: 11px; justify-content: space-between; padding: 16px 0; }
.cart-drawer small { color: var(--ink-soft); display: block; font-size: 11px; margin-top: 15px; }
.cart-close { background: none; border: 0; cursor: pointer; font-size: 28px; position: absolute; right: 25px; top: 20px; }
.product-tag { background: var(--acid); font-family: var(--mono); font-size: 10px; left: 12px; padding: 6px 8px; position: absolute; text-transform: uppercase; top: 12px; }.product-visual:after { border: 1px solid rgba(21,25,28,.35); content: "N / OBJECT"; font-family: var(--mono); font-size: 9px; padding: 6px; position: absolute; right: 12px; top: 12px; }.project-visual .card-meta { bottom: 15px; color: var(--ink); left: 18px; position: absolute; }.page-hero { border-bottom: 1px solid var(--line); padding-bottom: 90px; padding-top: 80px; }.page-hero h1 { max-width: 800px; }.page-hero p:not(.eyebrow) { color: var(--ink-soft); font-size: 18px; max-width: 580px; }.catalog-section { padding-bottom: 130px; padding-top: 70px; }.filter-bar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 22px; margin-bottom: 35px; overflow-x: auto; padding-bottom: 14px; }.filter-button { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-family: var(--mono); font-size: 11px; padding: 0; white-space: nowrap; }.filter-button.active, .filter-button:hover { color: var(--coral); }.detail-list { display: grid; gap: 60px; grid-template-columns: 1fr 1fr; }.detail-block { border-top: 1px solid var(--line); padding-top: 18px; }.detail-block h2 { font-size: 30px; }.detail-block p { color: var(--ink-soft); }.contact-layout { display: grid; gap: 80px; grid-template-columns: .8fr 1.2fr; padding-bottom: 130px; padding-top: 80px; }.contact-info h2 { font-size: 48px; }.contact-info p { color: var(--ink-soft); max-width: 350px; }.contact-form { display: grid; gap: 20px; }.form-field { display: flex; flex-direction: column; gap: 7px; }.form-field label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; }.form-field input, .form-field select, .form-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); font: inherit; outline: 0; padding: 10px 0; width: 100%; }.form-field textarea { min-height: 100px; resize: vertical; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--coral); }.form-message { color: var(--coral); font-family: var(--mono); font-size: 12px; }.empty-state { color: var(--ink-soft); padding: 30px 0; }.social-line { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }.social-line a { border-bottom: 1px solid var(--coral); font-family: var(--mono); font-size: 12px; padding-bottom: 4px; }