/* ==========================================================
   TEMPLE REFERRALS — PUBLIC HOME ONLY
   Does not style dashboard / guide / admin.
   ========================================================== */

.tr-home {
    --tr-dark: #090806;
    --tr-dark-2: #100d09;
    --tr-cream: #f1ece2;
    --tr-ink: #17130e;
    --tr-gold: #c48b37;
    --tr-gold-light: #d7aa62;
    --tr-muted-dark: rgba(241,236,226,.58);
    --tr-muted-light: #756b5e;

    margin:
        -54px
        calc(50% - 50vw)
        -88px;

    font-family:
        "Manrope",
        sans-serif;
}


.tr-home *,
.tr-home *::before,
.tr-home *::after {
    box-sizing: border-box;
}


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

.tr-hero {
    min-height: 650px;

    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(360px,.75fr);

    align-items: center;

    gap: 76px;

    padding:
        90px
        max(24px, calc((100vw - 1180px) / 2))
        96px;

    overflow: hidden;

    color: var(--tr-cream);

    background:
        radial-gradient(
            circle at 76% 23%,
            rgba(196,139,55,.14),
            transparent 34%
        ),
        var(--tr-dark);
}


.tr-hero-glow {
    width: 440px;
    height: 440px;

    position: absolute;

    right: 9%;
    top: 80px;

    border:
        1px solid rgba(196,139,55,.08);

    border-radius: 50%;

    pointer-events: none;
}


.tr-hero-copy,
.tr-signal {
    position: relative;
    z-index: 2;
}


.tr-label {
    color: var(--tr-gold);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .13em;
}


.tr-hero h1 {
    margin:
        18px 0 26px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(72px,7.3vw,112px);

    font-weight: 700;

    line-height: .84;

    letter-spacing: -.02em;
}


.tr-hero h1 span {
    display: block;
}


.tr-hero h1 em {
    color: var(--tr-gold);

    font-style: normal;
}


.tr-hero-copy > p {
    max-width: 610px;

    margin: 0;

    color: var(--tr-muted-dark);

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


.tr-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;
}


.tr-button {
    min-height: 48px;

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

    padding:
        0 22px;

    border:
        1px solid transparent;

    border-radius: 3px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform .16s ease,
        border-color .16s ease;
}


.tr-button:hover {
    transform:
        translateY(-1px);
}


.tr-button-gold {
    color: #0c0a07;

    background:
        linear-gradient(
            135deg,
            #d7a85a,
            #b87d2d
        );
}


.tr-button-dark {
    color: #eee7dc;

    border-color:
        rgba(216,171,92,.23);

    background:
        rgba(255,255,255,.018);
}


/* ==========================================================
   HERO SIGNAL CARD
   ========================================================== */

.tr-signal {
    border:
        1px solid rgba(196,139,55,.2);

    background:
        rgba(255,255,255,.018);
}


.tr-signal-head {
    min-height: 120px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    padding: 25px;

    border-bottom:
        1px solid rgba(196,139,55,.15);
}


.tr-signal-head span {
    display: block;

    margin-bottom: 10px;

    color: rgba(241,236,226,.36);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .12em;
}


.tr-signal-head strong {
    display: block;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 17px;
    line-height: 1.4;
}


.tr-signal-head i {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    margin-top: 3px;

    border-radius: 50%;

    background:
        var(--tr-gold);

    box-shadow:
        0 0 0 5px rgba(196,139,55,.08);
}


.tr-signal-grid {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);
}


.tr-signal-grid > div {
    min-height: 180px;

    padding: 23px;

    border-right:
        1px solid rgba(196,139,55,.12);
}


.tr-signal-grid > div:last-child {
    border-right: 0;
}


.tr-signal-grid span {
    display: block;

    margin-bottom: 42px;

    color: rgba(196,139,55,.48);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;
}


.tr-signal-grid strong {
    display: block;

    margin-bottom: 7px;

    color: var(--tr-cream);

    font-size: 13px;
}


.tr-signal-grid small {
    display: block;

    color: var(--tr-muted-dark);

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


/* ==========================================================
   PROCESS
   ========================================================== */

.tr-process {
    padding:
        105px
        max(24px, calc((100vw - 1180px) / 2))
        120px;

    color:
        var(--tr-ink);

    background:
        var(--tr-cream);
}


.tr-process-head {
    max-width: 650px;

    margin-bottom: 55px;
}


.tr-process-head h2,
.tr-login h2 {
    margin:
        15px 0 24px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(62px,5.5vw,88px);

    font-weight: 700;

    line-height: .9;

    letter-spacing: -.015em;
}


.tr-process-head h2 span {
    color:
        var(--tr-gold);
}


.tr-process-head p,
.tr-login p {
    max-width: 610px;

    margin: 0;

    color:
        var(--tr-muted-light);

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


.tr-process-grid {
    display: grid;
    grid-template-columns:
        repeat(4,1fr);

    border-top:
        1px solid rgba(23,19,14,.16);

    border-bottom:
        1px solid rgba(23,19,14,.16);
}


.tr-process-grid article {
    min-height: 255px;

    padding:
        28px 26px;

    border-right:
        1px solid rgba(23,19,14,.14);
}


.tr-process-grid article:last-child {
    border-right: 0;
}


.tr-step {
    display: block;

    margin-bottom: 70px;

    color:
        var(--tr-gold);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 9px;
}


.tr-process-grid h3 {
    margin:
        0 0 10px;

    font-family:
        "Manrope",
        sans-serif;

    font-size: 15px;
}


.tr-process-grid p {
    margin: 0;

    color:
        var(--tr-muted-light);

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


/* ==========================================================
   FINAL CTA
   ========================================================== */

.tr-login {
    min-height: 330px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 70px;

    padding:
        70px
        max(24px, calc((100vw - 1180px) / 2));

    color:
        var(--tr-cream);

    background:
        var(--tr-dark);
}


.tr-login h2 {
    margin-bottom:
        18px;

    font-size:
        clamp(52px,4.8vw,76px);
}


.tr-login .tr-button {
    min-width:
        210px;

    flex:
        0 0 auto;
}


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

@media (max-width: 760px) {

    .tr-home {
        margin:
            -38px
            calc(50% - 50vw)
            -88px;
    }


    .tr-hero {
        min-height: 0;

        grid-template-columns:
            1fr;

        gap: 55px;

        padding:
            62px 17px
            68px;
    }


    .tr-hero-glow {
        display: none;
    }


    .tr-hero h1 {
        margin-top:
            20px;

        font-size:
            clamp(70px,21vw,102px);
    }


    .tr-hero-copy > p {
        margin-top:
            30px;

        font-size:
            12px;
    }


    .tr-actions {
        width: 100%;

        display: grid;
        grid-template-columns:
            1fr;

        gap: 10px;

        margin-top: 30px;
    }


    .tr-actions .tr-button {
        width: 100%;

        min-height: 52px;
    }


    .tr-signal-grid {
        grid-template-columns:
            1fr;
    }


    .tr-signal-grid > div {
        min-height: auto;

        padding:
            20px;

        border-right: 0;

        border-bottom:
            1px solid rgba(196,139,55,.12);
    }


    .tr-signal-grid > div:last-child {
        border-bottom: 0;
    }


    .tr-signal-grid span {
        margin-bottom:
            24px;
    }


    .tr-process {
        padding:
            75px 17px
            85px;
    }


    .tr-process-head {
        margin-bottom:
            42px;
    }


    .tr-process-head h2 {
        font-size:
            clamp(56px,16vw,76px);
    }


    .tr-process-head p {
        margin-top:
            30px;

        font-size:
            12px;
    }


    .tr-process-grid {
        grid-template-columns:
            1fr;
    }


    .tr-process-grid article {
        min-height: 0;

        padding:
            24px 4px;

        border-right: 0;

        border-bottom:
            1px solid rgba(23,19,14,.14);
    }


    .tr-process-grid article:last-child {
        border-bottom: 0;
    }


    .tr-step {
        margin-bottom:
            30px;
    }


    .tr-login {
        min-height: 0;

        display: block;

        padding:
            70px 17px;
    }


    .tr-login h2 {
        font-size:
            clamp(52px,15vw,70px);
    }


    .tr-login p {
        margin-top:
            28px;
    }


    .tr-login .tr-button {
        width: 100%;

        margin-top:
            32px;
    }

}


/* ==========================================================
   FINAL HOME PAGE SPACING + HORIZONTAL OVERFLOW FIX
   Matches the more controlled "space treatment"
   and stops the side-to-side drift.
   ========================================================== */

html,
body {
    overflow-x: hidden;
}

.tr-home {
    overflow-x: clip;
}


/* A proper centred shell feeling */
.tr-hero,
.tr-process,
.tr-login {
    padding-left: max(28px, calc((100vw - 1180px) / 2));
    padding-right: max(28px, calc((100vw - 1180px) / 2));
}


/* Hero gets a bit more breathing room */
.tr-hero {
    gap: 88px;
    padding-top: 96px;
    padding-bottom: 108px;
}


/* Keep copy width under control so it feels premium */
.tr-hero-copy > p,
.tr-process-head p,
.tr-login p {
    max-width: 760px;
}


/* Buttons sit a touch lower like the other pages */
.tr-actions {
    margin-top: 40px;
}


/* Signal card should never create page drift */
.tr-signal {
    max-width: 100%;
    overflow: hidden;
}


/* Avoid any child forcing horizontal scroll */
.tr-hero-copy,
.tr-signal,
.tr-process-head,
.tr-process-grid,
.tr-login,
.tr-process-grid article {
    min-width: 0;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */
@media (max-width: 760px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .tr-home {
        margin: -38px calc(50% - 50vw) -88px;
        overflow-x: clip !important;
    }

    .tr-hero,
    .tr-process,
    .tr-login {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .tr-hero {
        gap: 60px !important;
        padding-top: 70px !important;
        padding-bottom: 74px !important;
    }

    .tr-hero-copy > p {
        margin-top: 28px !important;
        max-width: 100% !important;
    }

    .tr-actions {
        margin-top: 32px !important;
    }

    .tr-signal {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}


/* ==========================================================
   DESKTOP HERO HEADING LINE SPACING
   Stop the two title lines touching.
   ========================================================== */

@media (min-width: 761px) {

    .tr-hero h1 {
        line-height: .92 !important;
    }

}


@media (min-width: 761px) {

    .tr-hero h1 {
        line-height: 1 !important;
    }

}


/* ==========================================================
   HERO TITLE LINE SPACING
   Desktop + mobile
   ========================================================== */

.tr-hero h1 {
    line-height: 1.06 !important;
}


/* ==========================================================
   MOBILE FOOTER CENTRE
   Referrals home page only
   ========================================================== */

@media (max-width: 620px) {

    footer .footer-inner {
        width: 100% !important;

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

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        text-align: center !important;
    }

    footer .footer-inner > div {
        width: 100% !important;
        text-align: center !important;
    }

}


/* ==========================================================
   MOBILE FOOTER TRUE CENTRE
   Override inherited .wrap sizing on homepage.
   ========================================================== */

@media (max-width: 620px) {

    footer .footer-inner {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        box-sizing: border-box !important;

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

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

    footer .footer-inner > div {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }

}


/* ==========================================================
   OFFICIAL SHAOLIN SAGA WORDMARK — PUBLIC REFERRALS HOME
   ========================================================== */

.site-nav .tr-header-wordmark {
    display: block;

    width: auto;
    height: 44px;

    max-width: none;

    object-fit: contain;
}


/* Give the public header the same wider shell treatment */
.site-nav .nav-inner {
    width: calc(100% - 48px);
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 620px) {

    .site-nav .nav-inner {
        width: calc(100% - 32px);
    }

    .site-nav .tr-header-wordmark {
        height: 35px;
    }

}



/* ===== TEMPLE STANDARD FOOTER ===== */

.temple-standard-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 20px !important;

    background: rgba(23, 21, 16, .96) !important;

    border-top:
        1px solid
        rgba(185, 148, 85, .24)
        !important;

    color: #b9a789 !important;
}

.temple-standard-footer .footer-inner {
    width: 100% !important;
    max-width: none !important;

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

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

    text-align: center !important;

    font-family: 'DM Sans', system-ui, sans-serif !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

@media (max-width: 620px) {

    .temple-standard-footer {
        padding: 24px 18px !important;
    }

    .temple-standard-footer .footer-inner {
        display: block !important;
        width: 100% !important;
        font-size: .76rem !important;
        text-align: center !important;
    }

}