/* ==========================================================================
   Site components
   --------------------------------------------------------------------------
   Contents
     1. Page hero (every page)
     2. Shared section text: title, subtitle, description, eyebrow
     3. Home page sections
     4. Site footer
     5. Reusable components (icon cards, timeline, media row, quote band ...)
     6. Our Founder sections
     7. Shared carousel, testimonial videos, justified text

   Design tokens (colours, type scale, container, hero height) are in
   style.css. Page-specific styles live next to each template in
   page-templates/*.css.
   ========================================================================== */

/* ==========================================================================
   1. Page hero (template-parts/page-hero.php)
   The cover photo at the top of every page. One height for the whole site
   (--hero-h in style.css) and the text lines up with the page container.
   ========================================================================== */

.page-hero {
    --hero-tint: 18 27 13;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    min-height: var(--hero-h);
    overflow: hidden;
    color: var(--color-white);
    background-color: rgb(var(--hero-tint));
}

.page-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional background video: sits on the photo and fades in once playing. */
.page-hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.page-hero__video.is-playing {
    opacity: 1;
}

/* Tinted fade from the left so the text stays readable on any photo. */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(var(--hero-tint) / 72%) 0%, rgb(var(--hero-tint) / 48%) 30%, rgb(var(--hero-tint) / 10%) 55%, transparent 75%);
}

.page-hero > .container {
    width: 100%;
    padding-top: 56px;
    padding-bottom: 56px;
}

.page-hero__content {
    max-width: 720px;
}

.page-hero__kicker {
    position: relative;
    display: block;
    margin-bottom: 22px;
    padding-top: 24px;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.page-hero__kicker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 2px;
    background: #c7933d;
}

.page-hero__title {
    margin: 0 0 18px;
    color: var(--color-white);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1.06;
    text-shadow: 0 2px 16px rgb(0 0 0 / 28%);
}

.page-hero__text {
    max-width: 620px;
    margin: 0;
    color: var(--color-white);
    font-size: var(--fs-h4);
    line-height: 1.4;
    text-shadow: 0 2px 12px rgb(0 0 0 / 34%);
}

.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* Hero buttons: solid light, or an outline ("ghost") for the second one. */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    color: #4a2e1c;
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 3px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hero-btn:hover {
    color: #4a2e1c;
    background: #f1ece4;
}

.hero-btn--ghost {
    color: var(--color-white);
    background: transparent;
    border-color: rgb(255 255 255 / 70%);
}

.hero-btn--ghost:hover {
    color: var(--color-white);
    background: rgb(255 255 255 / 12%);
}

/* Centred text on an even tint (Contact). */
.page-hero--center::before {
    background: rgb(var(--hero-tint) / 84%);
}

.page-hero--center .page-hero__content {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.page-hero--center .page-hero__kicker::before {
    left: 50%;
    width: 40px;
    transform: translateX(-50%);
}

.page-hero--center .page-hero__text {
    max-width: none;
    font-size: var(--fs-lead);
}

.page-hero--center .page-hero__actions {
    justify-content: center;
}

/* Our Founder keeps the 1350 x 546 shape on every screen (taller only if the text needs it). */
/* Home page hero (background video): taller than the other pages' heroes on
   desktop. Phones and tablets keep the shared --hero-h. */
@media (min-width: 992px) {
    body.page-template-home-page .page-hero {
        min-height: 720px;
    }
}

body.page-template-founder-page .page-hero {
    min-height: auto;
    aspect-ratio: 1350 / 546;
}

/* Photo only, no text. */
.page-hero--photo::before {
    display: none;
}

@media (max-width: 767px) {
    .page-hero::before {
        background: linear-gradient(90deg, rgb(var(--hero-tint) / 78%) 0%, rgb(var(--hero-tint) / 45%) 100%);
    }

    .page-hero__kicker {
        letter-spacing: 0.2em;
    }
}

/* ==========================================================================
   2. Shared section text
   ========================================================================== */
.section-title {
    margin-bottom: 20px;
    color: var(--color-primary);
}
.section-description {
    margin-bottom: 0;
    color: var(--color-primary);
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.5;
}
.section-description p {
    color: var(--color-primary);
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.5;
}
.section-subtitle {
    margin: 0;
    color: var(--color-secondary);
    font-size: var(--fs-lead);
    font-weight: 600;
}
.section-eyebrow {
    display: inline-block;
    width: 50px;
    height: 2px;
    margin-bottom: 15px;
    background: var(--color-light-primary);
}

/* ==========================================================================
   3. Home page sections
   ========================================================================== */

/* About section */
.about-section {
    position: relative;
    overflow: hidden;
}
.about-section__container {
    position: relative;
    z-index: 1;
}
.about-section__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    padding: 25px 60px;
    border-right: 2px solid var(--color-light-primary);
}
.about-section__brand-image {
    width: 100%;
    max-width: 150px;
    object-fit: contain;
}
.about-section__brand-name,
.about-section__tagline {
    margin: 0;
    color: var(--color-light-primary);
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
.about-section__brand-name {
    margin-top: 18px;
    font-size: var(--fs-h3);
    letter-spacing: 0.18em;
}
.about-section__tagline {
    margin-top: 14px;
    font-size: var(--fs-lead);
    letter-spacing: 0.3em;
}
.about-section__brand-line {
    display: block;
    width: 62px;
    height: 2px;
    margin-top: 28px;
    background-color: var(--color-light-primary);
}
.about-section__content {
    max-width: 650px;
    padding-left: 70px;
}
.about-section__motto {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgb(179 120 30 / 30%);
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
}
.about-section__motto em {
    color: var(--color-light-primary);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.about-section__leaf {
    position: absolute;
    top: 50%;
    width: 170px;
    max-width: 18vw;
    opacity: 0.55;
    pointer-events: none;
    transform: translateY(-50%);
}
.about-section__leaf--left {
    left: 0;
}
.about-section__leaf--right {
    right: 0;
}

/* Highlights section */
.highlights-section {
    padding: 51px 0;
    color: var(--color-white);
    background-color: var(--color-dark-green);
}
.highlights-section__item {
    padding: 0 40px;
}
.highlights-section__item + .highlights-section__item {
    border-left: 1px solid
        color-mix(in srgb, var(--color-white) 60%, transparent);
}
.highlights-section__content {
    display: flex;
    align-items: center;
    gap: 28px;
}
.highlights-section__icon {
    flex: 0 0 66px;
    width: 66px;
    color: var(--color-light-primary);
    font-size: 62px;
    line-height: 1;
    text-align: center;
}
.highlights-section__title,
.highlights-section__description {
    margin: 0;
    color: var(--color-white);
}
.highlights-section__title {
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.45;
    text-transform: uppercase;
    opacity: 0.85;
}
.highlights-section__title strong {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1;
}
.highlights-section__description {
    margin-top: 7px;
    font-size: var(--fs-body);
    font-weight: 400;
    opacity: 0.7;
}

/* Heritage section */
.heritage-section__content {
    max-width: 590px;
}
.heritage-section__description {
    max-width: 570px;
    margin-bottom: 25px;
}
.heritage-section__motto {
    /* same italic motto line as the intro section, spaced above the button */
    max-width: 570px;
    margin: 0 0 28px;
}
.heritage-section__image-wrap {
    height: 405px;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
}
.heritage-section__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quote section */
.quote-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 570px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.quote-section::before {
    position: absolute;
    inset: 0;
    content: '';
    background: rgb(0 0 0 / 28%);
}
.quote-section__container {
    position: relative;
    z-index: 1;
}
.quote-section__blockquote {
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-white);
    text-align: center;
}
.quote-section__blockquote p {
    margin-bottom: 24px;
    font-family: var(--font-secondary);
    font-size: var(--fs-h2);
    font-style: italic;
    font-weight: 500;
    line-height: 1.15;
}
.quote-section__blockquote footer {
    font-size: var(--fs-h4);
    font-weight: 500;
}
.quote-section__blockquote footer::before {
    content: '\2014\00a0'; /* em dash + space, escaped so file encoding cannot break it */
}

/* Care, learning and knowledge section */
.care-pillars-section {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
}
.care-pillars-section__container {
    position: relative;
    z-index: 1;
}
.care-pillars-section__header {
    margin-bottom: 38px;
    text-align: center;
}
.care-pillars-section .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}
.care-pillars-section__card {
    min-height: 216px;
    height: 100%;
    padding: 14px 28px 24px;
    text-align: center;
    background: rgb(255 255 255 / 82%);
    border: 1px solid #e6e2df;
    border-radius: 11px;
    box-shadow: 0 2px 8px rgb(72 31 14 / 4%);
}
.care-pillars-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 10px;
    color: var(--color-white);
    font-size: 33px;
    border-radius: 50%;
}
.care-pillars-section__card--care .care-pillars-section__icon {
    background: var(--color-care);
}
.care-pillars-section__card--learning .care-pillars-section__icon {
    background: var(--color-learning);
}
.care-pillars-section__card--knowledge .care-pillars-section__icon {
    background: var(--color-knowledge);
}
.care-pillars-section__card h3 {
    margin-bottom: 8px;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.2;
}
.care-pillars-section__card p {
    margin: 0;
    color: var(--color-secondary);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.45;
}
.care-pillars-section__leaf {
    position: absolute;
    top: 50%;
    width: 140px;
    opacity: 0.45;
    pointer-events: none;
    transform: translateY(-50%);
}
.care-pillars-section__leaf--left {
    left: 0;
}
.care-pillars-section__leaf--right {
    right: 0;
}

/* Personalised care journey */
.care-journey-section {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
    min-height: 600px;
}
.care-journey-section__intro {
    position: relative;
    display: flex;
    align-items: center;
    padding: 72px clamp(32px, 6vw, 110px) 72px var(--container-edge);
    overflow: hidden;
    color: var(--color-white);
    background:
        linear-gradient(rgb(73 23 8 / 87%), rgb(73 23 8 / 87%)),
        radial-gradient(circle at 15% 20%, #9f401d 0, #6b1f0b 44%, #351005 100%);
}
.care-journey-section__intro::after {
    position: absolute;
    inset: 0;
    content: '';
    background: url('../images/lef-background-right.webp') right center / auto
        50% no-repeat;
    opacity: 0.32;
}
.care-journey-section__intro-content {
    position: relative;
    z-index: 1;
    max-width: 510px;
}
.care-journey-section__intro .section-title,
.care-journey-section__intro .section-subtitle {
    color: var(--color-white);
}
.care-journey-section__lead {
    margin: 0 0 20px;
    font-size: var(--fs-h4);
    font-weight: 500;
}
.care-journey-section__description {
    color: var(--color-white);
    max-width: 470px;
    margin: 20px 0 25px;
}
.care-journey-section__button {
    background: var(--color-light-primary);
    border-color: var(--color-light-primary);
}
.care-journey-section__button:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}
.care-journey-section__button svg {
    margin-left: 8px;
    vertical-align: -2px;
}
.care-journey-section__steps-wrap {
    display: flex;
    align-items: center;
    padding: 50px 60px;
    background: #fffaf3;
}
.care-journey-section__steps {
    width: 100%;
    max-width: 460px;
    padding: 0;
    list-style: none;
}
.care-journey-section__step {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 20px;
    align-items: center;
    min-height: 80px;
}
.care-journey-section__step:not(:last-child)::after {
    position: absolute;
    top: 72px;
    left: 30px;
    height: 28px;
    content: '';
    border-left: 2px dashed #cbb6a0;
}
.care-journey-section__step + .care-journey-section__step {
    margin-top: 16px;
}
.care-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.care-accent--ochre {
    color: #f7d09d;
    background: var(--color-journey-ochre);
}
.care-accent--brown {
    color: #f6c18a;
    background: var(--color-journey-brown);
}
.care-accent--sand {
    color: #663c2b;
    background: var(--color-journey-sand);
}
.care-accent--rust {
    color: #f8c687;
    background: var(--color-journey-rust);
}
.care-accent--green {
    color: var(--color-white);
    background: var(--color-green);
}
.care-accent--blue-grey {
    color: var(--color-white);
    background: var(--color-journey-blue-grey);
}
.care-journey-section__step-icon {
    width: 62px;
    height: 62px;
    font-size: 27px;
}
.care-journey-section__step h3,
.care-journey-section__step p {
    margin: 0;
}

/* Healing and care services */
.healing-care-section__header {
    margin-bottom: 28px;
    text-align: center;
}
.healing-care-section .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}
.healing-care-section__subtitle {
    margin-bottom: 15px;
}
.healing-care-section__description {
    margin-bottom: 0;
}
.healing-care-section__services {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.healing-care-section__service {
    min-width: 0;
    padding: 8px 14px 0;
    text-align: center;
}
.healing-care-section__service + .healing-care-section__service {
    border-left: 1px solid #dfd5c9;
}
.healing-care-section__icon {
    width: 82px;
    height: 82px;
    margin-bottom: 12px;
    font-size: 34px;
}
.healing-care-section__service h3 {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.25;
}

/* Illustrated services (home): light sage background, cream discs and the same
   continuous twisted gold cord as Our Founder > A Vision of Healing. Kept
   photo-free so it doesn't compete with the garden photo band that follows. */
.healing-care-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 60% 50% at 50% 62%, rgb(255 255 255 / 55%), transparent 75%),
        linear-gradient(180deg, #f6f3ea 0%, #ecefe2 100%);
}
.healing-care-section::before {
    /* faint leaf sketches tucked into the corners */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        url('../images/lef-background-left.webp') left -110px top -20px / 260px auto no-repeat,
        url('../images/lef-background-right.webp') right -110px bottom -30px / 260px auto no-repeat;
    opacity: 0.35;
    pointer-events: none;
}
.healing-care-section__services {
    position: relative;
    margin-top: 18px;
}
.healing-care-section__services::before {
    content: '';
    position: absolute;
    top: 53px;              /* disc centre (67px) minus half the cord height */
    left: calc(100% / 12);  /* centre of the first column */
    right: calc(100% / 12); /* centre of the last column */
    z-index: 0;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 28' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke='%23a77c45' stroke-width='2.2' d='M0 14 Q50 2 100 14 T200 14 T300 14 T400 14 T500 14 T600 14 T700 14 T800 14 T900 14 T1000 14'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke='%23d9b37a' stroke-width='2.2' d='M0 14 Q50 26 100 14 T200 14 T300 14 T400 14 T500 14 T600 14 T700 14 T800 14 T900 14 T1000 14'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke='%23fff6e4' stroke-opacity='.7' stroke-width='.8' d='M0 13 Q50 25 100 13 T200 13 T300 13 T400 13 T500 13 T600 13 T700 13 T800 13 T900 13 T1000 13'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 2px rgb(90 60 25 / 25%));
    pointer-events: none;
}
.healing-care-section__service,
.healing-care-section__service + .healing-care-section__service {
    position: relative;
    z-index: 1;
    padding: 0 8px;
    border: 0;
}
.healing-care-section__service:not(:last-child)::after {
    /* bead threaded on the cord, where the strands cross */
    content: '';
    position: absolute;
    top: 61px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff4de 0%, #e2bf88 45%, #9c7240 100%);
    box-shadow: 0 2px 4px rgb(90 60 25 / 40%), inset 0 -1px 2px rgb(80 50 20 / 45%);
}
.healing-care-section__disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 134px;
    height: 134px;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 2px solid #d2b083;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgb(70 55 30 / 18%);
    transition: transform 0.3s ease;
}
.healing-care-section__illustration {
    /* the icon fills the whole circle: zoomed past the blob's soft edges
       so only its colour shows inside the round frame */
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(1.42);
}
.healing-care-section__service:hover .healing-care-section__disc {
    transform: translateY(-4px);
}
.healing-care-section__service h3 {
    color: #34452c;
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .healing-care-section__disc { transition: none; }
    .healing-care-section__service:hover .healing-care-section__disc { transform: none; }
}
@media (max-width: 991px) {
    .healing-care-section__services::before,
    .healing-care-section__service::after { display: none; }
    .healing-care-section__services .healing-care-section__service { border: 0; padding-bottom: 20px; }
    .healing-care-section__disc { width: 116px; height: 116px; }
}
/* Herbal garden */
.herbal-garden-section {
    position: relative;
    min-height: 570px;
    color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.herbal-garden-section::before {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(
        90deg,
        rgb(0 0 0 / 30%) 0%,
        rgb(0 0 0 / 10%) 40%,
        rgb(0 0 0 / 50%) 100%
    );
}
.herbal-garden-section__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 570px;
}
.herbal-garden-section__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-left: 18px;
}
.herbal-garden-section__aside-line {
    display: block;
    width: 40px;
    height: 2px;
    background: var(--color-light-primary);
}
.herbal-garden-section__aside p {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-style: italic;
    font-weight: 500;
    line-height: 0.95;
}
.herbal-garden-section__content {
    max-width: 610px;
    padding: 50px 0 50px 40px;
}
.herbal-garden-section::after {
    /* frosted deep-green band filling the whole right half, edge to edge,
       so the text reads clearly while the photo stays open on the left */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(160deg, rgb(22 40 28 / 80%) 0%, rgb(30 50 36 / 72%) 100%);
    border-left: 1px solid rgb(231 194 147 / 25%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
}
@media (max-width: 991px) {
    .herbal-garden-section::after {
        width: 100%;
        border-left: 0;
    }
    .herbal-garden-section__content {
        padding: 30px 0 34px;
    }
}
.herbal-garden-section__content .section-title {
    color: var(--color-white);
}
.herbal-garden-section__content .section-subtitle {
    margin: 0 0 17px;
    color: var(--color-white);
}
.herbal-garden-section__content .section-description {
    margin-bottom: 25px;
}
.herbal-garden-section__content .section-description p {
    margin: 0 0 13px;
    color: var(--color-white);
}
.herbal-garden-section__content .section-description p:last-child {
    margin-bottom: 0;
}
.herbal-garden-section__button {
    background: var(--color-light-primary);
    border-color: var(--color-light-primary);
}
.care-journey-section__step h3 {
    color: #102c3d;
    font-family: var(--font-primary);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.25;
}
.care-journey-section__step p {
    margin-top: 3px;
    color: #283d49;
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.32;
}

/* Holistic wellbeing focus */
.wellbeing-focus-section__header {
    margin-bottom: 34px;
    text-align: center;
}
.wellbeing-focus-section .section-eyebrow {
    margin-left: auto;
    margin-right: auto;
}
.wellbeing-focus-section__header .section-description {
    max-width: 660px;
    margin-right: auto;
    margin-left: auto;
}
.wellbeing-focus-section__item {
    display: flex;
}
.wellbeing-focus-section__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 0 28px 26px;
    text-align: center;
}
.wellbeing-focus-section__item:nth-child(4n + 2),
.wellbeing-focus-section__item:nth-child(4n + 3),
.wellbeing-focus-section__item:nth-child(4n + 4) {
    border-left: 1px solid
        color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.wellbeing-focus-section__item:nth-child(n + 5) {
    padding-top: 28px;
    border-top: 1px solid
        color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.wellbeing-focus-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    color: var(--color-white);
    border-radius: 50%;
    font-size: 30px;
}
.wellbeing-focus-section__icon--ochre {
    background: var(--color-journey-ochre);
}
.wellbeing-focus-section__icon--green {
    background: var(--color-green);
}
.wellbeing-focus-section__icon--slate {
    background: var(--color-journey-blue-grey);
}
.wellbeing-focus-section__icon--rust {
    background: var(--color-journey-rust);
}
.wellbeing-focus-section__icon--brown {
    background: var(--color-journey-brown);
}
.wellbeing-focus-section__card h3 {
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.2;
}
.wellbeing-focus-section__card p {
    margin: 0;
    color: var(--color-primary);
    font-weight: 500;
    line-height: 1.2;
}

/* Care team */
.care-team-section {
    position: relative;
    overflow: hidden;
}
.care-team-section__content {
    max-width: 385px;
}
.care-team-section__content--center {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.care-team-section__button {
    margin-top: 22px;
}
.care-team-section__doctor {
    height: 100%;
    overflow: hidden;
    background: rgb(255 255 255 / 38%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
    border-radius: 6px;
}
.care-team-section__doctor-image {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center 20%;
}
.care-team-section__doctor-content {
    min-height: 126px;
    padding: 12px 16px 14px;
}
.care-team-section__doctor h3 {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.1;
}
.care-team-section__quote {
    max-width: 150px;
    margin-left: auto;
}
.care-team-section__quote > span {
    display: block;
    width: 44px;
    height: 1px;
    margin-bottom: 16px;
    background: var(--color-light-primary);
}
.care-team-section__quote p {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-style: italic;
    font-weight: 600;
    line-height: 1.1;
}
.care-team-section__leaf {
    position: absolute;
    top: 50%;
    right: -48px;
    width: 210px;
    opacity: 0.35;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Wellness stay */
.wellness-stay-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 510px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.wellness-stay-section::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: '';
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-dark-green) 96%, transparent) 0%,
        color-mix(in srgb, var(--color-dark-green) 82%, transparent) 36%,
        color-mix(in srgb, var(--color-black) 10%, transparent) 64%,
        color-mix(in srgb, var(--color-black) 58%, transparent) 100%
    );
}
.wellness-stay-section__container {
    position: relative;
    z-index: 1;
    width: 100%;
}
.wellness-stay-section__content {
    max-width: 480px;
    color: var(--color-white);
}
.wellness-stay-section__content .section-title {
    color: var(--color-white);
}
.wellness-stay-section__content .section-description {
    color: var(--color-white);
}
.wellness-stay-section__button {
    margin-top: 20px;
    background: var(--color-light-primary);
    border-color: var(--color-light-primary);
}
.wellness-stay-section__button:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}
.wellness-stay-section__button svg {
    margin-left: 10px;
    vertical-align: -2px;
}
.wellness-stay-section__quote {
    max-width: 215px;
    margin-left: auto;
    color: var(--color-white);
}
.wellness-stay-section__quote > span {
    display: block;
    width: 48px;
    height: 1px;
    margin-bottom: 15px;
    background: var(--color-light-primary);
}
.wellness-stay-section__quote p {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--fs-h3);
    font-style: italic;
    font-weight: 600;
    line-height: 1.15;
}
.wellness-stay-section__leaf {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -40px;
    width: 190px;
    opacity: 0.34;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Voices of trust */
.voices-of-trust-section__content {
    max-width: 350px;
}
.voices-of-trust-section__content .section-description {
    margin-bottom: 20px;
}
.testi-swiper {
    --swiper-theme-color: var(--color-primary);
    padding: 0 0 30px;
}
.testi-swiper .swiper-slide {
    height: auto;
}
.srhu-student-card {
    height: 100%;
    overflow: hidden;
    background: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: 8px;
    transition: box-shadow 0.2s;
}
.srhu-student-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--color-white);
    background-color: var(--color-light-gray);
    background-position: top center;
    background-size: cover;
}
.srhu-student-info {
    padding: 13px 14px;
    text-align: center;
}
.srhu-student-info .si-name {
    margin-bottom: 3px;
    color: var(--color-white);
    font-size: var(--fs-body);
    font-weight: 700;
}
.srhu-student-info .si-detail {
    color: color-mix(in srgb, var(--color-white) 82%, transparent);
    font-size: var(--fs-small);
    line-height: 1.45;
}
.srhu-student-video-card {
    height: 100%;
}
.srhu-student-video {
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}
.srhu-student-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* "Read More" is a plain text button inside the story. */
.testi-swiper .read-more {
    margin-left: 4px;
    padding: 0;
    color: var(--color-light-primary);
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}
.testi-swiper .read-more:hover {
    color: var(--color-white);
    background: none;
}
/* Dots sit in the flow below the cards. swiper.min.css loads after this file
   and resets .swiper padding, so the absolute default would overlap the slides. */
.testi-swiper > .swiper-pagination.swiper-pagination-bullets {
    position: static;
    margin-top: 20px;
    line-height: 0;
}
.testi-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
}
/* Knowledge and insights */
.knowledge-insights-section__content {
    max-width: 380px;
}
.knowledge-insights-section__content .section-description {
    margin-bottom: 20px;
}
.knowledge-insights-section__article {
    padding: 0 20px;
    text-align: center;
}
.knowledge-insights-section__article-col
    + .knowledge-insights-section__article-col {
    border-left: 1px solid
        color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.knowledge-insights-section__article img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 10px;
    border-radius: 50%;
    object-fit: cover;
}
.knowledge-insights-section__article time {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
}
.knowledge-insights-section__article h3 {
    margin: 0 0 14px;
    color: var(--color-secondary);
    font-family: var(--font-primary);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.2;
}

/* Balance call to action */
.balance-cta-section {
    position: relative;
    overflow: hidden;
    color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.balance-cta-section::before {
    position: absolute;
    inset: 0;
    content: '';
    background: color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.balance-cta-section__container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.balance-cta-section__content {
    max-width: 680px;
}
.balance-cta-section__content .section-title {
    margin-bottom: 22px;
    color: var(--color-white);
}
.balance-cta-section__content .section-title i {
    color: var(--color-light-primary);
    font-size: 0.72em;
    vertical-align: 0.14em;
}
.balance-cta-section__content .section-description {
    color: var(--color-white);
}
/* Optional caps line between the heading and the page's own line. */
.balance-cta-section__tagline {
    margin: -8px 0 14px;
    color: var(--color-white);
    font-size: var(--fs-lead);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.balance-cta-section .btn-primary {
    margin-top: 20px;
    background: var(--color-light-primary);
    border-color: var(--color-light-primary);
}
.balance-cta-section__text {
    max-width: 620px;
    margin: 10px auto 0;
    color: rgb(255 255 255 / 88%);
    font-size: var(--fs-body);
    line-height: 1.6;
}
.balance-cta-section__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin-top: 18px;
}
/* colours taken from the Legacy pillars: Healing (terracotta), Tradition (olive) */
.balance-cta-section__buttons .btn-primary:nth-child(1) {
    background: #b24728;
    border-color: #b24728;
}
.balance-cta-section__buttons .btn-primary:nth-child(2) {
    background: #6c693c;
    border-color: #6c693c;
}
.balance-cta-section__buttons .btn-primary:nth-child(1):hover {
    background: #933920;
    border-color: #933920;
}
.balance-cta-section__buttons .btn-primary:nth-child(2):hover {
    background: #57552f;
    border-color: #57552f;
}
.balance-cta-section .btn-primary:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
}
/* Same height on every page: the id outranks the per-page .section-padding
   overrides (About, Founder, Our Approach, six-pages-polish). */
#balance-cta.balance-cta-section {
    padding-top: clamp(56px, 7vw, 100px);
    padding-bottom: clamp(56px, 7vw, 100px);
}

/* ==========================================================================
   4. Site footer
   ========================================================================== */

.site-footer {
    position: relative;
    overflow: hidden;
    color: var(--color-white);
    background-color: var(--color-primary);
}
.site-footer__main {
    padding: 60px 0 50px;
}
.site-footer__row {
    --bs-gutter-x: 0;
}
.site-footer__col {
    position: relative;
    padding: 0 30px;
}

@media (min-width: 992px) {
    .site-footer__col + .site-footer__col {
        border-left: 1px solid
            color-mix(in srgb, var(--color-white) 15%, transparent);
    }
    .site-footer__col:first-child {
        padding-left: 0;
    }
    .site-footer__col:last-child {
        padding-right: 0;
    }
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
}
.site-footer__logo-link {
    display: inline-block;
    margin-bottom: 22px;
}
.site-footer__logo {
    display: block;
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: contain;
}
.site-footer__university {
    margin-top: 5px;
}
.site-footer__university-name {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.2px;
}
.site-footer__divider-line {
    width: 100%;
    height: 1px;
    margin: 8px 0 10px;
    border: none;
    opacity: 1;
    background-color: color-mix(in srgb, var(--color-white) 35%, transparent);
}
.site-footer__tagline {
    margin: 0;
    color: color-mix(in srgb, var(--color-white) 70%, transparent);
    font-family: var(--font-primary);
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.4;
}
.site-footer__title {
    margin: 0 0 20px;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
}
.site-footer__menu {
    padding: 0;
    margin: 0;
    list-style: none;
}
.site-footer__menu li {
    margin-bottom: 10px;
    line-height: 1.3;
}
.site-footer__menu li:last-child {
    margin-bottom: 0;
}
.site-footer__menu a {
    color: color-mix(in srgb, var(--color-white) 72%, transparent);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.25s ease;
}
.site-footer__menu a:hover {
    color: var(--color-light-primary);
    text-decoration: none;
}
/* Menu columns built from the header menu + sister institutions (13 Oct).
   Columns sit side by side and wrap onto a new row when space runs out. */
.site-footer__menus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 34px 28px;
}
.site-footer__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}
.site-footer__title a:hover {
    color: var(--color-light-primary);
}
.site-footer__address--brand {
    margin: 22px 0 16px;
}
@media (max-width: 575px) {
    .site-footer__menus {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }
}
.site-footer__address {
    margin-bottom: 22px;
    color: color-mix(in srgb, var(--color-white) 72%, transparent);
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 400;
    line-height: 1.55;
}
.site-footer__socials {
    display: flex;
    gap: 16px;
    align-items: center;
}
.site-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition:
        transform 0.25s ease,
        color 0.25s ease;
}
.site-footer__social-link:hover {
    color: var(--color-light-primary);
    text-decoration: none;
    transform: translateY(-2px);
}
.site-footer__emblem-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
.site-footer__emblem-img {
    width: 100%;
    max-width: 175px;
    height: auto;
    margin-bottom: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.site-footer__motto {
    margin: 0;
    color: color-mix(in srgb, var(--color-white) 85%, transparent);
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}
.site-footer__bottom {
    padding: 18px 0;
    border-top: 1px solid
        color-mix(in srgb, var(--color-white) 15%, transparent);
}
.site-footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}
.site-footer__copyright {
    margin: 0;
    color: color-mix(in srgb, var(--color-white) 65%, transparent);
    font-family: var(--font-primary);
    font-size: var(--fs-small);
    font-weight: 400;
}
.site-footer__legal-links {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
.site-footer__legal-links li {
    display: inline-flex;
    align-items: center;
}
.site-footer__legal-links li + li::before {
    margin: 0 14px;
    color: color-mix(in srgb, var(--color-white) 35%, transparent);
    font-size: 12px;
    content: '|';
}
.site-footer__legal-links a {
    color: color-mix(in srgb, var(--color-white) 65%, transparent);
    font-family: var(--font-primary);
    font-size: var(--fs-small);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.25s ease;
}
.site-footer__legal-links a:hover {
    color: var(--color-white);
    text-decoration: none;
}

/* ---- Home and footer: responsive ---- */
@media (max-width: 1440px) {
    .highlights-section__item {
        padding: 0 5px;
    }
    .wellbeing-focus-section__card {
        padding-right: 10px;
        padding-left: 10px;
    }
    .site-footer__col {
        padding: 0 18px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .highlights-section__item:nth-child(odd) {
        border-left: 0;
        padding-bottom: 25px;
    }
    .highlights-section__item:nth-child(n + 3) {
        padding-top: 25px;
        border-top: 1px solid
            color-mix(in srgb, var(--color-white) 60%, transparent);
    }
    .care-journey-section {
        grid-template-columns: 1fr 1fr;
    }
    .care-journey-section__intro {
        padding: 60px 45px;
    }
    .care-journey-section__steps-wrap {
        padding: 45px 32px;
    }
    .healing-care-section__services {
        grid-template-columns: repeat(3, 1fr);
    }
    .healing-care-section__service:nth-child(4) {
        border-left: 0;
    }
    .healing-care-section__service:nth-child(n + 4) {
        border-top: 1px solid #dfd5c9;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .wellbeing-focus-section__item {
        padding-top: 0;
        border-top: 0;
        border-left: 0;
    }
    .wellbeing-focus-section__item:nth-child(even) {
        border-left: 1px solid
            color-mix(in srgb, var(--color-primary) 16%, transparent);
    }
    .wellbeing-focus-section__item:nth-child(n + 3) {
        padding-top: 28px;
        border-top: 1px solid
            color-mix(in srgb, var(--color-primary) 16%, transparent);
    }
    .care-team-section__content {
        max-width: none;
        text-align: center;
    }
    .care-team-section__doctors {
        max-width: 620px;
        margin: 0 auto;
    }
    .care-team-section__quote {
        display: none;
    }
}
@media (max-width: 991px) {
    .wellness-stay-section {
        min-height: 400px;
    }
    .wellness-stay-section__content {
        max-width: 620px;
        margin: 0 auto;
        text-align: center;
    }
    .wellness-stay-section__quote {
        display: none;
    }
    .voices-of-trust-section__content {
        max-width: 620px;
        margin: 0 auto;
        text-align: center;
    }
    .knowledge-insights-section__content {
        max-width: 620px;
        margin: 0 auto;
        text-align: center;
    }
    .about-section__brand {
        border-right: none;
    }
    .about-section__content {
        text-align: center;
    }
    .healing-care-section__service {
        padding-bottom: 15px;
    }
    .quote-section {
        min-height: 400px;
    }
    .herbal-garden-section::before {
        background: rgba(0, 0, 0, 0.5);
    }
    .herbal-garden-section__aside {
        margin-left: 0px;
        margin-bottom: 50px;
    }
    .wellbeing-focus-section__item:nth-child(odd) {
        border-left: none;
    }
    .site-footer__main {
        padding: 50px 0 30px;
    }
    .site-footer__col {
        padding: 0 15px;
        margin-bottom: 35px;
        border-left: 0 !important;
    }
    .site-footer__col--emblem {
        margin-bottom: 10px;
    }
    .site-footer__emblem-wrap {
        align-items: flex-start;
        text-align: left;
    }
    .site-footer__motto {
        text-align: left;
    }
    .site-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 767px) {
        .header-right {
        display: none;
    }
    .about-section__brand {
        min-height: auto;
        padding: 0 20px 50px;
        border-right: 0;
        border-bottom: 1px solid var(--color-primary);
    }
    .about-section__content {
        padding: 50px 0px 0;
        text-align: center;
    }
    .about-section__leaf {
        width: 95px;
        max-width: 25vw;
        opacity: 0.35;
    }
    .highlights-section {
        padding: 25px 0;
    }
    .highlights-section__item {
        padding: 25px 20px;
    }
    .highlights-section__item + .highlights-section__item {
        border-top: 1px solid
            color-mix(in srgb, var(--color-white) 60%, transparent);
        border-left: 0;
    }
    .heritage-section__content {
        text-align: center;
    }
    .heritage-section__title br {
        display: none;
    }
    .heritage-section__image-wrap {
        height: 280px;
    }
    .quote-section {
        min-height: 380px;
        padding: 60px 20px;
        background-position: 58% center;
    }
    .quote-section__blockquote p br {
        display: none;
    }
    .care-pillars-section__card {
        min-height: 0;
    }
    .care-pillars-section__leaf {
        width: 90px;
        opacity: 0.3;
    }
    .care-journey-section {
        grid-template-columns: 1fr;
    }
    .care-journey-section__intro {
        min-height: 520px;
        padding: 70px 30px;
    }
    .care-journey-section__intro::after {
        background-size: auto 72%;
        background-position: right bottom;
    }
    .care-journey-section__steps-wrap {
        padding: 52px 30px;
    }
    .care-journey-section__step {
        grid-template-columns: 66px 1fr;
        gap: 15px;
    }
    .care-journey-section__step:not(:last-child)::after {
        left: 31px;
    }
    .care-journey-section__step p br {
        display: none;
    }
    .healing-care-section__description br {
        display: none;
    }
    .healing-care-section__services {
        grid-template-columns: repeat(2, 1fr);
    }
    .healing-care-section__service {
        padding: 20px 10px;
    }
    .healing-care-section__service + .healing-care-section__service {
        border-left: 0;
    }
    .healing-care-section__service:nth-child(even) {
        border-left: 1px solid #dfd5c9;
    }
    .healing-care-section__service:nth-child(n + 3) {
        border-top: 1px solid #dfd5c9;
    }
    .healing-care-section__icon {
        width: 72px;
        height: 72px;
        font-size: 29px;
    }
    .herbal-garden-section,
    .herbal-garden-section__container {
        min-height: 640px;
    }
    .herbal-garden-section {
        background-position: 38% center;
    }
    .herbal-garden-section__container {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .herbal-garden-section__aside {
        display: none;
    }
    .herbal-garden-section__content {
        padding: 0 20px;
        text-align: center;
    }
    .wellness-stay-section {
        padding: 70px 20px;
        background-position: 58% center;
    }
    .wellness-stay-section::before {
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-dark-green) 90%, transparent),
            color-mix(in srgb, var(--color-black) 55%, transparent)
        );
    }
    .wellness-stay-section__leaf {
        left: -96px;
        width: 175px;
        opacity: 0.22;
    }
    .testi-swiper {
        padding-bottom: 30px;
    }
    .srhu-student-photo {
        height: 215px;
    }
    .site-footer__main {
        padding: 40px 0 20px;
    }
    .site-footer__col--brand,
    .site-footer__col--connect,
    .site-footer__col--emblem {
        width: 100%;
    }
    .site-footer__col--nav {
        width: 50%;
    }
    .wellbeing-focus-section__header {
        margin-bottom: 28px;
    }
    .wellbeing-focus-section__header .section-description br {
        display: none;
    }
    .wellbeing-focus-section__item {
        padding-top: 0;
        border-top: 0;
        border-left: 0;
    }
    .wellbeing-focus-section__item:nth-child(n + 2) {
        padding-top: 22px;
        border-left: none;
        border-top: 1px solid
            color-mix(in srgb, var(--color-primary) 16%, transparent);
    }
    .wellbeing-focus-section__card {
        padding-bottom: 22px;
    }
    .care-team-section__content {
        max-width: none;
        text-align: center;
    }
    .care-team-section__content .section-description br {
        display: none;
    }
    .care-team-section__button {
        margin-bottom: 10px;
    }
    .care-team-section__doctor-image {
        height: 220px;
    }
    .care-team-section__quote {
        display: none;
    }
    .care-team-section__leaf {
        right: -100px;
        width: 190px;
        opacity: 0.2;
    }
    .knowledge-insights-section__article {
        padding: 24px 0;
    }
    .knowledge-insights-section__article-col
        + .knowledge-insights-section__article-col {
        border-top: 1px solid
            color-mix(in srgb, var(--color-primary) 15%, transparent);
        border-left: 0;
    }
    .site-footer__legal-links {
        flex-wrap: wrap;
        gap: 6px;
    }
    .site-footer__legal-links li + li::before {
        margin: 0 8px;
    }
}

/* =====================================================================
   5. Reusable content components
   ---------------------------------------------------------------------
   Generic building blocks (not tied to any one page) for inner-page
   layouts: an image hero with breadcrumb, an icon+divider+text split,
   a timeline, icon-badge card grids, connected circle-steps, an image/
   text media row, a quote band, an icon stat grid and a small icon
   pill row. First used on the "Our Founder" page; reuse these instead
   of writing new one-off section CSS for the next inner page.
   ===================================================================== */

:root {
    --color-gold-text: #8b5a1a; /* deeper gold for small text set on light backgrounds */
    --color-accent-navy: var(--color-learning);
    --color-accent-amber: var(--color-knowledge);
}

/* ---- Extra .care-accent colour/size modifiers (base .care-accent lives above) ---- */
.care-accent--navy {
    color: var(--color-white);
    background: var(--color-accent-navy);
}
.care-accent--amber {
    color: var(--color-white);
    background: var(--color-accent-amber);
}
.care-accent--lg {
    width: 108px;
    height: 108px;
    font-size: 84px;
}
.care-accent--md {
    width: 74px;
    height: 74px;
    font-size: 40px;
}

/* ---- Generic outline icon (48x48 viewBox svgs drawn with currentColor) ---- */
.icon-line {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.care-accent .icon-line,
.icon-card__icon .icon-line {
    stroke-width: 1.2;
}

/* ---- Section header helpers (extend .section-eyebrow/.section-title/.section-subtitle/.section-description) ---- */
.section-eyebrow--center {
    margin-left: auto;
    margin-right: auto;
}
.section-header--center {
    text-align: center;
}
/* A large serif accent line under a title - a bolder alternative to the
   plain .section-subtitle used elsewhere. */
.section-subtitle--accent {
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.25;
}
.section-subtitle--accent-lg {
    font-size: var(--fs-h4);
}

/* Small centred rule, used under a title or between a quote's two lines. */
.rule-gold {
    display: block;
    width: 40px;
    height: 2px;
    margin: 16px auto;
    background: var(--color-light-primary);
}

/* Simple show/hide line-break helpers for copy that wraps differently
   across a couple of breakpoints. */
.br-desktop {
    display: none;
}
@media (min-width: 992px) {
    .br-desktop {
        display: inline;
    }
}
.br-1200-1399 {
    display: none;
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .br-1200-1399 {
        display: inline;
    }
}

/* ---- Decorative leaf line-art (reuses the theme's existing leaf pngs) ---- */
.leaf-decor {
    position: absolute;
    width: 130px;
    opacity: 0.5;
    pointer-events: none;
}
.leaf-decor--left {
    left: 0;
}
.leaf-decor--right {
    right: 0;
}
.leaf-decor--mid {
    top: 50%;
    transform: translateY(-50%);
}
.leaf-decor--corner {
    right: -6px;
    bottom: -92px;
    width: 150px;
    opacity: 0.55;
}

/* ---- Breadcrumb ---- */
.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.breadcrumb-nav li,
.breadcrumb-nav a {
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 22px;
}
.breadcrumb-nav li + li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 15px 1px 12px;
    border-top: 1.2px solid currentColor;
    border-right: 1.2px solid currentColor;
    transform: rotate(45deg);
}
.breadcrumb-nav--on-image {
    position: absolute;
    top: 25px;
    left: 36px;
    z-index: 1;
    color: rgb(255 255 255 / 94%);
}
@media (max-width: 767px) {
    .breadcrumb-nav--on-image {
        left: 16px;
    }
}

/* ---- Split panel: a figure/diagram, a vertical rule, then text ---- */
.split-panel__figure {
    padding-right: 20px;
    text-align: center;
}
.split-panel__content {
    height: 100%;
    max-width: 650px;
    padding: 6px 0 0 57px;
    border-left: 2px solid var(--color-light-primary);
}
.split-panel__content .section-eyebrow {
    width: 66px;
    height: 2px;
    margin: 0 0 29px;
}

@media (max-width: 991px) {
    .split-panel__figure {
        padding: 0;
    }
    .split-panel__content {
        height: auto;
        max-width: none;
        padding: 30px 0 0;
        border-top: 2px solid var(--color-light-primary);
        border-left: 0;
    }
}

/* ---- Timeline: a row of pinned, dated cards on a dotted rail ---- */
.timeline {
    position: relative;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 29.5px;
    right: 6px;
    left: 8px;
    border-top: 1px dotted #c8ad84;
}
.timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.timeline__item > .timeline__card {
    flex: 1 1 auto;
}
.timeline__label {
    color: var(--color-gold-text);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.17em;
    line-height: 14px;
    text-transform: uppercase;
}
.timeline__pin {
    position: relative;
    z-index: 1;
    display: block;
    width: 11px;
    height: 11px;
    margin-top: 10px;
    background: #79430c;
    border-radius: 50%;
}
.timeline__pin::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 5px;
    width: 1.5px;
    height: 19px;
    background: #79430c;
}
.timeline__card {
    width: 100%;
    margin-top: 19px;
    overflow: hidden;
    background: #fdfdfb;
    border: 1px solid #eee9e2;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgb(72 31 14 / 6%);
}
.timeline__card > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 604 / 460;
    object-fit: cover;
}
.timeline__body {
    padding: 13px 0 10px;
    text-align: center;
}
.timeline__num {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    color: #784923;
    font-family: var(--font-secondary);
    font-size: 22px;
    font-variant-numeric: lining-nums;
    font-weight: 500;
    line-height: 1;
}
.timeline__num::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 22px;
    height: 1px;
    background: var(--color-light-primary);
    transform: translateX(-50%);
}
.timeline__body h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    margin: 3px 0 9px;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.1;
}
.timeline__body p {
    margin: 0 28px 0 38px;
    color: var(--color-primary);
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
}
@media (max-width: 991px) {
    .timeline::before {
        display: none;
    }
}
/* ---- Pull quote: small centred italic quote with a byline ---- */
.pull-quote {
    margin: 0;
    padding: 21px 0 40px;
    text-align: center;
}
.pull-quote .section-eyebrow {
    margin-bottom: 10px;
}
.pull-quote p {
    margin: 0 0 4px;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-style: italic;
    font-weight: 500;
    line-height: 1.2;
}
.pull-quote footer {
    color: var(--color-secondary);
    font-size: var(--fs-small);
    font-weight: 400;
}
.pull-quote footer::before {
    content: '\2014\00a0';
}

/* ---- Icon card grid: colour-tinted feature cards with an overlapping icon badge ---- */
.icon-card {
    position: relative;
    min-height: 232px;
    padding: 12px 22px 24px 36px;
    border-radius: 13px;
}
.icon-card::after {
    content: '';
    position: absolute;
    right: 8px;
    bottom: 4px;
    width: 70px;
    height: 70px;
    background: url('../images/lef-background-right.webp') center / contain no-repeat;
    opacity: 0.28;
    pointer-events: none;
}
.icon-card--tint-a {
    background: #f9ece4;
    --icon-card-accent: var(--color-journey-rust);
    --icon-card-title: #530808;
}
.icon-card--tint-b {
    background: #eeeee4;
    --icon-card-accent: var(--color-dark-green);
    --icon-card-title: #2c4125;
}
.icon-card--tint-c {
    background: #faf0e4;
    --icon-card-accent: var(--color-accent-amber);
    --icon-card-title: #7b4e14;
}
.icon-card--tint-d {
    background: #ebeff2;
    --icon-card-accent: var(--color-accent-navy);
    --icon-card-title: #223f60;
}
.icon-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    left: 0;
    width: 80px;
    height: 80px;
    color: var(--color-white);
    font-size: 60px;
    background: var(--icon-card-accent);
    border-radius: 50%;
}
.icon-card__content {
    padding-top: 14px;
}
.icon-card h3 {
    margin: 0 0 8px 60px;
    padding-bottom: 11px;
    color: var(--icon-card-title);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.15;
    position: relative;
}
.icon-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 22px;
    height: 1.5px;
    background: var(--icon-card-accent);
}
.icon-card p {
    position: relative;
    z-index: 1;
    margin: 20px 0 0;
    color: #33373f;
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.36;
}
@media (max-width: 767px) {
    .icon-card {
        margin-top: 10px;
        padding-left: 22px;
    }
    .icon-card h3 {
        margin-left: 66px;
    }
}

/* ---- Circle steps: photo circles on a twisted-thread connector ---- */
.circle-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 38px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 1200px) {
    .circle-steps {
        margin-right: -21px;
        margin-left: -21px;
    }
}
.circle-steps__item {
    position: relative;
    text-align: center;
}
.circle-steps__item:not(:last-child)::after {
    /* twisted-thread connector: two strands crossing at the bead */
    content: '';
    position: absolute;
    top: 48px;
    left: calc(50% + 67px);
    z-index: 0;
    width: calc(100% - 134px);
    height: 42px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 26' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23dcbd92' stroke-width='1.2' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 20 Q24 20 50 13 T100 3'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 24 Q30 15 50 13 T100 8'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.circle-steps__item:nth-child(odd):not(:last-child)::after {
    transform: scaleY(-1);
}
.circle-steps__item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 64.5px;
    left: calc(100% - 4.5px);
    z-index: 2;
    width: 9px;
    height: 9px;
    background: #e3c79e;
    border: 1px solid #b98f5c;
    border-radius: 50%;
}
.circle-steps__item img {
    display: block;
    position: relative;
    z-index: 1;
    width: 134px;
    height: 134px;
    margin: 0 auto 14px;
    border: 1.5px solid #d2b083;
    border-radius: 50%;
}
/* Icon in place of a photo: same circle, line icon in warm gold. */
.circle-steps__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 134px;
    height: 134px;
    margin: 0 auto 14px;
    border: 1.5px solid #d2b083;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgb(255 255 255 / 14%), rgb(255 255 255 / 4%) 70%);
    outline: 1px solid rgb(231 194 147 / 30%);
    outline-offset: -10px;
    color: #e7c293;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.circle-steps__icon svg {
    width: 66px;
    height: 66px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.circle-steps__item:hover .circle-steps__icon {
    transform: translateY(-4px);
    background-color: rgb(231 194 147 / 12%);
}
/* Our Founder - A Vision of Healing: one continuous twisted cord behind all
   six circles (centre of the first to centre of the last). The two strands
   cross under each circle and again at each bead, so the cord never breaks. */
.healing-section .circle-steps::before {
    content: '';
    position: absolute;
    top: 53px;              /* circle centre (67px) minus half the cord height */
    left: calc(100% / 12);  /* centre of the first column */
    right: calc(100% / 12); /* centre of the last column */
    z-index: 0;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 28' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke='%23a77c45' stroke-width='2.2' d='M0 14 Q50 2 100 14 T200 14 T300 14 T400 14 T500 14 T600 14 T700 14 T800 14 T900 14 T1000 14'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke='%23e7c99a' stroke-width='2.2' d='M0 14 Q50 26 100 14 T200 14 T300 14 T400 14 T500 14 T600 14 T700 14 T800 14 T900 14 T1000 14'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke='%23fff1d6' stroke-opacity='.55' stroke-width='.8' d='M0 13 Q50 25 100 13 T200 13 T300 13 T400 13 T500 13 T600 13 T700 13 T800 13 T900 13 T1000 13'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%));
    pointer-events: none;
}
.healing-section .circle-steps__item:not(:last-child)::after {
    display: none; /* replaced by the continuous cord above */
}
.healing-section .circle-steps__item:not(:last-child)::before {
    /* bead threaded on the cord, where the strands cross */
    top: 61px;
    left: calc(100% - 6px);
    width: 12px;
    height: 12px;
    border: 0;
    background: radial-gradient(circle at 35% 30%, #fff4de 0%, #e2bf88 45%, #9c7240 100%);
    box-shadow: 0 2px 4px rgb(0 0 0 / 45%), inset 0 -1px 2px rgb(80 50 20 / 45%);
}
@media (max-width: 991px) {
    .healing-section .circle-steps::before,
    .healing-section .circle-steps__item::before { display: none; }
}

/* Illustration inside the circle (Our Founder - A Vision of Healing). */
.circle-steps__icon--art {
    overflow: hidden;
    background: #e9dfcf;
    outline-color: rgb(185 143 92 / 45%);
    box-shadow: 0 10px 24px rgb(0 0 0 / 22%);
}
.circle-steps__icon--art img {
    display: block;
    width: 118%;
    height: 118%;
    max-width: none;
    object-fit: contain;
}
/* full-colour discs: the artwork carries its own background */
.circle-steps__icon--fill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.circle-steps__item:hover .circle-steps__icon--art {
    background-color: #efe6d8;
}
@media (prefers-reduced-motion: reduce) {
    .circle-steps__icon { transition: none; }
    .circle-steps__item:hover .circle-steps__icon { transform: none; }
}
.circle-steps__item h3 {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.1;
}
.circle-steps__item p {
    margin: 4px 0 0;
    color: rgb(255 255 255 / 88%);
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: 1.4;
}
@media (max-width: 991px) {
    .circle-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 30px;
    }
    .circle-steps__item::after {
        display: none;
    }
}
@media (max-width: 767px) {
    .circle-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Outline button for use over a photo or dark background (a dark-bg
   companion to the existing .btn-primary-outline, which assumes a light one). */
.btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 27px;
    color: var(--color-white);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    background: rgb(56 33 20 / 55%);
    border: 1.5px solid #ba9d75;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-outline-light:hover {
    color: var(--color-white);
    background: var(--color-light-primary);
}
.btn-outline-light svg {
    fill: currentColor;
}

/* ---- Media row: a tall image beside eyebrow/title/subtitle/text, laid
   out with Bootstrap's row/col-lg-* (see .media-row usage in the Our
   Founder template) rather than a bespoke grid. ---- */
.media-row__figure {
    position: relative;
    height: var(--media-figure-h, 645px);
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
}
.media-row__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-row__caption {
    position: absolute;
    bottom: 22px;
    left: 30px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--color-white);
}
.media-row__figure:has(.media-row__caption)::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 120px;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / 55%));
}
.media-row__caption strong {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.3;
}
.media-row__caption span {
    font-size: var(--fs-small);
    font-weight: 400;
}
.media-row__content {
    max-width: 500px;
    padding: 0 0 0 40px;
}
.media-row__content .section-eyebrow {
    width: 55px;
    margin: 0 0 30px;
}
@media (max-width: 1199px) {
    .media-row__figure {
        height: 560px;
    }
}
@media (max-width: 991px) {
    .media-row__figure {
        height: 420px;
    }
    .media-row__content {
        max-width: none !important;
        padding: 0;
    }
}
@media (max-width: 767px) {
    .media-row__figure {
        height: 320px;
    }
}

/* ---- Quote band: full-width photo strip with a large centred quote ---- */
.quote-band {
    display: flex;
    align-items: center;
    height: 337px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.quote-band__blockquote {
    margin: 0 auto;
    color: var(--color-white);
    text-align: center;
}
.quote-band__blockquote p {
    margin: 0;
    font-family: var(--font-secondary);
    font-style: italic;
    font-weight: 500;
    line-height: 1.15;
}
.quote-band__lead {
    font-size: var(--fs-h2);
}
.quote-band__sub {
    margin-top: 6px !important;
    font-size: var(--fs-h4);
}
.quote-band__rule {
    display: block;
    width: 74px;
    height: 2px;
    margin: 22px auto 24px;
    background: var(--color-light-primary);
}
.quote-band__blockquote footer {
    color: rgb(255 255 255 / 92%);
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: 0.03em;
}
.quote-band__blockquote footer::before {
    content: '\2014\00a0';
}
@media (max-width: 767px) {
    .quote-band {
        height: auto;
        min-height: 300px;
        padding: 40px 0;
    }
}

/* ---- Icon stat grid: circular icon + title + rule + text, in Bootstrap
   columns (col-12 col-md-6 col-xl-3) - the divider technique mirrors
   .highlights-section__item exactly, just drawn with a border instead of
   the highlights bar's colour-mix border. ---- */
.icon-stat-grid__item {
    padding: 0 40px;
    text-align: center;
}
.icon-stat-grid__item .care-accent {
    margin-bottom: 21px;
}
.icon-stat-grid__item + .icon-stat-grid__item {
    border-left: 1px solid #f0dcc4;
}
.icon-stat-grid__item h3 {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.15;
}
.icon-stat-grid__item .section-description {
    max-width: 260px;
    margin: 0 auto;
}

/* Bold dark-band treatment: an alternative to a plain white section
   background, for the same rhythm home page gets from .highlights-section -
   a solid accent colour with white text, breaking up a long run of pale
   sections. Reusable on any .section-padding section, not just icon-stat-grid. */
.section-band-dark {
    background: var(--color-primary);
}
.section-band-dark .section-eyebrow {
    background: var(--color-light-primary);
}
.section-band-dark__title {
    color: var(--color-white) !important;
}
.section-band-dark__desc {
    color: rgb(255 255 255 / 78%) !important;
}
.section-band-dark .icon-stat-grid__item + .icon-stat-grid__item,
.section-band-dark .icon-stat-grid__item:nth-child(n + 3) {
    border-color: rgb(255 255 255 / 18%) !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .icon-stat-grid__item:nth-child(odd) {
        border-left: 0;
        padding-bottom: 25px;
    }
    .icon-stat-grid__item:nth-child(n + 3) {
        padding-top: 25px;
        border-top: 1px solid #f0dcc4;
    }
}
@media (max-width: 767px) {
    .icon-stat-grid__item + .icon-stat-grid__item {
        border-left: 0;
        border-top: 1px solid #f0dcc4;
        padding-top: 25px;
        margin-top: 25px;
    }
}

/* ---- Icon pill row: a small 3-up icon+label strip under a text block ---- */
.icon-pill-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    max-width: 481px;
    margin: 30px 0 0;
    padding: 26px 0 0;
    list-style: none;
    border-top: 1px solid #e8d8c7;
}
.icon-pill-row__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
}
.icon-pill-row__item .care-accent {
    margin-bottom: 12px;
}
.icon-pill-row__item:first-child {
    padding-right: 30px;
}
.icon-pill-row__item + .icon-pill-row__item {
    border-left: 1px solid #e8d8c7;
}
@media (max-width: 767px) {
    .icon-pill-row {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    .icon-pill-row__item + .icon-pill-row__item {
        border-left: 0;
    }
}

/* =====================================================================
   6. Our Founder sections
   ---------------------------------------------------------------------
   Same convention as .heritage-section, .highlights-section,
   .care-pillars-section etc. above: each section gets its own BEM
   class for the one-off values (colours, sizes, spacing specific to
   its own content), while the shared .section-title/.section-subtitle/
   .section-description/.section-eyebrow/.section-padding classes carry
   the baseline typography and spacing. No inline styles.
   ===================================================================== */

/* ---- A Vision of Health in Wholeness ---- */
.wholeness-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fdf6ee 0%, #fbf7ee 100%);
}
.wholeness-section__leaf {
    top: auto;
    bottom: -8px;
    left: 0;
}
.wholeness-section__diagram {
    max-width: 520px;
    overflow: visible;
    color: var(--color-light-primary);
}
.wholeness-section__diagram-labels text {
    font-family: var(--font-primary);
    font-size: var(--fs-small);
    font-weight: 400;
    letter-spacing: 0.22em;
}
.wholeness-section__description p {
    margin: 0 0 16px;
}
.wholeness-section__description p:last-child {
    margin-bottom: 0;
}

/* ---- The Himalayan Tradition ---- */
.tradition-section {
    padding-bottom: 0 !important;
    background: #fefefe;
}
.tradition-section__title {
    margin-bottom: 10px;
    line-height: 1.1;
}
.tradition-section__subtitle {
    margin-bottom: 14px;
}
.tradition-section__description {
    margin-top: 0;
}
.tradition-section__quote {
    margin: 0;
}

/* ---- Bridging Science & Inner Experience ---- */
.science-section {
    background: #fdfaf3;
}
.science-section__intro {
    position: relative;
    min-height: 485px;
    padding: 20px 26px 0 8px;
    border-right: 2px solid var(--color-light-primary);
}
.science-section__title {
    margin-bottom: 15px;
    font-size: var(--fs-h2);
    line-height: 1.04;
}
.science-section__subtitle {
    max-width: 320px;
    margin-bottom: 22px;
}
.science-section__description {
    max-width: 320px;
}
.science-section__sketch {
    position: absolute;
    bottom: 0;
    left: -12px;
    width: 350px;
    max-width: none;
    height: auto;
    pointer-events: none;
}
.science-section__cards {
    padding-left: 26px;
    align-self: center;
}
@media (max-width: 991px) {
    .science-section__intro {
        min-height: 0;
        padding: 0 0 30px;
        border-right: 0;
    }
    .science-section__sketch {
        display: none;
    }
    .science-section__cards {
        padding-left: 12px;
    }
}

/* ---- A Vision of Healing ---- */
.healing-section {
    position: relative;
    isolation: isolate;
    padding-bottom: 0 !important;
    color: var(--color-white);
    background-color: #24382c;
    background-position: center 60%;
    background-repeat: no-repeat;
    background-size: cover;
}
.healing-section::before {
    /* soothing deep-green veil over the garden photo, a little lighter in the middle */
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgb(36 62 46 / 70%), transparent 75%),
        linear-gradient(180deg, rgb(20 38 28 / 88%) 0%, rgb(28 48 36 / 80%) 50%, rgb(18 34 25 / 90%) 100%);
}
.healing-section__eyebrow {
    width: 66px;
    margin-bottom: 19px;
    background: #d9b98d;
}
.healing-section__title {
    margin-bottom: -3px;
    color: var(--color-white);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.1;
}
.healing-section__subtitle {
    color: #e7c293;
    font-size: var(--fs-h2);
    font-weight: 500;
}
.healing-section__description {
    margin-top: 8px;
    color: rgb(255 255 255 / 88%);
    font-size: var(--fs-lead);
    line-height: 1.28;
}
.healing-section__footer {
    padding: 40px 0 90px;
    text-align: center;
}
.healing-section__footer .healing-section__eyebrow {
    width: 46px;
    margin-bottom: 18px;
}
.healing-section__closing {
    margin-bottom: 21px;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.28;
}

/* ---- Knowledge in the Service of Humanity ---- */
.institution-section {
    background: #fff;
}
.institution-section__content {
    max-width: 480px;
}
.institution-section__title {
    margin-bottom: 8px;
    font-size: var(--fs-h2);
    line-height: 1.02;
}
.institution-section__subtitle {
    margin-bottom: 42px;
    font-size: var(--fs-h3);
}

/* ---- A Vision That Continues to Serve ---- */
.serve-section__title {
    margin-bottom: 23px;
    font-size: var(--fs-h2);
    line-height: 1.1;
}
.serve-section__icon--care {
    color: var(--color-white);
    background: #6b3729;
}

/* ---- A Legacy That Lives in Our Care ---- */
.legacy-section {
    position: relative;
    overflow: hidden;
    background: #f8f4eb;
}
.legacy-section__figure {
    height: 647px;
}
.legacy-section__content {
    max-width: 550px;
}
.legacy-section__title {
    max-width: 480px;
    margin-bottom: 8px;
    font-size: var(--fs-h2);
    line-height: 1.03;
}
.legacy-section__subtitle {
    margin-bottom: 26px;
    font-size: var(--fs-h2);
}
.legacy-section__pillar-icon--care,
.legacy-section__pillar-icon--tradition,
.legacy-section__pillar-icon--healing {
    color: var(--color-white);
}
.legacy-section__pillar-icon--care {
    background: #73321e;
}
.legacy-section__pillar-icon--tradition {
    background: #6c693c;
}
.legacy-section__pillar-icon--healing {
    background: #b24728;
}
.legacy-section__description p {
    margin: 0 0 16px;
}
.legacy-section__description p:last-child {
    margin-bottom: 0;
}

/* ---- Responsive ---- */

/* ---- Shared: small uppercase kicker label (colour accent above a title) ---- */
.section-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--color-light-primary);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.section-kicker--center {
    text-align: center;
}
.section-kicker--regular {
    font-weight: 400;
}
.section-kicker--on-image {
    color: #fff;
}

/* ==========================================================================
   7. Shared carousel, testimonial videos, justified text
   ========================================================================== */

/* ---- Shared carousel (the Herbal Garden carousel, reusable on any page).
   Markup: .ui-carousel[data-ui-carousel] > arrow--prev, .ui-carousel__viewport >
   .ui-carousel__track > slides, arrow--next; optional sibling .ui-carousel__progress.
   Slides per view come from --per-view (read by assets/js/ui-carousel.js). ---- */
.ui-carousel {
    --per-view: 4;
    --gap: 28px;
    position: relative;
    margin-top: 42px;
}
.ui-carousel--3 {
    --per-view: 3;
}
.ui-carousel__viewport {
    overflow: hidden;
}
.ui-carousel__track {
    display: flex;
    gap: var(--gap);
    transition: transform .45s ease;
    will-change: transform;
}
.ui-carousel__track > * {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
    min-width: 0;
}
.ui-carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0 0 5px;
    border: 1px solid #d9c9aa;
    border-radius: 50%;
    background: #fffdf8;
    color: #927039;
    font: 38px/1 Georgia, serif;
    transform: translateY(-50%);
    cursor: pointer;
}
.ui-carousel__arrow--prev {
    left: -62px;
}
.ui-carousel__arrow--next {
    right: -62px;
}
.ui-carousel__arrow:disabled {
    opacity: .38;
    cursor: default;
}
.ui-carousel__progress {
    position: relative;
    width: 460px;
    max-width: 90%;
    height: 3px;
    margin: 34px auto 0;
    overflow: hidden;
    background: #d9d8d3;
}
.ui-carousel__progress span {
    display: block;
    height: 100%;
    background: #b27c1c;
    transition: transform .45s ease, width .3s ease;
}
@media (max-width: 1750px) {
    .ui-carousel {
        margin-right: 52px;
        margin-left: 52px;
    }
    .ui-carousel__arrow--prev { left: -52px; }
    .ui-carousel__arrow--next { right: -52px; }
}
@media (max-width: 991px) {
    .ui-carousel,
    .ui-carousel--3 {
        --per-view: 2;
        --gap: 22px;
    }
}
@media (max-width: 575px) {
    .ui-carousel,
    .ui-carousel--3 {
        --per-view: 1;
        --gap: 0px;
        margin-right: 38px;
        margin-left: 38px;
    }
    .ui-carousel__arrow--prev { left: -42px; }
    .ui-carousel__arrow--next { right: -42px; }
}

/* Full-bleed carousel variant: spans the screen, arrows sit over the slides. */
.ui-carousel.ui-carousel--bleed {
    margin-right: 0;
    margin-left: 0;
}
.ui-carousel--bleed .ui-carousel__arrow {
    background: rgb(255 253 248 / 92%);
    box-shadow: 0 4px 14px rgb(0 0 0 / 14%);
}
.ui-carousel--bleed .ui-carousel__arrow--prev { left: 20px; }
.ui-carousel--bleed .ui-carousel__arrow--next { right: 20px; }
.ui-carousel--bleed .ui-carousel__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

/* ---- Shared: icon + label strip, usable on light or dark/on-image backgrounds ---- */
.icon-pill-row--on-image {
    max-width: 720px;
    margin: 28px auto 0;
    border-top-color: rgb(255 255 255 / 25%);
}
.icon-pill-row--on-image .icon-pill-row__item {
    color: #fff;
}
.icon-pill-row--on-image .icon-pill-row__item + .icon-pill-row__item {
    border-left-color: rgb(255 255 255 / 25%);
}

/* Patient video testimonials: poster card -> full-screen viewer (home-page.php). */
.testi-swiper .swiper-slide {
    display: flex;
}
.testi-swiper .swiper-slide > * {
    flex: 1 1 auto;
    width: 100%;
}
.srhu-student-video__frame.testi-video {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #1d140d;
    color: #fff;
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.testi-video img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    transition: transform .5s ease;
}
.testi-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 45%, rgb(0 0 0 / 55%) 100%);
}
.testi-video:hover img {
    transform: scale(1.04);
}
.testi-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 0 0 10px rgb(255 255 255 / 22%);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, box-shadow .25s ease;
}
.testi-video__play svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
    fill: var(--color-primary);
}
.testi-video:hover .testi-video__play,
.testi-video:focus-visible .testi-video__play {
    box-shadow: 0 0 0 16px rgb(255 255 255 / 25%);
    transform: translate(-50%, -50%) scale(1.06);
}
.testi-video__label {
    position: absolute;
    right: 0;
    bottom: 18px;
    left: 0;
    z-index: 1;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 1.6px;
    text-align: center;
    text-transform: uppercase;
}
.testi-lightbox-open {
    overflow: hidden;
}
.testi-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(12 8 5 / 94%);
}
.testi-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.testi-lightbox::backdrop {
    background: rgb(12 8 5 / 94%);
}
.testi-lightbox__video {
    display: block;
    width: auto;
    max-width: calc(100vw - 32px);
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    border-radius: 6px;
    background: #000;
}
.testi-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 92%);
    color: #2b1a10;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.testi-lightbox__close:hover {
    background: #fff;
    color: #2b1a10;
}

/* Justified body paragraphs (classes added by assets/js/justify.js). */
.is-justified {
    text-align: justify;
    text-justify: inter-word;
}
.is-justified-center {
    text-align: justify;
    text-align-last: center;
    text-justify: inter-word;
}

/* ==========================================================================
   Section labels - one style across the theme
   The small label above a section heading ("OUR HERBAL GARDEN",
   "THE HIMALAYAN TOUCH" ...): capitals, regular weight. Each label keeps the
   colour, size and spacing its own section gives it. !important because the
   page stylesheets load after this file and set their own weights.
   ========================================================================== */
.section-kicker,
.page-hero__kicker,
.au-page .au-kicker,
.au-page p.section-subtitle,
.section-subtitle:has(+ .section-title), /* a subtitle used as the label above a heading */
.ct-kicker,
.hc-kicker,
.cu-kicker,
.rp-kicker,
.ht-kicker {
    font-weight: 400 !important;
    text-transform: uppercase !important;
}
/* Same size and letter spacing everywhere, matching "THE HIMALAYAN DIFFERENCE"
   on the home page (hero labels on photos keep their own, larger size). */
.section-kicker,
.au-page .au-kicker,
.au-page p.section-subtitle,
.section-subtitle:has(+ .section-title),
.ct-kicker,
.hc-kicker,
.cu-kicker,
.rp-kicker,
.ht-kicker {
    font-family: var(--font-primary) !important;
    font-size: var(--fs-xs) !important;
    letter-spacing: 2px !important;
    line-height: 1.5 !important;
}

/* Quote bands (Home, About Us, Our Founder): all use the mountain photo
   founder/quote-band-mountains.webp. Anchor it to the top so the snowy peaks
   stay in view whatever the section's height; horizontal position unchanged. */
.quote-section,
.au-page .au-quote,
.quote-band {
    background-position-y: top !important;
}
/* Bridging Science: archive photo of the Menninger study in place of the
   paragraph and mountain sketch, below the subtitle. */
.science-section__photo {
    margin: 22px 26px 0 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgb(60 40 20 / 15%);
}
.science-section__photo img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .science-section__photo {
        max-width: 480px;
        margin-right: 0;
    }
}