/* Shell shared by the redesigned pages (success stories, contact): hero, buttons, section
   headings and the closing band. Everything is scoped under .ss-page so the old theme is left alone. */

.ss-page {
    --ss-brand: #d02323;
    --ss-brand-dark: #a81818;
    --ss-ink: #22201f;
    --ss-muted: #6f6a67;
    --ss-line: #ece7e2;
    --ss-cream: #fff7ef;
    --ss-radius: 14px;
    --ss-shadow: 0 10px 30px rgba(34, 32, 31, .08);

    background: #fff;
    color: var(--ss-ink);
}

.ss-page section {
    padding: 0;
}

.ss-page p {
    text-align: left;
    color: var(--ss-muted);
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.ss-wrap {
    /* Lines up with the site header, which spans 95% of the window. */
    width: min(1480px, 95%);
    margin: 0 auto;
}

/* ---------- Hero ---------- */

.ss-hero {
    position: relative;
    background: #1b1413 center 35% / cover no-repeat;
    isolation: isolate;
}

.ss-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, rgba(27, 20, 19, .9) 0%, rgba(120, 18, 18, .72) 55%, rgba(208, 35, 35, .45) 100%);
}

.ss-hero__inner {
    /* The site header floats over the top of the page. */
    padding: 190px 0 84px;
    max-width: 680px;
}

.ss-crumbs {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.ss-crumbs a {
    color: #fff;
}

.ss-crumbs li + li::before {
    content: '\203A';
    margin-right: 10px;
    color: rgba(255, 255, 255, .5);
}

.ss-page .ss-hero__title {
    margin: 0 0 14px;
    text-align: left;
    /* The shared custom.js writes a dark colour onto every h1 once the loader finishes. */
    color: #fff !important;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 600;
    line-height: 1.1;
}

.ss-page .ss-hero__lead {
    color: rgba(255, 255, 255, .86);
    font-size: 17px;
    margin-bottom: 30px;
}

/* ---------- Buttons ---------- */

.ss-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.ss-btn:hover,
.ss-btn:focus {
    text-decoration: none;
    transform: translateY(-2px);
}

.ss-btn--primary {
    background: var(--ss-brand);
    color: #fff;
}

.ss-btn--primary:hover,
.ss-btn--primary:focus {
    background: var(--ss-brand-dark);
    color: #fff;
}

.ss-btn--light {
    background: #fff;
    color: var(--ss-brand);
}

.ss-btn--light:hover,
.ss-btn--light:focus {
    background: var(--ss-cream);
    color: var(--ss-brand-dark);
}

.ss-btn--ghost {
    background: transparent;
    border-color: var(--ss-brand);
    color: var(--ss-brand);
}

.ss-btn--ghost:hover,
.ss-btn--ghost:focus {
    background: var(--ss-brand);
    color: #fff;
}

/* ---------- Section headings ---------- */

.ss-page .ss-section {
    padding: 72px 0;
}

.ss-section--tint {
    background: var(--ss-cream);
}

.ss-head {
    max-width: 640px;
    margin: 0 auto 44px;
    text-align: center;
}

.ss-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--ss-brand);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ss-page .ss-head__title {
    margin: 0 0 12px;
    color: var(--ss-ink);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 600;
}

.ss-page .ss-head p {
    text-align: center;
}

.ss-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--ss-brand);
}

.ss-divider::before,
.ss-divider::after {
    content: '';
    width: 44px;
    height: 2px;
    background: var(--ss-line);
}

/* ---------- Photo placeholder ---------- */

/* Fills the picture box edge to edge, like a real photo does. */
.ss-avatar {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #f3ece6 0%, #dcd0c7 100%);
    color: #fff;
    /* The figure scales with the box: about the size a face takes in a real photo. */
    container-type: inline-size;
    font-size: 110px;
    line-height: 1;
    overflow: hidden;
}

.ss-avatar .fa {
    font-size: 78cqw;
    /* Sits on the bottom edge, like a head-and-shoulders portrait. */
    transform: translateY(14%);
}

/* ---------- Call to action ---------- */

.ss-cta {
    background: linear-gradient(120deg, var(--ss-brand-dark), var(--ss-brand));
}

.ss-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 46px 0;
}

.ss-page .ss-cta__title {
    margin: 0 0 6px;
    text-align: left;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
}

.ss-page .ss-cta p {
    color: rgba(255, 255, 255, .85);
}

.ss-cta .ss-btn {
    flex-shrink: 0;
}

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
    .ss-hero__inner {
        padding: 160px 0 60px;
    }

    .ss-page .ss-section {
        padding: 52px 0;
    }

    .ss-cta__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-btn {
        transition: none;
    }
}