body.section-layout {
    --section-gutter: max(24px, calc((100vw - 1320px) / 2));
}

body.section-layout :is(main.service-page, main.services-hub-page, main.blog-detail-page) > :is(.section-padding, .service-hero, .services-hero, .ec-stats, .cta-section),
body.section-layout main.services-hub-page .tech-stack-section > :is(.section-padding, .tech-stack),
body.section-layout main.service-page > .tech-stack {
    padding-inline: var(--section-gutter) !important;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
}

body.section-layout main.service-page :is(.ec-stats-inner, .ec-faq-list) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

body.section-layout main.infrastructure-page {
    padding-inline: var(--section-gutter) !important;
}
body.section-layout main.infrastructure-page > .container {
    width: 100%;
    max-width: none !important;
}
body.section-layout main.infrastructure-page :is(h1, p) {
    max-width: 900px;
    margin-inline: auto;
    overflow-wrap: anywhere;
}

body.section-layout main.blog-detail-page .bd-layout {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 320px;
}
body.section-layout main.blog-detail-page .bd-text {
    max-width: 75ch;
    overflow-wrap: anywhere;
}
body.section-layout main.blog-detail-page .bd-hero {
    padding-top: 56px;
}

body.section-layout :is(main.service-page, main.services-hub-page) > :is(.service-hero, .services-hero) {
    padding-top: 56px;
}
body.section-layout .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #666;
}
body.section-layout .breadcrumbs :is(a, a:visited) {
    color: #555;
    text-decoration: none;
}
body.section-layout .breadcrumbs a:hover { color: var(--accent-red); }
body.section-layout .breadcrumbs a:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 4px; }
body.section-layout .breadcrumbs .sep { margin: 0; color: #737373; }
body.section-layout main.service-page :is(.service-title, .section-title, .cta-title, .step-card h3, .step-card h4) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    body.section-layout main.blog-detail-page .bd-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 800px) {
    body.section-layout main.blog-detail-page .bd-hero { padding-top: 36px; }
    body.section-layout :is(main.service-page, main.services-hub-page) > :is(.service-hero, .services-hero) { padding-top: 36px; }
}
@media (max-width: 600px) {
    body.section-layout main.service-page .service-hero-features {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    body.section-layout main.service-page .cta-title { font-size: clamp(28px, 7.5vw, 36px); }
}
@media (max-width: 520px) {
    body.section-layout { --section-gutter: 20px; }
    body.section-layout main.blog-detail-page .bd-hero { padding-top: 28px; }
    body.section-layout :is(main.service-page, main.services-hub-page) > :is(.service-hero, .services-hero) { padding-top: 28px; }
    body.section-layout .breadcrumbs { font-size: 11px; margin-bottom: 24px; }
}