/* =========================================================
   AXIA — RIGHT TO CHOOSE
   CLEAN REPLACEMENT
   File name on server: axia-right-to-choose.css

   IMPORTANT:
   - This replaces the previous v1-v9 file completely.
   - The two referral sections use the SAME component styling.
   - .referral-rtc--reverse ONLY swaps the two columns.
   ========================================================= */

/* =========================================================
   01. PAGE TOKENS / WIDTH RESET
   ========================================================= */

body:has(.hero-group-rtc) {
    --rtc-purple: #351078;
    --rtc-purple-mid: #482075;
    --rtc-purple-bright: #7567dd;
    --rtc-body: #51465b;
    --rtc-page: 1360px;
    --rtc-content: 1280px;

    overflow-x: hidden;
}

.wp-block-post-content:has(.hero-group-rtc) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hero-group-rtc,
.hero-group-rtc *,
.info-points-rtc,
.info-points-rtc *,
.referral-rtc,
.referral-rtc * {
    box-sizing: border-box;
}


/* =========================================================
   02. HERO
   ========================================================= */

.hero-group-rtc {
    position: relative;
    isolation: isolate;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 3% 88%,
            rgba(247, 216, 184, .42) 0,
            rgba(247, 216, 184, .42) 84px,
            transparent 85px
        ),
        linear-gradient(
            135deg,
            #fcfbfe 0%,
            #faf7fd 56%,
            #f2edf8 100%
        );
}

.hero-group-rtc::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: -160px;
    right: -110px;

    width: clamp(320px, 28vw, 520px);
    height: clamp(280px, 25vw, 450px);

    border-radius:
        46% 54% 61% 39%
        /
        56% 42% 58% 44%;

    background: rgba(208, 201, 255, .30);

    pointer-events: none;
}

.hero-columns-rtc,
.hero-columns-rtc.wp-block-columns {
    position: relative;
    z-index: 2;

    width: min(var(--rtc-page), calc(100% - 72px)) !important;
    max-width: var(--rtc-page) !important;
    min-height: 590px;

    display: grid !important;
    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr) !important;

    gap: clamp(48px, 6vw, 92px) !important;
    align-items: center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    flex-wrap: initial !important;
}

.hero-columns-rtc > .wp-block-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: none !important;
    flex-basis: auto !important;

    margin: 0 !important;
}

.hero-content-rtc {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    width: 100% !important;
    min-width: 0;

    padding: 76px 0 96px !important;
}

.hero-content-rtc h1 {
    max-width: 680px;

    margin: 0 0 22px !important;

    color: var(--rtc-purple) !important;

    font-size: clamp(3.7rem, 5.25vw, 5.8rem) !important;
    font-weight: 800 !important;
    line-height: .94 !important;
    letter-spacing: -.052em !important;
}

.hero-content-rtc > p {
    max-width: 585px;

    margin: 0 0 14px !important;

    color: #433556;

    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    font-weight: 500;
    line-height: 1.6;
}

.hero-content-rtc .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px !important;

    margin: 28px 0 0 !important;
}

.hero-content-rtc .wp-block-button {
    margin: 0 !important;
}

.hero-content-rtc .wp-block-button__link,
.hero-content-rtc .wp-element-button {
    min-height: 50px;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 12px 25px !important;

    background: var(--rtc-purple-mid) !important;
    color: #fff !important;

    border: 2px solid var(--rtc-purple-mid) !important;
    border-radius: 11px !important;

    font-size: .92rem !important;
    font-weight: 700 !important;
    line-height: 1.2;

    text-decoration: none !important;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .hero-content-rtc .wp-block-button__link:hover,
    .hero-content-rtc .wp-block-button__link:focus-visible,
    .hero-content-rtc .wp-element-button:hover,
    .hero-content-rtc .wp-element-button:focus-visible {
        transform: translateY(-2px);

        background: #fff !important;
        color: var(--rtc-purple-mid) !important;
        border-color: var(--rtc-purple-mid) !important;
    }
}


/* =========================================================
   03. HERO IMAGE
   ========================================================= */

.hero-image-rtc {
    position: relative;

    width: 100% !important;
    min-width: 0;
    height: 455px;

    margin: 0 !important;

    overflow: visible !important;
}

.hero-image-rtc figure,
.hero-image-rtc .wp-block-image {
    position: relative;
    z-index: 2;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

    border-radius:
        43% 57% 46% 54%
        /
        39% 42% 58% 61% !important;

    box-shadow:
        0 22px 50px
        rgba(52, 34, 77, .08);
}

.hero-image-rtc img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

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

.hero-image-rtc::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: -20px -24px -18px -18px;

    border: 2px solid rgba(117, 103, 221, .34);

    border-radius:
        52% 48% 58% 42%
        /
        42% 61% 39% 58%;

    transform: rotate(2deg);

    pointer-events: none;
}

.hero-image-rtc::after {
    content: "";

    position: absolute;
    z-index: 4;

    right: -16px;
    bottom: 18px;

    width: 30px;
    height: 30px;

    background: #d39b49;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 L18.4 11.8 L28 16 L18.4 18.4 L16 28 L13.6 18.4 L4 16 L13.6 13.6 Z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 L18.4 11.8 L28 16 L18.4 18.4 L16 28 L13.6 18.4 L4 16 L13.6 13.6 Z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    pointer-events: none;
}


/* =========================================================
   04. THREE INFO POINTS
   CURRENT FLAT GUTENBERG STRUCTURE:
   info-column
   ├── Image
   ├── H3
   └── Paragraph
   ========================================================= */

.info-points-rtc {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 28px 30px !important;

    background: #fff;
}

.info-columns-rtc,
.info-columns-rtc.wp-block-columns {
    width: min(1260px, 100%) !important;
    max-width: 1260px !important;

    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 0 !important;
    align-items: stretch !important;

    margin: 0 auto !important;
    padding: 14px 0 !important;

    flex-wrap: initial !important;

    background: #fff;

    border: 1px solid rgba(74, 33, 140, .10);
    border-radius: 20px;

    box-shadow:
        0 14px 34px
        rgba(52, 34, 77, .05);
}

.info-columns-rtc > .info-column,
.info-columns-rtc > .info-column.wp-block-column {
    position: relative;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    /*
     * Compact fixed rhythm:
     * every heading starts at the same Y position,
     * every paragraph starts at the same Y position.
     */
    min-height: 104px;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 14px 34px 14px 96px !important;

    flex: none !important;
    flex-basis: auto !important;
}

.info-columns-rtc > .info-column:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 8px;
    right: 0;
    bottom: 8px;

    width: 1px;

    background: rgba(91, 60, 132, .14);
}

/* icon */
.info-columns-rtc > .info-column > figure,
.info-columns-rtc > .info-column > .wp-block-image {
    position: absolute !important;

    top: 50% !important;
    left: 34px !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%) !important;
}

.info-columns-rtc > .info-column > figure img,
.info-columns-rtc > .info-column > .wp-block-image img,
.info-columns-rtc > .info-column > img {
    display: block !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;

    object-fit: contain !important;
}

/* same H3 start line */
.info-columns-rtc > .info-column > h3 {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    /*
     * Wide desktop: all three headings fit naturally on one line,
     * so do not reserve unnecessary second-line space.
     */
    min-height: 0;

    display: block !important;

    margin: 0 0 5px !important;

    color: var(--rtc-purple-mid) !important;

    font-size: 1.03rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;

    text-align: left !important;

    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* same paragraph start line */
.info-columns-rtc > .info-column > p {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;

    color: var(--rtc-body) !important;

    font-size: .9rem !important;
    line-height: 1.52 !important;

    text-align: left !important;

    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* =========================================================
   05. REFERRAL SECTIONS — STRUCTURAL VERSION
   Both sections have the same Gutenberg order:
   1. content column
   2. image column

   This deliberately uses the actual column position as the
   fallback, so the layout still works even if a Gutenberg
   block has been renamed but its Additional CSS Class was
   missed.
   ========================================================= */

.referral-rtc {
    width: min(var(--rtc-content), calc(100% - 64px)) !important;
    max-width: var(--rtc-content) !important;

    margin: 86px auto 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
}

.referral-rtc .referral-columns,
.referral-rtc .referral-columns.wp-block-columns {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(410px, .92fr) !important;

    gap: clamp(58px, 7vw, 98px) !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: initial !important;
}

.referral-rtc .referral-columns > .wp-block-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
}


/* =========================================================
   06. REFERRAL COPY
   First Gutenberg column in both sections.
   ========================================================= */

.referral-content-rtc,
.referral-rtc .referral-columns > .wp-block-column:first-child {
    position: relative;
    z-index: 2;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    align-self: center !important;
}

.referral-content-rtc > p:first-child,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> p:first-child {
    position: relative;

    width: fit-content;

    margin: 0 0 18px !important;
    padding-left: 35px;

    color: var(--rtc-purple-bright) !important;

    font-size: .76rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .10em !important;

    text-transform: uppercase;
}

.referral-content-rtc > p:first-child::before,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> p:first-child::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 25px;
    height: 2px;

    transform: translateY(-50%);

    border-radius: 999px;

    background: var(--rtc-purple-bright);
}

.referral-content-rtc h2,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> h2 {
    max-width: 680px;

    margin: 0 0 24px !important;

    color: var(--rtc-purple) !important;

    font-size: clamp(3rem, 4vw, 4.45rem) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
}

.referral-content-rtc > p:not(:first-child),
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> p:not(:first-child) {
    max-width: 690px;

    margin: 0 0 16px !important;

    color: var(--rtc-body);

    font-size: 1rem !important;
    line-height: 1.67 !important;
}

.referral-content-rtc a,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
a {
    color: var(--rtc-purple-mid);
    text-underline-offset: 3px;
}


/* =========================================================
   07. IMPORTANT NOTES LIST
   ========================================================= */

.referral-content-rtc > ul,
.referral-content-rtc > .wp-block-list,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> ul,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> .wp-block-list {
    max-width: 690px;

    list-style: none !important;

    margin: 28px 0 0 !important;
    padding: 23px 25px !important;

    background:
        linear-gradient(
            135deg,
            #faf7ff 0%,
            #f3edfb 100%
        );

    border: 1px solid rgba(74, 33, 140, .09);
    border-radius: 18px;
}

.referral-content-rtc > ul::before,
.referral-content-rtc > .wp-block-list::before,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> ul::before,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
> .wp-block-list::before {
    content: "Please note";

    display: block;

    margin: 0 0 13px;

    color: var(--rtc-purple-mid);

    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;

    text-transform: uppercase;
}

.referral-content-rtc li,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
li {
    position: relative;

    margin: 0 0 10px !important;
    padding-left: 27px;

    color: #493f50;

    font-size: .9rem;
    line-height: 1.5;
}

.referral-content-rtc li:last-child,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
li:last-child {
    margin-bottom: 0 !important;
}

.referral-content-rtc li::before,
.referral-rtc
.referral-columns
> .wp-block-column:first-child
li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff;
    color: var(--rtc-purple-bright);

    font-size: .68rem;
    font-weight: 900;
}


/* =========================================================
   08. REFERRAL IMAGE
   Second Gutenberg column in both sections.
   ========================================================= */

.referral-image-rtc,
.referral-rtc .referral-columns > .wp-block-column:nth-child(2) {
    position: relative;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    align-self: center !important;

    margin: 0 !important;

    overflow: visible !important;
}

.referral-image-rtc figure,
.referral-image-rtc .wp-block-image,
.referral-rtc
.referral-columns
> .wp-block-column:nth-child(2)
figure,
.referral-rtc
.referral-columns
> .wp-block-column:nth-child(2)
.wp-block-image {
    position: relative;
    z-index: 2;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    aspect-ratio: 4 / 3 !important;

    margin: 0 !important;

    overflow: hidden !important;

    border-radius:
        34px 92px 38px 72px !important;

    box-shadow:
        0 18px 42px
        rgba(47, 31, 68, .08);
}

.referral-image-rtc img,
.referral-rtc
.referral-columns
> .wp-block-column:nth-child(2)
img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 0 !important;
    transform: none !important;
}

.referral-image-rtc::before,
.referral-rtc
.referral-columns
> .wp-block-column:nth-child(2)::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: -22px;
    right: -24px;
    bottom: -24px;
    left: 8%;

    border: 2px solid rgba(117, 103, 221, .24);

    border-radius:
        47% 53% 60% 40%
        /
        51% 43% 57% 49%;

    background: transparent;

    transform: rotate(4deg);

    pointer-events: none;
}


/* =========================================================
   09. REVERSE MODIFIER
   The ONLY change: swap column 1 and column 2.
   No other styling changes.
   ========================================================= */

.referral-rtc--reverse {
    margin-top: 96px !important;
    margin-bottom: 88px !important;
}

.referral-rtc--reverse
.referral-columns
> .wp-block-column:first-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.referral-rtc--reverse
.referral-columns
> .wp-block-column:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


/* =========================================================
   09B. INFO HEADINGS — MID WIDTH
   At widths where the longest heading can wrap, reserve a
   two-line heading row and centre shorter headings inside it.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1120px) {

    .info-columns-rtc > .info-column > h3 {
        min-height: 2.5em;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        margin-bottom: 4px !important;
    }

}


/* =========================================================
   09C. RIGHT TO CHOOSE — BOTTOM ACTION BUTTONS
   Supports the Buttons block either:
   - inside referral-rtc--reverse after referral-columns, or
   - immediately after referral-rtc--reverse.
   ========================================================= */

.referral-rtc--reverse > .wp-block-buttons,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons,
.referral-rtc--reverse + .wp-block-buttons {
    width: min(var(--rtc-content), calc(100% - 64px)) !important;
    max-width: var(--rtc-content) !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 16px !important;

    margin:
        46px
        auto
        72px !important;

    padding: 0 !important;
}

.referral-rtc--reverse > .wp-block-buttons .wp-block-button,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button,
.referral-rtc--reverse + .wp-block-buttons .wp-block-button {
    margin: 0 !important;
}

/* Shared homepage-style button shape */
.referral-rtc--reverse > .wp-block-buttons .wp-block-button__link,
.referral-rtc--reverse > .wp-block-buttons .wp-element-button,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button__link,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-element-button,
.referral-rtc--reverse + .wp-block-buttons .wp-block-button__link,
.referral-rtc--reverse + .wp-block-buttons .wp-element-button {
    box-sizing: border-box;

    min-height: 55px;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        0
        26px !important;

    border-radius:
        11px !important;

    font-size:
        .9rem !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    text-align:
        center;

    text-decoration:
        none !important;

    white-space:
        nowrap;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}

/* First button — AXIA purple */
.referral-rtc--reverse > .wp-block-buttons .wp-block-button:first-child .wp-block-button__link,
.referral-rtc--reverse > .wp-block-buttons .wp-block-button:first-child .wp-element-button,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:first-child .wp-block-button__link,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:first-child .wp-element-button,
.referral-rtc--reverse + .wp-block-buttons .wp-block-button:first-child .wp-block-button__link,
.referral-rtc--reverse + .wp-block-buttons .wp-block-button:first-child .wp-element-button {
    background:
        #482075 !important;

    color:
        #ffffff !important;

    border:
        2px solid
        #482075 !important;
}

/* Second button — AXIA homepage green */
.referral-rtc--reverse > .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
.referral-rtc--reverse > .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
.referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button,
.referral-rtc--reverse + .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
.referral-rtc--reverse + .wp-block-buttons .wp-block-button:nth-child(2) .wp-element-button {
    background:
        #164f3e !important;

    color:
        #ffffff !important;

    border:
        2px solid
        #164f3e !important;
}

@media (hover: hover) and (pointer: fine) {

    /* Purple hover matches the homepage purple CTA treatment */
    .referral-rtc--reverse > .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover,
    .referral-rtc--reverse > .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:focus-visible,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:focus-visible,
    .referral-rtc--reverse + .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover,
    .referral-rtc--reverse + .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:focus-visible {
        transform:
            translateY(-2px);

        background:
            #ffffff !important;

        color:
            #482075 !important;

        border-color:
            #482075 !important;
    }

    /* Green hover matches the homepage green treatment */
    .referral-rtc--reverse > .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover,
    .referral-rtc--reverse > .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:focus-visible,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:focus-visible,
    .referral-rtc--reverse + .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover,
    .referral-rtc--reverse + .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:focus-visible {
        transform:
            translateY(-2px);

        background:
            #103c31 !important;

        color:
            #ffffff !important;

        border-color:
            #103c31 !important;
    }

}


/* =========================================================
   10. TABLET
   ========================================================= */

@media (max-width: 980px) {

    .hero-columns-rtc,
    .hero-columns-rtc.wp-block-columns {
        width: calc(100% - 40px) !important;

        gap: 38px !important;
    }

    .hero-image-rtc {
        height: 405px;
    }

    .info-columns-rtc > .info-column,
    .info-columns-rtc > .info-column.wp-block-column {
        min-height: 100px;

        padding:
            13px
            22px
            13px
            76px !important;
    }

    .info-columns-rtc > .info-column > figure,
    .info-columns-rtc > .info-column > .wp-block-image {
        left: 22px !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    .info-columns-rtc > .info-column > figure img,
    .info-columns-rtc > .info-column > .wp-block-image img,
    .info-columns-rtc > .info-column > img {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    .referral-rtc {
        width: calc(100% - 40px) !important;
    }

    .referral-columns,
    .referral-columns.wp-block-columns {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .9fr) !important;

        gap: 40px !important;
    }

    .referral-content-rtc h2 {
        font-size: clamp(2.6rem, 5vw, 3.6rem) !important;
    }
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .referral-rtc--reverse > .wp-block-buttons,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons,
    .referral-rtc--reverse + .wp-block-buttons {
        width: calc(100% - 28px) !important;

        gap: 12px !important;

        margin:
            34px
            auto
            56px !important;
    }

    .referral-rtc--reverse > .wp-block-buttons .wp-block-button,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button,
    .referral-rtc--reverse + .wp-block-buttons .wp-block-button {
        flex: 1 1 100%;
    }

    .referral-rtc--reverse > .wp-block-buttons .wp-block-button__link,
    .referral-rtc--reverse > .wp-block-buttons .wp-element-button,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-block-button__link,
    .referral-rtc--reverse > .referral-columns + .wp-block-buttons .wp-element-button,
    .referral-rtc--reverse + .wp-block-buttons .wp-block-button__link,
    .referral-rtc--reverse + .wp-block-buttons .wp-element-button {
        width: 100% !important;
    }

    .hero-columns-rtc,
    .hero-columns-rtc.wp-block-columns {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        min-height: 0;

        gap: 0 !important;
    }

    .hero-content-rtc {
        order: 1;

        padding: 46px 20px 34px !important;
    }

    .hero-content-rtc h1 {
        font-size: clamp(2.85rem, 13vw, 4.2rem) !important;
    }

    .hero-content-rtc > p {
        font-size: 1rem;
    }

    .hero-content-rtc .wp-block-buttons,
    .hero-content-rtc .wp-block-button,
    .hero-content-rtc .wp-block-button__link,
    .hero-content-rtc .wp-element-button {
        width: 100%;
    }

    .hero-image-rtc {
        order: 2;

        width: calc(100% - 28px) !important;
        height: 315px;

        margin: 0 auto 20px !important;
    }

    .hero-image-rtc figure,
    .hero-image-rtc .wp-block-image {
        border-radius:
            32px 64px 32px 54px !important;
    }


    /* info */
    .info-points-rtc {
        padding: 14px 14px 30px !important;
    }

    .info-columns-rtc,
    .info-columns-rtc.wp-block-columns {
        grid-template-columns: 1fr !important;

        padding: 4px 18px !important;
    }

    .info-columns-rtc > .info-column,
    .info-columns-rtc > .info-column.wp-block-column {
        min-height: 0;

        padding:
            16px
            4px
            16px
            62px !important;
    }

    .info-columns-rtc > .info-column > figure,
    .info-columns-rtc > .info-column > .wp-block-image {
        left: 4px !important;
    }

    .info-columns-rtc > .info-column:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: auto;
        height: 1px;
    }

    .info-columns-rtc > .info-column > h3 {
        min-height: 0 !important;

        display: block !important;

        margin-bottom: 5px !important;
    }


    /* referral sections */
    .referral-rtc,
    .referral-rtc--reverse {
        width: calc(100% - 28px) !important;

        margin: 58px auto 0 !important;
    }

    .referral-rtc--reverse {
        margin-bottom: 64px !important;
    }

    .referral-columns,
    .referral-columns.wp-block-columns {
        display: flex !important;
        flex-direction: column !important;

        gap: 32px !important;
    }

    /*
     * Both sections become text first / image second.
     * Removes the desktop reverse on mobile.
     */
    .referral-content-rtc,
    .referral-rtc
    .referral-columns
    > .wp-block-column:first-child {
        order: 1 !important;

        grid-column: auto !important;
        grid-row: auto !important;
    }

    .referral-image-rtc,
    .referral-rtc
    .referral-columns
    > .wp-block-column:nth-child(2) {
        order: 2 !important;

        grid-column: auto !important;
        grid-row: auto !important;
    }

    .referral-content-rtc h2 {
        font-size: clamp(2.35rem, 11vw, 3.2rem) !important;
    }

    .referral-image-rtc figure,
    .referral-image-rtc .wp-block-image {
        border-radius:
            28px 58px 28px 48px !important;
    }
}


/* =========================================================
   12. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-content-rtc .wp-block-button__link,
    .hero-content-rtc .wp-element-button {
        transition: none !important;
    }

}