/* ==========================================================
   REIKI PAGE
   Talk with Sian

   TYPOGRAPHY
   ----------------------------------------------------------
   H1      3.7rem / 700
   H2      2.7rem / 700
   H3      1.35rem / 700
   Lead    1.15rem / 400
   Body    1rem / 400
   Label   0.88rem / 600
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

.reiki-page {
    --rk-purple: #7e57c2;
    --rk-purple-light: #a67de0;
    --rk-purple-bright: #9370db;
    --rk-purple-dark: #4b0082;
    --rk-purple-deep: #321842;

    --rk-purple-pale: #f4eff8;
    --rk-purple-soft: #e9ddf3;

    --rk-black: #19161d;
    --rk-text: #48424d;
    --rk-muted: #726a76;

    --rk-white: #ffffff;
    --rk-off-white: #f4f4f3;
    --rk-border: #dedade;

    --rk-h1: 3.7rem;
    --rk-h2: 2.7rem;
    --rk-h3: 1.35rem;

    --rk-lead: 1.15rem;
    --rk-body: 1rem;
    --rk-small: 0.88rem;

    padding-top: 112px;

    overflow: hidden;
}


/* ==========================================================
   TYPOGRAPHY SYSTEM
   ========================================================== */

.reiki-page h1,
.reiki-page h2 {
    font-family: "Playfair Display", serif !important;
}

.reiki-page h3 {
    font-family: Lora, serif !important;
}

.reiki-page h1 {
    font-size: var(--rk-h1);
    font-weight: 700;
    line-height: 1.08;

    color: var(--rk-black);
}

.reiki-page h2 {
    font-size: var(--rk-h2);
    font-weight: 700;
    line-height: 1.13;

    color: var(--rk-black);
}

.reiki-page h3 {
    font-size: var(--rk-h3);
    font-weight: 700;
    line-height: 1.3;

    color: var(--rk-black);
}

.reiki-page p {
    font-size: var(--rk-body);
    font-weight: 400;
    line-height: 1.75;

    color: var(--rk-text);
}

.reiki-page strong {
    font-weight: 700;
}

.rk-label {
    display: inline-block;

    font-family: Montserrat, sans-serif !important;
    font-size: var(--rk-small);
    font-weight: 600;

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

    letter-spacing: 0.04em;
}


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

.rk-hero {
    background-color: var(--rk-off-white);

    padding: 6rem 0 5.5rem;
}

.rk-hero-grid {
    display: grid;

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

    align-items: center;

    gap: 6.5rem;
}

.rk-hero-copy {
    max-width: 650px;
}

.rk-hero-copy .rk-label {
    margin-bottom: 1.4rem;
}

.rk-hero-copy h1 {
    margin-bottom: 1.7rem;
}

.rk-hero-copy h1 span {
    color: var(--rk-purple);
}

.rk-lead {
    max-width: 600px;

    margin-bottom: 2.1rem;

    font-size: var(--rk-lead) !important;
}

.rk-primary-btn {
    display: inline-flex;

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

    gap: 14px;

    padding: 0.85rem 0.9rem 0.85rem 1.4rem;

    background-color: var(--rk-purple);

    color: var(--rk-white) !important;

    border-radius: 100px;

    font-family: Montserrat, sans-serif !important;
    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.rk-primary-btn:hover {
    background-color: var(--rk-purple-dark);

    transform: translateY(-2px);
}

.rk-primary-btn > span {
    width: 35px;
    height: 35px;

    display: inline-flex;

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

    background-color: var(--rk-white);

    color: var(--rk-purple-dark) !important;

    border-radius: 50%;
}

.rk-hero-media img {
    width: 100%;
    height: 610px;

    display: block;

    object-fit: cover;

    border-radius: 7px;
}


/* ==========================================================
   EXPERIENCE
   ========================================================== */

.rk-experience {
    padding: 7rem 0;

    background-color: var(--rk-white);
}

.rk-centered-heading {
    max-width: 850px;

    margin: 0 auto 4rem;

    text-align: center;
}

.rk-centered-heading .rk-label {
    margin-bottom: 1rem;
}

.rk-centered-heading h2 {
    margin-bottom: 0;
}

.rk-centered-heading h2 span {
    color: var(--rk-purple);
}


/* ==========================================================
   EXPERIENCE GRID
   ========================================================== */

.rk-experience-grid {
    display: grid;

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

    grid-template-areas:
        "gentle image personal"
        "private image penyffordd"
        "local local local";

    gap: 8px;
}

.rk-gentle {
    grid-area: gentle;
}

.rk-personal {
    grid-area: personal;
}

.rk-private {
    grid-area: private;
}

.rk-penyffordd {
    grid-area: penyffordd;
}

.rk-experience-image {
    grid-area: image;

    padding: 2rem;

    background-color: #f1f1f0;
}

.rk-experience-image img {
    width: 100%;
    height: 100%;

    min-height: 570px;

    display: block;

    object-fit: cover;

    border-radius: 5px;
}

.rk-experience-cell {
    min-height: 280px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 2.2rem;

    background-color: #f1f1f0;
}

.rk-penyffordd {
    background-color: var(--rk-purple-pale);
}

.rk-icon-box {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: auto;

    background-color: var(--rk-white);

    color: var(--rk-purple);

    border-radius: 5px;

    font-size: 1.25rem;
}

.rk-experience-cell h3 {
    margin-top: 2.5rem;
    margin-bottom: 0.65rem;
}

.rk-experience-cell p {
    max-width: 340px;

    margin-bottom: 0;
}


/* ==========================================================
   HORIZONTAL LOCAL ROW
   ========================================================== */

.rk-local-wide {
    grid-area: local;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 1.5rem;

    padding: 1.7rem 2rem;

    background-color: var(--rk-purple);
}

.rk-local-wide-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    border-radius: 50%;

    background-color: var(--rk-white);

    color: var(--rk-purple);

    font-size: 1.15rem;
}

.rk-local-wide h3 {
    margin: 0 0 0.3rem;

    color: var(--rk-white);
}

.rk-local-wide p {
    max-width: 800px;

    margin: 0;

    color: #f7f1fb !important;
}

.rk-local-wide strong {
    color: var(--rk-white);
}

.rk-local-wide a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;

    padding: 0.85rem 1.25rem;

    border-radius: 100px;

    background-color: var(--rk-white);

    color: #663b98 !important;

    font-family: Montserrat, sans-serif !important;
    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.rk-local-wide a:hover {
    background-color: #eee4f7;

    transform: translateY(-2px);
}


/* ==========================================================
   ABOUT REIKI
   ========================================================== */

.rk-editorial {
    padding: 7rem 0;

    background-color: #f7f3fa;
}

.rk-editorial-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.45fr)
        minmax(0, 1.55fr);

    gap: 5rem;
}

.rk-editorial-label {
    padding-top: 0.45rem;

    color: var(--rk-purple);

    font-size: var(--rk-small);
    font-weight: 600;
}

.rk-editorial-main {
    max-width: 980px;
}

.rk-editorial-main h2 {
    max-width: 900px;

    margin-bottom: 3.4rem;

    color: #231e27;
}

.rk-editorial-main h2 span {
    color: var(--rk-purple);
}

.rk-editorial-intro {
    max-width: 820px;

    margin-bottom: 2.5rem;

    color: #68468a !important;

    font-size: var(--rk-lead) !important;
    font-weight: 500 !important;

    line-height: 1.7 !important;
}


/* ==========================================================
   ABOUT REIKI POINTS
   ========================================================== */

.rk-simple-points {
    display: grid;

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

    gap: 0.9rem 4rem;
}

.rk-simple-points div {
    display: flex;

    gap: 13px;

    color: #332d38;

    font-size: 1rem;
    font-weight: 600;
}

.rk-simple-points div span {
    color: var(--rk-purple) !important;

    font-size: 1.15rem;
    font-weight: 700;
}


/* ==========================================================
   PHOTO BREAK
   ========================================================== */

.rk-photo-break {
    padding: 5rem 0;

    background-color: var(--rk-white);
}

.rk-photo-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 0.95fr);

    gap: 1.5rem;
}

.rk-photo-grid img {
    width: 100%;
    height: 500px;

    display: block;

    object-fit: cover;

    border-radius: 6px;
}


/* ==========================================================
   LOCAL REIKI PANEL
   ========================================================== */

.rk-local {
    padding: 3rem 0 7rem;

    background-color: var(--rk-white);
}

.rk-local-panel {
    display: grid;

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

    overflow: hidden;

    background-color: var(--rk-purple-deep);

    border-radius: 10px;
}

.rk-local-image img {
    width: 100%;
    height: 100%;

    min-height: 530px;

    display: block;

    object-fit: cover;
}

.rk-local-copy {
    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 4.5rem;
}

.rk-dark-label {
    display: block;

    margin-bottom: 1.4rem;

    color: #cfbbda !important;

    font-family: Montserrat, sans-serif !important;
    font-size: var(--rk-small);
    font-weight: 600;

    letter-spacing: 0.04em;
}

.rk-local-copy h2 {
    margin-bottom: 1.5rem;

    color: var(--rk-white);
}

.rk-local-copy h2 span {
    color: #c5a0e6;
}

.rk-local-copy p {
    max-width: 590px;

    color: #f2eaf5 !important;
}

.rk-local-copy strong {
    color: var(--rk-white);
}


/* ==========================================================
   LOCAL REIKI BUTTON
   ========================================================== */

.rk-local-button {
    display: inline-flex;

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

    gap: 12px;

    width: fit-content;

    margin-top: 1.3rem;

    padding: 0.9rem 1.35rem;

    border-radius: 100px;

    background-color: #c7a3e8;

    color: #301442 !important;

    font-family: Montserrat, sans-serif !important;
    font-size: 0.92rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.rk-local-button:hover {
    background-color: var(--rk-white);

    color: var(--rk-purple-dark) !important;

    transform: translateY(-2px);
}


/* ==========================================================
   AEO ANSWER
   ========================================================== */

.rk-answer {
    padding: 6rem 0;

    background-color: var(--rk-purple-pale);
}

.rk-answer-grid {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.45fr)
        minmax(0, 1.55fr);

    gap: 5rem;
}

.rk-answer-grid h2 {
    margin-bottom: 1.2rem;
}

.rk-answer-grid p {
    max-width: 720px;

    font-size: var(--rk-lead);
}


/* ==========================================================
   FAQ
   ========================================================== */

.rk-faq {
    padding: 7rem 0;

    background-color: var(--rk-white);
}

.rk-faq-heading {
    max-width: 850px;

    margin-bottom: 3.5rem;
}

.rk-faq-heading .rk-label {
    margin-bottom: 1rem;
}

.rk-faq-heading h2 {
    margin-bottom: 0;
}

.rk-faq-list {
    max-width: 900px;
}

.rk-faq-list details {
    border-top: 1px solid var(--rk-border);
}

.rk-faq-list details:last-child {
    border-bottom: 1px solid var(--rk-border);
}

.rk-faq-list summary {
    min-height: 90px;

    display: flex;

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

    gap: 2rem;

    padding: 1rem 0;

    color: var(--rk-black);

    font-size: 1.2rem;
    font-weight: 500;

    cursor: pointer;

    list-style: none;
}

.rk-faq-list summary::-webkit-details-marker {
    display: none;
}

.rk-faq-list summary span {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

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

    border: 1px solid var(--rk-border);

    border-radius: 50%;

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

    font-size: 1.45rem;
    font-weight: 400;

    transition: transform 0.2s ease;
}

.rk-faq-list details[open] summary span {
    transform: rotate(45deg);
}

.rk-faq-list details > div {
    max-width: 700px;

    padding-bottom: 2rem;
}

.rk-faq-list details > div p {
    margin-bottom: 0;
}


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

.rk-final {
    padding: 0 0 6rem;

    background-color: var(--rk-white);
}

.rk-final-panel {
    padding: 4.5rem 3rem;

    background-color: var(--rk-purple-deep);

    text-align: center;

    border-radius: 10px;
}

.rk-final-panel .rk-dark-label {
    margin-bottom: 1.2rem;
}

.rk-final-panel h2 {
    max-width: 760px;

    margin: 0 auto 1.4rem;

    color: var(--rk-white);
}

.rk-final-panel h2 span {
    color: #c59de6;
}

.rk-final-panel p {
    max-width: 760px;

    margin: 0 auto 2.1rem;

    color: #f0e7f3 !important;

    font-size: var(--rk-lead);
}

.rk-final-actions {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 0.85rem;
}

.rk-final-purple,
.rk-final-white {
    min-width: 245px;

    display: inline-flex;

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

    gap: 10px;

    padding: 1rem 1.5rem;

    border-radius: 100px;

    font-family: Montserrat, sans-serif !important;
    font-size: 0.92rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.rk-final-purple {
    background-color: #8757c8;

    color: var(--rk-white) !important;
}

.rk-final-purple:hover {
    background-color: var(--rk-purple-bright);

    color: var(--rk-white) !important;

    transform: translateY(-2px);
}

.rk-final-white {
    background-color: var(--rk-white);

    color: var(--rk-purple-dark) !important;
}

.rk-final-white:hover {
    background-color: #f2eaf7;

    color: var(--rk-purple-dark) !important;

    transform: translateY(-2px);
}

.rk-final-support {
    display: block;

    margin-top: 1.4rem;

    color: #cdbbd6 !important;

    font-size: 0.88rem;
    font-weight: 400;
}


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

@media (max-width: 1199.98px) {

    .reiki-page {
        --rk-h1: 3.3rem;
        --rk-h2: 2.5rem;
    }

    .rk-hero-grid {
        gap: 4rem;
    }

    .rk-hero-media img {
        height: 560px;
    }

    .rk-local-copy {
        padding: 3.5rem;
    }

}


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

@media (max-width: 991.98px) {

    .reiki-page {
        --rk-h1: 3rem;
        --rk-h2: 2.35rem;
        --rk-h3: 1.3rem;

        padding-top: 90px;
    }

    .rk-hero-grid,
    .rk-editorial-grid,
    .rk-local-panel,
    .rk-answer-grid {
        grid-template-columns: 1fr;
    }

    .rk-hero-grid {
        gap: 3rem;
    }

    .rk-hero-media img {
        height: 500px;
    }


    /* Experience remains balanced */

    .rk-experience-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-areas:
            "gentle personal"
            "image image"
            "private penyffordd"
            "local local";
    }

    .rk-experience-image img {
        min-height: 460px;
    }

    .rk-editorial-grid,
    .rk-answer-grid {
        gap: 2rem;
    }

    .rk-local-image img {
        min-height: 450px;
    }

    .rk-local-copy {
        padding: 3rem;
    }

}


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

@media (max-width: 767.98px) {

    .reiki-page {
        --rk-h1: 2.55rem;
        --rk-h2: 2.1rem;
        --rk-h3: 1.25rem;

        --rk-lead: 1.07rem;
    }

    .rk-hero {
        padding: 3.5rem 0;
    }

    .rk-hero-media img {
        height: 400px;
    }

    .rk-experience,
    .rk-editorial,
    .rk-faq {
        padding: 4.5rem 0;
    }

    .rk-centered-heading {
        margin-bottom: 2.7rem;
    }


    /* Experience single column */

    .rk-experience-grid {
        grid-template-columns: 1fr;

        grid-template-areas:
            "gentle"
            "personal"
            "image"
            "private"
            "penyffordd"
            "local";
    }

    .rk-experience-cell {
        min-height: 260px;
    }

    .rk-experience-image img {
        min-height: 390px;
    }


    /* Local horizontal row becomes stacked */

    .rk-local-wide {
        grid-template-columns: auto 1fr;
    }

    .rk-local-wide a {
        grid-column: 1 / -1;

        width: 100%;

        justify-content: center;

        margin-top: 0.4rem;
    }


    /* About */

    .rk-simple-points {
        grid-template-columns: 1fr;

        gap: 0.9rem;
    }

    .rk-editorial-main h2 {
        margin-bottom: 2.5rem;
    }


    /* Photography */

    .rk-photo-grid {
        grid-template-columns: 1fr;
    }

    .rk-photo-grid img {
        height: 380px;
    }


    /* Local */

    .rk-local {
        padding-bottom: 4.5rem;
    }

    .rk-local-image img {
        min-height: 390px;
    }

    .rk-local-copy {
        padding: 2.5rem 1.5rem;
    }


    /* Answer */

    .rk-answer {
        padding: 4.5rem 0;
    }


    /* FAQ */

    .rk-faq-list summary {
        min-height: 80px;

        gap: 1rem;

        font-size: 1.05rem;
    }


    /* Final CTA */

    .rk-final-panel {
        padding: 4rem 1.5rem;
    }

    .rk-final-actions {
        flex-direction: column;
    }

    .rk-final-purple,
    .rk-final-white {
        width: 100%;
    }

}


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

@media (max-width: 575.98px) {

    .reiki-page {
        --rk-h1: 2.3rem;
        --rk-h2: 1.95rem;
        --rk-h3: 1.2rem;

        --rk-body: 0.98rem;
        --rk-small: 0.84rem;
    }

    .rk-primary-btn {
        width: 100%;
    }

    .rk-centered-heading {
        text-align: left;
    }

    .rk-hero-media img {
        height: 340px;
    }

    .rk-experience-image {
        padding: 1rem;
    }

    .rk-experience-image img {
        min-height: 340px;
    }

    .rk-local-wide {
        grid-template-columns: 1fr;

        text-align: left;
    }

    .rk-local-wide-icon {
        margin-bottom: 0.3rem;
    }

    .rk-photo-grid img {
        height: 330px;
    }

    .rk-local-image img {
        min-height: 340px;
    }

    .rk-faq-list summary span {
        width: 35px;
        height: 35px;

        flex: 0 0 35px;
    }

    .rk-final-panel {
        padding: 3.5rem 1.2rem;
    }

}