/* A service-led route, with a visible place to choose and a clear active step. */
.service-selector { margin-bottom: 26px; }
.service-selector h3 { font: 400 clamp(1.3rem, 2.2vw, 1.8rem)/1.5 var(--font); margin-bottom: 22px; }
.service-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.service-tabs button { min-height: 64px; padding: 15px 20px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 400 1rem/1.5 var(--font); transition: color .3s, background .3s, border-color .3s; }
.service-tabs button:hover { color: var(--ink); border-color: var(--accent); }
.service-tabs button[aria-selected="true"] { color: var(--deep); background: var(--accent); border-color: var(--accent); }
.process-service-intro { color: var(--muted); max-width: 60ch; margin: 0 0 55px auto; min-height: 3.5em; }
.process-visual { background: var(--deep); z-index: 5; }
.process-photo { height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 2; }
.process-scene img { object-position: center; }
.process-scene figcaption { font-family: var(--font); letter-spacing: 0; }
.process-status { align-items: center; margin-top: 20px; }
.process-counter b { font-weight: 400; }
.process-chapter { font: 400 .875rem/1.5 var(--font); letter-spacing: 0; margin: 0; }
.process-jumps { display: flex; gap: 12px; margin-top: 22px; }
.process-jump { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font: 400 .8rem var(--latin); transition: background .3s, color .3s, border-color .3s; }
.process-jump:hover { border-color: var(--accent); color: var(--ink); }
.process-jump[aria-current="true"] { background: var(--accent); color: var(--deep); border-color: var(--accent); }
.process-hint { margin-top: 15px; color: var(--muted); font: 400 .75rem/1.6 var(--font); }
.steps article { min-height: 240px; cursor: pointer; transition: opacity .35s; }
.steps article:not(.active) { opacity: .65; }
.steps article:hover, .steps article:focus-within { opacity: 1; }
.steps h3 { margin-bottom: 16px; }
.process-step-trigger { display: flex; width: 100%; gap: 16px; align-items: center; justify-content: space-between; padding: 0; border: 0; color: var(--ink); background: transparent; font: 400 clamp(1.25rem, 1.7vw, 1.65rem)/1.5 var(--font); text-align: right; }
.process-step-trigger span { color: var(--accent); font: 400 1rem var(--latin); opacity: .55; }
.steps article.active .process-step-trigger span { opacity: 1; }
.gallery-choices button[aria-pressed="true"]::after { transform: scaleX(var(--gallery-progress, 0)); }

@media (max-width: 750px) {
 .service-tabs { grid-template-columns: 1fr 1fr; gap: 9px; }
 .service-tabs button { padding: 13px 9px; min-height: 58px; font-size: .9rem; }
 .process-service-intro { margin-bottom: 30px; min-height: 0; }
 .process-grid { display: block; }
 .process-visual { position: sticky; top: 77px; margin-bottom: 20px; padding: 9px 0 15px; border-bottom: 1px solid var(--line); }
 .process-photo { height: clamp(130px, 23svh, 210px); aspect-ratio: auto; }
 .process-photo img { object-fit: contain; }
 .process-status { margin-top: 10px; }
 .process-counter { font-size: 2rem; }
 .process-chapter { font-size: .75rem; }
 .process-track { margin-top: 10px; }
 .process-jumps { gap: 10px; margin-top: 12px; }
 .process-jump { width: 36px; height: 36px; }
 .process-hint { font-size: .68rem; margin-top: 8px; }
 .steps article { min-height: 215px; padding: 26px 0 35px; }
 .process-step-trigger { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .gallery-choices button[aria-pressed="true"]::after { transform: scaleX(1); } }

/* Contact details share the studio's quiet, outlined controls. */
.contact-details { margin-top: 38px; display: grid; gap: 0; max-width: 390px; }
.contact-detail { display: grid; grid-template-columns: 64px 1fr 18px; align-items: center; gap: 13px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 .9rem/1.6 var(--font); }
.contact-detail > span:first-child { color: var(--muted); font-size: .8rem; }
.contact-detail bdi { justify-self: start; font: 400 .9rem/1.6 var(--latin); overflow-wrap: anywhere; }
a.contact-detail:hover { color: var(--accent); border-color: var(--accent); }
.message-prompt { display: block; margin-top: 8px; color: var(--muted); font: 400 .875rem/1.6 var(--font); }
.footer-privacy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.footer-privacy a { font-family: var(--font); }
.catalog-feature .catalog-image, .catalog-still .catalog-image { aspect-ratio: 3 / 2; overflow: hidden; }
.catalog-image img { display: block; width: 100%; height: 100%; object-fit: cover; }