/* Client service structure, using the department palette of the existing theme. */
.client-service-intro { padding: 12px 0 48px; }
.client-service-lead { max-width: 960px; color: #c9cdd2; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.55; margin: 18px 0 28px; }
.client-parent-link { display: inline-block; color: var(--accent-color, #478bff); padding: 8px 0; }

.client-service-intro .service-grid { margin-top: 24px; }
.client-service-intro .service-card { min-height: 280px; }
.client-service-intro .service-card .card-title { font-size: clamp(20px, 2vw, 28px); }
.client-service-intro .service-card .card-meta { line-height: 1.45; }
.client-price-details { margin-bottom: 32px; }
.client-price-details > summary { cursor: pointer; padding: 22px 0; font-size: 23px; color: var(--accent-color); }
.client-wheel-design { padding: 0 0 56px; }
.client-wheel-design .client-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; list-style-position: inside; padding: 0; counter-reset: client-step; }
.client-wheel-design .client-steps li { display: block; padding: 28px; border: 1px solid var(--line); background: #18191b; border-top: 2px solid var(--accent-color, #ff4758); }
.client-wheel-design .client-steps li::before { counter-increment: client-step; content: '0' counter(client-step); display: block; color: var(--accent-color, #ff4758); margin-bottom: 16px; }
.client-wheel-design .client-steps strong { font-size: 21px; }
.client-wheel-design .client-steps p { color: #b7bcc4; margin: 12px 0 0; }
.client-reference-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 24px 0 48px; }
.client-reference-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.client-request { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.client-request .form-card { margin: 0; }





.service-detail-page[data-service-accent], .service-detail-title[data-service-accent] { --service-heading-accent: var(--accent-color); --service-heading-rgb: var(--accent-bright-rgb); --service-accent-rgb: var(--accent-dark-rgb); --service-accent-bright-rgb: var(--accent-bright-rgb); }
@media(max-width:900px) { .client-wheel-design .client-steps { grid-template-columns: 1fr; gap: 16px; } .client-request { grid-template-columns: 1fr; gap: 16px; } .client-reference-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:500px) { .client-reference-grid { gap: 12px; } .client-wheel-design .client-steps li { padding: 22px; } }

.client-service-intro .service-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.client-service-intro .service-card-copy { flex: 1; }
.client-service-intro .service-card-copy p { line-height: 1.5; }
.client-service-intro > .container > .hero-actions .button:not(.is-ghost), .client-wheel-design .form-submit { background: var(--accent-color); border-color: var(--accent-color); color: #101012; }

@media(max-width:1100px) { .client-service-intro .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .client-service-intro .service-grid { grid-template-columns: 1fr; } }
.service-card.is-client-leaf { height: auto; min-height: 420px; align-self: stretch; }
.service-card.is-client-leaf .service-card-copy { flex: 1 0 auto; }
.service-direction .service-grid { align-items: stretch; }
.client-service-intro .service-grid { gap: 24px; align-items: stretch; }
.client-service-intro .service-card { width: 100%; height: auto; }
.service-card[data-service-accent] .service-order { --site-accent-rgb: var(--accent-bright-rgb); }

/* Review 2026-10-30: readable service copy and inline request controls. */
.client-text-cta { appearance:none; font:inherit; font-weight:600; padding:0; border:0; border-bottom:1px solid currentColor; background:none; color:var(--accent-color,#ff4758); cursor:pointer; }
.client-text-cta:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.service-detail-copy { max-width:960px; }
.service-detail-copy p,.service-detail-copy li { line-height:1.7; }

.client-wheel-design .client-steps li { min-width:0; }
@media(max-width:760px){ .client-wheel-design .client-steps { grid-template-columns:1fr; } .client-wheel-design .client-steps li { padding:22px; } }

.client-service-intro h2, .client-wheel-design h2 { font-size: clamp(24px, 2.4vw, 36px); margin: 20px 0 24px; }
.client-service-intro, .client-wheel-design { --interactive-accent: var(--accent-color, #ff4758); --interactive-rgb: var(--accent-bright-rgb, 255,71,88); }