.sgm61-page,
.sgm61-page * {
    box-sizing: border-box;
}

.sgm61-page {
    --wine: #8c2531;
    --wine-dark: #721a26;

    --blue: #53798f;
    --blue-dark: #315267;

    --text: #526977;
    --muted: #81939d;

    --cream: #f8f3ed;
    --white: #fffdfa;

    --rose-soft: #f5e5e3;
    --blue-soft: #edf4f7;
    --green-soft: #edf1e5;
    --gold-soft: #f4ecde;

    width: 100%;
    min-height: 100vh;

    margin: 0;

    padding:
        38px
        max(24px, calc((100vw - 1240px) / 2))
        78px;

    background:
        radial-gradient(
            circle at 7% 4%,
            rgba(140,37,49,.035),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 18%,
            rgba(83,121,143,.04),
            transparent 26%
        ),
        var(--cream);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

.sgm61-svg-library {
    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;
}

.sgm61-page svg {
    display: block;
}

.sgm61-page img {
    display: block;

    max-width: 100%;

    border: 0;
}

.sgm61-page h1,
.sgm61-page h2,
.sgm61-page h3,
.sgm61-page p,
.sgm61-page figure,
.sgm61-page ul {
    margin-top: 0;
}

.sgm61-page strong {
    color: #355060;
}


/* ========================================
   HERO
   ======================================== */

.sgm61-hero {
    max-width: 1180px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 54px;

    align-items: center;

    margin: 0 auto 34px;

    padding: 9px 7px 24px;
}

.sgm61-kicker,
.sgm61-section-label {
    color: #b57973;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;

    letter-spacing: .17em;
    text-transform: uppercase;
}

.sgm61-kicker {
    margin-bottom: 8px;
}

.sgm61-hero h1 {
    max-width: 850px;

    margin-bottom: 13px;

    color: var(--wine-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            40px,
            4.3vw,
            60px
        );

    line-height: 1.04;

    letter-spacing: -.025em;
}

.sgm61-lead {
    max-width: 770px;

    margin-bottom: 24px;

    color: #5e7887;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;
    line-height: 1.48;
}


/* HERO BENEFITS */

.sgm61-benefits {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 17px;
}

.sgm61-benefit {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}

.sgm61-benefit-icon {
    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    display: grid;
    place-items: center;

    border-radius: 50%;
}

.sgm61-benefit-icon svg {
    width: 22px;
    height: 22px;

    fill: currentColor;
}

.sgm61-blue {
    background: var(--blue-soft);

    color: #537b93;
}

.sgm61-red {
    background: var(--rose-soft);

    color: #a44a53;
}

.sgm61-green {
    background: var(--green-soft);

    color: #647b48;
}

.sgm61-gold {
    background: var(--gold-soft);

    color: #8b6a4f;
}

.sgm61-benefit strong {
    display: block;

    margin-bottom: 2px;

    color: #3c5767;

    font-size: 13px;
    line-height: 1.25;
}

.sgm61-benefit small {
    display: block;

    color: #8697a0;

    font-size: 11px;
    line-height: 1.28;
}


/* HERO ART */

.sgm61-hero-art {
    text-align: center;
}

.sgm61-script {
    color: #58798d;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 43px;
    line-height: .97;

    transform: rotate(-6deg);
}

.sgm61-script span {
    font-size: 35px;
}

.sgm61-values {
    margin-top: 25px;

    color: #b9827d;

    font-size: 11px;
    line-height: 1.9;

    letter-spacing: .22em;
}


/* ========================================
   CONTENT GRID
   ======================================== */

.sgm61-content-grid {
    max-width: 1180px;

    display: grid;
    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        );

    gap: 20px;

    margin:
        0 auto
        24px;
}


/* ========================================
   NORMAL CARD
   ======================================== */

.sgm61-card {
    grid-column: span 6;

    min-width: 0;

    padding: 25px;

    border:
        1px solid
        rgba(124,77,52,.09);

    border-radius: 20px;

    background:
        rgba(
            255,
            253,
            250,
            .97
        );

    box-shadow:
        0 11px 34px
            rgba(75,51,36,.055),
        0 2px 6px
            rgba(75,51,36,.025);
}

.sgm61-card-wide {
    grid-column: 1 / -1;
}


/* ========================================
   CARD WITH IMAGE
   ======================================== */

.sgm61-card-image {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 43%);

    gap: 25px;

    padding:
        12px
        12px
        12px
        29px;

    align-items: stretch;
}

.sgm61-card-image.sgm61-image-left {
    grid-template-columns:
        minmax(360px, 43%)
        minmax(0, 1fr);

    padding:
        12px
        29px
        12px
        12px;
}

.sgm61-image-left .sgm61-image {
    grid-column: 1;
    grid-row: 1;
}

.sgm61-image-left .sgm61-card-copy {
    grid-column: 2;
    grid-row: 1;
}

.sgm61-card-copy {
    min-width: 0;

    padding: 16px 0;
}


/* ========================================
   HEADING
   ======================================== */

.sgm61-card-heading {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 14px;
}

.sgm61-round-icon {
    flex: 0 0 55px;

    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f2d8d6,
            #f8eae7
        );

    color: var(--wine);
}

.sgm61-round-icon svg {
    width: 25px;
    height: 25px;

    fill: currentColor;
}

.sgm61-section-label {
    margin-bottom: 6px;
}

.sgm61-page h2 {
    margin-bottom: 0;

    color: var(--wine-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            25px,
            2.35vw,
            35px
        );

    line-height: 1.16;
}

.sgm61-page h3 {
    color: var(--blue-dark);

    font-size: 18px;
    line-height: 1.35;
}


/* ========================================
   BODY CONTENT
   ======================================== */

.sgm61-body {
    color: var(--text);

    font-size: 15px;
    line-height: 1.66;
}

.sgm61-body p {
    margin-bottom: 13px;

    color: var(--text);

    font-size: 15px;
    line-height: 1.66;
}

.sgm61-body p:last-child {
    margin-bottom: 0;
}

.sgm61-body ul,
.sgm61-body ol {
    margin:
        12px 0
        13px;

    padding-left: 21px;
}

.sgm61-body li {
    margin-bottom: 8px;

    color: var(--text);

    font-size: 14.5px;
    line-height: 1.55;
}

.sgm61-body a {
    color: var(--wine);

    font-weight: 700;

    text-decoration:
        underline
        dotted;

    text-underline-offset: 3px;
}

.sgm61-body blockquote {
    margin:
        17px 0;

    padding:
        15px
        18px;

    border-left:
        3px solid
        #b77772;

    border-radius:
        0
        12px
        12px
        0;

    background: #faf1ec;

    color: #617684;
}

.sgm61-body table {
    width: 100%;

    margin:
        17px 0;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border:
        1px solid
        #e5ddd6;

    border-radius: 13px;
}

.sgm61-body th,
.sgm61-body td {
    padding:
        10px
        12px;

    border-bottom:
        1px solid
        #e8e1da;

    text-align: left;

    vertical-align: top;
}

.sgm61-body th {
    background: #f3ebe4;

    color: #445e6e;

    font-size: 13px;
}

.sgm61-body td {
    background: #fffdf9;

    font-size: 13px;
}


/* ========================================
   IMAGE FRAME
   ======================================== */

.sgm61-image {
    position: relative;

    min-width: 0;

    min-height: 300px;

    margin: 0;

    overflow: hidden;

    border-radius: 17px;

    background: #eae4de;
}

.sgm61-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ========================================
   CONTACT
   ======================================== */

.sgm61-contact {
    max-width: 1180px;

    display: grid;

    grid-template-columns:
        64px
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: center;

    margin:
        0 auto;

    padding:
        26px
        30px;

    border:
        1px solid
        #e8ddd3;

    border-radius: 21px;

    background:
        linear-gradient(
            120deg,
            #f0e6dc,
            #f8f2eb
        );
}

.sgm61-contact-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff8f2;

    color: var(--wine);
}

.sgm61-contact-icon svg {
    width: 27px;
    height: 27px;

    fill: currentColor;
}

.sgm61-contact h2 {
    margin:
        5px 0
        6px;

    font-size: 29px;
}

.sgm61-contact p {
    max-width: 730px;

    margin: 0;

    color: var(--text);

    font-size: 14px;
    line-height: 1.55;
}

.sgm61-contact-buttons {
    display: flex;

    gap: 9px;

    flex-wrap: wrap;
}

.sgm61-primary-button,
.sgm61-secondary-button {
    display: inline-block;

    padding:
        10px
        17px;

    border-radius: 999px;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;

    text-decoration: none !important;
}

.sgm61-primary-button {
    background: var(--wine);

    color: #fff !important;
}

.sgm61-secondary-button {
    border:
        1px solid
        #dacabd;

    background: #fffaf5;

    color: var(--wine) !important;
}


/* ========================================
   HOVER
   ======================================== */

@media (hover: hover) {

    .sgm61-card {
        transition:
            transform .18s ease,
            box-shadow .18s ease;
    }

    .sgm61-card:hover {
        transform:
            translateY(-2px);

        box-shadow:
            0 15px 42px
                rgba(75,51,36,.075),
            0 3px 8px
                rgba(75,51,36,.035);
    }

}


/* ========================================
   TABLET
   ======================================== */

@media (max-width: 1020px) {

    .sgm61-page {
        padding-left: 22px;
        padding-right: 22px;
    }

    .sgm61-hero {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .sgm61-hero-art {
        display: none;
    }

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

    .sgm61-card-image,
    .sgm61-card-image.sgm61-image-left {
        grid-template-columns:
            minmax(0, 1fr)
            340px;

        padding:
            12px
            12px
            12px
            24px;
    }

    .sgm61-image-left .sgm61-image {
        grid-column: 2;
    }

    .sgm61-image-left .sgm61-card-copy {
        grid-column: 1;
    }

}


/* ========================================
   SMALL TABLET
   ======================================== */

@media (max-width: 820px) {

    .sgm61-card {
        grid-column: 1 / -1;
    }

    .sgm61-card-image,
    .sgm61-card-image.sgm61-image-left {
        display: grid;

        grid-template-columns: 1fr;

        padding: 20px;
    }

    .sgm61-image-left .sgm61-image,
    .sgm61-image-left .sgm61-card-copy {
        grid-column: auto;
        grid-row: auto;
    }

    .sgm61-image {
        min-height: 0;

        aspect-ratio: 16 / 10;
    }

    .sgm61-image img {
        position: absolute;

        inset: 0;
    }

    .sgm61-contact {
        grid-template-columns:
            58px
            minmax(0, 1fr);
    }

    .sgm61-contact-buttons {
        grid-column: 2;
    }

}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 620px) {

    .sgm61-page {
        padding:
            24px
            14px
            52px;
    }

    .sgm61-hero {
        margin-bottom: 18px;

        padding: 2px;
    }

    .sgm61-hero h1 {
        font-size: 35px;
    }

    .sgm61-lead {
        font-size: 17px;
    }

    .sgm61-benefits {
        grid-template-columns:
            1fr
            1fr;

        gap:
            14px
            9px;
    }

    .sgm61-benefit-icon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }

    .sgm61-benefit-icon svg {
        width: 19px;
        height: 19px;
    }

    .sgm61-card,
    .sgm61-card-image,
    .sgm61-card-image.sgm61-image-left {
        padding:
            18px
            16px;

        border-radius: 17px;
    }

    .sgm61-card-heading {
        align-items: flex-start;

        gap: 12px;
    }

    .sgm61-round-icon {
        flex-basis: 48px;

        width: 48px;
        height: 48px;
    }

    .sgm61-round-icon svg {
        width: 22px;
        height: 22px;
    }

    .sgm61-page h2 {
        font-size: 25px;
    }

    .sgm61-page h3 {
        font-size: 17px;
    }

    .sgm61-body,
    .sgm61-body p {
        font-size: 15px;
        line-height: 1.62;
    }

    .sgm61-image {
        border-radius: 14px;

        aspect-ratio: 4 / 3;
    }

    .sgm61-body table {
        display: block;

        overflow-x: auto;
    }

    .sgm61-contact {
        display: block;

        padding:
            20px
            17px;
    }

    .sgm61-contact-icon {
        margin-bottom: 14px;
    }

    .sgm61-contact-buttons {
        margin-top: 17px;
    }

}