.arch-detail-page.arch-service-page {
    --detail-ink: #f6eee3;
    --detail-muted: #d5c8ba;
    --detail-accent: #e0b68a;
    max-width: 1600px;
    padding: clamp(24px, 4vw, 60px) clamp(20px, 5vw, 84px) clamp(44px, 6vw, 96px);
}

.arch-service-page .arch-detail-trail {
    margin-bottom: clamp(16px, 2.5vw, 34px);
}

.arch-service-page .arch-detail-intro {
    position: relative;
    align-items: center;
    gap: clamp(26px, 5vw, 74px);
    padding: clamp(22px, 4vw, 64px);
    border: 1px solid #d9b28b36;
    background:
        radial-gradient(ellipse at 0% 15%, #a2743a24, transparent 64%),
        repeating-linear-gradient(125deg, #ffe1b807 0 1px, transparent 1px 8px),
        #1a1613;
}

.arch-service-page .arch-detail-intro.has-cover {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.arch-service-page .arch-detail-copy {
    padding-block: 0;
}

.arch-service-page .arch-detail-copy h1 {
    font-size: clamp(2.35rem, 5.2vw, 5.3rem);
    font-weight: 600;
}

.arch-service-page .arch-detail-text {
    max-width: 52ch;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.75;
}

.arch-service-page .arch-detail-cover {
    aspect-ratio: 5 / 4;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 87% 100%, 0 100%);
}

.arch-service-page .arch-detail-cover img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
    clip-path: none;
}

.arch-service-page .arch-detail-actions a {
    min-height: 48px;
    padding-inline: 18px;
    font-size: .9rem;
}

.arch-service-page .arch-detail-actions a:first-child {
    background: var(--detail-accent);
    border-color: var(--detail-accent);
    color: #211811;
}

.arch-service-page .arch-detail-actions a:hover {
    border-color: #f6eee3;
}

@media (max-width: 820px) {
    .arch-service-page .arch-detail-intro.has-cover {
        grid-template-columns: minmax(0, 1fr);
    }
    .arch-service-page .arch-detail-cover {
        aspect-ratio: 4 / 3;
    }
}