.sb-section {
    --sb-ink: #173d4b;
    --sb-teal: #196475;
    --sb-gold: #b58c50;
    padding: 52px 0 24px;
    scroll-margin-top: 110px;
    color: var(--sb-ink)
}

    .sb-section * {
        box-sizing: border-box
    }

.sb-intro {
    position: sticky;
    top: 110px;
    padding: 34px 28px;
    border-radius: 22px;
    background: linear-gradient(150deg,#173d4b,#226675);
    color: #fff;
    overflow: hidden
}

    .sb-intro:before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border: 1px solid #ffffff18;
        border-radius: 50%;
        right: -100px;
        top: -100px;
        box-shadow: 0 0 0 30px #ffffff05,0 0 0 60px #ffffff04;
        pointer-events: none;
        animation: sb-orbit 8s ease-in-out infinite alternate
    }

.sb-kicker {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.8px;
    margin-bottom: 14px;
    color: var(--sb-teal)
}

.sb-intro .sb-kicker {
    color: #e6cca4
}

.petro-services .sb-intro h2 {
    color: #fff;
    font-size: clamp(26px,2.6vw,36px);
    line-height: 1.3;
    margin: 0 0 18px;
    letter-spacing: -.6px
}

.sb-intro h2 em {
    font-weight: 400;
    color: #ecd3af
}

.sb-intro p {
    font-size: 14px;
    line-height: 1.85;
    color: #deeaeb
}

.sb-service {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #ffffff0d;
    border: 1px solid #ffffff25;
    padding: 19px 16px;
    border-radius: 12px;
    margin: 26px 0
}

    .sb-service i {
        font-size: 25px;
        color: #e6cca4
    }

    .sb-service small, .sb-service strong {
        display: block
    }

    .sb-service small {
        font-size: 11px;
        color: #cedfe0;
        margin-bottom: 4px
    }

    .sb-service strong {
        font-size: 15px;
        line-height: 1.5
    }

.sb-steps {
    list-style: none;
    margin: 30px 0;
    padding: 0;
    display: grid;
    gap: 24px
}

    .sb-steps li {
        display: flex;
        align-items: center;
        gap: 14px
    }

        .sb-steps li > span {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            border: 1px solid #d9be9170;
            border-radius: 50%;
            font-size: 11px;
            color: #ebd1a7
        }

    .sb-steps strong, .sb-steps small {
        display: block
    }

    .sb-steps strong {
        font-size: 14px;
        font-weight: 600
    }

    .sb-steps small {
        font-size: 12px;
        color: #ccdedf;
        margin-top: 3px
    }

.sb-intro .sb-note {
    padding-top: 22px;
    border-top: 1px solid #ffffff25;
    font-size: 12px
}

.sb-note i {
    margin-right: 6px
}

.sb-card {
    min-width: 0;
    padding: 28px;
    background: #e8f6ff;
    border: 1px solid #e0e8e7;
    border-radius: 22px;
    box-shadow: 0 18px 65px #173d4b0a
}

    .sb-card header {
        margin-bottom: 18px;
        background: transparent;
    }

        .sb-card header .sb-kicker {
            margin-bottom: 9px
        }

.petro-services .sb-card h3 {
    font-size: 23px;
    line-height: 1.35;
    margin-bottom: 10px
}

.sb-card header p {
    font-size: 15px;
    color: #63757d;
    margin-top: 15px;
}

.sb-required, .sb-grid label span {
    color: #a24a32
}

.sb-fields fieldset {
    padding: 0;
    margin: 0 0 26px;
    border: 0;
    min-width: 0
}

.sb-fields legend {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    padding: 0 0 15px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e9eeed
}

    .sb-fields legend span {
        display: inline-grid;
        place-items: center;
        width: 27px;
        height: 27px;
        background: #edf4f2;
        border-radius: 8px;
        color: #196475;
        font-size: 11px
    }

.sb-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px 16px
}

    .sb-grid > div {
        min-width: 0
    }

    .sb-grid label {
        display: flex;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 7px;
        line-height: 1.5;
        align-items: center;
    }

    .sb-grid input, .sb-grid select, .sb-grid textarea {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;
        border: 1px solid #cedcda;
        border-radius: 9px;
        background: #fbfcfc;
        padding: 12px;
        color: #173d4b;
        font: inherit;
        font-size: 16px;
        line-height: 1.5;
        transition: border-color .2s,box-shadow .2s,background .2s;
        color-scheme: light
    }

    /* Keep Safari's native date control inside its grid column. */
    .sb-grid input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        height: 50px;
        margin: 0;
        text-align: left;
    }

    .sb-grid input[type="date"]::-webkit-date-and-time-value {
        min-width: 0;
        min-height: 1.5em;
        text-align: left;
    }

    .sb-grid input[type="date"]::-webkit-datetime-edit {
        min-width: 0;
        padding: 0;
    }

    .sb-grid textarea {
        resize: vertical;
        min-height: 96px
    }

        .sb-grid input::placeholder, .sb-grid textarea::placeholder {
            color: #82918f;
            opacity: 1
        }

    .sb-grid :is(input,select,textarea):focus {
        outline: 0;
        border-color: #196475;
        background: #fff;
        box-shadow: 0 0 0 3px #19647518
    }

    .sb-grid [aria-invalid=true] {
        border-color: #b23f38
    }

    .sb-grid small {
        display: block;
        font-size: 12px;
        color: #687c80;
        line-height: 1.6;
        margin-left: 6px;
    }

.sb-full {
    grid-column: 1/-1
}

.sb-counter {
    text-align: right
}

.sb-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 8px 0 20px
}

    .sb-consent input {
        width: 18px;
        height: 18px;
        accent-color: #196475;
        margin: 3px 0 0
    }

    .sb-consent label {
        font-size: 14px;
        line-height: 1.8;
        cursor: pointer;
        color: #536a70
    }

.sb-submit {
    width: max-content;
    min-height: 54px;
    border: 0;
    border-radius: 10px;
    padding: 15px 20px;
    background: linear-gradient(100deg,#173d4b,#196475);
    box-shadow: 0 6px 18px #173d4b20;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    transition: transform .2s,box-shadow .2s
}

    .sb-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px #173d4b30
    }

    .sb-submit:focus-visible {
        outline: 3px solid #b58c50;
        outline-offset: 3px
    }

    .sb-submit[aria-disabled=true] {
        opacity: .75;
        cursor: wait
    }

.sb-card .sb-disclaimer {
    font-size: 15px;
    line-height: 1.8;
    color: #687c80;
    margin: 14px 0 0;
    text-align: left;
}

.sb-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.sb-result {
    padding: 20px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.9;
    overflow-wrap: anywhere;
    margin-bottom: 20px
}

.sb-result--success {
    color: #215441;
    background: #eef8f2;
    border: 1px solid #b6dcca
}

.sb-result--error {
    color: #95392f;
    background: #fff4f0;
    border: 1px solid #e6c1b7
}

.sb-result:focus {
    outline: 2px solid #196475;
    outline-offset: 3px
}

.sb-reveal {
    animation: sb-enter .6s ease-out both
}

@keyframes sb-enter {
    from {
        opacity: .4;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes sb-orbit {
    to {
        transform: translate(-12px,18px) scale(1.12)
    }
}

.sb-section.sb-modal {
    display: none;
    position: fixed;
    z-index: 1200;
    inset: 0;
    padding: clamp(16px, 4vw, 56px);
    overflow: auto;
    align-items: center;
    justify-content: center;
}

.sb-section.sb-modal.is-open { display: flex; }
.sb-modal__backdrop { position: fixed; inset: 0; background: rgba(8, 29, 38, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sb-modal .sb-card { position: relative; z-index: 1; width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; margin: auto; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.sb-modal__close { position: fixed; z-index: 2; top: clamp(10px, 2vw, 28px); right: clamp(10px, 2vw, 28px); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(23,61,75,.9); color: #fff; cursor: pointer; font-size: 18px; }
.sb-modal__close:focus-visible, .sb-modal__close:hover { background: #b58c50; outline: 3px solid rgba(255,255,255,.55); outline-offset: 3px; }
body.sb-modal-open { overflow: hidden; }

@media(max-width: 1000px) {
    .sb-section {
        gap: 24px;
        grid-template-columns: minmax(220px,.75fr) minmax(0,1.25fr)
    }

    .sb-card {
        padding: 24px
    }

    .sb-intro {
        padding: 28px 22px
    }

    .sb-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .sb-full {
        grid-column: auto
    }
}

@media(max-width: 720px) {
    .sb-fields, .sb-grid {
        min-width: 0;
        max-width: 100%;
    }

    .sb-grid label {
        flex-wrap: wrap;
    }

    .sb-section {
        display: block;
        padding-top: 30px
    }

    .sb-intro {
        position: relative;
        top: auto;
        margin-bottom: 20px;
        padding: 26px
    }

    .petro-services .sb-intro h2 {
        font-size: 28px
    }

    .sb-steps {
        gap: 15px;
        margin: 22px 0
    }

    .sb-card {
        padding: 24px 18px;
        border-radius: 16px
    }

    .sb-grid input, .sb-grid select, .sb-grid textarea {
        font-size: 16px
    }

        .sb-grid input::placeholder, .sb-grid textarea::placeholder {
            font-size: 14px
        }

    .sb-service {
        margin: 22px 0
    }

    .sb-section .sb-card h3 {
        font-size: 21px
    }
}

@media(prefers-reduced-motion:reduce) {
    .sb-section *, .sb-intro:before {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}