/* Service pages share the homepage's typography, header and project carousel. */
.op-service {
    .op-home-hero { min-block-size:72svh; h1 { letter-spacing:.055em; } .op-home-tagline { font-size:clamp(1.1rem,1.6vw,1.35rem); max-inline-size:46rem; margin:0; } }
    .op-selected-work { background:#f4f5ef; padding-block-start:3.5rem;
        .op-section-heading { text-align:start; margin-block-end:3.5rem; display:grid; gap:1rem; h2,p { margin:0; } }
    }
}
.op-process {
    ol { list-style:none; margin:0 auto; padding:4rem 1.5rem 1rem; max-inline-size:80rem; display:grid; gap:2.5rem; }
    h3 { font-size:1.55rem; font-weight:400; line-height:1.25; margin:0 0 1.5rem; &::after { content:''; display:block; inline-size:4.5rem; border-block-end:2px solid var(--op-clay); margin-block-start:1.25rem; } }
    p { margin:0; }
    .op-process-image { display:block; inline-size:100%; block-size:auto; margin-block-start:1rem; }
}
.op-semi { color:white; background:var(--op-slate); padding:4.5rem 1.5rem;
    header { text-align:center; max-inline-size:58rem; margin:0 auto 3rem; p { max-inline-size:44rem; margin-inline:auto; } }
    .op-semi-grid { display:grid; gap:2rem; max-inline-size:58rem; margin:auto; }
    .op-semi-photos { display:grid; gap:1rem; img { display:block; inline-size:100%; block-size:100%; object-fit:cover; aspect-ratio:4/3; } }
    .op-semi-features { display:grid; gap:.75rem;
        article { background:#f4f5ef; color:#191919; border-radius:.2rem; padding:1.6rem; display:flex; align-items:start; gap:1.2rem; img { flex:0 0 3rem; inline-size:3rem; block-size:auto; } }
        h3 { font-size:1.15rem; letter-spacing:.04em; margin:0 0 .8rem; } p { margin:0; line-height:1.4; }
    }
}
.op-testimonials { background:#e6dbc1; color:#191919; padding:3.75rem 1.5rem 4.375rem; text-align:center;
    h2 { max-inline-size:58.125rem; margin:0 auto; font-size:clamp(1.75rem,3vw,2.5rem); line-height:1; font-weight:400; letter-spacing:.125em; color:#333; }
    .op-testimonial-carousel { position:relative; max-inline-size:58.125rem; margin:3.75rem auto 0; }
    .op-quotes { max-inline-size:49.5rem; margin-inline:auto; }
    figure { margin:0 0 2rem; padding:1.25rem; }
    blockquote { margin:0; font-size:1rem; line-height:1.5; p:last-child { margin-block-end:0; } }
    figcaption { margin-block-start:1.5625rem; strong,span { display:block; } strong { color:inherit; font-size:1.25rem; font-weight:600; line-height:1.5; } span { font-size:.875rem; line-height:1.5; } }
    .op-quote-controls {
        button { position:absolute; z-index:1; inset-block-start:calc((100% - 2.5rem)/2); transform:translateY(-50%); display:grid; place-items:center; background:transparent; color:inherit; border:0; padding:.625rem; line-height:1;
            &[data-direction="-1"] { inset-inline-start:0; }
            &[data-direction="1"] { inset-inline-end:0; }
            svg { inline-size:1.25rem; block-size:1.25rem; }
            &:hover { color:#8b371f; }
        }
        [role="status"] { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
    }
    .splide__pagination { position:static; display:flex; justify-content:center; align-items:center; list-style:none; padding:0; margin:0; min-block-size:2.5rem;
        li { display:flex; }
        button { display:grid; place-items:center; border:0; background:transparent; padding:.75rem .375rem; margin:0;
            &::before { content:''; inline-size:.375rem; aspect-ratio:1; border-radius:50%; background:#0003; }
            &.is-active::before { background:#f5f6f1; }
        }
    }
}
.op-comparison { background:var(--op-slate); color:white; padding:4rem 1.25rem;
    header { max-inline-size:58rem; text-align:center; margin:0 auto 3.5rem; p { max-inline-size:49rem; margin-inline:auto; } }
    .op-comparison-panels,.op-comparison-gallery { max-inline-size:61.25rem; margin-inline:auto; }
    figure { margin:0 0 2rem; } figcaption { text-align:center; margin-block-start:.7rem; }
    .op-comparison-stage { display:grid; gap:1rem; }
    .op-compare-before,.op-compare-after { position:relative; img { inline-size:100%; block-size:auto; display:block; } span { position:absolute; inset-block-start:50%; transform:translateY(-50%); padding:.4rem .7rem; background:#0005; color:white; font-size:.85rem; } }
    .op-compare-after span { inset-inline-end:3.25rem; } .op-compare-before span { inset-inline-start:3.25rem; }
    .op-comparison-gallery { position:relative; margin-block-start:1.5rem; }
    .op-comparison-thumbs { position:relative; display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
        &::-webkit-scrollbar { display:none; }
        button { flex:0 0 calc((100% - 1rem)/2); min-inline-size:0; background:transparent; color:inherit; border:0; padding:0; scroll-snap-align:center; opacity:.75;
            &[aria-pressed=true],&:hover,&:focus-visible { opacity:1; } &[aria-pressed=true] { box-shadow:inset 0 -3px white; } &:focus-visible { outline-offset:-4px; }
        }
        img { display:block; inline-size:100%; aspect-ratio:1.5; object-fit:cover; }
    }
    .op-comparison-arrows { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; z-index:3;
        button { pointer-events:auto; border:0; border-radius:0; background:#0002; color:white; padding:0 .3rem; min-inline-size:2.75rem; min-block-size:2.75rem; font-size:3.5rem; line-height:1; text-shadow:0 1px 5px #0006; &:hover { background:#0006; } }
    }
    .op-comparison-help,.op-comparison-status { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
    &.is-enhanced {
        figure { margin:0; }
        figcaption,.op-comparison-range>span { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
        .op-comparison-stage { position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:#353940; }
        .op-compare-before,.op-compare-after { position:absolute; inset:0; img { inline-size:100%; block-size:100%; object-fit:cover; object-position:center top; } }
        .op-compare-before { clip-path:inset(0 calc(100% - var(--before,50%)) 0 0); }
        .op-comparison-divider { position:absolute; inset-block:0; inset-inline-start:var(--before,50%); border-inline-start:2px solid white; color:white; display:flex; align-items:center; pointer-events:none; filter:drop-shadow(0 1px 3px #0005);
            >span { display:grid; place-items:center; white-space:pre; inline-size:2.75rem; aspect-ratio:1; border:3px solid white; border-radius:50%; transform:translateX(calc(-50% - 1px)); font-size:1rem; background:#474c5433; }
        }
        .op-comparison-range { position:absolute; inset:0; display:block; margin:0; z-index:2;
            input { position:absolute; inset:0; inline-size:100%; block-size:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
        }
        .op-comparison-stage:has(input:focus-visible) .op-comparison-divider>span { outline:3px solid #ffbd9c; outline-offset:4px; background:#474c54; }
    }
}
@media (min-width:640px) {
    .op-process ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .op-semi .op-semi-photos { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .op-comparison .op-comparison-thumbs button { flex-basis:calc((100% - 2rem)/3); }
}
@media (min-width:900px) {
    .op-service .op-selected-work .op-section-heading { grid-template-columns:2fr 3fr; gap:3rem; }
    .op-process ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .op-semi { .op-semi-grid { grid-template-columns:2fr 3fr; gap:3rem; } .op-semi-photos { grid-template-columns:1fr; } }
}