*,
*::before,
*::after {
    box-sizing: border-box;
}

body.re-service-detail {
    margin: 0;
    font-family: 'Source Sans 3', sans-serif;
    color: #1f2a37;
    background:
        radial-gradient(circle at 10% 0%, rgba(11, 122, 117, 0.12), transparent 34%),
        radial-gradient(circle at 90% 5%, rgba(240, 127, 58, 0.15), transparent 28%),
        var(--re-bg);
}

.sd-main {
    padding-bottom: 2rem;
}

.sd-container {
    width: min(1160px, 92vw);
    margin: 0 auto;
}

.sd-hero {
    padding: 1rem 0 0.75rem;
}

.sd-back-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    color: var(--re-primary);
    margin-bottom: 0.55rem;
}

.sd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 12px;
    align-items: stretch;
}

.sd-copy {
    border: 1px solid #d7e3d8;
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
}

.sd-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: var(--re-primary);
}

.sd-copy h1 {
    margin: 0.35rem 0 0;
    font-family: 'Outfit', sans-serif;
    color: #122133;
    font-size: clamp(1.72rem, 3.2vw, 2.55rem);
}

.sd-subtext {
    margin: 0.58rem 0 0;
    color: #4f5f74;
    max-width: 66ch;
    font-size: 1.04rem;
}

.sd-pills {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sd-pills span {
    border-radius: 999px;
    border: 1px solid rgba(11, 122, 117, 0.34);
    background: rgba(11, 122, 117, 0.1);
    color: var(--re-primary-deep);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.24rem 0.62rem;
}

.sd-actions {
    margin-top: 0.86rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.sd-btn-primary,
.sd-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.55rem 0.96rem;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
}

.sd-btn-primary {
    color: #fff;
    background: linear-gradient(120deg, var(--re-primary), var(--re-primary-deep));
}

.sd-btn-secondary {
    color: #223347;
    border: 1px solid rgba(15, 29, 47, 0.16);
    background: #fff;
}

.sd-media {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d7e3d8;
    min-height: 100%;
    background: linear-gradient(135deg, rgba(15, 29, 47, 0.9), rgba(11, 122, 117, 0.8));
}

.sd-media img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
}

.sd-media-placeholder {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eff9f3;
    font-size: 2.4rem;
}

.sd-content {
    padding-top: 0.5rem;
}

.sd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
    gap: 12px;
    align-items: start;
}

.sd-article {
    border: 1px solid #d7e3d8;
    border-radius: 16px;
    background: #fff;
    padding: 1rem;
}

.sd-article h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    color: #132033;
}

.sd-paragraphs {
    margin-top: 0.66rem;
    display: grid;
    gap: 0.74rem;
}

.sd-paragraphs p {
    margin: 0;
    color: #43546a;
    line-height: 1.66;
    font-size: 1.01rem;
}

.sd-benefits-card {
    margin-top: 1rem;
    border-radius: 14px;
    border: 1px solid #dce8df;
    background: #f8fcf8;
    padding: 0.8rem;
}

.sd-benefits-card h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    color: #122133;
    font-size: 1.18rem;
}

.sd-benefits {
    margin: 0.64rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.42rem;
}

.sd-benefits li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2d3f55;
    font-size: 0.95rem;
    font-weight: 600;
}

.sd-benefits i {
    color: #0f915c;
}

.sd-sidebar {
    display: grid;
    gap: 0.75rem;
    position: sticky;
    top: 92px;
}

.sd-side-card {
    border: 1px solid #d7e3d8;
    border-radius: 14px;
    background: #fff;
    padding: 0.84rem;
}

.sd-side-card h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.03rem;
    color: #132033;
}

.sd-side-card p {
    margin: 0.45rem 0 0.7rem;
    color: #4f5f74;
}

.sd-side-card > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(120deg, var(--re-secondary), var(--re-secondary-deep));
    color: #fff;
    font-weight: 700;
    font-size: 0.89rem;
}

.sd-service-list {
    margin-top: 0.55rem;
    display: grid;
    gap: 0.42rem;
}

.sd-service-list a {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #223347;
    border: 1px solid #e3ebe5;
    border-radius: 10px;
    padding: 0.46rem 0.56rem;
    background: #fbfdfb;
    font-weight: 600;
    font-size: 0.9rem;
}

.sd-service-list i {
    color: var(--re-primary);
}

.sd-related {
    padding-top: 0.78rem;
}

.sd-related-head h2 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    color: #122133;
    font-size: clamp(1.38rem, 2.3vw, 1.78rem);
}

.sd-related-head p {
    margin: 0.3rem 0 0.72rem;
    color: #4f5f74;
}

.sd-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sd-related-card {
    border: 1px solid #d7e3d8;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 29, 47, 0.07);
}

.sd-related-media {
    min-height: 126px;
    background: linear-gradient(135deg, rgba(15, 29, 47, 0.9), rgba(11, 122, 117, 0.78));
}

.sd-related-media img {
    width: 100%;
    height: 126px;
    object-fit: cover;
    display: block;
}

.sd-related-media-placeholder {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0faf4;
    font-size: 1.8rem;
}

.sd-related-content {
    padding: 0.66rem;
}

.sd-related-content h3 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    color: #122133;
    font-size: 1rem;
}

.sd-related-content p {
    margin: 0.4rem 0 0.5rem;
    color: #55657a;
    font-size: 0.89rem;
    line-height: 1.45;
}

.sd-related-content a {
    text-decoration: none;
    color: var(--re-primary);
    font-weight: 700;
    font-size: 0.87rem;
}

@media (max-width: 1060px) {
    .sd-hero-grid,
    .sd-layout {
        grid-template-columns: 1fr;
    }

    .sd-sidebar {
        position: static;
    }

    .sd-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .sd-related-grid {
        grid-template-columns: 1fr;
    }

    .sd-actions {
        width: 100%;
    }

    .sd-btn-primary,
    .sd-btn-secondary {
        flex: 1;
    }
}