/*
Theme Name: Thalia's Website
Description: Counselling website
Version: 0.2.0
Author: Dillon Shah
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
    --transition: 180ms ease;
    --section-space: clamp(5rem, 10vw, 9rem);
    --section-space-small: clamp(4rem, 8vw, 6rem);
    --radius-large: 3rem 0.75rem 3rem 3rem;
    --radius-medium: 2rem 0.75rem 2rem 2rem;
    --border-subtle: rgba(70, 56, 47, 0.18);
    --motion-fast: 220ms;
    --motion-medium: 450ms;
    --motion-slow: 700ms;
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   Base
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.wp-site-blocks {
    overflow-x: clip;
}


::selection {
    background: var(--wp--preset--color--sage);
    color: var(--wp--preset--color--brown);
}

/* ==========================================================================
   Journal handwritten font
   ========================================================================== */

@font-face {
    font-family: "Reenie Beanie";

    src: url("assets/fonts/ReenieBeanie-Regular.woff2") format("woff2");

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    transition:
        color var(--motion-fast) ease,
        opacity var(--motion-fast) ease;
}

:where(a):hover {
    opacity: 0.78;
}

:focus-visible {
    outline: 2px solid var(--wp--preset--color--plum);
    outline-offset: 4px;
}


/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.wp-block-heading {
    margin-top: 0;
}

.wp-block-heading a {
    text-decoration: none;
}

.has-display-font-size {
    max-width: 12ch;
}

.has-x-large-font-size {
    max-width: 20ch;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.wp-block-button__link:active {
    transform: translateY(0);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--brown);
    border: 1px solid currentColor;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    transform: translateY(-2px);

    background-color: var(--wp--preset--color--plum);
    border-color: var(--wp--preset--color--plum);
    color: var(--wp--preset--color--off-white);
}

.wp-block-button.is-style-outline-beige .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--beige);
    border: 1px solid var(--wp--preset--color--beige);

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.wp-block-button.is-style-outline-beige .wp-block-button__link:hover {
    transform: translateY(-2px);

    background-color: var(--wp--preset--color--beige);
    border-color: var(--wp--preset--color--beige);
    color: var(--wp--preset--color--brown);
}

@media (max-width: 781px) {

    .about-content .wp-block-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
    }

}

/* ==========================================================================
   Shared section utilities
   ========================================================================== */

.sessions-layout,
.about-me__layout {
    gap: clamp(3rem, 7vw, 7rem);
}

.about-me__layout,
.sessions-layout {
    align-items: center;
}

.about-page__hero,
.therapy-hero,
.fees-page__hero,
.contact-page__hero {
    text-align: center;
}

.about-page__hero-intro,
.therapy-hero__intro,
.fees-page__intro,
.contact-page__intro {
    max-width: 760px;
    margin-inline: auto;
    margin-top: 2rem;
}


/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: relative;
    padding-top: 0.5rem;
    z-index: 10;
    background: var(--wp--preset--color--cream);
    transition:
        box-shadow var(--motion-medium) ease,
        background-color var(--motion-medium) ease;
}

.site-header__inner {
    min-height: 68px;
}

.site-brand {
    margin: 0 !important;
}

.site-brand__text {
    margin: 0;
    line-height: 1;
}

.site-brand__text a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
}

.site-brand__name,
.site-brand__practice {
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
}

.site-brand__name {
    color: var(--wp--preset--color--plum);
}

.site-brand__separator {
    color: var(--wp--preset--color--sage);
    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.4rem;
}

.site-brand__practice {
    color: var(--wp--preset--color--brown);
}

.site-brand__text a:hover .site-brand__name {
    color: var(--wp--preset--color--brown);
}

.site-brand__text a:hover .site-brand__practice {
    color: var(--wp--preset--color--plum);
}

.site-brand__descriptor {
    margin: 0.5rem 0 0;
    color: var(--wp--preset--color--sage);
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.site-navigation {
    position: relative;
    margin: 0;
}


/* Desktop links */

.site-navigation__links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
}

.site-navigation a {
    color: var(--wp--preset--color--brown);
    font-family: var(--wp--preset--font-family--serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color var(--transition),
        opacity var(--transition);
}

.site-navigation a:hover {
    color: var(--wp--preset--color--plum);
}


/* Journal + Reading */

.site-navigation__reading-link {
    color: var(--wp--preset--color--sage) !important;
}

.site-navigation__reading-link:hover {
    color: var(--wp--preset--color--brown) !important;
}


/* Separator */

.site-navigation__separator {
    margin-inline: -0.4rem;

    color: var(--wp--preset--color--sage);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 0.8rem;
    line-height: 1;
}


/* ==========================================================================
   Mobile menu button
   ========================================================================== */

.site-navigation__toggle {
    display: none;

    align-items: center;
    gap: 0.65rem;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 0.95rem;

    cursor: pointer;
}


/* "Menu" label */

.site-navigation__toggle-label {
    line-height: 1;
}


/* Two-line menu icon */

.site-navigation__toggle-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;

    width: 20px;
}

.site-navigation__toggle-icon span {
    display: block;

    width: 20px;
    height: 1px;

    background: var(--wp--preset--color--brown);

    transition:
        transform var(--motion-medium) var(--ease-soft),
        opacity var(--motion-fast) ease;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .site-header__inner {
        position: relative;
    }

    .site-navigation {
        position: relative;
        z-index: 100;
        margin-left: auto;
    }

    .site-navigation__toggle {
        display: flex;
    }

    .site-navigation__menu {
        position: absolute;

        top: calc(100% + 1rem);
        right: 0;
        left: auto;

        width: min(320px, calc(100vw - 2rem));
        box-sizing: border-box;

        z-index: 101;

        padding: 1.25rem 1.5rem 1.5rem;

        background: var(--wp--preset--color--cream);

        border: 1px solid rgba(70, 56, 47, 0.1);
        border-radius: 0 0 1.25rem 1.25rem;

        box-shadow: 0 1rem 2.5rem rgba(70, 56, 47, 0.12);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-0.5rem);

        transition:
            opacity var(--transition),
            transform var(--transition),
            visibility var(--transition);
    }

    .site-navigation.is-open .site-navigation__menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-navigation__links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-navigation__links a {
        display: block;
        padding: 0.85rem 0;
        font-size: 1.15rem;
        line-height: 1.2;
        border-bottom: 1px solid rgba(70, 56, 47, 0.1);
    }

    .site-navigation__links a:last-child {
        border-bottom: 0;
    }

    .site-navigation__separator {
        display: none;
    }


    .site-navigation.is-open .site-navigation__toggle-icon span:first-child {
        transform: translateY(3px) rotate(45deg);
    }

    .site-navigation.is-open .site-navigation__toggle-icon span:last-child {
        transform: translateY(-3px) rotate(-45deg);
    }
}

/* Mobile */

@media (max-width: 781px) {

    .site-header {
        padding-block: 0 !important;
    }

    .site-header__inner {
        min-height: 60px;
        padding-inline: 1rem;
    }

    .site-brand__name,
    .site-brand__practice {
        font-size: 1.4rem;
    }

    .site-brand__separator {
        font-size: 1.2rem;
    }

}

@media (max-width: 480px) {

    .site-brand__name,
    .site-brand__practice {
        font-size: 1.15rem;
    }

    .site-brand__separator {
        font-size: 1rem;
    }

}


/* ==========================================================================
   Mobile global spacing
   ========================================================================== */

@media (max-width: 781px) {

    .wp-block-group.alignwide,
    .wp-block-columns.alignwide,
    .wp-block-group.alignfull>.wp-block-group {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


/* ==========================================================================
   Homepage — Hero
   ========================================================================== */

.hero-visual {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-organic {
    position: relative;
    width: min(100%, 500px);
    aspect-ratio: 1 / 1;
}


/* --------------------------------------------------------------------------
   Plum accent
   -------------------------------------------------------------------------- */

.hero-organic__accent {
    position: absolute;
    width: 115px;
    height: 115px;

    top: 5%;
    right: 5%;

    border-radius: 50%;

    z-index: 0;
}


/* --------------------------------------------------------------------------
   Sage organic background
   -------------------------------------------------------------------------- */

.hero-organic__sage {
    position: absolute;
    inset: 7% 8% 5% 5%;

    border-radius:
        54% 46% 57% 43% / 45% 55% 45% 55%;

    transform: rotate(-5deg);

    z-index: 1;
}


/* --------------------------------------------------------------------------
   Beige quote shape
   -------------------------------------------------------------------------- */

.hero-organic__quote {
    position: absolute;

    width: 68%;
    aspect-ratio: 0.95;

    top: 17%;
    left: 16%;

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

    padding: 2.5rem;
    box-sizing: border-box;

    border-radius:
        47% 53% 48% 52% / 53% 45% 55% 47%;

    z-index: 2;

    box-shadow: 0 1.5rem 3rem rgba(70, 56, 47, 0.08);
}


.hero-organic__statement {
    margin: 0;
    max-width: 260px;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.02em;

    transform: rotate(-4deg);
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

    .hero {
        text-align: center;
        padding-top: 2rem;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content p,
    .hero-content h1 {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        min-height: 360px;
        margin-top: 1rem;
    }

    .hero-organic {
        width: min(88vw, 420px);
    }

    .hero-organic__accent {
        width: 85px;
        height: 85px;
    }

    .hero-organic__quote {
        width: 70%;
        left: 15%;
        padding: 2rem;
    }

    .hero-organic__statement {
        font-size: 1.4rem;
    }

    .hero-content .wp-block-buttons {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0.75rem;
    }

    .hero-content .wp-block-button {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }

    .hero-content .wp-block-button__link {
        width: 100%;
        box-sizing: border-box;

        text-align: center;
    }

    /* ----------------------------------------------------------------------
   Mobile hero buttons
   ---------------------------------------------------------------------- */

    .hero-content .wp-block-buttons {
        width: 100%;

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

        gap: 0.75rem;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-content .wp-block-buttons .wp-block-button {
        width: 100%;
        max-width: 320px;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-content .wp-block-buttons .wp-block-button__link {
        display: block;

        width: 100%;
        box-sizing: border-box;

        text-align: center;
    }

}

/* ==========================================================================
   Homepage — Hero
   ========================================================================== */

.hero {
    position: relative;
    overflow: visible;
}


/* ==========================================================================
   Hero Content
   ========================================================================== */

.hero-content {
    position: relative;
    z-index: 5;
    padding-bottom: 3rem;

}

.hero-title {
    max-width: 760px;

    margin: 0;

    font-size: clamp(3.2rem, 6vw, 5.8rem) !important;
    line-height: 0.98;
    letter-spacing: -0.045em;

    transform: translateY(2rem);
}


/* Small plum rule */

.hero-rule {
    width: 76px;
    height: 2px;

    margin: 2.25rem 0 1.75rem;

    background: var(--wp--preset--color--plum);
}

.hero-intro {
    max-width: 620px;

    margin: 0;

    line-height: 1.55;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.hero-buttons {
    margin-top: 2rem;

    gap: 1rem;
}

.hero-buttons .wp-block-button__link {
    text-align: center;
}


/* ==========================================================================
   Hero Visual
   ========================================================================== */

.hero-visual {
    position: relative;

    min-height: 520px;

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


}


/* ==========================================================================
   Sage Organic Shape
   ========================================================================== */
.hero-portrait__sage {
    position: absolute;

    inset: -4% -3% -3% -4%;

    background: var(--wp--preset--color--sage);

    border-radius:
        48% 52% 44% 56% / 42% 35% 65% 58%;

    transform: rotate(-3deg);

    z-index: 0;
}

/* ==========================================================================
   Portrait
   ========================================================================== */
.hero-portrait {
    position: relative;

    width: min(100%, 600px);
    aspect-ratio: 1.5 / 1;

    isolation: isolate;


    transform: translateY(-2rem);
}

.hero-portrait__image {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background: var(--wp--preset--color--beige);

    border-radius:
        46% 54% 52% 48% / 43% 38% 62% 57%;

    box-shadow:
        0 1.5rem 3rem rgba(70, 56, 47, 0.10);

    z-index: 2;
}

.hero-portrait__image img {
    display: block;

    width: 100%;
    height: 100%;

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



/* ==========================================================================
   "Come as you are" — Curved Quote
   ========================================================================== */

.hero-portrait__quote {
    position: absolute;

    left: 5%;
    right: 5%;

    /*
     * Place the entire quote below
     * the bottom of the image.
     */
    top: 98%;
    bottom: auto;

    height: 130px;

    z-index: 5;

    pointer-events: none;
}

.hero-portrait__quote svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.hero-portrait__quote text {
    fill: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 60px;
    font-weight: 400;

    letter-spacing: -0.025em;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1000px) {

    .hero-title {
        font-size: clamp(3rem, 6vw, 4.5rem) !important;
    }

    .hero-visual {
        min-height: 500px;
    }

    .hero-portrait {
        width: min(100%, 500px);
    }

    .hero-portrait__quote {
        font-size: 60px;
    }

}


/* ==========================================================================
   Mobile
   ========================================================================== */



@media (max-width: 781px) {

    .hero {
        padding-top: 2rem;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    .hero-content p,
    .hero-content h1 {
        margin-left: auto;
        margin-right: auto;

    }


    /* Heading */

    .hero-title {
        max-width: 600px;

        font-size: clamp(2.8rem, 11vw, 4rem) !important;
    }


    /* Rule */

    .hero-rule {
        margin-inline: auto;
    }


    /* Intro */

    .hero-intro {
        max-width: 520px;

        padding-inline: 1rem;
        box-sizing: border-box;
    }


    /* Buttons */

    .hero-buttons {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0.75rem;
    }

    .hero-buttons .wp-block-button {
        width: 100%;
        max-width: 320px;
    }

    .hero-buttons .wp-block-button__link {
        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }


    /* Portrait */

    .hero-visual {
        min-height: 480px;

        margin-top: 0;

    }

    .hero-portrait {
        width: min(88vw, 430px);
    }


    /* Sage shape */

    .hero-portrait__sage {
        inset: 4% 3% 2% 6%;
    }


    /* Portrait */

    .hero-portrait__image {
        inset: 8% 7% 0 11%;
    }


    /* Plum circle */

    .hero-portrait__accent {
        width: 78px;
        height: 78px;

        top: 2%;
        right: 0;
    }


    /* Quote */

    .hero-portrait__quote {
        position: absolute;

        left: 3%;
        right: 3%;

        top: calc(100% + 0.25rem);
        bottom: auto;

        width: auto;
        height: 115px;

        z-index: 5;

        pointer-events: none;
    }

    .hero-portrait__quote svg {
        display: block;

        width: 100%;
        height: 100%;

        overflow: visible;
    }

    .hero-portrait__quote text {
        font-size: 60px;
    }



}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

    .hero-portrait__quote,
    .hero-portrait__sage {
        transform: none;
    }

}

/* ==========================================================================
   Small phones
   ========================================================================== */

@media (max-width: 480px) {

    .hero-title {
        font-size: 2.8rem !important;
    }

    .hero-visual {
        min-height: 430px;
    }


    .hero-portrait {
        width: 92vw;
    }


    .hero-portrait__accent {
        width: 65px;
        height: 65px;
    }


    .hero-portrait__quote {
        left: 2%;
        right: 2%;

        top: calc(100% + 0.5rem);

        height: 100px;
    }

    .hero-portrait__quote text {
        font-size: 50px;
    }

}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

    .hero-portrait__quote {
        transform: none;
    }

}

/* ==========================================================================
   HERO SCROLL CUE
   ========================================================================== */

.hero-scroll-cue {
    width: 100%;

    margin-top: 1rem;

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

    text-align: center;

}


.hero-scroll-cue__arrow {
    display: block;

    color: var(--wp--preset--color--brown);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.125rem;
    font-weight: 400;
    line-height: 1;

    opacity: 0.5;

    animation: hero-scroll-arrow 2.4s ease-in-out infinite;

    padding-bottom: 1.5rem;
}


@keyframes hero-scroll-arrow {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.55;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }

}


@media (max-width: 781px) {
    .hero-scroll-cue {
        padding-top: 2rem;
    }
}

/* ==========================================================================
   Homepage — Introduction
   ========================================================================== */

.intro-section {
    position: relative;
    padding-block: clamp(6rem, 12vw, 10rem);
}

.intro-section .has-plum-color {
    color: var(--wp--preset--color--off-white) !important;
}

.intro-content {
    max-width: 1120px;
}


/* Section label */

.intro-content>.wp-block-paragraph:first-child {
    margin-bottom: 1.25rem;
    text-align: center;
}


/* Main heading */

.intro-content>.wp-block-heading {
    max-width: 900px;
    margin-inline: auto;
    margin-bottom: clamp(3.5rem, 7vw, 6rem);

    text-align: center;

    font-size: clamp(2.75rem, 5vw, 4.75rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}


/* Columns */

.intro-content>.wp-block-columns {
    position: relative;

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

    align-items: start;

    gap: clamp(3rem, 7vw, 7rem);
}


/* Centred divider */

@media (min-width: 782px) {

    .intro-content>.wp-block-columns::after {
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;

        width: 1px;

        background: var(--wp--preset--color--beige);
        opacity: 0.7;

        transform: translateX(-50%);
    }

}


/* Left column */

.intro-content>.wp-block-columns>.wp-block-column:first-child {
    width: auto !important;
}

.intro-content>.wp-block-columns>.wp-block-column:first-child p {
    max-width: 620px;
}

.intro-content>.wp-block-columns>.wp-block-column:first-child p:first-child {
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.45;
}


/* Right column */

.intro-content>.wp-block-columns>.wp-block-column:last-child {
    width: auto !important;
    padding-left: 0;
    border-left: 0;
}

.intro-content>.wp-block-columns>.wp-block-column:last-child p {
    max-width: 440px;
}

.intro-content>.wp-block-columns>.wp-block-column:last-child p+p {
    margin-top: 1.75rem;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .intro-section {
        padding-block: 5rem;
    }

    .intro-content>.wp-block-columns {
        display: block;
        width: 100%;
    }

    .intro-content>.wp-block-columns>.wp-block-column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Left column */
    .intro-content>.wp-block-columns>.wp-block-column:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .intro-content>.wp-block-columns>.wp-block-column:first-child p {
        width: 100%;
        max-width: 620px;
        text-align: center;
    }

    .intro-content>.wp-block-columns>.wp-block-column:first-child p:first-child {
        font-size: 1.3rem;
        text-align: center;
    }

    /* Right column */
    .intro-content>.wp-block-columns>.wp-block-column:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-top: 3rem;
        padding-top: 2rem;
        padding-left: 0;
        padding-right: 0;

        border-left: 0;
        border-top: 1px solid var(--wp--preset--color--beige);

        text-align: center;
    }

    .intro-content>.wp-block-columns>.wp-block-column:last-child p {
        width: 100%;
        max-width: 440px;
        text-align: center;
    }

}

/* ==========================================================================
   BLOOMING TREE
   ========================================================================== */

.tree-section {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 0 !important;

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Section inner
   -------------------------------------------------------------------------- */

.tree-section__inner {
    width: 100%;
    max-width: none;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* --------------------------------------------------------------------------
   Message
   -------------------------------------------------------------------------- */

.tree-section__message {
    position: relative;
    z-index: 2;

    width: min(90%, 700px);

    margin: 0 auto;

    padding-top: clamp(5rem, 10vw, 8rem);
    padding-bottom: 1rem;

    text-align: center;
}

.tree-section__eyebrow {
    margin: 0 0 1.25rem;

    color: var(--wp--preset--color--plum);

    font-size: 0.72rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tree-section__message h2 {
    margin: 0;

    color: var(--wp--preset--color--brown);

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

    font-size: clamp(2rem, 4vw, 3.5rem);

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: -0.025em;
}


/* --------------------------------------------------------------------------
   Tree stage
   -------------------------------------------------------------------------- */

.tree-animation {
    position: relative;

    width: 100%;
    height: 80vh;
    min-height: 650px;

    margin-top: -2rem;

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


/* --------------------------------------------------------------------------
   Lottie
   -------------------------------------------------------------------------- */

.tree-animation__canvas {
    position: relative;

    width: min(82vw, 850px);
    height: min(82vh, 850px);

    margin: 0 auto;

    display: flex;

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

.tree-animation__canvas svg {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

    .tree-section__message {
        width: min(88%, 520px);

        padding-top: 4rem;
    }

    .tree-section__message h2 {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }

    .tree-animation {
        height: 100svh;
    }

    .tree-animation__canvas {
        width: 94vw;
        height: 78svh;
    }

}

/* ==========================================================================
   Homepage — What brings people to therapy
   ========================================================================== */

.help-section {
    overflow: hidden;
    /* padding-bottom: 2rem; */
}


/* Feature */

.help-feature {
    text-align: center;
    max-width: 1120px;
    box-sizing: border-box;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    /* padding-top: clamp(3rem, 6vw, 4.5rem); */
    border-radius: 3rem 0.75rem 3rem 3rem;
    box-shadow: 0 1rem 2.5rem rgba(70, 56, 47, 0.04);
}

.help-feature__eyebrow {
    margin: 0 0 2.5rem;
}

.help-feature__heading {
    max-width: 700px;
    margin: 0 0 1.5rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.help-feature__text {
    max-width: 650px;
    margin: 0;
    line-height: 1.65;
}


/* Topics */

.help-topics {
    max-width: 1120px;
    /* margin-top: clamp(4rem, 8vw, 6rem) !important; */
    /* make margin top smaller */
    margin-top: clamp(1rem, 3vw, 2rem) !important;
    margin-bottom: clamp(1rem, 3vw, 2rem) !important;
    padding-top: 2rem;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.help-topics>p:first-child {
    margin: 0 0 0.75rem;
}

.help-topics__list {
    max-width: 1000px;
    margin: 0 auto;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    line-height: 1.6;
}


/* Mobile */

@media (max-width: 781px) {

    .help-section {
        padding-block: 5rem;
    }

    .help-intro {
        margin-bottom: 3.5rem;
    }

    .help-intro-text {
        font-size: 1.25rem !important;
    }

    /* .help-feature {
        padding: 2rem;
        border-radius: 2rem 0.75rem 2rem 2rem;
    } */

    .help-feature {
        width: calc(100% - 2rem);
        margin-inline: auto;

        padding: 2rem;
        box-sizing: border-box;

        border-radius: 2rem 0.75rem 2rem 2rem;
    }

    .help-feature__eyebrow {
        margin-bottom: 2rem;
    }

    .help-feature__heading {
        font-size: 2rem !important;
    }

    .help-topics {
        margin-top: 3.5rem !important;
    }

    .help-topics__list {
        font-size: 1.25rem !important;
    }

}


/* ==========================================================================
   Homepage — About
   ========================================================================== */

.about-section {
    overflow: hidden;
    background: var(--wp--preset--color--brown) !important;
    color: var(--wp--preset--color--cream);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}


/* ==========================================================================
   Section heading
   ========================================================================== */

.about-heading {
    max-width: 1120px;
    padding-top: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: clamp(4rem, 8vw, 7rem);
    text-align: center;
}

.about-heading>p {
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--beige) !important;
}

.about-heading__title {
    margin: 0;
    color: var(--wp--preset--color--cream) !important;
    font-size: clamp(2.75rem, 5vw, 4.5rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}


/* ==========================================================================
   Main about content
   ========================================================================== */

.about-layout {
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
}

.about-portrait {
    position: relative;
    flex: 0 0 42%;
}

.about-portrait::before {
    content: "";
    position: absolute;

    width: 150px;
    height: 150px;

    background: var(--wp--preset--color--sage);
    border-radius: 50%;

    top: 20px;
    right: 20px;

    z-index: 0;
}

.about-portrait__shape {
    position: relative;
    z-index: 1;

    aspect-ratio: 0.82;
    max-width: 460px;
    margin-inline: auto;

    overflow: hidden;

    border-radius: 48% 52% 45% 55%;

    background: var(--wp--preset--color--beige);
}

.about-portrait__image {
    width: 100%;
    height: 100%;
    margin: 0;
}

.about-portrait__image img {
    display: block;
    width: 100%;
    height: 100%;

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

/* Main text */

.about-content {
    flex: 1;
    max-width: 650px;
}

.about-content>p {
    color: var(--wp--preset--color--cream);
}

.about-content>p.has-text-color {
    color: var(--wp--preset--color--cream) !important;
}

.about-lead {
    max-width: 650px;
    margin: 0 0 2rem;

    color: var(--wp--preset--color--cream) !important;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.about-content>p:not(.about-lead) {
    max-width: 600px;
    line-height: 1.7;
}

.about-content>p+p {
    margin-top: 1.5rem;
}


/* Small section labels */

.about-section .has-plum-color {
    color: var(--wp--preset--color--beige) !important;
}

.about-section .has-brown-color {
    color: var(--wp--preset--color--cream) !important;
}


/* ==========================================================================
   About — Credentials
   ========================================================================== */

.about-credentials {
    max-width: 1120px;

    margin-top: clamp(4rem, 8vw, 6rem) !important;
    padding-top: 2.5rem;

    border-top: 1px solid rgba(245, 240, 232, 0.22);
}

.credentials-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.credentials-heading>p {
    margin: 0;
    color: var(--wp--preset--color--beige) !important;
}


/* Three credential cards */

.credentials-grid {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.credentials-grid>.credential-item:nth-child(1),
.credentials-grid>.credential-item:nth-child(3) {
    flex: 1.35 1 0;
}

.credentials-grid>.credential-item:nth-child(2) {
    flex: 1 1 0;
}


/* Credential card */

.credential-item {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    padding: 1.75rem;

    text-align: center;

    border: 1px solid rgba(245, 240, 232, 0.2);
    border-radius: 1.5rem;

    background: rgba(245, 240, 232, 0.035);
}

.credential-label {
    margin: 0 0 1rem;

    color: var(--wp--preset--color--beige) !important;
}

.credential-title {
    margin: 0 0 1.5rem;

    color: var(--wp--preset--color--cream) !important;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
}


/* Institution */

.credential-institution {
    width: 100%;
    box-sizing: border-box;

    margin-top: auto;
    padding: 1.5rem 0 0;

    border-top: 1px solid rgba(245, 240, 232, 0.2);

    background: transparent !important;
    border-radius: 0;
}

.credential-institution p {
    margin: 0;

    color: var(--wp--preset--color--cream) !important;

    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.15rem;
    line-height: 1.35;
}


/* Make any WordPress text colours inside the credentials
   obey the dark section */

.about-section .credential-item .has-text-color {
    color: var(--wp--preset--color--cream) !important;
}


/* ==========================================================================
   General colour overrides
   ========================================================================== */

.about-section h2,
.about-section h3,
.about-section p {
    color: var(--wp--preset--color--cream);
}

.about-section .has-cream-color {
    color: var(--wp--preset--color--cream) !important;
}

.about-section .has-off-white-color {
    color: var(--wp--preset--color--cream) !important;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .about-section {
        padding-block: 5rem;
    }


    /* Main layout */

    .about-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }


    /* Portrait first */

    .about-portrait {
        order: 1;

        width: 100%;
        margin-bottom: 3rem;
    }

    .about-portrait__shape {
        width: min(100%, 340px);
        max-width: 340px;
        margin-inline: auto;
    }


    /* Text second */

    .about-content {
        order: 2;

        width: 100%;
        max-width: none;

        text-align: center;
    }

    .about-content>p {
        margin-left: auto;
        margin-right: auto;
    }


    /* "I'm Thalia..." heading */

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

        margin: 0 auto 2rem;

        font-size: 1.8rem !important;
        line-height: 1.2;
        padding-top: 2.5rem;

    }


    /* Body copy */

    .about-content>p:not(.about-lead) {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;

        line-height: 1.7;
    }

    .about-content>p+p {
        margin-top: 1.5rem;
    }

    /* Credentials */

    .about-credentials {
        margin-top: 4rem !important;
        padding-top: 2rem;
    }

    .credentials-heading {
        margin-bottom: 2rem;
    }

    .credentials-grid {
        display: block;
    }

    .credential-item {
        margin-bottom: 1rem;
        padding: 1.5rem;
    }

    .credential-title {
        font-size: 1.7rem !important;
    }

    .credential-institution {
        padding-top: 1.25rem;
    }

    .credential-institution p {
        font-size: 1.05rem;
    }

}


/* ==========================================================================
   Homepage — Sessions
   ========================================================================== */

.sessions-section {
    margin: 0 !important;
    padding-top: clamp(2.5rem, 5vw, 4rem) !important;
    padding-bottom: clamp(4rem, 7vw, 6rem) !important;
    overflow: hidden;
}


/* ==========================================================================
   Sessions layout
   ========================================================================== */

.sessions-section>.sessions-layout {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.sessions-intro {
    flex: 1;
    max-width: 520px;
}


/* ==========================================================================
   Pricing card
   ========================================================================== */

.sessions-card {
    flex: 0 1 620px;

    padding: clamp(1.75rem, 4vw, 3rem);

    border-radius: var(--radius-large);

    box-shadow: 0 1.25rem 3rem rgba(70, 56, 47, 0.07);
}


/* ==========================================================================
   Pricing options
   ========================================================================== */

.sessions-card__pricing {
    display: grid !important;
    grid-template-columns: 1.25fr 0.75fr;

    gap: 0;

    margin: 0 !important;

    position: relative;
}


/* Individual pricing options */

.sessions-card__option {
    min-width: 0;

    display: grid !important;

    /*
     * Three deliberate rows:
     *
     * 1. Label
     * 2. Price
     * 3. Description
     *
     * This keeps both sides perfectly aligned even though
     * "Free consultation" wraps onto two lines.
     */
    grid-template-rows:
        3rem 5rem auto;

    align-items: start;

    padding: 0 1.5rem;

    text-align: center;
}


/* First option */

.sessions-card__option--consultation {
    padding-left: 0;
}


/* Second option */

.sessions-card__option--session {
    padding-right: 0;
}


/* ==========================================================================
   Vertical divider
   ========================================================================== */

.sessions-card__pricing::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 62.5%;

    width: 1px;

    background: var(--wp--preset--color--beige);
}


/* ==========================================================================
   Labels
   ========================================================================== */

.sessions-card__label {
    grid-row: 1;

    margin: 0 !important;

    line-height: 1.25rem;
}


/* ==========================================================================
   Prices
   ========================================================================== */

.sessions-card__price {
    grid-row: 2;

    width: 100%;
    height: 5rem;

    margin: 0 !important;

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

    box-sizing: border-box;

    font-family: var(--wp--preset--font-family--serif);
    font-weight: 400;
    line-height: 1.1;
}


/* ==========================================================================
   Descriptions
   ========================================================================== */

.sessions-card__description {
    grid-row: 3;

    max-width: 300px;

    margin: 0 auto !important;

    line-height: 1.6;
}


/* ==========================================================================
   Divider below pricing
   ========================================================================== */

.sessions-card__details {
    margin-top: 2rem;
}

.sessions-card__details>.wp-block-separator {
    width: 100%;

    margin-block: 2rem !important;
}


/* ==========================================================================
   Availability text
   ========================================================================== */

.sessions-card__details>p {
    max-width: 500px;

    margin-inline: auto;

    text-align: center;
    line-height: 1.6;
}


/* ==========================================================================
   Button
   ========================================================================== */

.sessions-card__details>.wp-block-buttons {
    width: 100%;

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

    margin-inline: auto;
}

.sessions-card__details .wp-block-button {
    margin-inline: auto;
}


/* ==========================================================================
   Remove unwanted gaps around footer
   ========================================================================== */

.wp-site-blocks>main {
    margin-bottom: 0 !important;
}

.wp-site-blocks>footer {
    margin-top: 0 !important;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 1000px) {

    .sessions-section {
        padding-top: 3rem !important;
        padding-bottom: 4rem !important;
    }

    .sessions-section>.sessions-layout {
        display: block;
    }

    .sessions-intro {
        max-width: none;

        margin-bottom: clamp(3.5rem, 10vw, 5rem);

        text-align: center;
    }

    .sessions-card {
        margin-top: 5rem !important;
    }




}

@media (max-width: 781px) {

    .sessions-section {
        padding-top: 3rem !important;
        padding-bottom: 4rem !important;
    }


    /* Stack intro and pricing card */

    .sessions-section>.sessions-layout {
        display: block;
    }

    .sessions-intro {
        max-width: none;

        margin-bottom: clamp(3.5rem, 10vw, 5rem);

        text-align: center;
    }


    /* Pricing card */

    .sessions-card {
        width: 100%;
        box-sizing: border-box;

        margin-top: 5rem !important;
    }


    /* Stack pricing options */

    .sessions-card__pricing {
        display: block !important;
    }


    .sessions-card__option {
        display: grid !important;

        grid-template-rows:
            auto auto auto;

        min-height: 0;

        padding: 0 0 2rem;

        text-align: center;
    }


    .sessions-card__option--consultation {
        padding-left: 0;
    }


    .sessions-card__option--session {
        padding-top: 2rem;
        padding-right: 0;
        padding-bottom: 0;
    }


    /* Remove desktop divider */

    .sessions-card__pricing::after {
        display: none;
    }


    /* Add horizontal divider between mobile options */

    .sessions-card__option--session {
        border-top: 1px solid var(--wp--preset--color--beige);
    }


    /* Mobile labels */

    .sessions-card__label {
        grid-row: auto;

        min-height: 0;

        margin-bottom: 0.5rem !important;
    }


    /* Mobile prices */

    .sessions-card__price {
        grid-row: auto;

        width: auto;
        height: auto;

        margin-bottom: 0.5rem !important;
    }


    /* Mobile descriptions */

    .sessions-card__description {
        grid-row: auto;

        max-width: 500px;

        margin-inline: auto !important;
    }


    /* Details */

    .sessions-card__details {
        margin-top: 0;
    }


    .sessions-card__details>p {
        max-width: 500px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    /* Button */

    .sessions-card__details>.wp-block-buttons {
        width: 100%;

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

    .sessions-card__details .wp-block-button {
        margin-left: auto;
        margin-right: auto;
    }

    .sessions-card__option--session .sessions-card__price {
        width: 100%;
        justify-content: center;
        text-align: center;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   Therapy Page
   ========================================================================== */

.therapy-page {
    overflow: hidden;
}


/* ==========================================================================
   Shared
   ========================================================================== */

.therapy-eyebrow {
    margin: 0 0 1rem;
}

.therapy-page h2,
.therapy-page h3,
.therapy-page p {
    max-width: none;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.therapy-hero {
    max-width: 900px;
    padding-block: clamp(3rem, 10vw, 6rem);
    text-align: center;
}

.therapy-hero__title {
    max-width: 1000px;
    margin: 0 auto;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.therapy-hero__intro {
    width: 100% !important;
    max-width: 760px !important;

    margin: 2rem auto 0 !important;
    padding-inline: 2rem;

    box-sizing: border-box;

    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    line-height: 1.55;
    text-align: center;
}

/* ==========================================================================
   What person-centred means
   ========================================================================== */

.therapy-meaning {
    padding-block: clamp(5rem, 10vw, 8rem);
}

.therapy-meaning__inner {
    max-width: 1100px;
}

.therapy-meaning__title {
    max-width: 850px;
    margin: 0 0 clamp(1.5rem, 6vw, 3rem);
    font-size: clamp(2.4rem, 5vw, 4.25rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}


/* ==========================================================================
   The relationship
   ========================================================================== */

.therapy-relationship {
    padding-block: clamp(6rem, 11vw, 9rem);
    text-align: center;
}

.therapy-relationship__statement {
    max-width: 1000px;
    margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 5rem);
    border-radius: 4rem 0.75rem 4rem 4rem;
}

.therapy-relationship__statement h2 {
    max-width: 700px;
    margin: 0 0 1rem;
    font-size: clamp(2.3rem, 4vw, 3.75rem) !important;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.therapy-relationship__statement p {
    max-width: 720px;
    margin-bottom: 0;
    line-height: 1.55;
}


/* ==========================================================================
   Principles
   ========================================================================== */

.therapy-principles {
    max-width: 1000px;
    margin: clamp(4rem, 7vw, 6rem) auto 0;
}

.therapy-principle {
    padding: 0 clamp(1.5rem, 3vw, 2.5rem);
}

.therapy-principle:first-child {
    padding-left: 0;
}

.therapy-principle:last-child {
    padding-right: 0;
}

.therapy-principle+.therapy-principle {
    border-left: 1px solid var(--border-subtle);
}

.therapy-principle__number {
    margin: 0 0 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.therapy-principle h3 {
    margin: 0 0 0.75rem;
}

.therapy-principle p {
    margin: 0;
    line-height: 1.65;
}

.fancy-link {
    text-decoration: none;
    font-weight: 450;
    font-style: italic;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

.fancy-link:hover {
    color: var(--wp--preset--color--beige);
    animation: fancy-link-bounce 0.45s ease;
}

@keyframes fancy-link-bounce {
    0% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-8px);
    }

    65% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ==========================================================================
   What we might explore
   ========================================================================== */

.therapy-explore {
    width: 100%;
    box-sizing: border-box;
    padding-block: clamp(5rem, 10vw, 8rem);
    padding-inline: clamp(2rem, 7vw, 7rem);
}

.therapy-explore__inner {
    width: calc(100% - clamp(6rem, 14vw, 14rem));
    max-width: 1200px;
    margin-inline: auto;
    text-align: center;
    box-sizing: border-box;
}

.therapy-explore__title {
    max-width: 850px;
    margin-inline: auto;
    margin-block: 0;
    font-size: clamp(2.3rem, 4.5vw, 4rem) !important;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.therapy-explore__intro {
    width: 100%;
    max-width: 680px;
    margin: 2rem auto 0;
    line-height: 1.6;
}

.therapy-topic-list {
    width: 100%;
    max-width: 900px;
    margin: clamp(3rem, 6vw, 5rem) auto 0;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.7;
    letter-spacing: -0.015em;
}

/* ==========================================================================
   Starting therapy
   ========================================================================== */

.therapy-start {
    padding-block: clamp(5rem, 10vw, 8rem);
}

.therapy-start__inner {
    max-width: 1120px;
}

.therapy-start h2 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.25rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.therapy-start__steps {
    margin-top: clamp(3rem, 6vw, 5rem);
    align-items: stretch;
}

.therapy-start__step {
    padding: 0 clamp(1.25rem, 3vw, 1.75rem);
}

.therapy-start__step:first-child {
    padding-left: 0;
}

.therapy-start__step:last-child {
    padding-right: 0;
}

.therapy-start__step+.therapy-start__step {
    border-left: 1px solid rgba(229, 217, 202, 0.35);
}

.therapy-start__number {
    margin: 0 0 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.therapy-start__step h3 {
    margin: 0 0 1rem;
    line-height: 1.05;
    min-height: 2.1em;
}

.therapy-start__step p {
    margin: 0;
    color: rgba(251, 249, 245, 0.82);
    line-height: 1.65;
}

.therapy-start__button {
    margin-top: clamp(3rem, 6vw, 4rem);
}

.therapy-explore,
.therapy-start {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .therapy-hero {
        padding-block: 5rem;
        text-align: left;
    }

    .therapy-hero__title {
        font-size: clamp(3rem, 13vw, 4.5rem) !important;
        margin-left: 0;
    }

    .therapy-hero__intro {
        margin-left: 0;
    }


    .therapy-meaning {
        padding-block: 5rem;
    }

    .therapy-meaning__title {
        font-size: clamp(2.25rem, 10vw, 3.5rem) !important;
        margin-bottom: 3rem;
    }

    .therapy-relationship {
        padding-block: 5rem;
    }

    .therapy-relationship__statement {
        padding: 2.5rem;
        border-radius: 2.5rem 0.75rem 2.5rem 2.5rem;
    }

    .therapy-relationship__statement h2 {
        font-size: 2.5rem !important;
    }

    .therapy-principles {
        margin-top: 3rem;
    }

    .therapy-principles>.wp-block-columns {
        display: block;
    }

    .therapy-principle {
        padding: 1.75rem 0;
    }

    .therapy-principle:first-child {
        padding-top: 0;
    }

    .therapy-principle:last-child {
        padding-bottom: 0;
    }

    .therapy-principle+.therapy-principle {
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
    }

    .therapy-explore {
        padding-block: 5rem;
        padding-inline: 1.5rem;
    }

    .therapy-explore__inner {
        width: 100%;
    }

    .therapy-explore__title {
        font-size: clamp(2.25rem, 10vw, 3.5rem) !important;
        margin-left: 0;
    }

    .therapy-explore__intro {
        margin-left: 0;
    }

    .therapy-topic-list {
        font-size: 1.5rem;
        line-height: 1.8;
        margin-left: 0;
        text-align: center;
        color: var(--wp--preset--color--plum);
    }


    .therapy-start {
        padding-block: 5rem;
    }

    .therapy-start h2 {
        font-size: clamp(2.25rem, 10vw, 3.5rem) !important;
    }

    .therapy-start__steps {
        display: block;
        margin-top: 3rem;
    }

    .therapy-start__step,
    .therapy-start__step:first-child,
    .therapy-start__step:last-child {
        padding: 1.75rem 0;
    }

    .therapy-start__step h3 {
        margin: 0 0 1rem;
        line-height: 1.05;
        min-height: 1.05em;
    }

    .therapy-start__step:first-child {
        padding-top: 0;
    }

    .therapy-start__step:last-child {
        padding-bottom: 0;
    }

    .therapy-start__step+.therapy-start__step {
        border-left: 0;
        border-top: 1px solid rgba(229, 217, 202, 0.35);
    }

    .therapy-start__button {
        margin-top: 3rem;
    }

}

/* ==========================================================================
   About Page
   ========================================================================== */

.about-page {
    overflow-x: clip;
    overflow-y: visible;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.about-page__hero {
    max-width: 1120px;
    padding-block: clamp(3rem, 10vw, 6rem);
    text-align: center;
}

.about-page__hero>p:first-child {
    margin: 0 0 1.25rem;
}

.about-page__hero h1 {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

/* .about-page__hero-intro {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    line-height: 1.55;
} */


/* ==========================================================================
   Meet Thalia
   ========================================================================== */

.about-me-section {
    padding-block: clamp(5rem, 10vw, 9rem);
}

.about-me__layout {
    gap: clamp(3rem, 8vw, 7rem);
    align-items: flex-start;
}


/* Portrait */

/* ==========================================================================
   About Page — Portrait
   ========================================================================== */

.about-me__portrait {
    position: relative;
    flex: 0 0 35%;
}

/* Small decorative sage circle */
.about-me__portrait::before {
    content: "";
    position: absolute;

    width: 150px;
    height: 150px;

    background: var(--wp--preset--color--sage);
    border-radius: 50%;

    top: -35px;
    right: -25px;

    z-index: 0;
}

/* Organic portrait shape */
.about-me__portrait-image {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 460px;

    aspect-ratio: 0.82;
    margin-inline: auto;
    margin-block: 0;

    overflow: hidden;

    border-radius: 48% 52% 45% 55%;

    background: var(--wp--preset--color--beige);
}

/* Image fills the shape */
.about-me__portrait-image img {
    display: block;

    width: 100%;
    height: 100%;

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

/* Content */

.about-me__content {
    flex: 1;
    max-width: 650px;
}

.about-me__content>p:first-child {
    margin-bottom: 1rem;
}

.about-me__content h2 {
    max-width: 600px;
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.about-me__content>p.has-large-font-size {
    max-width: 620px;
    margin-bottom: 2rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.45rem, 2.5vw, 1.9rem) !important;
    line-height: 1.35;
}

.about-me__content>p:not(.has-large-font-size):not(:first-child) {
    max-width: 600px;
    line-height: 1.7;
}

.about-me__content>p+p {
    margin-top: 1.5rem;
}

.about-me__content>h2,
.about-me__content>p.has-large-font-size,
.about-me__content>p:not(.has-large-font-size):not(:first-child) {
    width: 100%;
    max-width: 620px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}



/* ==========================================================================
   Journey
   ========================================================================== */

.about-journey {
    max-width: 1120px;
    padding-block: clamp(5rem, 10vw, 9rem);
}

.about-journey .wp-block-columns {
    align-items: flex-start;
    gap: clamp(3rem, 8vw, 8rem);
}

.about-journey .wp-block-column:first-child {
    padding-top: 0.5rem;
}

.about-journey .wp-block-column:first-child>p {
    margin-bottom: 1rem;
}

.about-journey h2 {
    max-width: 420px;
    margin-top: 0;
    font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.about-journey .wp-block-column:last-child {
    max-width: 650px;
}

.about-journey .wp-block-column:last-child>p.has-large-font-size {
    margin-top: 0;
    margin-bottom: 2rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
    line-height: 1.4;
}

.about-journey .wp-block-column:last-child>p:not(.has-large-font-size) {
    line-height: 1.75;
}

.about-journey .wp-block-column:last-child>p+p {
    margin-top: 1.5rem;
}

/* ==========================================================================
   Experience
   ========================================================================== */

.about-experience {
    padding-block: clamp(2rem, 10vw, 5rem);
}

.about-experience__inner {
    max-width: 1240px;
    padding-block: clamp(2rem, 10vw, 5rem);
}

.about-experience__inner>p:first-child {
    margin-bottom: 1rem;
    text-align: center;
}

.about-experience__inner>h2 {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.about-experience__intro {
    max-width: 720px;
    margin: 1.5rem auto 0;
    text-align: center;
    line-height: 1.5;
}


/* Experience cards */

.about-experience__grid {
    position: relative;
    left: 50%;
    width: 80vw;
    max-width: 1400px;
    margin-top: 3.5rem !important;
    margin-left: -40vw !important;
    margin-right: 0 !important;
    align-items: stretch;
    gap: 1.25rem;
    box-sizing: border-box;
}

.about-experience__grid>.wp-block-column {
    flex: 1 1 0;
}

.about-experience__item {
    height: 100%;
    min-height: 260px;
    box-sizing: border-box;
    padding: clamp(2rem, 3vw, 2.75rem);
    border-radius: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 1rem 2.5rem rgba(70, 56, 47, 0.05);
    text-align: center;
}

.about-experience__grid .wp-block-column:nth-child(1) .about-experience__item {
    border-radius: 2.5rem 2.5rem 2.5rem 0.75rem;
}

.about-experience__grid .wp-block-column:nth-child(2) .about-experience__item {
    border-radius: 2.5rem 0.75rem 2.5rem 2.5rem;
}

.about-experience__grid .wp-block-column:nth-child(3) .about-experience__item {
    border-radius: 0.75rem 2.5rem 2.5rem 2.5rem;
}

.about-experience__item>p:first-child {
    margin: 0 0 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-experience__item h3 {
    margin: 0 0 1rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem) !important;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.about-experience__item p:last-child {
    margin-bottom: 0;
    line-height: 1.6;
}



/* ==========================================================================
   Experience — Tablet
   ========================================================================== */

@media (max-width: 1000px) {

    .about-experience__grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        position: relative;
        left: auto;

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

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

        gap: 1.25rem;
    }

    .about-experience__grid>.wp-block-column {
        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .about-experience__item {
        width: 100%;
        min-height: 0;
        box-sizing: border-box;
    }

}

/* ==========================================================================
   My path into counselling — peeling journey
   ========================================================================== */

.about-path {
    width: 100%;
    max-width: none;
    padding-block: clamp(5rem, 10vw, 9rem);
}

.about-path__inner {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */

.about-path__intro {
    width: min(100% - 3rem, 750px);
    margin-inline: auto;
    text-align: center;
}

.about-path__intro>p:first-child {
    margin-bottom: 1rem;
}

.about-path__intro h2 {
    max-width: 750px;
    margin: 0 auto;

    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.about-path__intro-text {
    max-width: 680px;
    margin: 1.5rem auto 0;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Peeling stack
   -------------------------------------------------------------------------- */

.about-path__peel {
    width: min(84%, 1200px);
    margin: clamp(4rem, 7vw, 6rem) auto 0;
}

.about-path__stack {
    position: relative;
    width: 100%;
    height: clamp(430px, 48vw, 560px);
}


/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.about-path__item {
    position: absolute;
    inset: 0;

    z-index: 1;

    box-sizing: border-box;
    min-height: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    padding: clamp(2rem, 4vw, 4rem);

    border-radius: var(--radius-large);

    box-shadow: 0 1.5rem 3.5rem rgba(70, 56, 47, 0.08);

    will-change: transform;
}


/* --------------------------------------------------------------------------
   Peeling positions
   -------------------------------------------------------------------------- */

.about-path__item--one {
    z-index: 5;
    transform: translateY(0) rotate(-0.4deg);
}

.about-path__item--two {
    z-index: 4;
    transform: translateY(18px) rotate(0.5deg);
}

.about-path__item--three {
    z-index: 3;
    transform: translateY(36px) rotate(-0.35deg);
}

.about-path__item--four {
    z-index: 2;
    transform: translateY(54px) rotate(0.4deg);
}

.about-path__item--five {
    z-index: 1;
    transform: translateY(72px) rotate(-0.25deg);
}


/* --------------------------------------------------------------------------
   Card numbers
   -------------------------------------------------------------------------- */

.about-path__item>p:first-child {
    position: relative;

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

    width: 2.5rem;
    height: 2.5rem;

    margin: 0 0 2rem;

    border-radius: 50%;

    background: var(--wp--preset--color--brown);
    color: var(--wp--preset--color--beige);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   Card typography
   -------------------------------------------------------------------------- */

.about-path__item h3 {
    max-width: 700px;
    margin: 0 0 1.25rem;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.about-path__item>p:last-child {
    max-width: 700px;
    margin: 0;
    align-items: center;
    font-size: clamp(1.5rem, 1.4vw, 2rem);
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Membership / BACP note
   -------------------------------------------------------------------------- */

.about-path__membership {
    max-width: 700px;
    margin: 4rem auto 0;
    padding-top: 1.5rem;

    border-top: 1px solid var(--wp--preset--color--beige);

    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.about-path__membership strong {
    color: var(--wp--preset--color--plum);
    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.2rem;
    font-weight: 400;
}

@media (max-width:1000px) {
    .about-path__item>p:last-child {
        font-size: clamp(1.25rem, 1.4vw, 1.5rem);
    }
}

@media (max-width: 781px) {

    .about-path__peel {
        width: calc(100% - 1rem);
        margin-top: 3.5rem;
    }

    .about-path__stack {
        height: 560px;
    }

    .about-path__item {
        width: 100%;
        height: 560px;
        padding: 1.75rem 1.5rem;
        border-radius: 2rem 0.75rem 2rem 2rem;
    }

    .about-path__item>p:first-child {
        width: 2.25rem;
        height: 2.25rem;
        margin-bottom: 1.25rem;
    }

    .about-path__item h3 {
        font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    }

    .about-path__item>p:last-child {
        font-size: 1.3rem;
        line-height: 1.6;
    }

    .about-path__membership {
        margin-top: 3rem;
    }
}


@media (max-width: 480px) {

    .about-path__item {
        padding: 1.5rem 1.25rem;
    }

    .about-path__item h3 {
        font-size: clamp(1.65rem, 7.5vw, 2.1rem) !important;
    }

    .about-path__item>p:last-child {
        font-size: 0.95rem;
        line-height: 1.6;
    }

}

/* ==========================================================================
   About — Reading & Journal links
   ========================================================================== */

.about-links {
    max-width: 1000px;
    margin: clamp(1.5rem, 10vw, 3rem) auto 0;
    padding-top: clamp(4rem, 7vw, 5rem);
    border-top: 1px solid rgba(70, 56, 47, 0.12);
    text-align: center;
}

.about-links>p {
    margin: 0 0 1rem;
}

.about-links>h2 {
    max-width: 650px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.about-links__grid {
    gap: 1.5rem;
    align-items: stretch;
}

.about-links__item {
    height: 100%;
    box-sizing: border-box;

    padding: clamp(2rem, 4vw, 3rem);

    border-radius: 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    box-shadow: 0 1rem 2.5rem rgba(70, 56, 47, 0.05);
}

.about-links__item>p:first-child {
    margin: 0 0 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.about-links__item h3 {
    max-width: 400px;
    margin: 0 0 1rem;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem) !important;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.about-links__item>p:not(:first-child) {
    max-width: 420px;
    margin: 0;
    line-height: 1.6;
}

.about-links__item .wp-block-buttons {
    margin-top: auto;
    padding-top: 2rem;
    justify-content: center;
}


/* Mobile */

@media (max-width: 781px) {

    .about-links {
        margin-top: 4rem;
        padding-top: 3rem;
    }

    .about-links>h2 {
        margin-bottom: 2.5rem;
    }

    .about-links__grid {
        display: block;
    }

    .about-links__grid>.wp-block-column {
        margin-bottom: 1rem;
    }

    .about-links__grid>.wp-block-column:last-child {
        margin-bottom: 0;
    }

    .about-links__item {
        padding: 2rem 1.5rem;
    }

}




@media (max-width: 781px) {

    /* Hero */
    .about-page__hero {
        padding-block: 5rem;
    }

    .about-page__hero h1 {
        font-size: clamp(2.8rem, 12vw, 4rem) !important;
    }

    .about-page__hero-intro {
        margin-top: 1.5rem;
    }


    /* Meet Thalia */
    .about-me-section {
        padding-block: 5rem;
    }

    .about-me__layout {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .about-me__content {
        display: contents;
    }

    .about-me__content>p:first-child {
        order: 1;
        margin-bottom: 1rem;
        text-align: center;
    }

    .about-me__content h2 {
        order: 2;
        max-width: 650px;
        margin: 0 auto 3rem;
        font-size: 2.5rem !important;
        line-height: 1.05;
        text-align: center;
    }

    .about-me__portrait {
        order: 3;
        width: 100%;
        margin-bottom: 3.5rem;
    }

    .about-me__portrait-image {
        width: min(100%, 340px);
        margin-inline: auto;
    }

    .about-me__content>p:not(:first-child) {
        order: 4;
        max-width: 650px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .about-me__content>p.has-large-font-size {
        margin-bottom: 2rem;
    }

    .about-me__content>p+p {
        margin-top: 1.5rem;
    }


    /* Experience */
    .about-experience {
        padding-block: 5rem;
    }

    .about-experience__grid {
        display: block;
    }

    .about-experience__grid>.wp-block-column {
        margin-bottom: 1rem;
    }

    .about-experience__item,
    .about-experience__grid .wp-block-column:nth-child(1) .about-experience__item,
    .about-experience__grid .wp-block-column:nth-child(2) .about-experience__item,
    .about-experience__grid .wp-block-column:nth-child(3) .about-experience__item {
        min-height: 0;
        border-radius: 2rem;
    }

}

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

@media (max-width: 480px) {

    .about-path__peel {
        width: calc(100% - 2rem);
    }

    .about-path__item {
        padding: 2rem;
    }
}

/* ==========================================================================
   Fees page
   ========================================================================== */

.fees-page {
    overflow: hidden;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.fees-page__hero {
    max-width: 900px;
    padding-block: clamp(3rem, 10vw, 6rem);
    text-align: center;
}

.fees-page__hero>p:first-child {
    margin: 0 0 1.25rem;
}

.fees-page__title {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.fees-page__intro {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    line-height: 1.55;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

/* ==========================================================================
   Fees — pricing steps
   ========================================================================== */

.fees-pricing {
    max-width: 900px;
}

.fees-pricing__steps {
    position: relative;
}

.fee-step {
    position: relative;
    max-width: 720px;
    padding: 1.75rem 0;
}

.fee-step+.fee-step {
    margin-top: 0;
    padding-top: 4rem;
    border-top: 1px solid rgba(70, 56, 47, 0.16);
}

.fee-step__label {
    margin: 0 0 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fee-step__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.fee-step__meta {
    margin: 0.6rem 0 0;
    color: var(--wp--preset--color--plum);
    font-weight: 600;
}

.fee-step__description {
    max-width: 600px;
    margin: 1rem 0 0;
    line-height: 1.65;
}

.fee-step p:last-child {
    margin-bottom: 0;
}


/* Small visual connection between the two */

.fee-step--consultation::after {
    content: "↓";
    position: absolute;
    left: 0;
    bottom: -0.85rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wp--preset--color--brown);
    color: var(--wp--preset--color--cream);
    font-size: 0.8rem;
    z-index: 2;
}

/* ==========================================================================
   Reduced-fee spaces
   ========================================================================== */

.fees-reduced-fee {
    position: relative;

    max-width: 900px;

    margin-block: clamp(3rem, 6vw, 5rem);

    padding: clamp(2.5rem, 5vw, 4rem);

    box-sizing: border-box;

    border-radius: 2.5rem 0.75rem 2.5rem 2.5rem;

    box-shadow: 0 1rem 2.5rem rgba(70, 56, 47, 0.05);

    text-align: center;

}


.fees-reduced-fee__label {
    margin: 0 0 1rem;

    font-size: 0.72rem !important;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}


.fees-reduced-fee__title {
    max-width: 650px;

    margin: 0 0 1.25rem;

    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
}


.fees-reduced-fee__text {
    max-width: 680px;

    margin: 0;

    color: rgba(70, 56, 47, 0.85);

    font-size: 1.05rem;
    line-height: 1.7;
}


.fees-reduced-fee__note {
    margin: 1rem 0 0;

    color: rgba(70, 56, 47, 0.7);

    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.5;
}


.fees-reduced-fee__button .wp-block-button__link {
    border-color: var(--wp--preset--color--brown);
    color: var(--wp--preset--color--brown);
}


.fees-reduced-fee__button .wp-block-button__link:hover {
    background: var(--wp--preset--color--brown);
    color: var(--wp--preset--color--sage);
}

@media (max-width: 781px) {

    .fees-reduced-fee {
        width: calc(100% - 5rem);
        max-width: none;

        margin-block: 2.5rem 4rem;
        margin-inline: auto;

        padding: 2.25rem 1.5rem;

        border-radius: 2rem 0.75rem 2rem 2rem;

        text-align: center;
        box-sizing: border-box;
    }

    .fees-reduced-fee__title {
        font-size: 2rem !important;
    }

}

/* ==========================================================================
   Where we meet
   ========================================================================== */

.fees-location {
    max-width: 1120px;
}

.fees-section-heading {
    max-width: 650px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.fees-section-heading>p {
    margin: 0 0 1rem;
}

.fees-section-heading h2 {
    margin: 0;
}

.location-grid {
    align-items: stretch;
    gap: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
}

.location-card {
    height: 100%;
    padding: 0;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    text-align: center;
}

.location-card__number {
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--plum);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.location-card h3 {
    margin: 0 0 0.75rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.location-card p:last-child {
    max-width: 480px;
    margin-bottom: 0;
    line-height: 1.65;
}

@media (min-width: 782px) {

    .location-grid>.wp-block-column+.wp-block-column {
        padding-left: clamp(2rem, 5vw, 5rem);
        border-left: 1px solid var(--wp--preset--color--beige);
    }

}

@media (max-width: 781px) {

    .location-grid {
        display: block;
    }

    .location-grid>.wp-block-column+.wp-block-column {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--wp--preset--color--beige);
    }

}

/* ==========================================================================
   Practical details
   ========================================================================== */

.fees-practical {
    border-top: 1px solid rgba(70, 56, 47, 0.06);
    padding-top: clamp(4.5rem, 8vw, 7rem) !important;
    padding-bottom: clamp(4.5rem, 8vw, 7rem) !important;
}


/* Keep heading and intro constrained */

.fees-practical__heading {
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.fees-practical__heading>p:first-child {
    margin: 0 0 1rem;
}

.fees-practical__heading h2 {
    margin: 0;
}

.fees-practical__intro {
    max-width: 620px;
    margin: 1.25rem auto 0;
    line-height: 1.6;
}


/* ==========================================================================
   Practical details grid
   ========================================================================== */


.fees-practical__grid {
    width: 84%;
    max-width: 1400px;
    margin-inline: auto !important;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: stretch;
}

.practical-item {
    height: 100%;
    box-sizing: border-box;
    padding: 1.75rem 0 0;
    border-top: 1px solid rgba(70, 56, 47, 0.22);
}

.practical-item__number {
    margin: 0 0 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.practical-item h3 {
    margin: 0 0 0.75rem;
    min-height: 2.1em;
}

.practical-item p:last-child {
    margin-bottom: 0;
    line-height: 1.65;
}

@media (max-width: 1000px) {

    .fees-practical {
        padding-block: 4.5rem !important;
    }

    .fees-practical__heading {
        margin-bottom: 2.5rem;
    }

    /* Keep the grid comfortably inset on mobile */
    .fees-practical__grid {
        width: 100%;
        max-width: none;
    }

    .practical-item {
        padding-top: 1.5rem;
    }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .fees-page__hero {
        padding-block: 5rem !important;
    }

    .fees-page__title {
        font-size: clamp(2.8rem, 12vw, 4rem) !important;
    }

    .fees-page__intro {
        margin-top: 1.5rem;
    }

    .fees-pricing-section {
        padding-block: 4rem !important;
    }

    .fees-pricing {
        max-width: none;
    }

    .fee-step {
        padding-block: 1.5rem;
    }

    .fee-step+.fee-step {
        padding-top: 2.25rem;
    }

    .fee-step__title {
        font-size: 1.8rem !important;
    }

    .fees-location {
        padding-block: 4.5rem !important;
    }

    .fees-section-heading {
        margin-bottom: 2.5rem;
    }

    .location-card {
        padding: 1.75rem;
    }

    .fees-practical {
        padding-block: 4.5rem !important;
    }

    .fees-practical__heading {
        margin-bottom: 2.5rem;
    }

    /* Keep the grid comfortably inset on mobile */
    .fees-practical__grid {
        width: 100%;
        max-width: none;
    }

    .practical-item {
        padding-top: 1.5rem;
    }

}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-page {
    overflow: hidden;
    gap: 0 !important;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.contact-page__hero {
    max-width: 900px;
    padding-block: clamp(3rem, 10vw, 6rem);
    text-align: center;
}

.contact-page__hero>p:first-child {
    margin: 0 0 1.25rem;
}

.contact-page__title {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.contact-page__intro {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    line-height: 1.55;
}


/* ==========================================================================
   Contact section
   ========================================================================== */

.contact-form-section {
    border-top: 1px solid rgba(70, 56, 47, 0.05);
    padding-top: clamp(3rem, 6vw, 5rem) !important;
    padding-bottom: clamp(3rem, 6vw, 5rem) !important;

}


.contact-form-layout {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;

    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
}


/* ==========================================================================
   Contact form introduction
   ========================================================================== */

.contact-form-intro {
    max-width: 390px;
    margin: 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--wp--preset--color--sage);
}

.contact-form-intro__eyebrow {
    margin: 0 0 0.85rem;
    color: var(--wp--preset--color--plum);
}

.contact-form-intro__heading {
    margin: 0;
    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.65rem, 2.5vw, 2.15rem) !important;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.contact-form-intro__lead {
    margin: 1.25rem 0 0;
    color: var(--wp--preset--color--brown);

    font-size: 1rem;
    line-height: 1.65;
}

.contact-form-intro__note {
    margin: 1rem 0 0;
    color: var(--wp--preset--color--brown);

    font-size: 0.9rem;
    line-height: 1.65;
    opacity: 0.68;
}


/* Mobile */

@media (max-width: 781px) {

    .contact-form-intro {
        max-width: none;
        padding-left: 1.25rem;
    }

    .contact-form-intro__heading {
        font-size: 1.8rem !important;
    }

}


/* ==========================================================================
   Form
   ========================================================================== */

.contact-form-shell {
    width: 100%;
    max-width: 620px;
    margin: 0;
    padding: 0;

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

.contact-form {
    width: 100%;
    max-width: 100%;
}


/* ==========================================================================
   Individual fields
   ========================================================================== */

.contact-form__field {
    margin: 0;
    padding: 0 0 2rem;
}

.contact-form__field+.contact-form__field {
    padding-top: 0;
    border-top: 0 !important;
}


/* ==========================================================================
   Field titles
   ========================================================================== */

.contact-form__field>label,
.contact-form__field>legend {
    display: block;
    margin: 0;

    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 400;
    line-height: 1.3;

    text-align: center;
}


/* No field numbers */

.contact-form__field>label::before,
.contact-form__field>legend::before {
    content: none !important;
    display: none !important;
}


/* Required text */

.contact-form__field label span {
    font-family: var(--wp--preset--font-family--sans);
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.55;
}


/* ==========================================================================
   Text inputs
   ========================================================================== */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 0.75rem 0 0;
    padding: 0.4rem 0 0.55rem;

    border: 0;
    border-bottom: 1px solid rgba(70, 56, 47, 0.25);
    border-radius: 0;

    background: transparent !important;
    color: var(--wp--preset--color--brown);

    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;

    text-align: left;

    box-shadow: none !important;

    transition:
        border-color var(--transition),
        padding var(--transition);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
    min-height: 2.25rem;
}

.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.contact-form textarea:hover {
    border-bottom-color: rgba(70, 56, 47, 0.45);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--wp--preset--color--plum);
    padding-bottom: calc(0.5rem - 1px);
}


/* ==========================================================================
   Message
   ========================================================================== */

.contact-form textarea {
    min-height: 75px;
    resize: vertical;
}


/* ==========================================================================
   Enquiry type selector
   ========================================================================== */

.contact-form fieldset {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0;

    margin: 1.25rem 0 0;
    padding: 0 0 2.5rem;

    border: 0;

    text-align: center;
}

.contact-form fieldset legend {
    margin-bottom: 2rem;
}


/* Individual choice */

.contact-form fieldset .contact-form__option {
    position: relative;

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

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

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: rgba(70, 56, 47, 0.28);

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 400 !important;
    line-height: 1.3;

    cursor: pointer;

    transition: color var(--transition);
}


/* Hide actual controls */

.contact-form fieldset .contact-form__option input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: 0;

    opacity: 0;
    pointer-events: none;
}


/* Selected = brown */

.contact-form fieldset .contact-form__option:has(input:checked) {
    color: var(--wp--preset--color--brown) !important;
    font-weight: 500 !important;
}


/* Hover */

.contact-form fieldset .contact-form__option:hover {
    color: var(--wp--preset--color--brown);
}


/* Sage dots */

.contact-form fieldset .contact-form__option:not(:last-child)::after {
    content: "·";

    display: inline-block;

    margin-inline: 0.65rem;

    color: var(--wp--preset--color--sage);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.15rem;
    font-weight: 400;
}


/* Keyboard focus */

.contact-form fieldset .contact-form__option:has(input:focus-visible) {
    outline: 1px dotted var(--wp--preset--color--plum);
    outline-offset: 4px;
}


/* ==========================================================================
   Form hint
   ========================================================================== */

.contact-form__hint {
    margin: 0.5rem 0 0;

    font-size: 0.75rem;
    line-height: 1.5;

    text-align: center;
    opacity: 0.6;
}

/* turnstile widget */

.contact-form__turnstile {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
}


/* ==========================================================================
   Submit
   ========================================================================== */

.contact-form__actions {
    margin: 0.75rem 0 0;
    text-align: center;
}

.contact-form__actions button {
    min-height: 2.8rem;

    padding: 0.7rem 1.4rem;

    border: 0;
    border-radius: 0.35rem;

    background: var(--wp--preset--color--brown);
    color: var(--wp--preset--color--off-white);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color var(--transition),
        transform var(--transition);
}

.contact-form__actions button:hover {
    background: var(--wp--preset--color--plum);
    transform: translateY(-2px);
}


/* ==========================================================================
   Success
   ========================================================================== */

.contact-form__success {
    padding: 2rem;

    background: var(--wp--preset--color--sage);
    border-radius: 1.25rem;
}

.contact-form__success h2 {
    margin-top: 0;
}

.contact-form__success p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Error
   ========================================================================== */

.contact-form__error {
    margin-bottom: 1.5rem;
    padding: 0.85rem 1rem;

    border-left: 2px solid var(--wp--preset--color--plum);
    background: rgba(117, 101, 116, 0.06);
}

/* ==========================================================================
   Prefer email — alternative contact
   ========================================================================== */

.contact-page__alternative-section {
    position: relative;
    text-align: center;
    padding-block: clamp(2rem, 4vw, 3rem) !important;
}

.contact-page__alternative {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}


/* Small label */

.contact-page__alternative>p:first-child {
    margin: 0 0 1.5rem;

    color: var(--wp--preset--color--brown);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}


/* Heading */

.contact-page__alternative h2 {
    max-width: 650px;
    margin: 0 auto;

    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
}


/* Email */

.contact-page__email-placeholder {
    margin: 2.5rem 0 0;

    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.3;
}

.contact-page__email-placeholder a {
    position: relative;

    color: inherit;
    text-decoration: none;
}

.contact-page__email-placeholder a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.25rem;

    height: 1px;

    background: rgba(70, 56, 47, 0.45);

    transition:
        left var(--transition),
        right var(--transition),
        background-color var(--transition);
}

.contact-page__email-placeholder a:hover::after {
    left: 0.5rem;
    right: 0.5rem;
    background: var(--wp--preset--color--brown);
}


/* Supporting text */

.contact-page__email-note {
    max-width: 430px;
    margin: 1.5rem auto 0;

    color: rgba(70, 56, 47, 0.7);

    font-size: 0.9rem;
    line-height: 1.65;
}


.contact-form textarea::placeholder {
    text-align: center;
    color: rgba(70, 56, 47, 0.45);
    opacity: 1;
}

/* ==========================================================================
   Contact page — remove gaps between full-width sections
   ========================================================================== */


.contact-page>.wp-block-group {
    margin-block-start: 0 !important;
}

/* Mobile */

@media (max-width: 781px) {

    .contact-page__alternative-section {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    .contact-page__alternative {
        max-width: 520px;
    }

    .contact-page__alternative h2 {
        font-size: clamp(2rem, 9vw, 2.8rem) !important;
    }

    .contact-page__email-placeholder {
        margin-top: 2rem;
        font-size: 1.35rem;
    }

    /* Contact content: text first, form second */

    .contact-form-layout {
        display: flex !important;
        flex-direction: column;
        gap: 4rem;
    }

    .contact-form-intro {
        order: 1;

        width: 100%;
        max-width: 620px;

        margin-inline: auto;
        padding-left: 0;
        padding-bottom: 2rem;

        border-left: 0;
        border-bottom: 2px solid var(--wp--preset--color--sage);

        text-align: center;
    }

    .contact-form-intro__eyebrow {
        text-align: center;
    }

    .contact-form-intro__heading {
        text-align: center;
    }

    .contact-form-intro__lead,
    .contact-form-intro__note {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .contact-form-shell {
        order: 2;

        width: 100%;
        max-width: 620px;

        margin-inline: auto;
    }

}

/* ==========================================================================
   Reading page
   ========================================================================== */

.reading-page {
    overflow: hidden;
}

.reading-page__hero {
    max-width: 900px;
    padding-block: clamp(3rem, 10vw, 6rem);
    text-align: center;
}

.reading-page__hero>p:first-child {
    margin: 0 0 1.25rem;
}

.reading-page__title {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.reading-page__intro {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    line-height: 1.55;
}


/* ==========================================================================
   Reading library
   ========================================================================== */

.reading-library {
    max-width: 1120px;
    margin-inline: auto;
    padding-block: clamp(2rem, 8vw, 4rem) !important;
}

.reading-section+.reading-section {
    margin-top: clamp(6rem, 10vw, 9rem);
}

.reading-section__heading {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.reading-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--wp--preset--color--plum);
    /* text-align: center; */
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.reading-section__heading h2 {
    margin: 0;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
}


/* ==========================================================================
   Book grid
   ========================================================================== */

.reading-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
}


/* ==========================================================================
   Book
   ========================================================================== */

.reading-book {
    min-width: 0;
}

.reading-book__cover {
    display: block;

    width: 100%;
    max-width: 260px;
    margin: 0 auto 1.75rem;

    text-decoration: none;
}

.reading-book__cover img {
    display: block;

    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;

    border-radius: 0.35rem;

    box-shadow:
        0 1rem 2.5rem rgba(70, 56, 47, 0.12);

    transition:
        transform 650ms var(--ease-soft),
        box-shadow 650ms var(--ease-soft);
}

.reading-book__cover:hover img {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow: 0 1.5rem 3rem rgba(70, 56, 47, 0.14);
}


/* Missing cover */

.reading-book__cover-placeholder {
    display: grid;
    place-items: center;

    width: 100%;
    aspect-ratio: 2 / 3;

    padding: 2rem;
    box-sizing: border-box;

    border-radius: 0.35rem;

    background: var(--wp--preset--color--beige);
    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.4rem;
    line-height: 1.2;
    text-align: center;

    box-shadow:
        0 1rem 2.5rem rgba(70, 56, 47, 0.08);
}


/* Book information */

.reading-book__details {
    max-width: 330px;
    margin-inline: auto;
    text-align: center;
}

.reading-book__title {
    margin: 0;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    font-weight: 400;
    line-height: 1.15;
}

.reading-book__title a {
    color: var(--wp--preset--color--brown);
    text-decoration: none;
}

.reading-book__title a:hover {
    color: var(--wp--preset--color--plum);
}

.reading-book__author {
    margin: 0.1rem 0 0;

    color: rgba(70, 56, 47, 0.65);

    font-size: 0.85rem;
}

.reading-book__thoughts {
    margin-top: 0.5rem;

    color: rgba(70, 56, 47, 0.78);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.65;
}

.reading-book__thoughts p {
    margin: 0;
}


/* ==========================================================================
   Journal page
   ========================================================================== */

.journal-page {
    overflow: hidden;
}

.journal-page__hero {
    max-width: 900px;
    padding-block: clamp(3rem, 10vw, 6rem);
    text-align: center;
}

.journal-page__hero>p:first-child {
    margin: 0 0 1.25rem;
}

.journal-page__title {
    max-width: 900px;
    margin: 0 auto;
    font-size: clamp(3rem, 7vw, 6rem) !important;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.journal-page__intro {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
    line-height: 1.55;
}


/* ==========================================================================
   Journal list
   ========================================================================== */

.journal-list {
    max-width: 980px;
    margin-inline: auto;
}

.journal-entry {
    position: relative;

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

    gap: clamp(2rem, 5vw, 3rem);

    padding-block: clamp(1rem, 4vw, 2rem);

    transition:
        padding-left var(--motion-medium) var(--ease-soft);
}

/* .journal-entry {
    border-top: 1px solid rgba(70, 56, 47, 0.15);
} */
/* 
.journal-entry:last-child {
    border-bottom: 1px solid rgba(70, 56, 47, 0.15);
} */

.journal-entry__meta {
    padding-top: 0.35rem;

    color: var(--wp--preset--color--plum);

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}

.journal-entry__content {
    max-width: 700px;
}

.journal-entry__title {
    margin: 0;

    font-size: clamp(2.5rem, 3vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-family: "Reenie Beanie", cursive;
}

.journal-entry__title a {
    color: var(--wp--preset--color--brown);
    text-decoration: none;
}

.journal-entry__title a:hover {
    color: var(--wp--preset--color--plum);
}

.journal-entry__excerpt {
    max-width: 620px;

    margin-top: 1.25rem;

    color: rgba(70, 56, 47, 0.72);

    font-size: 1rem;
    line-height: 1.75;
}


.journal-entry__excerpt p {
    margin: 0;
}

.journal-entry__link {
    display: inline-block;

    /* margin-top: 1.5rem; */

    color: var(--wp--preset--color--plum);

    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;

    text-decoration: none;
}

.journal-entry__link:hover {
    color: var(--wp--preset--color--plum);
}

.journal-entry__link span {
    display: inline-block;
    margin-left: 0.3rem;

    transition:
        transform var(--motion-medium) var(--ease-soft);
}

.journal-entry__link:hover span {
    transform: translateX(5px);
}

.journal-entry__botanical {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 30px;

    opacity: 0.55;
}

.journal-entry__botanical img {
    display: block;

    width: 60px;
    height: 35px;

    object-fit: contain;
}


/* Empty states */

.reading-empty,
.journal-empty {
    margin: 0;
    padding: 3rem 0;

    color: rgba(70, 56, 47, 0.65);

    text-align: center;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .journal-list-section {
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    .reading-page__hero,
    .journal-page__hero {
        padding-top: 5rem !important;
        padding-bottom: 4.5rem !important;
    }

    .reading-page__title,
    .journal-page__title {
        font-size: clamp(2.6rem, 11vw, 3.6rem) !important;
    }

    .reading-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem 1.5rem;
    }

    .reading-book__cover {
        margin-bottom: 1.25rem;
    }

    .reading-book__title {
        font-size: 1.25rem;
    }

    .reading-book__thoughts {
        font-size: 0.85rem;
    }

    .journal-entry {
        display: block;
    }

    .journal-entry__meta {
        margin-bottom: 0.75rem;
    }

    .journal-entry__title {
        font-size: 1.8rem;
    }

}


/* Small phones */

@media (max-width: 480px) {

    .reading-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .reading-book__cover {
        max-width: 230px;
    }

}

/* ==========================================================================
   Individual Journal Entry
   ========================================================================== */

.journal-entry-page {
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Entry header
   -------------------------------------------------------------------------- */

.journal-entry-page__hero {
    max-width: 900px;

    margin-inline: auto;

    text-align: center;
}

.journal-entry-page__eyebrow {
    margin: 0 0 0.75rem;
}


.journal-entry-page__title {
    max-width: 850px;

    margin: clamp(1.25rem, 5vw, 2rem) auto 0 !important;

    font-size:
        clamp(3.25rem, 6vw, 4.5rem) !important;

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.04em;

    padding-bottom: 1.25rem;


    font-family: "Reenie Beanie", cursive;


}


.journal-entry-page__date {
    margin: 0;

    margin-top: 0.5rem;

    color: var(--wp--preset--color--plum);

    /* font-family: "Reenie Beanie", cursive; */
    font-size: 1rem;
    font-weight: 400;

    letter-spacing: 0.02em;
}


.journal-entry-page__botanical {
    width: 81px;
    height: 54px;

    margin: 1.5rem auto 1rem;

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

.journal-entry-page__botanical img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0.7;
}


/* --------------------------------------------------------------------------
   Writing area
   -------------------------------------------------------------------------- */

.journal-entry-page__writing {
    position: relative;
    padding-top: 1.5rem;
}

.journal-entry-page__writing-inner {
    max-width: 760px;

    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Main journal writing
   -------------------------------------------------------------------------- */

.journal-entry-page__writing .wp-block-post-content {
    max-width: 720px;

    margin-inline: auto;

    font-family:
        var(--wp--preset--font-family--serif);

    font-size: clamp(1.2rem, 1.8vw, 1.4rem);

    line-height: 1.85;

    letter-spacing: -0.005em;
}

/* use this if want to make first three words different */
.journal-opening-word {
    font-size: 1.35em;
    font-weight: 400;
    line-height: 0.9;
    font-family: "Reenie Beanie", cursive;
    color: var(--wp--preset--color--brown);
}


/* Paragraphs */

.journal-entry-page__writing .wp-block-post-content p {
    margin-top: 0;
    margin-bottom: 1.8rem;
}


/* --------------------------------------------------------------------------
   First paragraph — slightly more intimate
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Headings inside entries
   -------------------------------------------------------------------------- */

.journal-entry-page__writing .wp-block-post-content h2,
.journal-entry-page__writing .wp-block-post-content h3,
.journal-entry-page__writing .wp-block-post-content h4 {
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;

    font-family:
        var(--wp--preset--font-family--serif);

    font-weight: 400;

    line-height: 1.2;
}

.journal-entry-page__writing .wp-block-post-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.journal-entry-page__writing .wp-block-post-content h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}


/* --------------------------------------------------------------------------
   Pull quotes
   -------------------------------------------------------------------------- */

.journal-entry-page__writing blockquote,
.journal-entry-page__writing .wp-block-quote {
    margin: 0.25rem 0;

    padding: 0.5rem 3rem;

    font-size: clamp(1.6rem, 2.5vw, 2.5rem);

    color: var(--wp--preset--color--plum);

    font-family: "Reenie Beanie", cursive;

    font-style: italic;

    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.journal-entry-page__writing .wp-block-post-content a {
    color: var(--wp--preset--color--plum);
}


/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.journal-entry-page__writing .wp-block-post-content ul,
.journal-entry-page__writing .wp-block-post-content ol {
    margin-bottom: 2rem;

    padding-left: 1.5rem;
}

.journal-entry-page__writing .wp-block-post-content li {
    margin-bottom: 0.6rem;
}


/* --------------------------------------------------------------------------
   End of entry
   -------------------------------------------------------------------------- */

.journal-entry-page__end {
    text-align: center;
}

.journal-entry-page__end-inner {
    max-width: 600px;
    margin-inline: auto;
}

.journal-entry-page__end-mark {
    margin: 0;

    color: var(--wp--preset--color--plum);

    font-family:
        var(--wp--preset--font-family--serif);

    font-size: 2rem;

    line-height: 1;
}

.journal-entry-page__end-note {
    margin: 1rem 0 0;

    /* use reenie beanie */
    font-family: 'Reenie Beanie', cursive;

    font-size: 2rem;

    font-style: italic;

    color: rgba(70, 56, 47, 0.65);
}

.journal-entry-page__back {
    margin: 2rem 0 0;
    padding-bottom: 2rem;
}

.journal-entry-page__back a {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: var(--wp--preset--color--plum);

    font-size: 0.85rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.journal-entry-page__back a:hover {
    gap: 0.9rem;

    color: var(--wp--preset--color--brown);
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

    .journal-entry-page__hero {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }

    .journal-entry-page__title {
        font-size: clamp(2.7rem, 12vw, 4rem) !important;
        padding-top: 1rem;
    }

    .journal-entry-page__date {}


    .journal-entry-page__writing {
        /* padding-top: 4.5rem !important; */
    }

    .journal-entry-page__writing .wp-block-post-content {
        font-size: 1.15rem;
        line-height: 1.8;
    }

}

/* ==========================================================================
   Footer — botanical interaction
   ========================================================================== */

.site-footer {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
}

.site-footer .footer-botanical-field {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

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

    height: 100% !important;

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

    transform: translateX(-50%);

    display: block;

    z-index: 0 !important;
    pointer-events: none;
}

.site-footer .footer-main,
.site-footer .footer-divider,
.site-footer .footer-bottom {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: 2rem;
    background: var(--wp--preset--color--brown) !important;
    color: var(--wp--preset--color--off-white);
}


/* ==========================================================================
   Main footer
   ========================================================================== */


.footer-main {
    display: grid;

    grid-template-columns:
        minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(140px, 0.7fr) minmax(160px, 0.8fr);

    gap: clamp(2rem, 5vw, 5rem);

    padding-bottom: clamp(4rem, 7vw, 6rem);
}


/* ==========================================================================
   Brand
   ========================================================================== */

.footer-brand__practice {
    margin: 0;
}

.footer-brand__practice a {
    color: var(--wp--preset--color--beige);
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.035em;
    line-height: 1;
    text-decoration: none;
}

.footer-brand__practice a:hover {
    color: var(--wp--preset--color--beige);
}

.footer-brand__name {
    margin: 0.5rem 0 0;
    color: var(--wp--preset--color--sage);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.footer-brand__description {
    max-width: 360px;
    margin: 1.75rem 0 0;
    color: rgba(245, 240, 232, 0.78);
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ==========================================================================
   Labels
   ========================================================================== */

.footer-label {
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--beige);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}


/* ==========================================================================
   Contact
   ========================================================================== */

.footer-contact__link {
    margin: 0;
}

.footer-contact__link a {
    color: var(--wp--preset--color--cream);
    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.35rem;
    line-height: 1.35;
    text-decoration: none;
}

.footer-contact__link a:hover {
    color: var(--wp--preset--color--beige);
}

.footer-location {
    margin: 1rem 0 0;
    color: rgba(245, 240, 232, 0.65);
    font-size: 0.85rem;
}


/* ==========================================================================
   Footer navigation
   ========================================================================== */

.footer-navigation__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.footer-navigation__links a {
    color: rgba(245, 240, 232, 0.78);

    font-family: var(--wp--preset--font-family--serif);
    font-size: 1rem;
    line-height: 1.3;

    text-decoration: none;

    transition:
        color var(--transition),
        opacity var(--transition);
}

.footer-navigation__links a:hover {
    color: var(--wp--preset--color--beige);
}


/* Journal / Reading separator */

.footer-navigation__separator {
    display: block;

    width: 2rem;
    height: 1px;

    margin: 0.4rem 0;

    background: rgba(229, 217, 202, 0.25);
}

/* ==========================================================================
   BACP accreditation
   ========================================================================== */

.footer-accreditation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-bacp {
    width: 180px;
    margin: 0 0 1rem;
}

.footer-bacp img {
    display: block;
    width: 180px;
    height: auto;
}

/* ==========================================================================
   Directories
   ========================================================================== */

.footer-directories__label {
    margin: 1.5rem 0 0.75rem;
}

.footer-directories {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
}

.footer-directory-logo {
    width: 180px;
    margin: 0;
}

.footer-directory-logo img {
    display: block;
    width: 180px;
    height: auto;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.footer-divider {
    width: 100%;
    margin: 0 !important;
    border: 0;
    border-top: 1px solid rgba(229, 217, 202, 0.2);
    background: transparent !important;
}


/* ==========================================================================
   Bottom
   ========================================================================== */

.footer-bottom {
    padding-top: 1.5rem;
    gap: 1rem 2rem;
}

.footer-copyright {
    margin: 0;
    color: rgba(245, 240, 232, 0.55);
    font-size: 0.75rem;
}

.footer-links {
    gap: 1.5rem;
}

.footer-links p {
    margin: 0;
}

.footer-links a {
    color: rgba(245, 240, 232, 0.65);
    font-size: 0.75rem;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--wp--preset--color--cream);
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 781px) {

    .site-footer {
        padding-top: 4rem;
    }

    .footer-main {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-bottom: 3.5rem;
    }

    .footer-brand__practice a {
        font-size: 2.25rem;
    }

    .footer-brand__description {
        margin-top: 1.25rem;
    }

    .footer-accreditation {
        margin-top: 0.5rem;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-navigation {
        margin-top: 0;
    }

    .footer-navigation__links {
        gap: 0.75rem;
    }

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 781px) {

    /* Shared */

    .about-page__hero,
    .therapy-hero,
    .fees-page__hero,
    .contact-page__hero {
        text-align: center;
    }

    .about-page__hero-intro,
    .therapy-hero__intro,
    .fees-page__intro,
    .contact-page__intro {
        margin-inline: 0;
    }

    /* Hero */

    .hero .wp-block-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Help */

    .help-card__content {
        min-height: 300px;
    }

    .help-topics {
        margin-top: 3rem !important;
    }

    /* Homepage about */

    .about-layout {
        display: block;
    }

    .about-portrait {
        margin-bottom: 3rem;
    }

    .about-portrait__shape {
        max-width: 360px;
        margin-inline: auto;
    }

    .about-credentials .wp-block-column {
        padding-right: 0;
    }

    /* Sessions */

    .sessions-layout {
        display: block;
    }

    .sessions-intro {
        margin-bottom: 3rem;
    }

    .sessions-card {
        border-radius: var(--radius-medium);
    }

    /* Therapy */

    .therapy-statement {
        border-radius: 2.5rem 0.75rem 2.5rem 2.5rem;
    }

    .therapy-audience__card {
        border-radius: 1.5rem 0.75rem 1.5rem 1.5rem;
    }

    /* About */

    .about-me__layout {
        display: block;
    }

    .about-me__portrait {
        margin-bottom: 3rem;
    }

    .about-me__portrait-placeholder {
        max-width: 360px;
    }

    .credential-row {
        display: block;
    }

    .credential-row>p {
        margin-top: 0.75rem;
    }

    .about-page__closing {
        text-align: left;
    }

    .about-page__closing .wp-block-buttons {
        justify-content: flex-start;
    }

    /* Fees */

    .fee-card {
        min-height: 300px;
    }

    .fee-card--primary {
        border-radius: 2rem 0.75rem 2rem 2rem;
    }

    .fee-card--consultation {
        border-radius: 0.75rem 2rem 2rem 2rem;
    }

    .fees-page__cta {
        text-align: left;
    }

    .fees-page__cta .wp-block-buttons {
        justify-content: flex-start;
    }

    /* Contact */

    .contact-form__success {
        padding: 2rem;
    }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal-stagger>* {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Global motion system
   ========================================================================== */


/* ==========================================================================
   Scroll reveals
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity var(--motion-slow) var(--ease-soft),
        transform var(--motion-slow) var(--ease-soft);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Slightly more subtle reveal */

.reveal--soft {
    transform: translateY(12px);
}


/* Reveal from the left */

.reveal--left {
    transform: translateX(-24px);
}

.reveal--left.is-visible {
    transform: translateX(0);
}


/* Reveal from the right */

.reveal--right {
    transform: translateX(24px);
}

.reveal--right.is-visible {
    transform: translateX(0);
}


/* ==========================================================================
   Staggered reveals
   ========================================================================== */

.reveal-stagger>* {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity var(--motion-slow) var(--ease-soft),
        transform var(--motion-slow) var(--ease-soft);
}

.reveal-stagger.is-visible>* {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible>*:nth-child(1) {
    transition-delay: 80ms;
}

.reveal-stagger.is-visible>*:nth-child(2) {
    transition-delay: 160ms;
}

.reveal-stagger.is-visible>*:nth-child(3) {
    transition-delay: 240ms;
}

.reveal-stagger.is-visible>*:nth-child(4) {
    transition-delay: 320ms;
}

.reveal-stagger.is-visible>*:nth-child(5) {
    transition-delay: 400ms;
}

.reveal-stagger.is-visible>*:nth-child(6) {
    transition-delay: 480ms;
}


/* ==========================================================================
   Images
   ========================================================================== */

.motion-image {
    overflow: hidden;
}

.motion-image img {
    transition:
        transform 900ms var(--ease-soft);
}

.motion-image:hover img {
    transform: scale(1.025);
}


/* ==========================================================================
   Cards
   ========================================================================== */

.motion-card {
    transition:
        transform var(--motion-medium) var(--ease-soft),
        box-shadow var(--motion-medium) var(--ease-soft);
}

.motion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1.5rem 3rem rgba(70, 56, 47, 0.09);
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
    transition:
        transform var(--motion-fast) var(--ease-soft),
        box-shadow var(--motion-fast) var(--ease-soft),
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.6rem 1.5rem rgba(70, 56, 47, 0.12);
}

.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: none;
}


/* ==========================================================================
   Links
   ========================================================================== */


/* ==========================================================================
   Arrows
   ========================================================================== */

.motion-arrow {
    display: inline-block;

    transition:
        transform var(--motion-medium) var(--ease-soft);
}

a:hover .motion-arrow {
    transform: translateX(5px);
}


/* ==========================================================================
   Organic floating elements
   ========================================================================== */

.motion-float {
    animation: gentle-float 7s ease-in-out infinite;
}

@keyframes gentle-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* Slightly different rhythm for secondary shapes */

.motion-float--slow {
    animation-duration: 10s;
}

.motion-float--small {
    animation-duration: 6s;
}


/* ==========================================================================
   Header
   ========================================================================== */


.site-header.is-scrolled {
    box-shadow: 0 0.5rem 2rem rgba(70, 56, 47, 0.06);
}


/* ==========================================================================
   Mobile navigation
   ========================================================================== */


.site-navigation__menu {
    transition:
        opacity var(--motion-medium) var(--ease-soft),
        transform var(--motion-medium) var(--ease-soft),
        visibility var(--motion-medium);
}


/* ==========================================================================
   Reading
   ========================================================================== */


/* ==========================================================================
   Journal
   ========================================================================== */


.journal-entry:hover {
    padding-left: 0.75rem;
}


/* ==========================================================================
   Form
   ========================================================================== */

.contact-form input,
.contact-form textarea {
    transition:
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        background-color var(--motion-fast) ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-1px);
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */


/* ==========================================================================
   BUTTONS
   ========================================================================== */


/* Add a subtle arrow to primary buttons */

/* .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
    content: "→";

    display: inline-block;

    transition: transform 0.3s ease;
}


.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after {
    transform: translateX(4px);
}


.wp-block-button .wp-block-button__link:hover {
    transform: translateY(-2px);
} */

.wp-block-button .wp-block-button__link::after {
    content: "→";

    display: inline-block;

    transition: transform 0.3s ease;
}


.wp-block-button .wp-block-button__link:hover::after {
    transform: translateX(4px);
}


.wp-block-button .wp-block-button__link:hover {
    transform: translateY(-2px);
}

/* Outline buttons */


/* ==========================================================================
   Single Book
   ========================================================================== */

.single-book {
    color: var(--wp--preset--color--brown);
}


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

.single-book__hero {
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(1rem, 8vw, 2.5rem) 1rem;
}

.single-book__hero-layout {
    align-items: center;
}

.single-book__intro {
    max-width: 680px;
    text-align: center;
}

.single-book__eyebrow {
    margin: 0 0 1rem;
    text-align: center;
}

.single-book__title {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;

    line-height: 1.02;
    letter-spacing: -0.035em;
}

.single-book__author {
    margin: 1.5rem 0 0;
    text-align: center;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.4;
    color: var(--wp--preset--color--plum);
}

.single-book__status {
    display: inline-block;

    margin: 1.75rem 0 0;
    padding: 0.55rem 0.9rem;

    background: var(--wp--preset--color--sage);
    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;

    color: var(--wp--preset--color--cream);
}

.single-book__cover {
    display: flex;
    justify-content: center;
}

.single-book__image {
    display: block;
    width: min(100%, 360px);
    height: auto;
    margin-inline: auto;

    box-shadow: 0 1.5rem 3rem rgba(70, 56, 47, 0.12);
}


/* --------------------------------------------------------------------------
   Cover
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Intro
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Thoughts
   -------------------------------------------------------------------------- */


/* ==========================================================================
   Single Book — Longer write-up
   ========================================================================== */

.single-book__article-section {
    padding:
        clamp(1rem, 8vw, 2rem) 2rem;

    background: var(--wp--preset--color--cream);
}

.single-book__article-layout {
    width: min(760px, 100%);
    margin-inline: auto;
}

.single-book__article-layout .single-book__section-label {
    margin: 0 0 2rem;

    color: var(--wp--preset--color--plum);

    font-size: 0.7rem;
    font-weight: 600;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.single-book__article-text {
    max-width: 720px;

    font-size: 1.05rem;
    line-height: 1.8;
}

.single-book__article-text p {
    margin-top: 0;
    margin-bottom: 1.6rem;
}

.single-book__article-text p:last-child {
    margin-bottom: 0;
}


/* Headings inside the longer write-up */

.single-book__article-text h2,
.single-book__article-text h3,
.single-book__article-text h4 {
    margin-top: 3rem;
    margin-bottom: 1rem;

    font-family: var(--wp--preset--font-family--serif);

    font-weight: 400;
    line-height: 1.2;
}

.single-book__article-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.single-book__article-text h3 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}


/* Links */

.single-book__article-text a {
    color: var(--wp--preset--color--plum);
}


/* Lists */

.single-book__article-text ul,
.single-book__article-text ol {
    margin-bottom: 1.6rem;

    padding-left: 1.5rem;
}

.single-book__article-text li {
    margin-bottom: 0.5rem;
}


/* --------------------------------------------------------------------------
   Back to reading
   -------------------------------------------------------------------------- */

.single-book__back-section {
    background: var(--wp--preset--color--cream);
    padding-bottom: clamp(2rem, 8vw, 3rem);
}

.single-book__back-inner {
    max-width: 1200px;
    margin-inline: auto;
}

.single-book__back-link {
    margin: 0;
}

.single-book__back-link a {
    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    color: var(--wp--preset--color--sage);

    font-weight: 600;

    text-decoration: none;

    transition:
        gap 0.3s ease,
        color 0.3s ease;
}

.single-book__back-link a:hover {
    gap: 0.9rem;

    color: var(--wp--preset--color--brown);
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

    .single-book__hero {
        padding-top: 5rem !important;
    }

    .single-book__hero-layout {
        flex-direction: column;
    }

    .single-book__cover {
        order: 1;
    }

    .single-book__intro {
        order: 2;

        width: 100%;
    }

    .single-book__image {
        width: min(70vw, 280px);
    }

    .single-book__title {
        font-size: clamp(2.75rem, 12vw, 4rem) !important;
    }

    .single-book__thoughts-heading {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }

    .single-book__back-link {
        padding-bottom: 3rem;
    }

}

/* ==========================================================================
   Privacy & Accessibility Pages
   ========================================================================== */


.privacy-page__hero,
.accessibility-page__hero {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-block: clamp(3rem, 10vw, 6rem);
    box-sizing: border-box;
    text-align: center;
}

.privacy-page__title,
.accessibility-page__title {
    max-width: 850px;
    margin-inline: auto;
}

.privacy-page__intro,
.accessibility-page__intro {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
}


/* Content */

.privacy-content-section,
.accessibility-content-section {
    border-top: 1px solid rgba(70, 56, 47, 0.05);
    text-align: center;
}

.privacy-content,
.accessibility-content {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    padding-block: clamp(4rem, 8vw, 6rem);
    box-sizing: border-box;
}

.privacy-content h2,
.accessibility-content h2 {
    max-width: 700px;
    margin-top: clamp(2.75rem, 5vw, 4rem);
    margin-bottom: 1.25rem;

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.privacy-content h2:first-child,
.accessibility-content h2:first-child {
    margin-top: 0;
}

.privacy-content p,
.accessibility-content p,
.privacy-content li,
.accessibility-content li {
    max-width: 680px;
    line-height: 1.75;
}

/* ==========================================================================
   Legal page lists
   ========================================================================== */

.privacy-content ul,
.accessibility-content ul {
    max-width: 680px;
    margin: 1.5rem auto;
    padding-left: 1.5rem;

    text-align: left;
    line-height: 1.75;
}

.privacy-content li,
.accessibility-content li {
    padding-left: 0.35rem;
}

.privacy-content li+li,
.accessibility-content li+li {
    margin-top: 0.5rem;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404 {
    min-height: 65vh;

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

    padding: 5rem 1.5rem;
    box-sizing: border-box;
}


.error-404__content {
    width: 100%;
    max-width: 680px;

    text-align: center;
}


/* --------------------------------------------------------------------------
   Number
   -------------------------------------------------------------------------- */

.error-404__number {
    margin: 0 0 1.5rem;

    color: var(--wp--preset--color--sage);

    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}


/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.error-404__title {
    margin: 0 auto 1.25rem;

    max-width: 620px;

    color: var(--wp--preset--color--brown);

    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.035em;
}


/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

.error-404__text {
    margin: 0 auto;

    max-width: 480px;

    color: var(--wp--preset--color--brown);

    font-size: 1.05rem;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {

    .error-404 {
        min-height: 60vh;
        padding: 4rem 1.25rem;
    }

    .error-404__title {
        font-size: clamp(2.25rem, 10vw, 3.2rem);
    }

}


/* ==========================================================================
   iPad landscape — Header spacing
   ========================================================================== */

@media (min-width: 782px) and (max-width: 1300px) {

    .site-header__inner {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        box-sizing: border-box;
    }

}

@media (min-width: 782px) and (max-width: 1300px) {

    .wp-block-group.alignwide,
    .wp-block-columns.alignwide,
    .wp-block-group.alignfull>.wp-block-group {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        box-sizing: border-box;
    }

}

@media (min-width: 782px) and (max-width: 1300px) {

    .fees-reduced-fee,
    .help-feature {
        width: calc(100% - 5rem) !important;
        max-width: none;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

}